/* =========================================================
   Sazón — landing. Tokens y reglas del Brand Playbook.
   Mobile first.
   ========================================================= */
:root{
  --tinta:#0B0C0B; --superficie:#171917; --crema:#F4F3EF; --raised:#FDFCF9; --honda:#EAE8E1;
  --apoyo:#5F645E; --hairline:#DFDDD5;
  --menta:#8FD6A8; --menta-honda:#1F6B3E; --ambar:#EF9D3B; --ambar-hondo:#8A4E12;
  --sobre-verde:#CFDDD3;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:32px; --s7:40px;
  --margen:20px; --max:1180px;
  --r:4px; --control:48px; --hair:1px;
  --dev-n:230;                       /* ancho del teléfono, sin unidad */
  --in:180ms; --out:120ms;
  --ease:cubic-bezier(.32,.72,.35,1);
  --soft:cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{background:var(--crema);color:var(--tinta);font-family:Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg{display:block;max-width:100%}
em{font-style:normal}
:where(a,button,[tabindex]):focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:var(--r)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--margen);top:var(--s2);z-index:99;background:var(--tinta);color:var(--crema);padding:var(--s3) var(--s4);border-radius:var(--r);font-weight:600;transform:translateY(-200%)}
.skip:focus{transform:none}
.container{width:min(var(--max),calc(100% - (var(--margen) * 2)));margin-inline:auto}
h1,h2,h3{font-weight:700;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--menta-honda);margin-bottom:var(--s5)}
.eyebrow--ambar{color:var(--ambar-hondo)}
.eyebrow--menta{color:var(--menta)}
.lead{font-size:17px;line-height:1.5;color:var(--apoyo);max-width:62ch}
.micro{display:block;color:var(--apoyo);font-size:12px;margin-top:var(--s3)}
.brk{display:none}
.btn{display:inline-flex;align-items:center;gap:var(--s3);min-height:var(--control);padding:0 var(--s4) 0 var(--s5);background:var(--tinta);color:var(--crema);border-radius:var(--r);font-size:16px;font-weight:600;transition:background var(--in) var(--ease)}
.btn:hover{background:var(--superficie)}
.btn b{display:grid;place-items:center;width:26px;height:26px;flex:none;background:var(--crema);color:var(--tinta);border-radius:50%;font-size:13px;font-weight:700;transition:transform var(--in) var(--ease)}
.btn:hover b{transform:translateX(2px)}
.btn__t{white-space:nowrap}
.btn__os{display:inline-flex;align-items:center;gap:var(--s2);padding-left:var(--s3);border-left:var(--hair) solid rgb(244 243 239 / .26)}
.btn__ico{width:17px;height:17px;fill:currentColor}
/* variante clara: mismo botón sobre fondo blanco (navbar) */
.btn--claro{background:var(--raised);color:var(--tinta);border:var(--hair) solid var(--tinta)}
.btn--claro:hover{background:#fff}
.btn--claro b{background:var(--tinta);color:var(--crema)}
.btn--claro .btn__os{border-left-color:rgb(11 12 11 / .18)}
/* versión compacta: cabe junto al logo en móvil */
.btn--nav{min-height:42px;padding:0 var(--s3) 0 var(--s4);gap:var(--s2);font-size:14px}
.btn--nav b{width:22px;height:22px;font-size:12px}

.nav{min-height:64px;border-bottom:var(--hair) solid var(--hairline);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);position:relative;z-index:20;padding-top:env(safe-area-inset-top)}
.logo{display:inline-flex;align-items:center;gap:.4em;min-height:var(--control)}
.logo__mark{width:.85em;height:1em;flex:none;fill:currentColor}
.logo__word{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1}
.logo--sm .logo__word{font-size:20px}
.navlinks{display:none;gap:var(--s6);font-size:13px;font-weight:600;color:var(--apoyo)}
.navlinks a{display:inline-flex;align-items:center;min-height:var(--control);transition:color var(--in) var(--ease)}
.navlinks a:hover{color:var(--tinta)}

.hero{position:relative;overflow:hidden;padding:var(--s7) 0 var(--s6)}
.hero__amb{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(110% 70% at 76% 14%,rgb(143 214 168 / .34),transparent 60%),radial-gradient(90% 62% at 10% 84%,rgb(143 214 168 / .15),transparent 58%),linear-gradient(180deg,rgb(143 214 168 / .10),rgb(244 243 239 / 0) 52%)}
.hero__grid{position:relative;z-index:1;display:grid;gap:var(--s7)}
.hero h1{font-size:clamp(40px,10.5vw,58px);line-height:.96;letter-spacing:-.045em}
.hero h1 em{color:var(--menta-honda)}
.hero-copy .lead{margin:var(--s5) 0 var(--s6);max-width:44ch}
.proof{margin-top:var(--s6);max-width:440px;padding-top:var(--s4);border-top:var(--hair) solid var(--hairline);min-height:62px}
.proof__q{font-size:15px;line-height:1.4;font-weight:500;margin-bottom:5px}
.proof__by{font-size:12px;color:var(--apoyo)}
.proof__q,.proof__by{transition:opacity var(--out) var(--soft),transform var(--out) var(--soft)}
.proof.is-out .proof__q,.proof.is-out .proof__by{opacity:0;transform:translateY(6px)}

