/*
  public/css/vitrina.css — La vitrina estilo Mercado Libre (ADR-107).

  Estructura de Mercado Libre, colores de Happy Live: la paleta clara de la
  Oficina, unificada en las cuatro caras de la tienda. Todo cuelga de los
  tokens --v-*; una página que necesite otro fondo los redefine en su :root
  (el ERP los mapea a sus variables, ver public/css/app.css).
  Móvil primero: dos columnas en el teléfono, más en pantallas anchas.
*/
:root {
  /* Color de marca y superficies. Los hex viven SOLO aquí (ADR-108):
     oficina.html, tienda.html y mi-tienda.html los alias-an.
     Paleta «Turquesa del logo» (ADR-108 D3): el cian del logo es --v-marca-viva
     y solo pinta superficies e íconos; --v-marca es el mismo cian llevado a
     4.5:1 con blanco, para texto y botones; --v-marca-tinta va sobre fondo claro. */
  --v-marca: #08838f;
  --v-marca-viva: #0aa0b0;
  --v-marca-tinta: #087280;
  --v-marca-suave: #ddf4f6;
  --v-sobre-marca: #ffffff;
  --v-sobre-marca-2: #d4f0f3;
  --v-cabecera: var(--v-marca);
  --v-sobre-cabecera: #ffffff;
  --v-sobre-cabecera-2: #d4f0f3;
  --v-cabecera-campo: #ffffff;
  --v-cabecera-velo-1: rgba(255, 255, 255, .14);
  --v-cabecera-velo-2: rgba(255, 255, 255, .28);
  --v-cabecera-velo-3: rgba(255, 255, 255, .45);
  --v-acento: #c95300;
  --v-sobre-acento: #ffffff;
  --v-acento-suave: #f8e4d6;
  --v-sobre-estado: #ffffff;
  --v-sobre-imagen: #ffffff;
  --v-sobre-imagen-2: #d4f0f3;
  --v-fondo: #f4fafa;
  --v-superficie: #ffffff;
  --v-superficie-2: #eaf4f5;
  --v-vidrio: rgba(255, 255, 255, .94);
  --v-tinta: #10201f;
  --v-tinta-2: #4f6366;
  --v-tinta-3: #6e8386;
  --v-linea: #d6e4e5;
  --v-linea-b: #b4c9cb;
  --v-ok: #2c7a50;
  --v-ok-suave: #dff0e6;
  --v-aviso: #9c6412;
  --v-aviso-suave: #faeeda;
  --v-crit: #b23a2b;
  --v-crit-suave: #fae4e1;
  --v-velo: rgba(16, 32, 31, .45);
  --v-video: #000000;
  --v-oro: #b8860b;
  --v-plata: #7d8a92;
  --v-bronce: #a0522d;
  /* Academia: el reproductor y el cuaderno de notas. */
  --v-pl-navy: #173a5c;
  --v-pl-green: #1fa64a;
  --v-pl-blue: #2f80ed;
  --v-sobre-pl: #ffffff;
  --v-papel: #fffdf6;
  --v-papel-tinta: #1f2a37;
  --v-papel-borde: #e3dcc6;
  --v-papel-renglon: #d7e4ef;
  --v-papel-margen: rgba(229, 86, 106, .5);
  /* Academia (ADR-131): el color de cada escuela —una clave cerrada, nunca un
     hex de la base— y los círculos de los niveles alcanzados, que alternan
     azul y naranja como en el tablero de la Academia. */
  --v-escuela-verde: #2f7d36;
  --v-escuela-petroleo: #1a6580;
  --v-escuela-morado: #8e2a8c;
  --v-escuela-naranja: #b5541c;
  --v-escuela-azul: #1a6fa6;
  --v-escuela-rojo: #b3302b;
  --v-nivel-a: #1878ad;
  --v-nivel-b: #b9531a;
  --v-sobre-escuela: #ffffff;
  /* Escalas: espaciado 4/8, radios, elevación, tipografía, íconos, movimiento. */
  --v-sp-1: 4px; --v-sp-2: 8px; --v-sp-3: 12px; --v-sp-4: 16px; --v-sp-5: 24px; --v-sp-6: 32px;
  --v-r-sm: 6px; --v-r: 10px; --v-r-lg: 16px; --v-r-pill: 999px;
  --v-sh-1: 0 1px 2px rgba(16, 32, 31, .06);
  --v-sh-2: 0 4px 14px rgba(16, 32, 31, .18);
  --v-sh-3: 0 14px 34px -18px rgba(16, 32, 31, .45);
  --v-fs-1: 12px; --v-fs-2: 14px; --v-fs-3: 16px; --v-fs-4: 18px; --v-fs-5: 22px; --v-fs-6: 28px;
  --v-ico-sm: 18px; --v-ico: 22px; --v-ico-lg: 28px;
  --v-dur-1: 120ms; --v-dur-2: 200ms; --v-dur-3: 320ms;
  /* Curvas: lo que llega frena al final; lo que se va acelera al salir. */
  --v-ease-llega: cubic-bezier(.2, .7, .3, 1);
  --v-ease-se-va: cubic-bezier(.4, 0, 1, 1);
}

