/* OhYes.
   ---------------------------------------------------------------------------
   Direccion: "la conversacion privada".
   Esta pagina no es una vitrina, es una conversacion: pregunta, respondes,
   responde. Dos decisiones salen de ahi y mandan sobre todo lo demas:

   1. FONDO OSCURO. Esto se abre de noche, en la cama, con el brillo bajo y
      tapando la pantalla. Un fondo crema le grita a media casa. El morado
      oscuro tambien deja respirar la fotografia, que viene toda sobre fondos
      saturados.
   2. LA CURSIVA SOLO PREGUNTA. Instrument Serif en italica aparece
      unicamente cuando la pagina te pregunta algo. Todo lo que la pagina
      afirma va en Bricolage Grotesque. Es una regla, no un adorno: si ves
      cursiva, te toca a ti.

   Cada color hace un solo trabajo: durazno = comprar, lila = te ayudamos,
   verde = WhatsApp. Ninguno se usa para decorar.
   --------------------------------------------------------------------------- */

:root{
  --noche:#170E1C;
  --vino:#241630;
  --vino-alto:#31203F;
  --borde:rgba(244,237,245,.12);
  --borde-vivo:rgba(244,237,245,.22);
  --bruma:#F4EDF5;
  --humo:#A594AE;
  --durazno:#FF9E6B;
  --durazno-hondo:#F07C42;
  --lila:#C6A6FF;
  --verde:#25D366;

  --r:16px;
  --r-chico:10px;
  --barra:58px;

  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:64px;

  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pregunta:"Instrument Serif",Georgia,serif;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--noche);
  color:var(--bruma);
  font-family:var(--display);
  font-size:16px;
  line-height:1.5;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;text-align:left}
a{color:inherit}
:focus-visible{outline:2px solid var(--durazno);outline-offset:3px;border-radius:4px}

h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06}

/* La cursiva SOLO pregunta. */
.pregunta{
  font-family:var(--pregunta);
  font-style:italic;
  font-weight:400;
  letter-spacing:-.015em;
  line-height:1.02;
}

.env{width:100%;max-width:1120px;margin:0 auto;padding:0 18px}
@media(min-width:900px){.env{padding:0 32px}}

/* ----------------------------------------------------------------- puerta -- */
.puerta{position:fixed;inset:0;z-index:200;background:var(--noche);display:grid;place-items:center;padding:24px}
.puerta__caja{max-width:380px;text-align:center;display:grid;gap:var(--e4)}
.puerta__marca{font-size:38px;font-weight:800;letter-spacing:-.05em}
.puerta__marca span{color:var(--durazno)}
.puerta__texto{font-family:var(--pregunta);font-style:italic;font-size:26px;line-height:1.15;margin:var(--e2) 0 var(--e3)}
.puerta__botones{display:grid;gap:var(--e2)}
.puerta__nota{margin:var(--e4) 0 0;font-size:13px;color:var(--humo)}

/* ------------------------------------------------------------------ barra -- */
.barra{
  position:sticky;top:0;z-index:60;height:var(--barra);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:rgba(23,14,28,.86);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--borde);
}
.barra__marca{font-size:23px;font-weight:800;letter-spacing:-.05em;text-decoration:none}
.barra__marca span{color:var(--durazno)}
.barra__acciones{display:flex;gap:var(--e2)}
.barra__icono{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--borde);position:relative;transition:border-color .15s ease;
}
.barra__icono:hover{border-color:var(--borde-vivo)}
.barra__icono svg{width:19px;height:19px;fill:none;stroke:var(--bruma);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.barra__globo{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:9px;background:var(--durazno);color:var(--noche);font-size:11px;font-weight:800;
  display:grid;place-items:center;
}

/* ------------------------------------------------------------------- tira -- */
/* La firma de la pagina: en cuanto respondes algo, tu respuesta se queda a la
   vista. Es la promesa del producto —"no vas a tener que repetirlo"— hecha
   interfaz, y de paso el recordatorio de que hay una conversacion en curso. */
.tira{
  position:sticky;top:var(--barra);z-index:55;
  background:rgba(36,22,48,.94);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--borde);
  animation:bajar .22s ease;
}
@keyframes bajar{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.tira__linea{display:flex;align-items:center;gap:var(--e2);padding:9px 18px;overflow-x:auto;scrollbar-width:none}
.tira__linea::-webkit-scrollbar{display:none}
.tira__eco{font-size:11.5px;font-weight:600;color:var(--humo);text-transform:uppercase;letter-spacing:.09em;white-space:nowrap}
.tira__dato{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:5px 8px 5px 11px;border-radius:99px;font-size:13px;font-weight:600;
  background:rgba(198,166,255,.14);border:1px solid rgba(198,166,255,.3);color:var(--bruma);
}
.tira__dato button{color:var(--lila);font-size:15px;line-height:1;padding:0 2px}
.tira__listo{margin-left:auto;flex:0 0 auto;font-size:12px;color:var(--verde);font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.tira__listo::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--verde)}

