/* =========================================================================
   Sábila — landing
   Paleta derivada del nicho: verde botánico profundo como base (la sábila y
   el eucalipto), ámbar de frasco de farmacia como acento (el vidrio en el que
   viaja un aceite prensado en frío) y crema cálido como neutro.
   Las tipografías son las mismas de la tienda Next.js, para que la landing y
   el catálogo se lean como una sola marca y no como dos proyectos.
   ========================================================================= */

:root{
  /* escala del color base, de más oscuro a más claro: 4 pasos */
  --base-950:#0B1410; --base-900:#12211B; --base-800:#1E3A2E; --base-700:#2C5544;

  /* acento ámbar, 4 pasos.
     --accent-700 es el único que se usa para TEXTO sobre fondo claro: el paso
     brillante se queda en 2:1 sobre crema y resulta ilegible. */
  --accent-500:#C08A2E; --accent-400:#E0AC55; --accent-100:#F6EAD3; --accent-700:#8A6011;

  /* neutros */
  --cream:#F6F3EC; --white:#fff; --ink:#14201B; --ink-soft:#5A6B62; --border:#DCE2D6;
  --alerta:#8C2F1D;

  --shadow:0 20px 40px -20px rgba(0,0,0,.25);
  --radius:14px; --maxw:1200px;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:"IBM Plex Mono", Consolas, "Courier New", monospace;

  /* Curvas fuertes: las de serie (ease) aplanan cualquier entrada. */
  --ease-in:cubic-bezier(.23,1,.32,1);
  --ease-move:cubic-bezier(.77,0,.175,1);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}

a{color:inherit}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;text-wrap:balance;margin:0}

p{margin:0}

:focus-visible{outline:2px solid var(--accent-500);outline-offset:3px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--base-950);color:var(--cream);padding:12px 18px;
}
.skip:focus{left:12px;top:12px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-700);margin:0;
}
/* Sobre foto o sobre fondo oscuro el paso brillante sí es legible. */
.kicker--light{color:var(--accent-400)}

/* ── Botones ─────────────────────────────────────────────────────────────
   Texto casi negro sobre ámbar: el blanco sobre este ámbar no llega al
   mínimo legible. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:15px;font-weight:600;line-height:1;
  padding:15px 26px;border:1px solid transparent;border-radius:999px;
  text-decoration:none;cursor:pointer;
  transition:background-color .22s var(--ease-in), border-color .22s var(--ease-in), color .22s var(--ease-in);
}
.btn--accent{background:var(--accent-500);color:var(--base-950)}
.btn--accent:hover{background:var(--accent-400)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(246,243,236,.5)}
.btn--ghost:hover{border-color:var(--cream);background:rgba(246,243,236,.1)}
.btn--sm{padding:11px 20px;font-size:14px}
.btn--full{width:100%}

/* ── Cabecera ────────────────────────────────────────────────────────────
   Arranca transparente sobre el hero; al bajar, el JS pone .is-scrolled y
   entra el fondo translúcido. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:30;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease-in), border-color .3s var(--ease-in);
}
.site-header.is-scrolled{
  background:rgba(11,20,16,.72);
  border-bottom-color:rgba(246,243,236,.14);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.site-header__inner{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand{display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--cream)}
.brand__name{font-family:var(--serif);font-size:26px;line-height:1}
.brand__city{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.75}

.nav{display:flex;align-items:center;gap:26px}
.nav a{
  color:var(--cream);text-decoration:none;font-size:15px;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:border-color .2s var(--ease-in), color .2s var(--ease-in);
}
.nav a:hover{border-bottom-color:var(--accent-400);color:var(--accent-400)}
.nav__shop{font-weight:600}

@media (max-width:820px){
  .nav{display:none}
}

/* ── 1. Hero ─────────────────────────────────────────────────────────────
   Las fotos se cruzan por opacidad (cross-fade), no por desplazamiento: un
   slide lateral compite con el scroll de la página en táctil. */
.hero{
  position:relative;isolation:isolate;
  min-height:clamp(620px,100svh,900px);
  display:flex;align-items:flex-end;
  overflow:hidden;
  /* Fondo de espera: mientras la primera foto viaja por la red el hero se ve
     como un degradado botánico intencional y no como un rectángulo negro. */
  background:radial-gradient(120% 90% at 78% 18%, var(--base-800) 0%, var(--base-950) 62%);
}
.hero__media{position:absolute;inset:0;z-index:-2}