/* «Reducir movimiento»: la vitrina tampoco se mueve, ni en la Oficina ni en
   la tienda pública. */
@media (prefers-reduced-motion: reduce) {
  .v-bottom-btn, .v-cat, .v-agregar, .v-boton, .v-atajo, .v-hdr-acciones button { transition: none; }
  .v-bottom-btn:active, .v-agregar:active, .v-boton:active, .v-atajo:active { transform: none; }
  .v-banners-pista { scroll-behavior: auto; }
}

/* Modo oscuro (ADR-108 D4): solo se remapean los tokens; el ERP no pasa por
   aquí porque .vitrina-erp (app.css) impone su propio tema. Cada pareja de
   texto/fondo se midió a 4.5:1 o más. */
@media (prefers-color-scheme: dark) {
  :root {
    --v-marca: #3fc1cf;
    --v-marca-viva: #3fc1cf;
    --v-marca-tinta: #6ad3de;
    --v-marca-suave: #1e3a3f;
    --v-sobre-marca: #0f1a1c;
    --v-sobre-marca-2: #6ad3de;
    --v-cabecera: #172629;
    --v-sobre-cabecera: #e8f1f1;
    --v-sobre-cabecera-2: #9fb3b5;
    --v-cabecera-campo: #0f1a1c;
    --v-cabecera-velo-1: rgba(232, 241, 241, .10);
    --v-cabecera-velo-2: rgba(232, 241, 241, .22);
    --v-cabecera-velo-3: rgba(232, 241, 241, .40);
    --v-acento: #ff8a3d;
    --v-sobre-acento: #0f1a1c;
    --v-acento-suave: rgba(255, 138, 61, .28);
    --v-sobre-estado: #0f1a1c;
    --v-fondo: #0f1a1c;
    --v-superficie: #172629;
    --v-superficie-2: #1e3034;
    --v-vidrio: rgba(23, 38, 41, .94);
    --v-tinta: #e8f1f1;
    --v-tinta-2: #9fb3b5;
    --v-tinta-3: #6f8487;
    --v-linea: #243538;
    --v-linea-b: #31474b;
    --v-ok: #5fcb8a;
    --v-ok-suave: #173a29;
    --v-aviso: #e0b15c;
    --v-aviso-suave: #3a2e12;
    --v-crit: #f08b7c;
    --v-crit-suave: #3d1f1b;
    --v-velo: rgba(0, 0, 0, .6);
    --v-oro: #e0b84a;
    --v-plata: #b8c2c9;
    --v-bronce: #d08a4a;
    --v-papel: #1e2a2e;
    --v-papel-tinta: #e8e2d6;
    --v-papel-borde: #3a4448;
    --v-papel-renglon: #2e3b40;
    --v-sh-1: 0 1px 2px rgba(0, 0, 0, .4);
    --v-sh-2: 0 4px 14px rgba(0, 0, 0, .5);
    --v-sh-3: 0 14px 34px -18px rgba(0, 0, 0, .7);
  }
}

.v-ico { width: var(--v-ico); height: var(--v-ico); flex: 0 0 auto; }
/* Ícono en línea con el texto (la Oficina fuera de la tienda). */
.ico { width: 1.1em; height: 1.1em; vertical-align: -.2em; display: inline-block; flex: 0 0 auto; }
/* Foco visible en todo control de la vitrina (ADR-108 D6); el anillo es el cian vivo del logo. */
.v-bottom-btn:focus-visible, .v-cat:focus-visible, .v-agregar:focus-visible, .v-boton:focus-visible, .v-atajo:focus-visible,
.v-hdr-acciones button:focus-visible, .v-hoja button:focus-visible, .v-card:focus-visible, .v-buscador input:focus-visible,
.v-ficha button:focus-visible, .v-cart button:focus-visible, .v-co button:focus-visible { outline: 2px solid var(--v-marca-viva); outline-offset: 2px; }
.v-bottom-btn, .v-cat, .v-agregar, .v-boton, .v-atajo, .v-hdr-acciones button { transition: background-color var(--v-dur-1), color var(--v-dur-1), opacity var(--v-dur-1), transform var(--v-dur-1); }
.v-bottom-btn:active, .v-agregar:active, .v-boton:active, .v-atajo:active { transform: scale(.97); }

