/* Outfit, servida desde el propio sitio (antes, Google Fonts). Es variable: un
   archivo por alfabeto cubre del 100 al 900. Cambiar de letra o añadir un peso
   es un archivo más en public/sitio/fuentes/, nunca un enlace a Google Fonts. */
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fuentes/outfit-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Outfit;font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fuentes/outfit-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Landing de Scary Lenses BQ.
   Reglas que se siguieron a propósito, y por qué:
   - UN solo acento en toda la página: el verde del ojo del logo. El rojo vive
     dentro del film, no en la interfaz.
   - Esquinas rectas en todo. Un radio consistente se lee más caro que mezclar.
   - Tipografía de palo seco para los títulos (Outfit). La serif "de lujo" es el
     tell más común, y aquí no la pide la marca.
   - Sin flechas de "scroll", sin numeritos de sección, sin puntos de colores.
   - Nada empieza invisible esperando el scroll: la página se entiende quieta. */

.landing{padding:0}
.landing .hoja{max-width:1180px;padding:0 24px}

/* ---------- barra ---------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;
       gap:16px;padding:16px 26px;border:0;
       background:linear-gradient(to bottom,rgba(6,10,19,.92),rgba(6,10,19,0));
       transition:background .25s ease,padding .25s ease}
.barra.pegada{background:rgba(6,10,19,.94);padding:11px 26px;
              border-bottom:1px solid var(--borde);backdrop-filter:blur(10px)}
.barra .logo img{width:38px;height:38px}
/* Dos grupos: las secciones a la izquierda y las acciones a la derecha. La
   raya que marca dónde estás sale sola al desplazarse. */
.barra .secciones{margin-left:22px;gap:2px;flex-wrap:nowrap;overflow-x:auto;
                  scrollbar-width:none}
.barra .secciones::-webkit-scrollbar{display:none}
.barra .acciones-barra{margin-left:auto;gap:8px;align-items:center;flex-wrap:nowrap}
.barra nav a{font-size:14px;padding:8px 13px;white-space:nowrap;position:relative}
.barra .secciones a.aqui{color:var(--texto)}
.barra .secciones a.aqui::after{content:"";position:absolute;left:13px;right:13px;
                                bottom:2px;height:2px;border-radius:2px;background:var(--verde)}
