/* ==========================================================================
   lvr.css — Hoja de estilos del Ciclo 001 (estética Lovable / "lovable-refresh")
   Enlazada desde app/views/templates/header.php DESPUÉS de styles.css.
   Reglas del proyecto:
   - styles.css NUNCA se edita; los conflictos se neutralizan en el bloque 7.
   - Selectores con prefijo `lvr-` o dentro de scope (.lvr-header/.lvr-home/.lvr-footer).
   - Sin dependencias externas, sin preprocesadores ni tooling: sólo CSS puro escrito a mano.
   - Mobile-first (base 375px); sin selectores globales desnudos (body, h1…, a).
   Orden de bloques: neutralizaciones SIEMPRE al final (ganan por cascada).
   ========================================================================== */

/* 0. TOKENS — valores oklch literales de Lovable (spec §3 / plan DT-2) */
:root {
  --lvr-background: oklch(0.985 0.004 80);
  --lvr-foreground: oklch(0.18 0.015 260);
  --lvr-primary: oklch(0.55 0.2 45);
  --lvr-primary-foreground: oklch(0.99 0 0);
  --lvr-secondary: oklch(0.2 0.02 260);
  --lvr-secondary-foreground: oklch(0.97 0 0);
  --lvr-muted: oklch(0.95 0.006 80);
  --lvr-accent: oklch(0.94 0.04 60);
  --lvr-muted-foreground: oklch(0.5 0.015 260);
  --lvr-success: oklch(0.62 0.15 150);
  --lvr-border: oklch(0.91 0.006 80);
  --lvr-radius: 0.9rem;
  --lvr-shadow-card: 0 1px 2px oklch(0 0 0 / 5%), 0 12px 30px -16px oklch(0.2 0.02 260 / 25%);
  --lvr-font-display: "Space Grotesk";
  --lvr-font-sans: "DM Sans";
}

/* 1. BASE — contenedor y utilidades compartidas por las zonas del ciclo */
.lvr-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* 2. HEADER — topbar · header sticky · logo · buscador pill · CTA WhatsApp · nav pills · dropdown · hamburguesa (T2) */

/* --- Topbar (fila 1): HERMANO ANTERIOR de #header → hace scroll-out (RF-3) --- */
.lvr-topbar {
  background: var(--lvr-secondary);
  color: var(--lvr-secondary-foreground);
  text-align: center;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  font-size: 0.75rem;
}

/* --- Scope del header (aditivo: .main-header + #header intactos) --- */
.lvr-header {
  font-family: var(--lvr-font-sans);
  color: var(--lvr-foreground);
  transition: background-color 0.4s, box-shadow 0.3s;
}

/* Sombra sutil al hacer scroll (clase .scroll-header la agrega main.js:9-11) */
.lvr-header.scroll-header {
  box-shadow: var(--lvr-shadow-card);
}

/* Contenedor: equivale a max-w-7xl px-4 de Lovable (gana a los padding de styles.css) */
.lvr-header .header-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.lvr-header .header-top {
  gap: 1rem;
  margin-bottom: 0;
  padding-block: 0.75rem;
}

/* --- Buscador pill (fila 2) --- */
.lvr-header .header-search {
  border: 1px solid var(--lvr-border);
  border-radius: 9999px;
  background-color: var(--lvr-background);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lvr-header .header-search:focus-within {
  border-color: var(--lvr-primary);
  box-shadow: 0 0 0 3px oklch(0.68 0.2 45 / 0.15);
}

.lvr-header .header-search__input {
  padding: 0.625rem 0.5rem 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--lvr-foreground);
  background-color: transparent;
}

.lvr-header .header-search__input::placeholder {
  color: var(--lvr-muted-foreground);
}

.lvr-header .header-search__button {
  border-left: 1px solid var(--lvr-border);
  padding-inline: 1rem;
  font-size: 1.125rem;
  color: var(--lvr-muted-foreground);
  transition: color 0.2s;
}

.lvr-header .header-search__button:hover {
  color: var(--lvr-primary);
}

/* --- CTA WhatsApp (fila 2): oculto <640px, inline-flex ≥640px (P9) --- */
.lvr-header__wa {
  display: none;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--lvr-primary);
  color: var(--lvr-primary-foreground);
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.lvr-header__wa:hover {
  opacity: 0.9;
}

.lvr-header__wa i {
  font-size: 1rem;
}

