/* JL Air & Cold — estilos de la landing (v2).
   Tokens: Design System "JL Air & Cold" v2. Única excepción: --calor (ver DIRECTION.md, secciones 5 y 9). */

:root {
  --navy-700: #0A3A8C;
  --navy-900: #071B4D;
  --blue-500: #0B6FE0;
  --azure-400: #0D9CF1;
  --ice-100: #EAF4FD;
  --surface: #FFFFFF;
  --surface-raised: #F4F8FC;
  --ink: #071B4D;
  --ink-muted: #4A5B78;
  --silver-300: #C9D3E0;
  --whatsapp: #0F7D41;
  --on-whatsapp: #FFFFFF;
  --on-brand: #FFFFFF;
  --danger: #C62828;
  /* Excepción: solo la capa cálida fija. Nunca en texto, botones ni tarjetas. */
  --calor: #FFCB9E;

  --font-display: "Barlow Semi Condensed", "JL Display Fallback", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Barlow", "JL Sans Fallback", system-ui, -apple-system, Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --space-20: 80px;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-float: 0 6px 20px rgba(7, 27, 77, 0.18);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --g: 16px;
  --wrap: 1120px;
  --header-h: 64px;
  color-scheme: light;
}

@media (min-width: 768px) { :root { --g: 24px; } }
@media (min-width: 1200px) { :root { --g: 32px; } }

/* Fuentes de respaldo con métricas cercanas a Barlow, para que el cambio de fuente no mueva la página. */
@font-face {
  font-family: "JL Display Fallback";
  src: local("Arial Narrow Bold Italic"), local("ArialNarrow-BoldItalic"), local("Liberation Sans Narrow Bold Italic"), local("Arial Bold Italic"), local("Arial-BoldItalicMT"), local("Liberation Sans Bold Italic"), local("Roboto Bold Italic");
  font-style: italic;
  font-weight: 700 800;
  size-adjust: 85%;
  ascent-override: 106%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "JL Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Roboto");
  size-adjust: 92%;
  ascent-override: 108%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ice-100);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--navy-700) var(--ice-100);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--navy-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--navy-900); } }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--azure-400); color: var(--navy-900); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-style: italic; color: var(--navy-700); text-wrap: balance; }
h2 { font-weight: 700; font-size: 28px; line-height: 32px; }
h3 { font-weight: 700; font-size: 20px; line-height: 24px; }
@media (min-width: 960px) { h2 { font-size: 36px; line-height: 40px; } h3 { font-size: 22px; line-height: 26px; } }
.nobr { white-space: nowrap; }

/* El contenido va por encima de la escarcha fija (z-index 1); los fondos de las secciones, por debajo. */
.wrap { position: relative; z-index: 2; width: 100%; max-width: calc(var(--wrap) + 2 * var(--g)); margin-inline: auto; padding-inline: var(--g); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: var(--g); top: -100px; z-index: 50; padding: 12px 16px; background: var(--navy-900); color: var(--on-brand); border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; }
.saltar:focus { top: 8px; }
.saltar:hover, .saltar:focus { color: var(--on-brand); }

