/* OhYes.
   ---------------------------------------------------------------------------
   PALETA OFICIAL DE LA MARCA
     morado   #642891   magenta #970056
     negro    #1D242A   claro   #F2F3F5

   Por qué la página es clara: los dos colores de marca son tonos saturados y
   oscuros, hechos para vivir sobre fondo claro. Sobre el #1D242A el magenta da
   1,8:1 de contraste —invisible— y el morado 1,7:1. Sobre el #F2F3F5 dan 7,6:1
   y 8,3:1. La marca decide, no el gusto.

   Para que no quede una página clara genérica, el negro de marca se usa como
   LOSA: bloques oscuros a sangre completa (portada, Oh! Box, reseñas, pie) que
   le dan ritmo a la lectura. Dentro de una losa los tokens se invierten solos.

   LA REGLA TIPOGRÁFICA ES LA FIRMA: la cursiva (Instrument Serif) aparece
   únicamente cuando la página PREGUNTA algo. Todo lo que afirma va en
   Bricolage Grotesque. Si ves cursiva, te toca a ti.

   Cada color hace un solo trabajo: magenta = comprar, morado = te ayudamos,
   verde = WhatsApp. Ninguno decora.
   --------------------------------------------------------------------------- */

:root{
  /* primitivos de marca */
  --negro:#1D242A;
  --claro:#F2F3F5;
  --morado:#642891;
  --magenta:#970056;
  --blanco:#FFFFFF;

  /* semánticos: se reescriben dentro de .losa */
  --fondo:var(--claro);
  --sup:var(--blanco);
  --sup2:#E8EAEE;
  --texto:var(--negro);
  --texto2:#5C6670;
  --linea:#E967A8;
  --linea:#DFE3E7;
  --linea-viva:#C3CAD1;
  --accion:var(--magenta);
  --accion-hover:#7A0046;
  --ayuda:var(--morado);
  --verde:#0F8A48;

  --r:14px;
  --r-chico:10px;
  --barra:58px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px; --e7:48px; --e8:72px;

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

.losa{
  --fondo:var(--negro);
  --sup:#28313A;
  --sup2:#333E48;
  --texto:var(--claro);
  --texto2:#98A4AF;
  --linea:rgba(242,243,245,.15);
  --linea-viva:rgba(242,243,245,.3);
  --accion:#FF6FA8;
  --accion-hover:#FF8CBB;
  --ayuda:#BE93E4;
  --verde:#39D07E;
  background:var(--negro);
  color:var(--texto);
}

*,*::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(--claro);color:var(--negro);
  font-family:var(--display);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  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(--accion);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.06}

