/* =====================================================================
   diseno-v2.css — Diseño v2 (18-oct-2026, lote 3)
   =====================================================================
   Mismo archivo en Limonni y Niccola. Solo usa las variables de cada
   marca (--black, --linen, --ink, --gold-2, --font-*...), así que cada
   sitio lo pinta con su propia identidad: el oro editorial de Limonni y
   el oliva suave de Niccola no se tocan.

   Todas las reglas van bajo html.dv2 — la clase solo existe para quien
   cayó en la variante nueva de {l|n}_diseno_v2 (includes/diseno_v2.php).
   El resto ve el sitio exactamente como estaba.

   QUÉ RESUELVE (medido en celular 375 px, el 99 % del tráfico):
   1. Encabezado: hasta 7 íconos de 18 px en una fila. Ahora 4 a la
      vista (menú, buscar, favoritos, carrito) con área táctil de 44 px;
      cuenta y cápsulas pasan al menú con su nombre escrito.
   2. Al bajar, el encabezado + los círculos de categorías ocupaban
      ~185 px fijos de 812 (23 % de la pantalla). Ahora el encabezado se
      esconde al bajar y vuelve al subir, y los círculos se van con el
      contenido.
   3. Nombres de prenda: "VESTIDOS PARA MUJER LI8204 LIMONNI PLENA" se
      recortaba a "VESTIDOS PARA MUJ…" — todas las tarjetas decían lo
      mismo. Ahora "Vestido Plena" (ver dv2NombreVitrina()) en 2 líneas.
   4. Precios en letra de lectura con cifras alineadas (antes
      monoespaciada, pensada para datos, no para leer un precio).
   5. Botones flotantes que se tapaban entre sí en la ficha.
   6. Accesibilidad: contraste del texto gris, foco visible, tallas de
      44 px, sin animaciones para quien las desactiva.
   ===================================================================== */

