/* ============================================================================
   Vintage Prime — hoja compartida por TODAS las páginas de la tienda.

   POR QUÉ EXISTE ESTE ARCHIVO Y NO SE REUSA web-publica/index.html
   ----------------------------------------------------------------
   La portada pública lleva la paleta MUERTA (--pink:#e8488c, --navy:#1e3a52)
   y carga Fredoka+Poppins desde fonts.googleapis.com. MARCA.md congeló la
   paleta de imprenta el 18-08-2026 y prohíbe el CDN de Google: es una
   dependencia externa, retrasa la primera pintada y le filtra la IP de la
   visitante a un tercero, justo lo contrario de lo que promete la política de
   privacidad ya publicada. Acá las fuentes se sirven locales.

   POR QUÉ EN UN ARCHIVO EXTERNO Y NO EN <style>
   ---------------------------------------------
   Mismo motivo que tienda.js: con CSS y JS externos la CSP de shopprueba
   queda en 'self' sin un solo hash. scripts/csp-hashes.py documenta que el
   primer intento con hashes dejó cuatro páginas sin JavaScript en silencio
   —200 en curl, cero errores visibles— porque el hash se calculó sobre los
   bytes con CRLF y el navegador lo calcula sobre el texto normalizado a LF.

   ORDEN DEL ARCHIVO
     1. Fuentes locales
     2. Tokens (paleta, derivados con su contraste medido, tipografía, ritmo)
     3. Base y utilidades
     4. Cabecera, contenedor y pie
     5. Bloques de la portada (hero, franjas, pasos)
     6. Vitrina: la tarjeta de prenda
     7. Estados: cargando, vacío, error, aviso flotante
     9. Navegación de la cabecera y páginas internas
    10. Formularios (campos, casillas, opciones de envío, buscador de comuna)
    11. Catálogo (barra, filtros en <dialog>)
    12. Ficha de prenda (galería, datos, medidas)
    13. Bolsa, checkout y resumen
    14. Pedido (línea de tiempo, transferencia) y cuenta
     8. Movimiento reducido e impresión (va al final para ganarle a todo)
   ========================================================================= */

/* ── 1. Fuentes locales ──────────────────────────────────────────────────
   Los .woff2 subsetidos viven en assets/fuentes/ (se generan desde los .ttf
   de pendon/fuentes/). Son exactamente cinco: NO existe Poppins-Regular, así
   que el texto corrido arranca en 500.
   font-display:swap porque en el navegador embebido de TikTok, con 3G real,
   el texto tiene que verse desde el primer frame aunque la fuente no haya
   llegado. Las pilas de respaldo son caras REALES instaladas en
   Windows/macOS/Android, no un "sans-serif" pelado: Impact y Arial Narrow son
   condensadas y sostienen el aire del titular mientras baja Anton. */
@font-face {
  font-family: "Anton";
  src: url("./fuentes/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("./fuentes/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fuentes/Poppins-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fuentes/Poppins-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("./fuentes/Poppins-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── 2. Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Paleta congelada (MARCA.md). No se toca: es la de imprenta, la única
     respaldada por vectoriales CMYK verificados y la que la clienta ve en
     persona en el pendón y en el cartel de transferencia. */
  --vp-noche:    #032443;
  --vp-magenta:  #D94591;
  --vp-turquesa: #35AFB0;
  --vp-amarillo: #F5CB2E;
  --vp-crema:    #FFF7E2;

  /* Derivados. Los ratios están MEDIDOS con la fórmula de luminancia relativa
     de WCAG 2.1, no estimados, porque los tres acentos de marca son claros y
     ninguno sirve como texto sobre crema tal cual:
        magenta  #D94591 sobre crema  3,77:1  ← reprueba AA en texto normal
        turquesa #35AFB0 sobre crema  2,48:1  ← reprueba
        amarillo #F5CB2E sobre crema  1,46:1  ← reprueba de lejos
     Por eso los acentos se usan como RELLENO (con noche encima) y para texto
     existen estas dos versiones oscurecidas, que se siguen leyendo como el
     color de marca. */
  --vp-magenta-osc: #B32A6E; /* 5,66:1 sobre crema · 6,05:1 sobre blanco · crema encima 5,66:1 */
  --vp-turq-osc:    #1C7B7C; /* 4,71:1 sobre crema · 5,03:1 sobre blanco */
  --vp-arena:       #F3E4C0; /* segundo nivel de fondo, tomado de /pago/ · noche encima 12,47:1 */
  --vp-atenuado:    #4A5F72; /* texto secundario · 6,20:1 sobre crema · 6,62:1 sobre blanco */
  --vp-atenuado-noche: #A9BACB; /* texto secundario sobre noche · 7,91:1 */
  --vp-linea:       #7E90A0; /* bordes de control · 3,08:1 sobre crema (WCAG 1.4.11 pide 3:1) */
  --vp-blanco:      #FFFFFF;

  /* Combinaciones que sí se usan, con su ratio medido:
       crema    sobre noche        14,70:1   texto del hero, cabecera y pie
       noche    sobre crema        14,70:1   texto corriente
       amarillo sobre noche        10,07:1   botón claro y rótulos sobre oscuro
       turquesa sobre noche         5,92:1   borde de la bolsa y subrayados
       noche    sobre turquesa      5,92:1   chip de talla
       noche    sobre amarillo     10,07:1   sello "reservada" y franja de entorno
       crema    sobre magenta-osc   5,66:1   botón principal
       noche    sobre arena        12,47:1   franjas de segundo nivel */

  /* Tipografía. Tres familias, tres trabajos:
       Anton   → el grito (marca y titulares). Condensada y pesada: aguanta el
                 ancho de un teléfono sin partirse en tres líneas.
       Bebas   → el precio y las etiquetas. Tiene aire de etiqueta de tienda,
                 que es exactamente lo que vende una prenda de fardo.
       Poppins → todo lo que se lee de verdad. Arranca en 500: no hay 400. */
  --vp-fuente-titular:  "Anton", Impact, "Haettenschweiler", "Arial Narrow", sans-serif;
  --vp-fuente-etiqueta: "Bebas Neue", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --vp-fuente-texto:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala con clamp(): el mínimo es lo que se ve en un teléfono de 320 px y
     el máximo lo que no se desarma en un monitor. Entre medio la tipografía
     acompaña el ancho sola, sin un solo media query. */
  --vp-t-xs:  clamp(0.72rem, 1.9vw, 0.78rem);
  --vp-t-sm:  clamp(0.82rem, 2.3vw, 0.9rem);
  --vp-t-md:  clamp(0.94rem, 2.7vw, 1.02rem);
  --vp-t-lg:  clamp(1.06rem, 3.2vw, 1.2rem);
  --vp-t-xl:  clamp(1.35rem, 5vw, 1.75rem);
  --vp-t-2xl: clamp(1.9rem, 7.5vw, 2.9rem);
  --vp-t-3xl: clamp(2.6rem, 12vw, 4.6rem);

  /* Ritmo. Una sola serie para todo: si un margen no está acá, está mal. */
  --vp-e1: 4px;
  --vp-e2: 8px;
  --vp-e3: 12px;
  --vp-e4: 16px;
  --vp-e5: 24px;
  --vp-e6: 32px;
  --vp-e7: clamp(40px, 8vw, 64px);
  --vp-e8: clamp(56px, 12vw, 96px);

  --vp-borde-pagina: clamp(14px, 4vw, 28px);
  --vp-ancho: 1120px;

  --vp-r-xs: 8px;
  --vp-r-sm: 12px;
  --vp-r-md: 16px;
  --vp-r-lg: 22px;
  --vp-r-pildora: 999px;

  /* La sombra dura (sin desenfoque, en color de marca) es la decisión
     estética que separa esto de una plantilla de e-commerce: es la sombra de
     un afiche serigrafiado, no la de una tarjeta de material design. */
  --vp-sombra-dura: 4px 4px 0 var(--vp-noche);
  --vp-sombra-dura-sm: 3px 3px 0 var(--vp-noche);
  --vp-sombra-suave: 0 12px 28px rgba(3, 36, 67, 0.14);

  /* Objetivo táctil mínimo. El tráfico entra por el navegador embebido de
     TikTok, en vertical y con el pulgar: 44 px no es una recomendación. */
  --vp-toque: 44px;

  /* La tienda es crema, punto. Sin tema oscuro a propósito: la marca vive en
     un solo fondo, y color-scheme:light evita que el modo oscuro del sistema
     invierta los campos del checkout. */
  color-scheme: light;
}

/* ── 3. Base y utilidades ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* Gana siempre: sin esto, un display:flex/grid deja visible un [hidden]. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh; /* la barra dinámica del navegador móvil deja de saltar */
  display: flex;
  flex-direction: column;
  font-family: var(--vp-fuente-texto);
  font-weight: 500;
  font-size: var(--vp-t-md);
  line-height: 1.55;
  color: var(--vp-noche);
  background-color: var(--vp-crema);
  /* Grano de papel: dos líneas de CSS, cero peticiones, y el fondo deja de
     ser una plancha de color plano. */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(3, 36, 67, 0.022) 0 1px,
    rgba(3, 36, 67, 0) 1px 3px
  );
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--vp-turq-osc); }
a:hover { color: var(--vp-magenta-osc); }