@media (min-width: 640px) {
  .lvr-header__wa {
    display: inline-flex;
  }
}

/* --- Nav pills (fila 3) --- */
.lvr-header .header-bottom {
  gap: 1rem;
  padding-bottom: 0.5rem;
}

.lvr-header .nav-list {
  gap: 0.25rem;
}

.lvr-header .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lvr-muted-foreground);
  transition: background-color 0.2s, color 0.2s;
}

.lvr-header .nav-link:hover {
  opacity: 1;
  background-color: var(--lvr-muted);
  color: var(--lvr-foreground);
}

/* Item "Estamos en" ($locationLink/$locationHeader): sólo reestilizado */
.lvr-header .nav-item--location a {
  border: 1px solid transparent;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--lvr-muted-foreground);
}

.lvr-header .nav-item--location:hover a {
  border-color: var(--lvr-border);
  background-color: var(--lvr-muted);
}

/* --- Dropdown Categorías (panel claro estilo Lovable) --- */
.lvr-header .dropdown-menu {
  background-color: var(--lvr-background);
  border: 1px solid var(--lvr-border);
  border-radius: var(--lvr-radius);
  box-shadow: var(--lvr-shadow-card);
  padding: 0.5rem;
  left: 0;
  min-width: 220px;
}

.lvr-header .dropdown-menu a {
  border-radius: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--lvr-foreground);
  transition: background-color 0.2s, color 0.2s;
}

.lvr-header .dropdown-menu a:hover {
  background-color: var(--lvr-muted);
  color: var(--lvr-foreground);
}

/* --- Foco visible (RF-11) scopeado al header --- */
.lvr-header a:focus-visible,
.lvr-header button:focus-visible,
.lvr-header input:focus-visible {
  outline: 2px solid var(--lvr-primary);
  outline-offset: 2px;
}

/* --- Desktop ≥1024px: sin desborde horizontal si no caben los 8 enlaces (D3).
       Decisión: se usa flex-wrap en vez de overflow-x:auto porque overflow-x con overflow-y
       computado a auto RECORTARÍA el #categories-dropdown (position:absolute dentro de
       .header-bottom) y rompería el contrato de apertura del dropdown. --- */
@media (min-width: 1024px) {
  .lvr-header .header-bottom {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .lvr-header .nav-list {
    flex-wrap: wrap;
  }
}

/* --- Panel móvil (≤900px): la apertura la sigue mandando main.js (.is-active);
       sólo cambia la paleta a --lvr-* (fondo claro en vez de negro) --- */
@media screen and (max-width: 900px) {
  .lvr-header .header-bottom,
  .lvr-header .header-bottom.is-active {
    background-color: var(--lvr-background);
    border-top: 1px solid var(--lvr-border);
    box-shadow: var(--lvr-shadow-card);
  }

  .lvr-header .nav-item {
    border-bottom: 1px solid var(--lvr-border);
  }

  .lvr-header .nav-link {
    display: block;
    border-radius: 0;
    padding: 0.875rem 1.25rem;
    color: var(--lvr-foreground);
  }

  .lvr-header .nav-link:hover {
    background-color: var(--lvr-muted);
  }

  .lvr-header .nav-item--location a {
    border: none;
    border-radius: 0;
    padding: 0.875rem 1.25rem;
    color: var(--lvr-muted-foreground);
  }

  .lvr-header .dropdown-menu {
    background-color: var(--lvr-background);
    border: none;
    border-left: 3px solid var(--lvr-primary);
    border-radius: 0;
    box-shadow: var(--lvr-shadow-card);
  }

  .lvr-header .dropdown-menu a {
    border-radius: 0;
    padding: 0.875rem 1.25rem;
    color: var(--lvr-foreground);
    border-bottom: 1px solid var(--lvr-border);
  }

  .lvr-header .dropdown-menu a:hover {
    background-color: var(--lvr-muted);
    color: var(--lvr-foreground);
  }
}

/* --- Hamburguesa: pill con borde (el display lo maneja styles.css: block ≤900px) --- */
.lvr-header .header-mobile-toggle {
  border: 1px solid var(--lvr-border);
  border-radius: 9999px;
  padding: 0.375rem;
  color: var(--lvr-foreground);
  transition: background-color 0.2s;
}

.lvr-header .header-mobile-toggle:hover {
  background-color: var(--lvr-muted);
}

/* 3. HERO — .lvr-hero (rounded-3xl bg-secondary) · gradiente · .lvr-hero__overlay badge/h1/p/CTAs (T3) */

/* --- Envoltorio del Swiper: equivalente a "rounded-3xl overflow-hidden bg-secondary"
       del hero de Lovable (index.tsx:108). El Swiper por dentro queda INTACTO. --- */
.lvr-hero {
  position: relative;
  border-radius: var(--lvr-radius);
  overflow: hidden;
  background: var(--lvr-secondary);
}

/* --- Overlay SIEMPRE visible sobre cualquier slide (N1 / RF-4) ---
   z-index 3 > flechas Swiper (z-index 2, styles.css:619-639); el ::after blanco ya está
   neutralizado (N3). pointer-events:none deja libres flechas y arrastre; sólo los <a>
   (CTAs) reactivan eventos => no se tapan las flechas. */
.lvr-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem 1.5rem; /* py-8 px-6 de Lovable */
  /* Scrim vertical de legibilidad en móvil: texto legible sobre cualquier imagen del admin */
  background: linear-gradient(180deg, oklch(0.2 0.02 260 / 0.85), oklch(0.2 0.02 260 / 0.45));
}

