/* Jelly Cakes Studio — la caja «Just for you»
   Mundo: caja rosa de pastelería (su color), ventana de acetato, su cinta blanca con «JUST FOR YOU»,
   sello amarillo manteca con el logo, inserto de cartón blanco para el catálogo. */

@font-face { font-family: 'Young Serif'; src: url(../fonts/young-serif-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(../fonts/figtree-400-700.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Josefin Sans'; src: url(../fonts/josefin-sans-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --rosa: #F07488;            /* caja y cinta: el rosa del logo */
  --rosa-luz: #F58C9D;
  --rosa-corte: #DC5C74;      /* borde troquelado de las ventanas */
  --rosa-tinta: #C23B5B;      /* rosa para texto sobre blanco (5,2:1) */
  --seda: #FCE4DD;            /* papel de seda */
  --seda-luz: #FCE7EA;
  --manteca: #FAD28C;         /* sello */
  --manteca-borde: #EDBB62;
  --tinta: #4A2230;           /* texto (13,4:1 sobre blanco; 4,8:1 sobre la caja) */
  --tinta-suave: #7A4E5C;
  --tinta-hover: #63303F;
  --linea: #F0D2CA;
  --blanco: #FFFFFF;
  --serif: 'Young Serif', ui-serif, Georgia, serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mayus: 'Josefin Sans', 'Figtree', system-ui, sans-serif;
  --sombra-caja: 0 40px 80px -40px rgba(74, 34, 48, .55), 0 14px 30px -18px rgba(74, 34, 48, .35);
  --sombra-suave: 0 14px 30px -18px rgba(74, 34, 48, .35), 0 2px 6px -2px rgba(74, 34, 48, .12);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --barra: 64px;
  --margen: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #F8D6D8 url(../img/seda.jpg) 0 0 / 1000px repeat;   /* papel de seda; mientras carga, un rosa cercano */
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--rosa-tinta);
  overflow-x: hidden;
}
html.fondo-propio body { background: var(--fondo); background-blend-mode: var(--fondo-mezcla, normal); }   /* «Mi web → Fondo de tu web» */
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.06; letter-spacing: -.012em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
button { font: inherit; color: inherit; }
::selection { background: var(--rosa); color: var(--blanco); }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--rosa) var(--seda); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rosa); border-radius: 999px; border: 2px solid var(--seda); }
::-webkit-scrollbar-track { background: var(--seda); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 1.25em; height: 1.25em; flex: none; }
.contenedor { width: min(100%, 1200px); margin-inline: auto; }

.saltar { position: fixed; left: 12px; top: -60px; z-index: 50; background: var(--tinta); color: var(--blanco); padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: top .2s; }
.saltar:focus { top: 12px; }

/* ---------- botones y píldoras ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border: 0; border-radius: 999px;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .25s, transform .25s var(--ease), box-shadow .25s;
}
.boton-tinta { background: var(--tinta); color: var(--blanco); box-shadow: 0 10px 22px -12px rgba(74, 34, 48, .7); }
.boton-ancho { width: 100%; }
.boton:disabled { background: #B9A3A9; box-shadow: none; cursor: not-allowed; }
@media (hover: hover) { .boton-tinta:not(:disabled):hover { background: var(--tinta-hover); transform: translateY(-1px); } }
.boton:not(:disabled):active { transform: scale(.98); }

.pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.pildora {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta);
  font: 600 .95rem/1.1 var(--sans); cursor: pointer; text-align: left;
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.pildora { position: relative; padding: 0 22px; }
/* la tilde aparece sin cambiar el ancho de la píldora (el texto se corre 10 px adentro): al elegir no se corre ningún
   renglón ni baja lo que sigue. Antes la tilde ensanchaba la píldora y empujaba todo hacia abajo en el teléfono. */
.pildora svg { position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .25s var(--ease); }
.pildora[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); padding-left: 32px; padding-right: 12px; }
.pildora[aria-pressed="true"] svg { opacity: 1; transform: none; }
@media (hover: hover) { .pildora:not([aria-pressed="true"]):hover { border-color: var(--tinta); } }
.pildora:active { transform: scale(.97); }
.pildora .muestra { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(74, 34, 48, .25); flex: none; }

.enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }
.enlace-boton { background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: .25em; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- barra (aparece al salir de la tapa) ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--barra);
  display: flex; align-items: center; gap: 18px; padding: 0 var(--margen);
  background: var(--blanco); border-bottom: 1px solid var(--linea);
  box-shadow: 0 10px 24px -20px rgba(74, 34, 48, .6);
  transform: translateY(-105%); transition: transform .45s var(--ease);
}
.barra.visible { transform: none; }
.barra-logo img { height: 42px; width: auto; }
.barra-nav { display: none; gap: clamp(18px, 1.7vw, 26px); margin-left: auto; }
.barra-nav a { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.barra-nav a.activo { border-bottom-color: var(--rosa); }
@media (hover: hover) { .barra-nav a:hover { border-bottom-color: var(--rosa); } }
.barra .idioma { margin-left: auto; }
.barra-nav a.nav-caja { padding: 6px 14px; border-radius: 999px; background: var(--seda); border-bottom: 0; }
.barra-nav a.nav-caja.activo { background: var(--tinta); color: var(--blanco); }
@media (hover: hover) { .barra-nav a.nav-caja:hover { background: var(--tinta); color: var(--blanco); } }
.boton-menu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--tinta); color: var(--blanco); font: 600 .95rem/1 var(--sans); cursor: pointer; }
.boton-menu svg { width: 20px; height: 20px; }
.oculta-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1180px) { .barra-nav { display: flex; align-items: center; } .barra .idioma { margin-left: 8px; } .boton-menu { display: none; } }

/* menú del teléfono: hoja que baja desde arriba */
.menu-hoja { position: fixed; inset: 0; z-index: 55; }
.menu-fondo { position: absolute; inset: 0; background: rgba(74, 34, 48, .45); animation: aparece .25s ease both; }
.menu-panel {
  position: absolute; left: 0; right: 0; top: 0; padding: 0 var(--margen) 26px;
  background: var(--blanco); border-radius: 0 0 28px 28px; box-shadow: 0 24px 40px -24px rgba(74, 34, 48, .6);
  display: grid; gap: 4px; animation: baja-menu .4s var(--ease) both;
}
@keyframes baja-menu { from { transform: translateY(-24px); opacity: 0; } }
.menu-cabeza { display: flex; align-items: center; justify-content: space-between; height: var(--barra); margin-bottom: 6px; }
.menu-cabeza img { height: 42px; width: auto; }
.menu-cerrar { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--seda); color: var(--tinta); cursor: pointer; }
.menu-cerrar svg { width: 20px; height: 20px; }
.menu-panel a { display: flex; align-items: center; min-height: 54px; padding: 0 6px; font: 400 1.6rem/1.1 var(--serif); text-decoration: none; border-bottom: 1px solid var(--seda); }
.menu-panel a.nav-caja { margin-top: 10px; justify-content: center; border: 0; border-radius: 999px; background: var(--tinta); color: var(--blanco); font: 600 1.05rem/1 var(--sans); }

