/* =========================================================
   Plásticos Espinal · web pública
   «Vitrina de mostrador»: los patrones de una tienda grande
   (franja, portada en escena, categorías en carrusel, mosaico
   por negocio, banners y franja de confianza) con la marca,
   los colores y la letra del CRM. Nada de librerías.
   ========================================================= */

/* ---------- 1. Fuentes y tokens ---------- */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo Black"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/archivoblack-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Color: valores idénticos al :root del CRM. No se inventa ningún color. */
  --noche: #0e1a47;  --noche-2: #14235c;
  --azul: #1e49b8;   --azul-osc: #16358f;
  --rojo: #e63927;   --rojo-osc: #c42b1c;          /* --rojo NUNCA como texto */
  --amarillo: #ffc933; --amarillo-claro: #ffd45c; --amarillo-osc: #f0b400;
  --verde: #0f7a43;  --verde-osc: #0b5c33;  --verde-eco: #12522f;
  --fondo: #eef2fc;  --blanco: #ffffff;  --tint: #f5f8ff;
  --tinte-azul: #e4e9f6;  --tinte-azul-2: #d7def2;
  --tinte-verde: #e7f2ec; --tinte-rojo: #fcebe9;
  --texto: #131a33;  --texto-2: #4a5470;
  --linea: #dde3f5;  --linea-2: #c3cdeb;
  --sobre-noche: #c7d1f0; --sobre-noche-2: #b7c2e6;
  --cinta: repeating-linear-gradient(135deg, var(--rojo) 0 16px, var(--azul) 16px 32px);

  /* Tipografía */
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --fs-h1: clamp(1.875rem, 1.2rem + 2.6vw, 3.125rem);
  --fs-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2rem);
  --fs-h3: 1.1875rem;
  --fs-bajada: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-cuerpo: 1.0625rem;
  --fs-chico: 1rem;
  --fs-cifra: clamp(1.75rem, 1.4rem + 1vw, 2.125rem);

  /* Forma */
  --radio-sm: 8px; --radio-icono: 10px; --radio: 12px; --radio-logo: 14px; --radio-lg: 16px; --radio-xl: 24px; --pill: 100px;

  /* Sombras */
  --dura-sm: 0 1px 2px rgba(19,26,51,.06), 0 2px 6px rgba(19,26,51,.08);
  --dura: 0 1px 3px rgba(19,26,51,.06), 0 3px 10px rgba(19,26,51,.07), 0 10px 24px -10px rgba(19,26,51,.12);
  --elevada: 0 4px 14px rgba(19,26,51,.10), 0 12px 30px -6px rgba(19,26,51,.16);
  --sombra-boton: 0 2px 6px rgba(4,8,26,.18);
  --sombra-verde: 0 2px 6px rgba(15,122,67,.25);
  --sombra-verde-hover: 0 4px 12px rgba(15,122,67,.30);
  --halo-amarillo: 0 0 0 3px rgba(255,201,51,.35);
  --halo-azul: 0 0 0 3px rgba(30,73,184,.16);
  --halo-verde: 0 0 0 3px rgba(15,122,67,.18);
  --halo-blanco: 0 0 0 3px rgba(255,255,255,.28);

  /* Espacio (base 4) */
  --contenedor: 75rem; /* 1200 px con letra de 16 px; crece si el usuario agranda la letra */
  --gutter: clamp(16px, 2.4vw, 32px);
  --seccion: clamp(48px, 6.4vw, 80px);
  --hueco: clamp(12px, 1.6vw, 20px);

  /* Movimiento (curvas del CRM) */
  --curva: cubic-bezier(.4, 0, .2, 1);
  --salida: cubic-bezier(.19, 1, .22, 1);
  --t-mover: 120ms;
  --t: 150ms;
  --t-2: 200ms;
  --t-entrar: 500ms;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* hidden siempre esconde, aunque la clase diga display: grid o flex (catálogo, ficha, filtros) */
[hidden] { display: none !important; }
/* scroll-padding-bottom: al tabular, el foco no queda escondido bajo la burbuja de WhatsApp */
html { scroll-padding-top: 16px; scroll-padding-bottom: 88px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto-2);
  font: 400 var(--fs-cuerpo)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1, h2, h3 { color: var(--texto); margin: 0; }