.lvr-hero__overlay a {
  pointer-events: auto;
}

/* --- Badge pill: bg-primary/20 + texto primary (index.tsx:112) --- */
.lvr-hero__badge {
  align-self: flex-start; /* el overlay es flex column: evita que el pill se estire */
  border-radius: 9999px;
  background: oklch(0.68 0.2 45 / 0.2);
  /* T6/a11y (RF-11): texto blanco en vez de --primary — el naranja daba <4.5:1 sobre el
     pill translúcido cuando el slide del admin es claro (peor caso ≈1.7:1). Blanco mide
     ≥6.6:1 en todos los casos; el fondo del pill sigue siendo el literal de Lovable. */
  color: var(--lvr-secondary-foreground);
  font-size: 11px;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
}

/* --- Único h1 de la página (RF-11): font-display, leading 1.1 (index.tsx:113) --- */
.lvr-hero__title {
  margin-top: 0.75rem;
  max-width: 32rem; /* max-w-lg: el texto queda dentro de la zona del gradiente */
  font-family: var(--lvr-font-display);
  font-size: 1.875rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--lvr-secondary-foreground);
}

/* --- Subtítulo (index.tsx:114) --- */
.lvr-hero__subtitle {
  margin-top: 0.5rem;
  max-width: 28rem; /* max-w-md */
  font-size: 0.875rem;
  color: oklch(0.97 0 0 / 0.75);
}

/* --- 2 CTAs pill (index.tsx:115-118) --- */
.lvr-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.lvr-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.2s, background-color 0.2s;
}

.lvr-hero__cta i {
  font-size: 1rem;
}

.lvr-hero__cta--primary {
  background: var(--lvr-primary);
  color: var(--lvr-primary-foreground);
}

.lvr-hero__cta--primary:hover {
  opacity: 0.9;
}

.lvr-hero__cta--outline {
  border: 1px solid oklch(0.97 0 0 / 0.3);
  color: var(--lvr-secondary-foreground);
}

.lvr-hero__cta--outline:hover {
  background: oklch(0.97 0 0 / 0.1);
}

/* --- Foco visible de los CTAs del hero (RF-11) --- */
.lvr-hero__cta:focus-visible {
  outline: 2px solid var(--lvr-primary);
  outline-offset: 2px;
}

/* --- Desktop ≥768px: h1 2.6rem / subtítulo 1rem y gradiente horizontal tipo Lovable --- */
@media (min-width: 768px) {
  .lvr-hero__overlay {
    padding: 2.5rem 3rem; /* py-10 px-12 */
    background: linear-gradient(90deg, var(--lvr-secondary) 0%, oklch(0.2 0.02 260 / 0.7) 45%, transparent 80%);
  }

  .lvr-hero__title {
    font-size: 2.6rem;
  }

  .lvr-hero__subtitle {
    font-size: 1rem;
  }
}

/* 4. HOME — categorías · tarjetas de producto (scope .lvr-home) · banner · marcas · ofertas · títulos (T4)
   Referencia: index.tsx:122-173. TODA regla sobre .product-card (todas sus variantes) e info__meta
   va SCOPEADA a .lvr-home (RF-13): esas clases se comparten con /productos (products.php) y /producto/{id}. */