/* Foco visible en TODO lo enfocable, con el mismo lenguaje en las dos
   superficies: turquesa oscuro sobre crema, amarillo sobre noche. */
/* Foco visible en todo lo enfocable. Dos decisiones con su motivo:

   1. Van los longhands y no el atajo `outline:`. Con el atajo,
      getComputedStyle().outlineColor devolvía currentColor en Chrome headless
      aunque el anillo se pintara del color correcto (comprobado a pixel el
      18-08-2026). Pintaba bien, pero cualquier comprobación automática que
      mire el color computado daba un falso negativo, y la comprobación en
      navegador es justamente lo que sostiene este proyecto.
   2. NO se toca border-radius acá. El navegador ya redondea el anillo
      siguiendo el radio del elemento; forzarlo cambiaba la forma del botón al
      enfocarlo, que es un salto visual sin ninguna ganancia. */
:focus-visible {
  outline-width: 3px;
  outline-style: solid;
  outline-color: var(--vp-turq-osc);
  outline-offset: 3px;
}
.vp-sobre-noche :focus-visible,
.vp-cabecera :focus-visible,
.vp-pie :focus-visible {
  outline-color: var(--vp-amarillo);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* Solo para lectores de pantalla. */
.vp-oculto {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Enlace de salto: invisible hasta que el teclado lo enfoca. */
.vp-saltar {
  position: absolute; left: var(--vp-e3); top: -100px; z-index: 100;
  background: var(--vp-amarillo); color: var(--vp-noche);
  font-weight: 700; padding: 12px 18px; border-radius: var(--vp-r-sm);
  text-decoration: none;
}
.vp-saltar:focus { top: var(--vp-e3); }

.vp-contenedor {
  width: 100%;
  max-width: var(--vp-ancho);
  margin-inline: auto;
  padding-inline: var(--vp-borde-pagina);
  /* Segunda declaración: si el navegador no conoce env() ignora SOLO esta
     línea y se queda con la de arriba. En horizontal, el notch del iPhone se
     come el borde izquierdo si no. */
  padding-inline:
    calc(var(--vp-borde-pagina) + env(safe-area-inset-left, 0px))
    calc(var(--vp-borde-pagina) + env(safe-area-inset-right, 0px));
}

/* La regla tricolor: el elemento de marca que YA está en producción en
   /pago/. Se repite tal cual para que la tienda y el cartel de transferencia
   se vean del mismo negocio. */
.vp-tricolor {
  display: flex;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
}
.vp-tricolor > i { flex: 1; }
.vp-tricolor > i:nth-child(1) { background: var(--vp-magenta); }
.vp-tricolor > i:nth-child(2) { background: var(--vp-amarillo); }
.vp-tricolor > i:nth-child(3) { background: var(--vp-turquesa); }

/* Rótulo pequeño en versalitas: la etiqueta de sección. */
.vp-rotulo {
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vp-magenta-osc);
}
.vp-sobre-noche .vp-rotulo { color: var(--vp-amarillo); }

.vp-titular {
  font-family: var(--vp-fuente-titular);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.vp-bajada {
  color: var(--vp-atenuado);
  font-size: var(--vp-t-lg);
  max-width: 52ch;
}
.vp-sobre-noche .vp-bajada { color: var(--vp-atenuado-noche); }

.vp-fino { font-size: var(--vp-t-sm); color: var(--vp-atenuado); }
.vp-sobre-noche .vp-fino { color: var(--vp-atenuado-noche); }

/* Botones. El principal lleva la sombra dura: se ve apoyado sobre el papel,
   no flotando. Al presionarlo se hunde hasta tocar la hoja. */
.vp-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vp-e2);
  min-height: 52px; padding: 13px 26px;
  font-family: var(--vp-fuente-etiqueta);
  font-size: clamp(1rem, 3.2vw, 1.12rem);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--vp-r-pildora);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              background-color 0.16s ease, color 0.16s ease;
}
.vp-boton--principal {
  background: var(--vp-magenta-osc); color: var(--vp-crema);
  border-color: var(--vp-noche);
  box-shadow: var(--vp-sombra-dura-sm);
}
.vp-boton--secundario {
  background: transparent; color: var(--vp-noche);
  border-color: var(--vp-noche);
}
.vp-boton--secundario:hover { background: var(--vp-noche); color: var(--vp-crema); }
/* Sobre fondo noche el único acento que pasa AA con texto oscuro encima es el
   amarillo (10,07:1). El magenta ahí daría 3,90:1 y no sirve. */
.vp-boton--claro {
  background: var(--vp-amarillo); color: var(--vp-noche);
  border-color: var(--vp-amarillo);
}
.vp-boton--fantasma {
  background: transparent; color: var(--vp-crema);
  border-color: var(--vp-crema);
}
.vp-boton--fantasma:hover { background: var(--vp-crema); color: var(--vp-noche); }
.vp-boton:hover { transform: translate(-1px, -1px); }
.vp-boton--principal:hover { box-shadow: 5px 5px 0 var(--vp-noche); }
.vp-boton:active { transform: translate(2px, 2px); }
.vp-boton--principal:active { box-shadow: 0 0 0 var(--vp-noche); }
.vp-boton[disabled], .vp-boton[aria-disabled="true"] {
  opacity: 0.6; cursor: not-allowed; transform: none;
}

/* ── 4. Cabecera, contenido y pie ────────────────────────────────────────── */

/* Franja de entorno: shopprueba NO es la tienda. Se quita el día que esto se
   copie a www — una línea por HTML, ver tienda/LEEME.md. */
.vp-entorno {
  background: var(--vp-amarillo); color: var(--vp-noche);
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center;
  padding: 6px var(--vp-e3);
  padding-top: calc(6px + env(safe-area-inset-top, 0px));
}

.vp-cabecera {
  position: sticky; top: 0; z-index: 40;
  background: var(--vp-noche); color: var(--vp-crema);
  /* La regla tricolor como borde inferior, sin un elemento extra. */
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(
      90deg,
      var(--vp-magenta) 0 33.34%,
      var(--vp-amarillo) 33.34% 66.67%,
      var(--vp-turquesa) 66.67% 100%
    ) 1;
}
.vp-cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vp-e3);
  min-height: 60px;
  padding-block: var(--vp-e2);
}
.vp-marca {
  display: inline-flex; align-items: baseline; gap: 0.3em;
  font-family: var(--vp-fuente-titular);
  font-size: clamp(1.2rem, 5.2vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vp-crema);
  text-decoration: none;
  line-height: 1;
}
.vp-marca em { font-style: normal; color: var(--vp-magenta); }
.vp-marca:hover, .vp-marca:hover em { color: var(--vp-amarillo); }

