/* ITAPE Outlet temporal — hoja de estilos única.
   Tokens tomados de diseno/identidad.md (marca: MANUAL DE MARCA ITAPE). Mobile-first.
   Puntos de corte (min-width): 48em (768 px), 64em (1024 px), 80em (1280 px). */

/* ---------- Fuentes (Gabarito, SIL OFL 1.1, autoalojadas) ---------- */
@font-face { font-family: "Gabarito"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/gabarito-regular.woff2") format("woff2"); }
@font-face { font-family: "Gabarito"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../fonts/gabarito-medium.woff2") format("woff2"); }
@font-face { font-family: "Gabarito"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/gabarito-bold.woff2") format("woff2"); }
@font-face { font-family: "Gabarito"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("../fonts/gabarito-extrabold.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;

  /* Marca [MANUAL] */
  --azul-profundo: #0F1E2E;
  --azul-acero:    #4E6E8E;
  --gris-claro:    #C2C7CC;
  --azul-carbon:   #121C26;
  --gris-medio:    #5C6268;
  --gris-niebla:   #E2E5E8;
  --ambar:         #D6A43A;
  --rojo:          #C4454D;
  --verde:         #4FAF8F;

  /* Derivados aprobados (decisión 38) */
  --azul-acero-oscuro: #3F5D7A;
  --texto-suave:   #4A5057;
  --borde-control: #7A828A;
  --fondo-alt:     #F4F6F8;
  --rojo-texto:    #B03A42;
  --rojo-fondo:    #FDEEEF;
  --verde-texto:   #1F6B52;
  --verde-fondo:   #EAF6F1;
  --ambar-fondo:   #FFF4D6;
  --ambar-claro:   #E3B655;
  --ambar-oscuro:  #C4902A;

  /* Semánticos */
  --fondo:          #FFFFFF;
  --fondo-marca:    var(--azul-profundo);
  --fondo-pie-base: var(--azul-carbon);
  --texto:          var(--azul-carbon);
  --enlace:         var(--azul-acero-oscuro);
  --enlace-hover:   var(--azul-profundo);
  --borde:          var(--gris-claro);
  --foco:           var(--azul-profundo);
  --foco-sobre-marca: var(--ambar);
  --estado-error:   var(--rojo-texto);
  --estado-ok:      var(--verde-texto);

  /* Tipografía */
  --fuente: "Gabarito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-xs:   0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg:   clamp(1.125rem, 1.07rem + 0.3vw, 1.25rem);
  --fs-h3:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h2:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h1:   clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --fs-hero: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --fs-precio: clamp(1.625rem, 1.4rem + 1.1vw, 2.25rem);
  --lh-texto: 1.6;
  --lh-titulo: 1.15;
  --lh-compacto: 1.3;

  /* Espaciado */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;   --sp-7: 3rem;    --sp-8: 4rem;
  --sp-seccion: clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  --sp-borde: clamp(1rem, 4vw, 2rem);
  --w-max: 75rem;
  --w-lectura: 44rem;

  /* Radios y sombras */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(15, 30, 46, 0.10);
  --sombra-2: 0 2px 8px rgba(15, 30, 46, 0.10), 0 1px 2px rgba(15, 30, 46, 0.08);
  --sombra-3: 0 10px 28px rgba(15, 30, 46, 0.16);

  --tactil-min: 44px;
  --t: 150ms ease;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-texto);
  min-height: 100vh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: var(--lh-titulo); color: var(--azul-profundo); }
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; color: var(--texto); }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
em { font-style: normal; font-weight: 500; }
a { color: var(--enlace); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--enlace-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r-sm); }
.sobre-marca :focus-visible, .pie :focus-visible { outline-color: var(--foco-sobre-marca); }
[hidden] { display: none !important; }
hr { border: 0; border-top: 1px solid var(--gris-claro); margin: var(--sp-5) 0; }

.contenedor { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: var(--sp-borde); }
.lectura { max-width: var(--w-lectura); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.enlace-salto {
  position: absolute; left: var(--sp-2); top: -4rem; z-index: 100;
  background: var(--azul-profundo); color: #fff; padding: 12px 16px; border-radius: var(--r-md);
  font-weight: 700; text-decoration: none;
}
.enlace-salto:focus { top: var(--sp-2); outline: 3px solid var(--ambar); outline-offset: 2px; color: #fff; }
.sprite-iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.icono { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icono-lg { width: 1.75rem; height: 1.75rem; }

/* Marcas de "falta un dato" y borrador (visibles a propósito) */
.falta { background: var(--ambar-fondo); border-bottom: 2px dashed var(--ambar-oscuro); padding: 0 0.2em; font-weight: 500; }
.aviso-borrador {
  background: var(--ambar-fondo); border-left: 4px solid var(--ambar); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5); font-size: var(--fs-xs); color: var(--texto);
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tactil-min); padding: 10px 20px; border-radius: var(--r-md);
  font: 700 var(--fs-base)/1.3 var(--fuente); text-decoration: none; text-align: center; cursor: pointer;
  border: 2px solid transparent; transition: background var(--t), color var(--t), border-color var(--t);
}
.btn-principal { background: var(--ambar); color: var(--azul-profundo); border-color: var(--ambar); min-height: 48px; padding: 12px 24px; box-shadow: var(--sombra-1); }
.btn-principal:hover { background: var(--ambar-claro); border-color: var(--ambar-claro); color: var(--azul-profundo); text-decoration: none; }
.btn-principal:active { background: var(--ambar-oscuro); border-color: var(--ambar-oscuro); }
.btn-secundario { background: transparent; color: var(--azul-profundo); border-color: var(--azul-profundo); }
.btn-secundario:hover { background: var(--azul-profundo); color: #fff; text-decoration: none; }
.btn-secundario:active { background: var(--azul-carbon); color: #fff; }
.sobre-marca .btn-secundario, .pie .btn-secundario { color: #fff; border-color: #fff; }
.sobre-marca .btn-secundario:hover, .pie .btn-secundario:hover { background: #fff; color: var(--azul-profundo); }
.btn-bloque { display: flex; width: 100%; }
.btn-wa { min-height: 52px; width: 100%; }
/* Celular: botones de WhatsApp en el verde de WhatsApp con texto azul profundo (8,5:1; en blanco sería 1,98:1) (decisión 97) */
@media (max-width: 47.9375em) {
  a.btn[href^="https://wa.me/"] { background: #25D366; border-color: #25D366; color: var(--azul-profundo); }
  a.btn[href^="https://wa.me/"]:hover { background: #4ADE80; border-color: #4ADE80; color: var(--azul-profundo); }
  a.btn[href^="https://wa.me/"]:active { background: #1EBE5A; border-color: #1EBE5A; color: var(--azul-profundo); }
}
.grupo-botones { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 48em) { .grupo-botones { flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* ---------- Encabezado y menú ---------- */
.encabezado { position: relative; z-index: 30; background: #fff; border-bottom: 1px solid var(--gris-claro); }
.encabezado-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-height: 64px; padding-block: var(--sp-2); }
.logo { margin-right: auto; display: block; padding: 0.25rem 0.5rem 0.25rem 0; border-radius: var(--r-sm); }
.logo img { height: 52px; width: auto; }
.btn-menu {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 14px;
  background: #fff; color: var(--azul-profundo); border: 2px solid var(--azul-profundo); border-radius: var(--r-md);
  font: 700 var(--fs-base)/1 var(--fuente); cursor: pointer;
}
.btn-menu[aria-expanded="true"] { background: var(--azul-acero-oscuro); border-color: var(--azul-acero-oscuro); color: #fff; }
.btn-menu .icono-cerrar { display: none; }
.btn-menu[aria-expanded="true"] .icono-cerrar { display: block; }
.btn-menu[aria-expanded="true"] .icono-menu { display: none; }
.wa-barra { min-height: 44px; padding: 0; width: 44px; }
.wa-barra .texto-wa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.menu { order: 5; flex: 0 0 100%; background: #fff; margin-inline: calc(var(--sp-borde) * -1); }
.js .menu { position: absolute; left: 0; right: 0; top: 100%; margin: 0; border-bottom: 1px solid var(--gris-claro); box-shadow: var(--sombra-3); max-height: calc(100dvh - 4.5rem); overflow-y: auto; }
.js .menu:not(.abierto) { display: none; }
.menu-lista { list-style: none; margin: 0; padding: 0; }
.menu-lista > li { border-bottom: 1px solid var(--gris-niebla); }
.menu-lista a, .menu-boton {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 0 var(--sp-borde);
  color: var(--texto); font: 500 var(--fs-base)/1.3 var(--fuente); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left;
}
.menu-lista a:hover, .menu-boton:hover { background: var(--gris-niebla); color: var(--texto); }
.menu-boton .chev { transition: transform var(--t); }
.menu-boton[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--ambar); text-underline-offset: 0.4em; }
.submenu { list-style: none; margin: 0 0 var(--sp-2) var(--sp-borde); padding: 0 0 0 var(--sp-4); border-left: 2px solid var(--gris-claro); }
.submenu a { min-height: 44px; padding-inline: var(--sp-3); }
.js .submenu:not(.abierto) { display: none; }
.submenu a[aria-current="page"] { border-left: 3px solid var(--azul-acero); text-decoration: none; font-weight: 700; margin-left: -3px; }
.menu-wa-item { padding: var(--sp-4) var(--sp-borde) var(--sp-5); border-bottom: 0 !important; }
.menu-wa-item .btn { width: 100%; min-height: 48px; }
.wa-barra-tablet { display: none; }

@media (min-width: 48em) {
  .wa-barra { width: auto; padding: 0 16px; }
  .wa-barra .texto-wa { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .menu-wa-item { display: none; }
}
@media (min-width: 64em) {
  .encabezado-in { flex-wrap: nowrap; min-height: 80px; }
  .logo img { height: 64px; }
  .btn-menu, .wa-barra { display: none; }
  .menu, .js .menu {
    position: static; display: flex !important; flex: 0 1 auto; order: 0; margin: 0; background: none; border: 0; box-shadow: none; max-height: none; overflow: visible;
    align-items: center; gap: var(--sp-2);
  }
  .menu-lista { display: flex; align-items: center; gap: var(--sp-1); }
  .menu-lista > li { border: 0; }
  .menu-lista a, .menu-boton { width: auto; padding: 0 16px; border-radius: var(--r-md); gap: var(--sp-2); justify-content: flex-start; }
  .tiene-sub { position: relative; }
  .submenu {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 16rem; margin: 0; padding: var(--sp-2);
    background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--r-lg); box-shadow: var(--sombra-3);
  }
  .submenu-2col { display: grid; grid-template-columns: repeat(2, minmax(14rem, 1fr)); min-width: 30rem; }
  .submenu a { border-radius: var(--r-md); padding-inline: 16px; }
  .menu-wa-item { display: block; padding: 0; margin-left: var(--sp-2); }
  .menu-wa-item .btn { width: auto; min-height: 44px; padding: 8px 20px; }
}

/* ---------- Aviso del Libro de Reclamaciones ---------- */
.aviso-libro-in { display: flex; flex-direction: column; gap: var(--sp-2); padding-block: var(--sp-4); border-top: 1px solid var(--borde); }
.aviso-libro p { margin: 0; display: flex; gap: var(--sp-2); align-items: flex-start; }
.aviso-libro .icono { margin-top: 0.2em; color: var(--azul-acero-oscuro); }
.aviso-libro a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 48em) {
  .aviso-libro-in { flex-direction: row; align-items: center; justify-content: space-between; }
  .aviso-libro a { min-height: 32px; }
}

/* ---------- Portada ---------- */
.hero { background: var(--azul-profundo) url("../img/patron-isotipo.svg") repeat; color: #fff; padding-block: var(--sp-seccion); }
.hero h1 { color: #fff; font-size: var(--fs-hero); font-weight: 800; max-width: 22ch; }
.hero p { color: var(--gris-niebla); font-size: var(--fs-lg); max-width: 40rem; }
.hero .btn { margin-top: var(--sp-2); }

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--sp-seccion); }
.seccion-alt { background: var(--fondo-alt); }
.seccion > .contenedor > h2, .seccion-cabecera h2 { margin-bottom: var(--sp-5); }
.seccion-corta { padding-block: var(--sp-6); }

.grid-tipos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cuadro-tipo {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); min-height: 88px; height: 100%; padding: var(--sp-3) var(--sp-4);
  background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--r-lg); text-decoration: none; color: var(--texto); transition: border-color var(--t), background var(--t);
}
.cuadro-tipo:hover { border-color: var(--azul-acero); background: var(--fondo-alt); color: var(--texto); }
.cuadro-tipo .icono { width: 1.75rem; height: 1.75rem; color: var(--azul-acero); }
.cuadro-tipo strong { font-weight: 700; font-size: var(--fs-lg); line-height: 1.2; overflow-wrap: anywhere; }
.cuadro-tipo span { font-size: var(--fs-xs); color: var(--texto-suave); font-weight: 500; }
@media (min-width: 48em) { .grid-tipos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .grid-tipos { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-4); } }

/* ---------- Tarjetas de producto ---------- */
/* Cuadrícula por filas centradas: la última fila incompleta (1 o 2 tarjetas) queda centrada, sin hueco a un lado.
   Todas las tarjetas miden lo mismo (2 columnas en celular, 3 en tablet, 4 en computadora). */
.grid-productos { --cols: 2; --sep: 12px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sep); }
.grid-productos > li { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--sep)) / var(--cols)); min-width: 0; }
@media (max-width: 22.4375em) { .grid-productos { --cols: 1; } }
@media (min-width: 48em) { .grid-productos { --cols: 3; --sep: var(--sp-4); } }
@media (min-width: 64em) { .grid-productos { --cols: 4; --sep: var(--sp-5); } }.tarjeta {
  position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--gris-claro);
  border-radius: var(--r-lg); box-shadow: var(--sombra-2); overflow: hidden; transition: box-shadow var(--t), border-color var(--t);
}
.tarjeta:hover { box-shadow: var(--sombra-3); border-color: var(--azul-acero); }
.tarjeta:has(a:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.tarjeta-foto { display: block; background: #fff; }
.tarjeta-foto img, .foto-marco img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.tarjeta-cuerpo { display: flex; flex-direction: column; flex: 1; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.tarjeta .marca { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 500; color: var(--texto-suave); line-height: 1.3; }
.tarjeta-nombre { font-size: var(--fs-lg); font-weight: 700; line-height: var(--lh-compacto); margin: 0 0 var(--sp-2); color: var(--texto);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tarjeta-nombre a { color: var(--texto); text-decoration: none; }
.tarjeta-nombre a::after { content: ""; position: absolute; inset: 0; }
.tarjeta-nombre a:hover { text-decoration: underline; }
.tarjeta .precio { margin-top: auto; }
.precio { margin: 0; font-weight: 800; color: var(--azul-profundo); line-height: 1.1; font-size: 1.25rem; }
.igv { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); font-weight: 500; color: var(--texto-suave); line-height: 1.4; }

.sin-foto {
  aspect-ratio: 1 / 1; width: 100%; background: var(--gris-niebla); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); color: var(--texto-suave); font-size: var(--fs-xs); font-weight: 500; text-align: center; padding: var(--sp-3);
}
.sin-foto svg { width: 56px; height: auto; color: var(--gris-medio); opacity: 0.4; }

/* ---------- Migas y cabecera de listado ---------- */
.migas { padding-block: var(--sp-3) 0; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); font-weight: 500; }
.migas li { display: inline-flex; align-items: center; }
.migas a, .enlace-tactil { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 64em) { .migas a, .enlace-tactil { min-height: 32px; } }
.migas li + li::before { content: "›"; margin: 0 var(--sp-2); color: var(--texto-suave); }
.migas [aria-current="page"] { color: var(--texto-suave); }
.cabecera-pagina { padding-block: var(--sp-4) var(--sp-5); }
.cabecera-pagina h1 { margin-bottom: var(--sp-2); }
.cabecera-pagina .linea { margin: 0 0 var(--sp-3); font-weight: 500; color: var(--texto-suave); }
.cabecera-pagina .intro { max-width: var(--w-lectura); font-size: var(--fs-lg); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--borde-control); border-radius: var(--r-pill);
  color: var(--texto); font-weight: 500; text-decoration: none; background: #fff;
}
.chip:hover { background: var(--gris-niebla); color: var(--texto); }

/* ---------- Ficha ---------- */
.ficha-top { display: grid; gap: var(--sp-4); padding-block: var(--sp-3) var(--sp-6); }
.ficha-titulo { margin: 0; }
.ficha-titulo h1 { font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem); overflow-wrap: anywhere; }
.galeria { min-width: 0; }
.foto-marco { background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--r-lg); overflow: hidden; }
.galeria .sin-foto { border: 1px solid var(--gris-claro); border-radius: var(--r-lg); }
.miniaturas { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding: 0; }
.miniaturas button { width: 64px; height: 64px; padding: 0; border: 2px solid var(--gris-claro); border-radius: var(--r-md); background: #fff; cursor: pointer; overflow: hidden; }
.miniaturas button[aria-current="true"] { border-color: var(--azul-profundo); }
.miniaturas img { width: 100%; height: 100%; object-fit: contain; }
.datos { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-1); }
.datos div { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.datos dt { font-weight: 500; color: var(--texto-suave); }
.datos dt::after { content: ":"; }
.datos dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.ficha-precio { margin-bottom: var(--sp-4); }
.ficha-precio .precio { font-size: var(--fs-precio); }
.nota-wa { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--texto-suave); }
.aviso-garantia { margin-top: var(--sp-5); padding: var(--sp-4); background: var(--fondo-alt); border-radius: var(--r-md); }
.aviso-garantia p { margin-bottom: var(--sp-2); }
.aviso-garantia p:last-child { margin: 0; }
.ficha-detalle { display: grid; gap: var(--sp-6); padding-block: var(--sp-5) var(--sp-7); border-top: 1px solid var(--gris-claro); }
.ficha-detalle h2 { font-size: var(--fs-h3); }
.descripcion p { max-width: 70ch; }
.tabla-spec { width: 100%; border-collapse: collapse; }
.tabla-spec tr { display: block; border-bottom: 1px solid var(--gris-claro); padding-block: var(--sp-2); }
.tabla-spec th, .tabla-spec td { display: block; text-align: left; padding: 0; }
.tabla-spec th { font-weight: 500; color: var(--texto-suave); font-size: var(--fs-xs); }
.tabla-spec td { font-weight: 500; overflow-wrap: anywhere; }
.cta-final { padding-bottom: var(--sp-6); }
@media (min-width: 48em) {
  .ficha-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "gal tit" "gal res"; column-gap: var(--sp-6); align-content: start; }
  .ficha-titulo { grid-area: tit; }
  .galeria { grid-area: gal; align-self: start; }
  .ficha-resumen { grid-area: res; }
  .tabla-spec tr { display: table-row; }
  .tabla-spec th, .tabla-spec td { display: table-cell; padding: 10px 12px; border-bottom: 1px solid var(--gris-claro); vertical-align: top; }
  .tabla-spec tr { border: 0; padding: 0; }
  .tabla-spec th { width: 40%; background: var(--fondo-alt); font-size: var(--fs-base); }
  .tabla-spec .fila-nota td { background: #fff; }
}
@media (min-width: 64em) {
  .cta-final .btn { max-width: 24rem; }
}

/* ---------- Bloque de confianza y pasos ---------- */
.confianza { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-4); }
.confianza li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.confianza .icono { color: var(--azul-acero); margin-top: 0.2em; }
.confianza strong { display: block; }
@media (min-width: 48em) { .confianza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .confianza { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pasos { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-4); }
.pasos li { background: #fff; border: 1px solid var(--gris-claro); border-radius: var(--r-lg); padding: var(--sp-5); }
.paso-num {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--azul-profundo); color: #fff; font-weight: 800; font-size: var(--fs-h3); margin-bottom: var(--sp-3);
}
.pasos h2 { font-size: var(--fs-h3); }
@media (min-width: 48em) { .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Texto largo (Garantías, Privacidad) ---------- */
.texto-largo { padding-block: var(--sp-4) var(--sp-6); }
.texto-largo > * { max-width: var(--w-lectura); }
.texto-largo h2 { margin-top: 2.5rem; font-size: var(--fs-h2); }
.texto-largo h3 { margin-top: var(--sp-5); }
.texto-largo li { margin-bottom: var(--sp-2); }
.texto-largo li::marker { color: var(--azul-acero); }
.texto-largo .tabla-ancha { overflow-x: auto; }
.nota-importante { background: var(--ambar-fondo); border-left: 4px solid var(--ambar); border-radius: var(--r-md); padding: var(--sp-4); margin: var(--sp-5) 0; }
.nota-importante p:last-child { margin-bottom: 0; }
.texto-largo table { border-collapse: collapse; width: 100%; font-size: var(--fs-xs); }
.texto-largo th, .texto-largo td { border: 1px solid var(--gris-claro); padding: 8px 10px; text-align: left; vertical-align: top; }
.texto-largo th { background: var(--fondo-alt); }

/* ---------- 404 ---------- */
.pagina-404 { padding-block: var(--sp-8); text-align: left; }
.pagina-404 .numero-404 { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); color: var(--azul-acero); }
.pagina-404 .numero-404 strong { font-size: var(--fs-hero); font-weight: 800; line-height: 1; }
.pagina-404 .numero-404 svg { width: 96px; height: auto; color: var(--azul-acero); }

/* ---------- Pie ---------- */
.pie { background: var(--azul-profundo); color: var(--gris-claro); margin-top: auto; }
.pie a { color: #fff; }
.pie a:hover { color: var(--ambar); text-decoration-thickness: 2px; }
.pie-columnas { display: grid; gap: 0; padding-block: var(--sp-6); }
.pie-col { padding-block: var(--sp-4); border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.pie-col:last-child { border-bottom: 0; }
.pie h2 { color: #fff; font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); }
.pie-logo { height: 72px; width: auto; margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-3); background: #fff; border-radius: var(--r-sm); box-sizing: content-box; }
.pie address { font-style: normal; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; }
.pie .btn { margin-bottom: var(--sp-2); }
.pie p { margin-bottom: var(--sp-2); }
.pie .etiqueta-tel { display: block; font-size: var(--fs-xs); color: var(--gris-claro); }
.pie-final { background: var(--fondo-pie-base); font-size: var(--fs-xs); }
.pie-final .contenedor { padding-block: var(--sp-4); }
.pie-final p { margin: 0 0 var(--sp-1); color: var(--gris-claro); }
@media (min-width: 48em) {
  .pie-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-6); }
  .pie-col:nth-last-child(2) { border-bottom: 0; }
}
@media (min-width: 64em) {
  .pie-columnas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pie-col { border-bottom: 0; }
  .pie li a { min-height: 32px; }
}

/* ---------- Libro de Reclamaciones: clases para el formulario y la constancia ([BE] las usa tal cual) ---------- */
.libro-cabecera { padding-block: var(--sp-4) var(--sp-5); }
.libro-proveedor { background: var(--fondo-alt); border: 1px solid var(--gris-claro); border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-5); max-width: var(--w-lectura); }
.libro-proveedor p { margin-bottom: var(--sp-1); }
.form-libro { max-width: var(--w-lectura); margin-inline: auto 0; padding-bottom: var(--sp-7); }
.form-libro fieldset { border: 1px solid var(--gris-claro); border-radius: var(--r-lg); background: #fff; padding: var(--sp-4); margin: 0 0 var(--sp-5); min-width: 0; }
.form-libro legend { font-size: var(--fs-h3); font-weight: 700; color: var(--azul-profundo); padding: 0 var(--sp-2); line-height: 1.2; }
.campo { margin-bottom: var(--sp-4); }
.campo label, .campo .etiqueta { display: block; margin-bottom: var(--sp-1); font-weight: 500; }
.campo .obligatorio { color: var(--texto-suave); font-weight: 400; font-size: var(--fs-xs); }
.campo .ayuda { display: block; margin: 0 0 var(--sp-2); font-size: var(--fs-xs); color: var(--texto-suave); }
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea {
  display: block; width: 100%; min-height: 48px; padding: 12px 14px; background: #fff; color: var(--texto);
  border: 1.5px solid var(--borde-control); border-radius: var(--r-md); font: 400 max(1rem, 16px)/1.4 var(--fuente);
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo ::placeholder { color: var(--gris-medio); opacity: 1; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--texto-suave); }
.campo input:focus, .campo select:focus, .campo textarea:focus { border: 2px solid var(--azul-profundo); outline: 3px solid var(--azul-profundo); outline-offset: 2px; padding: 11.5px 13.5px; }
.campo-error input:not([type="checkbox"]):not([type="radio"]), .campo-error select, .campo-error textarea,
input.campo-error, select.campo-error, textarea.campo-error { border: 2px solid var(--rojo-texto); padding: 11.5px 13.5px; }
.mensaje-error { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-2) 0 0; color: var(--rojo-texto); font-weight: 500; font-size: var(--fs-xs); }
.mensaje-error .icono { margin-top: 0.1em; width: 1rem; height: 1rem; }
.campo-fila { display: grid; gap: 0 var(--sp-4); }
@media (min-width: 48em) { .campo-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-libro fieldset { padding: var(--sp-5); } }
.campo-opciones { display: flex; flex-direction: column; gap: var(--sp-1); }
.campo-opcion { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.campo-opcion input[type="checkbox"], .campo-opcion input[type="radio"] {
  width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--azul-profundo); border: 2px solid var(--borde-control);
}
.campo-opcion label { margin: 0; font-weight: 400; }
.resumen-errores { background: var(--rojo-fondo); border-left: 4px solid var(--rojo-texto); border-radius: var(--r-md); padding: var(--sp-4); margin: 0 0 var(--sp-5); max-width: var(--w-lectura); }
.resumen-errores:focus { outline: 3px solid var(--foco); outline-offset: 2px; }
.resumen-errores h2 { font-size: var(--fs-lg); color: var(--texto); margin-bottom: var(--sp-2); }
.resumen-errores ul { margin: 0; }
.resumen-errores a { color: var(--rojo-texto); }
.aviso-datos { font-size: var(--fs-xs); background: var(--fondo-alt); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-4); }
.form-libro .acciones { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; }
.form-libro .acciones small { font-size: var(--fs-xs); color: var(--texto-suave); }
@media (min-width: 48em) { .form-libro .acciones { flex-direction: row; align-items: center; } }
.trampa { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.constancia { max-width: var(--w-lectura); margin: 0 0 var(--sp-7); background: var(--verde-fondo); border: 1px solid var(--verde-texto); border-radius: var(--r-lg); padding: var(--sp-4); }
@media (min-width: 48em) { .constancia { padding: var(--sp-5); } }
.constancia h1 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h2); color: var(--verde-texto); }
.constancia .icono { color: var(--verde-texto); width: 1.75rem; height: 1.75rem; }
.constancia-ident { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-4); font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; color: var(--azul-profundo); }
.constancia-ident small { font-weight: 500; font-size: var(--fs-xs); color: var(--texto-suave); display: block; }
.constancia-bloque { margin-bottom: var(--sp-4); }
.constancia h2 { font-size: var(--fs-lg); color: var(--texto); margin-bottom: var(--sp-2); }
.constancia table { width: 100%; border-collapse: collapse; }
.constancia th, .constancia td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(31, 107, 82, 0.25); overflow-wrap: anywhere; }
.constancia th { font-weight: 500; width: 38%; color: var(--texto-suave); }
.constancia-acciones { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }
@media (min-width: 48em) { .constancia-acciones { flex-direction: row; } }
.solo-impresion { display: none; }