.seccion { padding-block: 36px; scroll-margin-top: var(--header-h); }
@media (min-width: 960px) { .seccion { padding-block: 64px; } }
.seccion--hielo { background: var(--ice-100); }
.seccion--blanca { background: var(--surface); }
.seccion__cabeza { display: grid; gap: 10px; max-width: 680px; margin-bottom: 24px; }
@media (min-width: 960px) { .seccion__cabeza { margin-bottom: 32px; } }
.seccion__intro { font-size: 18px; line-height: 26px; color: var(--ink); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 22px;
  border: 2px solid transparent; border-radius: var(--radius-md);
  font: 600 18px/24px var(--font-sans); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn svg { flex: none; width: 20px; height: 20px; }
.btn:active { transform: scale(0.97); }
.btn--wa { background: var(--whatsapp); color: var(--on-whatsapp); }
.btn--tel { background: var(--navy-700); color: var(--on-brand); }
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: 16px; line-height: 20px; }
.btn--sm svg { width: 18px; height: 18px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
@media (hover: hover) and (pointer: fine) {
  .btn--wa:hover, .flotante:hover { background: color-mix(in srgb, var(--whatsapp) 86%, var(--navy-900)); color: var(--on-whatsapp); }
  .btn--tel:hover { background: var(--navy-900); color: var(--on-brand); }
}
.enlace-fuerte { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.enlace-wa { color: var(--whatsapp); font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
@media (hover: hover) and (pointer: fine) { .enlace-wa:hover { color: color-mix(in srgb, var(--whatsapp) 80%, var(--navy-900)); } }

/* El motivo: la franja de aire del logo, inclinada con su itálica. */
.lista-aire { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-aire li { position: relative; padding-left: 26px; }
.lista-aire li::before {
  content: ""; position: absolute; left: 2px; top: 10px;
  width: 15px; height: 5px; border-radius: var(--radius-pill);
  background: var(--blue-500); transform: skewX(-12deg);
}

/* ---------- Termómetro: pantalla de split con dígitos de 7 segmentos (decorativo) ---------- */
.d7 { flex: none; overflow: visible; }
.d7 path { fill: currentColor; opacity: 0.13; }
.d7[data-n="0"] :is(.a, .b, .c, .d, .e, .f),
.d7[data-n="1"] :is(.b, .c),
.d7[data-n="2"] :is(.a, .b, .d, .e, .g),
.d7[data-n="3"] :is(.a, .b, .c, .d, .g),
.d7[data-n="4"] :is(.b, .c, .f, .g),
.d7[data-n="5"] :is(.a, .c, .d, .f, .g),
.d7[data-n="6"] :is(.a, .c, .d, .e, .f, .g),
.d7[data-n="7"] :is(.a, .b, .c),
.d7[data-n="8"] :is(.a, .b, .c, .d, .e, .f, .g),
.d7[data-n="9"] :is(.a, .b, .c, .d, .f, .g) { opacity: 1; }
.termo__num { display: flex; transform: skewX(-8deg); }

.termo {
  --n: 14;
  position: relative; z-index: 1;
  width: 264px; padding: 18px 22px 20px;
  border-radius: 16px; background: var(--navy-900); color: var(--azure-400);
}
.termo__fila { display: flex; align-items: flex-start; justify-content: space-between; }
.termo__num { gap: 8px; }
.termo .d7 { width: 52px; height: 94px; }
.termo__lado { display: grid; justify-items: end; gap: 14px; }
.termo__unidad { font: italic 700 28px/28px var(--font-display); letter-spacing: 0.02em; }
.termo__modo { width: 24px; height: 24px; }
.termo__barra { display: flex; gap: 4px; margin-top: 16px; }
.termo__barra i { flex: 1; height: 8px; border-radius: 2px; background: currentColor; transform: skewX(-12deg); opacity: clamp(0.16, (var(--n) - var(--i) + 1) * 9, 1); }

.termo-mini {
  display: none; align-items: center; gap: 1px;
  width: 52px; height: 32px; padding: 0 7px; border-radius: 8px;
  background: var(--navy-900); color: var(--azure-400);
  transition: opacity 200ms var(--ease-out);
}
.termo-mini .termo__num { gap: 2px; }
.termo-mini .d7 { width: 12px; height: 22px; }
.termo-mini__grado { align-self: flex-start; margin-top: 2px; font: italic 700 16px/16px var(--font-display); }
@media (min-width: 388px) { .termo-mini { display: inline-flex; } }
/* En escritorio la mini aparece cuando el display del hero sale de pantalla. Su espacio ya está reservado: no mueve nada. */
@media (min-width: 960px) {
  .termo-mini { opacity: 0; }
  .termo-fuera .termo-mini { opacity: 1; }
}

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 30; background: var(--surface); }
.cabecera__in { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--header-h); }
.cabecera__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.cabecera__logo img { height: 24px; width: auto; }
.cabecera__der { display: flex; align-items: center; gap: 6px; }
.cabecera__llamar { padding-inline: 10px; gap: 6px; }
.cabecera__numero { display: none; }
@media (max-width: 359px) { .cabecera__logo img { height: 22px; } } /* 320 px: logo y Llamar caben sin bajar de 44 px */
@media (min-width: 600px) { .cabecera__logo img { height: 28px; } .cabecera__der { gap: 10px; } .cabecera__llamar { padding-inline: 16px; gap: 8px; } }
@media (min-width: 960px) { .cabecera__numero { display: inline; } }

/* ---------- Hero: la oferta arriba ---------- */
.hero { position: relative; overflow: hidden; padding-block: 20px 32px; scroll-margin-top: var(--header-h); }
.hero__grid { display: grid; gap: 32px; }
.eslogan { font: 600 13px/16px var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-700); margin-bottom: 12px; }
.hero h1 { font-weight: 800; font-size: 36px; line-height: 40px; letter-spacing: -0.005em; }
.hero__oferta { margin-top: 14px; font: italic 700 22px/28px var(--font-display); color: var(--ink); max-width: 28em; }
/* "Respuesta inmediata" es el énfasis principal: marcado como con resaltador, para que no parezca un enlace. */
.hero__oferta strong {
  font-weight: 800; color: var(--navy-700); padding-inline: 2px;
  background: linear-gradient(transparent 50%, var(--surface) 50%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hero__sub { margin-top: 10px; font-size: 18px; line-height: 26px; color: var(--ink); max-width: 34em; }
.hero .acciones { margin-top: 20px; }
.hero__micro { margin-top: 14px; font-size: 16px; line-height: 22px; color: var(--ink); max-width: 40em; }
.hero__micro a { font-weight: 600; }
@media (max-width: 559px) { .hero .acciones .btn { width: 100%; } }
.hero__arte { display: none; }

.aire { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(8px, 1vw, 14px); }
.aire i {
  display: block; height: clamp(14px, 1.8vw, 26px);
  border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  transform: skewX(-12deg);
  transform-origin: right center;
}
.clima-on .aire i { will-change: transform; }
.aire i:nth-child(1) { width: 94%; background: var(--navy-700); }
.aire i:nth-child(2) { width: 72%; background: var(--blue-500); }
.aire i:nth-child(3) { width: 84%; background: var(--azure-400); }
.aire i:nth-child(4) { width: 56%; background: var(--silver-300); }

@media (min-width: 960px) {
  .hero { padding-block: 48px 64px; }
  .hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; gap: 32px; }
  .hero h1 { font-size: clamp(48px, 4.6vw, 66px); line-height: 1.04; }
  .hero__oferta { margin-top: 18px; font-size: 28px; line-height: 34px; }
  .hero__sub { margin-top: 12px; line-height: 28px; }
  .hero .acciones { margin-top: 24px; }
  .hero__micro { line-height: 24px; }
  /* El display va en la columna derecha; las franjas de aire salen de detrás de él hasta el borde de la pantalla. */
  .hero__arte {
    display: flex; align-items: center; position: relative; min-height: 280px;
    margin-right: calc(-1 * (max(0px, (100vw - var(--wrap) - 2 * var(--g)) / 2) + var(--g)));
  }
  .hero__arte .aire { position: absolute; left: 96px; right: 0; top: 50%; translate: 0 -50%; }
}

/* Escarcha estática del hero (como en la v1): se ve sin JavaScript, con movimiento reducido o en modo de ahorro. */
.escarcha { position: absolute; z-index: 0; width: min(62vw, 400px); aspect-ratio: 1; background: url("/assets/img/escarcha.svg") no-repeat center / contain; pointer-events: none; }
.escarcha--a { top: 0; left: 0; }
.escarcha--b { right: 0; bottom: 0; transform: rotate(180deg); }
.clima-on .escarcha { display: none; }

/* Capa cálida fija. Va detrás de todo y solo se ve a través del hero, que no tiene fondo propio. */
.clima { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.clima__calor { position: absolute; inset: 0; background: var(--calor); opacity: 0; }
.clima-on .clima__calor { opacity: 1; will-change: opacity; }

/* ---------- Cristalización: capa fija de escarcha (solo con JavaScript, ver main.js) ----------
   Va encima de los fondos de las secciones y debajo del contenido (.wrap), la cabecera y el botón flotante.
   Cuatro capas (vaho y tres etapas de cristales). main.js escribe en cada capa solo opacity y transform
   (scale de 1,05 a 1: los cristales entran desde las esquinas y los bordes), sin variables heredadas. */
.cristal { position: fixed; inset: var(--header-h) 0 0; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }
.cristal__capa { position: absolute; inset: 0; opacity: 0; will-change: opacity, transform; }
.cristal i { position: absolute; display: block; background: no-repeat 0 0 / 100% 100%; }
.cristal--carga .e1 .esq { background-image: url("/assets/img/cristal/esquina-1.svg"); }
.cristal--carga .e2 .esq { background-image: url("/assets/img/cristal/esquina-2.svg"); }
.cristal--carga .e3 .esq { background-image: url("/assets/img/cristal/esquina-3.svg"); }
.cristal--carga .e1 .borde { background-image: url("/assets/img/cristal/borde-1.svg"); }
.cristal--carga .e2 .borde { background-image: url("/assets/img/cristal/borde-2.svg"); }
.cristal--carga .e3 .borde { background-image: url("/assets/img/cristal/borde-3.svg"); }
/* Celular y pantallas angostas: solo esquinas de 64 px. Nunca la de abajo a la derecha (botón flotante). */
.cristal .esq { width: 64px; height: 64px; }
.cristal .tl { left: 0; top: 0; }
.cristal .tr { right: 0; top: 0; transform: scaleX(-1); }
.cristal .bl { left: 0; bottom: 0; transform: scaleY(-1); }
.cristal .borde { display: none; }
.cristal .vaho {
  background:
    radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 64px),
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 64px),
    radial-gradient(circle at 0 100%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 64px);
}
/* Escritorio ancho: la escarcha vive en los márgenes, por fuera del contenedor. */
@media (min-width: 1280px) {
  .cristal { --ancho: min(220px, calc((100vw - var(--wrap)) / 2 - 12px)); }
  .cristal .esq { width: var(--ancho); height: var(--ancho); }
  .cristal .borde { display: block; top: 0; bottom: 0; width: var(--ancho); background-repeat: repeat-y; background-size: var(--ancho) calc(var(--ancho) * 2.4); }
  .cristal .izq { left: 0; }
  .cristal .der { right: 0; bottom: 96px; transform: scaleX(-1); }
  .cristal .vaho {
    background:
      linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)) no-repeat 0 0 / var(--ancho) 100%,
      linear-gradient(to left, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)) no-repeat 100% 0 / var(--ancho) 100%;
  }
}