.shot{
  position:absolute;inset:0;margin:0;
  opacity:0;transition:opacity 1.2s var(--ease-in);
}
.shot.is-active{opacity:1}
.shot img{width:100%;height:100%;object-fit:cover}

/* Ken Burns lento. La animación se reinicia en cada foto entrante desde el
   JS (quitar clase → forzar reflow → reponerla), porque si no, la segunda
   vuelta del carrusel entraría con el zoom ya consumido. */
.shot.is-active img,
.shot.is-leaving img{animation:kenburns 8.4s linear forwards}
/* La foto que sale congela su zoom mientras se funde. Si se le quitara la
   animación de golpe, volvería a escala 1 en pleno fundido y se vería un
   tirón justo en el cruce. */
.shot.is-leaving img{animation-play-state:paused}
@keyframes kenburns{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.13) translate3d(-1.4%,-1.4%,0)}
}

/* Scrim de doble degradado. El lateral está calibrado contra la foto MÁS
   CLARA del set (la sábila sobre fondo blanco): un 0.7 que funciona sobre la
   foto de frascos oscuros deja el titular lavado sobre la sábila. */
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,20,16,.90) 0%, rgba(11,20,16,.78) 34%, rgba(11,20,16,.34) 66%, rgba(11,20,16,.10) 100%),
    linear-gradient(to top, rgba(11,20,16,.72) 0%, rgba(11,20,16,0) 42%);
}

.hero__body{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 24px 108px;color:var(--cream);
}
.hero__title{
  font-size:clamp(3.2rem,9vw,6.4rem);line-height:.98;margin:18px 0 0;
  font-weight:300;
}
.hero__title em{font-style:italic;color:var(--accent-400)}
.hero__lede{max-width:34ch;margin:22px 0 0;color:rgba(246,243,236,.86);font-size:1.05rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

.hero__cue{
  position:absolute;right:24px;bottom:36px;margin:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,243,236,.6);
  animation:cue 2.4s var(--ease-in) infinite;
}
@keyframes cue{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.9;transform:translateY(5px)}}

/* ── Secciones genéricas ─────────────────────────────────────────────── */
.section{padding:clamp(48px,5vw,72px) 0}
.section--cream{background:var(--white)}
.section__head{margin-bottom:clamp(24px,3vw,40px)}
.section__title{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.05;margin-top:12px}
.section__head--split{margin-bottom:clamp(20px,2.5vw,32px)}

/* ── 2. Rituales ─────────────────────────────────────────────────────── */
.tiles{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.tile{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--base-900)}
.tile__media{
  overflow:hidden;
  /* ⚠ El transform del hover vive AQUÍ, en un hijo sin [data-reveal].
     Si se pusiera sobre .tile, la regla genérica del sistema de revelado
     (especificidad 0,4,0) lo anularía en silencio y el hover no haría nada. */
  transition:transform .7s var(--ease-in);
}
.tile__media img{width:100%;aspect-ratio:4/5;object-fit:cover}

.tile__text{
  position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;color:var(--cream);
  background:linear-gradient(to top, rgba(11,20,16,.88) 0%, rgba(11,20,16,.45) 55%, rgba(11,20,16,0) 100%);
}
.tile__text h3{font-size:1.5rem}
.tile__text p{font-size:.92rem;color:rgba(246,243,236,.82);margin-top:4px}

/* Solo donde hay puntero fino: en táctil el hover se queda pegado. */
@media (hover:hover) and (pointer:fine){
  .tile:hover .tile__media{transform:scale(1.06)}
}
/* En táctil la clase la pone el JS al tocar, y se retira al tocar otra. */
.tile.is-active .tile__media{transform:scale(1.06)}
.tile:focus-within .tile__media{transform:scale(1.06)}

/* ── 3. Franja editorial a sangre ────────────────────────────────────── */
.stage-section{padding:clamp(48px,5vw,72px) 0;background:var(--cream)}

.stage{position:relative;margin-top:8px}

/* Carrusel con scroll nativo: el gesto táctil, la rueda y el teclado
   funcionan solos, y sin JS las tres fotos siguen siendo alcanzables. */
.stage__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.stage__track::-webkit-scrollbar{display:none}

.slide{
  position:relative;flex:0 0 100%;scroll-snap-align:start;
  height:clamp(500px,74vh,780px);overflow:hidden;
}
.slide__media{position:absolute;inset:0}
.slide__media img{width:100%;height:100%;object-fit:cover}