/* ---------- Impresión (A4; constancia del Libro) ---------- */
@media print {
  @page { size: A4; margin: 15mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; min-height: 0; display: block; }
  .enlace-salto, .encabezado, .pie, .migas, .aviso-libro, .no-imprimir, .btn, .btn-menu, .libro-cabecera .no-imprimir, .acciones, .constancia-acciones, .trampa, .sprite-iconos { display: none !important; }
  .solo-impresion { display: block !important; margin-bottom: 8mm; }
  .solo-impresion img { height: 14mm; width: auto; }
  a, a:visited { color: #000 !important; text-decoration: none !important; }
  a[href]::after { content: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  .contenedor { max-width: none; padding: 0; }
  .constancia, .libro-proveedor, .form-libro fieldset { background: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; padding: 4mm !important; color: #000 !important; }
  .constancia *, .libro-proveedor *, .form-libro * { color: #000 !important; }
  .constancia h1 { font-size: 16pt; }
  .constancia-ident { font-size: 13pt; }
  .constancia-bloque, .form-libro fieldset, .constancia table { break-inside: avoid; page-break-inside: avoid; }
  .constancia th, .constancia td { border-bottom: 1px solid #000; }
}

/* ---------- Libro de Reclamaciones: clases adicionales del contrato con [BE] ---------- */
.libro { max-width: var(--w-lectura); padding-bottom: var(--sp-7); }
.libro h1 { margin-bottom: var(--sp-3); }
.libro > p, .libro .ayuda-general { max-width: 70ch; }
.libro .form-libro { padding-bottom: 0; margin-inline: 0; }
.bloque-libro, .campo-grupo { border: 1px solid var(--gris-claro); border-radius: var(--r-lg); background: #fff; padding: var(--sp-4); margin: 0 0 var(--sp-5); min-width: 0; }
.campo-grupo { background: var(--fondo-alt); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); }
.bloque-libro legend, .campo-grupo legend { font-weight: 700; color: var(--azul-profundo); padding: 0 var(--sp-2); line-height: 1.2; }
.bloque-libro legend h2 { font-size: var(--fs-h3); margin: 0; color: var(--azul-profundo); }
.campo-grupo legend { font-size: var(--fs-base); }
.campo-opciones { display: block; border: 0; padding: 0; margin: 0 0 var(--sp-4); min-width: 0; }
.campo-opciones legend { font-weight: 500; padding: 0; margin-bottom: var(--sp-2); }
.opcion { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }
.opcion input[type="radio"], .opcion input[type="checkbox"], .campo-casilla input[type="checkbox"] {
  width: 24px; height: 24px; min-height: 0; margin: 0; flex: none; accent-color: var(--azul-profundo);
}
.opcion label, .campo-casilla label { display: inline; margin: 0; font-weight: 400; }
.campo-casilla { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; }
.campo-casilla > input { margin-top: 0.15rem; }
.mensaje-error-prefijo { font-weight: 800; }
.acciones-libro { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; margin-top: var(--sp-5); }
@media (min-width: 48em) { .acciones-libro { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.constancia-numero, .constancia-codigo { margin: 0 0 var(--sp-1); font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; color: var(--azul-profundo); overflow-wrap: anywhere; }
.constancia-codigo { margin-bottom: var(--sp-4); }
.constancia-proveedor, .constancia-envio { margin-bottom: var(--sp-4); }
.constancia dl { margin: 0; }
.constancia-espacio { min-height: 6rem; }
.btn-secundario.btn { background: transparent; }
@media print {
  .libro { max-width: none; padding: 0; }
  .bloque-libro, .campo-grupo { background: #fff !important; border: 1px solid #000 !important; border-radius: 0 !important; break-inside: avoid; page-break-inside: avoid; }
  .constancia-numero, .constancia-codigo { color: #000 !important; font-size: 13pt; }
  .constancia-proveedor, .constancia-envio, .constancia-bloque { break-inside: avoid; page-break-inside: avoid; }
  .libro-proveedor { display: block; }
}

/* Enlaces mailto/tel/WhatsApp dentro de los textos largos: área táctil >= 44 px sin cambiar el interlineado */
.texto-largo a[href^="mailto:"], .texto-largo a[href^="tel:"], .texto-largo a[href*="wa.me"] { display: inline-block; padding-block: 0.6rem; margin-block: -0.6rem; }

/* ---------- Carrusel de productos en oferta del Inicio (bloque O3) ----------
   Sin JavaScript: cuadrícula centrada con todos los productos. Con JavaScript (clase .co-activo) pasan en bucle de a un producto.
   Visibles a la vez: 1 en celular, 2 en tablet, 4 en computadora. */
.co { --n: 1; --sep: 12px; position: relative; }
@media (min-width: 30em) { .co { --n: 2; } }
@media (min-width: 48em) { .co { --sep: var(--sp-4); } }
@media (min-width: 64em) { .co { --n: 4; --sep: var(--sp-5); } }
.co-vista { padding: 4px 4px 14px; margin: -4px -4px -14px; }
.co-pista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sep); }
.co-item { flex: 0 0 calc((100% - (var(--n) - 1) * var(--sep)) / var(--n)); min-width: 0; }
.tarjeta-oferta .tarjeta-foto { position: relative; }
.etiqueta-oferta {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 1; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--rojo-fondo); color: var(--rojo-texto); border: 1px solid var(--rojo-texto); font-size: var(--fs-xs); font-weight: 700; line-height: 1.5;
}
.precio-normal { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 500; color: var(--texto-suave); line-height: 1.3; }
.tarjeta-oferta .precio-oferta { margin-top: 0; }
.tarjeta-oferta .precio-normal { margin-top: auto; }
.co-ctrl { display: flex; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-5); }
.co-ctrl[hidden] { display: none; }
.co-btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--tactil-min); height: var(--tactil-min); padding: 0;
  background: #fff; color: var(--azul-profundo); border: 2px solid var(--azul-profundo); border-radius: var(--r-pill); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.co-btn:hover, .co-btn[aria-pressed="true"] { background: var(--azul-profundo); color: #fff; }
.co-btn .icono { width: 1.375rem; height: 1.375rem; }
.co-btn .co-i-play { display: none; }
.co-btn[aria-pressed="true"] .co-i-play { display: block; }
.co-btn[aria-pressed="true"] .co-i-pausa { display: none; }
.co-activo .co-vista { overflow: hidden; touch-action: pan-y; }
.co-activo .co-pista { flex-wrap: nowrap; justify-content: flex-start; gap: 0; will-change: transform; }
.co-activo .co-pista.co-anim { transition: transform 600ms ease; }
.co-activo .co-item { margin-right: var(--sep); }