/* Enlace a la bolsa. Desde que /bolsa existe es un <a href="/bolsa"> normal:
   funciona sin JavaScript y la página de la bolsa explica cuando está vacía. */
.vp-bolsa {
  position: relative;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--vp-e2);
  min-height: var(--vp-toque); padding: 8px 16px;
  border: 2px solid var(--vp-turquesa);
  border-radius: var(--vp-r-pildora);
  color: var(--vp-crema);
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-md);
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.vp-bolsa:hover { background: var(--vp-turquesa); color: var(--vp-noche); }
.vp-bolsa[aria-current="page"] { background: var(--vp-turquesa); color: var(--vp-noche); }
.vp-bolsa__icono { width: 20px; height: 20px; flex: none; }
.vp-bolsa__cuenta {
  min-width: 24px; height: 24px; padding: 0 6px;
  display: inline-grid; place-items: center;
  background: var(--vp-magenta); color: var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  font-family: var(--vp-fuente-texto);
  font-size: var(--vp-t-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.vp-principal { flex: 1 0 auto; width: 100%; }

.vp-seccion { padding-block: var(--vp-e7); }
.vp-seccion--apretada { padding-block: var(--vp-e6); }
.vp-seccion__cabeza {
  display: grid; gap: var(--vp-e2);
  margin-bottom: var(--vp-e5);
}
.vp-seccion__titulo {
  font-family: var(--vp-fuente-titular); font-weight: 400;
  font-size: var(--vp-t-2xl); line-height: 0.98;
  text-transform: uppercase;
}
.vp-seccion__titulo em { font-style: normal; color: var(--vp-magenta-osc); }

/* Franja de segundo nivel: arena sobre crema, con filete noche arriba y abajo
   para que se lea como un corte de papel y no como un div. */
.vp-franja {
  background: var(--vp-arena);
  border-block: 2px solid var(--vp-noche);
}
.vp-franja--noche {
  background: var(--vp-noche); color: var(--vp-crema);
}

.vp-pie {
  background: var(--vp-noche); color: var(--vp-crema);
  border-top: 3px solid var(--vp-magenta);
  margin-top: auto;
  padding-block: var(--vp-e7) var(--vp-e5);
  padding-bottom: calc(var(--vp-e5) + env(safe-area-inset-bottom, 0px));
}
.vp-pie__rejilla {
  display: grid; gap: var(--vp-e6);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .vp-pie__rejilla { grid-template-columns: 1.3fr 1fr 1fr; gap: var(--vp-e5); }
}
.vp-pie__titulo {
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-md);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vp-amarillo);
  margin-bottom: var(--vp-e2);
}
.vp-pie__lista { list-style: none; display: grid; }
/* Ni un solo style="" en el HTML: con la hoja externa y sin atributos de
   estilo, la CSP puede llevar style-src 'self' sin 'unsafe-inline'. */
.vp-pie__regla { margin: var(--vp-e3) 0; max-width: 160px; }
.vp-pie .vp-marca { font-size: clamp(1.15rem, 4.6vw, 1.5rem); }
/* Los enlaces del pie son objetivo táctil: en el pie es donde se pincha con
   el pulgar a ciegas, y dos enlaces legales pegados se tocan mal. */
.vp-pie a {
  display: inline-flex; align-items: center; min-height: var(--vp-toque);
  padding: 4px 0;
  color: var(--vp-crema);
  text-decoration: underline;
  text-decoration-color: var(--vp-turquesa);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.vp-pie a:hover { color: var(--vp-amarillo); text-decoration-color: var(--vp-amarillo); }
.vp-pie__legal {
  margin-top: var(--vp-e6);
  padding-top: var(--vp-e4);
  border-top: 1px solid rgba(255, 247, 226, 0.22);
  font-size: var(--vp-t-sm);
  color: var(--vp-atenuado-noche);
  display: grid; gap: var(--vp-e2);
}
/* En el bloque legal los enlaces van en línea con el texto: ahí un min-height
   de 44 px partiría el párrafo en escalones. */
.vp-pie__legal a { min-height: 0; padding: 0; }

/* Marcador de dato que todavía no existe. Mismo lenguaje que las páginas
   legales publicadas (mark.pendiente): amarillo, con borde, imposible de
   confundir con contenido terminado. Acá marca la identidad del vendedor, que
   legal/RESPONSABLE.md deja explícitamente sin definir. */
.vp-pendiente {
  background: var(--vp-amarillo); color: var(--vp-noche);
  font-weight: 700; font-size: 0.94em;
  padding: 2px 8px; border-radius: 7px;
  border: 2px solid #8A6704; /* amarillo oscurecido: el borde se ve sobre el amarillo */
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  overflow-wrap: anywhere;
}

/* ── 5. Bloques de la portada ────────────────────────────────────────────── */
.vp-hero {
  position: relative;
  background: var(--vp-noche); color: var(--vp-crema);
  overflow: hidden;
  padding-block: var(--vp-e8);
}
/* Toldo de feria: franjas diagonales apenas visibles. Es lo que separa el
   fondo oscuro de "un div azul". Cero peticiones. */
.vp-hero::before {
  content: "";
  position: absolute; inset: -20%;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 247, 226, 0.045) 0 22px,
    rgba(255, 247, 226, 0) 22px 62px
  );
  pointer-events: none;
}
.vp-hero__caja { position: relative; display: grid; gap: var(--vp-e4); justify-items: start; }
.vp-hero__marca {
  font-family: var(--vp-fuente-titular);
  font-size: var(--vp-t-3xl);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.vp-hero__marca span { display: block; }
.vp-hero__marca span:last-child { color: var(--vp-magenta); }
.vp-hero .vp-tricolor { width: min(220px, 60%); height: 6px; }
.vp-hero__lema {
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xl);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vp-amarillo);
  max-width: 22ch;
  line-height: 1.05;
}
/* Fila de botones. .vp-acciones sirve en cualquier sección; el hero la usa
   con su propio nombre porque ahí además separa del lema. */
.vp-acciones,
.vp-hero__acciones { display: flex; flex-wrap: wrap; gap: var(--vp-e3); margin-top: var(--vp-e4); }
.vp-hero__acciones { margin-top: var(--vp-e2); }
@media (min-width: 860px) {
  .vp-hero__caja { max-width: 48ch; }
}

/* Los tres pasos de "cómo funciona". El número va en Anton, grande y en
   arena: se lee como numeración de afiche, no como una viñeta. */
.vp-pasos {
  list-style: none;
  display: grid; gap: var(--vp-e4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .vp-pasos { grid-template-columns: repeat(3, 1fr); } }
.vp-paso {
  position: relative;
  background: var(--vp-crema);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-lg);
  box-shadow: var(--vp-sombra-dura);
  padding: var(--vp-e5) var(--vp-e4) var(--vp-e4);
  display: grid; gap: var(--vp-e2); align-content: start;
  overflow: hidden;
}
/* El numeral es decorativo (va aria-hidden, el orden ya lo da el <ol>), así
   que no le aplica el mínimo de contraste. Aun así va un tono más oscuro que
   el arena del fondo —1,59:1 en vez de 1,18:1— porque a 1,18 sencillamente no
   se veía y quedaba un hueco raro en la esquina. */
.vp-paso__n {
  position: absolute; top: 4px; right: 14px;
  font-family: var(--vp-fuente-titular);
  font-size: clamp(3rem, 12vw, 4.4rem);
  line-height: 1;
  color: #E2C384;
  pointer-events: none;
}
.vp-paso__titulo {
  position: relative;
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xl);
  letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.05;
}
.vp-paso__texto { position: relative; font-size: var(--vp-t-sm); color: var(--vp-atenuado); }

/* Lista de detalles con viñeta de marca dibujada en CSS: un cuadrado girado
   45°, del tamaño de un rombo de etiqueta. Sin SVG y sin fuente de iconos. */