/* ---------------------------------------------------------------- botones -- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e2);
  padding:13px 22px;border-radius:99px;font-weight:700;font-size:15px;letter-spacing:-.01em;
  text-decoration:none;min-height:48px;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.boton:active{transform:scale(.98)}
.boton--principal{background:var(--durazno);color:var(--noche)}
.boton--principal:hover{background:var(--durazno-hondo)}
.boton--fantasma{border:1px solid var(--borde-vivo);color:var(--bruma)}
.boton--fantasma:hover{border-color:var(--bruma);background:rgba(244,237,245,.04)}
.boton--verde{background:var(--verde);color:#06301A}
.boton--verde:hover{background:#1FBB59}
.boton--lila{background:var(--lila);color:#251340}
.boton--bloque{width:100%}
.boton--chico{padding:9px 15px;font-size:13.5px;min-height:38px}

/* ------------------------------------------------------------------- hero -- */
/* La tesis: la pagina abre preguntando, y las respuestas son fotografias.
   Asi se cumplen las dos cosas del brief —producto a la vista desde el primer
   scroll y nadie obligado a contestar un cuestionario. */
.hero{padding:var(--e6) 0 var(--e5)}
.hero__ojo{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--humo);margin-bottom:var(--e4);
}
.hero__ojo b{color:var(--bruma);font-weight:700}
.hero h1{font-size:clamp(38px,11.5vw,72px);margin-bottom:var(--e3)}
.hero__apoyo{font-size:16px;color:var(--humo);max-width:34ch;margin:0 0 var(--e5)}
.hero__apoyo b{color:var(--bruma);font-weight:600}

.momentos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e3)}
@media(min-width:620px){.momentos{grid-template-columns:repeat(3,1fr)}}

.momento{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1;
  border:1px solid var(--borde);display:block;width:100%;
  opacity:0;transform:translateY(14px);
  animation:asomar .5s cubic-bezier(.2,.7,.3,1) forwards;
  transition:border-color .18s ease;
}
@keyframes asomar{to{opacity:1;transform:none}}
.momento:nth-child(1){animation-delay:.02s}
.momento:nth-child(2){animation-delay:.08s}
.momento:nth-child(3){animation-delay:.14s}
.momento:nth-child(4){animation-delay:.2s}
.momento:nth-child(5){animation-delay:.26s}
.momento:nth-child(6){animation-delay:.32s}
.momento img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){.momento:hover img{transform:scale(1.05)}.momento:hover{border-color:var(--borde-vivo)}}
.momento__velo{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(23,14,28,.96) 2%,rgba(23,14,28,.78) 24%,rgba(23,14,28,.3) 58%,rgba(23,14,28,.05) 100%);
}
.momento__texto{position:absolute;left:12px;right:12px;bottom:11px;display:flex;align-items:center;gap:7px}
.momento__emoji{font-size:17px;line-height:1}
.momento__nombre{font-size:14.5px;font-weight:700;letter-spacing:-.02em;line-height:1.15;text-shadow:0 1px 8px rgba(23,14,28,.9)}
.momento[aria-pressed="true"]{border-color:var(--durazno);box-shadow:inset 0 0 0 1px var(--durazno)}

.hero__salida{
  display:flex;align-items:center;gap:var(--e3);margin-top:var(--e5);
  font-size:13px;color:var(--humo);
}
.hero__salida::before,.hero__salida::after{content:"";height:1px;background:var(--borde);flex:1}

