/* ==========================================================================
   HornMex — sistema visual del sitio (oct 2026)

   Estilo editorial sobre lienzo oscuro: titulares condensados en mayúsculas con
   interlineado 0.9, radios grandes, superficies planas. SIN sombras ni degradados.

   El rojo #7e0418 es el del logotipo. Sobre el lienzo da 1.6:1, así que NUNCA es
   texto ni lleva texto oscuro: solo rellena, con letra blanca encima (10.8:1).
   El verde solo existe en WhatsApp.
   ========================================================================== */

@font-face {
  font-family: "Barlow Condensed";
  src: url("../fuentes/barlow-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fuentes/barlow-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fuentes/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fuentes/jetbrains-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fuentes/jetbrains-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --lienzo: #17181a;
  --negro: #000000;
  --grafito: #232528;
  --linea: #383a3f;
  --papel: #f4f3f0;
  --claro: #e5e5e5;
  --humo: #a9aaae;
  --tinta: #0c0c0d;
  --pizarra: #44464b;

  --rojo: #7e0418;
  --rojo-vivo: #98091f;
  --wa: #25d366;
  --wa-tinta: #05270f;
  --aviso: #ffd9a0;

  --e1: 8px; --e2: 16px; --e3: 24px; --e4: 40px; --e5: 64px; --e6: 80px; --e7: 96px;
  --r-boton: 8px; --r-tarjeta: 28px; --r-grande: 48px; --r-arco: 64px; --r-pildora: 999px;

  --ancho: 1200px;
  --margen: clamp(16px, 4vw, 40px);

  --f-titular: "Barlow Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --f-texto: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--lienzo);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  overflow-wrap: break-word; /* una dirección o palabra larguísima no ensancha la página */
  margin: 0;
  background: var(--lienzo);
  color: var(--papel);
  font: 400 1rem/1.5 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--papel); outline-offset: 3px; border-radius: 4px; }
.sobre-claro :focus-visible { outline-color: var(--tinta); }

.saltar {
  position: absolute; left: 16px; top: -80px; z-index: 50;
  background: var(--papel); color: var(--tinta); padding: 12px 16px; border-radius: var(--r-boton);
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 16px; }