p { margin: 0; }
/* Sin palabras sueltas en el último renglón */
p, li, dd, figcaption { text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
b, strong { font-weight: 700; color: var(--texto); }

.contenedor {
  box-sizing: content-box;
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.seccion { padding-block: var(--seccion); background: var(--fondo); }
.seccion--blanca { background: var(--blanco); }
.seccion--franja { padding-block: clamp(32px, 4vw, 48px); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nw { white-space: nowrap; }

/* Hijos de rejillas: que puedan encogerse */
.cabecera__fila > *, .mosaico > *, .banners > *, .confianza > *, .nosotros__rejilla > *,
.contacto__rejilla > *, .pie__rejilla > *, .cifras > * { min-width: 0; }

/* ---------- 3. Íconos ---------- */
.icono { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icono-wa { fill: currentColor; stroke: none; }
.icono-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radio-icono); background: var(--tinte-azul); color: var(--azul); flex: none; }
.icono-tile--verde { background: var(--tinte-verde); color: var(--verde); }
.icono-tile--rojo { background: var(--tinte-rojo); color: var(--rojo-osc); }
.icono-tile--amarillo { background: #fff4d1; color: var(--noche); }

/* ---------- 4. Foco y salto ---------- */
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; }
.anuncio :focus-visible, .pie :focus-visible, .banner--noche :focus-visible, .sector :focus-visible { outline-color: #fff; }

.saltar {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 0 20px; min-height: 48px; display: inline-flex; align-items: center;
  background: var(--amarillo); color: var(--noche); font-weight: 700;
  border-radius: var(--pill); text-decoration: none;
}
.saltar:focus { top: 12px; }
.saltar:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }

/* ---------- 5. Franja de aviso ---------- */
.anuncio { background: var(--noche); color: #fff; font-size: var(--fs-chico); line-height: 1.35; }
.anuncio__fila { display: flex; align-items: center; justify-content: center; gap: 8px 32px; min-height: 40px; padding-block: 6px; text-align: center; }
.anuncio p { display: inline-flex; align-items: center; gap: 8px; }
.anuncio .icono { width: 20px; height: 20px; color: var(--amarillo); }
.anuncio b { color: var(--amarillo); }
.anuncio__extra { color: var(--sobre-noche); }
@media (max-width: 899px) { .anuncio__extra { display: none !important; } }

/* ---------- 6. Cabecera ---------- */
/* Blanca, con el logo a la izquierda y lo de pedir a la derecha; debajo, la banda del menú.
   Desde 900 px queda fija arriba al bajar. */
.cabecera { position: relative; z-index: 30; background: #fff; transition: box-shadow var(--t-2) var(--curva); }
@media (min-width: 900px) {
  .cabecera { position: sticky; top: 0; }
  html { scroll-padding-top: 148px; }
}
.cabecera.is-scrolled { box-shadow: 0 6px 18px -8px rgba(14,26,71,.22); }
/* Sin banda de menú (404): una raya separa la cabecera del fondo */
.cabecera:not(:has(.menu)) { border-bottom: 1px solid var(--linea); }

.cabecera__fila { display: flex; align-items: center; gap: 16px; min-height: 88px; }
.logo { display: inline-flex; align-items: center; margin-right: auto; border-radius: var(--radio-sm); transition: transform var(--t-mover) var(--salida); }
.logo img { height: 60px; width: auto; }
@media (hover: hover) and (pointer: fine) { .logo:hover { transform: translateY(-1px); } }
.logo:active { transform: translateY(1px) scale(.98); }

/* Dato de contacto con ícono: dirección y teléfono (solo en pantallas anchas) */
.contacto-corto {
  display: grid; grid-template-columns: 40px auto; column-gap: 10px; align-items: center;
  color: var(--texto); text-decoration: none; line-height: 1.25;
}
.contacto-corto .icono-tile { grid-row: span 2; width: 40px; height: 40px; }
.contacto-corto .icono-tile .icono { width: 20px; height: 20px; }
.contacto-corto b { font-size: var(--fs-chico); font-variant-numeric: tabular-nums; white-space: nowrap; }
.contacto-corto small { font-size: .9375rem; color: var(--texto-2); white-space: nowrap; }
a.contacto-corto { border-radius: var(--radio-sm); }
@media (hover: hover) and (pointer: fine) { a.contacto-corto:hover b { color: var(--azul); text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 1099px) { .contacto-corto--dir { display: none; } }

/* Teléfono en círculo (celular): el texto sigue para el lector de pantalla */
.boton-redondo {
  display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid var(--linea-2); background: #fff; color: var(--azul);
  transition: background-color var(--t) var(--curva), transform var(--t-mover) var(--salida);
}
.boton-redondo:active { transform: translateY(1px) scale(.98); }
@media (max-width: 899px) {
  .contacto-corto--tel { display: none; }
  .boton-redondo { display: grid; }
  .cabecera__fila { min-height: 72px; gap: 10px; }
  .logo img { height: 48px; }
}
@media (max-width: 380px) { .logo img { height: 42px; } }

/* Banda del menú: pastillas de texto con raya amarilla en la sección actual */
.menu--banda { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: #fff; }
.menu--banda ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 4px; }
.menu--banda a {
  position: relative; display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px;
  color: var(--texto); font-weight: 600; font-size: var(--fs-chico); text-decoration: none; white-space: nowrap;
  transition: color var(--t) var(--curva);
}
.menu--banda a::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; border-radius: 3px;
  background: var(--amarillo); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-2) var(--salida);
}
@media (hover: hover) and (pointer: fine) { .menu--banda a:hover { color: var(--azul); } .menu--banda a:hover::after { transform: scaleX(1); } }
.menu--banda a[aria-current="true"] { color: var(--azul-osc); }
.menu--banda a[aria-current="true"]::after { transform: scaleX(1); }
.menu--banda a:focus-visible { outline-offset: -3px; border-radius: var(--radio-sm); }
/* En el celular la banda se desliza de lado, con un desvanecido que avisa que hay más */
@media (max-width: 899px) {
  .menu--banda .contenedor { padding-inline: 0; }
  .menu--banda ul {
    justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-inline: 8px;
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .menu--banda ul::-webkit-scrollbar { display: none; }
  .menu--banda a { min-height: 48px; padding: 0 12px; }
  .menu--banda a::after { left: 12px; right: 12px; bottom: 6px; }
}

/* ---------- 7. Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border: 2px solid transparent; border-radius: var(--pill);
  font: 700 var(--fs-cuerpo)/1 var(--font); text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap;
  transition: transform var(--t-mover) var(--salida), background-color var(--t) var(--curva),
              border-color var(--t) var(--curva), box-shadow var(--t) var(--curva), color var(--t) var(--curva);
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton-grande { min-height: 56px; padding: 0 28px; font-size: 1.125rem; }
.boton-amarillo { background: var(--amarillo); color: var(--noche); box-shadow: var(--sombra-boton); }
.boton-azul { background: var(--azul); color: #fff; box-shadow: var(--sombra-boton); }
.boton-wa { background: var(--verde); color: #fff; box-shadow: var(--sombra-verde); }
.boton-fantasma { background: #fff; color: var(--azul); border-color: var(--azul); }
.boton-claro { background: #fff; color: var(--noche); box-shadow: var(--sombra-boton); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover { transform: translateY(-2px); }
  .boton-amarillo:hover { background: var(--amarillo-claro); box-shadow: var(--sombra-boton), var(--halo-amarillo); }
  .boton-azul:hover { background: var(--azul-osc); box-shadow: var(--sombra-boton), var(--halo-azul); }
  .boton-wa:hover { background: var(--verde-osc); box-shadow: var(--sombra-verde-hover), var(--halo-verde); }
  .boton-fantasma:hover { background: var(--tinte-azul); color: var(--azul-osc); border-color: var(--azul-osc); box-shadow: var(--halo-azul); }
  .boton-claro:hover { background: var(--tint); box-shadow: var(--sombra-boton), var(--halo-blanco); }
}
.boton:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.boton-amarillo:active { background: var(--amarillo-osc); }

/* «Pida ahora» de la cabecera: en el celular queda el círculo amarillo con el ícono */
.boton-cabecera { min-height: 48px; padding: 0 22px; }
@media (max-width: 899px) {
  .boton-cabecera { width: 48px; padding: 0; }
  .boton-cabecera__texto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Enlace terciario con flecha */
.enlace-terciario {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; color: var(--azul);
  text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.enlace-terciario .icono { width: 18px; height: 18px; transition: transform var(--t) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .enlace-terciario:hover { color: var(--azul-osc); }
  .enlace-terciario:hover .icono { transform: translateX(3px); }
}

/* ---------- 8. Títulos de sección: raya amarilla debajo ---------- */
.titulo-fila { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.titulo-fila > div { display: grid; gap: 12px; max-width: 46rem; }
.titulo {
  font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; letter-spacing: .005em; text-wrap: balance;
}
.titulo::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 12px; border-radius: 5px; background: var(--amarillo); }
.titulo-bajada { font-size: var(--fs-bajada); line-height: 1.55; color: var(--texto-2); }
.titulo--centro { text-align: center; }
.titulo--centro::after { margin-inline: auto; }
@media (max-width: 599px) { .titulo-fila { margin-bottom: 20px; } }

/* ---------- 9. Portada ---------- */
/* Celular: la foto vertical con el título encima de la pared vacía; abajo la bajada y los botones.
   Tableta: título y botones arriba, la foto ancha debajo.
   Computador (1100 px o más): todo sobre la foto, en el aire de la izquierda. */
.portada { padding-block: 20px clamp(28px, 4vw, 44px); }
.portada__marco { display: grid; gap: 20px; grid-template-areas: "foto" "resto"; }
.portada__foto { grid-area: foto; position: relative; display: block; overflow: hidden; border-radius: var(--radio-xl); background: var(--tinte-azul); }
.portada__foto img { width: 100%; height: 100%; object-fit: cover; }
.portada__cabeza { grid-area: foto; align-self: start; position: relative; z-index: 1; display: grid; gap: 10px; padding: 24px 20px 0; }
.portada__resto { grid-area: resto; position: relative; z-index: 1; display: grid; gap: 20px; }
.portada__etiqueta {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px;
  border-radius: var(--pill); background: rgba(255,255,255,.82); color: var(--azul-osc);
  font-size: .9375rem; font-weight: 700; letter-spacing: .02em;
}
.portada__etiqueta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); flex: none; }
.portada h1 {
  font-family: var(--display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.06;
  letter-spacing: -.01em; text-wrap: balance; color: var(--noche);
}
.portada h1 .resaltado { display: block; color: var(--azul); }
.portada__bajada { max-width: 34rem; font-size: var(--fs-bajada); line-height: 1.55; color: var(--texto); }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) {
  .portada { padding-top: 16px; }
  .portada__foto { aspect-ratio: 4 / 5; }
  .portada__botones { flex-direction: column; }
  .portada__botones .boton { width: 100%; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .portada__marco { grid-template-areas: "cabeza" "resto" "foto"; gap: 20px; }
  .portada__cabeza { grid-area: cabeza; padding: 0; }
  .portada__etiqueta { background: #fff; }
  .portada__foto { aspect-ratio: 12 / 5; }
}
@media (min-width: 1100px) {
  .portada__marco {
    position: relative; gap: 0; aspect-ratio: 12 / 5;
    grid-template-columns: minmax(0, 46%) 1fr; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: none;
    border-radius: var(--radio-xl); overflow: hidden; background: var(--tinte-azul);
  }
  .portada__foto { grid-area: 1 / 1 / 5 / 3; border-radius: 0; }
  /* Velo claro solo a la izquierda: el texto se lee sin tapar el producto */
  .portada__foto::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(238,242,252,.72) 0%, rgba(238,242,252,.45) 30%, rgba(238,242,252,0) 46%);
  }
  .portada__cabeza { grid-area: 2 / 1; padding: 0 0 0 clamp(40px, 4vw, 56px); gap: 14px; }
  .portada__resto { grid-area: 3 / 1; padding: 20px 0 0 clamp(40px, 4vw, 56px); gap: 24px; }
  .portada h1 { font-size: clamp(2.5rem, 3.4vw, 3rem); }
  .portada__bajada { max-width: 25rem; }
  /* Botones de tamaño normal: los dos caben antes del producto */
  .portada__botones .boton-grande { min-height: 52px; padding: 0 22px; font-size: var(--fs-cuerpo); }
  /* «Ver productos» se montaría sobre el contenedor de la foto; el menú ya lleva a Productos */
  .portada__secundario { display: none; }
}

/* Entrada de la portada: la foto se asienta y el texto sube en orden. Solo opacidad y movimiento. */
@keyframes asentar { from { transform: scale(1.06); } to { transform: none; } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .portada__foto img { animation: asentar 1.4s var(--salida) both; }
  .portada__etiqueta, .portada h1, .portada__bajada, .portada__botones { animation: subir var(--t-entrar) var(--salida) both; }
  .portada h1 { animation-delay: 70ms; }
  .portada__bajada { animation-delay: 140ms; }
  .portada__botones { animation-delay: 210ms; }
}

/* ---------- 10. Marcas ---------- */
.marcas { background: var(--blanco); padding-block: 22px; border-block: 1px solid var(--linea); }
.marcas__rejilla { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px; }
.marcas__titulo { font-family: var(--font); font-size: var(--fs-chico); font-weight: 600; line-height: 1.35; color: var(--texto-2); }
/* Cada nombre lleva su punto delante; la lista se corre 34 px y se recorta: el punto del inicio de cada renglón queda oculto */
.marcas__lista {
  list-style: none; margin: 0 0 0 -34px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 4px;
  clip-path: inset(0 0 0 34px);
}
.marcas__lista li {
  display: inline-flex; align-items: center;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem); font-weight: 700; line-height: 1.3; color: var(--azul-osc); white-space: nowrap;
}
.marcas__lista li::before {
  content: ""; width: 6px; height: 6px; margin-inline: 14px; border-radius: 50%; background: var(--amarillo-osc); flex: none;
}
/* En pantallas angostas los renglones van centrados y el recorte no esconde el punto: pastillas */
@media (max-width: 899px) {
  .marcas__lista { margin: 0; clip-path: none; gap: 8px; }
  .marcas__lista li { min-height: 36px; padding: 0 14px; border-radius: var(--pill); background: var(--tinte-azul); font-size: 1.0625rem; }
  .marcas__lista li::before { display: none; }
}

/* ---------- 11. Carrusel (categorías) ---------- */
/* Sin JS es una fila que se desliza de lado con «snap». principal.js le pone flechas, puntos,
   pausa y el avance solo cada 5 s (se detiene con el mouse encima, con el foco o al tocarlo). */
.carrusel { position: relative; }
.carrusel__pista {
  --por-vista: 2;
  position: relative; /* contiene los .sr-only de las tarjetas: si no, escapan del recorte y ensanchan la página */
  list-style: none; margin: 0; padding: 6px 2px 14px;
  display: grid; grid-auto-flow: column; gap: var(--hueco);
  grid-auto-columns: calc((100% - (var(--por-vista) - 1) * var(--hueco)) / var(--por-vista));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px;
}
.carrusel__pista > li { scroll-snap-align: start; display: flex; }
@media (min-width: 560px) { .carrusel__pista { --por-vista: 3; } }
@media (min-width: 900px) { .carrusel__pista { --por-vista: 4; } }
@media (min-width: 1100px) { .carrusel__pista { --por-vista: 5; } }
.carrusel--listo .carrusel__pista { scrollbar-width: none; }
.carrusel--listo .carrusel__pista::-webkit-scrollbar { display: none; }

.carrusel__controles { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.carrusel__flecha, .carrusel__pausa {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 2px solid var(--linea-2); background: #fff; color: var(--azul); cursor: pointer;
  transition: background-color var(--t) var(--curva), border-color var(--t) var(--curva), transform var(--t-mover) var(--salida), opacity var(--t) var(--curva);
}
.carrusel__flecha .icono, .carrusel__pausa .icono { width: 20px; height: 20px; }
.carrusel__flecha--ant .icono { transform: rotate(180deg); }
.carrusel__flecha[aria-disabled="true"] { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .carrusel__flecha:not([aria-disabled="true"]):hover, .carrusel__pausa:hover { background: var(--tinte-azul); border-color: var(--azul); }
}
.carrusel__flecha:not([aria-disabled="true"]):active, .carrusel__pausa:active { transform: scale(.94); }
.carrusel__pausa { margin-left: 4px; border-width: 1.5px; color: var(--texto-2); }
.carrusel__pausa .icono { width: 16px; height: 16px; }
.carrusel__puntos { display: flex; align-items: center; gap: 2px; }
.carrusel__punto {
  display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
}
.carrusel__punto::before {
  content: ""; width: 9px; height: 9px; border-radius: var(--pill); background: var(--texto-2); /* 3:1 o más contra el fondo */
  transition: width var(--t-2) var(--salida), background-color var(--t-2) var(--curva);
}
.carrusel__punto[aria-current="true"]::before { width: 24px; background: var(--azul); }
@media (max-width: 359px) {
  .carrusel__controles { gap: 8px; }
  .carrusel__punto { width: 20px; }
  .carrusel__punto[aria-current="true"]::before { width: 16px; }
}
.carrusel__punto:focus-visible { outline-offset: -6px; border-radius: var(--pill); }

/* Tarjeta de categoría: foto arriba, pie azul con el nombre y el botón de contorno */
.cat {
  position: relative; display: flex; flex-direction: column; width: 100%;
  border-radius: var(--radio-lg); overflow: hidden; background: var(--azul);
  box-shadow: var(--dura-sm); color: #fff; text-decoration: none;
  transition: transform var(--t-2) var(--salida), box-shadow var(--t-2) var(--curva);
}
.cat__foto { overflow: hidden; background: var(--tinte-azul); }
.cat__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s var(--salida); }
.cat__pie { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.cat h3 { color: #fff; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.cat p { font-size: var(--fs-chico); line-height: 1.4; color: #dfe6fb; }
.cat__boton {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; margin-block-start: 12px;
  border: 2px solid rgba(255,255,255,.9); border-radius: var(--pill);
  font-size: var(--fs-chico); font-weight: 700; color: #fff;
  transition: background-color var(--t) var(--curva), color var(--t) var(--curva);
}
.cat__boton .icono { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .cat:hover { transform: translateY(-4px); box-shadow: var(--elevada); }
  .cat:hover .cat__foto img { transform: scale(1.05); }
  .cat:hover .cat__boton { background: #fff; color: var(--azul-osc); }
}
.cat:active { transform: translateY(1px); box-shadow: var(--dura-sm); }
.cat:focus-visible { outline-offset: 2px; }
@media (max-width: 559px) {
  .cat__pie { padding: 12px 12px 14px; }
  .cat h3 { font-size: 1.0625rem; }
  .cat p { display: none; }
  .cat__boton { align-self: stretch; justify-content: center; }
}
/* 320 px: los títulos no se parten a media palabra ni el de la portada pisa los productos */
@media (max-width: 359px) {
  .portada h1 { font-size: 2.125rem; }
  .cat h3 { font-size: .9375rem; }
  .sector h3 { font-size: .9375rem; }
}

/* ---------- 12. Mosaico por tipo de negocio ---------- */
/* Celular y tableta: dos columnas en espejo (alta | dos bajas, dos bajas | alta).
   Computador: cuatro columnas (alta | dos | dos | alta). Siempre parejo, sin filas cojas. */
.mosaico {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; gap: var(--hueco);
  grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, clamp(150px, 38vw, 230px));
}
.mosaico > li { display: flex; }
.mosaico > .mosaico__alto { grid-row: span 2; }
@media (min-width: 700px) {
  .mosaico { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(200px, 21vw, 250px)); }
}
.sector {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; width: 100%;
  border-radius: var(--radio-lg); overflow: hidden; background: var(--noche);
  padding: 18px; color: #fff; text-decoration: none; box-shadow: var(--dura-sm);
  transition: transform var(--t-2) var(--salida), box-shadow var(--t-2) var(--curva);
}
.sector img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--salida); }
.sector::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,26,71,.94) 0%, rgba(14,26,71,.7) 32%, rgba(14,26,71,.25) 58%, rgba(14,26,71,0) 78%);
}
.sector h3 { color: #fff; font-size: 1.1875rem; font-weight: 700; line-height: 1.2; text-wrap: balance; }
.sector p { display: none; margin-top: 4px; font-size: var(--fs-chico); line-height: 1.4; color: #e3e8f8; }
.sector__mas { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--amarillo); }
.sector__mas .icono { width: 18px; height: 18px; transition: transform var(--t) var(--curva); }
@media (hover: hover) and (pointer: fine) {
  .sector:hover { transform: translateY(-4px); box-shadow: var(--elevada); }
  .sector:hover img { transform: scale(1.05); }
  .sector:hover .sector__mas .icono { transform: translateX(3px); }
}
.sector:active { transform: translateY(1px); }
/* La frase solo va en las altas del computador: en las bajas taparía la foto */
@media (min-width: 900px) { .mosaico__alto .sector p { display: block; } }
@media (max-width: 899px) {
  .sector::before { background: linear-gradient(to top, rgba(14,26,71,.95) 0%, rgba(14,26,71,.86) 42%, rgba(14,26,71,.55) 66%, rgba(14,26,71,0) 90%); }
  .sector { padding: 14px; }
  .sector h3 { font-size: 1.0625rem; }
  .sector__mas { margin-top: 6px; }
}

/* ---------- 13. Banners: uno oscuro y uno claro ---------- */
.banners { display: grid; gap: var(--hueco); }
@media (min-width: 900px) { .banners { grid-template-columns: 1fr 1fr; } }
.banner {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden;
  border-radius: var(--radio-xl); box-shadow: var(--dura-sm);
}
@media (max-width: 399px) { .banner .boton { white-space: normal; line-height: 1.25; padding-block: 10px; } }
.banner__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 24px; }
.banner__foto { min-height: 200px; }
@media (max-width: 599px) { .banner__foto img { aspect-ratio: 16 / 9; } }
.banner__foto img { width: 100%; height: 100%; object-fit: cover; }
.banner__eyebrow { font-size: .9375rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.banner h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.12; text-wrap: balance; }
.banner p { font-size: var(--fs-cuerpo); line-height: 1.5; max-width: 30rem; }
.banner .boton { margin-top: 8px; }
.banner--noche { background: var(--noche); color: var(--sobre-noche); }
.banner--noche::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cinta); z-index: 1; }
.banner--noche h2 { color: #fff; }
.banner--noche .banner__eyebrow { color: var(--amarillo); }
.banner--claro { background: var(--tinte-verde); color: var(--texto-2); border: 1px solid #cfe5d8; }
.banner--claro h2 { color: var(--verde-eco); }
.banner--claro .banner__eyebrow { color: var(--verde); }
@media (min-width: 600px) {
  .banner { grid-template-columns: 1.15fr 1fr; min-height: 300px; }
  .banner__texto { justify-content: center; padding: 36px 28px 36px 32px; }
  .banner__foto { min-height: 0; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .banner { grid-template-columns: 1fr; }
  .banner__foto { order: -1; height: 220px; }
}

/* ---------- 14. Franja de confianza ---------- */
.confianza { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hueco); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .confianza { grid-template-columns: repeat(4, 1fr); } }
.confianza li {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; row-gap: 2px; align-content: start;
  padding: 18px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
}
.confianza .icono-tile { grid-row: 1 / span 3; width: 48px; height: 48px; border-radius: 50%; }
.confianza b { font-size: 1.0625rem; line-height: 1.3; }
.confianza span:not(.icono-tile) { font-size: var(--fs-chico); line-height: 1.4; color: var(--texto-2); }
.confianza__enlace {
  grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px;
  font-size: var(--fs-chico); font-weight: 700; color: var(--azul-osc);
  text-decoration: underline; text-decoration-color: var(--amarillo); text-decoration-thickness: 3px; text-underline-offset: 5px;
}
@media (hover: hover) and (pointer: fine) { .confianza__enlace:hover { color: var(--azul); } }
@media (max-width: 599px) {
  .confianza li { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 4px; padding: 16px 12px; }
  .confianza .icono-tile { grid-row: auto; margin-bottom: 6px; }
  .confianza__enlace { grid-column: auto; justify-self: center; }
  .confianza b { font-size: 1rem; }
  .confianza span:not(.icono-tile) { font-size: .9375rem; }
}

/* ---------- 15. Nosotros y cifras ---------- */
.nosotros__rejilla { display: grid; gap: 32px; }
@media (min-width: 940px) { .nosotros__rejilla { grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; } }
.nosotros__texto p { max-width: 65ch; }
.nosotros__texto p + p { margin-top: 16px; }
.nosotros__resena { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }

.cifras { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.cifra {
  --c: var(--azul); --c-osc: var(--azul-osc);
  display: grid; grid-template-columns: 48px 1fr; gap: 2px 16px; align-items: center;
  background: #fff; border: 1px solid var(--linea); border-left: 5px solid var(--c); border-radius: var(--radio); padding: 18px 20px;
}
.cifra .icono-tile { grid-row: span 2; width: 48px; height: 48px; }
.cifra__num { font-size: var(--fs-cifra); font-weight: 700; line-height: 1.1; color: var(--c-osc); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cifra__texto { font-size: var(--fs-chico); line-height: 1.4; color: var(--texto-2); }
.cifra--verde { --c: var(--verde); --c-osc: var(--verde-osc); }
.cifra--rojo  { --c: var(--rojo-osc); --c-osc: var(--rojo-osc); }  /* filo en rojo oscuro: el rojo de la cinta no sale de la cinta */
@media (min-width: 600px) and (max-width: 939px) {
  .cifras { grid-template-columns: repeat(3, 1fr); }
  .cifra { grid-template-columns: 1fr; align-content: start; gap: 6px; border-left-width: 1px; border-top: 5px solid var(--c); }
  .cifra .icono-tile { grid-row: auto; margin-bottom: 6px; }
}

/* ---------- 16. Preguntas ---------- */
.preguntas__rejilla { display: grid; gap: 28px; }
@media (min-width: 940px) { .preguntas__rejilla { grid-template-columns: 4fr 8fr; gap: 56px; align-items: start; } }
.preguntas__lado { display: grid; gap: 16px; align-content: start; }
.preguntas__lado .boton { justify-self: start; }
@media (min-width: 940px) { .preguntas__lado { position: sticky; top: 168px; } }
.faq { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--dura-sm); transition: border-color var(--t) var(--curva), transform var(--t-mover) var(--salida); }
.faq + .faq { margin-top: 10px; }
.faq summary {
  list-style: none; display: grid; grid-template-columns: 1fr 32px; gap: 16px; align-items: center;
  min-height: 60px; padding: 14px 20px; border-radius: var(--radio); cursor: pointer;
  font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--texto);
  transition: background-color var(--t) var(--curva);
}
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tinte-azul); color: var(--azul); transition: transform var(--t-2) var(--curva), background-color var(--t) var(--curva); }
.faq .chev .icono { width: 20px; height: 20px; }
.faq[open] { border-color: var(--azul); }
.faq[open] summary { border-radius: var(--radio) var(--radio) 0 0; }
.faq[open] .chev { transform: rotate(180deg); background: var(--amarillo); color: var(--noche); }
.faq > p { margin: 0; padding: 0 20px 18px; color: var(--texto-2); max-width: 65ch; }
@media (hover: hover) and (pointer: fine) {
  .faq summary:hover { background: var(--tint); }
}
.faq:has(> summary:active) { transform: translateY(1px); }
.letra-chica {
  margin-top: 20px; padding: 16px 20px; background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: var(--fs-chico); line-height: 1.5; color: var(--texto-2);
  transition: border-color var(--t-2) var(--curva), box-shadow var(--t-2) var(--curva);
}
.letra-chica:target { border-color: var(--azul); box-shadow: var(--halo-azul); }
@media (max-width: 599px) { .preguntas__lado .boton { justify-self: stretch; } }