/* ------------------------------------------------------------------ ayuda -- */
/* El camino asistido. Es lila porque lila significa "te ayudamos", nada mas. */
.ayuda{
  display:flex;align-items:center;gap:var(--e3);width:100%;
  border:1px solid rgba(198,166,255,.3);border-radius:var(--r);
  background:rgba(198,166,255,.07);padding:15px 16px;
  transition:background .15s ease,border-color .15s ease;
}
.ayuda:hover{background:rgba(198,166,255,.13);border-color:rgba(198,166,255,.5)}
.ayuda__icono{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(198,166,255,.16);color:var(--lila);font-size:17px;
}
.ayuda__texto{flex:1;min-width:0}
.ayuda__texto b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em}
.ayuda__texto span{font-size:13px;color:var(--humo)}
.ayuda__flecha{color:var(--lila);font-size:18px;flex:0 0 auto}

/* --------------------------------------------------------------- secciones -- */
.seccion{padding:var(--e7) 0}
.seccion+.seccion{padding-top:0}
.seccion__cabeza{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e4);margin-bottom:var(--e4)}
.seccion__cabeza h2{font-size:clamp(24px,6vw,34px)}
.seccion__gancho{font-size:14px;color:var(--humo);margin:7px 0 0;max-width:44ch}
.seccion__link{font-size:13.5px;font-weight:700;color:var(--durazno);white-space:nowrap}

/* -------------------------------------------------------------- productos -- */
.rejilla{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e3)}
@media(min-width:640px){.rejilla{grid-template-columns:repeat(3,1fr);gap:var(--e4)}}
@media(min-width:960px){.rejilla{grid-template-columns:repeat(4,1fr)}}