.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(--negro);color:var(--claro);display:grid;place-items:center;padding:24px}
.puerta__caja{max-width:380px;text-align:center;display:grid;gap:var(--e4)}
.puerta__logo{width:min(220px,60vw);height:auto;margin:0 auto}
.puerta__texto{font-family:var(--pregunta);font-style:italic;font-size:27px;line-height:1.15;margin:var(--e2) 0 var(--e3)}
.puerta__botones{display:grid;gap:var(--e2)}
.puerta .boton--principal{background:#FF6FA8;color:var(--negro)}
.puerta .boton--fantasma{border-color:rgba(242,243,245,.3);color:var(--claro)}
.puerta__nota{margin:var(--e4) 0 0;font-size:13px;color:#98A4AF}

/* ------------------------------------------------------------------ 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(242,243,245,.9);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--linea);
}
.barra__marca{display:flex;align-items:center;text-decoration:none}
.barra__marca img{width:auto;height:34px}
.barra__acciones{display:flex;gap:6px}
.barra__icono{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--linea);position:relative;transition:border-color .15s ease,background .15s ease;
}
.barra__icono:hover{border-color:var(--linea-viva);background:var(--blanco)}
.barra__icono svg{width:19px;height:19px;fill:none;stroke:var(--negro);stroke-width:1.7;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(--magenta);color:#fff;font-size:11px;font-weight:800;
  display:grid;place-items:center;
}

/* ------------------------------------------------------------------- tira -- */
.tira{
  position:sticky;top:var(--barra);z-index:55;
  background:var(--blanco);border-bottom:1px solid var(--linea);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:11px;font-weight:700;color:var(--texto2);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(100,40,145,.09);border:1px solid rgba(100,40,145,.28);color:var(--morado);
}
.tira__dato button{color:var(--morado);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:700;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,.barra__icono,.flotante{text-decoration:none}
.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)}
/* Un boton apagado tiene que VERSE apagado. Verde y brillante pero sin
   responder es la peor version: invita a tocarlo y no pasa nada. */
.boton:disabled,.boton[disabled]{
  background:var(--linea);color:var(--texto2);border-color:transparent;
  cursor:not-allowed;box-shadow:none;
}
.boton:disabled:active,.boton[disabled]:active{transform:none}
.boton--principal{background:var(--accion);color:#fff}
.boton--principal:hover{background:var(--accion-hover)}
.losa .boton--principal{color:var(--negro)}
.boton--fantasma{border:1px solid var(--linea-viva);color:var(--texto)}
.boton--fantasma:hover{border-color:var(--texto);background:var(--sup)}
.boton--verde{background:var(--verde);color:#fff}
.losa .boton--verde{color:var(--negro)}
.boton--bloque{width:100%}
.boton--chico{padding:9px 15px;font-size:13.5px;min-height:38px}

/* ------------------------------------------------------------------- hero -- */
.hero{padding:var(--e6) 0 var(--e7)}
.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(--texto2);margin-bottom:var(--e4);
}
.hero__ojo b{color:var(--texto);font-weight:700}
.hero h1{font-size:clamp(38px,11.5vw,72px);margin-bottom:var(--e3)}
.hero__apoyo{font-size:16px;color:var(--texto2);max-width:34ch;margin:0 0 var(--e5)}

.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(--linea);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(--accion)}}
.momento__velo{position:absolute;inset:0;background:linear-gradient(to top,rgba(29,36,42,.96) 2%,rgba(29,36,42,.78) 24%,rgba(29,36,42,.3) 58%,rgba(29,36,42,.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;color:var(--claro);text-shadow:0 1px 8px rgba(29,36,42,.9)}
.momento[aria-pressed="true"]{border-color:var(--accion);box-shadow:inset 0 0 0 1px var(--accion)}

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

/* ------------------------------------------------------------------ ayuda -- */
.ayuda{
  display:flex;align-items:center;gap:var(--e3);width:100%;
  border:1px solid var(--ayuda);border-radius:var(--r);
  background:color-mix(in srgb,var(--ayuda) 10%,transparent);
  padding:15px 16px;transition:background .15s ease;
}
.ayuda:hover{background:color-mix(in srgb,var(--ayuda) 18%,transparent)}
.ayuda__icono{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--ayuda);color:#fff;font-size:16px;
}
.losa .ayuda__icono{color:var(--negro)}
.ayuda__texto{flex:1;min-width:0}
.ayuda__texto b{display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--texto)}
.ayuda__texto span{font-size:13px;color:var(--texto2)}
.ayuda__flecha{color:var(--ayuda);font-size:18px;flex:0 0 auto}

/* --------------------------------------------------------------- secciones -- */
.seccion{padding:var(--e7) 0}
.seccion+.seccion:not(.losa){padding-top:0}
.seccion.losa{padding:var(--e8) 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);color:var(--texto)}
.seccion__gancho{font-size:14px;color:var(--texto2);margin:7px 0 0;max-width:46ch}

/* -------------------------------------------------------------- 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(--sup);border:1px solid var(--linea);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.tarjeta:active{transform:scale(.985)}
@media(hover:hover){.tarjeta:hover{border-color:var(--linea-viva);transform:translateY(-3px);box-shadow:0 12px 28px rgba(29,36,42,.1)}}
.tarjeta__foto{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sup2)}
.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;color:var(--texto)}
/* Tres lineas, no dos: la columna mide 133 px y en dos lineas solo caben
   unos 44 caracteres, asi que casi todos los ganchos salian cortados con
   puntos suspensivos a mitad de palabra. */