/* --- Título de sección de categorías: único h2 de la sección (RF-11); copy literal de Lovable --- */
.lvr-section-title {
  font-family: var(--lvr-font-display);
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700;
  color: var(--lvr-foreground);
  margin-bottom: 1.25rem; /* mt-5 */
}

/* --- Respiro de las rejillas bajo el título (styles.css:722-725 fija 2rem; Lovable mt-5) --- */
.lvr-home .category-grid,
.lvr-home .brand-grid {
  margin-top: 1.25rem;
}

/* --- Tiles categoría/marca estilo Lovable (index.tsx:126-129): SIN caja/borde (era card con borde),
       imagen cuadrada redondeada con zoom al hover y etiqueta debajo (RF-5 / RF-8) --- */
.lvr-home .category-card,
.lvr-home .brand-card {
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  justify-content: flex-start;
  gap: 0.5rem; /* mt-2 entre imagen y etiqueta */
}

.lvr-home .category-card:hover,
.lvr-home .brand-card:hover {
  transform: none; /* el lift de styles.css:782-786 no aplica: aquí manda el zoom de la imagen */
  box-shadow: none;
}

.lvr-home .category-card__image,
.lvr-home .brand-card__image {
  border-radius: var(--lvr-radius); /* rounded-2xl */
  margin-bottom: 0; /* el respiro lo da el gap del tile */
}

.lvr-home .category-card__image img,
.lvr-home .brand-card__image img {
  transition: transform 0.5s; /* duration-500 */
}

.lvr-home .category-card:hover .category-card__image img,
.lvr-home .brand-card:hover .brand-card__image img {
  transform: scale(1.1); /* group-hover:scale-110 */
}

.lvr-home .category-card__title,
.lvr-home .brand-card__title {
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  line-height: 1.25;
  color: var(--lvr-foreground);
  text-align: left;
}

/* Etiqueta "Ver más" (N3: SE CONSERVA; sólo se armoniza al sistema Lovable) */
.lvr-home .category-card span,
.lvr-home .brand-card span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--lvr-primary);
  text-align: left;
}

/* --- Títulos de los 2 carruseles: font-display; su markup NO se mueve (contrato home.js intacto) --- */
.lvr-home .product-carousel-title_new,
.lvr-home .product-carousel-title_offer {
  font-family: var(--lvr-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lvr-foreground);
}

/* --- Contenedor de los carruseles: bordes/radio/sombra del sistema Lovable --- */
.lvr-home .products-container {
  border: 1px solid var(--lvr-border);
  border-radius: var(--lvr-radius);
  box-shadow: var(--lvr-shadow-card);
}

/* --- Card de producto (index.tsx:156-170) — SCOPE OBLIGATORIO .lvr-home (RF-13) --- */
.lvr-home .product-card {
  display: block;
  width: 100%;
  border-radius: var(--lvr-radius);
  transition: transform 0.2s;
}

.lvr-home .product-card:hover {
  transform: translateY(-4px); /* hover:-translate-y-1 */
}

.lvr-home .product-card__inner {
  margin: 0;
  padding: 0.75rem; /* p-3 */
  border: 1px solid var(--lvr-border);
  border-radius: var(--lvr-radius);
  background: var(--lvr-background);
  box-shadow: var(--lvr-shadow-card);
}

.lvr-home .product-card__image {
  aspect-ratio: 1/1; /* aspect-square */
  border-radius: calc(var(--lvr-radius) - 0.25rem); /* rounded-xl */
}

.lvr-home .info__meta {
  font-size: 11px;
  letter-spacing: 0.025em; /* tracking-wide de Lovable */
  text-transform: uppercase;
  color: var(--lvr-muted-foreground);
  margin-bottom: 0.25rem;
}

.lvr-home .product-card__title {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: 500;
}

.lvr-home .product-card__price,
.lvr-home .offer-price {
  font-family: var(--lvr-font-display);
  font-size: 1.125rem; /* text-lg */
  font-weight: 700;
  color: var(--lvr-foreground);
}

/* Tags NUEVO/OFERTA: pill Lovable (los colores .discount--* de styles.css se conservan intactos) */
.lvr-home .product-card__tag {
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
}

/* T6/a11y (RF-11): el verde #28a745 de styles.css con texto blanco medía 3.1:1 (<AA 4.5:1).
   Se oscurece SÓLO aquí (scope .lvr-home → /productos y /producto/{id} intactos): verde más
   profundo de la misma familia, 5.06:1. El rojo OFERTA (#dc3545) mide 4.51:1 → cumple, no se toca. */