/* ---------- 17. Contacto ---------- */
.contacto__rejilla { display: grid; gap: 32px; }
@media (min-width: 940px) { .contacto__rejilla { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } }
.contacto__texto { display: grid; gap: 12px; }
.contacto__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
@media (max-width: 599px) { .contacto__acciones .boton { width: 100%; } }

.contacto-datos { margin: 0; display: grid; gap: 12px; }
.dato {
  position: relative; display: grid; gap: 2px;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px 18px 80px;
}
/* El ícono va dentro del <dt> (marcado válido) y se coloca a la izquierda */
.dato .icono-tile { position: absolute; left: 20px; top: 18px; }
.dato dt { font-size: var(--fs-chico); font-weight: 700; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.dato dd { margin: 0; font-size: var(--fs-cuerpo); line-height: 1.5; color: var(--texto); font-variant-numeric: tabular-nums; }
/* Rótulo a la izquierda, cifra a la derecha (como .total-fuerte del CRM) */
.dato--noche {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px;
  background: var(--noche); color: #fff; border: 0; border-radius: var(--radio-lg); padding: 20px 24px;
}
.dato--noche dt { font-family: var(--display); font-weight: 400; letter-spacing: .03em; color: #fff; }
.dato--noche a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 1.75rem; font-weight: 700; line-height: 1.1;
  color: var(--amarillo); font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .dato--noche a:hover { text-decoration: underline; text-decoration-color: #fff; text-underline-offset: 4px; } }
.dato--noche :focus-visible { outline-color: #fff; }

/* ---------- 18. Pie ---------- */
/* Abajo, 112px: la burbuja de WhatsApp va en todos los anchos y el pie le deja su espacio */
.pie { position: relative; background: var(--noche); color: var(--sobre-noche); padding: 56px 0 112px; font-size: var(--fs-chico); line-height: 1.5; }
.pie::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--cinta); }
.pie__rejilla { display: grid; gap: 36px; }
@media (min-width: 640px) { .pie__rejilla { grid-template-columns: 1fr 1fr; gap: 40px 32px; } }
@media (min-width: 1040px) { .pie__rejilla { grid-template-columns: 1.35fr .9fr 1.15fr 1.35fr; gap: 40px; } }
.pie h2 { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.pie h2::after { content: ""; display: block; width: 36px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--amarillo); }
.pie__logo { display: inline-flex; padding: 8px 14px; background: #fff; border-radius: var(--radio-logo); }
.pie__logo img { height: 52px; width: auto; }
.pie__lema { margin-top: 16px; max-width: 22rem; }
.pie__wa { margin-top: 18px; min-height: 48px; padding: 0 20px; font-size: var(--fs-chico); }
.menu--pie ul, .pie__lista { list-style: none; margin: 0; padding: 0; display: grid; }
.menu--pie ul { grid-template-columns: repeat(2, max-content); column-gap: 32px; }
@media (min-width: 1040px) { .menu--pie ul { grid-template-columns: 1fr; } }
.menu--pie a, .pie__lista a, .pie__datos a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--sobre-noche); text-decoration: none; text-underline-offset: 4px;
  transition: color var(--t) var(--curva);
}
@media (hover: hover) and (pointer: fine) { .menu--pie a:hover, .pie__lista a:hover, .pie__datos a:hover { color: #fff; text-decoration: underline; } }
.menu--pie a[aria-current="true"] { color: #fff; font-weight: 600; }
.pie__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pie__datos li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; min-height: 44px; }
.pie__datos .icono { width: 20px; height: 20px; color: var(--amarillo); }
.pie__datos a { padding-block: 4px; }
.pie__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); color: var(--sobre-noche-2); }

/* Burbuja de WhatsApp */
.wa-flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--verde); color: #fff; border: 3px solid #fff; box-shadow: var(--elevada);
  transition: transform var(--t-mover) var(--salida), background-color var(--t) var(--curva), box-shadow var(--t) var(--curva);
}
.wa-flotante .icono { width: 30px; height: 30px; }
@media (hover: hover) and (pointer: fine) { .wa-flotante:hover { background: var(--verde-osc); transform: translateY(-2px); box-shadow: var(--elevada), var(--halo-verde); } }
.wa-flotante:active { transform: translateY(1px) scale(.98); box-shadow: none; }
/* Foco de dos tonos: anillo blanco (se ve sobre el pie noche) entre dos azules (se ven sobre claro) */
.wa-flotante:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: var(--elevada), 0 0 0 9px var(--azul); }
/* Mientras se ven los botones de la portada, la burbuja sobra (la oculta principal.js) */
.wa-flotante.is-oculta { display: none; }

