/* ═══════════════════════════════════════════════════════════════════════════
   OLAM JUMPING — tema "agua y cartela"

   De dónde sale el diseño (todo del logo del negocio, nada genérico):
   · El logo es una isla de caricatura flotando en agua azul brillante  ->  la
     página entera es una columna de agua: degradado de océano profundo, cortes
     de sección en ola (SVG), rayos de luz y burbujas subiendo.
   · El letrero del logo es una CARTELA: placa de lóbulos redondeados con borde
     dorado y remaches dorados  ->  es el motivo de toda tarjeta (radio grande,
     filete dorado y cuatro remaches en las esquinas). Ver .card.
   · Las letras del logo son redondas, gruesas y con contorno  ->  Fredoka para
     display, y el H1 lleva contorno + sombra dura como el letrero.
   · Palmeras del logo -> silueta SVG repetida como decoración.

   Diferenciación deliberada frente a MIKA'S WONDERLAND (mismo rubro, y ojo,
   paleta parecida de azul marino + dorado): Mika's es boutique/elegante, claro,
   Playfair + festón de carrusel. Olam va OSCURO, acuático y de alta energía —
   el fondo es agua profunda para que los recortes de producto revienten.

   ─── NOTA DE RESOLUCIÓN, IMPORTANTE ────────────────────────────────────────
   Las 7 fuentes son thumbnails de Facebook de 414×414, y cada producto ocupa
   solo un pedazo de ese cuadro. El ancho NATIVO de cada recorte va inline en su
   tarjeta como style="--w:198px", y .card__pic img lo usa de tope real — a 2× de
   pantalla eso ya es una ampliación de 2×, el mismo trato que en Mika's
   Wonderland. Por eso los extras (popcorn 103px, algodón 103px, diana 108px,
   torre 124px) van en una rejilla más apretada que los castillos (~200px): no es
   capricho visual, es el límite de cada imagen.
   Cuando Olam mande las fotos originales, actualizar cada --w y los max-height.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* medidos con PIL sobre logo.jpg, filtrando por banda de tono y saturación */
  --navy-deep:#08113a;
  --navy:#102070;          /* azul marino del logo            */
  --navy-2:#0c1a52;
  --blue:#1060c0;          /* azul brillante del logo         */
  --blue-lt:#2b8de0;
  --cyan:#80d8f8;          /* agua clara / burbujas del logo  */
  --cyan-pale:#d6f1ff;
  --gold:#fca205;          /* remaches y CTA                  */
  --gold-lt:#f8e068;       /* filete de la cartela            */
  --red:#f01018;
  --green:#47a309;
  --white:#fff;

  --ink:#eaf6ff;
  --ink-dim:#a9c4e6;

  --wrap:1180px;
  --r:26px;                /* radio de la cartela */
  --shadow:0 22px 50px -24px #000;

  --fd:'Fredoka',system-ui,sans-serif;
  --fb:'Nunito',system-ui,sans-serif;
}

/* ── reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  font:400 17px/1.65 var(--fb);
  color:var(--ink);
  background:var(--navy-deep);
  overflow-x:hidden;
}
/* el atributo height del HTML gana sobre aspect-ratio — hay que anularlo aquí */
img,svg{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

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

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.anchor{display:block;position:relative;top:-88px;visibility:hidden}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:#22160a;
      padding:12px 20px;border-radius:0 0 12px 0;font-family:var(--fd);font-weight:600}
.skip:focus{left:0}

:where(a,button,input,textarea):focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:8px;
}

/* ── tipografía compartida ─────────────────────────────────────────────── */
.eyebrow{
  font:600 13px/1 var(--fd);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.eyebrow::after{content:"";flex:0 0 46px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent)}