.envoltura { width: 100%; max-width: calc(var(--ancho) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }
.seccion { padding-block: clamp(56px, 8vw, 96px); }
.seccion + .seccion { padding-top: 0; }

/* ---- Tipografía ---------------------------------------------------------- */

.titular {
  font: 700 clamp(3.25rem, 10.4vw, 8.125rem)/0.9 var(--f-titular);
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Si la letra del sistema está agrandada y una palabra no cabe, se parte (con guion, por sílabas)
   en vez de salirse de la pantalla. A tamaño normal no cambia nada. */
.titular, .datos__valor, .cifra__valor, .producto__numero { overflow-wrap: anywhere; hyphens: auto; }
.titular--2 { font-size: clamp(2.75rem, 7vw, 5rem); }
.titular--3 { font-size: clamp(2rem, 4.4vw, 3rem); }
.subtitulo {
  font: 500 clamp(1.5rem, 3vw, 2.5rem)/1.1 var(--f-texto);
  letter-spacing: -0.02em; text-transform: uppercase;
}
/* Sin color propio: hereda el del bloque, que puede ser oscuro o claro. */
.entrada { font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.suave { color: var(--humo); }
.sobre-claro .suave { color: var(--pizarra); }

.mono {
  font: 400 0.75rem/1.5 var(--f-mono);
  letter-spacing: 0.02em; text-transform: uppercase;
}

.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--r-pildora);
  background: var(--rojo); color: #fff;
  font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.03em; text-transform: uppercase;
}
.etiqueta--linea { background: transparent; border: 1px solid var(--linea); color: var(--papel); }
.sobre-claro .etiqueta--linea { border-color: #b9b9b9; color: var(--tinta); }

/* ---- Botones ------------------------------------------------------------- */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 24px;
  border: 1.5px solid transparent; border-radius: var(--r-boton);
  background: var(--papel); color: var(--tinta);
  font: 600 1rem/1.2 var(--f-texto); letter-spacing: -0.005em; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .08s;
}
/* Al tocar, el botón responde. No mueve nada de su alrededor. */
.boton:active, .etiqueta--linea:active, .selector a:active { transform: scale(0.98); }
.boton:disabled:active { transform: none; }
.boton:hover { background: #fff; }
.boton--linea { background: transparent; border-color: var(--humo); color: var(--papel); }
.boton--linea:hover { background: var(--papel); border-color: var(--papel); color: var(--tinta); }
.boton--wa { background: var(--wa); color: var(--wa-tinta); }
.boton--wa:hover { background: #3ee07a; }
.boton--oscuro { background: var(--tinta); color: var(--papel); }
.boton--oscuro:hover { background: #26272a; }
.boton--chico { min-height: 44px; padding: 10px 18px; font-size: 0.9375rem; }
.boton svg { width: 20px; height: 20px; flex: none; }
.boton[aria-busy="true"] { opacity: .7; cursor: progress; }

.enlace { font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.enlace:hover { text-decoration-thickness: 3px; }

/* ---- Cabecera: la píldora flotante --------------------------------------- */

.cabecera { position: sticky; top: 0; z-index: 30; padding: 16px var(--margen) 0; pointer-events: none; }
/* Una franja del color del lienzo tapa lo que, al desplazarse, se asomaría por encima de la píldora. */
.cabecera::before { content: ""; position: absolute; inset: 0 0 50% 0; background: var(--lienzo); z-index: -1; }
.barra {
  pointer-events: auto;
  max-width: var(--ancho); margin-inline: auto;
  display: flex; align-items: center; gap: var(--e3);
  min-height: 72px; padding: 12px 12px 12px 28px;
  background: var(--negro); border: 1px solid var(--linea); border-radius: var(--r-grande);
}
.barra__logo { display: flex; align-items: center; flex: none; min-height: 44px; line-height: 0; }
.barra__logo img { width: 150px; height: auto; }
.barra__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.barra__nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--r-pildora);
  color: #d4d4d7; font-weight: 500; font-size: 0.9375rem; text-decoration: none;
}
.barra__nav a:hover { color: #fff; background: var(--grafito); }
.barra__nav a[aria-current="page"] { color: #fff; background: var(--grafito); }
.barra__cta { flex: none; }
/* Entrada al panel: solo para el equipo. La contraseña la pide el servidor al tocarlo. */
.barra__acceso {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-left: -12px; border-radius: 50%;
  border: 1.5px solid var(--linea); color: #d4d4d7; transition: border-color .15s, color .15s, background-color .15s;
}
.barra__acceso:hover { border-color: var(--humo); color: #fff; background: var(--grafito); }
.barra__acceso svg { width: 22px; height: 22px; }

.menu { display: none; margin-left: auto; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: var(--r-pildora); background: var(--grafito); font-weight: 600; font-size: 0.9375rem;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { width: 18px; height: 18px; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 22px); width: min(86vw, 340px);
  background: var(--negro); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: 12px;
  display: grid; gap: 4px;
}
.menu__panel a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 16px; font-weight: 500; font-size: 1.0625rem; text-decoration: none; }
/* Solo los renglones del menú. El botón «Cotizar» conserva sus colores: con este fondo quedaba
   con letra oscura sobre oscuro, justo en Contacto, que es su página. */
.menu__panel a:not(.boton):hover, .menu__panel a:not(.boton)[aria-current="page"] { background: var(--grafito); }
.menu__panel .boton { margin-top: 8px; }

@media (max-width: 860px) {
  .barra { padding-left: 20px; min-height: 64px; }
  .barra__logo img { width: 128px; }
  .barra__nav, .barra__cta { display: none; }
  .barra__acceso { margin-left: auto; }
  .menu { display: block; margin-left: -12px; }
}

/* ---- Héroe --------------------------------------------------------------- */

.heroe { padding-top: clamp(32px, 6vw, 72px); }
.heroe__rejilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
.heroe__texto { display: grid; gap: var(--e3); justify-items: start; padding-bottom: clamp(0px, 3vw, 40px); }
.heroe__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.heroe__foto {
  background: var(--negro); border-radius: var(--r-arco) var(--r-arco) 0 0; overflow: hidden;
  aspect-ratio: 4 / 5; position: relative;
}
.heroe__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.heroe__foto figcaption {
  position: absolute; left: 20px; bottom: 20px;
  background: var(--negro); color: var(--papel); padding: 8px 14px; border-radius: var(--r-pildora);
}
@media (max-width: 860px) {
  .heroe__rejilla { grid-template-columns: 1fr; }
  .heroe__foto { aspect-ratio: 5 / 6; border-radius: var(--r-grande) var(--r-grande) 0 0; }
}

.datos { border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.datos__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; }
.datos__lista li { padding: 20px 20px 20px 0; display: grid; gap: 4px; }
.datos__lista li + li { padding-left: 20px; border-left: 1px solid var(--linea); }
.datos__valor { font: 600 clamp(1.5rem, 2.6vw, 2.125rem)/1 var(--f-titular); text-transform: uppercase; letter-spacing: 0; }
@media (max-width: 760px) {
  .datos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .datos__lista li { padding: 16px 12px 16px 0; }
  .datos__lista li + li { padding-left: 0; border-left: 0; }
  .datos__lista li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--linea); }
  .datos__lista li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
}

/* ---- Encabezado de sección ----------------------------------------------- */

.cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }
.cabeza__texto { display: grid; gap: var(--e2); justify-items: start; max-width: 760px; }

/* ---- Tarjetas de producto ------------------------------------------------ */

.productos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e2); list-style: none; }
@media (max-width: 1040px) { .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .productos { grid-template-columns: 1fr; } }