.vp-lista-marcada { list-style: none; display: grid; gap: var(--vp-e3); }
.vp-lista-marcada li {
  display: grid; grid-template-columns: 18px 1fr; gap: var(--vp-e3);
  align-items: start;
  font-size: var(--vp-t-sm);
}
.vp-lista-marcada li::before {
  content: "";
  width: 12px; height: 12px; margin-top: 0.45em;
  background: var(--vp-turquesa);
  border: 2px solid var(--vp-noche);
  transform: rotate(45deg);
}

/* ── 6. Vitrina: la tarjeta de prenda ────────────────────────────────────
   El componente que sostiene todo el negocio. Reglas de la casa:
     · Foto cuadrada (1:1) con object-fit:cover: el pipeline de fotos de la
       etapa 2 entrega 1000×1000 y CONTRATO-SHOP §3.2 fija aspect-ratio 1/1.
     · Precio en Bebas y en magenta oscurecido (5,66:1): el color de marca que
       sí pasa AA como texto.
     · Toda la tarjeta es zona de toque (el ::after del enlace la cubre), pero
       el enlace accesible sigue siendo el título: el lector de pantalla lee
       "Chaqueta de mezclilla", no "enlace".
     · Dos columnas en el teléfono, y crece sola con auto-fill. */
.vp-vitrina {
  list-style: none;
  display: grid;
  gap: clamp(10px, 3vw, 20px);
  /* En 320 px caben 2 columnas de 140; en 360, 2 de 151. En escritorio se
     detiene en 210 y agrega columnas en vez de estirar las tarjetas. */
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 42vw, 210px), 1fr));
}

.vp-prenda {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--vp-blanco);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-md);
  box-shadow: var(--vp-sombra-dura-sm);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.vp-prenda:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--vp-noche); }
.vp-prenda:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--vp-noche); }
/* El foco vive en el enlace de adentro; el anillo se dibuja en la tarjeta
   entera para que se vea qué se va a abrir. */
.vp-prenda:focus-within { outline: 3px solid var(--vp-turq-osc); outline-offset: 3px; }
.vp-prenda .vp-prenda__enlace:focus-visible { outline: none; }

.vp-prenda__marco {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--vp-arena);
  border-bottom: 2px solid var(--vp-noche);
  overflow: hidden;
}
/* Sin aspect-ratio (WebView viejo) el marco colapsaría a 0 y la grilla se
   vería como una lista de títulos. El padding-top es el plan B de siempre. */
@supports not (aspect-ratio: 1 / 1) {
  .vp-prenda__marco { height: 0; padding-top: 100%; }
}
.vp-prenda__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.2s ease;
}
.vp-prenda:hover .vp-prenda__foto { transform: scale(1.04); }

/* Sin foto todavía: mejor un hueco honesto que el icono roto del navegador. */
.vp-prenda__sinfoto {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--vp-arena);
  color: var(--vp-atenuado);
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-sm);
  letter-spacing: 0.16em; text-transform: uppercase;
}

.vp-prenda__cuerpo {
  display: grid; gap: var(--vp-e2);
  align-content: start;
  padding: var(--vp-e3);
  flex: 1;
}
.vp-prenda__titulo {
  font-size: var(--vp-t-sm);
  font-weight: 600;
  line-height: 1.3;
  /* Dos líneas y corta: en una grilla, un título de cuatro líneas descuadra
     la fila entera. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vp-prenda__enlace { color: inherit; text-decoration: none; }
/* Zona de toque completa: el rectángulo estirado cubre la tarjeta. */
.vp-prenda__enlace::after { content: ""; position: absolute; inset: 0; }
.vp-prenda__enlace:hover { color: var(--vp-magenta-osc); }

.vp-prenda__precio {
  font-family: var(--vp-fuente-etiqueta);
  font-size: clamp(1.4rem, 5.4vw, 1.7rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--vp-magenta-osc);
  font-variant-numeric: tabular-nums;
}

.vp-prenda__chips { display: flex; flex-wrap: wrap; gap: var(--vp-e1) 6px; }
.vp-chip {
  display: inline-flex; align-items: center;
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  line-height: 1;
  padding: 5px 9px;
  border: 1.5px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-blanco);
  color: var(--vp-noche);
  white-space: nowrap;
}
.vp-chip--talla { background: var(--vp-turquesa); }   /* noche sobre turquesa: 5,92:1 */
.vp-chip--condicion { background: transparent; }
.vp-chip--marca { background: var(--vp-arena); }      /* noche sobre arena: 12,47:1 */

/* Estados de la prenda. La banda diagonal es deliberadamente ruidosa: en una
   grilla de piezas únicas, "vendida" tiene que verse desde lejos, o la
   clienta entra a la ficha solo para llevarse una decepción. */
.vp-prenda__sello {
  position: absolute; top: 15%; left: -32%;
  width: 164%;
  transform: rotate(-14deg);
  text-align: center;
  padding: 7px 0;
  font-family: var(--vp-fuente-etiqueta);
  font-size: clamp(0.95rem, 4vw, 1.2rem);
  letter-spacing: 0.22em; text-transform: uppercase;
  border-block: 2px solid var(--vp-noche);
  pointer-events: none;
}
.vp-prenda[data-estado="vendida"] .vp-prenda__foto { filter: grayscale(1) contrast(0.92); opacity: 0.72; }
.vp-prenda[data-estado="vendida"] .vp-prenda__sello { background: var(--vp-noche); color: var(--vp-crema); }
.vp-prenda[data-estado="vendida"] .vp-prenda__precio { color: var(--vp-atenuado); text-decoration: line-through; }
.vp-prenda[data-estado="reservada"] .vp-prenda__foto { filter: saturate(0.6); opacity: 0.85; }
.vp-prenda[data-estado="reservada"] .vp-prenda__sello { background: var(--vp-amarillo); color: var(--vp-noche); }

/* ── 7. Estados: cargando, vacío, error, aviso ───────────────────────────── */

/* Esqueleto. Ocupa EXACTAMENTE el alto de la tarjeta real (mismo marco 3:4,
   mismo padding) para que la grilla no salte cuando llegan los datos: el
   salto de layout es lo que hace que la gente toque lo que no quería. */
.vp-prenda--esqueleto { pointer-events: none; }
.vp-prenda--esqueleto .vp-prenda__marco { background: rgba(3, 36, 67, 0.08); }
.vp-hueso {
  background: linear-gradient(
    90deg,
    rgba(3, 36, 67, 0.08) 25%,
    rgba(3, 36, 67, 0.16) 37%,
    rgba(3, 36, 67, 0.08) 63%
  );
  background-size: 400% 100%;
  border-radius: var(--vp-r-xs);
  animation: vp-brillo 1.5s ease infinite;
}
.vp-hueso--titulo  { height: 0.95em; width: 92%; }
.vp-hueso--titulo2 { height: 0.95em; width: 62%; }
.vp-hueso--precio  { height: 1.5em;  width: 48%; }
.vp-hueso--chip    { height: 1.35em; width: 46px; border-radius: var(--vp-r-pildora); }
@keyframes vp-brillo {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.vp-estado {
  display: grid; gap: var(--vp-e3); justify-items: center;
  text-align: center;
  padding: clamp(28px, 8vw, 52px) var(--vp-e4);
  border: 2px dashed var(--vp-linea);
  border-radius: var(--vp-r-lg);
  background: rgba(255, 255, 255, 0.5);
}
.vp-estado__icono { width: 44px; height: 44px; color: var(--vp-turq-osc); }
.vp-estado__titulo {
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xl);
  letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.1;
}
.vp-estado__texto { color: var(--vp-atenuado); font-size: var(--vp-t-sm); max-width: 46ch; }
.vp-estado--error {
  border-style: solid;
  border-color: var(--vp-magenta-osc);
  background: rgba(179, 42, 110, 0.07);
}
.vp-estado--error .vp-estado__icono { color: var(--vp-magenta-osc); }