.tarjeta__gancho{font-size:12px;color:var(--texto2);line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-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(--accion);white-space:nowrap}
.tarjeta__antes{font-size:11.5px;color:var(--texto2);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(--linea-viva);
  display:grid;place-items:center;font-size:17px;line-height:1;color:var(--texto);transition:all .15s ease;
}
@media(hover:hover){.tarjeta:hover .tarjeta__mas{background:var(--accion);border-color:var(--accion);color:#fff}}

.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:var(--negro);color:var(--claro);
}
.marca--favorito{background:var(--magenta);color:#fff}
.marca--nuevo{background:var(--morado);color:#fff}
.marca--pocas{background:#B4620A;color:#fff}
.demo-nota{
  position:absolute;bottom:8px;right:8px;font-size:9.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;background:rgba(29,36,42,.72);backdrop-filter:blur(6px);
  color:#E4E8EC;padding:3px 7px;border-radius:5px;
}
.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(29,36,42,.96) 8%,rgba(29,36,42,.6) 58%,rgba(29,36,42,.25) 100%)}
.portada__texto{position:relative;padding:var(--e5) var(--e4);color:var(--claro)}
.portada__volver{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--claro);
  background:rgba(29,36,42,.55);border:1px solid rgba(242,243,245,.25);padding:6px 13px;border-radius:99px;margin-bottom:var(--e3);
}
.portada h2{font-size:clamp(26px,7vw,40px);margin-bottom:7px;color:var(--claro)}
.portada p{margin:0;color:#C3CAD1;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(--linea);font-weight:600;font-size:13.5px;white-space:nowrap;color:var(--texto2);
  background:var(--sup);transition:all .15s ease;
}
.chip:hover{border-color:var(--linea-viva);color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--negro);color:var(--claro);border-color:var(--negro)}

/* --------------------------------------------------------------- buscador -- */
.buscador{position:relative;margin-bottom:var(--e4)}
.buscador input{
  width:100%;padding:14px 16px 14px 44px;border-radius:99px;border:1px solid var(--linea);
  background:var(--sup);font:inherit;font-size:15px;color:var(--texto);
}
.buscador input::placeholder{color:var(--texto2)}
.buscador input:focus{outline:none;border-color:var(--accion)}
.buscador svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--texto2);stroke-width:1.8;stroke-linecap:round}
.buscador__limpiar{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--texto2);line-height:1;padding:4px}
.buscar__eco{font-size:13.5px;color:var(--texto2);margin:0 0 var(--e3)}
.buscar__eco b{color:var(--texto)}

/* ------------------------------------------------------------------- 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(--sup);border:1px solid var(--linea);border-radius:var(--r);padding:12px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
@media(hover:hover){.kit:hover{border-color:var(--linea-viva);box-shadow:0 12px 28px rgba(29,36,42,.1)}}
.kit__foto{position:relative;border-radius:var(--r-chico);overflow:hidden;aspect-ratio:1;background:var(--sup2)}
.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;color:var(--texto)}
.kit__gancho{font-size:12.5px;color:var(--texto2);line-height:1.35}
.kit__lista{font-size:11.5px;color:var(--texto2);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(--accion);white-space:nowrap}

/* ------------------------------------------- elegir la forma de pago -- */
/* OJO con el nombre: `.pagos` YA existía para la sección de formas de pago de
   la página, y esa se pone en tres columnas en pantallas anchas. Al reusar la
   clase, estas opciones heredaban las columnas y quedaban apretadas y
   descuadradas en computador. Por eso van con su propio nombre. */
.pago-elegir{border:0;padding:0;margin:var(--e4) 0 0;display:grid;gap:8px}
.pago-elegir legend{
  padding:0;margin-bottom:8px;font-size:11.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texto2);
}
.pago-elegir__op{
  display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer;
  border:1.5px solid var(--linea);border-radius:14px;background:var(--sup);
  transition:border-color .15s ease,background .15s ease;
}
.pago-elegir__op:has(input:checked){border-color:var(--accion);background:var(--blanco)}
.pago-elegir__op input{accent-color:var(--accion);width:18px;height:18px;flex:0 0 auto;margin:0}
.pago-elegir__op > span{display:block;min-width:0}
.pago-elegir__op b{display:block;font-size:14.5px;letter-spacing:-.01em;line-height:1.25}
.pago-elegir__op b + span{display:block;font-size:12.5px;color:var(--texto2);line-height:1.35;margin-top:2px}
/* La que no se puede elegir se ve apagada pero SIGUE a la vista, con el motivo:
   esconderla dejaría a la persona sin saber que existe. */