/* ---------- 19. Aparecer al bajar ---------- */
/* principal.js pone .revela-listo en <html> solo si hay IntersectionObserver y no se pidió
   menos movimiento; lo que ya se ve al cargar queda marcado .visto antes, sin parpadeo.
   Sin JS (o si falla) todo se ve normal: el CSS no esconde nada por su cuenta. */
@media screen { .revela-listo [data-revela]:not(.visto) { opacity: 0; transform: translateY(22px); } }
.revela-listo [data-revela] {
  transition: opacity var(--t-entrar) var(--salida), transform var(--t-entrar) var(--salida);
  transition-delay: var(--retraso, 0ms);
}

/* ---------- 20. Movimiento reducido, colores forzados, impresión ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .boton:hover, .boton:active, .cat:hover, .cat:active, .sector:hover, .sector:active, .wa-flotante:hover, .wa-flotante:active, .logo:hover, .logo:active { transform: none; }
  .cat:hover .cat__foto img, .sector:hover img, .enlace-terciario:hover .icono, .sector:hover .sector__mas .icono { transform: none; }
  .faq[open] .chev { transform: rotate(180deg); }
  .faq:has(> summary:active) { transform: none; }
}

@media (forced-colors: active) {
  .cat, .sector, .banner, .boton, .wa-flotante, .carrusel__punto::before { border: 2px solid CanvasText; }
  .menu--banda a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .carrusel__punto[aria-current="true"]::before { background: CanvasText; }
}

@media print {
  .anuncio, .cabecera, .wa-flotante, .boton, .carrusel__controles { display: none; }
  body { background: #fff; color: #000; }
  [data-revela] { opacity: 1 !important; transform: none !important; }
}

/* ---------- 21. Página de error (404.html) ---------- */
.error404 { display: grid; justify-items: center; gap: 16px; max-width: 40rem; margin-inline: auto; text-align: center; }
.error404__codigo { font-size: var(--fs-chico); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-osc); }
.error404 h1 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.error404 h1::after { content: ""; display: block; width: 64px; height: 5px; margin: 14px auto 0; border-radius: 5px; background: var(--amarillo); }
.error404 p { font-size: var(--fs-bajada); line-height: 1.55; }
.error404__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; }
@media (max-width: 599px) {
  .error404__botones { flex-direction: column; width: 100%; }
  .error404__botones .boton { width: 100%; }
}