/* Aviso flotante. Vive en una región aria-live que tienda.js crea VACÍA al
   cargar: si la región nace junto con el texto, el lector de pantalla no
   anuncia nada. */
.vp-avisos {
  position: fixed; z-index: 60;
  left: 50%; bottom: var(--vp-e4);
  bottom: calc(var(--vp-e4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(92vw, 440px);
  display: grid; gap: var(--vp-e2);
  pointer-events: none;
}
.vp-aviso {
  display: flex; align-items: flex-start; gap: var(--vp-e3);
  background: var(--vp-noche); color: var(--vp-crema);
  border-radius: var(--vp-r-md);
  padding: 13px 16px;
  font-size: var(--vp-t-sm);
  line-height: 1.4;
  box-shadow: var(--vp-sombra-suave);
  animation: vp-entra-aviso 0.22s ease;
}
.vp-aviso--ok    { background: var(--vp-turq-osc); }
.vp-aviso--error { background: var(--vp-magenta-osc); }
.vp-aviso__icono { width: 20px; height: 20px; flex: none; margin-top: 1px; }
@keyframes vp-entra-aviso {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── 9. Navegación de la cabecera y páginas internas ─────────────────────── */

.vp-cabecera__nav { display: flex; align-items: center; gap: var(--vp-e2); }
.vp-cab-enlace {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--vp-e2);
  min-height: var(--vp-toque); min-width: var(--vp-toque);
  padding: 8px 12px;
  border-radius: var(--vp-r-pildora);
  color: var(--vp-crema);
  text-decoration: none;
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-md);
  letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color 0.16s ease, color 0.16s ease;
}
.vp-cab-enlace:hover { color: var(--vp-amarillo); }
.vp-cab-enlace[aria-current="page"] { color: var(--vp-amarillo); }
.vp-cab-icono { width: 20px; height: 20px; flex: none; }
/* En el teléfono la cabecera solo cabe con iconos. El texto NO se borra con
   display:none: se oculta como .vp-oculto para que el lector de pantalla siga
   leyendo "Catálogo", "Ingresar", "Bolsa". */
@media (max-width: 559px) {
  .vp-cab-texto {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .vp-cab-enlace { padding: 8px; }
  .vp-bolsa { padding: 8px 12px; }
  .vp-cabecera__nav { gap: var(--vp-e1); }
}

/* Página interna: título en Anton y migas. */
.vp-pagina { padding-block: var(--vp-e5) var(--vp-e7); }
.vp-pagina__cabeza { display: grid; gap: var(--vp-e2); margin-bottom: var(--vp-e5); }
.vp-pagina__titulo {
  font-family: var(--vp-fuente-titular); font-weight: 400;
  font-size: var(--vp-t-2xl); line-height: 0.98;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vp-pagina__titulo em { font-style: normal; color: var(--vp-magenta-osc); }
.vp-migas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--vp-e1) var(--vp-e2); font-size: var(--vp-t-xs); color: var(--vp-atenuado); }
.vp-migas li + li::before { content: "/"; margin-right: var(--vp-e2); color: var(--vp-linea); }
.vp-migas a { color: var(--vp-turq-osc); }

/* Bloque de contenido con borde y sombra dura: las secciones del checkout,
   la transferencia, la cuenta. */
.vp-panel {
  background: var(--vp-blanco);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-lg);
  box-shadow: var(--vp-sombra-dura);
  padding: var(--vp-e5) var(--vp-e4);
  display: grid; gap: var(--vp-e4);
  min-width: 0;
}
.vp-panel__titulo {
  display: flex; align-items: center; gap: var(--vp-e3);
  font-family: var(--vp-fuente-etiqueta); font-weight: 400;
  font-size: var(--vp-t-xl);
  letter-spacing: 0.05em; text-transform: uppercase;
  line-height: 1.05;
}
.vp-panel__n {
  flex: none;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--vp-amarillo); color: var(--vp-noche);   /* 10,07:1 */
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  font-size: var(--vp-t-lg);
  letter-spacing: 0;
}

/* Franjas de aviso dentro de la página (no flotantes). */
.vp-banner {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--vp-e3);
  align-items: start;
  padding: var(--vp-e4);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-md);
  background: var(--vp-arena); color: var(--vp-noche);       /* 12,47:1 */
  font-size: var(--vp-t-sm);
}
.vp-banner > svg { width: 22px; height: 22px; margin-top: 1px; }
.vp-banner__titulo { font-weight: 700; font-size: var(--vp-t-md); }
.vp-banner--alerta { background: var(--vp-amarillo); }       /* noche encima 10,07:1 */
.vp-banner--error  { background: var(--vp-magenta-osc); color: var(--vp-crema); }  /* 5,66:1 */
.vp-banner--ok     { background: var(--vp-turq-osc); color: var(--vp-blanco); }    /* 5,03:1 */
.vp-banner--error a, .vp-banner--ok a { color: inherit; }
.vp-banner__cuerpo { display: grid; gap: var(--vp-e2); min-width: 0; }

/* "Cargando…" de bloque, con la misma barra que los esqueletos. */
.vp-cargando {
  display: grid; gap: var(--vp-e3);
  padding: var(--vp-e5) 0;
}
.vp-cargando .vp-hueso { height: 1.1em; }
.vp-cargando .vp-hueso:nth-child(2) { width: 70%; }
.vp-cargando .vp-hueso:nth-child(3) { width: 45%; }

/* Botón que parece enlace (acciones secundarias dentro del texto). */
.vp-enlace-boton {
  display: inline-flex; align-items: center; gap: var(--vp-e1);
  min-height: var(--vp-toque);
  color: var(--vp-turq-osc);
  font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.vp-enlace-boton:hover { color: var(--vp-magenta-osc); }
.vp-boton--chico { min-height: var(--vp-toque); padding: 8px 16px; font-size: var(--vp-t-md); }
.vp-boton--ancho { width: 100%; }
.vp-boton__icono { width: 18px; height: 18px; flex: none; }

/* ── 10. Formularios ─────────────────────────────────────────────────────── */

.vp-form { display: grid; gap: var(--vp-e4); }
.vp-campo { display: grid; gap: 6px; min-width: 0; }
.vp-campo > label, .vp-etiqueta { font-weight: 600; font-size: var(--vp-t-sm); }
.vp-opcional { font-weight: 500; color: var(--vp-atenuado); }
.vp-campo__ayuda { font-size: var(--vp-t-xs); color: var(--vp-atenuado); }
.vp-campo__error {
  color: var(--vp-magenta-osc);               /* 5,66:1 sobre crema, 6,05:1 sobre blanco */
  font-size: var(--vp-t-sm); font-weight: 600;
}
.vp-campo__error::before { content: "! "; font-weight: 700; } /* el color no es el único indicador */

/* 16 px como mínimo: con menos, Safari de iPhone hace zoom al enfocar y la
   clienta pierde el formulario de vista. */
.vp-control {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid var(--vp-linea);                         /* 3,08:1 (WCAG 1.4.11) */
  border-radius: var(--vp-r-sm);
  background: var(--vp-blanco);
  color: var(--vp-noche);
  font-size: max(16px, 1rem);
  transition: border-color 0.16s ease;
}
.vp-control:hover { border-color: var(--vp-noche); }
.vp-control:focus-visible { border-color: var(--vp-turq-osc); outline-offset: 1px; }
.vp-control[aria-invalid="true"] { border-color: var(--vp-magenta-osc); }
.vp-control:disabled, .vp-control[readonly] { background: var(--vp-arena); cursor: not-allowed; }
textarea.vp-control { min-height: 88px; resize: vertical; }
select.vp-control { cursor: pointer; }

.vp-fila-campos { display: grid; gap: var(--vp-e3); grid-template-columns: 1fr; }
@media (min-width: 420px) {
  .vp-fila-campos--2 { grid-template-columns: 1fr 1fr; }
  .vp-fila-campos--calle { grid-template-columns: 1fr 7.5em; }
}

/* Casillas: el área de toque es la fila entera (label), no el cuadradito. */
.vp-check {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--vp-e3);
  align-items: start;
  min-height: var(--vp-toque);
  padding-block: 8px;
  font-size: var(--vp-t-sm);
  cursor: pointer;
}
.vp-check input {
  width: 22px; height: 22px; margin-top: 1px;
  accent-color: var(--vp-magenta-osc);
  cursor: pointer;
}
.vp-check .vp-campo__error { grid-column: 2; }