.producto {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--negro); border-radius: var(--r-tarjeta); overflow: hidden;
  text-decoration: none; color: var(--papel);
  outline: 1.5px solid transparent; outline-offset: -1.5px; transition: outline-color .15s;
}
.producto:hover { outline-color: var(--humo); }
.producto:focus-visible { outline: 3px solid var(--papel); outline-offset: 3px; border-radius: var(--r-tarjeta); }
.producto__foto { aspect-ratio: 4 / 5; background: var(--grafito); overflow: hidden; }
.producto__foto img { width: 100%; height: 100%; object-fit: cover; }
.producto__cuerpo { display: grid; gap: 12px; padding: 20px 20px 22px; }
.producto__nombre { display: flex; align-items: baseline; gap: 10px; }
.producto__numero { font: 700 4.5rem/0.8 var(--f-titular); letter-spacing: -0.02em; }
.producto__unidad { font: 600 1.5rem/1 var(--f-titular); text-transform: uppercase; }
.producto__variantes { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.producto__variantes li { padding: 4px 10px; border: 1px solid var(--linea); border-radius: var(--r-pildora); color: var(--humo); }
.producto__ir { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; margin-top: 4px; }
.producto__ir svg { width: 18px; height: 18px; transition: transform .15s; }
.producto:hover .producto__ir svg { transform: translateX(4px); }
.producto--generico .producto__numero { font-size: 2.25rem; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.005em; }

/* ---- Bloque claro (invertido) -------------------------------------------- */

.bloque-claro { background: var(--claro); color: var(--tinta); border-radius: var(--r-arco); padding: clamp(28px, 5vw, 64px); }
@media (max-width: 760px) { .bloque-claro { border-radius: var(--r-grande); } }
.bloque-claro .mono { color: var(--pizarra); }

.rasgos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); list-style: none; }
@media (max-width: 900px) { .rasgos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rasgos { grid-template-columns: 1fr; } }
.rasgo { background: #fff; border-radius: 24px; padding: 22px 24px 24px; display: grid; gap: 10px; align-content: start; }
.rasgo__valor { font: 500 1.125rem/1.3 var(--f-texto); letter-spacing: -0.01em; }

/* ---- Pasos / condiciones ------------------------------------------------- */

.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); list-style: none; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr; } }
.paso { background: var(--negro); border-radius: var(--r-tarjeta); padding: 28px; display: grid; gap: 14px; align-content: start; }
.paso__titulo { font: 700 2.25rem/0.95 var(--f-titular); text-transform: uppercase; }
.paso p { color: #d0d0d3; }

/* ---- Testimonios --------------------------------------------------------- */

.testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--e2); list-style: none; }
.testimonio { background: var(--negro); border-radius: var(--r-tarjeta); padding: 28px; display: grid; gap: 20px; align-content: space-between; }
.testimonio blockquote { margin: 0; font-size: 1.125rem; line-height: 1.5; }
.testimonio footer { display: flex; align-items: center; gap: 12px; }
.testimonio img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }

/* ---- Formulario ---------------------------------------------------------- */

.cotiza { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--e2); align-items: stretch; }
@media (max-width: 900px) { .cotiza { grid-template-columns: 1fr; } }
.tarjeta { background: var(--negro); border-radius: var(--r-tarjeta); padding: clamp(24px, 3.4vw, 40px); }
.tarjeta--clara { background: var(--claro); color: var(--tinta); }

.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.campo > label, .campo > .campo__rotulo { font-weight: 600; font-size: 0.9375rem; }
.campo .pista { font-weight: 400; color: var(--humo); }
/* El renglón que explica por qué un campo no aceptó lo tecleado (campos.js). */
.campo__nota { font-size: 0.9375rem; line-height: 1.4; font-weight: 600; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo input[type="number"],
.campo input[type="date"], .campo select, .campo textarea {
  width: 100%; min-height: 52px; padding: 13px 16px;
  background: var(--grafito); color: var(--papel);
  border: 1.5px solid var(--linea); border-radius: 12px;
  font-size: 1rem; /* 16 px: iOS no hace zoom al enfocar */
}
/* iPhone: Safari le da al campo de fecha un tamaño propio que no respeta el del bloque, y se
   salía por la derecha. Sin la apariencia del sistema mide como cualquier otro campo. La fecha
   va a la izquierda, como los demás datos (Safari la centra). */
.campo input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; box-sizing: border-box; text-align: left; line-height: 1.5; }
.campo input[type="date"]::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
.campo textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.campo select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23f4f3f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--humo); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible { outline: 3px solid var(--papel); outline-offset: 2px; border-color: var(--papel); border-radius: 12px; }
.campo ::placeholder { color: #8c8d92; }
.campo--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 520px) { .campo--fila { grid-template-columns: 1fr; } }
.casilla { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; align-content: center; min-height: 44px; font-size: 0.9375rem; cursor: pointer; }
.casilla input { width: 24px; height: 24px; margin: 0; accent-color: var(--papel); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.aviso-form { border: 1.5px solid var(--aviso); border-radius: 12px; padding: 14px 16px; color: var(--aviso); font-weight: 500; }

.contacto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.contacto dl { display: grid; gap: 20px; }
.contacto dt { margin-bottom: 4px; }
.contacto dd { font-size: 1.125rem; line-height: 1.4; }
.contacto dd a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* El mapa de Google va en un marco del sistema: mismas esquinas y fondo mientras carga. */
.mapa { aspect-ratio: 4 / 3; border-radius: var(--r-tarjeta); overflow: hidden; background: var(--grafito); border: 1px solid var(--linea); }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.redes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.redes .etiqueta { min-height: 44px; padding-inline: 18px; }

/* ---- Página de producto -------------------------------------------------- */

.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; color: var(--humo); }
.migas li + li::before { content: "/"; margin-right: 8px; color: var(--linea); }
.migas li { display: inline-flex; align-items: center; min-height: 44px; }
.migas a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.migas a:hover { color: var(--papel); text-decoration: underline; }

.prod-cab { display: grid; gap: var(--e3); justify-items: start; padding-top: clamp(28px, 5vw, 56px); }
.selector { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.selector a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
  border: 1.5px solid var(--linea); border-radius: var(--r-pildora);
  font-weight: 600; font-size: 0.9375rem; text-decoration: none; color: var(--papel);
  transition: background-color .15s, border-color .15s, color .15s;
}
.selector a:hover { border-color: var(--humo); }
.selector a[aria-current="true"] { background: var(--papel); border-color: var(--papel); color: var(--tinta); }

.variante { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; padding-top: var(--e4); }
.variante + .variante { margin-top: var(--e6); border-top: 1px solid var(--linea); padding-top: var(--e6); }
.js .variante + .variante { margin-top: 0; border-top: 0; padding-top: var(--e4); }
@media (max-width: 900px) { .variante { grid-template-columns: 1fr; } }
/* Sin fotos no se deja la mitad de la página vacía. */
.variante--sin-fotos { grid-template-columns: minmax(0, 720px); }