.idioma { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--seda); }
.idioma button { border: 0; background: none; min-width: 40px; min-height: 34px; border-radius: 999px; font: 600 .78rem/1 var(--mayus); letter-spacing: .14em; padding: 2px 8px 0; cursor: pointer; color: var(--tinta-suave); }
.idioma button[aria-pressed="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 2px 6px -2px rgba(74, 34, 48, .3); }
.idioma-caja { background: rgba(255, 255, 255, .28); }
.idioma-caja button { color: var(--tinta); }

/* ---------- la tapa (primera pantalla) ---------- */
.tapa { position: relative; height: 100svh; min-height: 640px; }
.anima .tapa { height: 235svh; }
.escena {
  position: relative; height: 100svh; min-height: 640px;
  --pad-escena: 12px;
  display: grid; place-items: center; padding: var(--pad-escena);
  perspective: 1900px; perspective-origin: 50% 0%;
}
.anima .escena { position: sticky; top: 0; overflow: hidden; }

.caja {
  --alza: 0; --despega: 0; --afloja: 0;
  position: relative; z-index: 2; width: 100%; height: calc(100svh - 2 * var(--pad-escena)); min-height: 600px; max-width: 1240px; max-height: 820px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px;
  padding: 14px 14px 18px;
  border-radius: 30px;
  background:
    radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, .22), transparent 60%),
    linear-gradient(170deg, var(--rosa-luz), var(--rosa) 48%, #EE6F84);
  box-shadow: var(--sombra-caja), inset 0 2px 0 rgba(255, 255, 255, .35);
  transform-origin: 50% 0%;
  transform: translateY(calc(var(--alza) * -114%)) rotateX(calc(var(--alza) * 16deg)) scale(calc(1 + var(--alza) * .05));
  will-change: transform;
}
.caja-arriba { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 0; }
.caja-logo { height: clamp(52px, 8.5svh, 84px); width: auto; filter: drop-shadow(0 2px 0 rgba(160, 40, 70, .18)); }
.caja-controles { display: flex; align-items: center; gap: 8px; }
.boton-menu-caja { width: 44px; padding: 0; justify-content: center; background: rgba(255, 255, 255, .28); color: var(--tinta); }
@media (min-width: 900px) { .boton-menu-caja { display: none; } }

.ventana {
  position: relative; min-height: 0; border-radius: 22px; overflow: hidden;
  background: var(--rosa-luz);
}
.ventana-video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.ventana-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* si Yarleys puso una foto de portada */
/* borde troquelado y profundidad del cartón, por encima del video */
.ventana::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 5px var(--rosa-corte), inset 0 14px 22px -8px rgba(74, 34, 48, .45), inset 0 -6px 14px -8px rgba(74, 34, 48, .3);
}
.acetato {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, .34) 41%, rgba(255, 255, 255, .06) 47%, transparent 56%);
  background-size: 260% 100%; background-position: 100% 0;
  animation: brillo 2.6s var(--ease) .6s both;
}
@keyframes brillo { to { background-position: 0% 0; } }