.carrusel{display:flex;gap:var(--e3);overflow-x:auto;padding:2px 18px var(--e3);margin:0 -18px;scroll-snap-type:x mandatory;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.carrusel>*{flex:0 0 165px;scroll-snap-align:start}
@media(min-width:640px){.carrusel>*{flex:0 0 210px}}
@media(min-width:900px){.carrusel{padding-inline:32px;margin-inline:-32px}}

.tarjeta{
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;width:100%;
  background:var(--vino);border:1px solid var(--borde);
  transition:transform .16s ease,border-color .16s ease;
}
.tarjeta:active{transform:scale(.985)}
@media(hover:hover){.tarjeta:hover{border-color:var(--borde-vivo);transform:translateY(-3px)}}
.tarjeta__foto{position:relative;aspect-ratio:1;overflow:hidden;background:var(--vino-alto)}
.tarjeta__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
@media(hover:hover){.tarjeta:hover .tarjeta__foto img{transform:scale(1.05)}}
.tarjeta__cuerpo{padding:11px 12px 13px;display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.tarjeta__nombre{font-size:14px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.tarjeta__gancho{font-size:12px;color:var(--humo);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta__pie{margin-top:auto;padding-top:var(--e2);display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.tarjeta__precio{font-size:16px;font-weight:800;letter-spacing:-.03em;color:var(--durazno);white-space:nowrap}
.tarjeta__antes{font-size:11.5px;color:var(--humo);text-decoration:line-through;margin-left:5px;font-weight:400;letter-spacing:0}
.tarjeta__mas{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--borde-vivo);display:grid;place-items:center;
  font-size:17px;line-height:1;color:var(--bruma);transition:background .15s ease,color .15s ease;
}
@media(hover:hover){.tarjeta:hover .tarjeta__mas{background:var(--durazno);border-color:var(--durazno);color:var(--noche)}}

.marca{
  position:absolute;top:9px;left:9px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 8px;border-radius:99px;
  background:rgba(23,14,28,.78);backdrop-filter:blur(6px);color:var(--bruma);
}
.marca--favorito{color:var(--durazno)}
.marca--nuevo{color:var(--lila)}
.marca--pocas{color:#FFCE6B}
.demo-nota{
  position:absolute;bottom:8px;right:8px;font-size:9.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(23,14,28,.72);backdrop-filter:blur(6px);
  color:var(--humo);padding:3px 7px;border-radius:5px;
}
/* En miniatura el sello tapa el producto y no dice nada nuevo. */
.cruz__foto .demo-nota,.carrito__foto .demo-nota,.subir-ticket__foto .demo-nota,
.opcion-tarjeta__foto .demo-nota,.kit__foto .demo-nota,.momento .demo-nota,
.ohbox .demo-nota,.portada .demo-nota{display:none}

/* -------------------------------------------------------------- coleccion -- */
.portada{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:var(--e5);min-height:230px;display:flex;align-items:flex-end}
.portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portada__velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(23,14,28,.95) 8%,rgba(23,14,28,.5) 60%,rgba(23,14,28,.2) 100%)}
.portada__texto{position:relative;padding:var(--e5) var(--e4)}
.portada__volver{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--bruma);
  background:rgba(23,14,28,.6);border:1px solid var(--borde);padding:6px 13px;border-radius:99px;margin-bottom:var(--e3);
}
.portada h2{font-size:clamp(26px,7vw,40px);margin-bottom:7px}
.portada p{margin:0;color:var(--humo);font-size:14.5px;max-width:36ch}

.chips{display:flex;gap:var(--e2);overflow-x:auto;padding:2px 18px var(--e3);margin:0 -18px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:9px 15px;border-radius:99px;border:1px solid var(--borde);
  font-weight:600;font-size:13.5px;white-space:nowrap;color:var(--humo);
  transition:all .15s ease;
}
.chip:hover{border-color:var(--borde-vivo);color:var(--bruma)}
.chip[aria-pressed="true"]{background:var(--bruma);color:var(--noche);border-color:var(--bruma)}

/* ------------------------------------------------------------------- kits -- */
.kits{display:grid;gap:var(--e3)}
@media(min-width:760px){.kits{grid-template-columns:repeat(2,1fr)}}
.kit{
  display:grid;grid-template-columns:112px 1fr;gap:var(--e3);width:100%;
  background:var(--vino);border:1px solid var(--borde);border-radius:var(--r);padding:12px;
  transition:border-color .16s ease;
}
@media(hover:hover){.kit:hover{border-color:var(--borde-vivo)}}
.kit__foto{position:relative;border-radius:var(--r-chico);overflow:hidden;aspect-ratio:1;background:var(--vino-alto)}
.kit__foto img{width:100%;height:100%;object-fit:cover}
.kit__cuerpo{display:flex;flex-direction:column;gap:5px;min-width:0}
.kit__nombre{font-size:17px;font-weight:800;letter-spacing:-.03em}
.kit__gancho{font-size:12.5px;color:var(--humo);line-height:1.35}
/* Las piezas en pastillas se apilaban de a una por linea en movil y estiraban
   la tarjeta al doble. En una sola linea se leen igual y ocupan un tercio. */
.kit__lista{font-size:11.5px;color:var(--humo);line-height:1.4;margin:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kit__pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--e2);padding-top:var(--e1);flex-wrap:wrap}
.kit__pie .boton{flex:0 0 auto}
.kit__precio{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--durazno);white-space:nowrap}

/* ----------------------------------------------------------------- bandas -- */
.bandas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e2)}
@media(min-width:760px){.bandas{grid-template-columns:repeat(4,1fr);gap:var(--e3)}}
.banda{
  border:1px solid var(--borde);border-radius:var(--r);padding:15px 13px;
  display:flex;flex-direction:column;gap:3px;transition:all .15s ease;
}
.banda:hover{border-color:var(--durazno);background:rgba(255,158,107,.06)}
.banda b{font-size:15.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.banda span{font-size:12px;color:var(--humo)}

/* ------------------------------------------------------------------ ohbox -- */
/* La foto va arriba como banda, no debajo del texto: sobre una imagen con
   tanto detalle el titulo se perdia por mucho velo que se le pusiera. */
.ohbox{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--borde);background:var(--vino)}
.ohbox__marco{position:relative;height:180px}
.ohbox__marco img{width:100%;height:100%;object-fit:cover}
.ohbox__velo{position:absolute;inset:0;background:linear-gradient(to top,var(--vino) 1%,rgba(36,22,48,.55) 45%,rgba(36,22,48,.05) 100%)}
.ohbox__texto{position:relative;padding:0 var(--e4) var(--e5);margin-top:-22px}
.ohbox h2{font-size:clamp(25px,6.5vw,36px);margin-bottom:7px}
.ohbox p{margin:0 0 var(--e4);color:var(--humo);font-size:14.5px;max-width:36ch}
.ohbox__opciones{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e2)}
@media(min-width:760px){.ohbox__opciones{grid-template-columns:repeat(4,1fr)}}
.ohbox__caja{
  border:1px solid var(--borde);border-radius:var(--r-chico);padding:12px;
  display:flex;flex-direction:column;gap:2px;background:var(--noche);transition:all .15s ease;
}
.ohbox__caja:hover{border-color:var(--durazno);background:rgba(255,158,107,.1)}
.ohbox__caja b{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--durazno)}
.ohbox__caja span{font-size:11.5px;color:var(--humo);line-height:1.3}