.pago-elegir__op--no{opacity:.55;cursor:not-allowed;background:none}
.pago-elegir__op--no b{color:var(--texto2)}

/* El aviso de que el pedido no llega al mínimo. */
.minimo--falta{border-color:var(--accion)}

/* ------------------------------------------------------ catalogo completo -- */
/* Chiquito y discreto, al final de la pagina: es la salida para quien quiere
   ver todo, no la puerta principal de la tienda. */
.catalogo-todo{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:9px 20px;border-radius:99px;border:1px solid var(--linea-viva);
  background:none;color:var(--texto2);font-family:inherit;font-size:13px;font-weight:700;
  letter-spacing:-.01em;cursor:pointer;transition:border-color .15s ease,color .15s ease;
}
.catalogo-todo span{font-size:11px;font-weight:600;color:var(--texto3,var(--texto2));opacity:.75}
.catalogo-todo:hover{border-color:var(--texto);color:var(--texto)}
.losa .catalogo-todo{border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}

/* ----------------------------------------------------------------- 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(--linea);border-radius:var(--r);padding:15px 13px;background:var(--sup);
  display:flex;flex-direction:column;gap:3px;transition:all .15s ease;
}
.banda:hover{border-color:var(--accion)}
.banda b{font-size:15.5px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;color:var(--texto)}
.banda span{font-size:12px;color:var(--texto2)}

/* ------------------------------------------------------------------ ohbox -- */
.ohbox{border-radius:var(--r);overflow:hidden;border:1px solid var(--linea);background:var(--sup)}
.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(--sup) 1%,rgba(40,49,58,.5) 45%,transparent 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;color:var(--texto)}
.ohbox p{margin:0 0 var(--e4);color:var(--texto2);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(--linea);border-radius:var(--r-chico);padding:12px;background:var(--fondo);
  display:flex;flex-direction:column;gap:2px;transition:all .15s ease;
}
.ohbox__caja:hover{border-color:var(--accion)}
.ohbox__caja b{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--accion)}
.ohbox__caja span{font-size:11.5px;color:var(--texto2);line-height:1.3}

/* ---------------------------------------------------------------- reseñas -- */
.resenas{display:grid;gap:var(--e3)}
@media(min-width:760px){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{border:1px solid var(--linea);border-radius:var(--r);padding:var(--e4);background:var(--sup);display:flex;flex-direction:column;gap:var(--e2)}
.resena__estrellas{color:#E3A008;font-size:13px;letter-spacing:.12em}
.resena__texto{font-size:14.5px;line-height:1.55;color:var(--texto);margin:0;flex:1}
.resena__quien{font-size:12.5px;color:var(--texto2)}
.resena__quien b{color:var(--texto);font-weight:700}
.resena--ejemplo{border-style:dashed;opacity:.85}
.resena__sello{
  align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;background:var(--sup2);color:var(--texto2);
}

/* ------------------------------------------------------------------ pagos -- */
.pagos{display:grid;gap:var(--e3)}
@media(min-width:760px){.pagos{grid-template-columns:repeat(3,1fr)}}
.pago{
  border:1px solid var(--linea);border-radius:var(--r);padding:var(--e4);background:var(--sup);
  display:flex;flex-direction:column;gap:6px;
}
.pago__numero{
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--accion);color:var(--accion);
  display:grid;place-items:center;font-size:13px;font-weight:800;margin-bottom:var(--e1);
}
.pago b{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--texto)}
.pago__dato{font-size:15px;font-weight:800;color:var(--accion);letter-spacing:-.01em;word-break:break-word}
.pago span{font-size:12.5px;color:var(--texto2);line-height:1.45}
.pago__ojo{
  margin-top:var(--e3);border:1px solid var(--linea);border-left:3px solid var(--accion);
  border-radius:var(--r-chico);padding:12px 14px;font-size:13px;color:var(--texto2);line-height:1.5;background:var(--sup);
}
.pago__ojo b{display:block;color:var(--texto);font-weight:700;margin-bottom:2px}