.cinta {
  position: absolute; z-index: 3; left: 0; right: 0; top: var(--cinta-y, 52%);
  height: 46px; margin-top: -23px;
  perspective: 1400px; perspective-origin: 50% 50%; transform-style: preserve-3d;
}
/* lo pegado a la caja, la curva donde se despega y lo ya despegado, levantado hacia quien mira */
.cinta-pegada { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; box-shadow: 0 8px 14px -10px rgba(74, 34, 48, .45); }
.cinta-pegada, .cinta-cara { background: #FBF4F2 url(../img/cinta.jpg) 0 0 / auto 100% repeat-x; }
.cinta.pintada .cinta-pegada, .cinta.pintada .cinta-cara { background: #FBF4F2 var(--cinta-img) 0 0 / var(--cinta-w, 100%) 100% no-repeat; }
.cinta-tramo { position: absolute; top: 0; left: 0; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; }
/* cada tramo tiene dos caras: el raso con las letras y el revés liso (lo que se ve si el tramo queda de espaldas) */
.cinta-tramo b { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cinta-dorso { transform: rotateY(180deg); background: linear-gradient(180deg, #F3E8E5, #E9DBD7 48%, #F0E4E1); box-shadow: inset 0 1px 0 rgba(74, 34, 48, .1), inset 0 -1px 0 rgba(74, 34, 48, .1); }
/* lo levantado se esfuma a lo largo (el revés está girado: el degradé va al revés) */
.cinta-suelta .cinta-cara { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--esfuma, 200px) * .3), transparent var(--esfuma, 200px)); mask-image: linear-gradient(90deg, #000 0, #000 calc(var(--esfuma, 200px) * .3), transparent var(--esfuma, 200px)); }
.cinta-suelta .cinta-dorso { -webkit-mask-image: linear-gradient(270deg, #000 0, #000 calc(var(--esfuma, 200px) * .3), transparent var(--esfuma, 200px)); mask-image: linear-gradient(270deg, #000 0, #000 calc(var(--esfuma, 200px) * .3), transparent var(--esfuma, 200px)); }
/* la sombra de lo levantado sobre la caja */
.cinta-sombra {
  position: absolute; left: 0; top: 12px; height: 100%; width: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(74, 34, 48, .42), rgba(74, 34, 48, .16) 50%, transparent);
  border-radius: 40px; filter: blur(8px);
}
.cinta-pista { display: flex; width: max-content; height: 100%; align-items: center; }
.cinta-pista span { font: 400 .92rem/1.3 var(--serif); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; padding-right: .9em; color: var(--tinta); }

.sello {
  position: absolute; z-index: 5; left: var(--sello-x, 50%); top: var(--cinta-y, 52%);
  width: clamp(96px, 13.5svh, 140px); aspect-ratio: 1; border-radius: 50%;   /* la etiqueta redonda con su logo */
  display: grid; place-items: center;
  transform-origin: 8% 50%;
  transform: translate(-50%, -50%) perspective(520px) rotateY(calc(var(--despega) * -78deg)) rotateZ(calc(var(--despega) * -10deg)) translateZ(calc(var(--despega) * 40px));
  opacity: calc(1 - var(--despega) * 1.25);
  filter: drop-shadow(0 8px 10px rgba(74, 34, 48, .35));
}
.mono {
  position: absolute; z-index: 4; left: var(--sello-x, 50%); top: var(--cinta-y, 52%);
  width: clamp(150px, 24svh, 250px); height: auto; pointer-events: none;
  transform: translate(-50%, -40%) scale(calc(1 - var(--afloja) * .45)) rotate(calc(var(--afloja) * -14deg));
  opacity: calc(1 - var(--afloja) * 1.2);
  filter: drop-shadow(0 10px 12px rgba(74, 34, 48, .3));
}
.sello img { width: 100%; height: auto; border-radius: 50%; }

.caja-texto { padding: 2px 6px 0; display: grid; gap: 12px; }
.caja-texto h1 { font-size: clamp(1.75rem, 1.05rem + 3.1vw, 3.5rem); }
.caja-bajada { font-size: clamp(.98rem, .92rem + .3vw, 1.15rem); max-width: 46ch; }
.arranque { display: grid; gap: 8px; margin-top: 2px; }
.arranque-pregunta { font: 600 .74rem/1.3 var(--mayus); letter-spacing: .2em; text-transform: uppercase; padding-top: 3px; }
.arranque .pildora { border-color: transparent; min-height: 42px; font-size: .92rem; }
@media (hover: hover) { .arranque .pildora:hover { border-color: var(--tinta); } }

.caja-pie { display: none; }
.caja-info { font-weight: 600; font-size: .95rem; }
.abrir {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-left: auto;
  font: 600 .72rem/1.3 var(--mayus); letter-spacing: .2em; text-transform: uppercase;
}
.abrir svg { width: 1.3em; height: 1.3em; animation: baja 1.8s var(--ease) infinite; }
@keyframes baja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* adentro de la caja: forrada en papel de seda, con un inserto chico en el centro */
.adentro {
  --dentro: 0;
  position: absolute; inset: 12px; z-index: 1; margin: auto; max-width: 1240px; max-height: 820px;
  border-radius: 30px;
  background: #F8D6D8 url(../img/seda.jpg) center / 760px;
  box-shadow: inset 0 0 0 10px var(--rosa), inset 0 34px 50px -24px rgba(74, 34, 48, .45), inset 0 -20px 40px -30px rgba(74, 34, 48, .3);
  display: none; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: center;
  gap: clamp(14px, 3svh, 30px); padding: 34px 24px;
}
.anima .adentro { display: grid; }
.adentro-texto { font: 400 clamp(1.4rem, 1rem + 2vw, 2.4rem)/1.1 var(--serif); text-align: center; opacity: var(--dentro); transform: translateY(calc((1 - var(--dentro)) * 16px)); }
.adentro-inserto {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px;
  width: min(100%, 300px); padding: 12px; border-radius: 22px; background: var(--blanco);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 0 0 1px rgba(74, 34, 48, .06), 0 18px 30px -20px rgba(74, 34, 48, .55);
  transform: translateY(calc((1 - var(--dentro)) * 26px)); opacity: clamp(0, calc(var(--dentro) * 1.6), 1);
}
/* con más de 4 categorías, el mismo inserto se desliza a la derecha: páginas de 4 con la siguiente asomando */
.inserto-paginas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-top: 6px; margin-top: -6px;   /* lugar para que la foto suba al pasar el mouse */
}
.inserto-paginas::-webkit-scrollbar { display: none; }
.con-paginas .inserto-paginas { grid-auto-columns: calc(100% - 26px); }
.inserto-pagina { scroll-snap-align: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; align-content: start; min-width: 0; }
.inserto-pagina > button {
  display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; min-width: 0;
  opacity: clamp(0, calc(var(--dentro) * 1.6 - var(--i) * .12), 1);
}
.inserto-puntos { display: flex; justify-content: center; gap: 2px; margin-bottom: -6px; }
.inserto-puntos button { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.inserto-puntos button::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
  background: #E8C3BC; transition: width .3s var(--ease), margin .3s var(--ease), background .3s;
}
.inserto-puntos button[aria-pressed="true"]::after { width: 20px; margin-left: -10px; background: var(--tinta); }
.adentro-inserto .hueco {
  aspect-ratio: 4 / 5; border-radius: 16px; padding: 5px;
  box-shadow: inset 0 10px 14px -8px rgba(74, 34, 48, .5), inset 0 -2px 0 rgba(255, 255, 255, .85), 0 1px 0 #fff, 0 0 0 1.5px rgba(74, 34, 48, .07);
}
.adentro-inserto .hueco img { border-radius: 12px; }
.adentro-inserto .rotulo-linea { display: grid; gap: 1px; padding: 0 3px; min-width: 0; }
.adentro-inserto b { font: 400 .92rem/1.1 var(--serif); font-weight: 400; }
.adentro-inserto small { font: 600 .72rem/1.3 var(--mayus); letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-tinta); }
@media (hover: hover) { .inserto-pagina > button:hover .hueco img { transform: translateY(-5px); box-shadow: 0 14px 20px -12px rgba(74, 34, 48, .55); } }
@media (min-width: 900px) {
  .adentro-inserto { width: min(100%, 720px); padding: 16px; gap: 8px; }
  .inserto-pagina { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .con-paginas .inserto-paginas { grid-auto-columns: calc(100% - 40px); gap: 16px; }
  .adentro-inserto b { font-size: 1rem; }
}

/* ---------- secciones ---------- */
section { scroll-margin-top: var(--barra); }
.seccion-cabeza { display: grid; gap: 10px; margin-bottom: clamp(22px, 4vw, 36px); max-width: 62ch; }
.seccion-cabeza h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
.seccion-cabeza p { color: var(--tinta-suave); font-size: 1.05rem; }

/* el inserto: catálogo */
.inserto { position: relative; z-index: 3; background: var(--blanco); padding: clamp(64px, 9vw, 120px) var(--margen) clamp(64px, 8vw, 110px); }
.filtros { margin-bottom: 26px; }
.compartimentos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
@media (min-width: 720px) { .compartimentos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 20px; } }
@media (min-width: 1100px) { .compartimentos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.compartimentos li { min-width: 0; }
.compartimento { display: grid; gap: 12px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.hueco {
  position: relative; aspect-ratio: 4 / 5; border-radius: 24px; padding: 7px;
  background: var(--seda);
  box-shadow: inset 0 3px 8px rgba(74, 34, 48, .18), inset 0 -1px 0 rgba(255, 255, 255, .7);
}
.hueco img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 18px;
  object-position: var(--foco, 50% 50%);
  box-shadow: 0 1px 2px rgba(74, 34, 48, .2);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (hover: hover) {
  .compartimento:hover .hueco img { transform: translateY(-8px) scale(1.015); box-shadow: 0 22px 30px -16px rgba(74, 34, 48, .55); }
}
.chip-real { position: absolute; z-index: 1; left: 14px; top: 14px; padding: 5px 10px 4px; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 600 .72rem/1.2 var(--mayus); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); }
.compartimento-nombre { font: 400 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.15 var(--serif); }
.compartimento-linea { font: 600 .72rem/1.3 var(--mayus); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-tinta); margin-top: -6px; }
.compartimentos li.sale { animation: entra .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }

/* el proceso: la cara rosa con tres ventanas */
.proceso {
  position: relative; z-index: 3;
  background: linear-gradient(170deg, var(--rosa-luz), var(--rosa) 50%, #EE6F84);
  padding: clamp(64px, 9vw, 120px) var(--margen);
}
.proceso .seccion-cabeza p { color: var(--tinta); }
.ventanas { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: min(76%, 320px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ventanas::-webkit-scrollbar { display: none; }
.ventanas li { scroll-snap-align: start; display: grid; gap: 14px; min-width: 0; }
@media (min-width: 900px) { .ventanas { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 28px; } }
.ventana-chica { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: var(--rosa-luz); }
.ventana-chica video { width: 100%; height: 100%; object-fit: cover; }
.ventana-chica::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 5px var(--rosa-corte), inset 0 14px 22px -8px rgba(74, 34, 48, .45); }
.rotulo { justify-self: start; background: var(--blanco); padding: 10px 16px; border-radius: 6px; box-shadow: 0 8px 14px -10px rgba(74, 34, 48, .55); transform: rotate(-1.2deg); }
.ventanas li:nth-child(2) .rotulo { transform: rotate(1deg); }
.rotulo strong { display: block; font: 400 1.15rem/1.1 var(--serif); }
.ventanas p { font-size: .98rem; max-width: 34ch; }

/* la tarjetita de Yarleys y la gelatina de sol que se arma capa por capa */
.dedicatoria-grilla { display: grid; gap: clamp(36px, 6vw, 70px); align-items: center; justify-items: center; }
@media (min-width: 980px) { .dedicatoria-grilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.sol { margin: 0; display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 380px; }
.sol-lugar { width: min(78vw, 340px); aspect-ratio: 1; filter: drop-shadow(0 22px 26px rgba(74, 34, 48, .28)); }
.sol-svg { width: 100%; height: 100%; }
.sol figcaption { display: grid; gap: 6px; }
.sol strong { font: 400 1.45rem/1.1 var(--serif); }
.sol figcaption span { color: var(--tinta-suave); font-size: .98rem; max-width: 30ch; margin-inline: auto; }
/* en el teléfono la gelatina va al lado de su texto: la sección entera entra en una pantalla al tocar el menú */
@media (max-width: 979px) {
  .dedicatoria-grilla { gap: 30px; }
  .sol { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); align-items: center; justify-items: start; text-align: left; max-width: 440px; gap: 18px; }
  .sol-lugar { width: 100%; filter: drop-shadow(0 14px 18px rgba(74, 34, 48, .26)); }
  .sol strong { font-size: 1.3rem; }
  .sol figcaption span { margin-inline: 0; font-size: .95rem; }
}
.sol-giro { transform-origin: 200px 200px; animation: sol-gira 80s linear infinite; }
@keyframes sol-gira { to { transform: rotate(360deg); } }
.sol-gelatina { transform-origin: 200px 200px; animation: sol-tiembla 9s var(--ease) infinite; }
@keyframes sol-tiembla {
  0%, 21% { transform: scale(1); } 24% { transform: scale(1.025, .975); } 27% { transform: scale(.985, 1.015); }
  30% { transform: scale(1.008, .992); } 33%, 100% { transform: scale(1); }
}
.sol-rayo { transform-origin: 200px 200px; animation: sol-capa 9s var(--ease) infinite; animation-delay: calc(var(--i) * .09s); opacity: 0; }
@keyframes sol-capa {
  0% { opacity: 0; transform: scale(.35); } 7% { opacity: 1; transform: scale(1.04); } 10% { transform: scale(1); }
  78% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; transform: scale(.9); }
}
.sol-brillo { animation: sol-brilla 9s ease-in-out infinite; opacity: 0; }
@keyframes sol-brilla { 0%, 26% { opacity: 0; } 34% { opacity: .55; } 70% { opacity: .35; } 86%, 100% { opacity: 0; } }


.dedicatoria { position: relative; z-index: 3; background: transparent; padding: clamp(70px, 10vw, 130px) var(--margen); }
.tarjetita {
  position: relative; max-width: 760px; margin-inline: auto; width: 100%;
  display: grid; gap: 22px; padding: 46px 26px 30px;
  background: var(--blanco); border-radius: 18px;
  box-shadow: var(--sombra-suave), 0 30px 60px -40px rgba(74, 34, 48, .5);
  transform: rotate(-1.2deg);
}
.tarjetita-ojal { position: absolute; top: 16px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--seda); box-shadow: inset 0 2px 3px rgba(74, 34, 48, .3); }
.tarjetita-hilo { position: absolute; left: 50%; top: -96px; width: 46px; height: 120px; margin-left: -23px; color: var(--rosa); }
.tarjetita-foto { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 66% 30%; box-shadow: 0 0 0 6px var(--seda); }
.tarjetita-texto { display: grid; gap: 14px; align-content: start; }
.tarjetita-texto h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); }
.tarjetita-texto p { max-width: 56ch; }
@media (min-width: 720px) { .tarjetita { grid-template-columns: auto 1fr; gap: 34px; padding: 54px 46px 40px; align-items: center; } .tarjetita-foto { width: 190px; height: 190px; } }

/* el pedido */
.pedido { position: relative; z-index: 3; background: transparent; padding: clamp(64px, 9vw, 120px) var(--margen) clamp(80px, 10vw, 140px); }
.pedido-grilla { display: grid; gap: 30px; align-items: start; }
@media (max-width: 979px) { .etiqueta-lugar { margin-top: 26px; } }   /* aire para el moño cuando se ata */
@media (min-width: 980px) { .pedido-grilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 48px; } .etiqueta-lugar { position: sticky; top: calc(var(--barra) + 60px); } }
.retomar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; background: var(--manteca); font-weight: 600; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paso { background: var(--blanco); border-radius: 20px; box-shadow: 0 1px 0 var(--linea), 0 10px 22px -20px rgba(74, 34, 48, .6); transition: box-shadow .3s; }
.paso.abierto { box-shadow: 0 0 0 2px var(--tinta), 0 18px 34px -24px rgba(74, 34, 48, .7); }
.paso-cabeza { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 20px; }
.paso-cabeza:disabled { cursor: default; }
.marca { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 .9rem/1 var(--sans); border: 1.5px solid var(--linea); color: var(--tinta-suave); background: var(--blanco); transition: background .3s, border-color .3s, color .3s; }
.marca svg { display: none; width: 18px; height: 18px; }
.marca { position: relative; }
.marca::before, .marca::after {
  content: ''; position: absolute; z-index: -1; top: 22px; width: 10px; height: 18px; opacity: 0;
  background: linear-gradient(90deg, #D9546E, #F58C9D 50%, #D9546E);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  transition: opacity .3s, transform .4s var(--ease);
}
.marca::before { left: 6px; transform: rotate(14deg) translateY(-6px); }
.marca::after { right: 6px; transform: rotate(-14deg) translateY(-6px); }
.paso.hecho .marca::before { opacity: 1; transform: rotate(14deg); }
.paso.hecho .marca::after { opacity: 1; transform: rotate(-14deg); }
.paso-cabeza { isolation: isolate; }   /* las colas de la escarapela quedan detrás del círculo */
.paso.hecho .marca { background: var(--rosa-tinta); border-color: var(--rosa-tinta); color: var(--blanco); }
.paso.hecho .marca span { display: none; }
.paso.hecho .marca svg.tilde { display: block; }
.paso.bandera .marca { background: var(--manteca); border-color: var(--manteca-borde); color: var(--tinta); }
.paso.bandera .marca span, .paso.bandera .marca svg.tilde { display: none; }
.paso.bandera .marca svg.flag { display: block; }
.paso-titulo { font: 400 1.22rem/1.15 var(--serif); }
.paso-resumen { display: block; font-size: .92rem; color: var(--tinta-suave); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paso-editar { font-weight: 600; font-size: .9rem; text-decoration: underline; text-underline-offset: .2em; color: var(--rosa-tinta); }
.paso:not(.hecho) .paso-editar, .paso.abierto .paso-editar { display: none; }
.paso-cuerpo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.paso.sin-animar .paso-cuerpo { transition: none; }   /* al avanzar solo, el paso que se cierra se pliega al instante */
.paso.abierto .paso-resumen { display: none; }        /* en el paso abierto lo elegido ya se ve: el resumen no empuja nada */
.paso.abierto .paso-cuerpo { grid-template-rows: 1fr; }
.paso-cuerpo > div { overflow: hidden; min-height: 0; }
.paso-adentro { display: grid; gap: 18px; padding: 2px 18px 20px 66px; }
@media (max-width: 520px) { .paso-adentro { padding-left: 18px; } }
.campo { display: grid; gap: 9px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo-nombre, .campo legend { font: 600 .72rem/1.2 var(--mayus); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); padding: 0; }
.campo legend.oculta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.campo .ayuda { font-size: .9rem; color: var(--tinta-suave); }
.entrada { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--linea); background: var(--seda-luz); color: var(--tinta); font: 400 1rem/1.3 var(--sans); }
.entrada::placeholder { color: #80596A; }   /* 5:1 sobre el campo */
.entrada:focus { outline: none; border-color: var(--tinta); background: var(--blanco); box-shadow: 0 0 0 3px rgba(240, 116, 136, .35); }
textarea.entrada { min-height: 96px; resize: vertical; }
.referencia { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; border-radius: 14px; background: var(--seda); justify-self: start; }
.referencia img { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; }
.referencia button { border: 0; background: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; color: var(--tinta-suave); }
.paso-pie { display: flex; justify-content: flex-start; }
.error { color: #A3203F; font-weight: 600; font-size: .92rem; }

/* la etiqueta del pedido */
.etiqueta {
  position: relative; overflow: visible;
  background: var(--blanco); border-radius: 16px; padding: 26px 24px 22px;
  box-shadow: var(--sombra-suave), 0 30px 60px -44px rgba(74, 34, 48, .6);
  display: grid; gap: 14px;
}
.etiqueta::before { content: ''; position: absolute; inset: 9px; border: 1.5px dashed var(--linea); border-radius: 6px; pointer-events: none; }
.etiqueta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 64px; }
.etiqueta-cabeza img { height: 46px; width: auto; }
.etiqueta-cabeza h3 { font-size: 1.6rem; }
.etiqueta-lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.etiqueta-lineas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--seda); animation: anota .45s var(--ease) both; }
.etiqueta-lineas li svg { width: 18px; height: 18px; color: var(--rosa-tinta); margin-top: 2px; }
.etiqueta-lineas b { display: block; font: 600 .72rem/1.3 var(--mayus); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.etiqueta-lineas span { overflow-wrap: anywhere; }
@keyframes anota { from { opacity: 0; transform: translateX(-8px); } }
.etiqueta-vacia, .etiqueta-falta { color: var(--tinta-suave); font-size: .95rem; }
.etiqueta-falta:empty { display: none; }
.etiqueta-copiar { justify-self: center; font-size: .92rem; color: var(--tinta-suave); }
.etiqueta-pagos { justify-self: center; font-size: .92rem; color: var(--tinta-suave); }
.etiqueta-cinta {
  position: absolute; top: -16px; bottom: 104px; left: 14px; width: 36px; z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%);
  background: #FBF4F2 url(../img/cinta-v.jpg) 50% 0 / 100% auto repeat-y;
  box-shadow: 6px 0 14px -8px rgba(74, 34, 48, .45);
  transform: translateY(-110%); opacity: 0; overflow: hidden; pointer-events: none;
}
.etiqueta-cinta .cinta-pista { flex-direction: column; width: 100%; height: max-content; }
.etiqueta-cinta .cinta-pista span { writing-mode: vertical-rl; font-size: .78rem; padding: 18px 0; margin: 0 auto; }
.etiqueta-sello { position: absolute; z-index: 4; left: 32px; top: -4px; width: 86px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transform: translate(-50%, -50%) scale(0); filter: drop-shadow(0 8px 10px rgba(74, 34, 48, .35)); pointer-events: none; }
.etiqueta-sello img { width: 100%; height: auto; border-radius: 50%; }
.etiqueta-mono { position: absolute; z-index: 3; left: 32px; top: -4px; width: 150px; height: auto; transform: translate(-50%, -40%) scale(0); filter: drop-shadow(0 8px 10px rgba(74, 34, 48, .3)); pointer-events: none; }
.etiqueta.atada .etiqueta-cinta { transition: transform .7s var(--ease), opacity .2s; transform: none; opacity: 1; }
.etiqueta.atada .etiqueta-mono { animation: lazo .55s var(--ease) .35s both; }
@keyframes lazo { 0% { transform: translate(-50%, -40%) scale(0) rotate(-20deg); } 100% { transform: translate(-50%, -40%) scale(1) rotate(0); } }
.etiqueta.atada .etiqueta-sello { animation: pega .55s var(--ease) .45s both; }
@keyframes pega { 0% { transform: translate(-50%, -50%) scale(0); } 65% { transform: translate(-50%, -50%) scale(1.07); } 100% { transform: translate(-50%, -50%) scale(1); } }
.etiqueta-aviso { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--manteca); font-weight: 600; }