fieldset.vp-grupo { border: 0; min-width: 0; display: grid; gap: var(--vp-e3); }
fieldset.vp-grupo > legend { font-weight: 600; font-size: var(--vp-t-sm); margin-bottom: var(--vp-e2); padding: 0; }

/* Opciones de envío como tarjetas con radio. El estado elegido no depende
   solo del color: lleva borde noche, sombra dura y el radio marcado. */
.vp-opciones { display: grid; gap: var(--vp-e2); }
.vp-opcion {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--vp-e3);
  align-items: center;
  min-height: 60px;
  padding: 12px 14px;
  border: 2px solid var(--vp-linea);
  border-radius: var(--vp-r-md);
  background: var(--vp-blanco);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.vp-opcion:hover { border-color: var(--vp-noche); }
.vp-opcion input { width: 20px; height: 20px; accent-color: var(--vp-magenta-osc); cursor: pointer; }
.vp-opcion.is-elegida { border-color: var(--vp-noche); box-shadow: var(--vp-sombra-dura-sm); }
.vp-opcion__texto { display: grid; gap: 2px; font-size: var(--vp-t-sm); font-weight: 600; line-height: 1.3; }
.vp-opcion__detalle { font-weight: 500; font-size: var(--vp-t-xs); color: var(--vp-atenuado); }
.vp-opcion__precio {
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xl);
  color: var(--vp-magenta-osc);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Buscador de comuna y su lista de sugerencias. */
.vp-buscador { position: relative; display: grid; gap: 6px; }
.vp-sugerencias {
  list-style: none;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-sm);
  background: var(--vp-blanco);
  overflow: hidden;
  box-shadow: var(--vp-sombra-dura-sm);
}
.vp-sugerencias li + li { border-top: 1px solid var(--vp-linea); }
.vp-sugerencias__op {
  width: 100%;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px var(--vp-e3);
  min-height: var(--vp-toque);
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
}
.vp-sugerencias__op:hover, .vp-sugerencias__op:focus-visible { background: var(--vp-arena); }
.vp-sugerencias__op:focus-visible { outline-offset: -3px; }
.vp-sugerencias__region { font-weight: 500; font-size: var(--vp-t-xs); color: var(--vp-atenuado); }
.vp-sugerencias__nada { padding: 10px 14px; font-size: var(--vp-t-sm); color: var(--vp-atenuado); }

/* ── 11. Catálogo ────────────────────────────────────────────────────────── */

.vp-barra { display: grid; gap: var(--vp-e3); margin-bottom: var(--vp-e5); }
.vp-buscar { display: flex; gap: var(--vp-e2); }
.vp-buscar .vp-control { flex: 1; min-width: 0; }
.vp-barra__fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vp-e2); justify-content: space-between; }
.vp-barra__orden { display: flex; align-items: center; gap: var(--vp-e2); }
.vp-barra__orden .vp-control { width: auto; min-height: var(--vp-toque); padding-block: 6px; }
.vp-conteo { font-size: var(--vp-t-sm); color: var(--vp-atenuado); }

.vp-filtros-activos { display: flex; flex-wrap: wrap; gap: var(--vp-e2); list-style: none; }
.vp-chip-quitar {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--vp-toque);
  padding: 6px 12px;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-turquesa); color: var(--vp-noche);   /* 5,92:1 */
  font-size: var(--vp-t-xs); font-weight: 700;
}
.vp-chip-quitar svg { width: 14px; height: 14px; }
.vp-chip-quitar:hover { background: var(--vp-noche); color: var(--vp-crema); }

.vp-mas { display: flex; justify-content: center; margin-top: var(--vp-e6); }

/* <dialog> de filtros. En el teléfono sube desde abajo como hoja. */
.vp-dialogo {
  margin: auto;
  width: min(560px, calc(100vw - 24px));
  max-height: 88vh; max-height: 88dvh;
  padding: 0;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-lg);
  background: var(--vp-crema); color: var(--vp-noche);
  box-shadow: var(--vp-sombra-dura);
  overflow: hidden;
}
.vp-dialogo::backdrop { background: rgba(3, 36, 67, 0.55); }
.vp-dialogo--sin-modal[open] { position: fixed; inset: auto 0 0 0; z-index: 70; }
.vp-dialogo__form { display: flex; flex-direction: column; max-height: inherit; }
.vp-dialogo__cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: var(--vp-e3);
  padding: var(--vp-e3) var(--vp-e4);
  border-bottom: 2px solid var(--vp-noche);
}
.vp-dialogo__titulo {
  font-family: var(--vp-fuente-etiqueta); font-weight: 400;
  font-size: var(--vp-t-xl); letter-spacing: 0.05em; text-transform: uppercase;
}
.vp-dialogo__cerrar {
  display: inline-grid; place-items: center;
  width: var(--vp-toque); height: var(--vp-toque);
  border-radius: var(--vp-r-pildora);
}
.vp-dialogo__cerrar:hover { background: var(--vp-arena); }
.vp-dialogo__cerrar svg { width: 22px; height: 22px; }
.vp-dialogo__cuerpo { padding: var(--vp-e4); display: grid; gap: var(--vp-e5); overflow-y: auto; flex: 1; }
.vp-dialogo__pie {
  display: flex; gap: var(--vp-e2); justify-content: space-between;
  padding: var(--vp-e3) var(--vp-e4);
  padding-bottom: calc(var(--vp-e3) + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--vp-noche);
}
.vp-dialogo__pie .vp-boton { flex: 1; }
@media (max-width: 599px) {
  .vp-dialogo {
    margin: auto 0 0;
    width: 100%; max-width: 100%;
    border-radius: var(--vp-r-lg) var(--vp-r-lg) 0 0;
    border-bottom: 0;
  }
}

/* Chips de selección múltiple (talla, tipo, marca, sexo): checkbox real
   escondido + píldora visible. El foco se dibuja en la píldora. */
.vp-opciones-chip { display: flex; flex-wrap: wrap; gap: var(--vp-e2); }
.vp-toggle { position: relative; display: inline-flex; }
.vp-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vp-toggle span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--vp-toque);
  padding: 8px 14px;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-blanco);
  font-size: var(--vp-t-sm); font-weight: 600;
  cursor: pointer;
}
.vp-toggle input:checked + span { background: var(--vp-turquesa); }           /* noche encima 5,92:1 */
.vp-toggle input:checked + span::before { content: "\2713"; font-weight: 700; }  /* ✓ además del color */
.vp-toggle input:focus-visible + span { outline: 3px solid var(--vp-turq-osc); outline-offset: 3px; }
.vp-toggle__n { font-weight: 500; color: var(--vp-atenuado); font-size: var(--vp-t-xs); }

/* ── 12. Ficha de prenda ─────────────────────────────────────────────────── */

.vp-ficha { display: grid; gap: var(--vp-e5); }
@media (min-width: 860px) {
  .vp-ficha { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--vp-e6); align-items: start; }
  .vp-ficha__galeria { position: sticky; top: 84px; }
}