/* ─── Encabezado ─── */
.v-hdr { background: var(--v-cabecera); color: var(--v-sobre-cabecera); padding: .75rem 1rem 0; }
.v-hdr-fila { display: flex; align-items: center; gap: .6rem; }
.v-hdr > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.v-bottom { max-width: 100%; }
.v-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; border-radius: 50%; background: var(--v-cabecera-campo); color: var(--v-marca); font-weight: 700; font-size: .8rem; overflow: hidden; flex: 0 0 auto; }
.v-logo img { width: 38px; height: 38px; object-fit: contain; }
.v-logo img + .v-logo-txt { display: none; }
.v-buscador { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; background: var(--v-cabecera-campo); border-radius: 999px; padding: 0 .9rem; height: 40px; color: var(--v-tinta-3); }
.v-buscador input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: .9rem; color: var(--v-tinta); height: 100%; }
.v-buscador input::-webkit-search-cancel-button { cursor: pointer; }
.v-buscador:focus-within { box-shadow: 0 0 0 2px var(--v-sobre-marca-2); }
.v-hdr-acciones { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.v-hdr-acciones button { background: transparent; border: 1px solid var(--v-cabecera-velo-3); color: var(--v-sobre-cabecera); border-radius: 999px; padding: .35rem .75rem; font: inherit; font-size: .78rem; cursor: pointer; white-space: nowrap; }
.v-hdr-acciones button.primario { background: var(--v-cabecera-campo); color: var(--v-marca-tinta); border-color: var(--v-cabecera-campo); font-weight: 600; }
.v-hdr-acciones .v-saludo { font-size: .8rem; color: var(--v-sobre-cabecera-2); white-space: nowrap; }
.v-ubicacion { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--v-sobre-marca-2); margin: .55rem 0 .1rem; }
.v-ubicacion .v-ico { width: 16px; height: 16px; }
.v-cats { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; margin-top: .35rem; }
.v-cats::-webkit-scrollbar { display: none; }
.v-cat { flex: 0 0 auto; background: none; border: 0; border-bottom: 3px solid transparent; color: var(--v-sobre-cabecera-2); font: inherit; font-size: .9rem; padding: .5rem 0 .45rem; cursor: pointer; white-space: nowrap; }
.v-cat.on { color: var(--v-sobre-cabecera); font-weight: 600; border-bottom-color: var(--v-marca-viva); }

/* ─── Cuerpo ─── */
.v-cuerpo { padding: .8rem .75rem 1.2rem; max-width: 1100px; margin: 0 auto; }
.v-seccion-titulo { font-size: 1rem; font-weight: 700; margin: 1rem .1rem .6rem; color: var(--v-tinta); }

/* ─── Banners ─── */
.v-banners { margin-bottom: .6rem; }
.v-banners-pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--v-r); gap: 0; }
.v-banners-pista::-webkit-scrollbar { display: none; }
.v-banner { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 3 / 1; min-height: 120px; border: 0; padding: 0; margin: 0; background: var(--v-marca-tinta); color: var(--v-sobre-marca); cursor: pointer; overflow: hidden; text-align: left; font: inherit; }
.v-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A lo ancho, 3:1 da un banner de más de un palmo: se topa y se recorta. */
.v-banner { max-height: 300px; }
.v-banner-txt { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .15rem; background: linear-gradient(to top, rgba(4, 30, 33, .72), rgba(4, 30, 33, 0)); }
.v-banner.sin-imagen .v-banner-txt { position: static; height: 100%; justify-content: center; background: none; }
.v-banner-txt strong { font-size: 1.1rem; line-height: 1.25; }
.v-banner-txt span { font-size: .82rem; color: var(--v-sobre-imagen-2); }
.v-puntos { display: flex; justify-content: center; gap: .35rem; margin-top: .45rem; }
.v-puntos span { width: 6px; height: 6px; border-radius: 50%; background: var(--v-linea-b); }
.v-puntos span.on { background: var(--v-marca); }

/* ─── Atajos ─── */
.v-atajos { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .4rem 0 .8rem; }
.v-atajos::-webkit-scrollbar { display: none; }
.v-atajo { flex: 0 0 76px; display: flex; flex-direction: column; align-items: center; gap: .35rem; background: none; border: 0; font: inherit; font-size: .74rem; color: var(--v-tinta-2); cursor: pointer; text-align: center; line-height: 1.2; }
.v-atajo-circ { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--v-superficie); border: 1px solid var(--v-linea); color: var(--v-marca); }
.v-atajo-circ .v-ico { width: 26px; height: 26px; }
.v-tono-acento { color: var(--v-acento); }
.v-tono-aviso { color: var(--v-aviso); }
.v-tono-ok { color: var(--v-ok); }