.galeria { display: grid; gap: 12px; }
.galeria__principal { background: var(--negro); border-radius: var(--r-grande); overflow: hidden; aspect-ratio: 3 / 4; }
.galeria__principal img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.galeria__tiras { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; list-style: none; }
.galeria__tiras button {
  display: block; width: 100%; padding: 0; border: 0; background: var(--negro); cursor: pointer;
  border-radius: 14px; overflow: hidden; aspect-ratio: 1; outline: 2px solid transparent; outline-offset: -2px;
}
.galeria__tiras button[aria-current="true"] { outline-color: var(--papel); }
.galeria__tiras img { width: 100%; height: 100%; object-fit: cover; }

.ficha { display: grid; gap: var(--e3); align-content: start; position: sticky; top: 112px; }
@media (max-width: 900px) { .ficha { position: static; } }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; }
.cifra { background: var(--negro); border-radius: 20px; padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; }
.cifra__valor { font: 700 1.875rem/0.95 var(--f-titular); text-transform: uppercase; }
.ficha__acciones { display: grid; gap: 10px; }
.ficha__acciones .boton { width: 100%; }

.tabla { width: 100%; border-collapse: collapse; }
.tabla caption { text-align: left; padding-bottom: 8px; }
.rotulo { margin-bottom: 10px; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 14px 0; border-top: 1px solid var(--linea); }
.tabla tr:first-child th, .tabla tr:first-child td { border-top: 0; }
.tabla th { width: 36%; padding-right: 16px; font: 400 0.75rem/1.6 var(--f-mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--humo); }
.sobre-claro .tabla th, .sobre-claro .tabla td { border-top-color: #c6c6c6; }
.sobre-claro .tabla th { color: var(--pizarra); }
.nota { border-left: 4px solid var(--rojo); padding: 4px 0 4px 16px; color: #d6d6d9; max-width: 62ch; }

/* ---- Páginas de texto ---------------------------------------------------- */

.pagina-cab { display: grid; gap: var(--e3); justify-items: start; padding-top: clamp(32px, 6vw, 72px); }
.prosa { max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; }
.prosa h2 { font: 700 1.875rem/1 var(--f-titular); text-transform: uppercase; margin: 2em 0 0.6em; }
.prosa ul { padding-left: 1.2em; margin-bottom: 1em; }
.prosa li { margin-bottom: 0.35em; }
.condiciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e2); list-style: none; }
@media (max-width: 800px) { .condiciones { grid-template-columns: 1fr; } }

/* ---- Pie ----------------------------------------------------------------- */

.pie { margin-top: clamp(56px, 8vw, 96px); background: var(--negro); border-radius: var(--r-arco) var(--r-arco) 0 0; padding: clamp(36px, 5vw, 64px) 0 104px; }
@media (max-width: 760px) { .pie { border-radius: var(--r-grande) var(--r-grande) 0 0; } }
.pie__rejilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--e4); }
@media (max-width: 800px) { .pie__rejilla { grid-template-columns: 1fr; gap: var(--e3); } }
.pie__logo img { width: 190px; }
.pie__nota { margin-top: 20px; max-width: 34ch; }
.pie__rotulo { margin-bottom: 8px; }
.pie ul { list-style: none; display: grid; gap: 4px; }
.pie li a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: #d4d4d7; }
.pie li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pie__legal { margin-top: var(--e4); padding-top: 20px; border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; color: var(--humo); }

/* ---- WhatsApp flotante --------------------------------------------------- */

.wa-flotante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 22px 0 18px;
  background: var(--wa); color: var(--wa-tinta); border-radius: var(--r-pildora);
  font-weight: 700; text-decoration: none; border: 3px solid var(--lienzo);
}
.wa-flotante svg { width: 28px; height: 28px; flex: none; }
/* Mientras el botón de enviar el formulario está a la vista, el flotante se quita: lo tapaba. */
.wa-flotante { transition: opacity .15s, visibility .15s; }
.wa-flotante--fuera { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-flotante:hover { background: #3ee07a; }
@media (max-width: 520px) {
  .wa-flotante { padding: 0; width: 60px; justify-content: center; }
  .wa-flotante span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
body { padding-bottom: 0; }