/* Mismo criterio que el hero: el degradado lateral está medido contra el
   campo de amapolas, que es casi blanco en su mitad superior. */
.slide__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(95deg, rgba(11,20,16,.88) 0%, rgba(11,20,16,.70) 38%, rgba(11,20,16,.22) 72%, rgba(11,20,16,0) 100%),
    linear-gradient(to top, rgba(11,20,16,.66) 0%, rgba(11,20,16,0) 46%);
}

.slide__body{
  position:relative;height:100%;
  width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;
  color:var(--cream);
  /* El envoltorio no intercepta el gesto: así se puede seguir deslizando la
     foto con el dedo por encima del texto. Solo los hijos interactivos
     recuperan los eventos. */
  pointer-events:none;
}
.slide__body > a{pointer-events:auto}
.slide__title{font-size:clamp(2.6rem,6vw,4.6rem);line-height:1;font-weight:300}
.slide__text{max-width:38ch;color:rgba(246,243,236,.88)}

.stage__ui{
  position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
  display:flex;justify-content:space-between;padding:0 14px;pointer-events:none;
}
.stage__arrow{
  pointer-events:auto;
  width:46px;height:46px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,243,236,.35);background:rgba(11,20,16,.42);color:var(--cream);
  font-size:17px;line-height:1;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s var(--ease-in), border-color .2s var(--ease-in);
}
.stage__arrow:hover{background:rgba(11,20,16,.75);border-color:var(--cream)}

.stage__foot{
  width:100%;max-width:var(--maxw);margin:0 auto;padding:18px 24px 0;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.stage__count{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--ink-soft)}
.stage__count [data-current]{color:var(--ink)}
.stage__sep{margin:0 6px;opacity:.5}

.stage__thumbs{display:flex;gap:8px}
.thumb{
  padding:0;border:1px solid var(--border);background:none;cursor:pointer;
  width:74px;border-radius:6px;overflow:hidden;line-height:0;
  opacity:.55;transition:opacity .25s var(--ease-in), border-color .25s var(--ease-in);
}
.thumb.is-active{opacity:1;border-color:var(--accent-700)}
.thumb:hover{opacity:1}
.thumb img{width:100%;height:44px;object-fit:cover}

/* La barra se anima con scaleX, no con width: width obliga al navegador a
   recalcular el diseño en cada fotograma. */
.stage__progress{flex:1;min-width:120px;height:2px;background:var(--border);overflow:hidden}
.stage__progress span{
  display:block;height:100%;background:var(--accent-700);
  transform:scaleX(0);transform-origin:left;
}
.stage__progress span.is-running{animation:fill 6s linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 4. Cifras ───────────────────────────────────────────────────────── */
.figures{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.figure{background:var(--white);padding:34px 26px;display:flex;flex-direction:column;gap:10px}
.figure__num{
  font-family:var(--serif);font-size:clamp(3rem,6vw,4.2rem);line-height:.9;
  color:var(--base-800);font-weight:300;
}
.figure__unit{font-size:.42em;vertical-align:super;margin-left:2px;color:var(--accent-700)}
.figure__label{font-size:.92rem;color:var(--ink-soft)}

/* ── 5. Agenda ───────────────────────────────────────────────────────── */
.booking{background:var(--base-950);color:var(--cream);padding:clamp(52px,5.5vw,80px) 0}
.booking__grid{display:grid;gap:48px;grid-template-columns:1fr}
@media (min-width:900px){.booking__grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:72px}}

.booking__title{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.02;margin-top:14px;font-weight:300}
.booking__text{margin-top:18px;color:rgba(246,243,236,.78);max-width:38ch}

.form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,236,.65)}
.field input,.field select{
  font-family:var(--sans);font-size:16px;color:var(--cream);
  background:rgba(246,243,236,.06);border:1px solid rgba(246,243,236,.2);
  border-radius:8px;padding:13px 14px;width:100%;
  transition:border-color .2s var(--ease-in), background-color .2s var(--ease-in);
}
.field input::placeholder{color:rgba(246,243,236,.38)}
.field input:focus,.field select:focus{border-color:var(--accent-400);background:rgba(246,243,236,.1)}
.field select option{color:var(--ink)}
.field input[aria-invalid="true"]{border-color:#E08A7A}

.form__note{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:rgba(246,243,236,.55);text-align:center}
.form__note.is-error{color:#E8A093}
.form__note.is-ok{color:var(--accent-400)}

/* ── Pie ─────────────────────────────────────────────────────────────── */
.site-footer{background:var(--base-900);color:rgba(246,243,236,.7);padding:52px 0 44px}
.site-footer__grid{display:grid;gap:26px}
@media (min-width:800px){.site-footer__grid{grid-template-columns:1.3fr 1fr 1.3fr;align-items:start;gap:40px}}
.brand__name--footer{font-family:var(--serif);font-size:28px;color:var(--cream);margin:0 0 8px}
.site-footer__line{font-size:.92rem}
.site-footer nav{display:flex;flex-direction:column;gap:9px}
.site-footer nav a{text-decoration:none;font-size:.92rem}
.site-footer nav a:hover{color:var(--accent-400)}
.site-footer__legal{font-size:.8rem;color:rgba(246,243,236,.5);line-height:1.55}

/* ── Acciones de la cabecera ─────────────────────────────────────────── */
.acciones{display:flex;align-items:center;gap:10px}

.carrito-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,243,236,.34);background:rgba(11,20,16,.3);color:var(--cream);
  transition:border-color .2s var(--ease-in), color .2s var(--ease-in);
}
.carrito-btn:hover{border-color:var(--accent-400);color:var(--accent-400)}
.carrito-btn__n{
  position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;padding:0 5px;
  border-radius:999px;background:var(--accent-500);color:var(--base-950);
  font-family:var(--mono);font-size:10px;font-weight:500;line-height:20px;text-align:center;
}
.carrito-btn__n[hidden]{display:none}