.lvr-home .product-card__tag.discount--new {
  background-color: oklch(0.52 0.14 150);
}

/* --- Banner (RF-8): el markup PHP queda ÍNTEGRO; sólo radio y borde armónicos --- */
.lvr-banner {
  border: 1px solid var(--lvr-border);
  border-radius: var(--lvr-radius);
  overflow: hidden;
}

/* 5. FOOTER — features · columnas · copyright · FABs (T5)
   Scope .lvr-footer: clase añadida a .features-section, .main-footer y .floating-buttons-container.
   Look Lovable: features → index.tsx:134-144 · footer → index.tsx:176-184 · FAB → index.tsx:184.
   Sólo presentación: variables PHP, contratos de main.js (#scrollTopBtn, .show) y scripts intactos. */

/* --- Features de confianza (RF-6): card border/bg/radio + tile de icono 40x40 (copy literal) --- */
.lvr-footer.features-section {
  background-color: var(--lvr-background);
  margin-top: 2.5rem;
  padding: 2.5rem 0;
  border-bottom: none;
}

.lvr-footer .feature-box {
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  padding: 1rem;
  border: 1px solid var(--lvr-border);
  border-radius: var(--lvr-radius);
  background: var(--lvr-background);
}

.lvr-footer .feature-box__body {
  min-width: 0;
}

.lvr-footer .feature-box__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin-bottom: 0;
  border-radius: calc(var(--lvr-radius) - 0.2rem);
  background: var(--lvr-accent);
  color: var(--lvr-foreground);
  font-size: 1.25rem;
}

.lvr-footer .feature-box__title {
  margin-bottom: 0.125rem;
  font-family: var(--lvr-font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lvr-foreground);
}

.lvr-footer .feature-box__text {
  font-size: 0.75rem;
  color: var(--lvr-muted-foreground);
  line-height: 1.5;
}

/* --- Footer (RF-9): bg --secondary, py-12, títulos font-display, textos con opacidad 60-70% --- */
.lvr-footer.main-footer {
  background-color: var(--lvr-secondary);
  padding-top: 3rem;
  color: var(--lvr-secondary-foreground);
}

.lvr-footer .footer-column__title {
  margin-bottom: 1rem;
  font-family: var(--lvr-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--lvr-secondary-foreground);
}

.lvr-footer .footer-column__list li {
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
  color: oklch(0.97 0 0 / 0.7);
}

.lvr-footer .footer-column__list a {
  font-family: var(--lvr-font-sans);
  font-size: 0.85rem;
  color: oklch(0.97 0 0 / 0.7);
}

.lvr-footer .footer-column__list a:hover {
  color: var(--lvr-primary);
  text-decoration: underline;
}

.lvr-footer .footer-logos-container {
  justify-content: flex-start;
}

.lvr-footer .footer-social-icons {
  justify-content: flex-start;
}

.lvr-footer .footer-social-icons a {
  color: oklch(0.97 0 0 / 0.85);
}

.lvr-footer .footer-social-icons a:hover {
  color: var(--lvr-primary);
  transform: translateY(-2px);
}

/* Copyright: barra en tono más oscuro que --secondary + borde superior sutil (RF-9) */
.lvr-footer .footer-copyright {
  background-color: oklch(0.16 0.02 260);
  border-top: 1px solid oklch(0.97 0 0 / 0.12);
  color: oklch(0.97 0 0 / 0.75);
  font-size: 0.75rem;
}

.lvr-footer .footer-copyright a {
  color: oklch(0.97 0 0 / 0.9);
  text-decoration: underline;
}

.lvr-footer .footer-copyright a:hover {
  color: var(--lvr-primary);
}

/* --- FABs (RF-9/F6): rounded-full 56px, WhatsApp --success, scroll-top --foreground, sombra Lovable.
   La clase .show de main.js:92-94 (aparición a los 300px) y los ids/clases existentes NO se tocan. --- */
.lvr-footer.floating-buttons-container {
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 20;
  gap: 0.75rem;
}

.lvr-footer .float-btn {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  font-size: 1.5rem;
  box-shadow: var(--lvr-shadow-card);
}

.lvr-footer .float-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--lvr-shadow-card);
}