/* ---------------------------------------------------------------- asesora -- */
.asesora{
  border:1px solid var(--borde);border-radius:var(--r);padding:var(--e5) var(--e4);
  display:flex;flex-direction:column;gap:var(--e3);align-items:flex-start;
  background:linear-gradient(180deg,rgba(37,211,102,.06),transparent 60%);
}
.asesora__cara{
  width:46px;height:46px;border-radius:50%;background:var(--verde);
  display:grid;place-items:center;color:#06301A;font-size:19px;font-weight:800;
}
.asesora h2{font-size:23px}
.asesora p{margin:0;color:var(--humo);font-size:14.5px;max-width:46ch}

.confianza{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e2)}
@media(min-width:760px){.confianza{grid-template-columns:repeat(4,1fr);gap:var(--e3)}}
.confianza__caja{border:1px solid var(--borde);border-radius:var(--r-chico);padding:15px 13px}
.confianza__icono{font-size:19px;display:block;margin-bottom:var(--e2)}
.confianza__caja b{display:block;font-size:13.5px;font-weight:700;margin-bottom:3px}
.confianza__caja span{font-size:12px;color:var(--humo);line-height:1.4}

.pie{padding:var(--e7) 0 var(--e6);border-top:1px solid var(--borde);margin-top:var(--e7);color:var(--humo);font-size:12.5px}
.pie__marca{font-size:26px;font-weight:800;letter-spacing:-.05em;color:var(--bruma);margin-bottom:var(--e3)}
.pie__marca span{color:var(--durazno)}
.pie p{margin:0 0 var(--e2);max-width:52ch;line-height:1.6}