/* Hamburguesa: las tres líneas se cruzan cuando el panel está abierto. El
   estado vive en aria-expanded, así no hay que sincronizar una clase aparte
   con lo que anuncian los lectores de pantalla. */
.hamb{
  display:none;width:42px;height:42px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,243,236,.34);background:rgba(11,20,16,.3);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.hamb span{
  display:block;width:17px;height:1.5px;background:var(--cream);
  transition:transform .3s var(--ease-move), opacity .2s linear;
}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:820px){
  .hamb{display:flex}
  .acciones__cita{display:none}
}

.menu-movil{
  border-top:1px solid rgba(246,243,236,.14);
  background:rgba(11,20,16,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.menu-movil nav{display:flex;flex-direction:column;padding:6px 24px 16px}
.menu-movil a{
  color:var(--cream);text-decoration:none;font-size:17px;
  padding:13px 0;border-bottom:1px solid rgba(246,243,236,.1);
}
.menu-movil a:last-child{border-bottom:none;color:var(--accent-400)}

body.sin-scroll{overflow:hidden}

/* ── Productos ───────────────────────────────────────────────────────── */
.section__sub{margin-top:12px;color:var(--ink-soft);max-width:52ch}

.prods{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.prod{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--white);
}

/* Las tres fotos se apilan y se cruzan por opacidad: así ya están
   descargadas cuando alguien pulsa una miniatura, sin parpadeo de carga. */
.prod__marco{position:relative;aspect-ratio:1/1;background:var(--cream);overflow:hidden}
.prod__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s var(--ease-in);
}
.prod__foto.is-active{opacity:1}

.prod__minis{display:flex;gap:6px;padding:10px 16px 0}
.prod__mini{
  width:54px;padding:0;line-height:0;cursor:pointer;overflow:hidden;
  border:1px solid var(--border);border-radius:6px;background:none;opacity:.55;
  transition:opacity .2s var(--ease-in), border-color .2s var(--ease-in);
}
.prod__mini.is-active{opacity:1;border-color:var(--accent-700)}
.prod__mini:hover{opacity:1}
.prod__mini img{width:100%;height:38px;object-fit:cover}

.prod__info{display:flex;flex-direction:column;gap:8px;padding:14px 16px 18px;flex:1}
.prod__nombre{font-size:1.3rem;line-height:1.16}
.prod__desc{font-size:.9rem;color:var(--ink-soft)}
.prod__meta{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-soft);line-height:1.5}

.prod__pie{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--border);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.prod__precio{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.prod__valor{font-family:var(--mono);font-size:1.25rem;font-variant-numeric:tabular-nums}
.prod__antes{font-family:var(--mono);font-size:.88rem;color:var(--ink-soft);text-decoration:line-through}
.prod__off{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  background:var(--accent-100);color:var(--accent-700);padding:2px 6px;border-radius:3px;
}
.prod__iva{
  width:100%;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);
}

.prod__aviso{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--alerta);
}

.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

