/* Estilos base de la TIENDA (plantilla GoHart Tiendas). Colores y letras: tema.css (de la ficha).
   No poner colores ni letras fijos aquí: usar las variables --t-* o las de :root. */
:root{
  --bg:var(--t-fondo); --tinta:var(--t-tinta); --negro:var(--t-principal-hondo); --gris:var(--t-tinta-suave); --gris2:var(--t-tinta-suave);
  --claro:color-mix(in srgb,var(--t-fondo) 78%,transparent); --footer:var(--t-fondo-alterno); --borde:var(--t-linea); --rojo:#a03030; --verde:#2f7a3d;
  /* Rojo de llamar la atención. Más vivo que el `--rojo` de los errores:
     este no avisa de un problema, dice "tienes algo aquí". */
  --alerta:#d32f2f;
  --rayaA:repeating-linear-gradient(70deg,#e4e2de,#e4e2de 14px,#d4d1cb 14px,#d4d1cb 28px);
  --rayaB:repeating-linear-gradient(110deg,#dedcd7,#dedcd7 14px,#c9c6c0 14px,#c9c6c0 28px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* `overflow-x` también en `html`, no solo en `body`.
   El dueño vio un blanco a la derecha al cambiar el tamaño de la ventana que no
   se ha podido reproducir (14 anchos, con las filas arrastradas, achicando de a
   poco: sin huecos). Esto es una RED DE SEGURIDAD, no el diagnóstico: con la
   propiedad solo en `body` hay casos —sobre todo en mitad de un redimensionado—
   en que el documento sí se desplaza y asoma el fondo.
   ⚠️ Al medir desbordamientos hay que DESTAPARLO antes
   (`html,body{overflow-x:visible!important}`) o `scrollWidth` miente. */
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--tinta);font-family:var(--t-letra-texto);
     overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit;font-size:16px}
img{max-width:100%;display:block}
.arch{font-family:var(--t-letra-titulos)}
.oculto{display:none!important}

/* --- barra superior --- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
     padding:18px 20px;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--borde)}
.logo{font-family:var(--t-letra-titulos);font-weight:900;font-size:20px;letter-spacing:.04em;
      display:flex;align-items:center;gap:10px}
/* El logo es una imagen oscura: en circulo pequeno funciona como sello,
   y el nombre va al lado en texto porque el logo no dice "la tienda". */
.logo img{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.nav-der{display:flex;align-items:center;gap:6px}
.icono-btn{background:none;border:none;cursor:pointer;padding:10px;display:flex;
           flex-direction:column;gap:5px;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.icono-btn span{width:24px;height:2px;background:var(--tinta);display:block}
/* El carrito tiene que VERSE. Con 22px se perdía en la cabecera y el cliente
   agregaba una prenda sin saber por dónde seguir pidiendo. */
.btn-carrito{position:relative;background:none;border:none;cursor:pointer;padding:9px;color:var(--tinta);
             min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center}
.btn-carrito svg{width:29px;height:29px;transition:color .25s}
/* El contador va en ROJO: sobre una cabecera en blanco y negro es lo único que
   canta a distancia, y es lo que dice "aquí tienes algo esperando".
   ⚠️ El selector lleva `.btn-carrito` delante A PROPÓSITO. Hay otras dos reglas
   `.pill` más abajo —las etiquetas de estado de "mis pedidos"— y, al ir después
   con la misma especificidad, llevaban tiempo PISANDO esta: el contador del
   carrito nunca tuvo su propio estilo y por eso casi no se veía. Con la clase
   del padre delante gana por especificidad y da igual el orden del archivo. */
.btn-carrito .pill{position:absolute;top:0;right:-2px;background:var(--alerta);color:#fff;
      font-size:11.5px;font-weight:700;min-width:22px;height:22px;border-radius:11px;
      display:flex;align-items:center;justify-content:center;padding:0 6px;
      font-family:var(--t-letra-titulos);letter-spacing:0;border:none;
      box-shadow:0 0 0 2px var(--bg)}
.btn-carrito .pill.oculto{display:none}

/* --- Al agregar algo, el carrito TIENE que llamar la atención ---
   Lo pidió el dueño. Sin esto la prenda entraba al carrito en silencio: el
   cliente no veía que hubiera pasado nada, y o lo agregaba dos veces o se iba
   creyendo que no funcionaba. Son tres señales a la vez, porque en un celular
   con el pulgar encima del botón cualquiera sola se puede perder de vista:
     1. el icono da un salto,
     2. el número de prendas hace un pulso,
     3. el aviso de abajo se vuelve tocable y lleva al carrito. */
@keyframes salto-carrito{
  0%{transform:scale(1);color:var(--tinta)}
  20%{transform:scale(1.35) rotate(-8deg);color:var(--alerta)}
  45%{transform:scale(.93) rotate(5deg);color:var(--alerta)}
  70%{transform:scale(1.12);color:var(--alerta)}
  100%{transform:scale(1);color:var(--tinta)}
}
/* Se repite tres veces: un destello solo se pierde si el pulgar está encima. */
.btn-carrito.salta svg{animation:salto-carrito .5s ease-out 3}

/* Y un halo rojo detrás del botón, que se ve aunque no se mire directamente */
@keyframes halo-carrito{
  0%{box-shadow:0 0 0 0 #d32f2f66}
  70%{box-shadow:0 0 0 16px #d32f2f00}
  100%{box-shadow:0 0 0 0 #d32f2f00}
}
.btn-carrito.salta{border-radius:50%;animation:halo-carrito .8s ease-out 2}
@keyframes pulso-pill{
  0%{transform:scale(1)}  40%{transform:scale(1.6)}  100%{transform:scale(1)}
}
.btn-carrito .pill.pulso{animation:pulso-pill .5s ease-out 3}

/* El aviso, cuando lleva a alguna parte, se ve tocable: fondo de marca, flecha
   y un pelín más de aire. Sigue siendo el mismo toast de siempre. */
.toast.a-carrito{cursor:pointer;padding-right:16px;display:flex;align-items:center;gap:10px}
.toast.a-carrito b{font-weight:600}
.toast.a-carrito .ir{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
                     border:1px solid currentColor;padding:4px 9px;border-radius:999px;white-space:nowrap}

/* Quien prefiera su teléfono sin animaciones no las sufre: la señal se
   mantiene (el aviso y el número), pero sin movimiento. */
@media (prefers-reduced-motion: reduce){
  .btn-carrito.salta svg, .btn-carrito.salta, .btn-carrito .pill.pulso{animation:none}
}

/* --- menu --- */
.menu{position:fixed;inset:0;background:var(--negro);z-index:60;display:flex;flex-direction:column;
      justify-content:center;align-items:center;gap:30px}
.menu a{font-family:var(--t-letra-titulos);font-size:28px;color:var(--bg);font-weight:700}
.logo-menu{width:118px;height:118px;border-radius:50%;margin-bottom:6px}
.cerrar-menu{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--bg);
             font-size:32px;cursor:pointer;line-height:1;padding:10px;min-width:44px;min-height:44px}

/* --- hero --- */
.hero{padding:56px 20px 40px;display:flex;flex-direction:column;gap:24px}
.hero h1{font-family:var(--t-letra-titulos);font-weight:900;line-height:.95;margin:0;
         font-size:clamp(42px,11vw,76px);letter-spacing:-.01em}
.hero p{font-size:16px;color:#444;max-width:38ch;line-height:1.5;margin:0}
.btn-solido{align-self:flex-start;background:var(--tinta);color:var(--bg);padding:15px 28px;
            font-family:var(--t-letra-titulos);font-weight:700;font-size:14px;letter-spacing:.06em;
            border:none;cursor:pointer;display:inline-block}
.banda{width:100%;aspect-ratio:4/5;background:repeating-linear-gradient(115deg,#1a1a1a,#1a1a1a 14px,var(--negro) 14px,var(--negro) 28px);
       display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center}
.banda span{font-size:12px;color:var(--bg);letter-spacing:.08em;text-align:center;padding:0 20px}
.logo-banda{width:min(52vw,240px);height:auto;border-radius:50%;opacity:.96}

/* --- marquee --- */
.marquee{background:var(--tinta);overflow:hidden;padding:16px 0;white-space:nowrap}
.marquee-in{display:inline-flex;animation:marquee 22s linear infinite}
.marquee span{font-family:var(--t-letra-titulos);font-weight:700;font-size:15px;color:var(--bg);
              letter-spacing:.05em;padding:0 22px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-in{animation:none}}

/* --- secciones --- */
.sec-tit{padding:52px 20px 8px}
.etiqueta{font-family:var(--t-letra-titulos);font-weight:700;font-size:12px;letter-spacing:.12em;
          color:var(--gris2);margin-bottom:10px}
.sec-tit h2{font-family:var(--t-letra-titulos);font-weight:900;margin:0 0 20px;
            font-size:clamp(28px,7vw,40px)}

/* --- pestanas de categoria ---
   Se desplazan de lado en el celular: con 8 categorias no caben en 390px, y
   partirlas en dos filas empuja el catalogo fuera de la pantalla. */
/* ---------- el catalogo POR FILAS DE MARCA (27-Ago-2026) ----------
   Cada marca es una fila que se arrastra hacia la izquierda, con su nombre
   grande encima. Se ven varias marcas de una sola pantalla, en vez de tener que
   elegir una para ver algo.
   El nombre va NEGRO y GRUESO porque es lo que ordena la pantalla: si se lee
   flojo, las filas parecen una lista corrida y se pierde la separacion. */
.fila-marca{padding:0 0 34px}
.fila-tit{display:flex;align-items:baseline;gap:11px;padding:0 20px 14px;margin:0;
          font-family:var(--t-letra-titulos);font-weight:800;font-size:26px;
          letter-spacing:-.4px;color:var(--negro);text-transform:uppercase}
.fila-tit span{font-size:13px;font-weight:600;color:#aaa;letter-spacing:0;
               font-variant-numeric:tabular-nums}
/* La tira: se arrastra con el dedo o con la rueda. `scroll-snap` hace que las
   prendas queden alineadas al soltar, no cortadas por la mitad. */
.fila-tira{display:flex;gap:14px;overflow-x:auto;padding:0 20px 4px;
           scrollbar-width:none;-webkit-overflow-scrolling:touch;
           scroll-snap-type:x proximity}
.fila-tira::-webkit-scrollbar{display:none}
/* 🐛 02-Sep-2026 — era `flex:0 0 240px` (ancho fijo, sin crecer) y las marcas
   con 2 o 3 prendas dejaban medio renglón EN BLANCO a la derecha. El dueño lo
   vio: «queda un espacio en blanco como bugueado». Con 20 productos la fila se
   llena y se arrastra; con 2 se quedaba un hueco que parece la página rota.

   `flex: 1 0 240px` lo resuelve solo, sin contar tarjetas ni JS:
     · crecer (1)  → SOLO actúa cuando sobra sitio, o sea justo en las filas
                     cortas. Las llenas ya no tienen hueco que repartir.
     · encoger (0) → CLAVE. Con el 1 por defecto, una fila de 20 aplastaría las
                     tarjetas hasta caber en pantalla en vez de arrastrarse, y
                     se perdería el carrusel.
   Sin tope de ancho, por decisión del dueño (02-Sep): prefiere fotos grandes
   antes que un hueco, en cualquier pantalla. Con 2 prendas en un monitor ancho
   salen dos fotos de ~690px; ocupa más alto, y se acepta a cambio de que nunca
   quede el vacío que parecía la página rota. Volver al tope = `max-width:400px`. */
.fila-tira .card{flex:1 0 240px;scroll-snap-align:start}
@media(max-width:640px){
  .fila-tit{font-size:21px;padding-bottom:11px}
  .fila-tira .card{flex:1 0 158px;max-width:none}
  .fila-marca{padding-bottom:26px}
}
.tallas-fila{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:0 0 20px}
.talla-btn{background:transparent;border:1px solid color-mix(in srgb,var(--tinta) 14%,transparent);border-radius:20px;
           padding:7px 14px;cursor:pointer;font-size:13px;color:var(--tinta);
           font-variant-numeric:tabular-nums;transition:all .15s}
.talla-btn:hover{border-color:color-mix(in srgb,var(--tinta) 33%,transparent)}
.talla-btn.act{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.tallas-tit{font-size:10.5px;letter-spacing:.14em;color:#8a8a8a;font-weight:700;
            margin-right:4px;font-family:var(--t-letra-titulos)}
@media(max-width:900px){
  /* En celular las 14 tallas ocupaban CUATRO lineas y empujaban el catalogo
     fuera de la pantalla: quien entra ve filtros, no ropa. Se convierten en una
     fila que se arrastra, igual que las categorias — el gesto ya se aprendio
     una fila mas arriba. */
  .tallas-fila{padding:0 20px 18px;flex-wrap:nowrap;overflow-x:auto;
               scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tallas-fila::-webkit-scrollbar{display:none}
  .talla-btn{flex-shrink:0}
  .tallas-tit{flex-shrink:0;align-self:center}
}
.cats{display:flex;gap:8px;padding:0 20px 22px;overflow-x:auto;scrollbar-width:none;
      -webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cat-btn{flex-shrink:0;background:transparent;border:1px solid color-mix(in srgb,var(--tinta) 14%,transparent);color:var(--tinta);
         font-family:var(--t-letra-titulos);font-weight:700;font-size:11.5px;letter-spacing:.08em;
         padding:10px 16px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.cat-btn:hover{border-color:var(--tinta)}
.cat-btn.act{background:var(--tinta);color:var(--bg);border-color:var(--tinta)}
.cat-btn:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cat-btn{transition:none}}

/* --- catalogo --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:1px;
      background:var(--borde);padding:1px}
.card{background:var(--bg);display:flex;flex-direction:column;cursor:pointer;border:none;
      padding:0;text-align:left;font-family:inherit}
.card .foto{width:100%;aspect-ratio:3/4;background:var(--rayaA);display:flex;align-items:center;
            justify-content:center;background-size:cover;background-position:center;position:relative}
.card:nth-child(even) .foto{background-image:var(--rayaB)}
.card .foto em{font-style:normal;font-size:10px;color:var(--gris);letter-spacing:.04em;
               text-align:center;padding:0 10px}
.card .txt{padding:14px;display:flex;flex-direction:column;gap:8px}
/* 03-Sep — Pedido del dueño: el nombre y el precio, «más negros y grandecitos».
   Antes iban en 14/13 px con peso 500 y el precio en gris: en el celular, sobre
   la foto, se leían como un pie de imagen y no como la prenda y lo que vale.
   Ahora los dos en tinta plena y con el mismo cuerpo — son la pareja que se
   mira junta al decidir. */
/* Alto de DOS renglones siempre: «JORDAN BLANCA» ocupa dos líneas y «JORDAN
   NEGRA» una, y sin esto el botón VER de una tarjeta queda más abajo que el de
   la de al lado. Se nota más desde que las letras son grandes. */
.card .nom{font-weight:600;font-size:15.5px;line-height:1.32;color:var(--tinta);
           min-height:calc(15.5px * 1.32 * 2)}
.card .pre{color:var(--tinta);font-size:15.5px;font-weight:600}
.btn-linea{border:1px solid var(--tinta);color:var(--tinta);background:none;padding:10px;
           text-align:center;font-family:var(--t-letra-titulos);font-weight:700;font-size:12.5px;
           letter-spacing:.04em;cursor:pointer;width:100%}
/* ---------- EL GANCHO DE ENTREGA (29-Ago-2026) ----------------------------
   Una línea por tarjeta que dice CUÁNDO llega. El verde es el de la tienda
   (--verde), no uno nuevo: es la misma señal de "esto está bien" que ya se usa.
   El de encargo va en gris, no en verde: no es una buena noticia, es un aviso.
   min-height fija para que dos tarjetas de la misma fila no queden desalineadas
   cuando una tiene gancho y la otra no. */
/* ═══ 🎬 PORTADA DE MARCA — el momento que tapa la carga del video ═══
 *
 * Idea del dueño (02-Sep): «la página carga demasiado rápido, ¿no podemos usar
 * eso a nuestro favor? que se demore uno o dos segundos más mientras descarga
 * el video». Y los números le daban la razón: la página está lista en 0,7-1,7 s
 * y el video no está hasta los 3,8-5,4 s. Hay ~3 s de margen desperdiciado.
 *
 * En vez de una espera en blanco —que se lee como «esto va lento»— se enseña la
 * marca. Un negro con el logo durante un segundo largo no parece una carga:
 * parece la entrada de una tienda cara, y es lo que hacen las marcas de moda.
 *
 * 🔒 Tres candados para que NUNCA estorbe:
 *   · se va sola con un tope de tiempo pase lo que pase (si algo falla, no
 *     puede quedarse una tienda tapada por una pantalla negra);
 *   · se va antes si el video ya puede reproducirse;
 *   · se va al tocar, para quien no quiera esperar.
 * Y solo la primera vez en cada visita: verla en cada recarga cansa.
 */
/* 🔒 EL CANDADO MÁS IMPORTANTE ES ESTE, Y NO ES JAVASCRIPT.
   La animación se va sola a los 2 s aunque el JS **no llegue a ejecutarse
   nunca** —un error de sintaxis, un archivo que no baja, un navegador raro—.
   Con el candado en JS, cualquiera de esas cosas dejaría la tienda detrás de
   una pantalla negra: el fallo más caro posible. Con CSS, no puede pasar.
   El JS solo la quita ANTES, cuando el video ya está listo. */
#intro{position:fixed;inset:0;z-index:9999;background:var(--negro);display:flex;
       align-items:center;justify-content:center;flex-direction:column;gap:18px;
       opacity:1;will-change:opacity,transform;
       animation:introfuera .8s cubic-bezier(.22,1,.36,1) 3s forwards}
/* 🌫️ LA SALIDA — solo `opacity` y `transform`, NADA MÁS.
   Antes llevaba `filter: blur()` animado y por eso se veía a trompicones: el
   desenfoque obliga a REDIBUJAR la pantalla entera en cada fotograma, y el
   teléfono ya está decodificando un video 1080p al mismo tiempo.
   La opacidad y el transform los mueve la tarjeta gráfica sola, sin repintar
   nada: es la diferencia entre 60 fotogramas por segundo y una animación que
   da tirones. `will-change` le avisa al navegador para que lo prepare antes.
   La curva (.22,1,.36,1) arranca rápido y frena suave — se siente como algo
   que se va, no como algo que se apaga. */
@keyframes introfuera{
  to {opacity:0; transform:scale(1.08); pointer-events:none}
}
#intro.fuera{opacity:0;pointer-events:none;transform:scale(1.08);
             transition:opacity .8s cubic-bezier(.22,1,.36,1),
                        transform .8s cubic-bezier(.22,1,.36,1);
             animation:none}
/* El logo se va un poco más lejos y algo antes que el fondo: da profundidad,
   como si la marca se acercara y la tienda quedara detrás. */
#intro img{will-change:opacity,transform;
           transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .55s ease}
#intro .marca{will-change:opacity,transform;
              transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .4s ease}
#intro.fuera img{transform:scale(1.18);opacity:0}
#intro.fuera .marca{transform:translateY(10px) scale(1.04);opacity:0}
@media(prefers-reduced-motion:reduce){
  #intro{animation:introsimple .4s ease 3s forwards}
  #intro.fuera{transform:none;transition:opacity .35s ease}
  #intro.fuera img,#intro.fuera .marca{transform:none}
  #intro img{animation:none}
}
@keyframes introsimple{to{opacity:0;pointer-events:none}}
#intro img{width:min(38vw,150px);height:auto;border-radius:50%;
           animation:introlatido 1.8s ease-in-out infinite}
#intro .marca{font-family:var(--t-letra-titulos);font-weight:900;letter-spacing:.22em;
              font-size:13px;color:var(--bg);opacity:.75}
@keyframes introlatido{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.045);opacity:1}}
@media(prefers-reduced-motion:reduce){#intro img{animation:none}}

/* 🔇 EL BOTÓN DE SONIDO DEL VIDEO.
   Arriba a la derecha y NO abajo: el video es 9:16, así que en un móvil mide
   ~700 px y su parte inferior queda por debajo del borde de la pantalla — el
   botón se iba con ella y no se veía nunca (medido: y=1069 con pantalla de 727).
   Late tres veces al aparecer para que se note, y para. Sin letras: en estas
   pantallas no van rótulos explicativos. */
.btn-sonido{position:absolute;right:12px;top:12px;z-index:2;width:40px;height:40px;
  border-radius:50%;border:none;cursor:pointer;padding:0;color:#fff;
  background:rgba(0,0,0,.6);box-shadow:0 2px 12px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent}
.btn-sonido:active{transform:scale(.92)}
.btn-sonido.late{animation:sonidolate 1.6s ease-out 3}
@keyframes sonidolate{
  0%,100%{box-shadow:0 2px 12px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,0)}
  40%    {box-shadow:0 2px 12px rgba(0,0,0,.35), 0 0 0 8px rgba(255,255,255,.16)}
}
@media(prefers-reduced-motion:reduce){.btn-sonido.late{animation:none}}

/* 🏷️ LA PROMESA DE ENTREGA, COMO ETIQUETA (02-Sep-2026, pedido del dueño:
   «no solo letra, una tipo etiqueta con fondo de otro colorcito que resalte»).
   Era texto verde suelto y se perdía entre el precio y el botón. Con fondo
   propio se lee de un vistazo, que es de lo que se trata: la entrega rápida es
   el argumento de venta más fuerte que hay aquí (la moto es propia). */
.gancho{font-size:11.5px;line-height:1.3;font-weight:600;display:inline-flex;gap:5px;
        align-items:center;min-height:16px;padding:5px 9px;border-radius:20px;
        max-width:100%;border:1px solid transparent}
.gancho span{overflow:hidden;text-overflow:ellipsis}
/* ── LA ETIQUETA DE ENTREGA (03-Sep-2026) ──────────────────────────────
   Dos piezas pegadas: el NOMBRE del servicio en color pleno —como una etiqueta
   cosida— y al lado, en gris, CUÁNDO llega. El nombre primero porque es lo que
   se reconoce de un vistazo; el plazo se lee después, ya con confianza.

   Azul para lo propio (Entrega Flash) y naranja para la transportadora: dos
   servicios distintos, dos colores. El verde de antes se usaba para los dos y
   no distinguía quién lleva el paquete. */
.gancho.envio-tag{padding:0;border:none;background:none;border-radius:0;
  gap:0;font-size:11px;align-items:stretch;overflow:hidden;border-radius:5px}
.gancho.envio-tag b{font-weight:700;font-size:10px;letter-spacing:.02em;text-transform:uppercase;
  padding:4px 7px;color:#fff;display:flex;align-items:center;text-align:center;
  /* Se deja partir SOLO el nombre si la tarjeta es muy estrecha. El plazo no:
     «1 a 3 días» cortado en tres renglones era ilegible. */
  overflow-wrap:anywhere}
.gancho.envio-tag span{padding:4px 8px;font-weight:600;color:var(--gris);
  background:color-mix(in srgb,var(--tinta) 4%,transparent);display:flex;align-items:center;white-space:nowrap;flex-shrink:0}
/* Azul: el servicio propio, el que llega hoy. */
.gancho.flash b{background:#1257c4}
.gancho.flash span{color:#1257c4;background:#1257c414}
/* Naranja: la transportadora. No es peor — es otra cosa, y tarda más. */
.gancho.lento b{background:#c2670c}
.gancho.lento span{color:#a0560a;background:#c2670c14}
.gancho.encargo{color:#8a5a00;background:#a06a1a14;border-color:#a06a1a2e;letter-spacing:.02em}
/* La que invita a elegir zona. Se ve que se puede tocar: borde de puntos y el
   cursor de mano. Sin color de "todo bien" a propósito — todavía no promete
   nada, está pidiendo un dato. */
.gancho.elegir{color:var(--tinta);background:color-mix(in srgb,var(--tinta) 4%,transparent);border-style:dashed;
               border-color:color-mix(in srgb,var(--tinta) 20%,transparent);cursor:pointer}
.gancho.elegir:hover{background:color-mix(in srgb,var(--tinta) 8%,transparent);border-color:color-mix(in srgb,var(--tinta) 35%,transparent)}
.gancho i{font-style:normal;flex-shrink:0}
/* El sello sobre la foto, como el de AGOTADO pero en su propio tono. */
.encargo-tag{position:absolute;top:8px;left:8px;background:var(--bg);color:var(--tinta);
  border:1px solid var(--tinta);font-size:9px;letter-spacing:.1em;padding:4px 7px;
  font-style:normal;font-weight:700}
/* ---------- "ENVIAR A" en la cabecera -------------------------------------
   Igual que en las tiendas grandes: el cliente dice a dónde va UNA vez y desde
   ahí cada prenda le habla de SU ciudad. Se guarda en el navegador y llega
   puesto al checkout, así que es un paso menos, no uno más. */
.envio-a{background:none;border:1px solid color-mix(in srgb,var(--tinta) 15%,transparent);border-radius:999px;
  padding:7px 12px;font-family:inherit;font-size:11px;letter-spacing:.04em;
  color:var(--tinta);cursor:pointer;display:flex;align-items:center;gap:5px;
  max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.envio-a:hover{background:color-mix(in srgb,var(--tinta) 4%,transparent)}

/* 📍 LA ETIQUETA QUE SEÑALA EL SELECTOR DE CIUDAD (03-Sep-2026)
   Cuelga del chip «Enviar a», con una punta que lo apunta, y se mece despacio
   para que el ojo la encuentre sin que moleste. Sale una sola vez, mientras no
   haya ciudad elegida; en cuanto la eligen (o la cierran) no vuelve.
   Va `position:absolute` colgando de la cabecera: así NO empuja el catálogo ni
   mueve las prendas de sitio, que era justo el problema de ponerlo en cada
   tarjeta. */
.apunta-ciudad{position:absolute;top:calc(100% + 9px);right:14px;z-index:60;
  display:flex;align-items:center;gap:9px;max-width:min(88vw,330px);
  background:var(--verde);color:#fff;padding:10px 12px 10px 14px;border-radius:10px;
  box-shadow:0 8px 22px #0000002e;animation:apuntaEntra .45s cubic-bezier(.22,1,.36,1),
  apuntaMece 2.6s ease-in-out 1s infinite}
.apunta-flecha{position:absolute;top:-6px;right:26px;width:12px;height:12px;
  background:var(--verde);transform:rotate(45deg);border-radius:2px}
.apunta-txt{font-size:13px;line-height:1.35;font-weight:500}
.apunta-x{background:none;border:none;color:#ffffffb0;font-size:15px;cursor:pointer;
  padding:0 2px;line-height:1;flex-shrink:0}
.apunta-x:hover{color:#fff}
@keyframes apuntaEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* El meneo es CORTO y va hacia el chip: señala, no baila. */
@keyframes apuntaMece{
  0%,88%,100%{transform:translateY(0)}
  92%        {transform:translateY(-5px)}
  96%        {transform:translateY(-2px)}
}
@media(prefers-reduced-motion:reduce){ .apunta-ciudad{animation:none} }
@media(max-width:420px){ .apunta-txt{font-size:12.5px} .apunta-ciudad{right:8px} }

.envio-a b{font-weight:600}
/* 📍 MIENTRAS NO HAYA CIUDAD, el chip llama la atención.
   Es el dato que convierte «puede que te llegue rápido» en «te llega mañana», y
   la entrega rápida es el argumento de venta más fuerte que hay aquí. Si el chip
   se queda gris entre el logo y el carrito, nadie lo toca.
   Late tres veces y para: un latido eterno se vuelve ruido y se deja de ver. */
.envio-a.pideme{border-color:var(--verde);color:var(--verde);background:#2f7a3d0f;
  animation:pideme 1.5s ease-out 3}
@keyframes pideme{
  0%,100%{box-shadow:0 0 0 0 #2f7a3d00}
  35%    {box-shadow:0 0 0 5px #2f7a3d2b}
}
/* Cuando la persona toca «Elige tu ciudad» en una prenda, el chip de arriba
   pega un destello: le enseña DÓNDE está lo que acaba de abrir, para que la
   próxima vez vaya directo. */
.envio-a.destello{animation:destello .7s ease-out 2}
@keyframes destello{
  0%,100%{box-shadow:0 0 0 0 #2f7a3d00;background:#2f7a3d0f}
  40%    {box-shadow:0 0 0 7px #2f7a3d33;background:#2f7a3d24}
}
@media(prefers-reduced-motion:reduce){
  .envio-a.pideme,.envio-a.destello{animation:none}
}
@media(max-width:420px){.envio-a{padding:6px 9px;font-size:10px;max-width:112px}}
/* La hoja que sube desde abajo para elegir ciudad. */
.hoja{position:fixed;inset:0;z-index:120;display:none}
.hoja.abierta{display:block}
.hoja-fondo{position:absolute;inset:0;background:#0008}
.hoja-caja{position:absolute;left:0;right:0;bottom:0;background:var(--bg);
  border-radius:16px 16px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));
  max-height:82vh;overflow-y:auto}
.hoja-caja h3{margin:0 0 4px;font-size:16px;font-weight:600}
.hoja-caja .sub{margin:0 0 14px;font-size:12.5px;color:var(--gris);line-height:1.5}
.hoja-op{display:block;width:100%;text-align:left;background:none;border:1px solid var(--borde);
  border-radius:10px;padding:12px 14px;margin-bottom:7px;font-family:inherit;font-size:14px;
  color:var(--tinta);cursor:pointer}
.hoja-op:hover{background:color-mix(in srgb,var(--tinta) 4%,transparent)}
.hoja-op.puesta{border-color:var(--tinta);font-weight:600}
.hoja-op small{display:block;font-size:11.5px;color:var(--gris);margin-top:3px;font-weight:400}
/* La etiqueta de entrega dentro de la lista de ciudades: mismo componente que
   en las prendas, para que el azul signifique lo mismo en los dos sitios. */
.hoja-op .envio-tag{display:inline-flex;margin-top:6px;font-weight:400}
.agotado-tag{position:absolute;top:8px;left:8px;background:var(--tinta);color:var(--bg);
             font-size:9px;font-family:var(--t-letra-titulos);font-weight:700;padding:4px 8px;letter-spacing:.06em}

/* --- destacado --- */
.dest-fila{padding:20px;display:flex;justify-content:space-between;align-items:center;
           gap:14px;border-bottom:1px solid var(--borde)}
.dest-fila .nom{font-weight:500;font-size:16px}
.dest-fila .pre{color:var(--gris);font-size:14px}
.btn-mini{background:var(--tinta);color:var(--bg);padding:12px 20px;font-family:var(--t-letra-titulos);
          font-weight:700;font-size:12px;letter-spacing:.05em;border:none;cursor:pointer;flex-shrink:0}

/* --- marca --- */
.marca{background:var(--tinta);color:var(--bg);padding:64px 20px;margin-top:40px}
.marca h2{font-family:var(--t-letra-titulos);font-weight:900;font-size:clamp(24px,6vw,32px);
          line-height:1.2;margin:0 0 18px}
.marca p{font-size:15px;line-height:1.7;color:var(--claro);max-width:44ch;margin:0}
.beneficios{padding:48px 20px;display:flex;flex-direction:column;gap:28px}
.ben{display:flex;gap:16px;align-items:flex-start}
.ben .ico{flex-shrink:0}
.ben b{font-weight:500;font-size:15px;display:block;margin-bottom:4px}
.ben small{color:var(--gris);font-size:13px;line-height:1.5}

/* --- pie --- */
/* ── Opiniones de clientes (03-Sep-2026) ──────────────────────────────
   Son mensajes REALES que la gente escribió por WhatsApp. Se pasan a la
   tienda porque ahí no los ve nadie: quien entra por primera vez no tiene
   forma de saber si esto es serio. Van al final, después de los beneficios
   y antes del pie — cuando ya vio la ropa y le falta decidirse.
   Para añadir una nueva, basta con agregarla al array OPINIONES de abajo. */
.op-zona{padding:52px 20px 44px;background:var(--bg);border-top:1px solid var(--borde)}
.op-cab{max-width:1200px;margin:0 auto 24px}
.op-tit{font-family:var(--t-letra-titulos);font-weight:900;font-size:22px;letter-spacing:-.01em;margin:0}
.op-sub{font-size:13px;color:var(--gris);margin:5px 0 0}
/* Una fila que se arrastra: en el celular caben 1,2 tarjetas y se ve que hay más
   a la derecha. En pantalla grande se reparten en rejilla y no sobra hueco. */
.op-fila{max-width:1200px;margin:0 auto;display:flex;gap:14px;overflow-x:auto;
         padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.op-fila::-webkit-scrollbar{height:5px}
.op-fila::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tinta) 13%,transparent);border-radius:99px}
.op{flex:0 0 260px;scroll-snap-align:start;background:#fff;border:1px solid var(--borde);
    padding:18px 18px 16px;display:flex;flex-direction:column;gap:9px}
.op-estrellas{font-size:13px;letter-spacing:2px;color:var(--tinta)}
.op-estrellas i{color:#c9c6c0;font-style:normal}
.op-txt{font-size:14.5px;line-height:1.55;margin:0;flex:1}
.op-pie{display:flex;align-items:center;gap:9px;margin-top:2px}
.op-ini{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:#fff;flex-shrink:0;
        display:grid;place-items:center;font-family:var(--t-letra-titulos);font-weight:700;font-size:12px}
.op-quien{font-size:13px;font-weight:600;line-height:1.3}
.op-quien{display:flex;align-items:center;flex-wrap:wrap;gap:0 4px}
.op-quien small{flex-basis:100%;font-weight:400;font-size:11px;color:var(--gris2)}
/* El chulito de compra verificada. Solo sale donde se sabe quién escribió. */
.op-ok{width:14px;height:14px;flex-shrink:0;vertical-align:-2px}
/* En pantalla grande NO se pasa a rejilla: con 7 opiniones quedaban 5 arriba y
   2 solas abajo, con medio renglón vacío. La fila que se arrastra funciona con
   cualquier cantidad y es el mismo gesto del catálogo. */
@media(min-width:900px){
  .op{flex:0 0 280px}
  .op-fila{padding-bottom:10px}
}
@media(max-width:520px){ .op{flex:0 0 78%} }

.pie{background:var(--footer);padding:56px 20px 40px;display:flex;flex-direction:column;gap:20px;
     border-top:1px solid var(--borde)}
.pie .marca-txt{font-family:var(--t-letra-titulos);font-weight:900;font-size:22px}
/* Botones de seguir. A proposito NO hay WhatsApp: el pedido se hace aqui,
   no por chat — si no, se vuelve a atender todo a mano. */
.redes{display:flex;flex-direction:column;gap:10px}
.red{display:flex;align-items:center;gap:14px;border:1px solid var(--tinta);background:none;
     padding:14px 18px;cursor:pointer;color:var(--tinta);min-height:56px;width:100%;
     transition:background .15s,color .15s}
.red:hover,.red:active{background:var(--tinta);color:var(--bg)}
.red svg{width:20px;height:20px;flex-shrink:0}
/* etiqueta arriba y el usuario debajo: el @ de Instagram es largo y,
   en una sola linea, partia el boton en dos en pantallas angostas */
.red .txt-red{display:flex;flex-direction:column;gap:2px;min-width:0}
.red .lbl-red{font-family:var(--t-letra-titulos);font-weight:700;font-size:12px;letter-spacing:.06em}
.red .arroba{font-family:var(--t-letra-texto);font-weight:400;font-size:12.5px;
             opacity:.62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.red .flecha{margin-left:auto;font-size:15px;opacity:.5;flex-shrink:0}
@media(min-width:620px){.redes{flex-direction:row}.red{width:auto;min-width:270px}}
/* Invitación a seguir el Instagram (16-Oct-2026): pantalla de gracias y dentro del pedido.
   Es una tarjeta en su sitio, no una ventana que salta. Toda la tarjeta es el enlace:
   en el celular se toca donde sea. */
.ig-tarjeta{display:flex;align-items:center;gap:14px;width:100%;max-width:380px;margin:6px auto 0;
  padding:14px 16px;border:1px solid var(--tinta);color:var(--tinta);text-decoration:none;
  text-align:left;background:transparent;transition:background .15s,color .15s}
.ig-tarjeta:hover,.ig-tarjeta:active{background:var(--tinta);color:var(--bg)}
.ig-tarjeta .ig-ico{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:flex;
  align-items:center;justify-content:center;border:1px solid currentColor}
.ig-tarjeta .ig-ico svg{width:19px;height:19px}
.ig-tarjeta .ig-txt{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ig-tarjeta .ig-txt b{font-family:var(--t-letra-titulos);font-weight:700;font-size:13.5px;letter-spacing:.02em}
.ig-tarjeta .ig-txt small{font-size:12.5px;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ig-tarjeta .ig-btn{flex-shrink:0;font-family:var(--t-letra-titulos);font-weight:700;font-size:11.5px;
  letter-spacing:.08em;padding:9px 13px;background:var(--tinta);color:var(--bg)}
.ig-tarjeta:hover .ig-btn,.ig-tarjeta:active .ig-btn{background:var(--bg);color:var(--tinta)}
.lam-cuerpo .ig-tarjeta{max-width:none;width:auto;margin:22px 20px 0}

/* --- laminas (ficha, carrito, checkout) --- */
.lamina{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;
        -webkit-overflow-scrolling:touch;animation:subir .22s ease}
@keyframes subir{from{transform:translateY(14px);opacity:.6}to{transform:none;opacity:1}}

/* Y una salida, que antes no había: la pantalla se quitaba de golpe con
   `remove()`. Al agregar una talla el cliente pasaba de la prenda al catálogo
   de un tirón, sin nada que le dijera que había pasado algo — «se devolvió
   brusco», en palabras del dueño. Baja como subió, y así el ojo sigue el
   movimiento en vez de encontrarse otra pantalla de repente. */
@keyframes bajar{from{transform:none;opacity:1}to{transform:translateY(16px);opacity:0}}
.lamina.saliendo{animation:bajar .2s ease forwards;pointer-events:none}
@media (prefers-reduced-motion: reduce){
  .lamina{animation:none}
  .lamina.saliendo{animation:none;opacity:0}
}
.lam-nav{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 95%,transparent);backdrop-filter:blur(6px);z-index:2;
         display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
         border-bottom:1px solid var(--borde)}
.lam-nav .tit{font-family:var(--t-letra-titulos);font-weight:900;font-size:16px;letter-spacing:.03em}
/* La flecha de volver y la X de cerrar. Más grandes y con más peso: son el
   camino de salida de cada pantalla y en el celular hay que verlas de reojo. */
.btn-x{background:none;border:none;font-size:30px;font-weight:700;cursor:pointer;line-height:1;
       padding:8px;min-width:48px;min-height:48px;color:var(--tinta);
       display:flex;align-items:center;justify-content:center}
.btn-x:active{opacity:.55}
/* La flecha va dibujada, no como carácter: un glifo de fuente no engorda por
   mucho `font-weight` que se le ponga. Con trazo de 3.2 sí se ve gorda. */
.ico-volver{width:26px;height:26px;display:block}
.lam-cuerpo{padding:0 0 140px}

/* --- ficha --- */
/* ZOOM DE LA FOTO (23-Ago-2026). En ropa el cliente quiere ver la costura, la
   textura y cómo cae la tela: es lo más parecido a tocar la prenda.
   La rejilla sigue cargando la `-mini` (500px, rápida) y la grande (1200px) SOLO
   se descarga cuando de verdad hace zoom — no se paga velocidad por algo que se
   usa a ratos. */
.ficha-foto{position:relative;overflow:hidden;cursor:zoom-in;touch-action:pan-y}
.ficha-foto.zoom{cursor:zoom-out;touch-action:none}
.ficha-foto .capa{position:absolute;inset:0;background-size:cover;background-position:center;
                  opacity:0;transition:opacity .18s;pointer-events:none}
.ficha-foto.zoom .capa{opacity:1}
.zoom-pista{position:absolute;right:10px;bottom:10px;background:color-mix(in srgb,var(--tinta) 85%,transparent);color:#fff;
            font-family:var(--t-letra-titulos);font-size:10px;font-weight:700;letter-spacing:.12em;
            padding:6px 9px;pointer-events:none;transition:opacity .2s}
.ficha-foto.zoom .zoom-pista{opacity:0}
.ficha-foto{width:100%;aspect-ratio:3/4;background:var(--rayaA);display:flex;align-items:center;
            justify-content:center;background-size:cover;background-position:center}
.ficha-info{padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.ficha-info h2{font-family:var(--t-letra-titulos);font-weight:900;font-size:26px;margin:0;line-height:1.15}
.precio-g{font-size:20px;font-weight:500}
.desc{color:var(--gris);font-size:14px;line-height:1.6;margin:0}
/* Las etiquetas del formulario. Iban a 12 px con mucho espaciado entre letras,
   que en mayúsculas se lee peor todavía: se sube a 13 y se afloja el espaciado. */
.lbl{font-family:var(--t-letra-titulos);font-weight:700;font-size:13px;letter-spacing:.07em;color:#4a4a4a}
.tallas{display:flex;flex-wrap:wrap;gap:10px;border-radius:4px}
/* Más grandes de lo que estaban (58x48, letra de 13): en el celular hay que
   acertarles con el pulgar y leerlas de un vistazo, no entrecerrando los ojos. */
.talla{min-width:74px;min-height:60px;border:1.5px solid var(--tinta);background:none;cursor:pointer;
       font-family:var(--t-letra-titulos);font-weight:700;font-size:17px;display:flex;flex-direction:column;
       align-items:center;justify-content:center;gap:3px;padding:8px 12px}

/* Un parpadeo cuando el cliente toca "ELIGE UNA TALLA": le dice DÓNDE mirar. */
@keyframes mirame-tallas{
  0%,100%{box-shadow:0 0 0 0 transparent}
  25%,75%{box-shadow:0 0 0 5px color-mix(in srgb,var(--tinta) 8%,transparent)}
  50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--tinta) 18%,transparent)}
}
.tallas.mirame{animation:mirame-tallas 1.3s ease-in-out}
@media (prefers-reduced-motion: reduce){ .tallas.mirame{animation:none} }
.talla.sel{background:var(--tinta);color:var(--bg)}
/* La talla que se acaba de agregar, en verde: es la confirmación de QUÉ se
   agregó, justo donde el cliente está mirando. */
.talla.lista{background:var(--verde);border-color:var(--verde);color:#fff}
.talla:disabled{opacity:.3;cursor:not-allowed;text-decoration:line-through}
.talla small{font-size:10.5px;font-weight:500;opacity:.7;letter-spacing:0}
.aviso-stock{font-size:13.5px;color:var(--rojo);font-weight:500}
.barra-fija{position:fixed;bottom:0;left:0;right:0;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(8px);
            border-top:1px solid var(--borde);padding:14px 16px calc(14px + env(safe-area-inset-bottom));
            display:flex;gap:10px;align-items:center;z-index:3}
.btn-grande{flex:1;background:var(--tinta);color:var(--bg);border:none;padding:17px;
            font-family:var(--t-letra-titulos);font-weight:700;font-size:14px;letter-spacing:.06em;cursor:pointer}
.btn-grande:disabled{opacity:.35;cursor:not-allowed}

/* --- la guía del paquete, en la ficha del pedido --- */
.ped-guia{border:1px solid var(--tinta);padding:14px;margin:14px 0}
.pg-tit{font-size:13px;color:var(--gris);margin-bottom:4px}
.pg-num{font-size:15px;margin-bottom:10px}
.pg-num b{font-family:var(--t-letra-titulos);letter-spacing:.05em}
.pg-link{display:inline-block;background:var(--tinta);color:var(--bg);text-decoration:none;
         padding:11px 18px;font-size:12px;letter-spacing:.12em;font-weight:600}

/* --- carrito --- */
.linea{display:flex;gap:14px;padding:16px 20px;border-bottom:1px solid var(--borde);align-items:flex-start}
.linea .mini{width:64px;height:84px;background:var(--rayaA);flex-shrink:0;background-size:cover;background-position:center}
.linea .det{flex:1;min-width:0}
/* Legibilidad del carrito (25-Ago-2026). Medido en pantalla de celular: el
   nombre iba a 14, la talla a 12 y "Quitar" a 11 px. Esto se lee con una mano,
   a veces en la calle y con prisa — por debajo de 13 hay que entrecerrar los
   ojos, y aquí es donde el cliente comprueba que pidió lo que quería. */
.linea .n{font-weight:600;font-size:15.5px;margin-bottom:4px;line-height:1.3}
.linea .v{font-size:13.5px;color:#555;margin-bottom:9px}
.cant{display:flex;align-items:center;gap:0;border:1px solid var(--borde);width:fit-content}
.cant button{width:36px;height:36px;border:none;background:none;cursor:pointer;font-size:18px;
             display:flex;align-items:center;justify-content:center;color:var(--tinta)}
.cant span{min-width:34px;text-align:center;font-size:14px;font-weight:500}
.quitar{background:none;border:none;color:#555;font-size:13px;cursor:pointer;
        text-decoration:underline;padding:8px 0 0}
.totales{padding:20px;display:flex;flex-direction:column;gap:10px}
/* El subtotal y el envío son cifras: 15 px y un gris más oscuro, que se leen
   de un vistazo sin competir con el TOTAL. */
.tot-fila{display:flex;justify-content:space-between;font-size:15px;color:#555}
.tot-fila.grande{font-size:19px;color:var(--tinta);font-weight:500;padding-top:10px;
                 border-top:1px solid var(--borde);font-family:var(--t-letra-titulos);font-weight:700}
.vacio{padding:80px 24px;text-align:center;color:var(--gris)}
.vacio p{margin:0 0 20px;font-size:15px}

/* --- checkout --- */
.form{padding:20px;display:flex;flex-direction:column;gap:18px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo select{border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);padding:14px;font-size:16px;background:#fff;
              color:var(--tinta);width:100%;appearance:none;cursor:pointer;
              background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
              background-repeat:no-repeat;background-position:right 15px center;background-size:12px;
              padding-right:40px;border-radius:0}
.campo select:focus{outline:2px solid var(--tinta);outline-offset:-2px}
.campo input,.campo textarea{border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);padding:14px;font-size:16px;
                             background:#fff;font-family:var(--t-letra-texto);color:var(--tinta)}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--tinta);outline-offset:-2px}
.campo textarea{resize:vertical;min-height:76px}
.pagos{display:flex;flex-direction:column;gap:10px}
.pago-op,.entrega-op{display:flex;gap:12px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);padding:16px;
         cursor:pointer;background:#fff}
.pago-op.sel,.entrega-op.sel{border-color:var(--tinta);border-width:2px;padding:15px}
.pago-op input,.entrega-op input{margin-top:3px;width:18px;height:18px;accent-color:var(--tinta);flex-shrink:0}
.pago-op b,.entrega-op b{font-weight:500;font-size:15px;display:block}
.pago-op small,.entrega-op small{color:#555;font-size:13.5px;line-height:1.5;display:block;margin-top:4px}
/* --- mis compras --- */
.link-menu{background:none;border:none;color:var(--bg);font-family:var(--t-letra-titulos);
           font-size:28px;font-weight:700;cursor:pointer;padding:0}
/* ---------- buscador de "Mis compras" ---------- */
/* Buscar por celular. Estaba pegado a la izquierda y parecía un formulario
   suelto; ahora es un bloque centrado con la tela de la marca arriba. */
.buscar-pedido{margin-top:34px;border:1px solid var(--borde);border-radius:0;background:#fff;
               position:relative;overflow:hidden;padding:0 0 22px;text-align:center}
.buscar-pedido .tela{height:8px;background:var(--rayaB);opacity:.7}
.buscar-pedido .bp-tit{font-family:var(--t-letra-titulos);font-weight:900;font-size:18px;
                       letter-spacing:-.01em;margin:22px 22px 6px}
.buscar-pedido .bp-ayuda{font-size:13px;color:var(--gris);margin:0 22px 18px;line-height:1.6}
.buscar-pedido .lbl{display:block;font-family:var(--t-letra-titulos);font-size:10.5px;font-weight:700;
                    letter-spacing:.12em;color:var(--gris2);margin:0 0 8px}
.buscar-pedido .inp{width:100%;text-align:center;font-size:19px;letter-spacing:.06em;border-radius:0;
                    font-family:var(--t-letra-titulos);font-weight:700}
.buscar-pedido .btn{border-radius:0;width:100%}
.bp-caja{max-width:300px;margin:0 auto;padding:0 22px}
.bp-msg{margin-top:12px;font-size:13px;min-height:18px}
.bp-msg.mal{color:var(--rojo)}
#bp-lista{text-align:left;padding:0 18px}

/* ---------- botón de ayuda del pedido ---------- */
/* Pista bajo un campo del formulario. No confundir con `.ayuda`, que es la
   caja negra grande del final: misma palabra, cosas distintas. */
.pista{display:block;margin-top:6px;font-size:12.5px;color:#6b6862;line-height:1.5}
.ayuda{margin-top:26px;padding:20px 16px;border-radius:14px;background:var(--tinta,var(--tinta));color:#fff;text-align:center}
.ayuda-tit{font-size:15px;font-weight:600;margin-bottom:6px}
.ayuda-txt{font-size:13px;opacity:.75;margin:0 0 16px;line-height:1.5}
.ayuda .ayuda-btn{display:block;background:#fff;color:var(--tinta,var(--tinta));text-decoration:none;
  padding:14px;border-radius:10px;font-size:14px;font-weight:600;letter-spacing:.03em}
.ayuda-alt{display:inline-block;margin-top:12px;color:#fff;opacity:.7;font-size:12.5px;text-decoration:underline}

/* MIS COMPRAS — rediseño 23-Ago-2026.
   Marca la tienda: esquinas RECTAS (0 radius), Archivo para lo que grita, Work Sans
   para lo que se lee, etiquetas en mayúscula con letter-spacing .12em y el borde
   casi invisible. Nada redondeado: eso era de otra marca. */
.compras{display:flex;flex-direction:column;gap:12px}
.compra{position:relative;display:block;width:100%;background:#fff;cursor:pointer;text-align:left;
        border:1px solid var(--borde);border-left:4px solid var(--tinta);border-radius:0;
        padding:16px 18px 14px;font-family:inherit;transition:border-color .14s,transform .12s}
.compra:hover{border-color:color-mix(in srgb,var(--tinta) 18%,transparent);transform:translateY(-1px)}
.compra:active{transform:none}
.compra .fila{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.compra b{font-family:var(--t-letra-titulos);font-weight:900;font-size:17px;letter-spacing:-.01em;
          display:block;color:var(--tinta)}
.compra small{color:var(--gris);font-size:11.5px;display:block;margin-top:5px;
              text-transform:uppercase;letter-spacing:.1em}
.compra .monto{font-family:var(--t-letra-titulos);font-weight:900;font-size:18px;
               white-space:nowrap;color:var(--tinta)}
.compra .pie{display:flex;justify-content:space-between;align-items:center;gap:10px;
             margin-top:14px;padding-top:12px;border-top:1px solid var(--borde)}
.compra .ver{font-family:var(--t-letra-titulos);font-weight:700;font-size:12.5px;
             letter-spacing:.08em;color:var(--tinta);white-space:nowrap}
.pill{display:inline-block;font-family:var(--t-letra-titulos);font-size:10.5px;letter-spacing:.12em;
      font-weight:700;padding:5px 9px;border-radius:0;border:1px solid currentColor;color:var(--gris)}
.pill.camino{color:#8a5a00}
.pill.listo{color:#1f5c8b}
.pill.ok{color:var(--verde)}
.pill.malo{color:#fff;background:var(--rojo);border-color:var(--rojo)}
.compras-vacio{border:1px solid var(--borde);background:#fff;padding:0 0 26px;text-align:center}
.compras-vacio .tela{height:70px;background:var(--rayaA);opacity:.6;margin-bottom:22px}
.compras-vacio b{font-family:var(--t-letra-titulos);font-weight:900;font-size:19px;display:block;
                 margin:0 22px 8px;letter-spacing:-.01em}
.compras-vacio p{color:var(--gris);font-size:13.5px;line-height:1.65;margin:0 22px}
.buscar-pedido{margin-top:26px;padding:18px 16px 20px;border:1px solid var(--linea,#0000001a);
               background:#fff;position:relative;overflow:hidden;
  border-radius:14px;background:var(--suave,#00000005)}
.buscar-pedido .bp-tit{font-size:15px;font-weight:600;margin-bottom:4px}
.buscar-pedido .bp-ayuda{font-size:12.5px;color:var(--gris,#666);margin:0 0 14px;line-height:1.5}
.bp-msg{margin-top:10px;font-size:13px;min-height:18px}
.bp-msg.mal{color:#a03030}

/* ---------- botón de ayuda del pedido ---------- */
.ayuda-tit{font-size:15px;font-weight:600;margin-bottom:6px}
.ayuda-txt{font-size:13px;opacity:.75;margin:0 0 16px;line-height:1.5}
.ayuda .ayuda-btn{display:block;background:#fff;color:var(--tinta,var(--tinta));text-decoration:none;
  padding:14px;border-radius:10px;font-size:14px;font-weight:600;letter-spacing:.03em}
.ayuda-alt{display:inline-block;margin-top:12px;color:#fff;opacity:.7;font-size:12.5px;text-decoration:underline}

/* MIS COMPRAS — rediseño 23-Ago-2026. Antes eran filas blancas iguales con un
   "VER →" y no decían ni el total ni en qué iba el pedido, que es justo a lo que
   entra el cliente. Ahora cada compra es una ficha con su estado en vivo. */
.compras{display:flex;flex-direction:column;gap:10px}
.compra{position:relative;display:block;width:100%;background:#fff;cursor:pointer;text-align:left;
        border:1px solid var(--borde);border-left:3px solid var(--tinta);
        padding:15px 16px 14px;font-family:inherit;transition:transform .12s, box-shadow .12s}
.compra:hover{transform:translateY(-1px);box-shadow:0 6px 18px color-mix(in srgb,var(--tinta) 7%,transparent)}
.compra:active{transform:none}
.compra .fila{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.compra b{font-family:var(--t-letra-titulos);font-weight:900;font-size:16px;letter-spacing:.02em;display:block}
.compra small{color:var(--gris);font-size:12.5px;display:block;margin-top:4px}
.compra .monto{font-family:var(--t-letra-titulos);font-weight:900;font-size:17px;white-space:nowrap}
.compra .pie{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.compra .ver{font-size:11px;letter-spacing:.14em;color:var(--gris2);white-space:nowrap}
/* Pastilla de estado: el dato por el que entra a esta pantalla */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.1em;
      font-weight:600;padding:4px 10px;border-radius:999px;background:color-mix(in srgb,var(--tinta) 6%,transparent);color:var(--gris)}
.pill .punto{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.camino{background:#8a5a0018;color:#8a5a00}
.pill.listo {background:#1f5c8b18;color:#1f5c8b}
.pill.ok    {background:#2f7a3d18;color:var(--verde)}
.pill.malo  {background:#a0303018;color:var(--rojo)}
/* Cuando aún no ha comprado: en vez de un párrafo suelto, la tela de la marca */
.compras-vacio{border:1px solid var(--borde);background:#fff;padding:30px 22px;text-align:center}
.compras-vacio .tela{height:56px;background:var(--rayaA);margin:-30px -22px 20px;opacity:.55}
.compras-vacio b{font-family:var(--t-letra-titulos);font-weight:900;font-size:17px;display:block;margin-bottom:6px}
.compras-vacio p{color:var(--gris);font-size:13.5px;line-height:1.6;margin:0}
/* El contenedor de las láminas no lleva margen lateral: cada bloque pone el suyo */
/* Estado del PAGO, arriba del todo. Rectangular como el resto de la marca. */
.ped-pago{margin-top:12px}
.pg{display:inline-block;font-family:var(--t-letra-titulos);font-size:11px;font-weight:700;
    letter-spacing:.12em;padding:6px 10px;border-radius:0;border:1px solid currentColor}
.pg-ok{color:var(--verde)}
.pg-contra{color:#fff;background:var(--tinta);border-color:var(--tinta)}
.pg-falta{color:#fff;background:var(--rojo);border-color:var(--rojo)}
/* La prenda con su talla y su COLOR: en ropa es el dato del cambio */
.ped-item .pi-n{display:block}
.ped-item .pi-n small{display:block;margin-top:3px;color:var(--gris);font-size:11.5px;
                      text-transform:uppercase;letter-spacing:.1em}
.ped-item .pi-p{white-space:nowrap;font-weight:500}
.ped-estado{padding:22px 20px 18px;border-bottom:1px solid var(--borde);margin-bottom:20px}
.ped-estado b{font-family:var(--t-letra-titulos);font-weight:900;font-size:26px;display:block}
.ped-estado small{color:var(--gris);font-size:13.5px;display:block;margin-top:5px}
/* Línea de tiempo del pedido */
/* --- linea de tiempo del pedido ---
   Tres niveles a proposito, para que de un vistazo se sepa DONDE va:
     ya paso  -> gris apagado, el dato queda pero no compite
     esta aqui-> negro, en negrita y con anillo: es lo unico que resalta
     falta    -> casi borrado
   El hilo vertical los une para que se lea como un recorrido y no como
   cinco renglones sueltos. */
.pasos{display:flex;flex-direction:column;gap:0;margin:0 20px 24px}
.paso{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--claro);
      padding:7px 0;position:relative}
.paso .bolita{width:11px;height:11px;border-radius:50%;background:#dedbd6;flex-shrink:0}
.paso-txt{flex:1}
.paso-hora{font-size:11.5px;color:var(--claro);letter-spacing:.02em;
           font-variant-numeric:tabular-nums;white-space:nowrap}
/* el hilo: sale de cada bolita hacia la de abajo, menos en la ultima */
.paso::after{content:'';position:absolute;left:5px;top:24px;bottom:-3px;width:1px;
             background:#e2dfda}
.paso:last-child::after{display:none}

.paso.hecho{color:var(--gris2)}
.paso.hecho .bolita{background:#b9b5ae}
.paso.hecho .paso-hora{color:var(--gris2)}
.paso.hecho::after{background:#b9b5ae}

.paso.actual{color:var(--tinta);font-weight:600}
.paso.actual .paso-txt{font-family:var(--t-letra-titulos);font-weight:700;letter-spacing:.03em}
.paso.actual .paso-hora{color:var(--tinta);font-weight:600}
/* el anillo marca "aqui estas" sin meter un color nuevo a la marca */
.paso.actual .bolita{background:var(--tinta);box-shadow:0 0 0 4px color-mix(in srgb,var(--tinta) 12%,transparent)}
.ped-items{display:flex;flex-direction:column;gap:10px;padding:0 20px 18px;
           border-bottom:1px solid var(--borde);font-size:14px}
.ped-item{display:flex;justify-content:space-between;gap:14px}
.ped-item span:last-child{white-space:nowrap}
.ped-pie{margin:20px 20px 0;padding-top:16px;border-top:1px solid var(--borde);
         font-size:12.5px;color:var(--gris);line-height:1.7}

/* --- buscador de ciudad --- */
.buscador{position:relative}
.buscador input{width:100%}
.resultados{position:absolute;top:calc(100% + 2px);left:0;right:0;background:#fff;
            border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);z-index:20;max-height:260px;overflow-y:auto}
.res{display:block;width:100%;text-align:left;background:none;border:none;padding:13px 15px;
     cursor:pointer;font-family:inherit;border-bottom:1px solid var(--borde)}
.res:last-child{border-bottom:none}
.res:hover{background:#faf9f7}
.res b{font-weight:500;font-size:15px;display:block}
.res small{color:var(--gris);font-size:12.5px}
.sin-res{padding:14px 15px;font-size:13px;color:var(--gris);line-height:1.5}
.elegida{display:flex;justify-content:space-between;align-items:center;gap:12px;
         border:1px solid var(--tinta);border-width:2px;padding:13px 15px;background:#fff;font-size:15px}
.elegida button{background:none;border:none;font-size:11px;letter-spacing:.1em;cursor:pointer;
                color:var(--gris);text-decoration:underline;font-family:var(--t-letra-titulos);font-weight:700}

/* --- tipo de vivienda --- */
.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tipo{background:#fff;border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);padding:14px 4px;font-size:14px;cursor:pointer;
      font-family:inherit;color:var(--tinta)}
.tipo.sel{border-color:var(--tinta);border-width:2px;font-weight:500}
@media (max-width:420px){.tipos{grid-template-columns:repeat(2,1fr)}}

/* --- comanda de confirmación --- */
.comanda{background:#fff;border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);margin:16px;padding:20px}
.com-tit{font-family:var(--t-letra-titulos);font-weight:700;font-size:11px;letter-spacing:.12em;
         color:var(--gris2);margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--borde)}
.com-tit:first-child{margin-top:0;padding-top:0;border-top:none}
.com-item{display:flex;justify-content:space-between;gap:14px;font-size:14px;padding:4px 0}
.com-item span:last-child{white-space:nowrap}
.com-dato{font-size:14px;line-height:1.6}
.com-totales{margin-top:20px;padding-top:16px;border-top:1px solid var(--borde);
             display:flex;flex-direction:column;gap:9px}

/* --- mapa para marcar la dirección --- */
.mapa-caja{border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);background:#fff}
.mapa-cab{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px;
          border-bottom:1px solid var(--borde);flex-wrap:wrap}
/* En celular angosto el botón se baja a ancho completo en vez de estrujar el texto */
@media (max-width:420px){
  .mapa-cab{flex-direction:column;align-items:stretch}
  .btn-gps{width:100%;padding:12px}
}
.mapa-cab b{font-weight:500;font-size:14px}
.mapa-cab small{color:var(--gris);font-size:12px;display:block;margin-top:2px;line-height:1.4}
#mapa{height:230px;width:100%;background:var(--rayaA);z-index:1}
.btn-gps{background:var(--tinta);color:var(--bg);border:none;padding:10px 14px;font-size:11.5px;
         letter-spacing:.08em;cursor:pointer;font-family:var(--t-letra-titulos);font-weight:700;
         white-space:nowrap;flex-shrink:0}
.btn-gps:disabled{opacity:.5}
.envio-linea{padding:14px 16px;border-top:1px solid var(--borde);display:flex;
             justify-content:space-between;align-items:center;gap:12px;font-size:13.5px}
.envio-linea .val{font-weight:500;font-size:15px;white-space:nowrap}
.envio-linea small{color:var(--gris);font-size:12px;display:block;margin-top:2px}
.envio-nac{background:#fdf6e8;border-top:1px solid #e8d9b8;color:#7a5c1e}
/* La atribución de OpenStreetMap es obligatoria por licencia */
.leaflet-control-attribution{font-size:9px!important}

/* Casilla de avisos del checkout: mismo lenguaje visual que las formas de pago */
.avisos-fila{display:flex;gap:12px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);
             padding:16px;cursor:pointer;background:#fff}
.avisos-fila input{margin-top:3px;width:18px;height:18px;accent-color:var(--tinta);flex-shrink:0}
.avisos-fila b{font-weight:500;font-size:15px;display:block}
.avisos-fila small{color:#555;font-size:13.5px;line-height:1.5;display:block;margin-top:4px}
.btn-borde{background:transparent;border:1px solid var(--tinta);color:var(--tinta);
           padding:13px 24px;font-size:12.5px;letter-spacing:.14em;cursor:pointer}
.btn-borde:disabled{opacity:.5;cursor:default}
/* ── El apartado de instalar la app ─────────────────────────────────────
   Lo pidió el dueño: *"un apartado bonito de instalar, con logo, que diga «no
   te pierdas lo mejor de la tienda» — no la notificación genérica de Google"*.
   Sube desde abajo, no tapa la pantalla y se puede cerrar. Ver el JS para
   CUÁNDO sale: solo cuando la persona ya mostró interés. */
.instala-tarjeta{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--bg);
  border-top:1px solid var(--borde);box-shadow:0 -10px 34px #0000001f;
  padding:20px 20px calc(20px + env(safe-area-inset-bottom));
  animation:instalaSube .28s ease}
@keyframes instalaSube{from{transform:translateY(100%)}to{transform:none}}
.instala-tarjeta.saliendo{animation:instalaBaja .22s ease forwards;pointer-events:none}
@keyframes instalaBaja{from{transform:none}to{transform:translateY(100%)}}
@media (prefers-reduced-motion: reduce){
  .instala-tarjeta,.instala-tarjeta.saliendo{animation:none}}
.instala-fila{display:flex;gap:14px;align-items:flex-start}
.instala-logo{width:54px;height:54px;border-radius:13px;flex-shrink:0;object-fit:cover;
  background:var(--tinta);box-shadow:0 3px 12px #00000026}
.instala-txt{flex:1;min-width:0}
.instala-txt b{font-family:var(--t-letra-titulos);font-weight:900;font-size:16px;
  display:block;line-height:1.25;margin-bottom:5px}
.instala-txt small{font-size:13px;color:var(--gris);line-height:1.5;display:block}
.instala-x{background:none;border:none;font-size:26px;line-height:1;color:var(--gris);
  cursor:pointer;padding:0 2px;flex-shrink:0;min-width:34px;min-height:34px}
.instala-btns{display:flex;gap:10px;margin-top:16px}
.instala-btns .si{flex:1;background:var(--tinta);color:var(--bg);border:none;min-height:50px;
  font-family:var(--t-letra-titulos);font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer}
.instala-btns .no{background:none;border:1px solid var(--borde);color:var(--gris);min-height:50px;
  padding:0 18px;font-family:var(--t-letra-titulos);font-weight:700;font-size:13px;
  letter-spacing:.06em;cursor:pointer}
@media(min-width:620px){
  .instala-tarjeta{left:auto;right:20px;bottom:20px;max-width:400px;border:1px solid var(--borde)}
}

/* Boton de instalar, al final del menu */
.instalar{margin-top:26px;background:var(--tinta);color:var(--bg);border:none;
          padding:14px 22px;font-size:12.5px;letter-spacing:.14em;cursor:pointer;
          font-family:inherit;width:100%}
.error-caja{background:#fdeaea;border-left:3px solid var(--rojo);padding:13px 15px;
            font-size:13.5px;color:#7d2020;line-height:1.5}

/* --- confirmacion --- */
.ok-caja{padding:60px 24px;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.ok-circ{width:64px;height:64px;border-radius:50%;background:var(--tinta);color:var(--bg);
         display:flex;align-items:center;justify-content:center;font-size:30px}
.ok-caja h2{font-family:var(--t-letra-titulos);font-weight:900;font-size:26px;margin:0}
.ok-caja .ped{font-family:var(--t-letra-titulos);font-weight:700;font-size:15px;letter-spacing:.06em;
              background:var(--tinta);color:var(--bg);padding:9px 16px}
.ok-caja p{color:var(--gris);font-size:14.5px;line-height:1.6;max-width:34ch;margin:0}

/* --- avisos --- */
.toast{position:fixed;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));
       background:var(--tinta);color:var(--bg);padding:15px 18px;font-size:14px;z-index:200;
       animation:subir .2s ease;text-align:center}
.cargando{padding:70px 20px;text-align:center;color:var(--gris);font-size:14px}
.velo{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 93%,transparent);z-index:300;display:flex;align-items:center;
      justify-content:center;flex-direction:column;gap:16px}
.spin{width:34px;height:34px;border:2px solid var(--borde);border-top-color:var(--tinta);
      border-radius:50%;animation:giro .7s linear infinite}

/* La tarjeta de "confirmando tu pago". Es lo primero que ve alguien que ACABA
   de pagar, así que dice qué pasa, cuánto puede tardar, y sobre todo que se
   puede cerrar sin perder nada. */
.conf-pago{background:var(--bg);border:1px solid var(--tinta);padding:30px 24px 24px;
           max-width:330px;width:calc(100% - 48px);text-align:center;position:relative;
           display:flex;flex-direction:column;align-items:center;gap:12px}
.conf-pago b{font-size:17px;font-weight:600}
.conf-pago small{font-size:13.5px;color:#555;line-height:1.5}
.conf-calma{font-size:12.5px;color:var(--gris2);line-height:1.45;border-top:1px solid var(--borde);
            padding-top:12px;margin-top:2px}
.conf-x{position:absolute;top:6px;right:8px;background:none;border:none;font-size:28px;
        line-height:1;color:var(--tinta);cursor:pointer;padding:6px 10px;min-width:44px;min-height:44px}
.conf-x:active{opacity:.5}

}
@keyframes giro{to{transform:rotate(360deg)}}

/* --- pantalla grande: no estirar como chicle --- */
@media(min-width:900px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .banda{aspect-ratio:21/9}
  .lamina{max-width:560px;left:auto;right:0;box-shadow:-8px 0 40px #0000001a}
  .lamina.centro{max-width:820px;left:50%;transform:translateX(-50%);right:auto}
  .ficha-foto{aspect-ratio:4/3}
}

/* ── 🖥️ TABLET Y COMPUTADOR (02-Oct-2026, pedido del dueño: «en el PC se ve raro») ─────────────────
   En el celular NO cambia nada: todo va dentro de min-width.
   1) La ficha era una franja angosta a la derecha con la foto recortada a 4:3 (de una camiseta se veía
      el cuello) y el botón de comprar estirado por TODA la pantalla. Ahora es una ventana centrada:
      foto completa a la izquierda, datos y botón a la derecha.
   2) En carrito/pago la barra del botón queda DENTRO de su panel (sticky), no a lo ancho de la página.
   3) «TALLAS DISPONIBLES» pegada al borde izquierdo. */
@media(min-width:901px){ .tallas-fila{padding:0 20px 20px} }
@media(min-width:768px){
  .lamina .barra-fija{position:sticky;bottom:0;left:auto;right:auto}
  .lamina.lam-ficha{inset:4vh 0 auto 0;margin:0 auto;width:min(1120px,94vw);max-width:none;height:92vh;
    transform:none;left:0;right:0;border-radius:14px;overflow:hidden;display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(340px,1fr);grid-template-rows:auto minmax(0,1fr) auto;
    box-shadow:0 0 0 100vmax #0000008c,0 24px 70px #00000059}
  #laminas:has(.lam-ficha){position:fixed;inset:0;z-index:79}   /* el fondo oscuro recibe el clic → cierra */
  .lam-ficha .lam-nav{grid-column:1/-1}
  .lam-ficha .lam-cuerpo{display:contents}
  .lam-ficha .ficha-foto{grid-column:1;grid-row:2/4;aspect-ratio:auto;height:100%;
    background-size:contain;background-repeat:no-repeat;background-color:#0e0e0e}
  .lam-ficha .ficha-info{grid-column:2;grid-row:2;overflow-y:auto;padding:28px 30px}
  .lam-ficha .ficha-info h2{font-size:30px}
  .lam-ficha .barra-fija{grid-column:2;grid-row:3;position:static;padding:16px 30px 20px}
}
@media(min-width:768px) and (max-width:1000px) and (orientation:portrait){
  /* Tablet de pie: foto arriba (más alta que ancha) y datos abajo, en la misma ventana */
  .lamina.lam-ficha{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1.2fr) minmax(0,1fr) auto}
  .lam-ficha .ficha-foto{grid-column:1;grid-row:2}
  .lam-ficha .ficha-info{grid-column:1;grid-row:3}
  .lam-ficha .barra-fija{grid-column:1;grid-row:4}
}

/* ── Los dos botones de abajo (21-Ago-2026) ─────────────────────────────
   "MIS COMPRAS" vivía solo como etiqueta arriba y "PEDIR" no existía. Abajo,
   al alcance del pulgar, es donde la gente los busca en el celular.
   z-index 40: por debajo del menú (60) y de las láminas (80), que llevan su
   propia barra fija — si esta se colara encima, taparía el botón de pagar. */
.barra-abajo{position:fixed;bottom:0;left:0;right:0;z-index:40;display:flex;gap:1px;
  background:var(--borde,color-mix(in srgb,var(--tinta) 8%,transparent));border-top:1px solid var(--borde,color-mix(in srgb,var(--tinta) 8%,transparent));
  padding-bottom:env(safe-area-inset-bottom)}
.barra-abajo button{flex:1;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(8px);border:none;
  padding:15px 8px;cursor:pointer;font-family:var(--t-letra-titulos);font-weight:700;
  font-size:11.5px;letter-spacing:.07em;color:var(--tinta);display:flex;flex-direction:column;
  align-items:center;gap:5px}
.barra-abajo button:active{background:#ececea}
.barra-abajo .ic{font-size:17px;line-height:1}
/* Sitio para que la barra no tape el pie de la tienda */
body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}

/* MIS COMPRAS en la barra superior */
.tag-compras{background:none;border:1px solid color-mix(in srgb,var(--tinta) 15%,transparent);border-radius:999px;
  padding:7px 13px;font-family:var(--t-letra-titulos);font-size:11px;font-weight:600;
  letter-spacing:.08em;color:var(--tinta);cursor:pointer;white-space:nowrap}
.tag-compras:hover{background:color-mix(in srgb,var(--tinta) 4%,transparent)}
.tag-compras.oculto{display:none}
@media(max-width:420px){.tag-compras{padding:6px 10px;font-size:10px;letter-spacing:.05em}}

/* ── Franja de edición limitada: se arrastra de lado ────────────────── */
.franja{display:flex;gap:12px;overflow-x:auto;padding:0 16px 4px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.franja::-webkit-scrollbar{display:none}
.fcard{flex:0 0 66%;max-width:260px;scroll-snap-align:start;background:none;border:none;
  padding:0;text-align:left;cursor:pointer}
@media(min-width:700px){.fcard{flex-basis:32%}}
.fcard:disabled{opacity:.5;cursor:default}
.ffoto{aspect-ratio:1/1;background:var(--rayaA);background-size:cover;background-position:center;
  position:relative;display:flex;align-items:center;justify-content:center}
.ffoto em{font-style:normal;font-size:11px;color:#555;letter-spacing:.05em}
.fagotado,.fquedan{position:absolute;top:8px;left:8px;font-style:normal;font-size:10px;
  font-weight:700;letter-spacing:.06em;padding:4px 8px;background:var(--tinta);color:var(--bg)}
.fquedan{background:#a06a1a}
.fnom{font-size:13.5px;font-weight:600;margin-top:9px;line-height:1.3}
.fpre{font-size:13px;color:#555;margin-top:2px}
.franja-tip{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a8a8a;
  padding:8px 16px 0;font-family:var(--t-letra-texto)}
.franja-tip .flecha{display:inline-block;animation:tipmove 1.4s ease-in-out infinite}

/* Carrusel: la franja avanza sola. `scroll-behavior:smooth` y el centrado del
   snap son lo que hace que el salto se lea como un movimiento y no como un
   parpadeo. `position:relative` NO es decorativo: hace que el `offsetLeft` de
   cada tarjeta se mida contra el carrusel, que es de lo que vive el avance. */
.franja.carrusel{position:relative;scroll-behavior:smooth;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-bottom:6px}
.franja.carrusel .fcard{scroll-snap-align:center}
/* Los puntos, a la derecha del título: dicen cuántas piezas hay y en cuál va. */
.dest-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding:0 20px 18px}
.dest-cab h2{margin:0}
.dest-puntos{display:flex;gap:6px;flex:none;padding-bottom:5px}
.dest-punto{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:#cdcac4;
  cursor:pointer;transition:width .3s,background .3s}
.dest-punto.on{width:20px;border-radius:4px;background:var(--tinta)}

/* Avisito de "arrastra" sobre las categorias. Se va solo al primer arrastre:
   una vez que la persona entendio, el mensaje sobra. */
.cats-tip{display:flex;align-items:center;gap:6px;font-size:12px;color:#8a8a8a;
  padding:0 16px 7px;font-family:var(--t-letra-texto)}
.cats-tip .flecha{display:inline-block;animation:tipmove 1.4s ease-in-out infinite}
@keyframes tipmove{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.cats-tip .flecha{animation:none}}

/* ── 🔓 LA VENTANA DEL PAGO DE WOMPI MIDE 10 PÍXELES ───────────────────────
   No es una exageración. La hoja de estilos que trae el propio `widget.js`
   dice, literalmente:

       .waybox-display-block { display: block; height: 10px; }
       .waybox-iframe        { height: 100%; }

   `.waybox-display-block` es la clase que Wompi le pone al modal para
   MOSTRARLO, así que al abrirse queda de 10px de alto, y el iframe de dentro
   hereda el 100% de esos 10px. En el celular no se ve el formulario de la
   tarjeta ni se puede llegar al botón de pagar: no falta scroll, falta ALTO.

   Se le da una altura de verdad. `100dvh` y no `100vh`: en un celular `100vh`
   cuenta la barra de direcciones que se esconde al bajar, y el último trozo
   quedaría siempre fuera de la pantalla. Los 40px de arriba son el hueco que
   Wompi deja para su botón de cerrar (`inset: 40px 0 0`). */
.waybox-modal.waybox-display-block {
  height: calc(100dvh - 48px) !important;
  max-height: calc(100dvh - 48px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.waybox-modal.waybox-display-block .waybox-iframe { height: 100% !important; }
.waybox-backdrop { -webkit-overflow-scrolling: touch; }

/* Navegadores viejos sin `dvh`: se cae a `vh`, que funciona aunque deje un
   trozo bajo la barra de direcciones. Mejor eso que 10px. */
@supports not (height: 100dvh) {
  .waybox-modal.waybox-display-block {
    height: calc(100vh - 48px) !important;
    max-height: calc(100vh - 48px) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPA DE DISEÑO «BOUTIQUE» — plantilla GoHart Tiendas (17-Oct-2026)

   Va al final a propósito: lo de arriba es la estructura que ya funciona (la de
   la tienda, con sus arreglos de uso); esto es la piel. Todo con las variables del
   tema (--t-*), así cada tienda se ve con SUS colores y SUS letras.

   Un solo gesto fuerte: las fotos destacadas y la portada van en ARCO, como una
   vitrina de boutique. Lo demás, sobrio: tipo oración, botones redondeados,
   mucho aire. Nada de etiquetas en mayúscula sostenida.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --r-foto:14px; --r-caja:16px; --r-campo:12px;
  --arco:999px 999px var(--r-foto) var(--r-foto);
  --sombra-suave:0 10px 30px color-mix(in srgb,var(--t-principal-hondo) 10%,transparent);
  --rayaA:linear-gradient(160deg,var(--t-principal-suave),var(--t-fondo-alterno));
  --rayaB:linear-gradient(200deg,var(--t-principal-suave),var(--t-fondo-alterno));
}
body{font-family:var(--t-letra-texto);font-size:15.5px;line-height:1.5;background:var(--t-fondo);color:var(--t-tinta)}
h1,h2,h3{font-family:var(--t-letra-titulos);font-weight:500;letter-spacing:0;color:var(--t-principal-hondo)}
:focus-visible{outline:2px solid var(--t-principal);outline-offset:2px}
::selection{background:var(--t-principal-suave)}

/* ── Cabecera: menú · logo al centro · bolsa ─────────────────────────────── */
.nav{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:0;
     padding:10px 8px 6px;background:color-mix(in srgb,var(--t-fondo) 94%,transparent);
     border-bottom:1px solid var(--t-linea)}
.nav .icono-btn{justify-self:start}
.icono-btn span{background:var(--t-principal-hondo);height:1.5px;width:22px}
.icono-btn span:last-child{width:15px;align-self:flex-start;margin-left:11px}
.logo{justify-self:center;font-family:inherit;display:block}
.logo img{width:auto;height:44px;border-radius:0;max-width:min(62vw,260px);object-fit:contain}
.nav-der{justify-self:end;gap:2px}
.btn-carrito{color:var(--t-principal-hondo)}
.btn-carrito svg{width:27px;height:27px}
.btn-carrito .pill{background:var(--t-principal);font-family:var(--t-letra-texto);font-weight:600;box-shadow:0 0 0 2px var(--t-fondo)}
.nav-envio{grid-column:1/-1;display:flex;justify-content:center;position:relative;padding:4px 0 2px}
.envio-a{border:none;background:none;color:var(--t-tinta-suave);font-size:12.5px;letter-spacing:0;
         padding:4px 10px;max-width:none;gap:6px}
.envio-a:hover{background:var(--t-principal-suave)}
.envio-a b{color:var(--t-principal-hondo)}
.envio-a.pideme{color:var(--t-principal);background:var(--t-principal-suave);border:none}
.apunta-ciudad{right:auto;left:50%;transform:translateX(-50%);background:var(--t-principal);border-radius:14px}
.apunta-flecha{right:auto;left:calc(50% - 6px);background:var(--t-principal)}
@keyframes apuntaEntra{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translateX(-50%)}}
@keyframes apuntaMece{0%,88%,100%{transform:translateX(-50%)}92%{transform:translate(-50%,-5px)}96%{transform:translate(-50%,-2px)}}
.tag-compras{font-size:11.5px;color:var(--t-principal-hondo);border-color:var(--t-linea);letter-spacing:0}
@media(max-width:420px){.nav .tag-compras{display:none}}

/* ── Menú a pantalla completa, claro ─────────────────────────────────────── */
.menu{background:var(--t-fondo);gap:20px}
.menu a,.link-menu{font-family:var(--t-letra-titulos);font-size:34px;font-weight:500;color:var(--t-principal-hondo);letter-spacing:0}
.menu a:active,.menu a:hover{color:var(--t-principal)}
.logo-menu{width:min(64vw,260px);height:auto;border-radius:0;margin-bottom:18px}
.cerrar-menu{color:var(--t-principal-hondo);font-weight:300}
.instalar{background:var(--t-principal);color:var(--t-sobre-principal);border:none;border-radius:999px;
          padding:12px 22px;font-family:var(--t-letra-texto);font-size:14px;font-weight:500;letter-spacing:0}

/* ── Portada de marca al abrir ───────────────────────────────────────────── */
#intro{background:var(--t-fondo)}
#intro img{width:min(78vw,380px);height:auto;border-radius:0;animation:introaparece 1.2s ease both}
@keyframes introaparece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#intro img{animation:none}}

/* ── Hero: texto + vitrina en arco ───────────────────────────────────────── */
.hero{padding:30px 20px 34px;gap:26px;display:grid;grid-template-columns:1fr;align-items:center}
.hero-txt{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.hero h1{font-family:var(--t-letra-titulos);font-weight:500;font-size:clamp(40px,11.5vw,72px);line-height:1;
         letter-spacing:-.005em;color:var(--t-principal-hondo)}
.hero p{color:var(--t-tinta-suave);font-size:16px;max-width:34ch;text-align:center}
.hero p:empty{display:none}
.btn-solido,.btn-mini,.pg-link{background:var(--t-principal);color:var(--t-sobre-principal);border-radius:999px;
            font-family:var(--t-letra-texto);font-weight:500;font-size:15px;letter-spacing:.01em;padding:14px 30px;
            text-transform:none;border:none}
.hero .btn-solido{align-self:center}
.btn-solido:active,.btn-mini:active{background:var(--t-principal-hondo)}
.banda{width:auto;margin:0;aspect-ratio:4/5;border-radius:var(--arco);overflow:hidden;
       background:var(--t-principal-suave);position:relative}
.logo-banda{width:72%;height:auto;border-radius:0;opacity:.9}
.banda video,.banda img:not(.logo-banda){object-fit:cover}
@media(min-width:860px){
  .hero{grid-template-columns:1.1fr .9fr;padding:56px 7vw 64px;gap:6vw}
  .hero-txt{align-items:flex-start;text-align:left}
  .hero p{text-align:left}
  .hero .btn-solido{align-self:flex-start}
  .banda{max-height:78vh}
}

/* ── Franja de frases: fina, en cursiva de la letra de títulos ───────────── */
.marquee{background:var(--t-principal-suave);padding:11px 0;border-block:1px solid var(--t-linea)}
.marquee span{font-family:var(--t-letra-titulos);font-style:italic;font-weight:500;font-size:19px;
              color:var(--t-principal-hondo);letter-spacing:0;padding:0 18px}

/* ── Favoritas: tarjetas en arco ─────────────────────────────────────────── */
.dest-cab{padding:44px 20px 16px}
.dest-cab h2,.sec-tit h2{font-family:var(--t-letra-titulos);font-weight:500;font-size:clamp(30px,8vw,42px);
            line-height:1.05;color:var(--t-principal-hondo);margin:0}
.dest-punto{background:var(--t-linea)}
.dest-punto.on{background:var(--t-principal)}
.franja{gap:14px;padding:0 20px 6px}
.fcard{flex:0 0 62%;max-width:280px}
.ffoto{aspect-ratio:3/4;border-radius:var(--arco);overflow:hidden;background-color:var(--t-principal-suave)}
.fnom{font-family:var(--t-letra-titulos);font-size:19px;font-weight:600;margin-top:12px;color:var(--t-tinta);text-align:center}
.fpre{font-size:14.5px;color:var(--t-principal-hondo);text-align:center;margin-top:2px}
.fagotado,.fquedan{border-radius:999px;font-family:var(--t-letra-texto);font-weight:500;letter-spacing:.01em;
                   font-size:11.5px;padding:5px 10px;top:auto;bottom:12px;left:50%;transform:translateX(-50%);white-space:nowrap}
.fquedan{background:var(--t-fondo);color:var(--t-principal-hondo)}
.fagotado{background:var(--t-tinta);color:var(--t-fondo)}
.franja-tip{color:var(--t-tinta-suave);padding:8px 20px 0;justify-content:center}

/* ── Catálogo ────────────────────────────────────────────────────────────── */
.sec-tit{padding:52px 20px 14px}
.cats{gap:8px;padding:0 20px 18px}
.cat-btn{border-radius:999px;border:1px solid var(--t-linea);font-family:var(--t-letra-texto);font-weight:500;
         font-size:13.5px;letter-spacing:.01em;padding:9px 17px;color:var(--t-tinta);text-transform:none;background:var(--t-fondo)}
.cat-btn:hover{border-color:var(--t-principal)}
.cat-btn.act{background:var(--t-principal);border-color:var(--t-principal);color:var(--t-sobre-principal)}
.talla-btn{border-color:var(--t-linea);color:var(--t-tinta)}
.talla-btn.act{background:var(--t-principal-hondo);border-color:var(--t-principal-hondo);color:var(--t-sobre-principal)}
.tallas-tit{font-family:var(--t-letra-texto);font-size:12.5px;letter-spacing:0;font-weight:500;color:var(--t-tinta-suave)}
.fila-tit{font-family:var(--t-letra-titulos);font-weight:500;font-size:26px;text-transform:none;letter-spacing:0;color:var(--t-principal-hondo)}
.fila-tit span{font-family:var(--t-letra-texto);color:var(--t-tinta-suave);font-size:13px}
.grid{gap:22px 12px;padding:0 16px;background:none}
@media(min-width:700px){.grid{gap:30px 18px;padding:0 4vw}}
.card{background:none}
.card .foto{border-radius:var(--r-foto);overflow:hidden;background-color:var(--t-principal-suave)}
.card .txt{padding:11px 2px 0;gap:6px}
.card .nom{font-family:var(--t-letra-titulos);font-weight:600;font-size:18px;line-height:1.2;
           min-height:calc(18px * 1.2 * 2);color:var(--t-tinta)}
.card .pre{font-weight:500;font-size:14.5px;color:var(--t-principal-hondo)}
.btn-linea{border:1px solid var(--t-linea);border-radius:999px;color:var(--t-principal-hondo);font-family:var(--t-letra-texto);
           font-weight:500;font-size:13px;letter-spacing:.01em;padding:9px}
.card:hover .btn-linea{border-color:var(--t-principal)}
.agotado-tag,.encargo-tag{border-radius:999px;font-family:var(--t-letra-texto);letter-spacing:.01em;font-weight:500;
            font-size:11px;padding:4px 9px;border:none;background:var(--t-fondo);color:var(--t-principal-hondo)}
.agotado-tag{background:var(--t-tinta);color:var(--t-fondo)}
/* Cuándo llega: el servicio propio con el color de la marca; la transportadora, en tinta. */
.gancho.flash b{background:var(--t-principal)}
.gancho.flash span{color:var(--t-principal-hondo);background:var(--t-principal-suave)}
.gancho.lento b{background:var(--t-tinta-suave)}
.gancho.lento span{color:var(--t-tinta);background:color-mix(in srgb,var(--t-tinta) 6%,transparent)}
.gancho.envio-tag b{text-transform:none;font-size:10.5px;letter-spacing:0}
.gancho.elegir{color:var(--t-principal-hondo);background:var(--t-principal-suave);border-color:var(--t-linea)}

/* ── Nosotras ────────────────────────────────────────────────────────────── */
.marca{background:var(--t-fondo-alterno);color:var(--t-tinta);padding:70px 24px 64px;margin-top:56px;
       display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;border-block:1px solid var(--t-linea)}
.marca-logo{width:min(70vw,320px);height:auto}
.marca p{font-family:var(--t-letra-titulos);font-style:italic;font-size:21px;line-height:1.5;color:var(--t-tinta);max-width:32ch}
.marca p:empty{display:none}
.firma{font-family:var(--t-letra-firma);font-size:30px;color:var(--t-principal);line-height:1}
.firma:empty{display:none}
.beneficios{padding:44px 24px 52px;gap:26px;display:grid;grid-template-columns:1fr}
@media(min-width:760px){.beneficios{grid-template-columns:repeat(3,1fr);padding:56px 7vw}}
.ben{gap:16px;align-items:flex-start}
.ben .ico{width:32px;height:32px;color:var(--t-principal);flex-shrink:0}
.ben b{font-family:var(--t-letra-titulos);font-weight:600;font-size:19px;color:var(--t-principal-hondo);margin-bottom:2px}
.ben small{color:var(--t-tinta-suave);font-size:14px}

/* ── Opiniones ───────────────────────────────────────────────────────────── */
.op-zona{border-top:1px solid var(--t-linea)}
.op-tit{font-family:var(--t-letra-titulos);font-weight:500;font-size:clamp(26px,7vw,34px);color:var(--t-principal-hondo)}
.op{border-radius:var(--r-caja);border-color:var(--t-linea);background:var(--t-fondo)}
.op-estrellas{color:var(--t-principal)}
.op-estrellas i{color:var(--t-linea)}
.op-ini{background:var(--t-principal-suave);color:var(--t-principal-hondo)}

/* ── Pie ─────────────────────────────────────────────────────────────────── */
.pie{background:var(--t-principal-hondo);color:var(--t-fondo);align-items:center;text-align:center;
     padding:60px 24px calc(110px + env(safe-area-inset-bottom));gap:18px}
.pie-logo{width:min(72vw,300px);height:auto}
.pie-txt{margin:0;color:color-mix(in srgb,var(--t-fondo) 78%,transparent);font-size:15px}
.pie-legal{color:color-mix(in srgb,var(--t-fondo) 55%,transparent);font-size:12px;margin-top:12px}
.redes{width:100%;max-width:520px;align-items:stretch}
.red{border:1px solid color-mix(in srgb,var(--t-fondo) 40%,transparent);color:var(--t-fondo);border-radius:999px;
     padding:13px 20px;text-align:left}
.red:hover,.red:active{background:var(--t-fondo);color:var(--t-principal-hondo)}
.red .lbl-red{font-family:var(--t-letra-texto);font-weight:500;font-size:14px;letter-spacing:.01em}
.red .arroba{font-family:var(--t-letra-texto);opacity:.75}

/* ── Barra de abajo: cápsula flotante ────────────────────────────────────── */
.barra-abajo{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));border-radius:999px;overflow:hidden;
             gap:0;box-shadow:var(--sombra-suave);border:1px solid var(--t-linea);background:var(--t-fondo)}
.barra-abajo button{background:var(--t-fondo);font-family:var(--t-letra-texto);font-weight:500;font-size:14px;
             letter-spacing:.01em;color:var(--t-principal-hondo);text-transform:none;padding:15px 0}
.barra-abajo button+button{border-left:1px solid var(--t-linea)}
.barra-abajo button:active{background:var(--t-principal-suave)}
@media(min-width:900px){.barra-abajo{left:50%;right:auto;width:420px;transform:translateX(-50%)}}

/* ── Láminas: ficha de prenda, carrito, pago ─────────────────────────────── */
.lamina{background:var(--t-fondo)}
.lam-nav{background:color-mix(in srgb,var(--t-fondo) 95%,transparent);border-bottom:1px solid var(--t-linea)}
.lam-nav .tit{font-family:var(--t-letra-titulos);font-weight:600;font-size:21px;letter-spacing:0;color:var(--t-principal-hondo)}
.btn-x{color:var(--t-principal-hondo);font-weight:300}
.ficha-info h2{font-family:var(--t-letra-titulos);font-weight:500;font-size:32px;line-height:1.1;color:var(--t-principal-hondo)}
.precio-g{font-size:21px;font-weight:500;color:var(--t-principal-hondo)}
.desc{color:var(--t-tinta-suave);font-size:15px}
.lbl{font-family:var(--t-letra-texto);font-weight:500;font-size:13.5px;letter-spacing:.01em;color:var(--t-tinta-suave);text-transform:none}
.talla{border-radius:var(--r-campo);border:1.5px solid var(--t-linea);color:var(--t-tinta);font-family:var(--t-letra-texto);font-weight:500}
.talla:hover{border-color:var(--t-principal)}
.talla.sel{background:var(--t-principal);border-color:var(--t-principal);color:var(--t-sobre-principal)}
.talla.lista{background:var(--t-principal-hondo);border-color:var(--t-principal-hondo)}
.tallas.mirame{border-radius:var(--r-campo)}
.barra-fija{background:color-mix(in srgb,var(--t-fondo) 96%,transparent);border-top:1px solid var(--t-linea)}
.btn-grande{background:var(--t-principal);color:var(--t-sobre-principal);border-radius:999px;font-family:var(--t-letra-texto);
            font-weight:500;font-size:15.5px;letter-spacing:.01em;text-transform:none}
.btn-grande:active{background:var(--t-principal-hondo)}
.btn-borde,.btn-gps{border-radius:999px;border-color:var(--t-principal);color:var(--t-principal-hondo);font-family:var(--t-letra-texto);
            font-weight:500;letter-spacing:.01em;text-transform:none}
.btn-gps{background:var(--t-principal);color:var(--t-sobre-principal)}
.ficha-foto{border-radius:0 0 var(--r-caja) var(--r-caja);overflow:hidden;background-color:var(--t-principal-suave)}
.linea .mini{border-radius:10px}
.linea .n{font-family:var(--t-letra-titulos);font-size:18px;font-weight:600}
.cant{border-radius:999px;border-color:var(--t-linea);overflow:hidden}
.tot-fila.grande{color:var(--t-principal-hondo);font-family:var(--t-letra-titulos);font-size:24px;font-weight:600}
.campo input,.campo textarea,.campo select,.buscador input{border-radius:var(--r-campo);border-color:var(--t-linea);background:var(--t-fondo)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--t-principal);outline-offset:-1px}
.pago-op,.entrega-op,.tipo,.hoja-op{border-radius:var(--r-caja);border-color:var(--t-linea)}
.pago-op.sel,.entrega-op.sel,.tipo.sel,.hoja-op.puesta{border-color:var(--t-principal);background:var(--t-principal-suave)}
.pago-op input,.entrega-op input{accent-color:var(--t-principal)}
.hoja-caja{border-radius:22px 22px 0 0}
.hoja-caja h3{font-family:var(--t-letra-titulos);font-size:24px;font-weight:600;color:var(--t-principal-hondo)}
.toast{background:var(--t-principal-hondo);color:var(--t-fondo);border-radius:var(--r-caja)}
.ok-circ{background:var(--t-principal)}
.ok-caja h2{font-family:var(--t-letra-titulos);font-weight:500;font-size:34px;color:var(--t-principal-hondo)}
.ok-caja .ped{font-family:var(--t-letra-texto);font-weight:600;color:var(--t-principal)}
.conf-pago{border-radius:var(--r-caja);border-color:var(--t-linea)}
.compra{border-radius:var(--r-caja)}
.compra b,.compra .monto{font-family:var(--t-letra-titulos);font-weight:600;font-size:20px}
.compra .ver{font-family:var(--t-letra-texto);font-weight:500;letter-spacing:.01em;color:var(--t-principal)}
.pill{font-family:var(--t-letra-texto);border-radius:999px;letter-spacing:.02em}
.paso.actual .bolita{background:var(--t-principal);box-shadow:0 0 0 4px var(--t-principal-suave)}
.paso.actual .paso-txt{font-family:var(--t-letra-texto);font-weight:600;letter-spacing:0}
.ayuda{background:var(--t-principal-hondo);border-radius:var(--r-caja)}
.ped-guia{border-radius:var(--r-caja);border-color:var(--t-linea)}
.buscar-pedido,.compras-vacio{border-radius:var(--r-caja);border-color:var(--t-linea)}
.compras-vacio b,.buscar-pedido .bp-tit{font-family:var(--t-letra-titulos);font-weight:600;color:var(--t-principal-hondo)}
.instala-tarjeta{border-radius:22px 22px 0 0}
.ig-tarjeta{border-color:var(--t-principal);border-radius:var(--r-caja);color:var(--t-principal-hondo)}
.ig-tarjeta .ig-ico{color:var(--t-principal)}
.ig-tarjeta .ig-txt b{font-family:var(--t-letra-titulos);font-weight:600;font-size:18px;letter-spacing:0}
.ig-tarjeta .ig-btn{background:var(--t-principal);color:var(--t-sobre-principal);border-radius:999px;font-family:var(--t-letra-texto);
                    font-weight:500;letter-spacing:.01em}
.ig-tarjeta:hover,.ig-tarjeta:active{background:var(--t-principal);color:var(--t-sobre-principal)}
.ig-tarjeta:hover .ig-btn,.ig-tarjeta:active .ig-btn{background:var(--t-fondo);color:var(--t-principal-hondo)}
.vacio{color:var(--t-tinta-suave)}
/* Tipo oración también en lo que la base pinta en mayúscula sostenida. */
.toast.a-carrito .ir,.compra small,.ped-item .pi-n small,.gancho.envio-tag b{text-transform:none;letter-spacing:.01em}
.toast.a-carrito .ir{font-size:13px}
.zoom-pista{background:color-mix(in srgb,var(--t-principal-hondo) 85%,transparent);border-radius:999px;
            font-family:var(--t-letra-texto);letter-spacing:.01em;padding:5px 11px}
.elegida{border-radius:var(--r-campo);border-color:var(--t-principal)!important;background:var(--t-principal-suave)}
.elegida button{font-family:var(--t-letra-texto);text-transform:none;letter-spacing:.01em;color:var(--t-principal-hondo);font-size:13px}
.resultados{border-radius:var(--r-campo);border-color:var(--t-linea);overflow:hidden}
.error-caja{border-radius:var(--r-campo)}
.comanda{border-radius:var(--r-caja);border-color:var(--t-linea)}
.com-tit{font-family:var(--t-letra-texto);font-weight:500;font-size:12.5px;letter-spacing:.02em;text-transform:none;color:var(--t-tinta-suave)}
.ic{vertical-align:-3px;flex-shrink:0;color:var(--t-principal)}