/* el fondo de la caja */
.fondo { background: linear-gradient(170deg, var(--rosa-luz), var(--rosa) 50%, #EE6F84); padding: clamp(60px, 8vw, 100px) var(--margen) 28px; }
.fondo-grilla { display: grid; gap: 34px; align-items: end; }
@media (min-width: 900px) { .fondo-grilla { grid-template-columns: 1fr 1fr; } }
.fondo-logo { width: clamp(140px, 36vw, 190px); height: auto; margin-bottom: 18px; border-radius: 50%; box-shadow: 0 18px 30px -18px rgba(74, 34, 48, .55); }
.fondo h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); margin-bottom: 12px; }
.fondo-datos { font-weight: 600; }
.fondo-contactos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fondo-contactos a { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 20px; border-radius: 999px; background: var(--blanco); text-decoration: none; font-weight: 600; box-shadow: 0 10px 20px -16px rgba(74, 34, 48, .7); transition: transform .25s var(--ease); }
.fondo-contactos a.principal { background: var(--tinta); color: var(--blanco); }
@media (hover: hover) { .fondo-contactos a:hover { transform: translateX(4px); } }
.fondo-contactos .redes { display: grid; grid-template-columns: repeat(var(--redes, 3), minmax(0, 1fr)); gap: 8px; }
.fondo-contactos .redes a { justify-content: center; gap: 7px; padding: 0 8px; font-size: .92rem; }
@media (hover: hover) { .fondo-contactos .redes a:hover { transform: translateY(-2px); } }
.credito { text-align: center; margin-top: 46px; font-size: .85rem; }
.credito a { text-decoration: none; }