.barra nav a.wa{background:var(--verde);color:#0a1500;font-weight:700;white-space:nowrap}
@media(hover:hover){ .barra nav a.wa:hover{background:#d4ff8a} }

/* ---------- hero ---------- */
/* padding-top = lo que tapa la barra fija. En un teléfono bajo (390×640) el
   texto del héroe es más alto que el héroe y arrancaba en y=0: la barra tapaba el
   h1. Con el relleno arranca debajo; en uno alto no cambia nada (el texto va
   pegado abajo y box-sizing es border-box, así que el héroe no crece). */
.hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;
      overflow:hidden;background:#060a13;padding-top:96px}
.hero .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* El póster, debajo del film: se ve hasta que el film arranca (y siempre para
   quien pidió menos movimiento, que no ve el film). */
.hero .film-poster,.hero .film-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* 2 px de más por lado, a propósito (el héroe esconde lo que sobra). Google mide
   el «pintado principal» (LCP) por el elemento MÁS GRANDE: el primer cuadro del
   film medía 121 px² más que el póster por redondeo y se quedaba con la medida a
   los 5 s, aunque el póster ya se viera a los 2. Así el póster es el mayor. */
.hero .film-poster{inset:-2px;width:auto;height:auto}
/* El velo sube el contraste del texto sobre el video sin apagar el film. */
.hero .velo{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(6,10,19,.93) 0%,rgba(6,10,19,.72) 38%,
             rgba(6,10,19,.15) 68%,rgba(6,10,19,.55) 100%)}
.hero-txt{position:relative;z-index:2;padding:0 26px 84px;max-width:660px}
.ojo{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);
     margin:0 0 18px;font-weight:500}
/* El h1 de la portada es esta línea pequeña (lo que Google toma por el tema), y
   estilo.css le pone a todo h1 su propio alto de línea. */
h1.ojo{line-height:1.65}
.hero .titular{font-family:Outfit,var(--sans);font-weight:900;letter-spacing:-.045em;
         font-size:clamp(52px,10.5vw,116px);line-height:.87;margin:0 0 20px;
         color:var(--texto)}
.lead{font-size:clamp(16.5px,2.1vw,20px);color:#cdd6e2;max-width:44ch;margin:0 0 30px;
      line-height:1.55}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.btn-p,.btn-s{display:inline-block;padding:15px 27px;font-weight:700;font-size:15.5px;
              text-decoration:none;border-radius:0;transition:transform .15s ease,background .15s ease}
.btn-p{background:var(--verde);color:#0a1500}
.btn-p:hover{background:#d4ff8a;transform:translateY(-2px)}
.btn-s{border:1px solid rgba(249,245,234,.28);color:var(--texto)}
.btn-s:hover{border-color:var(--verde);color:var(--verde)}
.btn-p.grande{padding:19px 38px;font-size:17px;align-self:center;white-space:nowrap}

/* ---------- tira de ojos ---------- */
.tira-wrap{overflow:hidden;border-block:1px solid var(--borde);background:#0a0f1a;
            padding:0;position:relative;z-index:1}
/* El alto va reservado: la tira la llena el JS después de pedir el catálogo, y
   vacía medía cero — al llegar las fotos empujaba todo lo de abajo (CLS). */
.tira{display:flex;width:max-content;min-height:132px}
/* El movimiento se enciende desde el JS, cuando la tira ya tiene las fotos. */
.tira.andando{animation:correr 72s linear infinite}
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Se para al pasar el ratón por encima: si el que va a tocar uno tiene que
   perseguirlo, no lo toca. Detrás de hover:hover porque en una pantalla táctil
   el :hover se queda pegado tras el primer toque y dejaría la tira congelada
   para siempre. */
@media (hover:hover){
  .tira-wrap:hover .tira.andando{animation-play-state:paused}
}
/* Y quieta del todo para quien pidió menos movimiento. */
@media (prefers-reduced-motion:reduce){
  .tira.andando{animation:none}
}

/* ---------- secciones ---------- */
.seccion{max-width:1180px;margin:0 auto;padding:86px 26px}
.cab{margin-bottom:38px;max-width:60ch}
.seccion h2{font-family:Outfit,var(--sans);font-weight:800;letter-spacing:-.035em;
            font-size:clamp(31px,4.6vw,50px);line-height:1.03;margin:0 0 12px}
.cab p{color:var(--tenue);font-size:17px;margin:0}

/* Contacto: las dos salidas del final, del mismo ancho. Instagram para quien
   quiere ver más, WhatsApp para quien prefiere que le contesten. */
/* ---------- «Busca por estilo o por disfraz», debajo del catálogo ----------
   UNA fila que se desliza de lado (src/seo.js la escribe): primero los disfraces
   con su cara, después los estilos. Antes eran pastillas que partían en cuatro
   renglones (184 px en el teléfono); una fila no alarga la portada aunque se
   sumen ideas. Se desliza DENTRO de su caja: la página no se mueve a lo ancho. */
.por-estilo{margin:26px 0 0}
.pe-tit{color:var(--tenue);font-size:15px;margin:0 0 8px}
.pe-fila{display:flex;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 4px;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.pe-fila::-webkit-scrollbar{display:none}
.pe-fila a{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:5px 14px;border:1px solid var(--borde);
  border-radius:999px;color:var(--texto);text-decoration:none;font-size:15px;white-space:nowrap}
.pe-fila a.pe-disfraz{padding-left:5px}
.pe-fila img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
.pe-sep{flex:0 0 1px;align-self:stretch;background:var(--borde);margin:6px 4px}
.pe-fila a:last-child{margin-right:36px}
@media(hover:hover){ .pe-fila a:hover{border-color:var(--verde);color:var(--verde)} }

/* ---------- preguntas frecuentes ----------
   Las escribe el servidor (src/seo.js). Cerradas: quien no tiene la duda pasa de
   largo, y el renglón entero es el blanco del dedo. */
.preguntas-lista{max-width:820px;border-top:1px solid var(--borde)}
.preguntas-lista details{border-bottom:1px solid var(--borde)}
.preguntas-lista summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;
  font-size:17px;font-weight:600;line-height:1.4;color:var(--texto);min-height:24px}
.preguntas-lista summary::-webkit-details-marker{display:none}
.preguntas-lista summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:24px;font-weight:300;color:var(--verde);transition:transform .2s ease}
.preguntas-lista details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.preguntas-lista details p{margin:0 0 14px;color:#cdd6e2;font-size:16px;line-height:1.6;max-width:68ch}
.preguntas-lista details p:last-child{margin-bottom:20px}
.preguntas-lista b{color:var(--texto)}
@media(hover:hover){ .preguntas-lista summary:hover{color:var(--verde)} }
.lista-sin-js{columns:2 280px;color:var(--tenue);font-size:15px}
.contacto-salidas{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.contacto-salidas .btn-p,.contacto-salidas .btn-s{flex:1;min-width:220px;text-align:center}
.cierre-nota{margin:14px 0 0;font-size:14px;color:var(--tenue)}
/* El accesorio: mismo tamaño de tarjeta, pero sin el botón de probar. En su
   sitio va lo que trae, que es lo que decide la compra. */
.prod .que-trae{display:block;font-size:12px;color:var(--tenue);line-height:1.35;
  margin:2px 0 4px;min-height:38px}
@media(max-width:760px){ .prod .que-trae{font-size:11.5px;min-height:36px;margin:1px 0 2px} }
/* La condición del envío gratis, pegada a la promesa y no en otro renglón: si
   se separa, se lee como una nota aparte y no como parte de la frase. */
.regalo .cond{display:block;margin-top:3px;font-size:11.5px;font-weight:500;opacity:.75}
@media(max-width:760px){
  .contacto-salidas{flex-direction:column;gap:10px}
  .contacto-salidas .btn-p,.contacto-salidas .btn-s{min-width:0;width:100%}
}

/* rejilla del catálogo: es también el esqueleto de la tienda */
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.prod{background:var(--sup);border:1px solid var(--borde);overflow:hidden;
      display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease}
.prod:hover{border-color:rgba(196,242,117,.55);transform:translateY(-3px)}
/* Cuadrada: es el MISMO encuadre de la foto de catálogo, sin el número. Antes
   era apaisada y el mismo lente se veía a otra distancia según dónde miraras. */
.prod .im{position:relative;aspect-ratio:1;overflow:hidden;background:#0a0f1a}
.prod .im img{width:100%;height:100%;object-fit:cover;display:block;
              transition:transform .45s ease}
.prod:hover .im img{transform:scale(1.06)}
.prod .cuerpo{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.prod .n{font-family:Outfit,var(--sans);font-size:23px;font-weight:800;line-height:1;
         color:var(--verde);letter-spacing:-.02em}
.prod .d{font-size:13px;color:var(--tenue);line-height:1.4;flex:1}
.prod .pie{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
           margin-top:6px;padding-top:10px;border-top:1px solid var(--borde)}
.prod .precio{font-weight:700;font-size:15px}
.prod .pedir{font-size:12.5px;color:var(--verde);text-decoration:none;font-weight:700}
/* "En camino" no se apaga como un agotado: sigue siendo algo que se puede
   querer, solo que todavía no. Ámbar, no rojo. */
/* 11.5px es el mínimo del proyecto: por debajo no se lee en un teléfono. */
.prod .encamino{display:inline-block;font-size:11.5px;font-weight:600;
                color:#e8a33d;border:1px solid rgba(232,163,61,.5);
                padding:3px 9px;border-radius:20px;
                /* Sin esto parte en dos líneas y desalinea el pie de la tarjeta. */
                white-space:nowrap}
.ojo-tira.encamino{opacity:.72}
.ojo-tira.encamino .marca{background:rgba(232,163,61,.9);color:#221500}
.ojo-tira.encamino .nro{text-decoration:none}
.prod.viene{opacity:.82}
.prod.viene .im img{filter:saturate(.75)}
.prod.agotado{opacity:.42}
.prod.agotado .im img{filter:grayscale(1)}
.prod .sinstock{font-size:12px;color:var(--tenue)}
.pie-rejilla{color:var(--tenue);font-size:14.5px;margin:24px 0 0}

/* pasos: dos columnas desiguales, no tres tarjetas iguales */
.pasos{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:0;
       border-top:1px solid var(--borde)}
.paso{padding:40px 30px 40px 0}
.paso + .paso{border-left:1px solid var(--borde);padding-left:30px}
.paso h3{font-family:Outfit,var(--sans);font-size:20px;font-weight:700;margin:0 0 10px;
         letter-spacing:-.02em}
.paso p{color:var(--tenue);font-size:15.5px;line-height:1.6;margin:0}

.regalo{display:flex;gap:40px;align-items:center;justify-content:space-between;
        flex-wrap:wrap;border-top:1px solid var(--borde)}
.regalo h2{margin-bottom:14px}
.fino{color:var(--tenue);font-size:14.5px;margin:14px 0 0}

.landing footer{margin-top:0;padding:34px 0 60px}

/* ---------- entrada: pasa sola, sin necesidad de scroll ---------- */
.hero-txt > *{opacity:0;transform:translateY(18px);
              animation:entrar .85s cubic-bezier(.2,.7,.3,1) forwards}
.hero-txt > :nth-child(1){animation-delay:.15s}
.hero-txt > :nth-child(2){animation-delay:.27s}
.hero-txt > :nth-child(3){animation-delay:.39s}
.hero-txt > :nth-child(4){animation-delay:.51s}
@keyframes entrar{to{opacity:1;transform:none}}

@media(max-width:900px){
  .pasos{grid-template-columns:1fr}
  .paso{padding:28px 0}
  .paso + .paso{border-left:0;border-top:1px solid var(--borde);padding-left:0}
  .hero{min-height:82svh}
  .hero-txt{padding-bottom:56px}
    .barra{flex-wrap:wrap;padding:10px 16px 0;gap:8px}
    .barra .acciones-barra{margin-left:auto}
    .barra .secciones{order:3;width:100%;margin:0 -16px;padding:2px 16px 8px;
                      border-top:1px solid rgba(255,255,255,.06)}
    .barra .secciones a{font-size:13px;padding:7px 10px}
    .barra .secciones a.aqui::after{left:10px;right:10px}
}

/* Quien pidió menos movimiento no ve ninguno, y la página sigue completa. */
@media(prefers-reduced-motion:reduce){
  .tira{animation:none}
  .hero-txt > *{opacity:1;transform:none;animation:none}
  .hero .film{display:none}
  .prod,.prod .im img,.btn-p,.btn-s{transition:none}
}

/* El héroe es una sección normal: el film corre solo y el carrusel queda
   justo debajo, a la vista. Con el héroe pegado había que bajar dos pantallas
   enteras antes de ver nada más. */

/* ---------- carrusel con número ---------- */
/* Ahora es un <button>: hay que quitarle todo lo que el navegador le pone
   (fondo, borde, tipografía propia) o rompe la tira con un recuadro gris. */
.ojo-tira{position:relative;display:block;text-decoration:none;flex:0 0 auto;
          padding:0;border:0;background:none;font:inherit;color:inherit;
          cursor:pointer;-webkit-appearance:none;appearance:none}
.ojo-tira:focus-visible{outline:2px solid var(--verde);outline-offset:-2px}
.ojo-tira img{width:132px;height:132px;object-fit:cover;display:block;
              filter:saturate(.92) brightness(.82);transition:filter .3s ease}
.ojo-tira:hover img{filter:saturate(1.1) brightness(1)}
/* El número va pequeño pero legible: si a alguien le gusta un lente al pasar,
   tiene que poder pedirlo sin ir a buscarlo a la rejilla. */
.ojo-tira:not(.sinstock):hover .nro{color:var(--verde)}

/* ---------- ver más en celular ---------- */
.vermas{display:block;width:100%;margin:18px 0 0;padding:16px;background:transparent;
        border:1px solid var(--borde);color:var(--texto);font:inherit;font-size:15px;
        font-weight:600;cursor:pointer;border-radius:0}
.vermas:hover{border-color:var(--verde);color:var(--verde)}
.vermas b{color:var(--verde)}



/* ---------- cierre: su propio film, distinto al del héroe ---------- */
/* Va bien oscurecido a propósito: es atmósfera, no catálogo. Nadie debe
   confundir el lente que se ve ahí con un modelo a la venta. */
.cierre{position:relative;min-height:66svh;display:flex;align-items:center;
        overflow:hidden;border-top:1px solid var(--borde)}
.film-cierre{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
             opacity:.85;filter:saturate(.8)}
.velo-cierre{position:absolute;inset:0;background:rgba(6,10,19,.62)}
.cierre-txt{position:relative;z-index:2;max-width:1180px;margin:0 auto;
            padding:70px 26px;width:100%}
.cierre-txt h2{font-family:Outfit,var(--sans);font-weight:800;letter-spacing:-.035em;
               font-size:clamp(31px,4.6vw,50px);line-height:1.03;margin:0 0 12px}
.cierre-txt .btn-p{margin-top:24px}
@media(prefers-reduced-motion:reduce){.film-cierre{display:none}}

/* ═══════════════════════════════════════════════════════════════
   CELULAR
   La mayoría entra desde Instagram, en el teléfono. Lo de abajo no
   son ajustes menores: es la vista principal del sitio.
   ═══════════════════════════════════════════════════════════════ */

/* svh evita que la barra del navegador tape el héroe, pero no existe antes de
   iOS 15.4. Se declara vh primero como red y svh la pisa donde sí existe. */
.hero{min-height:88vh}
.cierre{min-height:66vh}
@supports (height:100svh){
  .hero{min-height:88svh}
  .cierre{min-height:66svh}
}

@media(max-width:760px){
  /* Nada puede empujar el ancho: un scroll horizontal en celular se siente roto. */
  body.landing{overflow-x:hidden}

  .hero{min-height:78vh}
  @supports (height:100svh){ .hero{min-height:78svh} }
  .hero{padding-top:128px}
  .hero-txt{padding:0 18px 46px}
  /* En pantalla chica el interletrado cerrado pega las palabras: "El catálogo"
     se leia "Elcatalogo". Se afloja para movil sin perder el aire compacto. */
  .hero .titular{font-size:40px;line-height:.96;letter-spacing:-.018em;word-spacing:.06em}
  .ojo{font-size:11.5px;letter-spacing:.12em;margin-bottom:12px}
  .lead{font-size:16px;margin-bottom:22px}

  /* Los dos botones a lo ancho, uno debajo del otro y con alto de dedo. */
  .acciones{flex-direction:column;align-items:stretch;gap:9px}
  .btn-p,.btn-s{padding:16px 20px;text-align:center;font-size:16px}

  .seccion{padding:52px 18px}
  .seccion h2{font-size:29px;letter-spacing:-.012em;word-spacing:.05em}
  .cab{margin-bottom:22px}
  .cab p{font-size:15.5px}

  /* TRES columnas. Con dos, la pantalla mostraba cuatro lentes y el catálogo
     parecía corto; con tres se ven doce de un vistazo, que es la mitad, y se
     ojea como el póster impreso — que es como el cliente ya lo conoce.
     Todo lo de dentro de la tarjeta se encoge para caber en ~110 px de ancho,
     sin bajar de 11.5 px, que es el mínimo legible del proyecto. */
  .rejilla{grid-template-columns:repeat(3,1fr);gap:8px}
  .prod .cuerpo{padding:7px 7px 9px;gap:3px}
  .prod .n{font-size:14.5px;letter-spacing:-.01em}
  .prod .d{display:none}
  /* El pie se apila: en 110 px el precio y el botón no caben uno al lado del
     otro sin que uno de los dos se parta. */
  .prod .pie{flex-direction:column;align-items:stretch;gap:5px;
             padding-top:7px;margin-top:3px}
  .prod .precio{font-size:12px;line-height:1.25}
  /* La regla base de más abajo pone `font-size:.85em`, y como va DESPUÉS en el
     archivo con la misma especificidad, ganaba: el tachado salía a 10.2 px, por
     debajo del mínimo legible. Un `@media` no añade especificidad — hay que
     añadirla a mano. */
  .rejilla .prod .precio s{display:block;font-size:11.5px;margin-right:0}
  .prod .pedir{font-size:11.5px}
  /* El rótulo largo no cabe: se deja el ojo y una palabra. El botón entero
     sigue siendo del alto de un dedo. */
  .prod .probar{padding:7px 4px;font-size:11.5px;min-height:36px;margin:1px 0 2px}
  .prod .probar .largo{display:none}
  .prod .agregar{padding:8px 6px;font-size:11.5px;width:100%}
  .prod .encamino,.prod .sinstock{font-size:11.5px;padding:3px 6px}
  /* El dedo no acierta un enlace de 12px: toda la tarjeta abre el pedido. */
  .prod{position:relative}
  .prod .pedir::after{content:"";position:absolute;inset:0}

  .vermas{padding:17px;font-size:15.5px;margin-top:14px}

  .paso{padding:22px 0}
  .paso h3{font-size:18px}
  .paso p{font-size:15px}

  .cierre{min-height:auto}
  @supports (height:100svh){ .cierre{min-height:auto} }
  .cierre-txt{padding:52px 18px}
  .cierre-txt h2{font-size:29px;letter-spacing:-.012em;word-spacing:.05em}
  .cierre-txt .btn-p{width:100%;text-align:center}

  .barra{padding:11px 16px}
  .barra.pegada{padding:9px 16px}
  .logo span{font-size:16px}
  .barra .logo img{width:32px;height:32px}
  .barra nav a.wa{padding:9px 14px;font-size:13.5px}

  /* En celular las fotos van más pequeñas: a 214px solo cabían dos y no se
     leía como carrusel. A 132px caben casi tres y el movimiento se nota. */
  .ojo-tira img{width:136px;height:136px}
  .tira{min-height:136px}
  .ojo-tira .inf{left:6px;bottom:5px;gap:4px}
  .ojo-tira .nro{font-size:12.5px;padding:2px 6px}
  .ojo-tira .marca{font-size:11.5px;top:5px;right:5px;padding:1px 5px}
  .ojo-tira .promo-tira{left:5px;top:5px;padding:1px 6px}
  .ojo-tira .pocas-tira{padding:1px 5px}
  /* Recorrido más corto, así que se acelera para que se vea igual de vivo. */
  .tira.andando{animation-duration:34s}

  .landing footer{padding:26px 0 44px}
  .landing .hoja{padding:0 18px}
}

/* Pantallas muy angostas (iPhone SE y parecidos). */
@media(max-width:380px){
  .hero .titular{font-size:35px}
  /* Un iPhone SE son 320 px: con tres columnas y este aire, la tarjeta queda en
     ~94 px y todavía se lee. Menos aire, no menos columnas. */
  .rejilla{gap:6px}
  .prod .cuerpo{padding:6px 5px 8px}
  .prod .n{font-size:13.5px}
  .seccion{padding:44px 15px}
}

/* ---------- agotados en el carrusel ---------- */
/* Salen, pero apagados: quien vio ese número en el flyer entiende de una que
   existe y que ahora no hay, sin tener que preguntar. */
/* El agotado se apaga pero SIGUE siendo tocable: su ficha dice qué pasó. */
.ojo-tira.sinstock{cursor:pointer}
.ojo-tira.sinstock img{filter:saturate(.15) brightness(.42)}
.ojo-tira.sinstock:hover img{filter:saturate(.15) brightness(.42)}
.ojo-tira .inf{position:absolute;left:7px;bottom:7px;display:flex;align-items:center;gap:4px}
.ojo-tira .nro{font-family:Outfit,var(--sans);
               font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--texto);
               background:rgba(6,10,19,.72);padding:2px 7px;line-height:1.25}
.ojo-tira.sinstock .nro{color:#8c94a3;text-decoration:line-through;
                        text-decoration-color:#c0392b;text-decoration-thickness:2px}
.ojo-tira .marca{position:absolute;top:8px;right:8px;font-size:11.5px;font-weight:700;
                 letter-spacing:.06em;text-transform:uppercase;color:#e06055;
                 border:1px solid rgba(224,96,85,.5);padding:2px 6px;line-height:1.3;
                 background:rgba(6,10,19,.6)}
/* Promo (verde) arriba-IZQUIERDA y «Quedan N» (naranja) arriba-DERECHA. El
   número va abajo-izquierda, así que arriba no se pisan con él. Promo puede ir a
   dos líneas para caber en el ítem chico del móvil (92px). */
/* Promo (verde) arriba, en UNA sola línea. */
.ojo-tira .promo-tira{position:absolute;left:8px;top:8px;white-space:nowrap;
  line-height:1.2;font-size:11.5px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
  color:#0c1f0a;background:rgba(139,236,126,.92);border-radius:12px;padding:2px 6px}
/* «Quedan N» abajo, a la DERECHA del número (que va abajo-izquierda). */
.ojo-tira .pocas-tira{font-size:11.5px;font-weight:800;
  letter-spacing:0;text-transform:uppercase;color:#ff8a6b;
  border:1px solid rgba(255,138,107,.55);padding:2px 5px;line-height:1.2;
  background:rgba(6,10,19,.82);white-space:nowrap}

/* El botón flotante y su nube se mudaron a chat.css: son la misma pieza que
   el panel que abren, y ADEMÁS las páginas legales no cargan esta hoja —
   viviendo aquí, en ellas el botón salía sin estilo ninguno. */

/* ═══════════════ el personaje que camina sobre el carrusel ═══════════════ */
/* Hoja de 12 celdas CUADRADAS de 180x180, con el personaje centrado y con aire
   alrededor. El aire no es capricho: al escalar la hoja el navegador interpola
   y se traga pixeles de la celda vecina, y sin margen aparecia una linea del
   esqueleto de al lado. Con margen, lo que sangra es transparencia.
   Se anima con steps(12), que es como se anima un dibujo: cada cuadro salta al
   siguiente, sin desvanecer. Doce por segundo es la cadencia tradicional.

   Cuenta: celda cuadrada, asi que si el alto es N el ancho de la hoja es 12N y
   el paso final es exactamente -12N. */
.paseo{position:relative;height:0;z-index:2;pointer-events:none}
.caminante{position:absolute;bottom:-2px;left:0;width:92px;height:92px;
           /* WebP: 242 KB de PNG bajaron a 54. Es un adorno, y 188 KB de datos móviles
              por un esqueleto que camina no los paga nadie con gusto. */
           background-image:url("/caminante.webp");
           background-repeat:no-repeat;background-size:1104px 92px;
           /* El avance y la cadencia de las piernas van proporcionados: si se
              frena uno solo, el personaje patina como en el paso lunar. */
           animation:pisar 1.59s steps(12) infinite, pasear 30s linear infinite;
           filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
           /* La banda entera ignora el puntero para no estorbar al carrusel,
              pero el personaje sí lo recibe: es lo único que reacciona. */
           pointer-events:auto}
/* Se frena si le pasas el mouse por encima. Se pausan las DOS animaciones: si
   solo se frena el avance, sigue pataleando en el sitio como en el paso lunar.
   Va detrás de (hover:hover) porque en pantalla táctil el :hover se queda
   pegado después de tocar, y el personaje quedaría congelado para siempre. */
@media(hover:hover){
  .caminante:hover{animation-play-state:paused,paused}
}
@keyframes pisar{from{background-position:0 0}to{background-position:-1104px 0}}
/* Cruza, se voltea al llegar al borde y vuelve. */
@keyframes pasear{
  0%{transform:translateX(-100px) scaleX(1)}
  47%{transform:translateX(calc(100vw + 14px)) scaleX(1)}
  50%{transform:translateX(calc(100vw + 14px)) scaleX(-1)}
  97%{transform:translateX(-100px) scaleX(-1)}
  100%{transform:translateX(-100px) scaleX(1)}
}

/* OJO: un @keyframes con el mismo nombre dentro de un media query NO queda
   limitado a ese ancho, pisa al de arriba en todas las pantallas. Por eso el
   de celular lleva su propio nombre. */
@media(max-width:760px){
  .caminante{width:78px;height:78px;background-size:936px 78px;
             animation-name:pisar-movil,pasear}
}
@keyframes pisar-movil{from{background-position:0 0}to{background-position:-936px 0}}

@media(prefers-reduced-motion:reduce){ .paseo{display:none} }

/* ═══════════════ cómo se usan ═══════════════
   Entre el héroe y el catálogo: la duda de "¿y eso cómo se pone?" es lo que
   frena la compra de quien nunca ha usado lentes. */
.guia{padding:64px 20px 12px;max-width:1080px;margin:0 auto}
.guia h2{font-size:clamp(24px,5vw,34px);margin:0 0 8px;text-wrap:balance}
.guia-bajada{color:var(--tenue);margin:0 0 30px;max-width:52ch;line-height:1.55}
.guias{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.paso-clip{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;
           display:block;background:var(--sup)}
.paso h3{display:flex;align-items:center;gap:9px;margin:14px 0 6px;font-size:17px}
.paso h3 span{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
              border-radius:50%;background:var(--verde);color:#0a1500;
              font-size:13px;font-weight:700}
.paso p{color:var(--tenue);margin:0;line-height:1.55;font-size:14.5px}
@media(max-width:760px){ .guia{padding-top:48px} .guias{gap:26px} }

/* ═══════════════ qué te llega ═══════════════
   Entre la guía y el catálogo: cuando ya sabe que es fácil de usar, lo
   siguiente que pesa es cuánto le dan por su plata. */
.incluye{padding:56px 20px 12px;max-width:1080px;margin:0 auto}
.incluye h2{font-size:clamp(24px,5vw,34px);margin:0 0 8px;text-wrap:balance}
.incluyes{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.item{position:relative}
.item img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;display:block}
.item h3{margin:13px 0 5px;font-size:17px}
.item p{color:var(--tenue);margin:0;line-height:1.55;font-size:14.5px}
/* La etiqueta va sobre la foto, no debajo del título: lo que se regala tiene
   que verse antes de leer nada. */
.etiq-obsequio{position:absolute;top:10px;left:10px;font-size:11.5px;font-weight:700;
               padding:5px 11px;border-radius:20px;
               background:var(--verde);color:#0a1500;
               box-shadow:0 2px 10px rgba(0,0,0,.4)}
@media(max-width:760px){ .incluye{padding-top:44px} .incluyes{gap:26px} }

/* La barra es fija: sin esto, al tocar un enlace la sección queda tapada por
   ella. En el teléfono la barra es más alta porque lleva dos filas. */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:78px}
@media(max-width:760px){ section[id]{scroll-margin-top:126px} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* ── cotizar el envío ──
   Va después del catálogo: quien mira diseños no se pregunta el flete, y
   ponerlo antes solo mete una cuenta en la cabeza de quien venía a comprar. */
.cotiza-caja{max-width:520px;margin:0 auto;background:var(--sup);
             border:1px solid var(--borde);border-radius:16px;padding:20px}
.cotiza-caja label{display:block;font-size:12.5px;color:var(--tenue);margin-bottom:6px}
.cotiza-caja input{width:100%;background:var(--fondo);color:var(--texto);
                   border:1px solid var(--borde);border-radius:10px;padding:13px 14px;
                   font:inherit;font-size:16px}
.cotiza-caja input:focus{outline:none;border-color:var(--verde)}

/* Las sugerencias: mismas reglas que en la tienda, pero esta hoja la carga el
   inicio y aquélla el cajón. Duplicar 6 líneas es mejor que cargar la hoja de
   la tienda en una página que no la usa. */
.cotiza .sugc{margin-top:6px;border:1px solid var(--borde);border-radius:10px;
              background:var(--fondo);overflow:hidden;max-height:230px;overflow-y:auto}
.cotiza .sugc button{display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;
                     padding:11px 13px;border:0;background:none;color:var(--texto);
                     font:inherit;font-size:14.5px;cursor:pointer;
                     border-bottom:1px solid var(--borde)}
.cotiza .sugc button:last-child{border-bottom:0}
.cotiza .sugc button small{color:var(--tenue);font-size:12px}
@media(hover:hover){ .cotiza .sugc button:hover{background:rgba(196,242,117,.09);color:var(--verde)} }

.q-pares{display:flex;align-items:center;justify-content:space-between;gap:12px;
         margin-top:16px;font-size:14.5px}
.q-cant{display:flex;align-items:center;gap:4px}
.q-cant button{width:36px;height:36px;border:1px solid var(--borde);background:transparent;
               color:var(--texto);border-radius:9px;cursor:pointer;font-size:17px;line-height:1}
@media(hover:hover){ .q-cant button:hover{border-color:var(--verde);color:var(--verde)} }
.q-cant span{min-width:32px;text-align:center;font-variant-numeric:tabular-nums;font-size:15px}

.q-res{margin-top:16px;padding:14px;border-radius:12px;background:var(--fondo);
       border:1px solid var(--borde);display:flex;flex-direction:column;gap:5px}
.q-res b{font-size:20px}
.q-res .q-gratis{color:var(--verde)}
.q-res span{color:var(--tenue);font-size:13.5px;line-height:1.5}
.q-res .q-tip{color:var(--verde)}
.q-cargando{color:var(--tenue);font-size:14px}

/* El selector de zona. Va ANTES de la ciudad a propósito: quien vive en
   Barranquilla no tiene por qué buscar su ciudad en una lista de 1.172
   municipios, y quien está fuera necesita esa lista sí o sí. */
.q-zona{display:flex;gap:8px;margin-bottom:16px}
.q-zona button{flex:1;padding:11px 10px;border:1px solid var(--borde);
               background:transparent;color:var(--tenue);border-radius:11px;
               font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
               line-height:1.3}
.q-zona button.on{border-color:var(--verde);color:var(--verde);
                  background:rgba(196,242,117,.09)}
@media(hover:hover){ .q-zona button:not(.on):hover{color:var(--texto);border-color:var(--tenue)} }

.cotiza-caja select{width:100%;background:var(--fondo);color:var(--texto);
                    border:1px solid var(--borde);border-radius:10px;
                    padding:13px 14px;font:inherit;font-size:16px}
.cotiza-caja select:focus{outline:none;border-color:var(--verde)}

/* El resultado: precio grande y filas de etiqueta/valor. Se lee de un vistazo,
   que es lo único que quiere quien está cotizando un envío. */
.q-precio{font-size:26px;line-height:1.1;margin-bottom:4px}
.q-fila{display:flex;justify-content:space-between;gap:14px;padding:7px 0;
        border-bottom:1px solid var(--borde);font-size:13.5px}
.q-fila:last-of-type{border-bottom:0}
.q-fila span{color:var(--tenue)}
.q-fila b{text-align:right;font-weight:600}
.q-nota{color:var(--tenue);font-size:12.5px;line-height:1.45}

/* La dirección, solo en Barranquilla: es la única zona que se cobra por
   distancia. En las otras la tarifa es única y preguntarla sería un campo de
   más sin nada a cambio. */
#q-caja-dir{margin-top:14px}
.q-opc{color:var(--tenue);font-weight:400}
.q-dir-fila{display:flex;gap:8px}
.q-dir-fila input{flex:1;min-width:0}
.q-dir-fila button{flex:0 0 auto;padding:0 16px;border:1px solid var(--borde);
                   background:transparent;color:var(--texto);border-radius:10px;
                   font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.q-dir-fila button:disabled{opacity:.5;cursor:default}
@media(hover:hover){ .q-dir-fila button:not(:disabled):hover{border-color:var(--verde);color:var(--verde)} }

/* El total: es el número que cierra la decisión, así que se separa del resto. */
.q-fila.q-total{border-top:1px solid var(--borde);border-bottom:0;
                margin-top:4px;padding-top:11px;font-size:16px}
.q-fila.q-total b{font-size:18px}

/* El precio rebajado en la tarjeta del catálogo. El tachado va en gris y el que
   se cobra en verde: en el carrusel de arriba el tachado ya significa AGOTADO,
   y si los dos se vieran igual el cliente leería "no hay" donde dice "oferta". */
.prod .precio s{color:var(--tenue);font-weight:400;font-size:.85em;margin-right:5px}
.prod .precio{color:var(--verde)}

/* El mapa del destino, en la sección de envíos. Los mosaicos los sirve nuestro
   dominio: el sitio no carga nada de un CDN a propósito. */
.cotiza .mapa{position:relative;height:190px;margin-top:14px;border-radius:12px;
              overflow:hidden;background:var(--sup);border:1px solid var(--borde)}
.cotiza .mapa img{position:absolute;width:256px;height:256px}
.cotiza .mapa .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-92%);
                   font-size:30px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
                   pointer-events:none}
/* Quedan pocas. Es cierto —sale del inventario— y a quien está dudando lo
   decide. En ámbar y no en rojo: es urgencia, no un problema. */
/* La pastilla de escasez, encima de la foto y abajo a la derecha — el mismo
   sitio que ocupa en el póster. Va sobre la imagen para no empujar el precio ni
   el botón: en una fila de tres, un renglón de más en una tarjeta desalinea a
   las otras dos. */
.prod .marca-im{position:absolute;right:6px;bottom:6px;z-index:1;
  font-size:11.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:20px;
  white-space:nowrap;background:rgba(10,15,26,.86);backdrop-filter:blur(3px)}
.prod .marca-im.pocas{color:#ff8a6b;border:1px solid rgba(255,138,107,.55)}
.prod .marca-im.camino{color:#e8a33d;border:1px solid rgba(232,163,61,.55)}
/* «Disponibilidad limitada» no cabe en un pill de una tarjeta de 3 columnas
   (se salía como «LIDAD LIMITADA»): va de banda al pie, ancho de la foto y
   texto centrado, que es lo único donde entra el texto entero. */
.prod .marca-im.encargo{display:block;left:6px;right:6px;bottom:6px;text-align:center;
  white-space:normal;line-height:1.12;
  color:#bcd4ff;background:rgba(30,58,110,.85);border:1px solid rgba(127,176,255,.5);
  font-size:11.5px;letter-spacing:.01em;text-transform:uppercase;font-weight:800;padding:3px 7px}
/* Promo: verde, ARRIBA a la derecha (la marca normal va abajo). */
.prod .marca-im.promo{display:block;left:6px;right:6px;top:6px;bottom:auto;text-align:center;
  white-space:normal;line-height:1.12;color:#0c1f0a;background:rgba(139,236,126,.92);
  border:1px solid rgba(139,236,126,.6);
  font-size:11.5px;letter-spacing:.01em;text-transform:uppercase;font-weight:800;padding:3px 7px}

/* ── la franja de medios de pago ──
   De lado a lado y QUIETA. Como el carrusel en ancho, pero sin moverse: aquí el
   visitante viene a buscar el suyo, y si se mueve tiene que perseguirlo.

   En dos grupos, por CUÁNDO se paga: "efectivo" y "pago en casa" acaban los dos
   siendo plata en la puerta, pero uno lo cobra nuestro mensajero aquí y el otro
   lo cobra la transportadora en el resto del país, y ese cuesta más. */
.pagos-tira{padding:26px 0 8px;border-top:1px solid var(--borde);
            border-bottom:1px solid var(--borde);background:var(--sup);
            margin-top:26px}
.pagos-tit{display:block;text-align:center;font-size:11.5px;letter-spacing:.1em;
           text-transform:uppercase;color:var(--tenue);margin-bottom:16px}
.pagos-lista{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;
             align-items:flex-start;padding:0 16px 18px}
.pago-grupo{display:flex;flex-direction:column;align-items:center;gap:8px}
.pago-rotulo{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
             color:var(--verde);font-weight:700}
/* Uno al lado del otro, y si no caben bajan de línea. Nada de scroll: obliga a
   descubrir que hay más escondido a la derecha. */
.pago-fila{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pago-chip{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
           padding:7px 11px;border:1px solid var(--borde);border-radius:9px;
           background:var(--fondo);font-size:12.5px;line-height:1.25;white-space:nowrap}
.pago-chip small{color:var(--tenue);font-size:11.5px;letter-spacing:.01em}
@media(max-width:640px){
  .pagos-lista{gap:16px;flex-direction:column;align-items:center}
  .pago-chip{font-size:12px;padding:6px 9px}
}

/* ── las fotos de clientes ──
   CHICAS y cuadradas: son muchas, y lo que se quiere de un vistazo es "hay un
   montón de gente usando esto". El tamaño de cada una da igual mientras se vea
   la cara; al tocarla se abre entera y sin recortar. */
/* ---------- la cabecera del perfil de Instagram ---------- */
/* Parece una ficha de perfil porque el cliente ya sabe leer esa forma: sabe
   dónde está el @ y dónde el botón de seguir sin que nadie se lo explique.
   No se copia la marca de Instagram —ni el logo ni el degradado— porque esto
   es nuestra página hablando de nuestro perfil, no Instagram dentro. */
.ig-perfil{display:flex;align-items:center;gap:12px;max-width:1080px;
     margin:0 auto 16px;padding:11px 14px;background:var(--sup);
     border:1px solid var(--borde);border-radius:14px}
.ig-foto{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
     background:#0a0f1a}
.ig-quien{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.ig-arroba{font-weight:700;font-size:15px;line-height:1.2;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-que{font-size:12.5px;color:var(--tenue);line-height:1.2;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-seguir{flex:0 0 auto;padding:8px 16px;border-radius:9px;
     background:var(--verde);color:#0a1500;font-weight:700;font-size:14px;
     text-decoration:none;min-height:38px;display:flex;align-items:center}
/* Y la salida de abajo, para quien llega hasta el final mirando fotos. */
@media(hover:hover){
}
/* El triangulito del vídeo: en Instagram media rejilla son reels, y sin marca
   el cliente cree que tocó una foto que no se mueve. */
.galeria .mini{position:relative}
.galeria .ig-play{position:absolute;top:6px;right:7px;font-size:11px;
     line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.75);
     pointer-events:none}

.galeria .mosaico{display:grid;gap:5px;max-width:1080px;margin:0 auto;
                  grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.galeria .mini{padding:0;border:0;background:var(--sup);border-radius:8px;display:block;
               overflow:hidden;cursor:pointer;display:block;aspect-ratio:1}
.galeria .mini img{width:100%;height:100%;object-fit:cover;display:block;
                   transition:transform .18s ease}
@media(hover:hover){ .galeria .mini:hover img{transform:scale(1.06)} }
.galeria .vermas{margin:18px auto 0;display:block}
@media(max-width:520px){
  .galeria .mosaico{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:4px}
}

/* La foto en grande. Sin recortar: la rejilla es para ojear, esto es para ver. */
.visor{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
       background:rgba(3,6,12,.93);padding:16px;
       opacity:0;transition:opacity .2s ease}
.visor.abierto{opacity:1}
.visor img{max-width:100%;max-height:86vh;border-radius:12px;display:block}
.visor-x{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;
         border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
         font-size:26px;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.visor-f{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
         border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
         font-size:28px;line-height:1;cursor:pointer;backdrop-filter:blur(4px);
         display:grid;place-items:center;padding:0 0 3px}
.visor-f.izq{left:10px}
.visor-f.der{right:10px}
@media(hover:hover){ .visor-x:hover,.visor-f:hover{background:rgba(255,255,255,.22)} }
.visor-n{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
         font-size:13px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
[hidden]{display:none !important}
/* Cómo paga cambia el precio: al recibir, la transportadora suma su comisión de
   recaudo. Elegirlo aquí evita la sorpresa de ver otro número en el checkout. */
.q-comopaga{margin-top:16px;display:flex;flex-direction:column;gap:8px;font-size:14.5px}
.q-opciones{display:flex;gap:8px}
.q-opciones button{flex:1;padding:11px 8px;border:1px solid var(--borde);
                   background:transparent;color:var(--tenue);border-radius:10px;
                   font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.q-opciones button.on{border-color:var(--verde);color:var(--verde);
                      background:rgba(196,242,117,.09)}
.q-opciones button:disabled{opacity:.4;cursor:not-allowed}
/* El desglose del envío pagando en la puerta. Va en su propia caja para que se
   lea como una suma y no como cobros sueltos: la comisión de recaudo YA está
   dentro del número grande, y puesta como fila más parecía un cobro aparte. */
.q-suma{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--fondo);
        border:1px solid var(--borde)}
.q-suma .q-fila{padding:5px 0}
/* La letra chica del desglose: explica de dónde sale el recaudo sin robarle
   protagonismo al número. */
/* Con `.q-res` delante: `.q-res span` es clase + elemento y le gana a una
   clase sola, así que sin esto la letra chica se quedaba en 13,5 px. */
.q-res .q-fino{display:block;margin-top:8px;font-size:11.5px;line-height:1.45;
               color:var(--tenue)}

/* ---------- Pruébatelos: el lente sobre el ojo del cliente ---------- */
/* Va plegado. El botón es ancho y con alto de dedo porque es lo que se toca. */
.probador .pb-abrir{display:flex;align-items:center;justify-content:space-between;
     gap:12px;width:100%;max-width:640px;margin:0 auto;padding:16px 20px;
     border:1px solid var(--borde);border-radius:14px;background:var(--sup);
     color:var(--texto);font:inherit;font-weight:700;font-size:16px;
     cursor:pointer;min-height:56px}
.probador .pb-abrir-i{color:var(--verde);font-size:15px;transition:transform .2s ease}
.probador .pb-abrir[aria-expanded="true"] .pb-abrir-i{transform:rotate(180deg)}
@media(hover:hover){ .probador .pb-abrir:hover{border-color:rgba(196,242,117,.55)} }
.probador .pb-abrir:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.probador .pb-panel{margin-top:16px}

/* La caja NUNCA más alta que la pantalla. Con `aspect-ratio` a secas, en un
   teléfono en vertical la caja medía más que el viewport y los mandos —que van
   abajo— quedaban fuera de vista: solo aparecían girando el móvil. El
   `max-height` le gana al aspect-ratio y la caja se achata hasta caber. */
.probador .pb-caja{position:relative;max-width:640px;margin:0 auto;
     /* CUADRADA: es lo que da la cámara recortado al centro de la cara, y es
        lo que mejor entra en una historia o en un chat. */
     aspect-ratio:1;max-height:min(62svh,560px);border-radius:16px;overflow:hidden;
     background:#0a0f1a;border:1px solid var(--borde);
     display:grid;place-items:center}
/* `contain`, NO `cover`. La cámara da un cuadro apaisado y la caja en el móvil
   es alta: recortando para llenarla se comía los lados de la cara y había que
   echarse hacia atrás para salir entero. Con `contain` se ve todo, aunque
   queden dos franjas del fondo a los lados. */
/* `cover` otra vez, y ahora sí es correcto: el lienzo YA es cuadrado como la
   caja, así que no recorta nada — solo evita un pelo de franja por redondeo. */
.probador #pb-lienzo{width:100%;height:100%;object-fit:cover;display:block;
     grid-area:1/1;opacity:0;transition:opacity .3s ease}
.probador.andando #pb-lienzo{opacity:1}

.probador .pb-arranque{grid-area:1/1;display:flex;flex-direction:column;
     align-items:center;gap:12px;padding:26px 22px;text-align:center;z-index:1}
.probador .pb-subir{cursor:pointer;font-size:14.5px;font-weight:600;
     color:var(--texto);text-decoration:underline;text-underline-offset:3px;
     min-height:44px;display:flex;align-items:center}
.probador .pb-privado{margin:4px 0 0;font-size:12.5px;line-height:1.5;
     color:var(--tenue);max-width:34ch}

/* Los mandos, DEBAJO de la imagen. Dentro quedaban al fondo de una caja que en
   un teléfono mide más que la pantalla, y el botón de disparo caía fuera de
   vista: solo se veía girando el móvil. */
.probador .pb-mandos{display:flex;align-items:center;justify-content:center;
     gap:26px;width:100%;max-width:640px;margin:12px auto 0}
.probador .pb-icono{width:46px;height:46px;border-radius:50%;border:0;
     background:rgba(6,10,19,.55);color:#fff;font-size:19px;line-height:1;
     cursor:pointer;display:grid;place-items:center}
.probador .pb-disparo{width:64px;height:64px;border-radius:50%;cursor:pointer;
     border:4px solid rgba(255,255,255,.9);background:var(--verde);padding:0}
.probador .pb-disparo:active{transform:scale(.94)}
.probador .pb-icono:focus-visible,.probador .pb-disparo:focus-visible{
     outline:2px solid var(--verde);outline-offset:3px}

/* La foto tomada tapa el lienzo: compartir es un momento y no compite. */
.probador .pb-tomada{grid-area:1/1;z-index:3;width:100%;height:100%;
     object-fit:contain;background:#060a13;display:block}
/* Sus botones van FUERA de la imagen, igual que los mandos: dentro se quedaban
   comprimidos contra el borde de una caja que puede ser muy baja, y en un
   teléfono no aparecían. */
.probador .pb-tomada-acc{display:flex;align-items:center;justify-content:center;
     gap:10px;flex-wrap:wrap;width:100%;max-width:640px;margin:12px auto 0}
.probador .pb-tomada-acc .btn-tienda{flex:1 1 auto;min-width:150px}
.probador .pb-icono-txt{padding:11px 16px;border-radius:10px;border:1px solid var(--borde);
     background:var(--sup);color:var(--texto);font:inherit;font-size:14px;
     font-weight:600;cursor:pointer;text-decoration:none;min-height:44px;
     display:flex;align-items:center}

.probador .pb-aviso{grid-area:1/1;align-self:start;margin:0;z-index:2;
     background:rgba(6,10,19,.86);color:var(--texto);
     padding:10px 14px;font-size:13.5px;line-height:1.4;text-align:center;
     width:100%}
.probador .pb-aviso.malo{color:#ffd9d0}

/* La fila de modelos: se pasa con el dedo, como el catálogo. */
.probador .pb-modelos{display:flex;gap:8px;overflow-x:auto;padding:16px 2px 6px;
     max-width:660px;margin:0 auto;scrollbar-width:thin;
     -webkit-overflow-scrolling:touch}
.probador .pb-modelos button{flex:0 0 auto;padding:0;border:2px solid transparent;
     border-radius:11px;background:none;cursor:pointer;overflow:hidden;
     display:flex;flex-direction:column;align-items:center;gap:3px;
     min-width:72px;min-height:44px}
.probador .pb-modelos img{width:68px;height:68px;object-fit:cover;
     border-radius:9px;display:block}
.probador .pb-modelos span{font-size:12px;color:var(--tenue);font-weight:600}
.probador .pb-modelos button[aria-pressed="true"]{border-color:var(--verde)}
.probador .pb-modelos button[aria-pressed="true"] span{color:var(--verde)}
.probador .pb-modelos button:focus-visible{outline:2px solid var(--verde);
     outline-offset:2px}

@media(max-width:560px){
  /* La cámara, grande: es lo que el cliente mira. Los mandos van fuera y el JS
     se encarga de dejarlos a la vista, así que la caja no tiene que encogerse
     para hacerles sitio. */
  .probador .pb-caja{aspect-ratio:1;max-width:100%;max-height:min(58svh,540px)}
  .probador .pb-mandos{gap:22px;margin-top:10px}
  .probador .pb-modelos img{width:56px;height:56px}
  .probador .pb-modelos button{min-width:60px}
}

/* El botón de agregar, dentro del probador. */
.probador .pb-pedir{display:block;margin:14px auto 0;max-width:640px;width:100%}
.probador .pb-pedir:disabled{opacity:.55;cursor:default}

/* "Probar este modelo", en la tarjeta del catálogo. Va discreto: el botón que
   manda es "Agregar"; este resuelve la duda de quien todavía no se decide. */
.prod .probar{margin:2px 0 4px;padding:8px 10px;border-radius:9px;
     border:1px solid var(--borde);background:transparent;color:var(--tenue);
     font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
     width:100%;min-height:38px;text-align:center}
@media(hover:hover){
  .prod .probar:hover{border-color:rgba(196,242,117,.55);color:var(--verde)}
}
.prod .probar:focus-visible{outline:2px solid var(--verde);outline-offset:2px}