/* ---------- Barra de confianza ---------- */
.confianza { background: var(--surface); padding-block: 20px; }
.confianza__lista { list-style: none; margin-block: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.confianza__lista li { position: relative; padding-left: 24px; font-weight: 600; font-size: 16px; line-height: 20px; color: var(--ink); }
.confianza__lista li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 14px; height: 5px; border-radius: var(--radius-pill); background: var(--navy-700); transform: skewX(-12deg); }
@media (min-width: 960px) {
  .confianza { padding-block: 24px; }
  .confianza__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 24px; }
}

/* ---------- Servicios: 3 tarjetas compactas ---------- */
.servicios { display: grid; gap: 10px; }
.servicio { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius-md); background: var(--surface); }
.servicio h3::before { content: ""; display: block; width: 56px; height: 9px; margin: 0 0 14px 4px; border-radius: var(--radius-pill); background: var(--franja, var(--navy-700)); transform: skewX(-12deg); }
.servicio--mantenimiento { --franja: var(--blue-500); }
.servicio--cuartos { --franja: var(--azure-400); }
.servicio__texto { color: var(--ink); }
.servicio__acciones { margin-top: auto; padding-top: 4px; display: grid; justify-items: start; }
.servicio__enlace { justify-self: start; margin-block: -6px; }
.servicio__acciones .btn { min-height: 50px; padding: 12px 18px; font-size: 16px; }
@media (max-width: 599px), (min-width: 900px) { .servicio__acciones .btn { width: 100%; padding-inline: 14px; } }
@media (min-width: 900px) {
  .servicios { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .servicio { padding: 24px; }
}

/* ---------- Galería (la franja azul; se arma desde CONFIG.GALERIA en main.js) ---------- */
.banda { height: 44px; background-color: var(--navy-900); background-image: url("/assets/img/banda.svg"); background-repeat: repeat-x; background-size: auto 100%; }
@media (min-width: 960px) { .banda { height: 56px; } }

.galeria {
  --franja: 16px;
  padding-block: calc(var(--franja) + 24px);
  background:
    url("/assets/img/banda.svg") repeat-x 0 0 / auto var(--franja),
    url("/assets/img/banda.svg") repeat-x 0 100% / auto var(--franja),
    var(--navy-900);
  color: var(--on-brand);
  overflow-x: clip; /* la fila se corre de lado con el scroll: nunca debe crear scroll horizontal */
  scroll-margin-top: var(--header-h);
}
@media (max-width: 1279px) { .galeria { position: relative; z-index: 2; } }
.galeria h2 { color: var(--on-brand); }
.galeria__nav { display: flex; gap: 6px; flex: none; }
.galeria__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.55); border-radius: var(--radius-md);
  background: transparent; color: var(--on-brand); cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), opacity 200ms var(--ease-out);
  touch-action: manipulation;
}
.galeria__btn svg { width: 22px; height: 22px; }
.galeria__btn--ant svg { transform: scaleX(-1); }
.galeria__btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.galeria__btn:focus-visible, .galeria__mini:focus-visible { outline-color: var(--on-brand); }
@media (hover: hover) and (pointer: fine) { .galeria__btn:not([aria-disabled="true"]):hover { background: rgba(255, 255, 255, 0.12); border-color: var(--on-brand); } }
/* La fila ocupa todo el ancho; su relleno la alinea con el contenedor. */
.galeria__ventana {
  position: relative; z-index: 2;
  margin-top: 16px; padding-block: 8px 12px;
  padding-inline: max(var(--g), calc((100% - var(--wrap)) / 2));
  scroll-padding-inline: max(var(--g), calc((100% - var(--wrap)) / 2));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none; scroll-snap-type: x proximity;
  touch-action: pan-x pan-y;
}
.galeria__ventana::-webkit-scrollbar { display: none; }
.clima-on .galeria__ventana { will-change: transform; } /* se corre de lado con el scroll (main.js) */
.galeria__fila { display: flex; gap: 12px; width: max-content; margin: 0; padding: 0; list-style: none; }
.galeria__item { flex: none; width: 160px; display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
.galeria__mini {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0;
  border: 0; border-radius: var(--radius-md); overflow: hidden;
  background: var(--navy-700); cursor: zoom-in;
  transition: transform 200ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.galeria__mini img, .galeria__mini video { width: 100%; height: 100%; object-fit: cover; }
.galeria__mini img:not([src]) { visibility: hidden; } /* mientras no carga, se ve el fondo y no el texto alternativo */
.galeria__mini video { position: absolute; inset: 0; }
.galeria__mini--rota::after { content: ""; position: absolute; inset: 0; background: url("/assets/img/banda.svg") repeat-x center / auto 40%; opacity: 0.5; }
.galeria__tipo { position: absolute; left: 8px; bottom: 8px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(7, 27, 77, 0.78); color: var(--on-brand); }
.galeria__tipo svg { width: 14px; height: 14px; }
.galeria__etiqueta { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--on-brand); overflow-wrap: anywhere; }
.galeria__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 20px; }
.arrastrando .galeria__ventana { cursor: grabbing; scroll-snap-type: none; }
.arrastrando .galeria__mini { cursor: grabbing; }
@media (min-width: 960px) {
  .galeria { --franja: 22px; padding-block: calc(var(--franja) + 40px); }
  .galeria__item { width: 200px; }
  .galeria__fila { gap: 16px; }
  .galeria__pie { margin-top: 24px; }
}
/* Solo con mouse: la miniatura crece al pasar por encima, sin mover las demás. El espacio de arriba evita que se recorte. */
@media (hover: hover) and (pointer: fine) {
  .galeria__ventana { cursor: grab; padding-block: 48px 24px; margin-top: -24px; }
  .galeria__mini:hover { transform: scale(1.6); z-index: 3; }
  .arrastrando .galeria__mini:hover { transform: none; }
}