/* botón flotante (teléfono) */
.flotante {
  position: fixed; z-index: 25; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 140%); transition: transform .45s var(--ease);
  min-height: 54px; padding: 0 26px; white-space: nowrap; box-shadow: 0 16px 30px -12px rgba(74, 34, 48, .7);
}
.flotante.visible { transform: translate(-50%, 0); }
@media (min-width: 900px) { .flotante { display: none; } }

/* ---------- detalle ---------- */
.detalle { position: fixed; inset: 0; z-index: 60; display: grid; align-items: end; }
.detalle-fondo { position: absolute; inset: 0; background: rgba(74, 34, 48, .55); animation: aparece .3s ease both; }
@keyframes aparece { from { opacity: 0; } }
.detalle-hoja {
  position: relative; max-height: 94svh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--blanco); border-radius: 28px 28px 0 0;
  display: flex; flex-direction: column; animation: sube .5s var(--ease) both;
}
@keyframes sube { from { transform: translateY(40px); opacity: 0; } }
.detalle-cerrar { position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blanco); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 14px -6px rgba(74, 34, 48, .5); }
.detalle-media { position: relative; flex: none; width: 100%; height: min(56svh, 118vw); background: var(--seda); overflow: hidden; }
.detalle-media img, .detalle-media video { width: 100%; height: 100%; object-fit: cover; }
.detalle-media-lugar { position: relative; flex: none; }
.detalle-vistas {
  position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; overflow-x: auto; padding: 4px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.detalle-vistas::-webkit-scrollbar { display: none; }
.detalle-vistas button {
  position: relative; flex: none; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--seda); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 6px 14px -8px rgba(74, 34, 48, .6); opacity: .82;
  transition: opacity .2s, box-shadow .2s, transform .2s var(--ease);
}
.detalle-vistas button img { width: 100%; height: 100%; object-fit: cover; }
.detalle-vistas button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 3px var(--tinta), 0 6px 14px -8px rgba(74, 34, 48, .6); }
.detalle-vistas .vista-play { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--blanco); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.detalle-texto { display: grid; gap: 12px; padding: 22px 22px calc(26px + env(safe-area-inset-bottom)); }
.detalle-texto h3 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem); }
.detalle-linea { font: 600 .7rem/1.3 var(--mayus); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa-tinta); margin-top: -4px; }
.detalle-precio { font: 600 1.2rem/1.3 var(--sans); color: var(--tinta); }
.detalle-precio.consultar { font-size: .95rem; color: var(--tinta-suave); }
.detalle-colores { color: var(--tinta-suave); }
.detalle-colores strong { color: var(--tinta); font-weight: 600; }
.detalle-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; }
@media (min-width: 860px) {
  .detalle { align-items: center; justify-items: center; padding: 32px; }
  .detalle-hoja { width: min(980px, 100%); max-height: 86svh; border-radius: 28px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); overflow: hidden; }
  .detalle-media-lugar { height: 100%; }
  .detalle-media { height: 100%; min-height: 560px; }
  .detalle-texto { align-content: center; padding: 48px 44px; }
}
::view-transition-old(foto), ::view-transition-new(foto) { animation-duration: .5s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* ---------- escritorio: la caja apaisada ---------- */
@media (min-width: 900px) {
  .escena { --pad-escena: 22px; padding: 22px 32px; }
  .caja {
    grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px 46px; padding: 22px 26px 26px;
  }
  .caja { grid-template-rows: auto minmax(0, 1fr) auto; }
  .caja-arriba { grid-column: 1 / -1; }
  .ventana { grid-row: 2 / 4; }
  .caja-texto { grid-row: 2; grid-column: 2; align-self: start; padding-top: clamp(8px, 4svh, 52px); gap: 18px; padding-right: 8px; }
  .caja-pie { grid-row: 3; grid-column: 2; display: flex; align-items: center; gap: 16px; padding: 0 4px 2px; }
  .arranque { margin-top: 8px; }
  .adentro-texto { font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem); }
  .arranque .pildora { min-height: 50px; font-size: 1rem; }
  .ventana-chica { aspect-ratio: auto; height: clamp(280px, 44svh, 470px); }   /* «Así se hace» entra entero en 1366×768 */
}
@media (min-width: 900px) and (max-height: 760px) {
  .caja-texto h1 { font-size: clamp(1.75rem, .9rem + 2.4vw, 2.9rem); }
}
@media (max-width: 899px) {
  .caja-texto h1 { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.3rem); }
  .caja-bajada { font-size: .95rem; }
  .arranque .pildoras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arranque .pildora { justify-content: center; }
}
@media (max-width: 899px) and (max-height: 879px) { .caja-bajada { display: none; } }
@media (max-width: 899px) and (max-height: 760px) {
  .caja { gap: 10px; padding: 12px 12px 14px; }
  .caja-texto { gap: 9px; }
}