/* ─── Ofertas relámpago ─── */
.v-ofertas { background: var(--v-acento); color: var(--v-sobre-acento); border-radius: var(--v-r); padding: .8rem; margin-bottom: .8rem; container-type: inline-size; }
.v-ofertas[hidden] { display: none; }
.v-ofertas-cab { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.v-ofertas-cab h2 { font-size: 1.05rem; font-weight: 800; line-height: 1.1; margin: 0; color: var(--v-sobre-marca); }
.v-reloj { display: flex; align-items: center; gap: .2rem; font-variant-numeric: tabular-nums; }
.v-reloj span { background: var(--v-superficie); color: var(--v-tinta); border-radius: 5px; padding: .15rem .35rem; font-size: .82rem; font-weight: 700; }
.v-reloj i { font-style: normal; font-weight: 700; }
.v-ofertas-lista { background: var(--v-superficie); border-radius: 8px; display: grid; }
.v-oferta { display: flex; gap: .7rem; align-items: center; padding: .55rem; background: none; border: 0; border-bottom: 1px solid var(--v-linea); font: inherit; color: var(--v-tinta); text-align: left; cursor: pointer; }
.v-oferta:last-child { border-bottom: 0; }
/* A lo ancho, las ofertas van en fila. */
@container (min-width: 640px) {
  .v-ofertas-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-oferta { border-bottom: 0; border-right: 1px solid var(--v-linea); }
  .v-oferta:last-child { border-right: 0; }
}
.v-oferta-foto { width: 64px; height: 64px; border-radius: 8px; background: var(--v-marca-suave); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: 0 0 auto; color: var(--v-marca); }
.v-oferta-foto img { width: 100%; height: 100%; object-fit: cover; }
.v-oferta-datos { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; }

/* ─── Tarjeta ─── */
.v-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
/* Las columnas dependen del ancho del CONTENEDOR, no de la ventana: la
   misma cuadrícula vive en la tienda a lo ancho, en la columna de 560 px de
   la Oficina y dentro del panel del ERP. */
.v-grid-caja { container-type: inline-size; }
@container (min-width: 520px) { .v-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 720px) { .v-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } }
@container (min-width: 960px) { .v-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.v-card { position: relative; background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-r); overflow: hidden; display: flex; flex-direction: column; }
.v-card-foto { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border: 0; padding: 0; background: var(--v-marca-suave); cursor: pointer; }
.v-card-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-sin-foto { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--v-marca); }
.v-sin-foto .v-ico { width: 44px; height: 44px; }
.v-insignia { position: absolute; left: 0; bottom: .6rem; background: var(--v-acento); color: var(--v-sobre-acento); font-size: .66rem; font-weight: 700; letter-spacing: .02em; padding: .2rem .5rem; }
.v-card-media { position: relative; }
.v-agregar { position: absolute; right: .5rem; bottom: .5rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--v-linea-b); background: var(--v-superficie); color: var(--v-marca); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 6px rgba(16, 32, 31, .12); }
.v-agregar.con { background: var(--v-marca); color: var(--v-sobre-marca); border-color: var(--v-marca); font-weight: 700; font-size: .9rem; }
.v-card-cuerpo { padding: .6rem .7rem .75rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.v-card-nombre { font-size: .88rem; font-weight: 400; line-height: 1.3; margin: 0; color: var(--v-tinta); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-card-desc { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: .15rem; }
.v-off { background: var(--v-ok-suave); color: var(--v-ok); font-size: .72rem; font-weight: 700; padding: .1rem .35rem; border-radius: 4px; }
.v-tachado { font-size: .78rem; color: var(--v-tinta-3); }
.v-precio { font-size: 1.35rem; font-weight: 500; color: var(--v-tinta); line-height: 1.15; }
.v-precio sup { font-size: .55em; margin-left: .1em; }
.v-precio-chico { font-size: 1.05rem; }
.v-precio-linea { font-weight: 600; }
.v-card-promo { font-size: .74rem; color: var(--v-acento); font-weight: 600; }
.v-card-mejora { font-size: .72rem; color: var(--v-aviso); line-height: 1.3; }
.v-card-entrega { display: flex; align-items: center; gap: .3rem; font-size: .76rem; color: var(--v-ok); margin-top: .15rem; }
.v-card-entrega .v-ico { width: 15px; height: 15px; }
.v-vacio { text-align: center; padding: 2.4rem 1rem; color: var(--v-tinta-3); font-size: .9rem; background: var(--v-superficie); border: 1px dashed var(--v-linea-b); border-radius: var(--v-r); }

/* ─── Barra inferior y hoja «Más» ─── */
.v-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: var(--v-superficie); border-top: 1px solid var(--v-linea); padding: .35rem .2rem calc(.45rem + env(safe-area-inset-bottom)); }
.v-bottom-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; background: none; border: 0; font: inherit; font-size: .7rem; color: var(--v-tinta-2); cursor: pointer; padding: .2rem 0; }
.v-bottom-btn.on { color: var(--v-marca); font-weight: 600; }
/* Con seis botones (la Oficina con tienda) el rótulo baja un punto para caber en 360 px. */
.v-bottom-btn { min-width: 0; padding-left: 0; padding-right: 0; }
.v-bottom-btn:nth-child(6), .v-bottom-btn:nth-child(6) ~ .v-bottom-btn, .v-bottom:has(.v-bottom-btn:nth-child(6)) .v-bottom-btn { font-size: .64rem; }
.v-bottom-ico { position: relative; display: inline-flex; }
.v-contador { position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--v-acento); color: var(--v-sobre-acento); font-size: .66rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.v-contador.en-linea { position: static; margin-left: auto; }
.con-barra-inferior { padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }

.v-hoja-fondo { position: fixed; inset: 0; z-index: 45; background: var(--v-velo); display: flex; align-items: flex-end; justify-content: center; }
.v-hoja { width: 100%; max-width: 560px; background: var(--v-superficie); border-radius: 16px 16px 0 0; padding: .6rem .6rem calc(1rem + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
.v-hoja-cab { display: flex; justify-content: space-between; align-items: center; padding: .4rem .6rem .7rem; color: var(--v-tinta); }
.v-hoja-x { background: none; border: 0; color: var(--v-tinta-2); cursor: pointer; padding: .2rem; }
.v-hoja-item { width: 100%; display: flex; align-items: center; gap: .8rem; background: none; border: 0; border-top: 1px solid var(--v-linea); padding: .8rem .6rem; font: inherit; font-size: .92rem; color: var(--v-tinta); cursor: pointer; text-align: left; }
.v-hoja-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--v-marca-suave); color: var(--v-marca); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.v-hoja-txt { display: flex; flex-direction: column; }
.v-hoja-txt small { color: var(--v-tinta-3); font-size: .76rem; }

/* En escritorio la barra inferior no hace falta: el encabezado alcanza. */
/* En tableta y escritorio la barra de abajo se agrupa al centro: estirada a
   todo el ancho, sus botones quedaban a medio metro uno del otro. */
@media (min-width: 700px) {
  .v-bottom { justify-content: center; gap: 1.5rem; }
  .v-bottom-btn { flex: 0 0 96px; }
}
@media (min-width: 900px) {
  .v-bottom.solo-movil { display: none; }
  .con-barra-inferior.solo-movil { padding-bottom: 1.2rem; }
}

/* ─── Ficha de producto ─── */
.v-ficha-fondo { position: fixed; inset: 0; z-index: 46; background: var(--v-velo); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .v-ficha-fondo { align-items: center; padding: 1rem; } }
.v-ficha { position: relative; width: 100%; max-width: 520px; max-height: 92vh; overflow: auto; background: var(--v-superficie); color: var(--v-tinta); border-radius: 16px 16px 0 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
@media (min-width: 640px) { .v-ficha { border-radius: 16px; } }
.v-ficha-x { position: absolute; top: .5rem; right: .5rem; z-index: 2; background: var(--v-superficie); border-radius: 50%; }
.v-ficha-cuerpo { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
/* Galería: la foto grande arriba y las miniaturas en fila debajo (teléfono). */
.v-ficha-galeria { display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr); }
.v-ficha-principal { position: relative; aspect-ratio: 1 / 1; border-radius: var(--v-r); background: var(--v-marca-suave); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--v-marca); }
.v-ficha-principal img { width: 100%; height: 100%; object-fit: contain; background: var(--v-superficie); }
.v-ficha-principal .v-sin-foto .v-ico { width: 64px; height: 64px; }
.v-ficha-miniaturas { order: 2; display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; }
.v-ficha-miniaturas::-webkit-scrollbar { display: none; }
.v-ficha-mini { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 1px solid var(--v-linea); border-radius: 8px; overflow: hidden; background: var(--v-superficie); cursor: pointer; }
.v-ficha-mini img { width: 100%; height: 100%; object-fit: cover; }
.v-ficha-mini.on { border: 2px solid var(--v-marca); }
/* Caja de compra. */
.v-ficha-caja { display: flex; flex-direction: column; gap: .45rem; }
.v-ficha-cat { font-size: .74rem; color: var(--v-tinta-3); }
.v-ficha-nombre { font-size: 1.15rem; font-weight: 500; margin: 0; line-height: 1.3; padding-right: 2rem; }
.v-precio-grande { font-size: 1.9rem; }
.v-ficha-cantidad { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--v-tinta-2); margin-top: .35rem; }
.v-paso { display: flex; border: 1px solid var(--v-linea-b); border-radius: 8px; overflow: hidden; }
.v-paso button { width: 36px; border: 0; background: var(--v-superficie); color: var(--v-tinta); font-size: 1.1rem; cursor: pointer; }
.v-paso input { width: 52px; border: 0; border-left: 1px solid var(--v-linea); border-right: 1px solid var(--v-linea); text-align: center; font: inherit; background: var(--v-superficie); color: var(--v-tinta); padding: .45rem 0; -moz-appearance: textfield; }
.v-paso input::-webkit-outer-spin-button, .v-paso input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v-ficha-caja .v-boton { flex: 0 0 auto; }
.v-boton.v-boton-2 { background: var(--v-marca-suave); color: var(--v-marca-tinta); border: 1px solid var(--v-marca); }
.v-boton.v-boton-2:hover { background: var(--v-marca-suave); filter: brightness(.97); }
.v-ficha-desc { margin-top: 1rem; border-top: 1px solid var(--v-linea); padding-top: .8rem; }
.v-ficha-desc h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .35rem; color: var(--v-tinta); }
.v-ficha-desc p { font-size: .9rem; color: var(--v-tinta-2); margin: 0; white-space: pre-line; line-height: 1.55; }
/* Escritorio: galería a la izquierda (miniaturas en columna) y caja a la derecha. */
@media (min-width: 820px) {
  .v-ficha { max-width: 940px; padding: 1.4rem; }
  .v-ficha-cuerpo { grid-template-columns: minmax(0, 1fr) 320px; gap: 1.4rem; align-items: start; }
  .v-ficha-galeria.con-miniaturas { grid-template-columns: 60px minmax(0, 1fr); }
  .v-ficha-miniaturas { order: 0; flex-direction: column; overflow-y: auto; max-height: 460px; }
  .v-ficha-caja { border: 1px solid var(--v-linea); border-radius: var(--v-r); padding: 1rem; }
}
.v-boton { flex: 1; background: var(--v-marca); color: var(--v-sobre-marca); border: 0; border-radius: 8px; padding: .75rem 1rem; font: inherit; font-weight: 700; cursor: pointer; }
.v-boton:hover { background: var(--v-marca-tinta); }
.v-insignia.en-linea { position: static; align-self: flex-start; }
.v-hoja-fondo[hidden] { display: none; }
/* Piel única de las hojas (ADR-108 Fase 5): asa arriba, radio y sombra compartidos. */
.v-hoja, .v-ficha { border-radius: var(--v-r-lg) var(--v-r-lg) 0 0; box-shadow: var(--v-sh-3); }
.v-hoja::before, .v-ficha::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--v-linea-b); margin: .15rem auto .55rem; }
.v-hoja-item.on { color: var(--v-marca); font-weight: 600; }