.prods__nota{
  margin-top:26px;max-width:62ch;font-size:.85rem;color:var(--ink-soft);
  border-left:2px solid var(--accent-700);padding-left:14px;
}

/* ── Carrito ─────────────────────────────────────────────────────────── */
.carrito-fondo{
  position:fixed;inset:0;z-index:40;background:rgba(11,20,16,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}

.carrito{
  position:fixed;top:0;right:0;bottom:0;z-index:50;
  width:min(410px,100%);display:flex;flex-direction:column;
  background:var(--white);color:var(--ink);box-shadow:var(--shadow);
  transform:translateX(100%);
  transition:transform .38s var(--ease-move);
}
.carrito.is-open{transform:none}

.carrito__top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px;border-bottom:1px solid var(--border);
}
.carrito__titulo{font-size:1.5rem}
.carrito__cerrar{
  width:36px;height:36px;border-radius:999px;cursor:pointer;font-size:24px;line-height:1;
  border:1px solid var(--border);background:none;color:var(--ink);
}
.carrito__cerrar:hover{border-color:var(--ink)}

.carrito__vacio{padding:26px 22px;color:var(--ink-soft);font-size:.95rem}

.carrito__items{
  list-style:none;margin:0;padding:4px 22px;flex:1;overflow-y:auto;
  display:flex;flex-direction:column;
}
.citem{
  display:grid;grid-template-columns:58px 1fr auto;gap:12px;align-items:start;
  padding:16px 0;border-bottom:1px solid var(--border);
}
.citem:last-child{border-bottom:none}
.citem__foto{width:58px;height:58px;border-radius:8px;object-fit:cover}
.citem__nombre{font-size:.95rem;font-weight:600;line-height:1.25}
.citem__pres{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--ink-soft);margin-top:3px}
.citem__precio{font-family:var(--mono);font-size:.9rem;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.citem__ctrl{display:flex;align-items:center;gap:8px;margin-top:9px}
.citem__btn{
  width:26px;height:26px;border-radius:6px;cursor:pointer;line-height:1;font-size:15px;
  border:1px solid var(--border);background:var(--cream);color:var(--ink);
}
.citem__btn:hover{border-color:var(--accent-700);color:var(--accent-700)}
.citem__n{font-family:var(--mono);font-size:.9rem;min-width:18px;text-align:center;font-variant-numeric:tabular-nums}
.citem__quitar{
  margin-left:4px;padding:0;border:none;background:none;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
}
.citem__quitar:hover{color:var(--alerta)}

.carrito__pie{padding:18px 22px 22px;border-top:1px solid var(--border);background:var(--cream)}
.carrito__cuentas{margin:0 0 12px;display:flex;flex-direction:column;gap:7px}
.carrito__cuentas > div{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}
.carrito__cuentas dt{color:var(--ink-soft)}
.carrito__cuentas dd{margin:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.carrito__total{padding-top:10px;border-top:1px solid var(--border)}
.carrito__total dt{color:var(--ink);font-weight:600}
.carrito__total dd{font-size:1.15rem}
.carrito__nota{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-700);margin-bottom:12px;
}
.carrito__aviso{
  margin-top:10px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--ink-soft);
}
.carrito__aviso.is-ok{color:var(--accent-700)}

/* ── Revelado al hacer scroll ────────────────────────────────────────────
   La clase .reveal-ready la pone el JS sobre <body>. El CSS solo esconde los
   bloques cuando esa clase existe: si el script falla o no carga, la página
   se ve entera en vez de quedarse invisible para siempre. */
.reveal-ready [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease-in), transform .7s var(--ease-in);
}
.reveal-ready [data-reveal].is-visible{opacity:1;transform:none}

/* ── Movimiento reducido: menos y más suave, no cero ─────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Se conservan los fundidos de opacidad y se quitan zooms y desplazamientos. */
  .shot.is-active img,
  .shot.is-leaving img{animation:none;transform:none}
  .hero__cue{animation:none;opacity:.6}
  .tile__media,
  .tile:hover .tile__media,
  .tile.is-active .tile__media,
  .tile:focus-within .tile__media{transform:none;transition:none}
  .stage__progress span.is-running{animation:none;transform:scaleX(1)}
  .reveal-ready [data-reveal]{transform:none;transition:opacity .4s linear}
  .stage__track{scroll-behavior:auto}
  .carrito{transition:none}
  .hamb span{transition:none}
  .prod__foto{transition:opacity .2s linear}
}