/* --------------------------------------------------------------- flotante -- */
.flotante{
  position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;
  display:inline-flex;align-items:center;gap:var(--e2);
  background:var(--verde);color:#06301A;padding:12px 18px;border-radius:99px;
  font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.flotante svg{width:18px;height:18px;fill:none;stroke:#06301A;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flotante[data-oculto]{opacity:0;transform:translateY(14px);pointer-events:none}
.flotante{transition:opacity .2s ease,transform .2s ease}
@media(max-width:400px){.flotante span{display:none}.flotante{padding:14px}}

/* ------------------------------------------------------------------ capas -- */
.capa{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.capa__fondo{position:absolute;inset:0;background:rgba(10,5,13,.7);backdrop-filter:blur(3px)}
.hoja{
  position:relative;background:var(--noche);width:100%;max-width:560px;
  border:1px solid var(--borde);border-bottom:0;
  border-radius:22px 22px 0 0;max-height:93vh;overflow-y:auto;
  animation:subir .26s cubic-bezier(.2,.8,.3,1);
  padding-bottom:calc(var(--e5) + env(safe-area-inset-bottom));
}
@keyframes subir{from{transform:translateY(24px);opacity:.5}to{transform:none;opacity:1}}
@media(min-width:620px){
  .capa{align-items:center;padding:20px}
  .hoja{border-radius:20px;max-height:88vh;border-bottom:1px solid var(--borde)}
}
.hoja__cerrar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:12px 12px 0;background:linear-gradient(var(--noche) 60%,transparent)}
.hoja__cerrar button{width:34px;height:34px;border-radius:50%;border:1px solid var(--borde);font-size:17px;line-height:1;display:grid;place-items:center;color:var(--humo)}
.hoja__cerrar button:hover{color:var(--bruma);border-color:var(--borde-vivo)}
.hoja__cuerpo{padding:0 var(--e4) var(--e4)}
@media(min-width:520px){.hoja__cuerpo{padding:0 var(--e5) var(--e5)}}

/* ----------------------------------------------------------------- guiado -- */
.paso__barra{display:flex;gap:4px;margin-bottom:var(--e5)}
.paso__tramo{height:3px;flex:1;border-radius:2px;background:var(--borde)}
.paso__tramo.activo{background:var(--lila)}
.paso h2{font-size:clamp(27px,7.5vw,38px);margin-bottom:var(--e2)}
.paso__apoyo{color:var(--humo);font-size:14px;margin:0 0 var(--e5)}
.opciones{display:grid;gap:var(--e2)}
.opcion{
  display:flex;align-items:center;gap:var(--e3);padding:15px 16px;
  border:1px solid var(--borde);border-radius:var(--r);
  font-weight:600;font-size:15px;transition:all .14s ease;
}
.opcion:hover{border-color:var(--lila);background:rgba(198,166,255,.07);transform:translateX(3px)}
.opcion__emoji{font-size:21px;line-height:1;flex:0 0 auto}
.opcion small{display:block;font-weight:400;font-size:12.5px;color:var(--humo);margin-top:2px}
.paso__atras{margin-top:var(--e4);font-size:13.5px;font-weight:600;color:var(--humo);padding:var(--e2) 0}
.paso__atras:hover{color:var(--bruma)}

/* ------------------------------------------------------------- resultados -- */
.resultados{display:grid;gap:var(--e4)}
.opcion-tarjeta{
  border:1px solid var(--borde);border-radius:var(--r);padding:14px;
  display:grid;grid-template-columns:92px 1fr;gap:var(--e3);position:relative;background:var(--vino);
}
.opcion-tarjeta--destacada{border-color:var(--durazno);background:rgba(255,158,107,.07)}
.opcion-tarjeta__cinta{
  position:absolute;top:-10px;left:14px;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;
  background:var(--vino-alto);color:var(--humo);border:1px solid var(--borde);
}
.opcion-tarjeta--destacada .opcion-tarjeta__cinta{background:var(--durazno);color:var(--noche);border-color:var(--durazno)}
.opcion-tarjeta__foto{position:relative;border-radius:var(--r-chico);overflow:hidden;aspect-ratio:1;background:var(--vino-alto)}
.opcion-tarjeta__foto img{width:100%;height:100%;object-fit:cover}
.opcion-tarjeta__cuerpo{display:flex;flex-direction:column;gap:5px;min-width:0}
.opcion-tarjeta__nombre{font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.opcion-tarjeta__gancho{font-size:12.5px;color:var(--humo);line-height:1.4}
.opcion-tarjeta__partes{font-size:11.5px;color:var(--humo);line-height:1.4}
.opcion-tarjeta__pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e2);margin-top:var(--e1)}
.opcion-tarjeta__precio{font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--durazno);white-space:nowrap}

.beneficios{list-style:none;padding:0;margin:var(--e3) 0 0;display:grid;gap:7px}
.beneficios li{position:relative;padding-left:20px;font-size:13.5px;color:var(--humo)}
.beneficios li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:1.5px;background:var(--durazno)}