/* ---------------------------------------------------------------- asesora -- */
.asesora{
  border:1px solid var(--linea);border-radius:var(--r);padding:var(--e5) var(--e4);background:var(--sup);
  display:flex;flex-direction:column;gap:var(--e3);align-items:flex-start;
}
.asesora__cara{width:46px;height:46px;border-radius:50%;background:var(--verde);display:grid;place-items:center;color:#fff;font-size:19px;font-weight:800}
.asesora h2{font-size:24px;color:var(--texto)}
.asesora p{margin:0;color:var(--texto2);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(--linea);border-radius:var(--r-chico);padding:15px 13px;background:var(--sup)}
.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;color:var(--texto)}
.confianza__caja span{font-size:12px;color:var(--texto2);line-height:1.4}

/* El aire que necesita el botón flotante va DENTRO del pie, no como
   padding del body: si no, debajo de la losa oscura queda una franja clara
   que parece que la página se cortó. */
.pie{padding:var(--e7) 0 calc(var(--e6) + 84px + env(safe-area-inset-bottom))}
.pie__logo{width:auto;height:56px;margin-bottom:var(--e4)}
.pie p{margin:0 0 var(--e2);max-width:56ch;line-height:1.6;color:var(--texto2);font-size:12.5px}
.pie__enlaces{display:flex;flex-wrap:wrap;gap:var(--e3);margin-top:var(--e4);font-size:13px;font-weight:600}
.pie__enlaces a{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--linea-viva);padding-bottom:2px}
.pie__enlaces a:hover{color:var(--accion);border-color:var(--accion)}

/* --------------------------------------------------------------- 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:#0F8A48;color:#fff;
  padding:12px 18px;border-radius:99px;font-weight:700;font-size:14px;
  box-shadow:0 10px 26px rgba(15,138,72,.32);transition:opacity .2s ease,transform .2s ease;
}
.flotante svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.flotante[data-oculto]{opacity:0;transform:translateY(14px);pointer-events:none}
@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(29,36,42,.5);backdrop-filter:blur(3px)}
.hoja{
  position:relative;background:var(--claro);width:100%;max-width:560px;
  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));
  box-shadow:0 -10px 50px rgba(29,36,42,.25);
}
@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}}
.hoja__cerrar{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:12px 12px 0;background:linear-gradient(var(--claro) 60%,transparent)}
.hoja__cerrar button{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea);font-size:17px;line-height:1;display:grid;place-items:center;color:var(--texto2);background:var(--blanco)}
.hoja__cerrar button:hover{color:var(--negro)}
.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(--linea)}
.paso__tramo.activo{background:var(--morado)}
.paso h2{font-size:clamp(27px,7.5vw,38px);margin-bottom:var(--e2)}
.paso__apoyo{color:var(--texto2);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;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r);font-weight:600;font-size:15px;transition:all .14s ease;
}
.opcion:hover{border-color:var(--morado);background:rgba(100,40,145,.05);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(--texto2);margin-top:2px}
.paso__atras{margin-top:var(--e4);font-size:13.5px;font-weight:600;color:var(--texto2);padding:var(--e2) 0}
.paso__atras:hover{color:var(--negro)}

/* ------------------------------------------------------------- resultados -- */
.resultados{display:grid;gap:var(--e4)}
.opcion-tarjeta{
  border:1px solid var(--linea);border-radius:var(--r);padding:14px;background:var(--blanco);
  display:grid;grid-template-columns:92px 1fr;gap:var(--e3);position:relative;
}
.opcion-tarjeta--destacada{border-color:var(--magenta);box-shadow:0 10px 30px rgba(151,0,86,.12)}
.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(--negro);color:var(--claro);
}
.opcion-tarjeta--destacada .opcion-tarjeta__cinta{background:var(--magenta)}
.opcion-tarjeta__foto{position:relative;border-radius:var(--r-chico);overflow:hidden;aspect-ratio:1;background:var(--sup2)}
.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(--texto2);line-height:1.4}
.opcion-tarjeta__partes{font-size:11.5px;color:var(--texto2);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(--magenta);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(--texto2)}
.beneficios li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:1.5px;background:var(--magenta)}