/* Visor de la galería */
.visor {
  width: min(calc(100vw - 32px), 1040px); max-width: none; max-height: calc(100svh - 32px);
  padding: 0; border: 0; border-radius: var(--radius-md);
  background: var(--navy-900); color: var(--on-brand); overflow: hidden;
}
.visor::backdrop { background: rgba(7, 27, 77, 0.86); }
.visor__fig { margin: 0; display: grid; }
.visor__media { display: grid; place-items: center; background: #04102F; }
.visor__media img, .visor__media video { width: 100%; height: auto; max-height: calc(100svh - 32px - 64px); object-fit: contain; }
.visor__pie { display: flex; align-items: center; gap: 8px; min-height: 64px; padding: 10px 10px 10px 16px; }
.visor__texto { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.visor__cuenta { font-weight: 400; color: rgba(255, 255, 255, 0.8); }
.visor .galeria__btn { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .visor[open] { animation: visor-entra 200ms var(--ease-out); }
  .visor[open]::backdrop { animation: velo-entra 200ms var(--ease-out); }
}
@keyframes visor-entra { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes velo-entra { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Proceso: 3 pasos, de navy a azul ---------- */
.proceso { display: grid; gap: 0; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: paso; }
.paso { counter-increment: paso; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px 20px; border-radius: var(--radius-md); color: var(--on-brand); }
.paso::before { content: counter(paso); grid-row: span 2; font: italic 800 36px/36px var(--font-display); }
.paso h3 { color: inherit; }
.paso:nth-child(1) { background: var(--navy-900); }
.paso:nth-child(2) { background: var(--navy-700); }
.paso:nth-child(3) { background: var(--blue-500); }
.proceso__cta { margin-top: 20px; }
@media (min-width: 900px) {
  .proceso { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .proceso .seccion__cabeza { grid-column: 1; }
  .proceso__cta { grid-column: 2; grid-row: 1; margin: 0 0 32px; }
  .pasos { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .paso { padding: 24px; }
}

/* ---------- Cobertura (solo en la principal): fila compacta ---------- */
.cobertura { padding-block: 0 36px; }
.cobertura h2 { font-size: 22px; line-height: 26px; margin-bottom: 12px; }
.ciudades { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ciudad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 8px 8px 8px 16px; border-radius: var(--radius-md); background: var(--surface); }
.ciudad__nombre { font: italic 800 22px/26px var(--font-display); color: var(--navy-700); }
.ciudad__dato { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; font-size: 14px; line-height: 20px; }
@media (min-width: 960px) {
  .cobertura { padding-block: 0 64px; }
  .cobertura h2 { font-size: 28px; line-height: 32px; }
  .ciudades { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ciudad { align-content: start; }
}

/* ---------- Preguntas frecuentes (todas cerradas) ---------- */
.preguntas { display: grid; gap: 0; }
.faq { display: grid; gap: 8px; }
.faq details { border-radius: var(--radius-md); background: var(--ice-100); transition: background-color 200ms var(--ease-out); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 18px; cursor: pointer; list-style: none; border-radius: var(--radius-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 20px; line-height: 24px; }
.faq .mas { position: relative; flex: none; width: 16px; height: 16px; }
.faq .mas::before, .faq .mas::after { content: ""; position: absolute; left: 0; top: 6.5px; width: 16px; height: 3px; border-radius: 2px; background: var(--navy-700); transition: transform 240ms var(--ease-out), background-color 200ms var(--ease-out); }
.faq .mas::after { transform: rotate(90deg); }
.faq details[open] { background: var(--navy-700); }
.faq details[open] summary h3 { color: var(--on-brand); }
.faq details[open] .mas::before, .faq details[open] .mas::after { background: var(--on-brand); }
.faq details[open] .mas::after { transform: rotate(0deg); }
.faq .respuesta { padding: 0 18px 18px; color: var(--ink); max-width: 62ch; }
.faq details[open] .respuesta { color: var(--on-brand); }
.faq details[open] summary:focus-visible { outline-color: var(--on-brand); } /* sobre navy, el anillo azul no llega a 3:1 */
@media (min-width: 960px) {
  .preguntas .seccion__cabeza { max-width: none; }
  .faq { max-width: 880px; }
  .faq summary { min-height: 60px; padding: 14px 22px; }
  .faq summary h3 { font-size: 22px; line-height: 26px; }
  .faq .respuesta { padding: 0 22px 20px; }
}

/* ---------- Cotizar: formulario simple ---------- */
.cotizar { display: grid; gap: 24px; }
.cotizar__lado { display: grid; gap: 12px; align-content: start; }
.cotizar__ya { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 4px; }
.cotizar__ya p { font-weight: 600; }
.form { position: relative; padding: 20px 16px; border-radius: var(--radius-md); background: var(--surface); display: grid; gap: 16px; }
@media (min-width: 400px) { .form { padding-inline: 20px; } }
.campo { display: grid; gap: 6px; min-width: 0; }
.campo label, .opciones legend { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.campo input:not([type="radio"]):not([type="checkbox"]) {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--silver-300); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 16px;
}
.campo input::placeholder { color: var(--ink-muted); opacity: 1; }
.campo input:not([type="radio"]):not([type="checkbox"]):focus-visible { outline: 3px solid var(--blue-500); outline-offset: 1px; border-color: var(--navy-700); }
.campo input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]) { border-color: var(--danger); }
.campo__error { font-size: 14px; line-height: 20px; color: var(--danger); font-weight: 600; }
.campo__fila { display: grid; gap: 16px; }
@media (min-width: 560px) { .campo__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.opciones { margin: 0; padding: 0; border: 0; min-width: 0; }
.opciones legend { padding: 0; margin-bottom: 6px; }
.opciones__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.opciones--3 .opciones__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcion {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 10px;
  border: 1px solid var(--silver-300); border-radius: var(--radius-sm); background: var(--surface);
  font-size: 16px; line-height: 20px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.opcion input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--navy-700); border-radius: 50%; background: var(--surface); cursor: pointer; }
.opcion input:checked { background: var(--navy-700); box-shadow: inset 0 0 0 3px var(--surface); }
.opcion input:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.opcion:has(input:checked) { border-color: var(--navy-700); background: var(--ice-100); }
@media (hover: hover) and (pointer: fine) { .opcion:hover { border-color: var(--navy-700); } }
.opciones[aria-invalid="true"] .opcion { border-color: var(--danger); }
.opciones .campo__error { margin-top: 6px; }
.campo--check { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.campo--check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--navy-700); cursor: pointer; }
.campo--check label { display: inline-flex; align-items: center; min-height: 44px; font-weight: 400; font-size: 14px; line-height: 20px; cursor: pointer; }
.campo--check .campo__politica { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; line-height: 20px; font-weight: 600; }
.campo--check .campo__error { flex-basis: 100%; }
.campo--check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.form__trampa { display: none; }
.form .btn--tel { width: 100%; min-height: 54px; }
.form .btn--tel[disabled] { opacity: 0.7; cursor: progress; }
.form__nota { margin-top: -6px; font-size: 16px; line-height: 22px; text-align: center; color: var(--ink); }
.form__estado { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--danger); }
.form__estado:empty { display: none; }
@media (min-width: 960px) {
  .cotizar { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
  .form { padding: 28px; }
}

/* ---------- Pie compacto ---------- */
.pie { background: var(--surface); padding-block: 32px 40px; }
.pie__in { display: grid; gap: 12px 48px; }
.pie__logo { width: 220px; height: auto; }
.pie__linea { max-width: 40em; font-size: 16px; line-height: 22px; }
.pie__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; font-size: 16px; line-height: 22px; }
.pie__lista li { display: flex; align-items: center; min-height: 32px; }
.pie__lista a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.pie__legal { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.pie__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.pie__marca { display: grid; gap: 12px; align-content: start; }
@media (min-width: 960px) {
  .pie { padding-block: 48px 40px; }
  .pie__in { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); align-items: start; }
  .pie__lista { display: grid; gap: 0; }
  .pie__legal { grid-column: 1 / -1; }
}

/* ---------- Botón flotante ---------- */
.flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px; min-width: 136px; justify-content: center; padding: 0 20px; border-radius: var(--radius-pill);
  background: var(--whatsapp); color: var(--on-whatsapp);
  font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: var(--shadow-float); /* taste-skill-ignore: único elemento que flota de verdad; token shadow-float del Design System */
  transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out);
  touch-action: manipulation;
}
.flotante svg { width: 22px; height: 22px; }
/* Con JavaScript arranca escondido y aparece cuando ya no se ven los botones del hero (main.js).
   Sin JavaScript se ve siempre. */
.js .flotante { opacity: 0; transform: translateY(16px); pointer-events: none; }
.js .flotante.visible { opacity: 1; transform: none; pointer-events: auto; }
/* Si Netlify muestra su insignia en la esquina (plan gratis), el botón sube por encima de ella. */
.hay-insignia .flotante.visible { transform: translateY(-60px); }

/* ---------- Páginas simples (gracias, política, 404) ---------- */
.simple { padding-block: 40px 96px; background: var(--surface); min-height: calc(100svh - var(--header-h)); }
.simple__in { max-width: 720px; display: grid; gap: 20px; }
.simple h1 { font-weight: 800; font-size: 36px; line-height: 40px; }
.simple h2 { font-size: 20px; line-height: 24px; margin-top: 16px; }
.simple ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.simple__in > p, .simple__in li { max-width: 68ch; }
.simple .acciones { margin-top: 8px; align-items: center; }
/* Gracias y 404: el mismo display del hero (18° y 404) con las franjas de aire, quietos tras una entrada corta. */
.simple { overflow-x: clip; }
.simple__grid { display: grid; gap: 40px; }
.simple__arte { position: relative; display: flex; align-items: center; min-height: 200px; margin-right: calc(-1 * var(--g)); }
.simple__arte .aire { position: absolute; left: 96px; right: 0; top: 50%; translate: 0 -50%; }
.termo--404 .termo__num { gap: 6px; }
.termo--404 .d7 { width: 44px; height: 80px; }
@keyframes sube { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes entra-aire { from { transform: translateX(40%) skewX(-12deg); opacity: 0; } to { transform: translateX(0) skewX(-12deg); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .simple__grid .simple__in > * { animation: sube 320ms var(--ease-out) both; }
  .simple__grid .simple__in > :nth-child(2) { animation-delay: 50ms; }
  .simple__grid .simple__in > :nth-child(3) { animation-delay: 100ms; }
  .simple__arte .termo { animation: sube 400ms var(--ease-out) 100ms both; }
  .aire--entra i { animation: entra-aire 600ms var(--ease-out) both; }
  .aire--entra i:nth-child(2) { animation-delay: 80ms; }
  .aire--entra i:nth-child(3) { animation-delay: 160ms; }
  .aire--entra i:nth-child(4) { animation-delay: 240ms; }
}
@media (min-width: 960px) {
  .simple { padding-block: 80px 120px; }
  .simple h1 { font-size: 48px; line-height: 52px; }
  .simple h2 { font-size: 22px; line-height: 26px; }
  .simple__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; min-height: calc(100svh - var(--header-h) - 200px); }
  .simple__arte { min-height: 280px; margin-right: calc(-1 * (max(0px, (100vw - var(--wrap) - 2 * var(--g)) / 2) + var(--g))); }
}

/* ---------- Testimonios (se crean desde JS solo si CONFIG los activa) ---------- */
.testimonios { display: grid; gap: 8px; }
.testimonio { margin: 0; padding: 24px; border-radius: var(--radius-md); background: var(--ice-100); display: grid; gap: 12px; align-content: start; min-width: 0; }
.testimonio p { font-size: 18px; line-height: 28px; overflow-wrap: anywhere; white-space: pre-line; }
.testimonio footer { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); overflow-wrap: anywhere; }
@media (min-width: 960px) { .testimonios { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Entrada "como aire" de los titulares ---------- */
.aire-pendiente { opacity: 0; transform: translateY(8px); }
.aire-lista { transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); transition-delay: var(--d, 0ms); }

/* Movimiento reducido: todo queda quieto en el estado frío final. */
@media (prefers-reduced-motion: reduce) {
  .aire-pendiente { opacity: 1; transform: none; }
  .aire-lista, .btn, .flotante, .faq details, .faq .mas::before, .faq .mas::after, .galeria__mini, .galeria__btn, .opcion, .termo-mini { transition: none; }
  .aire i { transform: skewX(-12deg); }
  .galeria__mini:hover { transform: none; }
}