.lvr-footer .btn-whatsapp {
  background-color: var(--lvr-success);
}

.lvr-footer .btn-scroll-top {
  background-color: var(--lvr-foreground);
}

/* --- Foco visible en footer/features/FABs (RF-11) --- */
.lvr-footer a:focus-visible,
.lvr-footer button:focus-visible {
  outline: 2px solid var(--lvr-primary);
  outline-offset: 2px;
}

/* 6. RESPONSIVE / A11Y TRANSVERSAL (T6) — la base mobile-first vive en los bloques 2–5
      (@media 640: CTA WhatsApp + grids 4col + features 3col · 768: hero py-10 px-12 + h1 2.6rem
      + footer 5col · 1024: nav wrap + grids 7col). Este bloque corrige los desajustes
      detectados en la auditoría responsive/a11y final (RF-10/RF-11). */

/* --- Alineación de contenedores al eje de 1280px (pixel-perfect RF-10): styles.css usa
   --container-padding:3rem (o sin tope) en footer/carruseles/banner, lo que desalineaba
   sus bordes con el header/hero (1248px de contenido a 1280 de viewport). --- */
.lvr-footer .header-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Categorías (.overlap-container) y marcas (.overlap-container1): sólo se usan en home.php
   (verificado por grep) → ajuste sin scope, como N4/N5. */