/* ─── Carrito (ADR-107) ─── */
.v-carrito-caja { container-type: inline-size; }
.v-carrito-cab { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .7rem; }
.v-carrito-cab h2 { font-size: 1.15rem; font-weight: 600; margin: 0; color: var(--v-tinta); text-transform: none; letter-spacing: normal; }
.v-carrito-cab span { font-size: .82rem; color: var(--v-tinta-2); }
.v-carrito { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1fr); }
.v-carrito-izq { display: grid; gap: .9rem; min-width: 0; }
.v-cart-lista { background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-r); }
.v-cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .75rem; padding: .8rem; border-bottom: 1px solid var(--v-linea); align-items: center; }
.v-cart-item:last-child { border-bottom: 0; }
.v-cart-foto { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--v-linea); background: var(--v-marca-suave); padding: 0; overflow: hidden; cursor: pointer; color: var(--v-marca); display: flex; align-items: center; justify-content: center; }
.v-cart-foto img { width: 100%; height: 100%; object-fit: cover; }
.v-cart-nombre { font-size: .9rem; line-height: 1.3; color: var(--v-tinta); }
.v-cart-sub { font-size: .76rem; color: var(--v-tinta-3); margin-top: .1rem; }
.v-cart-falta { font-size: .76rem; color: var(--v-crit); font-weight: 600; margin-top: .15rem; }
.v-cart-acc { display: flex; gap: .9rem; margin-top: .3rem; }
.v-cart-acc button { background: none; border: 0; padding: 0; color: var(--v-marca); font: inherit; font-size: .78rem; cursor: pointer; }
.v-cart-precio { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; }
.v-cart-n { min-width: 36px; display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid var(--v-linea); border-right: 1px solid var(--v-linea); font-size: .88rem; color: var(--v-tinta); }
.v-cart-precio .v-paso button { width: 30px; padding: .3rem 0; }
.v-cart-entrega { background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-r); padding: .9rem; }
/* Las opciones de entrega de cada página, como tarjetas para elegir. */
.v-cart-entrega label:has(> input[type="radio"]) { display: flex; gap: .55rem; align-items: center; border: 1px solid var(--v-linea); border-radius: 8px; padding: .65rem .75rem; margin: 0 0 .45rem; cursor: pointer; text-transform: none; letter-spacing: normal; font-size: .88rem; }
.v-cart-entrega label:has(> input[type="radio"]:checked) { border: 1.5px solid var(--v-marca); background: var(--v-marca-suave); }
.v-cart-resumen { background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-r); padding: .9rem; display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; color: var(--v-tinta); }
.v-cart-resumen h3 { font-size: .95rem; font-weight: 600; margin: 0 0 .45rem; color: var(--v-tinta); }
.v-res-fila { display: flex; justify-content: space-between; gap: .6rem; padding: .22rem 0; }
.v-res-ahorro { color: var(--v-ok); }
.v-res-total { display: flex; justify-content: space-between; border-top: 1px solid var(--v-linea); margin-top: .35rem; padding-top: .55rem; font-size: 1.1rem; font-weight: 600; }
.v-res-nota { font-size: .74rem; color: var(--v-tinta-3); }
.v-res-puntos { background: var(--v-marca-suave); color: var(--v-marca-tinta); border-radius: 6px; padding: .35rem .55rem; font-size: .78rem; margin: .45rem 0 .2rem; }
.v-cart-resumen button:not(.v-cart-seguir), .v-cart-resumen .btn { width: 100%; margin-top: .45rem; }
.v-cart-seguir { background: none; border: 0; color: var(--v-marca); font: inherit; font-size: .8rem; cursor: pointer; margin-top: .5rem; padding: .2rem; }
@container (min-width: 760px) {
  .v-carrito { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
  .v-cart-resumen { position: sticky; top: 1rem; }
}

/* ─── Checkout (ADR-107) ─── */
.v-pasos { display: flex; gap: .4rem; list-style: none; margin: .2rem 0 1rem; padding: 0; flex-wrap: wrap; font-size: .8rem; color: var(--v-tinta-3); }
.v-pasos li { display: flex; align-items: center; gap: .35rem; }
.v-pasos li:not(:last-child)::after { content: ''; width: clamp(8px, 4vw, 28px); height: 1px; background: var(--v-linea-b); margin-left: .25rem; }
.v-pasos span { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--v-linea-b); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; }
.v-pasos .hecho { color: var(--v-ok); }
.v-pasos .hecho span { background: var(--v-ok); border-color: var(--v-ok); color: var(--v-sobre-estado); }
.v-pasos .actual { color: var(--v-marca); font-weight: 600; }
.v-pasos .actual span { border-color: var(--v-marca); color: var(--v-marca); }
.v-co-caja { background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-r); padding: .9rem; }
.v-co-tit { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.v-co-tit h3 { font-size: .95rem; font-weight: 600; margin: 0; color: var(--v-tinta); }
.v-co-tit button { background: none; border: 0; color: var(--v-marca); font: inherit; font-size: .8rem; cursor: pointer; padding: 0; }
.v-cart-resumen .v-co-tit button { width: auto; margin-top: 0; }
.v-co-sel { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; }
.v-co-sel b { display: block; font-weight: 600; }
.v-co-sel small, .v-co-op small { display: block; font-size: .78rem; color: var(--v-tinta-3); margin-top: .1rem; }
.v-co-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--v-marca-suave); color: var(--v-marca); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.v-co-op { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--v-linea); border-radius: 8px; padding: .7rem .8rem; margin-bottom: .5rem; cursor: pointer; font-size: .88rem; text-transform: none; letter-spacing: normal; }
.v-co-op input { margin-top: .2rem; accent-color: var(--v-marca); }
.v-co-op b { font-weight: 600; }
.v-co-op.on { border: 1.5px solid var(--v-marca); background: var(--v-marca-suave); }
.v-co-op.off { opacity: .55; cursor: not-allowed; }
.v-co-aviso { display: flex; gap: .55rem; align-items: flex-start; background: var(--v-aviso-suave); color: var(--v-aviso); border-radius: 8px; padding: .7rem .8rem; font-size: .82rem; line-height: 1.45; }
.v-co-aviso .v-ico { width: 18px; height: 18px; }
.v-co-minis { display: flex; gap: .45rem; flex-wrap: wrap; margin-bottom: .6rem; }
.v-co-minis span { position: relative; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--v-linea); background: var(--v-marca-suave); color: var(--v-marca); display: flex; align-items: center; justify-content: center; overflow: visible; }
.v-co-minis img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.v-co-minis em { position: absolute; top: -6px; right: -6px; background: var(--v-marca); color: var(--v-sobre-marca); font-style: normal; font-size: .62rem; border-radius: 8px; padding: 0 .3rem; }
.v-co-seguro { display: flex; gap: .35rem; align-items: center; justify-content: center; font-size: .72rem; color: var(--v-tinta-3); margin-top: .5rem; text-align: center; }
.v-co-seguro .v-ico { width: 14px; height: 14px; }
.v-co-listo { background: var(--v-superficie); border: 1px solid var(--v-linea); border-radius: var(--v-r); padding: 1.4rem; max-width: 640px; margin: 0 auto; text-align: center; display: grid; gap: .6rem; justify-items: center; color: var(--v-tinta); }
.v-co-listo h2 { font-size: 1.2rem; font-weight: 600; margin: 0; text-transform: none; letter-spacing: normal; color: var(--v-tinta); }
.v-co-ok { width: 52px; height: 52px; border-radius: 50%; background: var(--v-ok-suave); color: var(--v-ok); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 700; }
.v-co-pagar { text-decoration: none; display: inline-block; width: auto; padding: .75rem 1.4rem; }
.v-co-transfer { width: 100%; text-align: left; background: var(--v-fondo); border: 1px solid var(--v-linea); border-radius: 8px; padding: .8rem; }
.v-co-transfer h3 { font-size: .9rem; font-weight: 600; margin: 0 0 .35rem; color: var(--v-tinta); }
.v-co-instr { white-space: pre-line; font-size: .88rem; margin: 0 0 .35rem; }
.v-co-comprobante { width: 100%; display: grid; gap: .55rem; text-align: left; }
.v-co-comprobante label { display: grid; gap: .25rem; font-size: .8rem; color: var(--v-tinta-2); text-transform: none; letter-spacing: normal; }
.v-co-comprobante input[type="text"] { padding: .55rem .65rem; border: 1px solid var(--v-linea-b); border-radius: 8px; font: inherit; background: var(--v-superficie); color: var(--v-tinta); }
.v-co-hecho { color: var(--v-ok); font-weight: 600; }
.v-co-acciones { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: .4rem; }
.v-co-acciones .v-boton { flex: 0 0 auto; padding: .65rem 1.2rem; }