/* ------------------------------------------------------------------ ficha -- */
.ficha__foto{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--sup2);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(--texto2);font-size:14.5px;margin:0 0 var(--e3)}
.ficha__precio{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--magenta);margin-bottom:var(--e4);display:flex;align-items:baseline;gap:var(--e2)}
.ficha__tecnica{margin-top:var(--e4);font-size:13px;color:var(--texto2);line-height:1.6}
.ficha__tecnica summary{font-weight:600;color:var(--negro);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:#B4620A;font-weight:700;margin:var(--e3) 0 0}

.cruz h3{font-size:20px;margin-bottom:var(--e1)}
.cruz p{font-size:13.5px;color:var(--texto2);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(--linea);border-radius:var(--r-chico);padding:9px;width:100%;background:var(--blanco);transition:border-color .15s ease}
.cruz__item:hover{border-color:var(--magenta)}
.cruz__foto{position:relative;width:54px;height:54px;border-radius:8px;overflow:hidden;background:var(--sup2);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(--texto2)}
.cruz__precio{font-weight:800;font-size:14px;color:var(--magenta);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(--texto2);padding:var(--e3)}
.cruz__saltar:hover{color:var(--negro)}

/* ----------------------------------------------------------------- datos -- */
.datos{display:grid;gap:var(--e3);margin-top:var(--e4)}
.dato{display:grid;gap:5px;font-size:12.5px;font-weight:700;color:var(--texto2);
  text-transform:uppercase;letter-spacing:.05em}
.dato span{text-transform:none;letter-spacing:0;font-weight:400;opacity:.75}
.dato input{
  padding:13px 14px;border:1px solid var(--linea);border-radius:var(--r-chico);
  background:var(--blanco);font:inherit;font-size:16px;   /* 16px evita que iOS haga zoom al enfocar */
  font-weight:400;color:var(--texto);text-transform:none;letter-spacing:0;width:100%;
}
.dato input:focus{outline:none;border-color:var(--accion)}
.datos__nota{font-size:12px;color:var(--texto2);line-height:1.45;margin:var(--e1) 0 var(--e2)}

/* ---------------------------------------------------------------- carrito -- */
.carrito__item{display:flex;gap:var(--e3);padding:var(--e3) 0;border-bottom:1px solid var(--linea)}
.carrito__foto{position:relative;width:60px;height:60px;border-radius:var(--r-chico);overflow:hidden;background:var(--sup2);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(--texto2)}
.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(--linea);display:grid;place-items:center;font-size:14px;line-height:1;background:var(--blanco)}
.carrito__control button:hover{border-color:var(--linea-viva)}
.carrito__control>span{font-size:13px;min-width:14px;text-align:center}
/* Va dentro de .carrito__control, donde TODOS los botones son bolitas de 25px.
   Sin este reseteo, «Quitar» heredaba el círculo y el texto se le salía. */
.carrito__quitar{
  width:auto;height:auto;border:0;border-radius:0;background:none;
  font-size:12px;color:var(--texto2);margin-left:var(--e3);text-decoration:underline;padding:0;
}
.carrito__quitar:hover{color:var(--negro)}
.carrito__total{display:flex;align-items:center;justify-content:space-between;padding:var(--e4) 0;font-size:14.5px;color:var(--texto2)}
.carrito__total b{font-size:26px;font-weight:800;letter-spacing:-.04em;color:var(--negro)}
.carrito__vacio{text-align:center;padding:var(--e6) var(--e3);color:var(--texto2)}

.subir-ticket{
  display:flex;gap:var(--e3);align-items:center;width:100%;margin:var(--e4) 0;
  border:1px dashed var(--magenta);background:rgba(151,0,86,.05);
  border-radius:var(--r);padding:12px;transition:background .15s ease;
}
.subir-ticket:hover{background:rgba(151,0,86,.1)}
.subir-ticket__foto{position:relative;width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--sup2);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(--texto2);line-height:1.35;display:block}
.subir-ticket__precio{margin-left:auto;font-weight:800;white-space:nowrap;font-size:14px;color:var(--magenta)}

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

/* aviso del mínimo de contraentrega */
.minimo{
  border:1px solid #E8C99A;background:#FDF6EA;border-radius:var(--r-chico);
  padding:12px 14px;font-size:12.5px;color:#7A5200;line-height:1.5;margin:var(--e3) 0;
}
.minimo b{display:block;color:#5E3F00;font-weight:800;margin-bottom:2px}

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

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