/* =========================================================
   TELÉFONO Y PANTALLAS
   Las pantallas se escriben al tamaño lógico real del
   dispositivo de las capturas (430 x 932 pt) y se reducen
   con un único factor. Así ninguna proporción es inventada.
   ========================================================= */
.hero-art{position:relative;display:grid;place-items:center;padding:var(--s5) 0}
.phone{position:relative;z-index:2;width:calc(var(--dev-n) * 1px)}
.phone__frame{background:var(--tinta);border-radius:calc(var(--dev-n) * .132px);padding:5px;border:var(--hair) solid #2A2C29;box-shadow:0 44px 80px -44px rgb(11 12 11 / .5),0 14px 34px -22px rgb(11 12 11 / .32)}
.phone__screen{
  --sc:calc((var(--dev-n) - 12) / 430);
  position:relative;background:#000;overflow:hidden;
  border-radius:calc(var(--dev-n) * .112px);
  aspect-ratio:430 / 932;
}
.phone--stage{animation:fxFloat 7s var(--soft) infinite}

/* El mockup del hero flota, apenas ladeado. Nada rebota. */
.phone--flota{
  transform:perspective(1500px) rotateY(-6deg) rotateX(1.5deg);
  animation:phoneFloat 9s var(--soft) infinite;
}
@keyframes phoneFloat{
  0%,100%{translate:0 0;rotate:-.7deg}
  50%    {translate:0 -14px;rotate:.7deg}
}

.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity var(--out) var(--ease),visibility var(--out)}
.screen.is-active{opacity:1;visibility:visible;transition-duration:var(--in)}

.s{
  position:absolute;top:0;left:0;
  width:430px;height:932px;
  transform-origin:0 0;transform:scale(var(--sc));
  display:flex;flex-direction:column;
  padding:0 20px 12px;color:#fff;font-size:17px;line-height:1.35;
}

/* --- primitivas a escala real --- */
.s__st{height:54px;display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;flex:none;position:relative;z-index:3}
.s__sig{display:flex;gap:4px}
.s__sig i{width:5px;height:5px;border-radius:50%;background:#fff;display:block}
.s__h1{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.1;flex:none}
.s__h2{font-size:22px;font-weight:700;letter-spacing:-.03em;margin:24px 0 12px;flex:none}
.s__sub{font-size:15px;color:rgb(255 255 255 / .55);line-height:1.35;flex:none}
.s__sub--c{text-align:center;margin-top:6px}
.s__lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255 / .5);font-weight:600;margin:20px 0 10px;flex:none}
.s__lbl--mint{color:var(--menta)}
.s__cat{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255 / .5);font-weight:600;margin:16px 0 4px;flex:none}
.s__cat--mint{color:var(--menta)}
.s__circ{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:rgb(255 255 255 / .16);font-size:17px;font-weight:600}