.h2{font:600 clamp(30px,4.4vw,46px)/1.1 var(--fd);letter-spacing:-.01em;margin-bottom:16px}
.h3{font:600 clamp(24px,3vw,32px)/1.15 var(--fd);letter-spacing:-.01em}
.lead{max-width:62ch;color:var(--ink-dim);font-size:clamp(16px,1.7vw,18.5px)}
.lead b,.paso p b,.card p b,.mega__txt p b,.cgroup__hd p b{color:var(--cyan);font-weight:700}

/* ── ola divisoria ───────────────────────────────────────────────────────
   --down : va DENTRO de la sección, pegada abajo, pintada del color de la
            sección SIGUIENTE (la de abajo sube en ola).
   --up   : va ENCIMA de la sección (bottom:100%), pintada del color de la
            sección PROPIA (esta sube en ola sobre la anterior).
   Si se confunden, la ola queda del mismo color que su fondo y no se ve. */
.wave{position:absolute;left:0;width:100%;height:clamp(46px,6vw,90px);display:block;z-index:2;
      pointer-events:none}
/* filo cian = línea de superficie del agua. Además de quedar bien, es lo que
   hace que la ola se vea cuando el degradado de arriba llega casi al mismo
   color con que está pintada (pasaba en el borde inferior del hero). */
.wave--down{bottom:-1px;filter:drop-shadow(0 -2px 0 rgba(128,216,248,.5))}
.wave--up{bottom:100%;top:auto;filter:drop-shadow(0 2px 0 rgba(128,216,248,.5))}
.wave path{fill:var(--navy-2)}
.wave--up path{fill:var(--navy-deep)}

/* ══ NAV ═══════════════════════════════════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--navy-deep) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(128,216,248,.14);
}
.nav__in{display:flex;align-items:center;gap:16px;min-height:70px}
.nav__brand{flex:0 0 auto;line-height:0}
.nav__brand img{width:150px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}

.nav__links{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav__links a{
  text-decoration:none;padding:9px 13px;border-radius:11px;
  font:500 15.5px/1 var(--fd);color:var(--ink);
  transition:background .18s,color .18s;
}
.nav__links a:hover{background:rgba(128,216,248,.12);color:var(--cyan)}

/* ojo: .nav__links a es más específico que .nav__cta a secas — hay que
   empatarle la especificidad o el CTA pierde el color (trampa conocida) */
.nav__links a.nav__cta{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--green);color:#fff;font-weight:600;margin-left:8px;
  box-shadow:0 8px 18px -10px var(--green);
}
.nav__links a.nav__cta:hover{background:#57c00d;color:#fff}
.ico{width:17px;height:17px;fill:currentColor;flex:0 0 auto}

.burger{
  margin-left:auto;order:3;
  display:none;width:46px;height:42px;border:0;border-radius:12px;
  background:rgba(128,216,248,.1);cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.burger span{display:block;width:21px;height:2.5px;border-radius:2px;background:var(--cyan);
  transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ══ HERO ══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;isolation:isolate;
  padding:clamp(46px,7vw,84px) 0 clamp(90px,11vw,140px);
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(128,216,248,.30),transparent 62%),
    linear-gradient(180deg,var(--blue) 0%,#0e3f92 34%,var(--navy) 68%,var(--navy-2) 100%);
  text-align:center;overflow:hidden;
}
.hero__water{position:absolute;inset:0;z-index:-1;pointer-events:none}

/* rayos de luz entrando al agua */
.shaft{position:absolute;top:-14%;width:clamp(60px,9vw,130px);height:130%;
  background:linear-gradient(180deg,rgba(214,241,255,.20),transparent 72%);
  transform:skewX(-13deg);filter:blur(3px)}
.shaft.s1{left:8%}
.shaft.s2{left:38%;width:clamp(34px,5vw,74px);opacity:.7}
.shaft.s3{right:12%;opacity:.55}

.bub{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),rgba(128,216,248,.22) 46%,rgba(128,216,248,.05) 70%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);
  animation:rise linear infinite}