.vp-galeria { display: grid; gap: var(--vp-e2); }
/* El marco recorta el sello diagonal; el padding deja ver la sombra dura. */
.vp-galeria__marco { position: relative; overflow: hidden; padding: 0 4px 4px 0; }
.vp-galeria__pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-lg);
  background: var(--vp-arena);
  box-shadow: var(--vp-sombra-dura);
  scrollbar-width: none;
  list-style: none;
}
.vp-galeria__pista::-webkit-scrollbar { display: none; }
.vp-galeria__foto { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1 / 1; position: relative; }
@supports not (aspect-ratio: 1 / 1) {
  .vp-galeria__foto { height: 0; padding-top: 100%; }
}
.vp-galeria__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-galeria__minis { display: flex; gap: var(--vp-e2); overflow-x: auto; list-style: none; padding: 4px 2px 6px; }
.vp-galeria__mini {
  flex: 0 0 64px; width: 64px; height: 64px;
  border: 2px solid var(--vp-linea);
  border-radius: var(--vp-r-xs);
  overflow: hidden;
  background: var(--vp-arena);
}
.vp-galeria__mini img { width: 100%; height: 100%; object-fit: cover; }
.vp-galeria__mini[aria-current="true"] { border-color: var(--vp-noche); box-shadow: var(--vp-sombra-dura-sm); }
.vp-galeria .vp-prenda__sello { z-index: 2; }
.vp-galeria[data-estado="vendida"] img { filter: grayscale(1); }
.vp-galeria[data-estado="vendida"] .vp-prenda__sello { background: var(--vp-noche); color: var(--vp-crema); }
.vp-galeria[data-estado="reservada"] .vp-prenda__sello,
.vp-galeria[data-estado="no_disponible"] .vp-prenda__sello { background: var(--vp-amarillo); color: var(--vp-noche); }

.vp-ficha__info { display: grid; gap: var(--vp-e4); align-content: start; min-width: 0; }
.vp-ficha__titulo {
  font-family: var(--vp-fuente-titular); font-weight: 400;
  font-size: var(--vp-t-2xl); line-height: 1;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vp-ficha__precio {
  font-family: var(--vp-fuente-etiqueta);
  font-size: clamp(2.2rem, 10vw, 3rem);
  line-height: 1;
  color: var(--vp-magenta-osc);
  font-variant-numeric: tabular-nums;
}
.vp-ficha__estado {
  justify-self: start;
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-md);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 12px;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-amarillo); color: var(--vp-noche);
}
.vp-ficha__estado--vendida { background: var(--vp-noche); color: var(--vp-crema); }
.vp-ficha__acciones { display: grid; gap: var(--vp-e2); }
.vp-ficha__nota { font-size: var(--vp-t-xs); color: var(--vp-atenuado); }

/* Condición y descripción: visibles SIEMPRE, sin acordeón (Ley 19.496 art. 14). */
.vp-condicion {
  display: grid; gap: var(--vp-e2);
  padding: var(--vp-e4);
  background: var(--vp-arena);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-md);
}
.vp-condicion__valor { font-family: var(--vp-fuente-etiqueta); font-size: var(--vp-t-xl); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.vp-descripcion { white-space: pre-line; font-size: var(--vp-t-sm); }

.vp-datos { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--vp-e4); font-size: var(--vp-t-sm); }
.vp-datos dt { color: var(--vp-atenuado); }
.vp-datos dd { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }

.vp-subtitulo {
  font-family: var(--vp-fuente-etiqueta); font-weight: 400;
  font-size: var(--vp-t-lg);
  letter-spacing: 0.1em; text-transform: uppercase;
}

.vp-tabla { width: 100%; border-collapse: collapse; font-size: var(--vp-t-sm); }
.vp-tabla caption { text-align: left; }
.vp-tabla th, .vp-tabla td { padding: 8px 6px; border-bottom: 1px solid var(--vp-linea); text-align: left; }
.vp-tabla td { font-weight: 600; font-variant-numeric: tabular-nums; }
.vp-tabla th { font-weight: 500; color: var(--vp-atenuado); }

.vp-envio-calc { display: grid; gap: var(--vp-e3); }
.vp-envio-calc__resultado { display: grid; gap: var(--vp-e2); }
.vp-lista-envio { list-style: none; display: grid; gap: var(--vp-e2); }
.vp-lista-envio li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--vp-e3);
  padding: 10px 12px;
  border: 1.5px solid var(--vp-linea);
  border-radius: var(--vp-r-sm);
  background: var(--vp-blanco);
  font-size: var(--vp-t-sm);
}
.vp-lista-envio strong { font-family: var(--vp-fuente-etiqueta); font-weight: 400; font-size: var(--vp-t-lg); color: var(--vp-magenta-osc); white-space: nowrap; }

/* ── 13. Bolsa, checkout y resumen ───────────────────────────────────────── */

.vp-items { list-style: none; display: grid; gap: var(--vp-e3); }
.vp-item {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--vp-e3);
  align-items: center;
  padding: var(--vp-e3);
  background: var(--vp-blanco);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-md);
}
.vp-item__mini {
  width: 72px; height: 72px;
  object-fit: cover;
  border: 1.5px solid var(--vp-noche);
  border-radius: var(--vp-r-xs);
  background: var(--vp-arena);
}
.vp-item__datos { display: grid; gap: 2px; min-width: 0; }
.vp-item__titulo { font-weight: 600; font-size: var(--vp-t-sm); line-height: 1.3; overflow-wrap: anywhere; }
.vp-item__titulo a { color: inherit; text-decoration: none; }
.vp-item__titulo a:hover { color: var(--vp-magenta-osc); text-decoration: underline; }
.vp-item__meta { font-size: var(--vp-t-xs); color: var(--vp-atenuado); }
.vp-item__precio { font-family: var(--vp-fuente-etiqueta); font-size: var(--vp-t-lg); color: var(--vp-magenta-osc); line-height: 1.1; }
.vp-item__quitar {
  display: inline-grid; place-items: center;
  width: var(--vp-toque); height: var(--vp-toque);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-blanco);
  transition: background-color 0.16s ease, color 0.16s ease;
}
.vp-item__quitar:hover { background: var(--vp-noche); color: var(--vp-crema); }
.vp-item__quitar svg { width: 18px; height: 18px; }
.vp-item--volo { background: var(--vp-arena); border-style: dashed; }
.vp-item--volo .vp-item__mini { filter: grayscale(1); opacity: 0.7; }
.vp-item--volo .vp-item__precio { color: var(--vp-atenuado); text-decoration: line-through; }
.vp-volo {
  justify-self: start;
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-sm);
  letter-spacing: 0.16em;
  padding: 2px 10px;
  background: var(--vp-noche); color: var(--vp-crema);       /* 14,70:1 */
  border-radius: var(--vp-r-pildora);
}
.vp-item--compacto { grid-template-columns: 56px minmax(0, 1fr) auto; border-width: 1.5px; padding: var(--vp-e2); }
.vp-item--compacto .vp-item__mini { width: 56px; height: 56px; }

/* Barra fija inferior (bolsa): el botón de continuar siempre a mano del pulgar. */
.vp-barra-fija {
  position: sticky; bottom: 0; z-index: 30;
  margin-top: var(--vp-e5);
  background: var(--vp-crema);
  border-top: 2px solid var(--vp-noche);
  padding: var(--vp-e3) 0;
  padding-bottom: calc(var(--vp-e3) + env(safe-area-inset-bottom, 0px));
}
.vp-barra-fija__fila { display: flex; align-items: center; justify-content: space-between; gap: var(--vp-e3); }
.vp-barra-fija__total { display: grid; line-height: 1.15; }
.vp-barra-fija__total strong { font-family: var(--vp-fuente-etiqueta); font-weight: 400; font-size: var(--vp-t-xl); color: var(--vp-magenta-osc); }
.vp-barra-fija .vp-boton { flex: 0 1 auto; }

.vp-resumen { display: grid; gap: var(--vp-e2); }
.vp-resumen__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--vp-e3); font-size: var(--vp-t-sm); }
.vp-resumen__fila span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.vp-resumen__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--vp-e3);
  border-top: 2px solid var(--vp-noche);
  padding-top: var(--vp-e2);
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-xl);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.vp-resumen__total [data-vp-total] { color: var(--vp-magenta-osc); font-variant-numeric: tabular-nums; }