.s__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:99px;font-size:16px;font-weight:600;white-space:nowrap;transition:transform 140ms var(--ease)}
.s__btn svg{width:17px;height:17px;fill:currentColor;stroke:none;flex:none}
.s__btn--w{background:#fff;color:#000;box-shadow:0 8px 24px -14px rgb(0 0 0 / .8)}
.s__btn--g{background:rgb(255 255 255 / .18);color:#fff}
.s__btn--o{background:rgb(28 30 28 / .92);backdrop-filter:blur(12px);border:var(--hair) solid rgb(255 255 255 / .34);color:#fff}
.s__btn--d{background:rgb(255 255 255 / .1);color:#fff}
.s__btn--m{background:var(--menta);color:#000}

.s__bar{position:absolute;left:20px;right:20px;bottom:12px;z-index:6;display:flex;align-items:center;gap:4px;height:64px;padding:6px;background:rgb(255 255 255 / .1);border-radius:99px;backdrop-filter:blur(12px)}
.s__tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:99px;font-size:15px;font-weight:600;color:rgb(255 255 255 / .55)}
.s__tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.s__tab--on{background:#fff;color:#000;flex:1.7}

/* --- portada a sangre (Explorar / Detalle) --- */
.s__cover{position:absolute;top:0;left:0;width:430px;height:420px;z-index:0}
.s__cover--det{height:330px}
.s__cover .dish{width:100%;height:100%}
.s__cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(0 0 0 / .45) 0 14%,rgb(0 0 0 / .06) 34%,rgb(0 0 0 / .58) 62%,rgb(0 0 0 / .95))}
.s__search{position:relative;z-index:3;display:flex;gap:10px;flex:none;margin-top:4px}
.s__searchbox{flex:1;display:flex;align-items:center;gap:10px;height:48px;padding:0 18px;background:rgb(255 255 255 / .16);backdrop-filter:blur(12px);border-radius:99px;font-size:17px;color:rgb(255 255 255 / .78)}
.s__searchbox svg,.s__filter svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;flex:none}
.s__filter{width:48px;height:48px;flex:none;display:grid;place-items:center;background:rgb(255 255 255 / .16);backdrop-filter:blur(12px);border-radius:50%;color:rgb(255 255 255 / .78)}
.s__navrow{position:relative;z-index:3;display:flex;justify-content:space-between;flex:none;margin-top:4px}
.s__coverbody{position:relative;z-index:3;display:grid;gap:8px;justify-items:start;margin-top:150px;flex:none}
.s__coverbody--det{margin-top:96px}
.s__badge{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--menta);border:var(--hair) solid rgb(143 214 168 / .8);border-radius:99px;padding:6px 14px}
.s__coverbody h4{font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.08;text-shadow:0 2px 16px rgb(0 0 0 / .55)}
.s__coverbody p{font-size:17px;color:rgb(255 255 255 / .88);text-shadow:0 1px 12px rgb(0 0 0 / .6)}
.s__acts{display:flex;gap:10px;margin-top:6px}
.s__tags{display:flex;gap:8px}
.s__tags em{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--menta);border:var(--hair) solid rgb(143 214 168 / .7);border-radius:99px;padding:6px 12px}
.s__author{display:inline-flex;align-items:center;gap:8px;font-size:17px;color:rgb(255 255 255 / .92);text-shadow:0 1px 12px rgb(0 0 0 / .6)}
.s__author i{width:26px;height:26px;border-radius:50%;background:var(--menta);color:#000;font-size:13px;font-weight:700;display:grid;place-items:center}

/* --- carrusel de recetas --- */
.s__row{display:grid;grid-auto-flow:column;grid-auto-columns:186px;gap:12px;overflow:hidden;margin-right:-20px;flex:none}
.s__row+.s__row{margin-top:16px}
.s__mini{display:grid;gap:4px;align-content:start}
.s__mini .dish{height:140px;border-radius:16px}
.s__mini em{font-size:11px;letter-spacing:.16em;color:var(--menta);font-style:normal;font-weight:700;margin-top:4px}
.s__mini b{font-size:15px;font-weight:600;line-height:1.25}
.s__mini i{font-size:13px;color:rgb(255 255 255 / .5);font-style:normal}
.s__row.is-pressed .s__mini:first-child{transform:scale(.96);transition:transform 140ms var(--ease)}

/* --- detalle --- */
.s__stats{display:flex;border:var(--hair) solid rgb(255 255 255 / .14);border-radius:16px;overflow:hidden;margin-top:20px;flex:none}
.s__stats span{flex:1;display:grid;gap:4px;text-align:center;padding:16px 6px}
.s__stats span+span{border-left:var(--hair) solid rgb(255 255 255 / .14)}
.s__stats b{font-size:24px;font-weight:700;letter-spacing:-.02em}
.s__stats .is-mint{color:var(--menta)}
.s__stats i{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgb(255 255 255 / .5);font-style:normal;line-height:1.2}
.s__seg{display:flex;gap:4px;background:rgb(255 255 255 / .1);border-radius:99px;padding:5px;font-size:16px;font-weight:600;color:rgb(255 255 255 / .55);margin:20px 0 8px;flex:none}
.s__seg span{flex:1;text-align:center;padding:11px 0;border-radius:99px}
.s__segon{background:#fff;color:#000}
.s__nut{display:flex;justify-content:space-between;align-items:center;height:56px;border-bottom:var(--hair) solid rgb(255 255 255 / .1);font-size:17px;flex:none}
.s__nut em{color:rgb(255 255 255 / .55);font-style:normal}
.s__porc{align-self:start;font-size:15px;font-weight:600;color:var(--menta);border:var(--hair) solid rgb(143 214 168 / .5);border-radius:99px;padding:10px 18px;margin-top:16px;flex:none}
.s__foot{position:absolute;left:20px;right:20px;bottom:12px;z-index:5;display:flex;align-items:center;gap:10px}
.s__foot .s__btn{flex:1;padding:0 12px}
.s__foot--lista i{flex:1;font-size:13px;color:rgb(255 255 255 / .55);font-style:normal;line-height:1.25}
.s__foot--lista .s__btn{flex:none}

.s--semana .s__foot{bottom:88px}
.s--explorar .s__row:last-of-type,.s--despensa .s__line:last-of-type{margin-bottom:76px}

/* --- semana --- */
.s__hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex:none}
.s__hdr .s__h1{max-width:300px}
.s__week{display:flex;align-items:center;justify-content:center;gap:20px;font-size:19px;font-weight:700;margin-top:22px;flex:none}
.s__days{overflow:hidden}
.s__day{display:grid;grid-template-columns:44px 1fr;gap:14px;border-top:var(--hair) solid rgb(255 255 255 / .12);padding:14px 0;margin-top:14px}
.s__dnum{display:grid;text-align:center;font-size:11px;letter-spacing:.14em;color:rgb(255 255 255 / .5);align-content:start}
.s__dnum b{font-size:26px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.1}
.s__meals{display:grid;gap:12px}
.s__meal{display:grid;grid-template-columns:52px 1fr;column-gap:12px;align-items:center}
.s__meal .dish{width:52px;height:52px;border-radius:10px;grid-row:span 2}
.s__meal b{font-size:17px;font-weight:600;line-height:1.2;align-self:end}
.s__meal em{font-size:13px;color:rgb(255 255 255 / .5);font-style:normal;align-self:start}
.s__add{font-size:15px;font-weight:600;color:var(--menta);border:var(--hair) dashed rgb(143 214 168 / .5);border-radius:12px;padding:12px;text-align:center}

/* --- modo cocina --- */
.s--cocina .s__top{margin-top:4px}
.s--cocina .s__lbl{margin:0}
.s__ckchip{
  align-self:start;display:inline-flex;align-items:center;gap:12px;
  border:var(--hair) solid rgb(143 214 168 / .45);border-radius:99px;
  padding:13px 22px;font-size:17px;margin-top:16px;flex:none;
}
.s__ckchip i{width:9px;height:9px;border-radius:50%;background:var(--menta);flex:none}
.s__ckchip em{font-size:15px;color:rgb(255 255 255 / .5);font-style:normal}
.s__cknow{
  display:flex;align-items:center;gap:12px;margin-top:24px;flex:none;
  border-left:4px solid var(--menta);padding-left:14px;
}
.s__cknow b{font-size:17px;font-weight:700;color:var(--menta)}
.s__cknow em{font-size:15px;color:rgb(255 255 255 / .5);font-style:normal}
.s__ckn{display:flex;align-items:baseline;gap:4px;margin-top:30px;flex:none}
.s__ckn b{font-size:76px;font-weight:700;color:var(--menta);letter-spacing:-.05em;line-height:1}
.s__ckn em{font-size:30px;font-weight:700;color:rgb(255 255 255 / .4);font-style:normal}
.s__ckstep{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.16;margin-top:12px;max-width:340px;flex:none}
.s__timer{
  margin-top:auto;margin-bottom:84px;flex:none;
  border:var(--hair) solid rgb(255 255 255 / .12);border-radius:16px;
  padding:20px;display:grid;gap:16px;
}
.s__timer p{font-size:17px;color:rgb(255 255 255 / .55);line-height:1.3}
.s__timerbtns{display:flex;gap:10px}
.s__timerbtns .s__btn{flex:1;padding:0 12px}
.s__foot--cocina{gap:12px}
.s__back{width:56px;height:56px;flex:none;display:grid;place-items:center;background:rgb(255 255 255 / .08);border-radius:14px;font-size:20px;font-weight:600}
.s__foot--cocina .s__btn--w{flex:1;height:56px}

/* --- despensa --- */
.s__scans{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;flex:none}
.s__scan{display:grid;justify-items:center;align-content:center;gap:8px;text-align:center;height:92px;background:rgb(255 255 255 / .06);border:var(--hair) solid rgb(255 255 255 / .12);border-radius:14px;padding:8px 4px;font-size:12px;line-height:1.2;color:rgb(255 255 255 / .85)}
.s__scan svg{width:22px;height:22px;fill:none;stroke:var(--menta);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s__now{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:none}
.s__nowcard{display:grid;gap:6px;align-content:start;background:rgb(255 255 255 / .06);border:var(--hair) solid rgb(255 255 255 / .12);border-radius:14px;padding:14px}
.s__nowcard b{font-size:16px;font-weight:700;line-height:1.2}
.s__nowcard i{font-size:13px;color:rgb(255 255 255 / .5);font-style:normal}
.s__line{display:flex;align-items:center;justify-content:space-between;height:52px;border-bottom:var(--hair) solid rgb(255 255 255 / .1);font-size:17px;flex:none}
.s__line em{font-size:15px;color:rgb(255 255 255 / .55);font-style:normal}

/* --- lista de compras --- */
.s__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex:none}
.s__pillm{background:var(--menta);color:#000;border-radius:99px;padding:11px 20px;font-size:16px;font-weight:700}
.s__pillm--sm{padding:9px 15px;font-size:14px}
.s__exit{font-size:17px;color:rgb(255 255 255 / .65)}
.s__note{display:flex;align-items:center;gap:12px;background:rgb(255 255 255 / .06);border:var(--hair) solid rgb(255 255 255 / .12);border-radius:14px;padding:14px;margin-top:16px;flex:none}
.s__note b{display:block;font-size:16px;font-weight:700}
.s__note i{display:block;font-size:13px;color:rgb(255 255 255 / .5);font-style:normal;line-height:1.3;margin-top:2px}
.s__count{font-size:52px;font-weight:700;letter-spacing:-.05em;line-height:1;margin-top:24px;flex:none}
.s__count em{color:rgb(255 255 255 / .4);font-style:normal}
.s__prog{display:block;height:5px;border-radius:3px;background:rgb(255 255 255 / .14);margin-top:12px;flex:none}
.s__check{display:flex;align-items:center;gap:16px;height:60px;border-bottom:var(--hair) solid rgb(255 255 255 / .1);flex:none}
.s__box{width:26px;height:26px;border-radius:50%;border:2px solid rgb(255 255 255 / .35);flex:none}
.s__check b{flex:1;font-size:19px;font-weight:600}
.s__check em{font-size:17px;color:rgb(255 255 255 / .55);font-style:normal}

/* --- fotos de receta: si el archivo no existe, se ve el degradado --- */
.dish{display:block;background-size:cover;background-position:center;background-repeat:no-repeat}
.dish--lentejas{background-image:url("recipes/lentejas.jpg"),linear-gradient(155deg,#D9A85C,#9C6B2F 55%,#4A3318)}
.dish--brownie{background-image:url("recipes/brownie.jpg"),linear-gradient(150deg,#7A5340,#43291E 58%,#241512)}
.dish--tiramisu{background-image:url("recipes/tiramisu.jpg"),linear-gradient(150deg,#E8D9B4,#B8985F 60%,#5E4526)}
.dish--risotto{background-image:url("recipes/risotto.jpg"),linear-gradient(150deg,#E8C877,#C9922F 55%,#6B4A16)}
.dish--batido{background-image:url("recipes/batido.jpg"),linear-gradient(150deg,#E5D08A,#B99A4E 58%,#5E4A20)}
.dish--curry{background-image:url("recipes/curry.jpg"),linear-gradient(150deg,#D9A05B,#96622A 58%,#46300F)}
.dish--humitas{background-image:url("recipes/humitas.jpg"),linear-gradient(150deg,#D7C767,#9C8C33 58%,#4E4416)}

/* --- tap simulado --- */
.tapdot{position:absolute;z-index:20;width:38px;height:38px;border-radius:50%;background:rgb(255 255 255 / .3);border:2px solid rgb(255 255 255 / .75);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.4);transition:opacity 160ms var(--soft),transform 260ms var(--soft)}
.tapdot.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
[data-tap].is-pressed{transform:scale(.96);transition:transform 140ms var(--ease)}

/* =========================================================
   PIEZAS FLOTANTES — cada una atada a su pantalla
   ========================================================= */
.fx{position:absolute;inset:0;z-index:3;pointer-events:none}
.fx__i{position:absolute;opacity:0;transform:translateY(10px) scale(.97);transition:opacity .55s var(--soft),transform .55s var(--soft)}
.fx__i.is-on{opacity:1;transform:none}
.fx__i > *{scale:var(--fxs,.86);animation:fxFloat var(--dur,9s) var(--soft) infinite,fxTurn var(--turn,14s) var(--soft) infinite;animation-delay:var(--del,0s)}
@keyframes fxFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes fxTurn{0%,100%{rotate:var(--r0,-1.5deg)}50%{rotate:var(--r1,1.5deg)}}

.fxcard{background:var(--superficie);color:var(--crema);border:var(--hair) solid rgb(244 243 239 / .1);border-radius:14px;padding:var(--s2);box-shadow:0 18px 40px -28px rgb(11 12 11 / .55)}
.fxpill{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:99px;font-size:11px;font-weight:700;background:var(--superficie);color:var(--crema);border:var(--hair) solid rgb(244 243 239 / .12);white-space:nowrap}
.fxpill--mint{background:var(--menta);color:var(--tinta);border-color:var(--menta)}
.fxpill svg{width:13px;height:13px;fill:currentColor;stroke:none}
.fxcard--receta{width:150px;display:grid;gap:5px}
.fxcard--receta .dish{height:56px;border-radius:9px}
.fxcard--receta b{font-size:11px;font-weight:600;line-height:1.2}
.fxcard--receta i{font-size:9px;color:rgb(244 243 239 / .58);font-style:normal}
.fxcard--macros{display:flex;gap:2px;padding:var(--s2) 2px}
.fxcard--macros span{flex:1;display:grid;gap:1px;text-align:center;padding:0 9px}
.fxcard--macros span+span{border-left:var(--hair) solid rgb(244 243 239 / .12)}
.fxcard--macros b{font-size:13px;font-weight:700;letter-spacing:-.02em}
.fxcard--macros span:first-child b{color:var(--menta)}
.fxcard--macros i{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:rgb(244 243 239 / .58);font-style:normal}
.fxcard--semana{width:172px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px}
.fxday{display:grid;text-align:center;font-size:7px;letter-spacing:.1em;color:rgb(244 243 239 / .58)}
.fxday b{font-size:14px;font-weight:700;color:var(--crema);letter-spacing:-.02em}
.fxcard--semana .dish{width:28px;height:28px;border-radius:7px}
.fxmeal{display:grid;gap:1px;min-width:0}
.fxmeal b{font-size:10px;font-weight:600;line-height:1.15}
.fxmeal i{font-size:8px;color:rgb(244 243 239 / .58);font-style:normal}
.fxcard--scan{display:grid;gap:4px;width:132px}
.fxcard--scan span{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:500;background:rgb(244 243 239 / .05);border-radius:8px;padding:7px 8px}
.fxcard--scan svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--menta);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fxcard--ahora{width:150px;display:grid;gap:3px;padding:var(--s3)}
.fxlbl{font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--menta);font-style:normal;font-weight:700}
.fxcard--ahora b{font-size:11px;font-weight:600;line-height:1.2}
.fxcard--ahora > i:last-child{font-size:9px;color:rgb(244 243 239 / .58);font-style:normal}
.fxcard--falta{width:120px;display:grid;gap:2px;padding:var(--s3)}
.fxcard--falta b{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1}
.fxcard--falta i{font-size:9px;color:rgb(244 243 239 / .58);font-style:normal}

/* Colocación: una pieza a cada lado por pantalla */
.fx__i--a{left:0;top:6%;--dur:9s;--r0:-2deg;--r1:1deg}
.fx__i--b{right:0;top:2%;--dur:11s;--del:-2s;--r0:1.5deg;--r1:-1.5deg}
.fx__i--c{right:0;top:5%;--dur:10s;--r0:1deg;--r1:-2deg}
.fx__i--d{left:1%;top:46%;--dur:8s;--del:-3s;--r0:-1deg;--r1:2deg}
.fx__i--e{left:0;top:42%;--dur:10s;--r0:1deg;--r1:-2deg}
.fx__i--f{right:0;top:4%;--dur:9s;--del:-2s;--r0:-1.5deg;--r1:1deg}
.fx__i--g{right:0;top:40%;--dur:11s;--r0:1deg;--r1:-1.5deg}
.fx__i--h{left:0;top:5%;--dur:9.5s;--del:-1s;--r0:-2deg;--r1:1deg}
.fx__i--i{left:1%;top:44%;--dur:9s;--r0:-1deg;--r1:2deg}
.fx__i--j{right:0;top:3%;--dur:10.5s;--del:-2s;--r0:1.5deg;--r1:-1deg}

/* =========================================================
   PROBLEMA / RECORRIDO / LISTA / CITA / CIERRE
   ========================================================= */
.problem{padding:var(--s7) 0}
.problem h2{font-size:clamp(36px,9vw,52px);letter-spacing:-.04em}
.problem h2 em{color:var(--menta-honda)}
.problem-intro{margin-top:var(--s5);color:var(--apoyo);font-size:15px;max-width:52ch}
.friction{display:grid;gap:var(--s2);margin-top:var(--s6)}
.friction-card{background:var(--raised);border:var(--hair) solid var(--hairline);border-radius:var(--r);padding:var(--s5);position:relative;overflow:hidden}
.friction-card .num{font-size:10px;color:var(--menta-honda);font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.friction-card h3{font-size:22px;letter-spacing:-.035em;margin:var(--s7) 0 var(--s2)}
.friction-card p{font-size:13px;line-height:1.5;color:var(--apoyo);max-width:44ch}
.friction-card__ico{position:absolute;right:var(--s5);bottom:var(--s5);width:34px;height:34px;fill:none;stroke:var(--honda);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.flow{background:var(--menta-honda);color:var(--crema);padding:var(--s7) 0;position:relative;overflow:hidden}
.flow-head{display:grid;gap:var(--s5)}
.flow h2{font-size:clamp(40px,10vw,58px);letter-spacing:-.045em;line-height:.96}
.flow h2 em{color:var(--crema);opacity:.62}
.flow-head p{color:var(--sobre-verde);font-size:15px;line-height:1.5;max-width:56ch}
.flow .eyebrow--ambar{color:var(--sobre-verde)}
.tabs{display:flex;gap:var(--s1);margin:var(--s6) 0 var(--s5);overflow-x:auto;scrollbar-width:none;padding-bottom:var(--s1)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;min-height:var(--control);padding:0 var(--s4);border:var(--hair) solid rgb(244 243 239 / .3);color:var(--sobre-verde);border-radius:var(--r);font-size:13px;font-weight:600;transition:background var(--in) var(--ease),color var(--in) var(--ease),border-color var(--in) var(--ease)}
.tab.is-active{background:var(--crema);color:var(--tinta);border-color:var(--crema)}
.flow-stage{display:grid;gap:var(--s6)}
.flow-copy{order:2}
.flow-copy .stepno{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--sobre-verde);max-width:none}
.flow-copy h3{font-size:clamp(28px,7vw,38px);letter-spacing:-.04em;margin:var(--s3) 0 var(--s4);line-height:1.05}
.flow-copy p{font-size:15px;color:var(--sobre-verde);line-height:1.5;max-width:46ch}
.pillrow{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s5)}
.pill{border:var(--hair) solid rgb(244 243 239 / .3);border-radius:var(--r);padding:6px var(--s3);font-size:11px;color:var(--sobre-verde)}
.stage-ui{order:1;position:relative;display:grid;place-items:center;padding:var(--s5) 0 72px}
.stage-ui__halo{position:absolute;z-index:0;width:min(86%,380px);aspect-ratio:1;border-radius:50%;background:rgb(244 243 239 / .07)}
.flow-float{position:absolute;z-index:4;background:var(--crema);color:var(--tinta);border-radius:var(--r);padding:var(--s3);max-width:150px}
.flow-float b{display:block;font-size:14px;font-weight:700;letter-spacing:-.03em}
.flow-float span{display:block;font-size:10px;color:var(--apoyo);margin-top:2px}
.flow-float--left{left:0;top:14%}
.flow-float--right{right:0;bottom:18%}
.dots{position:absolute;bottom:0;left:50%;translate:-50% 0;z-index:10;display:flex;gap:var(--s1)}
.dot{width:var(--control);height:var(--control);display:grid;place-items:center}
.dot::after{content:"";display:block;width:18px;height:3px;border-radius:2px;background:rgb(244 243 239 / .3);transition:background var(--in) var(--ease)}
.dot[aria-selected="true"]::after{background:var(--crema)}

.list-section{padding:var(--s7) 0}
.list-grid{display:grid;gap:var(--s6)}
.list-copy h2{font-size:clamp(38px,10vw,56px);letter-spacing:-.045em;line-height:.96}
.list-copy h2 em{color:var(--menta-honda)}
.list-copy .lead{margin:var(--s5) 0 var(--s6)}
.list-visual{position:relative;background:var(--honda);border-radius:var(--r);padding:var(--s6) var(--s5);display:grid;place-items:center;min-height:400px}
.orb{position:absolute;width:30px;height:30px;fill:none;stroke:var(--apoyo);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:fxFloat 9s var(--soft) infinite}
.orb--1{left:7%;top:9%}
.orb--2{right:9%;top:7%;animation-duration:11s}
.orb--3{left:9%;bottom:9%;animation-duration:10s}
.orb--4{right:7%;bottom:11%;animation-duration:8s}
.shopping{position:relative;z-index:2;width:min(100%,300px);background:var(--raised);border:var(--hair) solid var(--hairline);border-radius:var(--r);padding:var(--s5)}
.shopping__label{font-size:10px;color:var(--menta-honda);font-weight:600;text-transform:uppercase;letter-spacing:.18em}
.shopping h3{font-size:22px;letter-spacing:-.035em;margin:var(--s2) 0 var(--s4)}
.shoprow{display:flex;justify-content:space-between;border-top:var(--hair) solid var(--hairline);padding:var(--s3) 0;font-size:13px}
.shoprow b{font-weight:600}
.shoprow span{color:var(--apoyo)}
.shopping__auto{margin-top:var(--s4);background:var(--menta-honda);color:var(--crema);padding:var(--s3);border-radius:var(--r);font-size:12px;font-weight:600;text-align:center}

.quote{background:var(--tinta);color:var(--crema);padding:var(--s7) 0;text-align:center}
.quote blockquote{font-size:clamp(32px,8.5vw,52px);line-height:1.02;letter-spacing:-.045em;font-weight:700;max-width:950px;margin-inline:auto}
.quote blockquote em{opacity:.62}
.quote cite{display:block;font-style:normal;color:rgb(244 243 239 / .58);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:var(--s6)}
.final{padding:var(--s7) 0}
.final-inner{display:grid;gap:var(--s6)}
.final h2{font-size:clamp(38px,9.5vw,54px);line-height:.98;letter-spacing:-.045em}
.final h2 em{color:var(--menta-honda)}
.final-side .lead{margin-bottom:var(--s5)}
footer{border-top:var(--hair) solid var(--hairline);padding:var(--s6) 0 max(var(--s6),env(safe-area-inset-bottom));font-size:12px;color:var(--apoyo)}
.foot__cols{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s6) var(--s7)}
.foot__left{display:grid;gap:var(--s4);justify-items:start}
.foot__links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-weight:600}
.foot__links a{display:inline-flex;align-items:center;min-height:32px;transition:color var(--in) var(--ease)}
.foot__links a:hover{color:var(--tinta)}
.foot__right{display:grid;gap:var(--s1);align-content:end}
.foot__tag{color:var(--tinta);font-weight:600}
.foot__fine{font-size:11px;line-height:1.5;color:var(--apoyo);opacity:.9}
@media (min-width:640px){
  .foot__cols{flex-wrap:nowrap;align-items:flex-end}
  .foot__right{text-align:right;justify-items:end}
}


/* =========================================================
   Páginas legales (términos, privacidad)
   ========================================================= */
.legal{padding:var(--s7) 0 var(--s7)}
.legal__head{max-width:760px}
.legal__back{display:inline-flex;align-items:center;gap:var(--s2);min-height:40px;font-size:13px;font-weight:600;color:var(--apoyo);transition:color var(--in) var(--ease)}
.legal__back:hover{color:var(--tinta)}
.legal__back span{font-size:15px;line-height:1}
.legal h1{font-size:clamp(34px,6.4vw,56px);line-height:.98;letter-spacing:-.045em;margin:var(--s5) 0 var(--s4)}
.legal__meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--menta-honda)}
.legal__intro{font-size:17px;line-height:1.55;color:var(--apoyo);margin-top:var(--s5)}
.legal__intro+.legal__intro{margin-top:var(--s3)}
.legal__doc{max-width:760px;margin-top:var(--s7);counter-reset:sec}
.legal__doc section{padding-top:var(--s6);margin-top:var(--s6);border-top:var(--hair) solid var(--hairline)}
.legal__doc section:first-child{margin-top:0}
.legal__doc h2{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.03em;margin-bottom:var(--s4)}
.legal__doc h2::before{counter-increment:sec;content:counter(sec) " · ";color:var(--menta-honda);font-weight:700}
.legal__doc h3{font-size:15px;font-weight:700;letter-spacing:-.01em;margin:var(--s5) 0 var(--s3)}
.legal__doc p{margin-bottom:var(--s3);color:#2B2E2B;line-height:1.6}
.legal__doc p:last-child{margin-bottom:0}
.legal__doc strong{font-weight:700;color:var(--tinta)}
.legal__doc a{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.legal__doc ul,.legal__doc ol{margin:0 0 var(--s4)}
.legal__doc ol{counter-reset:num}
.legal__doc li{position:relative;padding-left:var(--s5);margin-bottom:var(--s2);color:#2B2E2B;line-height:1.55}
.legal__doc ul li::before{content:"";position:absolute;left:5px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--menta)}
.legal__doc ol li::before{counter-increment:num;content:counter(num) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--menta-honda);font-size:13px;line-height:1.75}
.legal__box{background:var(--raised);border:var(--hair) solid var(--hairline);border-radius:var(--r);padding:var(--s5);margin-top:var(--s4)}
.legal__box p{margin-bottom:var(--s1)}
@media (min-width:820px){
  .legal{padding:var(--s7) 0 96px}
  .legal__doc section{padding-top:var(--s7);margin-top:var(--s7)}
}
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* =========================================================
   Breakpoints
   ========================================================= */
@media (max-width:559px){
  .phone--flota{transform:perspective(1500px) rotateY(-4deg) rotateX(1deg)}
  /* apoyadas sobre la foto, no sobre el buscador */
  .fx__i--a,.fx__i--h{top:20%}
  .fx__i--e,.fx__i--i{top:48%}
  .fx__i--b,.fx__i--c,.fx__i--f,.fx__i--j{top:7%}
  .fx__i--d{top:50%}
  .fx__i--g{top:44%}
}
@media (min-width:560px){
  .friction{grid-template-columns:1fr 1fr}
  .friction-card:last-child{grid-column:1 / -1}
  .hero h1{font-size:clamp(50px,8vw,64px)}
}
@media (min-width:820px){
  :root{--margen:32px;--dev-n:210;--fxs:.78}
  .nav{min-height:74px}
  .navlinks{display:flex}
  .brk{display:inline}
  .hero{padding:var(--s7) 0}
  .hero__grid{grid-template-columns:1fr 1.06fr;align-items:center;gap:var(--s7)}
  .hero h1{font-size:clamp(42px,4.3vw,62px);line-height:.94;letter-spacing:-.045em}
  .hero-art{padding:0;min-height:560px}
  .problem{padding:96px 0 80px}
  .problem-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s7)}
  .problem h2{font-size:clamp(52px,6.4vw,80px);letter-spacing:-.05em;max-width:800px}
  .problem-intro{margin-top:0;max-width:330px}
  .friction{grid-template-columns:repeat(3,1fr);margin-top:var(--s7)}
  .friction-card:last-child{grid-column:auto}
  .friction-card{min-height:200px}
  .flow{padding:96px 0 104px}
  .flow-head{grid-template-columns:1fr .7fr;align-items:end;gap:var(--s7)}
  .flow h2{font-size:clamp(56px,6.6vw,88px);letter-spacing:-.055em;line-height:.9}
  .flow-stage{grid-template-columns:.7fr 1.3fr;align-items:center;gap:var(--s7)}
  .flow-copy{order:0}
  .stage-ui{order:0;min-height:560px;padding:0 0 72px}
  .stage-ui__halo{width:min(80%,420px)}
  .flow-float{max-width:170px}
  .flow-float--left{left:13%;top:20%}
  .flow-float--right{right:11%;bottom:24%}
  .list-section{padding:104px 0}
  .list-grid{grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
  .list-copy h2{font-size:clamp(52px,6vw,78px);letter-spacing:-.05em}
  .list-visual{min-height:520px;padding:var(--s6)}
  .orb{width:34px;height:34px}
  .quote{padding:112px 0}
  .quote blockquote{font-size:clamp(48px,5.8vw,78px);letter-spacing:-.05em}
  .final{padding:112px 0 96px}
  .final-inner{grid-template-columns:1fr .7fr;align-items:end;gap:var(--s7)}
  .final h2{font-size:clamp(46px,5vw,68px);line-height:.94;letter-spacing:-.05em}
  .final-side .lead{max-width:350px}
}
@media (min-width:1100px){
  :root{--dev-n:248;--fxs:.92}
  .fx__i--a,.fx__i--e,.fx__i--h{left:4%}
  .fx__i--b,.fx__i--c,.fx__i--f,.fx__i--j{right:6%}
  .fx__i--g{right:4%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal{opacity:1;transform:none}
  .fx__i{opacity:1;transform:none}
}
@media print{ .nav,.hero-art,.stage-ui,.dots,.tabs{display:none} body{background:#fff} }