.bub.b1{left:6%;width:16px;height:16px;bottom:-30px;animation-duration:15s}
.bub.b2{left:19%;width:9px;height:9px;bottom:-30px;animation-duration:11s;animation-delay:2s}
.bub.b3{left:44%;width:22px;height:22px;bottom:-40px;animation-duration:19s;animation-delay:4s}
.bub.b4{left:63%;width:11px;height:11px;bottom:-30px;animation-duration:13s;animation-delay:1s}
.bub.b5{left:81%;width:18px;height:18px;bottom:-36px;animation-duration:17s;animation-delay:6s}
.bub.b6{left:92%;width:8px;height:8px;bottom:-30px;animation-duration:12s;animation-delay:3s}
@keyframes rise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.9}
  85%{opacity:.7}
  100%{transform:translateY(-118vh) translateX(22px);opacity:0}
}

.hero__in{position:relative;z-index:3}
.hero__logo{width:min(360px,74vw);height:auto;margin:0 auto 22px;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}

/* el contorno + sombra dura repite el tratamiento de las letras del letrero */
.hero__h1{
  font:600 clamp(33px,6.4vw,66px)/1.03 var(--fd);
  letter-spacing:-.02em;margin-bottom:18px;color:#fff;
  text-shadow:
    0 2px 0 #0a2a66, 0 4px 0 #082250, 0 10px 24px rgba(0,0,0,.5),
    -1.5px -1.5px 0 rgba(255,255,255,.35);
}
.hero__sub{max-width:60ch;margin:0 auto;color:#cfe6ff;font-size:clamp(16px,1.8vw,19px)}
.hero__cta{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:28px}
.hero__tel{margin-top:18px;font:500 15px/1 var(--fd);color:#bcd8f5;letter-spacing:.02em}
.hero__tel a{text-decoration:none;border-bottom:1.5px dotted rgba(188,216,245,.5);padding-bottom:2px}
.hero__tel a:hover{color:var(--gold);border-color:var(--gold)}

/* ── botones ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 27px;border-radius:999px;border:0;cursor:pointer;
  font:600 16px/1 var(--fd);text-decoration:none;letter-spacing:.01em;
  transition:transform .16s,box-shadow .16s,background .16s;
}
.btn:hover{transform:translateY(-2px)}
.btn--gold{background:linear-gradient(180deg,#ffc043,var(--gold));color:#3a2201;
  box-shadow:0 12px 26px -12px rgba(252,162,5,.9),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--gold:hover{box-shadow:0 18px 34px -14px rgba(252,162,5,1),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(214,241,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.15)}
.btn--wa{background:var(--green);color:#fff;box-shadow:0 12px 26px -12px var(--green)}
.btn--wa:hover{background:#57c00d}

/* ── escena de productos del hero ──────────────────────────────────────── */
.scene{
  position:relative;z-index:3;
  margin-top:clamp(26px,4vw,46px);
  display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,2vw,30px);
}
.scene img{filter:drop-shadow(0 24px 26px rgba(0,0,0,.42));animation:bob 7s ease-in-out infinite}
/* topes = ancho nativo de cada recorte (237 / 298 / 172 px) */
.scene__a{width:min(237px,29vw);animation-delay:-1.2s}
.scene__b{width:min(298px,36vw)}
.scene__c{width:min(172px,21vw);animation-delay:-3.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ══ MARQUESINA ════════════════════════════════════════════════════════ */
.strip{background:var(--navy-2);padding:clamp(24px,3.4vw,38px) 0;
  border-bottom:1px solid rgba(128,216,248,.12)}
.strip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}
.strip__i b{display:block;font:600 clamp(22px,3.2vw,32px)/1.05 var(--fd);color:var(--gold)}
.strip__i b i{font-style:normal;color:var(--cyan);margin:0 2px}
.strip__i span{display:block;margin-top:5px;font-size:14px;color:var(--ink-dim);line-height:1.4}

/* ══ PASOS ═════════════════════════════════════════════════════════════ */
.pasos{position:relative;background:var(--navy-deep);padding:clamp(60px,8vw,96px) 0 clamp(96px,11vw,150px)}
.pasos__list{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px;counter-reset:p}
.paso{
  position:relative;padding:30px 26px 28px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(22,52,132,.55),rgba(12,26,82,.75));
  box-shadow:inset 0 0 0 1px rgba(128,216,248,.16);
}
.paso__n{
  position:absolute;top:-19px;left:26px;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  font:600 20px/1 var(--fd);color:#3a2201;
  background:linear-gradient(180deg,#ffc043,var(--gold));
  box-shadow:0 8px 18px -8px rgba(252,162,5,.9),inset 0 1px 0 rgba(255,255,255,.55);
}
.paso h3{font:600 20px/1.2 var(--fd);margin:14px 0 9px}
.paso p{color:var(--ink-dim);font-size:15.8px}

/* ══ CATÁLOGO ══════════════════════════════════════════════════════════ */
.cat{background:var(--navy-2);padding:clamp(58px,7.5vw,92px) 0 clamp(70px,9vw,110px);position:relative}

/* chips de categoría, pegajosas bajo el nav */
.chips{position:sticky;top:70px;z-index:40;margin:30px 0 42px;
  background:color-mix(in srgb,var(--navy-2) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-block:1px solid rgba(128,216,248,.14);padding:12px 0}
.chips__in{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips__in::-webkit-scrollbar{display:none}
.chips a{
  flex:0 0 auto;text-decoration:none;white-space:nowrap;
  padding:9px 16px;border-radius:999px;font:500 14.5px/1 var(--fd);
  background:rgba(255,255,255,.06);color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(128,216,248,.2);
  transition:background .18s,color .18s;
}
.chips a:hover,.chips a.on{background:var(--gold);color:#3a2201;box-shadow:none;font-weight:600}

.cgroup{margin-top:clamp(48px,6vw,74px);scroll-margin-top:140px}
.cgroup:first-of-type{margin-top:0}
.cgroup__hd{margin-bottom:26px;max-width:70ch}
.cgroup__hd p{color:var(--ink-dim);margin-top:9px;font-size:16px}
.hd__alt{font:400 .5em/1 var(--fb);color:var(--cyan);letter-spacing:.06em;
  text-transform:uppercase;vertical-align:middle;margin-left:10px}

.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(236px,1fr))}
.grid--wide{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
.grid--small{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}

/* ── LA CARTELA ─────────────────────────────────────────────────────────
   La tarjeta ES el letrero del logo: placa redondeada, filete dorado y
   cuatro remaches. Los remaches son un ::after con cuatro radial-gradients. */
.card{
  position:relative;display:flex;flex-direction:column;
  padding:20px 20px 22px;border-radius:var(--r);
  background:linear-gradient(180deg,rgba(24,58,142,.62),rgba(10,22,70,.9));
  box-shadow:inset 0 0 0 1.5px rgba(252,162,5,.34),
             inset 0 0 0 4px rgba(255,255,255,.045),
             var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.card::after{
  content:"";position:absolute;inset:11px;border-radius:16px;pointer-events:none;
  background-image:
    radial-gradient(circle,var(--gold-lt) 40%,transparent 42%),
    radial-gradient(circle,var(--gold-lt) 40%,transparent 42%),
    radial-gradient(circle,var(--gold-lt) 40%,transparent 42%),
    radial-gradient(circle,var(--gold-lt) 40%,transparent 42%);
  background-size:7px 7px;background-repeat:no-repeat;
  background-position:0 0,100% 0,0 100%,100% 100%;
  opacity:.75;
}
.card:hover{transform:translateY(-5px);
  box-shadow:inset 0 0 0 1.5px rgba(252,162,5,.7),
             inset 0 0 0 4px rgba(255,255,255,.06),
             0 30px 56px -22px #000}

.card__pic{
  /* alto FIJO, no min-height: si varía, los títulos de tarjetas vecinas
     quedan a distinta altura y la rejilla se ve chueca */
  display:grid;place-items:center;height:172px;margin-bottom:14px;padding:6px;
}
/* Tope duro: ninguna foto se amplía más allá de su ancho nativo.
   --w lo pone cada tarjeta inline (style="--w:193px") con el ancho real del
   recorte; sin esto, max-height sola no basta — las fotos apaisadas topaban
   con el ancho de la tarjeta antes que con el alto y se ampliaban hasta 1.17×. */
.card__pic img{width:auto;max-width:min(100%,var(--w,100%));max-height:172px;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.45))}
.card--small .card__pic{height:132px}
.card--small .card__pic img{max-height:132px}
.card--wide .card__pic{height:150px}
.card--wide .card__pic img{max-height:150px}

.card h4{font:600 19px/1.2 var(--fd);margin-bottom:7px}
.card--small h4{font-size:17px}
.card p{color:var(--ink-dim);font-size:14.8px;line-height:1.55;margin-bottom:16px;flex:1}
.card--small p{font-size:14px}

.tag{
  align-self:flex-start;margin-bottom:9px;
  padding:4px 11px;border-radius:999px;
  font:600 11.5px/1 var(--fd);letter-spacing:.07em;text-transform:uppercase;
  background:rgba(255,255,255,.09);color:var(--ink-dim);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.tag--agua{background:rgba(128,216,248,.16);color:var(--cyan);
  box-shadow:inset 0 0 0 1px rgba(128,216,248,.45)}

.add{
  margin-top:auto;padding:12px 16px;border:0;border-radius:13px;cursor:pointer;
  font:600 15px/1 var(--fd);
  background:rgba(128,216,248,.13);color:var(--cyan);
  box-shadow:inset 0 0 0 1.5px rgba(128,216,248,.42);
  transition:background .16s,color .16s,box-shadow .16s;
}
.add:hover{background:var(--cyan);color:#06203a;box-shadow:none}
.add.is-in{background:var(--green);color:#fff;box-shadow:none}

/* ── la Mega Chorrera, en ancho completo ───────────────────────────────── */
.mega{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3.4vw,44px);align-items:center;
  padding:clamp(24px,3vw,38px);margin-bottom:24px;border-radius:calc(var(--r) + 6px);
  background:
    radial-gradient(90% 120% at 12% 20%,rgba(128,216,248,.2),transparent 60%),
    linear-gradient(120deg,rgba(30,70,168,.7),rgba(10,22,70,.92));
  box-shadow:inset 0 0 0 1.5px rgba(252,162,5,.4),var(--shadow);
}
.mega__pic{display:grid;place-items:center}
.mega__pic img{width:min(var(--w,100%),100%);filter:drop-shadow(0 22px 24px rgba(0,0,0,.5))}
.mega__txt h4{font:600 clamp(26px,3.4vw,36px)/1.1 var(--fd);margin-bottom:11px}
.mega__txt p{color:#c9e2fb;font-size:16.5px;margin-bottom:20px}
.mega__txt .add{align-self:flex-start;padding:14px 24px;font-size:16px}

/* ══ CTA / CONTACTO ════════════════════════════════════════════════════ */
.cta{position:relative;background:var(--navy-deep);
  padding:clamp(70px,9vw,110px) 0 clamp(56px,7vw,86px);text-align:center}
.cta__in{position:relative;z-index:3}
.cta .eyebrow{justify-content:center}
.cta .lead{margin-inline:auto}
.cta__btns{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:28px}

/* ══ FOOTER ════════════════════════════════════════════════════════════ */
.foot{background:#050c28;padding:clamp(42px,5vw,62px) 0 0;border-top:1px solid rgba(128,216,248,.12)}
.foot__in{display:grid;grid-template-columns:auto repeat(3,1fr);gap:32px;align-items:start}
.foot__logo{width:130px;height:auto}
.foot__col h5{font:600 15px/1 var(--fd);color:var(--gold);letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:12px}
.foot__col p{color:var(--ink-dim);font-size:15px}
.foot__col a{text-decoration:none;line-height:2}
.foot__col a:hover{color:var(--cyan)}
.foot__legal{text-align:center;color:#5f7ba8;font-size:13.5px;
  padding:30px 20px;margin-top:34px;border-top:1px solid rgba(128,216,248,.1)}

/* ══ BARRA FIJA ════════════════════════════════════════════════════════ */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--navy) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1.5px solid rgba(252,162,5,.5);
  box-shadow:0 -14px 34px -18px #000;
  padding:12px 0 max(12px,env(safe-area-inset-bottom));
  transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.bar.is-up{transform:translateY(0)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:16px}
.bar__txt{font:500 16px/1.3 var(--fd)}
.bar__txt b{color:var(--gold);font-size:20px;font-weight:600}
.bar__btn{
  flex:0 0 auto;padding:13px 24px;border:0;border-radius:999px;cursor:pointer;
  font:600 15.5px/1 var(--fd);color:#3a2201;
  background:linear-gradient(180deg,#ffc043,var(--gold));
  box-shadow:0 12px 24px -12px rgba(252,162,5,.9),inset 0 1px 0 rgba(255,255,255,.5);
}
.bar__btn:hover{filter:brightness(1.06)}

/* ══ DRAWER ════════════════════════════════════════════════════════════ */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(3,8,26,.62);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.scrim.is-on{opacity:1}

.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:90;
  width:min(430px,100%);
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 46%,var(--navy-deep) 100%);
  box-shadow:-24px 0 60px -20px #000;
  transform:translateX(102%);transition:transform .32s cubic-bezier(.2,.8,.3,1);
}
.drawer.is-open{transform:translateX(0)}

.drawer__hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 22px;border-bottom:1px solid rgba(128,216,248,.18);flex:0 0 auto;
}
.drawer__hd h2{font:600 21px/1 var(--fd)}
.drawer__x{
  width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;
  font-size:27px;line-height:1;
  background:rgba(255,255,255,.08);color:var(--ink);
}
.drawer__x:hover{background:rgba(240,16,24,.65);color:#fff}
.drawer__body{flex:1;overflow-y:auto;padding:20px 22px max(28px,env(safe-area-inset-bottom))}

.picked{display:grid;gap:9px;margin-bottom:20px}
.picked li{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;border-radius:15px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(128,216,248,.2);
}
.picked img{width:46px;height:46px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.picked span{flex:1;font:500 14.8px/1.35 var(--fd)}
.picked button{
  flex:0 0 auto;width:30px;height:30px;border:0;border-radius:9px;cursor:pointer;
  font-size:19px;line-height:1;background:rgba(255,255,255,.08);color:var(--ink-dim);
}
.picked button:hover{background:var(--red);color:#fff}
.picked__empty{color:var(--ink-dim);font-size:15px;margin-bottom:20px;
  padding:18px;border-radius:15px;border:1.5px dashed rgba(128,216,248,.28);text-align:center}

.qform{border-top:1px solid rgba(128,216,248,.18);padding-top:20px}
.field{margin-bottom:15px}
/* .field label es más específico que cualquier clase suelta — declararlo así */
.field label{display:block;margin-bottom:7px;font:500 14px/1 var(--fd);color:var(--cyan);
  letter-spacing:.03em}
.field label i{font-style:normal;color:var(--gold)}
.field label .opt{color:var(--ink-dim);font-weight:400}
.field input,.field textarea{
  width:100%;padding:13px 14px;border-radius:13px;
  background:rgba(255,255,255,.07);color:var(--ink);
  border:1.5px solid rgba(128,216,248,.24);
  font-family:var(--fb);font-size:16px;   /* 16px o iOS hace zoom al enfocar */
  transition:border-color .16s,background .16s;
}
.field textarea{resize:vertical;min-height:78px}
.field input:focus,.field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.1);outline:none}
.field input::placeholder,.field textarea::placeholder{color:#7d9cc4}
.field input.err,.field textarea.err{border-color:var(--red)}
.field input[type=date]{-webkit-appearance:none;appearance:none;min-height:49px}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.65;cursor:pointer}

.qform__err{background:rgba(240,16,24,.16);color:#ffc9cb;font-size:14.5px;
  padding:11px 14px;border-radius:12px;margin-bottom:14px;
  box-shadow:inset 0 0 0 1px rgba(240,16,24,.45)}
.qform__send{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px;border:0;border-radius:14px;cursor:pointer;
  font:600 16.5px/1 var(--fd);background:var(--green);color:#fff;
  box-shadow:0 14px 26px -14px var(--green);
  transition:background .16s,transform .16s;
}
.qform__send:hover{background:#57c00d;transform:translateY(-2px)}
.qform__note{margin-top:11px;text-align:center;color:var(--ink-dim);font-size:13.5px}

/* ══ RESPONSIVE ════════════════════════════════════════════════════════ */
@media (max-width:980px){
  .strip__in{grid-template-columns:repeat(2,1fr);gap:26px 18px}
  .pasos__list{grid-template-columns:1fr;gap:34px}
  .paso{padding-top:34px}
  .mega{grid-template-columns:1fr;text-align:center}
  .mega__txt .tag{align-self:center;margin-inline:auto}
  .mega__txt .add{align-self:center}
  .foot__in{grid-template-columns:1fr 1fr;gap:28px}
  .foot__logo{grid-column:1/-1}
}

@media (max-width:860px){
  html{scroll-padding-top:76px}
  .anchor{top:-76px}
  .chips{top:62px}
  .burger{display:flex}

  .nav__in{min-height:62px}
  .nav__brand img{width:124px}

  /* el drawer del menú móvil: SIN margin-left:auto — en position:fixed ese
     auto lo empuja fuera de la pantalla (trampa ya vista en otros builds) */
  .nav__links{
    position:fixed;inset:62px 0 auto 0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:16px 20px 24px;
    background:var(--navy-deep);
    border-bottom:1px solid rgba(128,216,248,.18);
    box-shadow:0 22px 40px -20px #000;
    transform:translateY(-125%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
    visibility:hidden;
  }
  .nav__links.is-open{transform:translateY(0);visibility:visible}
  .nav__links a{padding:14px 12px;font-size:17px;border-radius:12px}
  .nav__links a.nav__cta{justify-content:center;margin:8px 0 0;padding:15px}
}

@media (max-width:640px){
  body{font-size:16.5px}
  .hero{padding-bottom:clamp(74px,14vw,110px)}
  .hero__logo{width:min(280px,72vw)}
  .scene{gap:4px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .grid--wide{grid-template-columns:1fr}
  .grid--small{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:12px}
  .card{padding:16px 15px 18px;border-radius:20px}
  .card::after{inset:8px;border-radius:12px}
  .card__pic{height:128px}
  .card__pic img{max-height:128px}
  .card--small .card__pic,.card--wide .card__pic{height:104px}
  .card--small .card__pic img,.card--wide .card__pic img{max-height:104px}
  .card h4{font-size:17px}
  .card--small h4{font-size:15.5px}
  .card p,.card--small p{font-size:13.6px;margin-bottom:12px}
  .add{padding:11px 12px;font-size:14px}
  .strip__i b{font-size:20px}
  .foot__in{grid-template-columns:1fr;gap:24px;text-align:center}
  .foot__logo{margin-inline:auto}
  .bar__in{gap:10px}
  .bar__txt{font-size:14.5px}
  .bar__txt b{font-size:18px}
  .bar__btn{padding:12px 17px;font-size:14.5px}
  .drawer{width:100%}
}

@media (max-width:400px){
  .strip__in{grid-template-columns:1fr;gap:18px}
  .grid,.grid--small{grid-template-columns:1fr 1fr}
}