/* ---------- 22. Páginas de texto (términos y datos personales) ---------- */
.migas ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--fs-chico); color: var(--texto-2); }
.migas li + li::before { content: "›"; margin-right: 8px; color: var(--texto-2); }
.migas a { display: inline-flex; align-items: center; min-height: 44px; color: var(--azul-osc); text-underline-offset: 4px; }
.migas [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }
.legal__cabeza { display: grid; gap: 12px; max-width: 46rem; margin-bottom: 32px; }
.legal__cabeza h1 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.legal__cabeza h1::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 14px; border-radius: 5px; background: var(--amarillo); }
.legal__bajada { font-size: var(--fs-bajada); line-height: 1.55; color: var(--texto); }
.legal__fecha { font-size: var(--fs-chico); color: var(--texto-2); }
.legal__rejilla { display: grid; gap: 24px; }
@media (min-width: 940px) { .legal__rejilla { grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; } }
.legal__indice { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 20px 22px; }
@media (min-width: 940px) { .legal__indice { position: sticky; top: 168px; } }
.legal__indice h2 { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.legal__indice ol { margin: 0; padding-left: 20px; }
.legal__indice a { display: inline-flex; align-items: center; min-height: 40px; color: var(--azul-osc); text-underline-offset: 4px; }
.legal__texto { display: grid; gap: 16px; max-width: 46rem; }
.legal__seccion { display: grid; gap: 10px; padding: 22px 24px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg); }
.legal__seccion:target { border-color: var(--azul); box-shadow: var(--halo-azul); }
.legal__seccion h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.legal__seccion p, .legal__seccion li { font-size: var(--fs-cuerpo); line-height: 1.6; color: var(--texto-2); }
.legal__seccion ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.legal__seccion a, .legal__ayuda a { color: var(--azul-osc); font-weight: 600; text-underline-offset: 4px; }
.legal__ayuda { padding: 4px 4px 0; color: var(--texto-2); }