/* ---------- bienvenida ---------- */
.bienvenida { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; overflow: hidden; }
.sin-bienvenida .bienvenida { display: none; }
.con-bienvenida, .con-bienvenida body { overflow: hidden; }
.bv-mitad { position: absolute; top: -2%; bottom: -2%; width: 51%; background: #F8D6D8 url(../img/seda.jpg) 0 0 / 1000px; transition: transform 1s cubic-bezier(.7, 0, .2, 1); }
.bv-izq { left: 0; box-shadow: inset -18px 0 26px -22px rgba(74, 34, 48, .35); }
.bv-der { right: 0; background-position: calc(-49vw) 0; box-shadow: inset 18px 0 26px -22px rgba(74, 34, 48, .35); }
.bv-centro { position: relative; display: grid; justify-items: center; gap: 22px; transition: opacity .45s ease, transform .6s var(--ease); }
.bienvenida { --bv-sello: clamp(210px, 58vw, 280px); }
.bv-sello { position: relative; width: var(--bv-sello); aspect-ratio: 1; border-radius: 50%; background: #FCF5EF; filter: drop-shadow(0 16px 18px rgba(74, 34, 48, .3)); animation: bv-pega .7s var(--ease) .15s both; }
@keyframes bv-pega { 0% { opacity: 0; transform: scale(.7) rotate(-14deg); } 70% { opacity: 1; transform: scale(1.04) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
/* el logo se dibuja en círculo, desde arriba y en el sentido del reloj (el borde que avanza es suave) */
@property --trazo { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bv-logo { display: block; width: 100%; height: 100%; border-radius: 50%;
  -webkit-mask: conic-gradient(#000 calc(var(--trazo) - 14deg), transparent var(--trazo));
  mask: conic-gradient(#000 calc(var(--trazo) - 14deg), transparent var(--trazo));
  animation: bv-dibuja 1.4s cubic-bezier(.45, 0, .25, 1) .55s both; }
@keyframes bv-dibuja { from { --trazo: 0deg; } to { --trazo: 380deg; } }
.bv-destellos { position: absolute; left: 50%; top: 50%; width: calc(var(--bv-sello) * 1.62); height: auto; transform: translate(-50%, -62%); overflow: visible; }
.bv-destellos path { fill: none; stroke: #F5BE64; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: bv-destella .5s var(--ease) both; }
.bv-destellos path:nth-child(1) { animation-delay: 1.7s; } .bv-destellos path:nth-child(2) { animation-delay: 1.78s; } .bv-destellos path:nth-child(3) { animation-delay: 1.86s; }
.bv-destellos path:nth-child(4) { animation-delay: 1.74s; } .bv-destellos path:nth-child(5) { animation-delay: 1.82s; } .bv-destellos path:nth-child(6) { animation-delay: 1.9s; }
@keyframes bv-destella { to { stroke-dashoffset: 0; } }
.bv-texto { font: 600 .78rem/1.3 var(--mayus); letter-spacing: .22em; text-transform: uppercase; animation: bv-sube .7s var(--ease) 1.85s both; }
@keyframes bv-sube { from { opacity: 0; transform: translateY(8px); } }
.bienvenida.bv-sale .bv-centro { opacity: 0; transform: scale(1.05); }
.bienvenida.bv-sale .bv-izq { transform: translateX(-104%) rotate(-2deg); transition-delay: .2s; }
.bienvenida.bv-sale .bv-der { transform: translateX(104%) rotate(2deg); transition-delay: .2s; }

/* ---------- Halloween: del 24 al 31 de octubre (lo decide el <head>; ?halloween=1 lo prende y ?halloween=0 lo apaga) ---------- */
.temporada { display: none; }
.halloween .temporada { display: block; }
/* su sello se pone un sombrero de bruja: en la bienvenida le cae con un rebote */
.sombrero { position: absolute; z-index: 2; right: -15%; top: -31%; width: 60%; height: auto; transform: rotate(17deg); filter: drop-shadow(0 4px 4px rgba(74, 34, 48, .3)); pointer-events: none; }
.bv-sello .sombrero { animation: cae-sombrero .8s var(--ease) 1.95s both; }
@keyframes cae-sombrero {
  0% { opacity: 0; transform: translateY(-150%) rotate(-26deg); }
  50% { opacity: 1; transform: translateY(5%) rotate(24deg); }
  75% { transform: translateY(-5%) rotate(13deg); }
  100% { transform: translateY(0) rotate(17deg); }
}
/* fantasmitas con su canasta de calabaza: flotan y, si los tocan, saltan y dicen «¡Bu!» */
.fantasma { position: absolute; z-index: 2; width: 74px; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.fantasma img { display: block; width: 100%; height: auto; animation: flota 3.6s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(74, 34, 48, .16)); }
.fantasma-sombra { position: absolute; left: 22%; right: 22%; bottom: -12px; height: 8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(74, 34, 48, .2), rgba(74, 34, 48, 0)); animation: flota-sombra 3.6s ease-in-out infinite; }
@keyframes flota { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes flota-sombra { 50% { transform: scaleX(.75); opacity: .55; } }
.fantasma-bu {
  position: absolute; left: 76%; bottom: 80%; padding: 5px 10px 4px; border-radius: 12px 12px 12px 3px;
  background: var(--blanco); color: var(--tinta); font: 400 .9rem/1.2 var(--serif); white-space: nowrap; box-shadow: var(--sombra-suave);
  opacity: 0; transform: translateY(6px) scale(.8); transform-origin: 0 100%; transition: opacity .2s, transform .35s var(--ease); pointer-events: none;
}
.fantasma.bu .fantasma-bu { opacity: 1; transform: none; }
.fantasma.bu img { animation: susto .55s var(--ease); }
@keyframes susto { 30% { transform: translateY(-14px) scale(1.08) rotate(-7deg); } 65% { transform: translateY(-4px) rotate(5deg); } }
.sabores .seccion-cabeza { position: relative; max-width: none; }
.sabores .seccion-cabeza > p { max-width: 62ch; }
.fantasma-sabores { right: 4px; top: -92px; }
.fantasma-sabores .fantasma-bu { left: auto; right: 90%; bottom: 52%; border-radius: 12px 12px 3px 12px; transform-origin: 100% 100%; }   /* el globito a su izquierda: arriba está la otra sección y a la derecha no hay lugar */
@media (min-width: 720px) { .fantasma-sabores { right: 4%; top: -18px; width: 96px; } }
/* en el pie se asoma detrás de su sello */
.fondo-marca { position: relative; }
.fondo-logo { position: relative; z-index: 1; }
.fantasma-pie { z-index: 0; left: calc(clamp(140px, 36vw, 190px) - 30px); top: -4px; width: 78px; transform: rotate(10deg); }
.fantasma-pie .fantasma-bu { left: 66%; }

/* telas de araña en las esquinas (hilo blanco sobre el rosa) */
.telarana { position: absolute; z-index: 2; top: 0; width: 100px; height: auto; color: rgba(255, 255, 255, .72); pointer-events: none; overflow: visible; filter: drop-shadow(0 1px 1px rgba(74, 34, 48, .18)); }
.telarana-tapa { right: 0; transform: scaleX(-1); width: 92px; }
.telarana-proceso { right: 0; transform: scaleX(-1); width: 120px; }
.telarana-pie { right: 0; transform: scaleX(-1); width: 120px; }
.fondo { position: relative; }
@media (min-width: 900px) { .telarana-tapa { width: 130px; } .telarana-proceso, .telarana-pie { width: 170px; } }

/* arañitas que cuelgan de su hilo y suben si las tocan */
.arana { position: absolute; z-index: 3; top: 0; width: 42px; height: 150px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.arana-cuerda { position: absolute; left: 0; right: 0; bottom: 0; animation: cuelga 5s ease-in-out infinite; }
.arana-cuerda::before { content: ''; position: absolute; left: calc(50% - .75px); bottom: 55%; width: 1.5px; height: 420px; background: rgba(255, 255, 255, .9); }
.arana img { position: relative; display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 4px rgba(74, 34, 48, .25)); }
@keyframes cuelga { 0%, 100% { transform: translateY(-46px) rotate(-4deg); } 50% { transform: translateY(0) rotate(4deg); } }
.arana.sube .arana-cuerda { animation: sube-arana 1.9s var(--ease); }
@keyframes sube-arana { 0% { transform: translateY(-46px); } 30%, 62% { transform: translateY(-150px); } 100% { transform: translateY(-46px); } }
.arana-tapa { right: 46px; height: 132px; }
.arana-proceso { right: 64px; height: 118px; }
@media (min-width: 900px) { .arana { width: 50px; } .arana-tapa { right: 76px; height: 170px; } .arana-proceso { right: 104px; height: 150px; } }

/* calabazas: junto a la torta, en la ventana, y en el pie */
.calabazas { position: absolute; z-index: 2; height: auto; pointer-events: none; filter: drop-shadow(0 8px 8px rgba(74, 34, 48, .25)); }
.calabazas-tapa { left: 10px; bottom: 8px; width: 84px; }
.calabazas-pie { right: 14px; bottom: 12px; width: 82px; }
@media (min-width: 900px) { .calabazas-tapa { width: 116px; left: 16px; bottom: 12px; } .calabazas-pie { width: 120px; right: 40px; bottom: 18px; } }

/* brujitas y murciélagos que cruzan la pantalla cada tanto (los arma app.js; no se pueden tocar: no tapan nada) */
.volador { position: fixed; left: 0; top: 0; z-index: 28; pointer-events: none; will-change: transform; }
.volador img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 12px rgba(74, 34, 48, .22)); }
.volador.aletea img { animation: aletea .26s ease-in-out infinite alternate; transform-origin: 50% 45%; }
@keyframes aletea { to { transform: scaleY(.7) translateY(2px); } }

/* ---------- sin animaciones ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* la web abierta con ?demo muestra lo del panel de prueba: que se note */
.marca-prueba {
  position: fixed; z-index: 95; left: 12px; bottom: calc(86px + env(safe-area-inset-bottom)); margin: 0;   /* sobre el botón flotante */
  padding: 6px 12px 5px; border-radius: 999px; background: var(--manteca); color: var(--tinta);
  font: 600 .72rem/1.2 var(--mayus); letter-spacing: .14em; text-transform: uppercase; box-shadow: var(--sombra-suave);
  pointer-events: none;
}

/* ---------- precios ---------- */
.chip-precio {
  position: absolute; z-index: 1; left: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px;
  background: var(--tinta); color: var(--blanco); font: 600 .82rem/1.2 var(--sans); box-shadow: 0 6px 14px -8px rgba(74, 34, 48, .6);
}
/* con precio: cuántas (contador) y el total */
.cantidad { display: flex; align-items: center; gap: 10px; }
.cantidad-boton { width: 50px; height: 50px; border-radius: 50%; border: 1.5px solid var(--linea); background: var(--blanco); color: var(--tinta); font: 600 1.4rem/1 var(--sans); cursor: pointer; }
@media (hover: hover) { .cantidad-boton:hover { border-color: var(--tinta); } }
.cantidad-boton:active { transform: scale(.95); }
.cantidad-numero { width: 96px; text-align: center; font-weight: 600; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.cantidad-total, .pago-total { font-size: 1.02rem; color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.cantidad-total b, .pago-total b { color: var(--tinta); font-size: 1.1rem; }
.pildoras-anchas .pildoras { display: grid; gap: 8px; }
.pildoras-anchas .pildora { width: 100%; min-height: 54px; }

/* ---------- pagos y pedidos ---------- */
.pagos { position: relative; z-index: 3; padding: clamp(56px, 8vw, 110px) var(--margen) clamp(64px, 9vw, 120px); }
.politica { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .politica { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.politica li { background: var(--blanco); border-radius: 20px; padding: 22px 22px 24px; display: grid; gap: 8px; align-content: start; box-shadow: var(--sombra-suave); }
.politica h3 { font-size: 1.3rem; }
.politica p { color: var(--tinta-suave); }
.medios { margin-top: 22px; display: grid; gap: 12px; }
.medios h3 { font-size: 1.3rem; }
.medios-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.medios-lista li { display: grid; gap: 2px; padding: 12px 18px; border-radius: 16px; background: var(--manteca); }
.medios-lista b { font-weight: 700; }
.medios-lista span { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
/* después de enviar: cuánto pagar y por dónde */
.etiqueta-aviso .pagar { display: block; margin-top: 10px; }
/* dónde se retira: en el paso de la entrega (al elegir pick up), en el aviso del envío y en el pie */
.retiro { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; background: var(--seda); color: var(--tinta); font-size: .95rem; line-height: 1.45; }
.retiro svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.retiro a { font-weight: 600; white-space: nowrap; }
.etiqueta-aviso .retiro { margin-top: 10px; padding: 0; background: none; font-weight: 600; }
.fondo-contactos a.direccion { border-radius: 26px; padding-top: 10px; padding-bottom: 10px; min-height: 64px; }
.fondo-contactos a.direccion span { display: grid; gap: 1px; line-height: 1.3; }
.fondo-contactos a.direccion small { font-weight: 500; font-size: .86rem; color: var(--tinta-suave); }
.pagar-medios { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-weight: 500; }
.pagar-medios b { font-weight: 700; margin-right: 4px; }

/* ---------- carrusel de reseñas: con el dedo en el teléfono, con flechas si hay mouse ---------- */
.carrusel { position: relative; }
.resenas-lista {
  list-style: none; margin: 0; padding: 4px 2px 16px; display: grid; grid-auto-flow: column; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.resenas-lista::-webkit-scrollbar { display: none; }
.resenas-lista > li { scroll-snap-align: start; min-width: 0; }
.carrusel-flecha {
  position: absolute; z-index: 2; top: calc(50% - 32px); display: grid; place-items: center; width: 48px; height: 48px;
  border: 0; border-radius: 50%; background: var(--blanco); color: var(--tinta); cursor: pointer;
  box-shadow: 0 10px 22px -12px rgba(74, 34, 48, .7), 0 1px 3px rgba(74, 34, 48, .15);
  transition: opacity .25s, transform .25s var(--ease);
}
.carrusel-flecha[data-dir="-1"] { left: -14px; }
.carrusel-flecha[data-dir="1"] { right: -14px; }
.carrusel-flecha:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) { .carrusel-flecha:hover { transform: scale(1.06); } }
@media (hover: none) { .carrusel-flecha { display: none; } }

/* ---------- sabores: su menú. Cada porción en su tarjeta blanca, apoyada en un plato hundido de seda; debajo, el
   nombre y sus capas de arriba hacia abajo, cada una con su muestra de color (los puntos: lo que trae adentro). ---------- */
.sabores { position: relative; z-index: 3; padding: clamp(64px, 9vw, 120px) var(--margen) clamp(56px, 8vw, 100px); }
.porciones-paginas {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 8px 2px 16px; margin: -8px -2px 0;   /* lugar para la sombra de las tarjetas */
}
.porciones-paginas::-webkit-scrollbar { display: none; }
.con-paginas .porciones-paginas { grid-auto-columns: calc(100% - 26px); }
.porciones-pagina { scroll-snap-align: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-content: start; min-width: 0; }
/* en el teléfono, sus notas completan la última página (si sobran lugares); en la grilla van debajo */
.porcion-nota {
  display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px 15px;
  border-radius: 20px; background: var(--manteca); font-weight: 600; font-size: .92rem; line-height: 1.35;
}
.porcion-nota svg { width: 26px; height: 26px; }
.porcion-nota p { overflow-wrap: anywhere; }
.sabores-notas li.en-pagina { display: none; }
/* los puntos van arriba de las tarjetas: las páginas no miden lo mismo y abajo dejarían un hueco que cambia */
.porciones { display: flex; flex-direction: column; }
.porciones-puntos { order: -1; display: flex; gap: 2px; margin: -6px 0 6px -4px; }
.porciones-puntos button { position: relative; width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.porciones-puntos button::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 999px;
  background: #E2B5AE; transition: width .3s var(--ease), margin .3s var(--ease), background .3s;
}
.porciones-puntos button[aria-pressed="true"]::after { width: 20px; margin-left: -10px; background: var(--tinta); }
.porcion {
  display: grid; grid-template: auto auto 1fr / minmax(0, 1fr); min-width: 0; padding: 7px 7px 16px;
  border-radius: 20px; background: var(--blanco); box-shadow: var(--sombra-suave);
}
.porcion-plato {
  position: relative; aspect-ratio: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); padding: 13% 9% 12%;
  border-radius: 14px; background: var(--seda);
  box-shadow: inset 0 3px 8px rgba(74, 34, 48, .16), inset 0 -1px 0 rgba(255, 255, 255, .7);
}
/* la sombra donde se apoya */
.porcion-plato::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: 8.5%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(74, 34, 48, .32), rgba(74, 34, 48, 0));
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.porcion-plato img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 3px 4px rgba(74, 34, 48, .16)); transition: translate .5s var(--ease);
}
/* una foto con fondo (si ella sube una así): entera en el cuadro */
.porcion-plato.foto { padding: 0; place-items: stretch; }
.porcion-plato.foto::after { display: none; }
.porcion-plato.foto img { object-fit: cover; object-position: 50% 50%; border-radius: 14px; filter: none; }
@media (hover: hover) {
  .porcion:hover .porcion-plato img { translate: 0 -7px; }
  .porcion:hover .porcion-plato::after { transform: scale(.84); opacity: .65; }
}
.sabores.por-llegar:not(.llegan) .porcion-plato img { opacity: 0; }
.sabores.llegan .porcion-plato img { animation: posa .7s var(--ease) both; animation-delay: calc(min(var(--i), 9) * 55ms); }
@keyframes posa { from { opacity: 0; transform: translateY(-16px); } }
.porcion-nombre { margin: 13px 5px 0; font: 400 clamp(1.02rem, .95rem + .3vw, 1.2rem)/1.15 var(--serif); overflow-wrap: anywhere; }
.porcion-capas {
  list-style: none; margin: 9px 5px 0; padding: 0; display: grid; gap: 6px; align-content: start;
  font: 400 .86rem/1.3 var(--sans); color: var(--tinta-suave);
}
.porcion-capas li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 7px; align-items: start; overflow-wrap: anywhere; }
.capa-muestra {
  width: 18px; height: 10px; margin-top: .26em; border-radius: 3.5px;
  background: var(--c, var(--seda)); box-shadow: inset 0 0 0 1px rgba(74, 34, 48, .16);
}
.capa-muestra.con-puntos {
  background:
    radial-gradient(circle at 24% 38%, var(--p) 0 1.5px, transparent 2px),
    radial-gradient(circle at 56% 72%, var(--p) 0 1.5px, transparent 2px),
    radial-gradient(circle at 82% 30%, var(--p) 0 1.3px, transparent 1.8px),
    var(--c, var(--seda));
}
.sabores-notas { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.sabores-notas li { display: flex; gap: 11px; align-items: center; padding: 13px 16px; border-radius: 14px; background: var(--manteca); font-weight: 600; font-size: .98rem; line-height: 1.35; }
.sabores-notas svg { width: 22px; height: 22px; }
@media (min-width: 720px) {
  .porciones-paginas { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 18px; overflow: visible; padding: 0; margin: 0; }
  .porciones-pagina { display: contents; }
  .porcion { width: calc((100% - 2 * 18px) / 3); padding: 8px 8px 18px; }
  .porciones-puntos, .porcion-nota { display: none; }
  .sabores-notas li.en-pagina { display: flex; }
  .porcion-capas { font-size: .9rem; }
  .sabores-notas { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 32px; }
}
@media (min-width: 900px) { .porcion { width: calc((100% - 3 * 18px) / 4); } }
@media (min-width: 1100px) { .porcion { width: calc((100% - 4 * 18px) / 5); } }

/* ---------- reseñas: tarjetitas blancas con estrellas de su rosa ---------- */
.resenas { position: relative; z-index: 3; padding: clamp(64px, 9vw, 120px) var(--margen) clamp(48px, 7vw, 90px); }
.resenas-lista { grid-auto-columns: min(84%, 340px); }
@media (min-width: 900px) { .resenas-lista { grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px; } }
.resena { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 24px 22px 20px; background: var(--blanco); border-radius: 18px; box-shadow: var(--sombra-suave); }
.estrellas { display: inline-flex; gap: 2px; }
.estrellas svg { width: 20px; height: 20px; color: var(--linea); }
.estrellas svg.llena { color: var(--rosa-tinta); }
.resena-texto { font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.resena-quien { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid var(--seda); }
.resena-quien b { font: 400 1.15rem/1.2 var(--serif); overflow-wrap: anywhere; }
.resena-quien span { font: 600 .72rem/1.3 var(--mayus); letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-suave); }
.resenas-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 14px; }
.resenas-acciones:not(:has(> :not([hidden]))) { display: none; }
.resena-form { display: grid; gap: 18px; max-width: 560px; margin-top: 22px; padding: 24px 22px 22px; background: var(--blanco); border-radius: 20px; box-shadow: var(--sombra-suave); }
#resenas-carrusel[hidden] ~ .resena-form { margin-top: 0; }
.resena-form .boton { justify-self: start; }
.estrellas-elegir { display: flex; gap: 2px; margin-left: -6px; }
.estrellas-elegir label { position: relative; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; cursor: pointer; color: #EBCFC8; transition: color .15s, transform .2s var(--ease); }
.estrellas-elegir label.llena { color: var(--rosa-tinta); }
.estrellas-elegir svg { width: 36px; height: 36px; }
.estrellas-elegir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrellas-elegir label:has(input:focus-visible) { outline: 3px solid var(--tinta); outline-offset: -2px; }
.estrellas-elegir label:active { transform: scale(.92); }
@media (hover: hover) { .estrellas-elegir:hover label { color: var(--rosa-tinta); } .estrellas-elegir label:hover ~ label { color: #EBCFC8; } }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.resena-gracias { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: var(--manteca); font-weight: 600; max-width: 560px; }
.fondo-resena { margin-top: 16px; }
.fondo-resena svg { width: 1.1em; height: 1.1em; }

/* ---------- fotos de referencia del pedido ---------- */
.ref-fotos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ref-fotos li { position: relative; }
.ref-fotos img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; background: var(--seda); box-shadow: 0 1px 2px rgba(74, 34, 48, .2); }
.ref-quitar { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--blanco); color: var(--tinta); box-shadow: var(--sombra-suave); cursor: pointer; }
.ref-quitar svg { width: 15px; height: 15px; }
.ref-mas {
  display: grid; place-content: center; justify-items: center; gap: 4px; width: 76px; height: 76px; padding: 4px;
  border: 2px dashed #E3A5B1; border-radius: 14px; background: var(--blanco); color: var(--rosa-tinta);
  font: 600 .72rem/1.15 var(--sans); text-align: center; cursor: pointer;
}
.ref-mas svg { width: 22px; height: 22px; }
@media (hover: hover) { .ref-mas:hover { border-color: var(--rosa-tinta); } }
.ref-subiendo { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 14px; background: var(--seda); font-size: .78rem; font-weight: 600; color: var(--tinta-suave); animation: late 1.4s ease-in-out infinite; }
@keyframes late { 50% { opacity: .45; } }
.etiqueta-aviso .pagar + .pagar { margin-top: 8px; }