/* ------------------------------------------------------------------ ficha -- */
.ficha__foto{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--vino);margin-bottom:var(--e4)}
.ficha__foto img{width:100%;height:100%;object-fit:cover}
.ficha h2{font-size:26px;margin-bottom:var(--e1)}
.ficha__gancho{color:var(--humo);font-size:14.5px;margin:0 0 var(--e3)}
.ficha__precio{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--durazno);margin-bottom:var(--e4);display:flex;align-items:baseline;gap:var(--e2)}
.ficha__tecnica{margin-top:var(--e4);font-size:13px;color:var(--humo);line-height:1.6}
.ficha__tecnica summary{font-weight:600;color:var(--bruma);cursor:pointer;font-size:13.5px;padding:9px 0}
.ficha__acciones{display:grid;gap:var(--e2);margin-top:var(--e5)}
.ficha__aviso{font-size:12.5px;color:#FFCE6B;font-weight:600;margin:var(--e3) 0 0}

.cruz h3{font-size:20px;margin-bottom:var(--e1)}
.cruz p{font-size:13.5px;color:var(--humo);margin:0 0 var(--e4)}
.cruz__lista{display:grid;gap:var(--e2)}
.cruz__item{
  display:flex;align-items:center;gap:var(--e3);border:1px solid var(--borde);
  border-radius:var(--r-chico);padding:9px;width:100%;transition:border-color .15s ease;
}
.cruz__item:hover{border-color:var(--durazno)}
.cruz__foto{position:relative;width:54px;height:54px;border-radius:8px;overflow:hidden;background:var(--vino-alto);flex:0 0 auto}
.cruz__foto img{width:100%;height:100%;object-fit:cover}
.cruz__cuerpo{flex:1;min-width:0}
.cruz__cuerpo b{display:block;font-size:13.5px;font-weight:700}
.cruz__cuerpo span{font-size:11.5px;color:var(--humo)}
.cruz__precio{font-weight:800;font-size:14px;color:var(--durazno);white-space:nowrap;letter-spacing:-.02em}
.cruz__saltar{display:block;width:100%;text-align:center;margin-top:var(--e3);font-size:13.5px;font-weight:600;color:var(--humo);padding:var(--e3)}
.cruz__saltar:hover{color:var(--bruma)}

/* ---------------------------------------------------------------- carrito -- */
.carrito__item{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--borde)}
.carrito__foto{position:relative;width:60px;height:60px;border-radius:var(--r-chico);overflow:hidden;background:var(--vino-alto);flex:0 0 auto}
.carrito__foto img{width:100%;height:100%;object-fit:cover}
.carrito__cuerpo{flex:1;min-width:0}
.carrito__cuerpo b{font-size:14px;display:block;line-height:1.25;font-weight:700}
.carrito__cuerpo>span{font-size:12px;color:var(--humo)}
.carrito__control{display:flex;align-items:center;gap:var(--e2);margin-top:6px}
.carrito__control button{width:25px;height:25px;border-radius:50%;border:1px solid var(--borde);display:grid;place-items:center;font-size:14px;line-height:1;color:var(--bruma)}
.carrito__control button:hover{border-color:var(--borde-vivo)}
.carrito__control>span{font-size:13px;min-width:14px;text-align:center}
/* Pegado al borde derecho quedaba debajo de la barra de scroll y ademas es
   una accion destructiva justo donde cae el pulgar. Va junto al contador. */
.carrito__quitar{font-size:12px;color:var(--humo);margin-left:var(--e3);text-decoration:underline}
.carrito__quitar:hover{color:var(--bruma)}
.carrito__total{display:flex;align-items:center;justify-content:space-between;padding:var(--e4) 0;font-size:14.5px;color:var(--humo)}
.carrito__total b{font-size:26px;font-weight:800;letter-spacing:-.04em;color:var(--bruma)}
.carrito__vacio{text-align:center;padding:var(--e6) var(--e3);color:var(--humo)}

.subir-ticket{
  display:flex;gap:var(--e3);align-items:center;width:100%;margin:var(--e4) 0;
  border:1px dashed rgba(255,158,107,.45);background:rgba(255,158,107,.07);
  border-radius:var(--r);padding:12px;transition:all .15s ease;
}
.subir-ticket:hover{border-color:var(--durazno);background:rgba(255,158,107,.13)}
.subir-ticket__foto{position:relative;width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--vino-alto);flex:0 0 auto}
.subir-ticket__foto img{width:100%;height:100%;object-fit:cover}
.subir-ticket b{display:block;font-size:13.5px;font-weight:700}
.subir-ticket span{font-size:11.5px;color:var(--humo);line-height:1.35;display:block}
.subir-ticket__precio{margin-left:auto;font-weight:800;white-space:nowrap;font-size:14px;color:var(--durazno)}

.contexto{border:1px solid var(--borde);border-radius:var(--r-chico);padding:12px 14px;font-size:12.5px;color:var(--humo);margin-bottom:var(--e3);line-height:1.5}
.contexto b{color:var(--bruma);font-weight:700}

/* ------------------------------------------------------------------ aviso -- */
.aviso{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:150;
  background:var(--bruma);color:var(--noche);padding:11px 19px;border-radius:99px;
  font-size:13.5px;font-weight:700;box-shadow:0 12px 32px rgba(0,0,0,.5);
  animation:subir .2s ease;max-width:calc(100% - 32px);text-align:center;
}

.vacio{text-align:center;padding:var(--e7) var(--e4);color:var(--humo);font-size:14px}
.vacio b{display:block;color:var(--bruma);font-size:17px;margin-bottom:var(--e2);font-weight:700}