.overlap-container,
.overlap-container1 {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Carruseles de producto: scope .lvr-home OBLIGATORIO (.products-container se comparte con
   /productos, RF-13). El ancho tope incluye su propio margen para igualar la columna de 1248px. */
.lvr-home .products-container {
  width: calc(100% - 2rem);
  max-width: calc(1280px - 2rem);
  margin-inline: auto;
}

/* Banner: scope .lvr-banner (la clase viste la section de home.php; .home-banner-section
   existe también en admin, que NO carga lvr.css). Iguala la columna de 1248px; el margen
   vertical sigue mandando styles.css (3rem base / 1rem ≤768). */
.lvr-banner {
  width: calc(100% - 2rem);
  max-width: calc(1280px - 2rem);
  margin-inline: auto;
}

/* Foco visible en los enlaces/controles del home (RF-11): tiles de categoría/marca, cards de
   producto y CTAs scopeados a .lvr-home. */
.lvr-home a:focus-visible,
.lvr-home button:focus-visible {
  outline: 2px solid var(--lvr-primary);
  outline-offset: 2px;
}

/* Dropdown móvil (≤900px): styles.css lo posiciona como panel lateral DERECHO (right:0,
   width:55%); la regla base del bloque 2 fija left:0 y, al ser más específica, anulaba
   left:auto → el panel tapaba los enlaces del nav a la izquierda. Se restaura la hoja derecha. */
@media screen and (max-width: 900px) {
  .lvr-header .dropdown-menu {
    left: auto;
  }
}

/* 7. NEUTRALIZACIONES — sobreescriben styles.css SIN editarlo. SIEMPRE AL FINAL del archivo (T2–T6) */

/* N1 — Header Ciclo 1 (styles.css:39-49): blanco translúcido tipo Lovable en vez de negro;
   se CONSERVAN position:sticky / top:0 / z-index:1000 (contrato scroll-header de main.js).
   NOTA: la spec/plan escriben ".lvr-header .main-header" (descendiente), pero la clase scope
   va en el MISMO elemento (<header class="main-header lvr-header">), por lo que ese selector
   no coincidiría con nada; se usa el selector compuesto .lvr-header.main-header (misma
   especificidad 0,2,0 y mismo alcance defensivo: .main-header sólo vive en header.php). */
.lvr-header.main-header {
  background: oklch(0.985 0.004 80 / 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lvr-border);
  padding: 0;
}

/* N2 — Altura del slider (D1 = Opción A): styles.css:561 fija aspect-ratio 3.5/1, insuficiente
   para el overlay. Se deroga POR CASCADA (misma especificidad 0,2,0 y lvr.css se carga después)
   a 4/5 en base (legibilidad a 375px, sin recorte del texto) y 16/9 desde 768px (≈ hero de
   Lovable). styles.css INTACTO; las imágenes conservan object-fit:cover (styles.css:573-585). */
.home-slider.swiper {
  aspect-ratio: 4/5;
}

@media (min-width: 768px) {
  .home-slider.swiper {
    aspect-ratio: 16/9;
  }
}

/* N3 — Velo/fade inferior de styles.css:641-656 (z-index:5, por encima del overlay y de las
   flechas): queda OCULTO para que mande el gradiente de legibilidad de Lovable.
   styles.css INTACTO. */
.home-slider.swiper::after {
  display: none;
}

/* N4 — styles.css:756-760: .overlap-container{margin-top:-200px} montaba las categorías sobre el
   slider (D2). Flujo normal tipo Lovable (mt-6 = 24px). styles.css INTACTO. */
.overlap-container {
  margin-top: 1.5rem;
}

/* N5 — styles.css:1026 (@media ≤1024px): margin-top:-150px. Se REAFIRMA el flujo normal dentro del
   mismo rango de viewport (mismo selector, lvr.css va después → gana). */
@media (max-width: 1024px) {
  .overlap-container {
    margin-top: 1.5rem;
  }
}

/* N6 — styles.css:553-557: .home-section{padding-bottom:110px;margin-bottom:-100px} creaba un
   hueco de ~110px entre slider y categorías (M2). Sin solape ni hueco. */
.home-section {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* N7 — styles.css:728-736: 7 col fijas con flex-wrap:nowrap + overflow-x:auto (scroll lateral).
   Ahora wrap con 3 col base → 4 ≥640px → 7 ≥1024px (máximo por breakpoint; TODAS las filas
   caben porque el grid acepta filas extra = wrap natural). */
.category-grid,
.brand-grid {
  grid-template-columns: repeat(3, 1fr);
  flex-wrap: wrap;
  overflow-x: visible;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .category-grid,
  .brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-grid,
  .brand-grid {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* N8 — styles.css:743-744 OCULTABA categorías/marcas ≥8 (selector idéntico → gana el orden de
   lvr.css). display:flex restaura el layout interno del card ⇒ TODAS visibles (D2/M1). */
.category-grid > *:nth-child(n+8),
.brand-grid > *:nth-child(n+8) {
  display: flex;
}

/* N9 — styles.css:869-872 congelaba los slides en 255x350 (!important). Scope .lvr-home
   OBLIGATORIO (.products-container/.product-card* se comparten con /productos, RF-13).
   Ancho explícito 320px porque home.js fija slidesPerView:'auto' → el ancho lo manda el CSS (plan R4).
   !important SÓLO porque styles.css ya lo usa en esas reglas. */
.lvr-home .products-container .swiper-slide {
  width: 320px;
  max-width: 320px !important;
  max-height: none !important;
}

/* N10 — styles.css:883-892: .product-card__inner con max-w/max-h 255x350 !important (contenido
   recortado). Scope .lvr-home obligatorio (RF-13). */
.lvr-home .product-card__inner {
  max-width: none !important;
  max-height: none !important;
}

/* N11 — styles.css:979-992: .product-card__tag con max-w/max-h 255x350 !important (herencia rara
   en los tags NUEVO/OFERTA). Scope .lvr-home obligatorio (RF-13). */
.lvr-home .product-card__tag {
  max-width: none !important;
  max-height: none !important;
}

/* N12 — Features mobile-first (RF-6/RF-10): styles.css:371-375 fija 3 col + texto centrado en TODOS
   los anchos, :384 ponía divisor vertical entre cards y :512-520 pasaba a 1 col ≤900px con divisor
   inferior. Lovable (index.tsx:134): 1 col en base → 3 ≥640px, SIN divisores (cada card ya tiene su
   propio borde) y texto a la izquierda. styles.css INTACTO. */
.lvr-footer .features-grid {
  grid-template-columns: 1fr;
  gap: 0.75rem;
  text-align: left;
}

.lvr-footer .feature-box:not(:last-child) {
  border-right: none;
  border-bottom: none;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .lvr-footer .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* N13 — Footer grid (RF-9/RF-10): styles.css:422-427 fija 5 col en TODOS los anchos, :521-528 pasa a
   2 col ≤900px con .footer-column:last-child en span 2 + centrado y :536-540 a 1 col ≤550px con
   text-align:center. Lovable: 1 col en base (apiladas a 375px) → 5 ≥768px, alineación a la izquierda.
   styles.css INTACTO. */
.lvr-footer .footer-main-grid {
  grid-template-columns: 1fr;
  text-align: left;
}

.lvr-footer .footer-column:last-child {
  grid-column: auto;
  text-align: left;
}

@media (min-width: 768px) {
  .lvr-footer .footer-main-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}