/* El paso Entrega del checkout: CEDIS o paquetería con la libreta de direcciones. */
.v-ent { display: grid; gap: .6rem; color: var(--v-tinta); }
.v-ent-metodos .v-co-op { align-items: center; }
.v-ent-metodos .v-co-op input { margin-top: 0; }
.v-ent-campo { display: grid; gap: .25rem; font-size: .8rem; color: var(--v-tinta-2); text-transform: none; letter-spacing: normal; min-width: 0; }
.v-ent-campo input, .v-ent-campo select { width: 100%; box-sizing: border-box; padding: .55rem .65rem; border: 1px solid var(--v-linea-b); border-radius: 8px; font: inherit; font-size: .9rem; background: var(--v-superficie); color: var(--v-tinta); }
.v-ent-campo input:focus-visible, .v-ent-campo select:focus-visible { outline: 2px solid var(--v-marca-viva); outline-offset: 1px; }
.v-ent-cedis { display: grid; gap: .1rem; font-size: .8rem; color: var(--v-tinta-2); background: var(--v-fondo); border-radius: 8px; padding: .55rem .7rem; }
.v-ent-lista { display: grid; gap: .5rem; }
.v-ent-dir { border: 1px solid var(--v-linea); border-radius: 8px; padding: .65rem .75rem; font-size: .86rem; }
.v-ent-dir.on { border: 1.5px solid var(--v-marca); background: var(--v-marca-suave); }
.v-ent-dir.off { opacity: .75; }
.v-ent-dir > label { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; text-transform: none; letter-spacing: normal; }
.v-ent-dir.off > label { cursor: not-allowed; }
.v-ent-dir input { margin-top: .2rem; accent-color: var(--v-marca); }
.v-ent-dir b { font-weight: 600; }
.v-ent-dir small { display: block; font-size: .78rem; color: var(--v-tinta-3); margin-top: .1rem; }
.v-ent-dir small.v-ent-motivo { color: var(--v-crit); }
.v-ent-tag { font-style: normal; font-size: .68rem; font-weight: 600; background: var(--v-ok-suave); color: var(--v-ok); border-radius: var(--v-r-pill); padding: .05rem .45rem; margin-left: .25rem; }
.v-ent-acc, .v-ent-confirma { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; margin: .4rem 0 0 1.6rem; font-size: .8rem; }
.v-ent-acc button, .v-ent-confirma button, .v-ent-nueva { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--v-marca); cursor: pointer; }
.v-ent-confirma { background: var(--v-crit-suave); color: var(--v-crit); border-radius: 8px; padding: .45rem .6rem; margin-left: 0; }
.v-ent-confirma [data-v-ent-borrar-si] { color: var(--v-crit); font-weight: 700; }
.v-ent-nueva { justify-self: start; font-weight: 600; font-size: .86rem; padding: .3rem 0; }
.v-ent-form { display: grid; gap: .55rem; border: 1px dashed var(--v-linea-b); border-radius: 8px; padding: .8rem; }
.v-ent-form h4 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--v-tinta); }
.v-ent-fila2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; }
.v-ent-botones { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.v-ent-botones .v-boton { flex: 0 0 auto; padding: .6rem 1.1rem; }
.v-ent button:focus-visible { outline: 2px solid var(--v-marca-viva); outline-offset: 2px; }