html.dv2 {
  /* Texto secundario más oscuro: #8C847A (Limonni) / #7D8073 (Niccola)
     sobre el fondo de lino daban ~3,4:1 y ~3,9:1 — por debajo del 4,5:1
     que pide WCAG AA para texto pequeño. */
  --muted: #645D54;
  --dv2-foco: var(--gold-2, #A07A34);
}
/* Niccola: el mismo contraste, en su gris oliva (5,9:1 sobre su crema). */
html.dv2.dv2-marca-2 { --muted: #5C5F53; --dv2-foco: var(--black, #33362B); }

/* ── Foco visible para teclado (no aparece al tocar con el dedo) ──── */
html.dv2 :focus-visible {
  outline: 2px solid var(--dv2-foco);
  outline-offset: 2px;
}
html.dv2 .icon-btn:focus-visible,
html.dv2 .color-swatch:focus-visible { outline-offset: 3px; }

/* ── Precios: letra de lectura, cifras de igual ancho ─────────────── */
html.dv2 .pdp-price-cop,
html.dv2 .pdp-price-usd,
html.dv2 .pin-info-precio,
html.dv2 .pdp-sticky-precio,
html.dv2 .pdp-alt-precio,
html.dv2 .arrival-card-price,
html.dv2 .car-linea-total,
html.dv2 .car-linea-unidad,
html.dv2 .car-fila span:last-child,
html.dv2 .car-movil-total b,
html.dv2 .car-upsell-precio,
html.dv2 .car-guardado-precio,
html.dv2 .co-item-precio,
html.dv2 .checkout-linea > span:last-child,
html.dv2 .upsell-card-precio {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
html.dv2 .pdp-price-cop { font-size: 24px; font-weight: 600; }
html.dv2 .pin-info-precio { font-weight: 600; }

/* Frases largas que estaban en monoespaciada en versalitas (se leían mal). */
html.dv2 .pdp-envio-badge,
html.dv2 .pdp-envio-nota {
  font-family: var(--font-body) !important; /* la nota trae estilo en línea */
  font-size: 12.5px !important; letter-spacing: 0 !important; text-transform: none;
}

/* ── Ficha: nombre de vitrina + referencia ───────────────────────── */
html.dv2 .pdp-title { margin-bottom: 4px; }
html.dv2 .dv2-ref {
  margin: 0 0 14px;
  font-size: 12px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
html.dv2 .pdp-ocasiones { color: var(--muted); }

/* ── Tarjetas: nombre completo en 2 líneas ────────────────────────── */
html.dv2 .pin-info-titulo {
  white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-overflow: clip;
  font-size: 13px; line-height: 1.3;
}

/* En computador el nombre y el precio solo aparecían al pasar el mouse
   encima de la foto: para comparar precios había que recorrer cada
   tarjeta. Ahora van siempre debajo, como en celular. */
@media (min-width: 761px) {
  html.dv2 .pin-img-wrap::after { display: none; }
  html.dv2 .pin-info {
    position: static; opacity: 1; pointer-events: auto;
    padding: 10px 12px 12px; background: var(--paper, #fff);
  }
  html.dv2 .pin .pin-info-titulo { color: var(--ink); }
  html.dv2 .pin .pin-info-precio { color: var(--ink); }
}

/* ── Selección de color y talla: áreas táctiles de verdad ────────── */
html.dv2 .color-swatches { gap: 12px; }
html.dv2 .color-swatch { width: 32px; height: 32px; }
html.dv2 .color-swatch::before {
  /* amplía el área que responde al dedo a ~44 px sin mover el diseño */
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
}
html.dv2 .talla-btn { min-height: 44px; min-width: 48px; }
html.dv2 .color-ver-mas { padding: 10px 0; }

@media (max-width: 767px) {
  /* ── 1. Encabezado: 4 íconos, 44 px cada uno ─────────────────────── */
  html.dv2 .site-header { padding: 0 8px; }
  html.dv2 .site-header .icon-btn { width: 44px; height: 44px; }
  html.dv2 .site-nav-right { gap: 0; }
  html.dv2 .site-nav-right a.icon-btn[href="capsulas.php"],
  html.dv2 .site-nav-right a.icon-btn[href^="login.php"],
  html.dv2 .site-nav-right a.icon-btn[href="perfil.php"],
  html.dv2 #btn-chat-header { display: none; }

  /* ── 2. Encabezado que se esconde al bajar (assets/js/diseno-v2.js) ─ */
  html.dv2 .site-header { transition: transform .26s var(--ease), box-shadow var(--dur) var(--ease); }
  html.dv2 .site-header.dv2-oculto { transform: translateY(-100%); box-shadow: none; }
  /* Los círculos de categorías ya no se quedan pegados arriba. */
  html.dv2 .cat-circles-strip { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* ── Catálogo: filtros en una sola línea que se desliza ──────────── */
  html.dv2 .feed-toolbar-filtros {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px; padding: 2px 16px;
  }
  html.dv2 .feed-toolbar-filtros::-webkit-scrollbar { display: none; }
  html.dv2 .feed-toolbar-filtros > * { flex: 0 0 auto; }

  /* ── Ficha ───────────────────────────────────────────────────────── */
  /* La ruta "Inicio / Vestidos / VESTIDOS PARA MUJER LI…" ocupaba 2-3
     líneas encima del nombre; en celular se vuelve con el menú. */
  html.dv2 body.page-producto .pdp-breadcrumb { display: none; }
  html.dv2 body.page-producto .pdp-info-col { padding-top: 18px; }

  /* ── 5. Botones flotantes en la ficha ────────────────────────────── */
  /* El chat se vuelve un círculo (sin nombre) y la barra de compra
     recupera el espacio que le reservaba: las tallas ya no se cortan. */
  html.dv2.dv2-pg-producto .lmw-fab,
  html.dv2.dv2-pg-carrito .lmw-fab,
  html.dv2.dv2-pg-checkout .lmw-fab { padding: 6px; gap: 0; right: 12px; }
  html.dv2.dv2-pg-producto .lmw-fab-text,
  html.dv2.dv2-pg-carrito .lmw-fab-text,
  html.dv2.dv2-pg-checkout .lmw-fab-text { display: none; }
  html.dv2 body.page-producto .pdp-sticky { padding-right: 76px; }
}

/* El aviso "¿Te ayudamos a encontrar lo tuyo?" (mini-quiz de estilo) se
   ponía encima de la barra de compra y de los colores. En la ficha, el
   carrito y el pago ya está decidiendo: el aviso sigue en portada y
   catálogo, que es donde ayuda a encontrar. */
html.dv2.dv2-pg-producto #miniquiz-nudge,
html.dv2.dv2-pg-carrito #miniquiz-nudge,
html.dv2.dv2-pg-checkout #miniquiz-nudge { display: none !important; }

/* En el catálogo, la segunda fila de los círculos (Todo / Cortos casuales /
   Maxidress…) repetía exactamente los filtros de subcategoría que el
   catálogo ya muestra debajo — en celular, además, recortados ("Cort…"). */
html.dv2.dv2-pg-catalogo .cat-circles-sub { display: none; }

/* ── Menú: cuenta, cápsulas y favoritos con su nombre ─────────────── */
html.dv2 .dv2-drawer-cuenta {
  list-style: none; margin: 0 32px; padding: 14px 0 4px; /* mismo margen que .nav-drawer-top/-bottom */
}
html.dv2 .dv2-drawer-cuenta a {
  display: block; padding: 11px 0; font-size: 15px;
  color: inherit; text-decoration: none;
}
@media (min-width: 768px) { html.dv2 .dv2-drawer-cuenta { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html.dv2 .site-header { transition: none; }
  html.dv2 .color-swatch:hover { transform: none; }
}