.vp-checkout { display: grid; gap: var(--vp-e5); }
.vp-checkout__principal, .vp-checkout__lado { display: grid; gap: var(--vp-e5); align-content: start; min-width: 0; }
@media (min-width: 960px) {
  .vp-checkout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
  .vp-checkout__lado { position: sticky; top: 84px; }
}
.vp-legal-chico { font-size: var(--vp-t-xs); color: var(--vp-atenuado); }

/* ── 14. Pedido y cuenta ─────────────────────────────────────────────────── */

.vp-pedido { display: grid; gap: var(--vp-e5); }
@media (min-width: 960px) {
  .vp-pedido--doble { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
}
.vp-pedido__col { display: grid; gap: var(--vp-e5); align-content: start; min-width: 0; }

.vp-estado-pedido {
  justify-self: start;
  display: inline-flex; align-items: center; gap: var(--vp-e2);
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-lg);
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 14px;
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-amarillo); color: var(--vp-noche);
}
.vp-estado-pedido[data-valor="pagado"],
.vp-estado-pedido[data-valor="preparando"],
.vp-estado-pedido[data-valor="enviado"],
.vp-estado-pedido[data-valor="entregado"] { background: var(--vp-turquesa); }          /* 5,92:1 */
.vp-estado-pedido[data-valor="vencido"],
.vp-estado-pedido[data-valor="cancelado"] { background: var(--vp-noche); color: var(--vp-crema); }

.vp-linea-tiempo { list-style: none; display: grid; }
.vp-hito { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: var(--vp-e3); padding-bottom: var(--vp-e4); }
.vp-hito::before {
  content: ""; position: absolute;
  left: 14px; top: 30px; bottom: 0; width: 2px;
  background: var(--vp-linea);
}
.vp-hito:last-child { padding-bottom: 0; }
.vp-hito:last-child::before { display: none; }
.vp-hito__punto {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 2px solid var(--vp-linea);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-crema);
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-sm);
}
.vp-hito__punto svg { width: 16px; height: 16px; }
.vp-hito--hecho::before { background: var(--vp-noche); }
.vp-hito--hecho .vp-hito__punto { background: var(--vp-turquesa); border-color: var(--vp-noche); }
.vp-hito--actual .vp-hito__punto { background: var(--vp-amarillo); border-color: var(--vp-noche); }
.vp-hito__texto { display: grid; gap: 2px; padding-top: 3px; }
.vp-hito__titulo { font-weight: 600; font-size: var(--vp-t-sm); }
.vp-hito--pendiente .vp-hito__titulo { color: var(--vp-atenuado); }
.vp-hito--actual .vp-hito__titulo { font-weight: 700; }
.vp-hito__fecha { font-size: var(--vp-t-xs); color: var(--vp-atenuado); }

.vp-referencia-caja {
  display: grid; gap: var(--vp-e2);
  padding: var(--vp-e4);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-md);
  background: var(--vp-amarillo); color: var(--vp-noche);   /* 10,07:1 */
}
.vp-referencia {
  font-family: var(--vp-fuente-titular);
  font-size: var(--vp-t-2xl);
  letter-spacing: 0.04em;
  line-height: 1;
}
.vp-monto { font-family: var(--vp-fuente-etiqueta); font-size: var(--vp-t-2xl); line-height: 1; color: var(--vp-magenta-osc); font-variant-numeric: tabular-nums; }
.vp-fila-acciones { display: flex; flex-wrap: wrap; gap: var(--vp-e2); align-items: center; }

.vp-cuentas { list-style: none; display: grid; gap: var(--vp-e3); }
.vp-cuenta-banco {
  display: grid; gap: var(--vp-e3);
  padding: var(--vp-e4);
  border: 2px dashed var(--vp-noche);
  border-radius: var(--vp-r-md);
  background: var(--vp-crema);
}
.vp-cuenta-banco__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--vp-e2); flex-wrap: wrap; }
.vp-cuenta-banco__banco { font-family: var(--vp-fuente-etiqueta); font-size: var(--vp-t-xl); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; }
.vp-cuenta-banco__marca {
  font-size: var(--vp-t-xs); font-weight: 700;
  padding: 2px 10px;
  border: 1.5px solid var(--vp-noche);
  border-radius: var(--vp-r-pildora);
  background: var(--vp-turquesa); color: var(--vp-noche);
}

.vp-pestanas { display: flex; gap: var(--vp-e1); border-bottom: 2px solid var(--vp-noche); }
.vp-pestana {
  min-height: var(--vp-toque);
  padding: 10px 16px;
  margin-bottom: -2px;
  border: 2px solid transparent; border-bottom: 0;
  border-radius: var(--vp-r-sm) var(--vp-r-sm) 0 0;
  font-family: var(--vp-fuente-etiqueta);
  font-size: var(--vp-t-lg);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vp-atenuado);
}
.vp-pestana[aria-selected="true"] { background: var(--vp-blanco); border-color: var(--vp-noche); color: var(--vp-noche); }

.vp-lista-pedidos { list-style: none; display: grid; gap: var(--vp-e3); }
.vp-fila-pedido {
  width: 100%;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--vp-e3);
  align-items: center;
  padding: var(--vp-e3);
  text-align: left;
  background: var(--vp-blanco);
  border: 2px solid var(--vp-noche);
  border-radius: var(--vp-r-md);
  color: var(--vp-noche);
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.vp-fila-pedido:hover { transform: translate(-1px, -1px); box-shadow: var(--vp-sombra-dura-sm); color: var(--vp-noche); }
.vp-fila-pedido img, .vp-fila-pedido__sinfoto { width: 56px; height: 56px; object-fit: cover; border-radius: var(--vp-r-xs); background: var(--vp-arena); border: 1.5px solid var(--vp-noche); }
.vp-fila-pedido__datos { display: grid; gap: 2px; min-width: 0; font-size: var(--vp-t-sm); }
.vp-fila-pedido__ref { font-family: var(--vp-fuente-etiqueta); font-size: var(--vp-t-lg); letter-spacing: 0.05em; line-height: 1.1; }
.vp-fila-pedido__total { font-family: var(--vp-fuente-etiqueta); font-size: var(--vp-t-lg); color: var(--vp-magenta-osc); white-space: nowrap; }

.vp-angosto { max-width: 560px; margin-inline: auto; }

/* Huecos entre bloques que el JS llena o deja vacíos. */
[data-vp-pausa] { padding-top: var(--vp-e4); }
[data-vp-oferta] { margin-top: var(--vp-e5); }
[data-vp-nuevo]:not(:empty),
[data-vp-avisos-checkout]:not(:empty),
[data-vp-aviso-volo]:not(:empty) { margin-bottom: var(--vp-e5); }
.vp-pagina > .vp-pagina__titulo { margin-bottom: var(--vp-e4); }
.vp-item__mini, .vp-fila-pedido__sinfoto { display: block; }
.vp-hito[aria-current="step"] .vp-hito__titulo { font-weight: 700; }
.vp-banner .vp-lista-marcada { margin-top: var(--vp-e1); }

/* ── 8. Movimiento reducido e impresión ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Los transform de hover/active se ANULAN, no se aceleran: si solo se
     acorta la transición, el salto sigue ocurriendo, más brusco. */
  .vp-boton:hover, .vp-boton:active,
  .vp-prenda:hover, .vp-prenda:active { transform: none; }
  .vp-prenda:hover .vp-prenda__foto { transform: none; }
  .vp-fila-pedido:hover { transform: none; }
  .vp-galeria__pista { scroll-behavior: auto; }
  /* El esqueleto se queda en un gris quieto: sigue diciendo "esto está
     cargando" sin una sola animación. */
  .vp-hueso { animation: none; background: rgba(3, 36, 67, 0.1); }
}

@media print {
  .vp-cabecera, .vp-entorno, .vp-avisos, .vp-saltar, .vp-barra-fija { display: none !important; }
  .vp-hero::before { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .vp-prenda, .vp-paso { box-shadow: none; }
}