/* ---------- 23. Catálogo público: tarjetas de producto, pestañas, filtros y ficha ---------- */
/* Rejilla: 2 / 3 / 4 columnas. La corta (inicio y parecidos) no se desliza de lado: con el mouse
   no se podía. Muestra 6 en celular y tableta (3 filas de 2, 2 de 3) y 8 en computador (2 de 4) */
.rejilla-prod { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hueco); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .rejilla-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rejilla-prod { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rejilla-prod--corta > li:nth-child(n+7) { display: none; }
@media (min-width: 1000px) {
  .rejilla-prod--corta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rejilla-prod--corta > li:nth-child(n+7) { display: flex; }
}
.rejilla-prod > li { display: flex; }

.tarjeta-prod {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden;
  transition: transform var(--t-2) var(--salida), box-shadow var(--t-2) var(--curva), border-color var(--t-2) var(--curva);
}
.tarjeta-prod__foto { position: relative; display: block; aspect-ratio: 1; background: #fff; border-bottom: 1px solid var(--linea); overflow: hidden; }
.tarjeta-prod__foto img { width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: transform .6s var(--salida); }
.tarjeta-prod__foto.es-referencia img { object-fit: cover; padding: 0; }
.sello-prod {
  position: absolute; left: 10px; top: 10px; padding: 4px 10px; border-radius: var(--pill);
  background: var(--amarillo); color: var(--noche); font-size: .8125rem; font-weight: 800; line-height: 1.2;
}
.sello-prod--agotado { background: #4f5872; color: #fff; }
.sello-ref {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: var(--pill);
  background: rgba(255,255,255,.92); color: var(--texto-2); font-size: .75rem; font-weight: 600; line-height: 1.3;
}
.tarjeta-prod__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.tarjeta-prod__cat { font-size: .8125rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--azul-osc); }
.tarjeta-prod h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.tarjeta-prod__nombre { color: var(--texto); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* El nombre estira su toque a toda la tarjeta; el botón de WhatsApp queda encima */
.tarjeta-prod__nombre::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tarjeta-prod__nombre:focus-visible { outline: none; }
.tarjeta-prod:has(.tarjeta-prod__nombre:focus-visible) { outline: 3px solid var(--azul); outline-offset: 2px; }
.tarjeta-prod__codigo { font-size: .875rem; color: var(--texto-2); }
.tarjeta-prod__pedir { position: relative; z-index: 2; margin-top: auto; min-height: 44px; padding: 0 14px; font-size: .9375rem; }
.tarjeta-prod__cuerpo > .tarjeta-prod__pedir { margin-top: 10px; }
.tarjeta-prod h3 + .tarjeta-prod__codigo { margin-bottom: auto; }
@media (hover: hover) and (pointer: fine) {
  .tarjeta-prod:hover { transform: translateY(-3px); box-shadow: var(--elevada); border-color: var(--linea-2); }
  .tarjeta-prod:hover .tarjeta-prod__foto img { transform: scale(1.04); }
  .tarjeta-prod:hover .tarjeta-prod__nombre { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 599px) {
  .tarjeta-prod__cuerpo { padding: 10px 10px 12px; }
  .tarjeta-prod h3 { font-size: .9375rem; }
  .tarjeta-prod__pedir { font-size: .875rem; padding: 0 10px; }
}

/* Pestañas (inicio y ficha): píldoras; la abierta, azul */
.pestanas__lista { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -2px 16px; scrollbar-width: none; }
.pestanas__lista::-webkit-scrollbar { display: none; }
.pestana, .pestana-cat {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--linea-2); border-radius: var(--pill); background: #fff; color: var(--texto);
  font: 700 var(--fs-chico)/1.1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background-color var(--t) var(--curva), border-color var(--t) var(--curva), color var(--t) var(--curva);
}
.pestana[aria-selected="true"], .pestana-cat[aria-pressed="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .pestana:not([aria-selected="true"]):hover, .pestana-cat:not([aria-pressed="true"]):hover { border-color: var(--azul); color: var(--azul-osc); }
}
.pestana-cat__n { font-size: .8125rem; font-weight: 700; padding: 1px 7px; border-radius: var(--pill); background: var(--tinte-azul); color: var(--azul-osc); }
.pestana-cat[aria-pressed="true"] .pestana-cat__n { background: rgba(255,255,255,.2); color: #fff; }
.pestanas__panel:focus-visible { outline-offset: 4px; border-radius: var(--radio); }
.pestanas__todos { margin-top: 8px; }

/* Inicio: «Lo más pedido» dentro de Compre por categoría */
.destacados { margin-top: clamp(40px, 5vw, 64px); }
.destacados__titulo { font-family: var(--display); font-weight: 400; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.15; }
.destacados__titulo::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--amarillo); }

/* /productos/ */
.catalogo__cabeza { display: grid; gap: 16px; margin-bottom: 20px; }
@media (min-width: 900px) { .catalogo__cabeza { grid-template-columns: 1fr minmax(320px, 420px); align-items: end; gap: 32px; } }
.catalogo__titulos { display: grid; gap: 8px; }
.catalogo__titulos h1, .ficha-pub__info h1 { font-family: var(--display); font-weight: 400; font-size: var(--fs-h2); line-height: 1.12; text-wrap: balance; }
.catalogo__titulos h1::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 12px; border-radius: 5px; background: var(--amarillo); }
.catalogo__titulos h1:focus, .ficha-pub__info h1:focus { outline: none; }
.catalogo__bajada { color: var(--texto-2); max-width: 40rem; }
.catalogo__buscar { position: relative; display: flex; align-items: center; }
.catalogo__buscar .icono { position: absolute; left: 16px; width: 22px; height: 22px; color: var(--azul); pointer-events: none; }
.catalogo__buscar input {
  width: 100%; min-height: 52px; padding: 0 112px 0 48px; border: 2px solid var(--azul); border-radius: var(--pill);
  font: 500 var(--fs-cuerpo) var(--font); color: var(--texto); background: #fff;
}
.catalogo__buscar input:focus { outline: none; box-shadow: var(--halo-azul); }
.catalogo__buscar input::-webkit-search-cancel-button { display: none; }
.catalogo__buscar-ir {
  position: absolute; right: 4px; top: 4px; bottom: 4px; padding: 0 20px; border: 0; border-radius: var(--pill);
  background: var(--azul); color: #fff; font: 700 var(--fs-chico) var(--font); cursor: pointer;
  transition: background-color var(--t) var(--curva);
}
@media (hover: hover) and (pointer: fine) { .catalogo__buscar-ir:hover { background: var(--azul-osc); } }
.catalogo__buscar-ir:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.catalogo__estado { color: var(--texto-2); padding: 24px 0; }
.catalogo__falla, .catalogo__vacio {
  display: grid; justify-items: start; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg);
}
.pestanas-cat { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px 18px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent); mask-image: linear-gradient(to right, #000 92%, transparent); }
.pestanas-cat::-webkit-scrollbar { display: none; }
.catalogo__cuerpo { display: grid; gap: 20px; }
@media (min-width: 1000px) {
  .catalogo__cuerpo { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; }
  .catalogo__cuerpo.sin-filtros { grid-template-columns: minmax(0, 1fr); }
  /* La columna se queda a la vista y, si los filtros abiertos no caben, se desliza por dentro */
  .catalogo__filtros { position: sticky; top: 168px; max-height: calc(100vh - 184px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
}
@media (min-width: 1000px) and (max-width: 1239px) { .catalogo__cuerpo:not(.sin-filtros) .rejilla-prod { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.catalogo__filtros { display: grid; gap: 14px; align-content: start; }
/* Celular y tableta: plegados detrás de «Filtros», para que los productos salgan de una */
@media (max-width: 999px) { .catalogo__filtros:not(.esta-abierto) { display: none; } }
.catalogo__facetas { display: grid; gap: 10px; }
.catalogo__ver-filtros {
  display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 2px solid var(--linea-2); border-radius: var(--pill); background: #fff; color: var(--texto);
  font: 700 var(--fs-chico) var(--font); cursor: pointer;
}
.catalogo__ver-filtros .icono { width: 20px; height: 20px; }
@media (min-width: 1000px) { .catalogo__ver-filtros { display: none; } }   /* en computador la columna siempre se ve */
.catalogo__ver-filtros[aria-expanded="true"] { border-color: var(--azul); color: var(--azul-osc); }
.catalogo__ver-filtros-n { min-width: 24px; padding: 1px 7px; border-radius: var(--pill); background: var(--azul); color: #fff; font-size: .8125rem; text-align: center; }
.catalogo__ver-filtros:focus-visible, .filtro-bloque__titulo:focus-visible, .filtro-bloque__mas:focus-visible, .catalogo__quitar:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.filtro-bloque { display: grid; padding: 4px 18px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg); }
.filtro-bloque__cabeza { font: inherit; }
.filtro-bloque__titulo {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-weight: 400; font-size: .9375rem; letter-spacing: .04em; text-transform: uppercase; color: var(--texto); text-align: left;
}
/* La flecha que dice si está abierto: hacia abajo cerrado, hacia arriba abierto */
.filtro-bloque__titulo::after {
  content: ""; width: 9px; height: 9px; margin-left: auto; margin-right: 4px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg);
  transition: transform var(--t-2) var(--curva);
}
.filtro-bloque__titulo[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.filtro-bloque__marcados { font-family: var(--font); font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--azul-osc); }
.filtro-bloque__cuerpo { display: grid; gap: 4px; padding-bottom: 12px; }
.filtro-bloque__mas, .catalogo__quitar {
  justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--fs-chico) var(--font); color: var(--azul-osc); text-decoration: underline; text-underline-offset: 4px;
}
.catalogo__quitar { padding: 0 4px; }
.filtro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.casilla { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; flex: none; accent-color: var(--azul); }
.casilla__n { margin-left: auto; font-size: .875rem; color: var(--texto-2); }
.catalogo__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.catalogo__barra p { font-weight: 700; color: var(--texto-2); }
.catalogo__orden { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-chico); color: var(--texto-2); }
.catalogo__orden select {
  min-height: 44px; padding: 0 12px; border: 2px solid var(--linea-2); border-radius: var(--radio);
  font: 600 var(--fs-chico) var(--font); color: var(--texto); background: #fff;
}
.catalogo__vacio { margin-top: 8px; }

/* Ficha */
.ficha-pub { display: grid; gap: clamp(28px, 4vw, 48px); }
.ficha-pub__arriba { display: grid; gap: 24px; }
@media (min-width: 900px) { .ficha-pub__arriba { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; } }
.ficha-pub__galeria { display: grid; gap: 12px; }
.ficha-pub__foto { position: relative; aspect-ratio: 1; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-xl); overflow: hidden; }
.ficha-pub__foto img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.ficha-pub__foto:has(#fichaRef:not([hidden])) img { object-fit: cover; padding: 0; }
.ficha-pub__minis { display: flex; gap: 10px; overflow-x: auto; padding: 2px; }
.ficha-pub__mini { flex: none; width: 72px; height: 72px; padding: 0; border: 2px solid var(--linea); border-radius: var(--radio); background: #fff; overflow: hidden; cursor: pointer; }
.ficha-pub__mini img { width: 100%; height: 100%; object-fit: contain; }
.ficha-pub__mini[aria-pressed="true"] { border-color: var(--azul); box-shadow: var(--halo-azul); }
.ficha-pub__info { display: grid; gap: 12px; align-content: start; }
.ficha-pub__cat { font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-osc); }
.ficha-pub__codigo { color: var(--texto-2); }
.ficha-pub__disp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--verde); }
.ficha-pub__disp::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.ficha-pub__disp.es-agotado { color: #4f5872; }
.ficha-pub__pedir { justify-self: start; margin-top: 6px; }
@media (max-width: 599px) { .ficha-pub__pedir { justify-self: stretch; } }
.ficha-pub__confianza { list-style: none; margin: 8px 0 0; padding: 16px 18px; display: grid; gap: 10px; background: var(--tinte-azul); border-radius: var(--radio-lg); }
.ficha-pub__confianza li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; font-size: var(--fs-chico); color: var(--texto); }
.ficha-pub__confianza .icono { width: 20px; height: 20px; color: var(--azul); }
.ficha-pub__confianza a { color: var(--azul-osc); font-weight: 700; text-underline-offset: 4px; }
.ficha-pub__pestanas .pestanas__panel { padding: 22px 24px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio-lg); color: var(--texto-2); line-height: 1.6; }
.ficha-pub__pestanas .pestanas__panel ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.ficha-pub__pestanas .pestanas__panel a { color: var(--azul-osc); font-weight: 600; }
.caract { margin: 0; display: grid; }
.caract > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.caract > div:last-child { border-bottom: 0; }
.caract dt { font-weight: 700; color: var(--texto); }
.caract dd { margin: 0; }
.ficha-pub__parecidos h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); margin-bottom: 16px; }
@media (prefers-reduced-motion: reduce) {
  .tarjeta-prod:hover, .tarjeta-prod:hover .tarjeta-prod__foto img { transform: none; }
  .filtro-bloque__titulo::after { transition: none; }
}
@media (forced-colors: active) {
  .tarjeta-prod, .pestana, .pestana-cat, .catalogo__ver-filtros { border: 2px solid CanvasText; }
  .pestana[aria-selected="true"], .pestana-cat[aria-pressed="true"] { outline: 3px solid Highlight; }
}