@charset "UTF-8";
/* ==========================================================================
   Attic Heroes 2026 — hoja principal
   --------------------------------------------------------------------------
   Paleta contada pixel a pixel sobre el logotipo del cliente:
     navy  #003E84  86.9 % de la tinta
     azul  #0078C3  11.8 %
     ambar #FFC200   1.2 %  (los dos guiones que flanquean "Attic")

   REGLAS DE CONTRASTE QUE NO SE PUEDEN ROMPER (WCAG 2.1 AA, medidas):
     · #FFC200 sobre blanco = 1.62:1  ->  el ambar NUNCA es texto sobre claro.
       Sobre carbon da 11.37:1 y sobre navy 6.41:1, ahi si.
     · El boton ambar lleva texto CARBON (11.37:1), jamas blanco.
     · #0078C3 sobre blanco = 4.69:1: pasa AA justo. Para texto pequeno y
       enlaces en cuerpo va --ah-azul-tinta (6.39:1).
     · Sobre fondo oscuro el azul de marca no se lee: ahi va --ah-celeste.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
  /* Marca */
  --ah-navy: #003E84;
  --ah-navy-deep: #00265A;
  --ah-navy-noche: #001B42;
  --ah-carbon: #04142B;
  --ah-azul: #0078C3;
  --ah-azul-tinta: #00639F;
  --ah-celeste: #6FC4FF;
  --ah-ambar: #FFC200;
  --ah-ambar-tinta: #7A5800;

  /* Neutros */
  --ah-tinta: #0B1B33;
  --ah-texto: #4A5568;
  --ah-texto-suave: #64748B;
  --ah-linea: #E2E8F0;
  --ah-linea-suave: #EDF1F6;
  --ah-papel: #F5F7FA;
  --ah-blanco: #FFFFFF;
  --ah-claro-oscuro: #C3CEDD;

  /* Tipografia */
  --ah-fuente-titulo: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ah-fuente-texto: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Medidas */
  --ah-ancho: 78rem;
  --ah-ancho-texto: 44rem;
  --ah-margen: clamp(1.15rem, 4vw, 3rem);
  --ah-radio: 14px;
  --ah-radio-chico: 9px;

  /* Sombras: navy con alfa, nunca gris neutro */
  --ah-sombra-1: 0 1px 2px rgba(0, 38, 90, .06), 0 2px 8px rgba(0, 38, 90, .05);
  --ah-sombra-2: 0 4px 12px rgba(0, 38, 90, .08), 0 14px 34px rgba(0, 38, 90, .09);
  --ah-sombra-3: 0 10px 28px rgba(0, 38, 90, .12), 0 30px 70px rgba(0, 38, 90, .16);

  /* Alto de la cabecera. El JS lo remide y lo reescribe; esto es el respaldo
     para el primer pintado y para cuando el JS no llega a correr. */
  --ah-cab: 5.5rem;

  --ah-facil: cubic-bezier(.22, .61, .36, 1);
  --ah-resorte: cubic-bezier(.34, 1.36, .64, 1);
}

/* ---------------------------------------------------------------- 2. Reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ah-cab) + 1rem);
}

body {
  margin: 0;
  font-family: var(--ah-fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ah-texto);
  background: var(--ah-blanco);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* OJO: esta regla es la que rompe la foto del hero si no se le pone
   `max-width: none` explicito mas abajo. Documentado a proposito. */
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5 {
  font-family: var(--ah-fuente-titulo);
  color: var(--ah-tinta);
  line-height: 1.12;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  font-weight: 800;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 900; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
h4 { font-size: 1.08rem; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ah-azul-tinta); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--ah-navy); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

strong { color: var(--ah-tinta); font-weight: 650; }
em { font-style: italic; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ah-ambar);
  outline-offset: 3px;
  border-radius: 4px;
}

.ah-vis-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.ah-saltar {
  position: absolute; top: -100vh; left: 1rem; z-index: 200;
  background: var(--ah-ambar); color: var(--ah-carbon);
  padding: .8rem 1.3rem; border-radius: var(--ah-radio-chico); font-weight: 700;
}
.ah-saltar:focus { top: 1rem; }

/* ------------------------------------------------------------- 3. Envases */
.ah-caja {
  width: 100%;
  max-width: var(--ah-ancho);
  margin-inline: auto;
  padding-inline: var(--ah-margen);
}
.ah-caja--angosta { max-width: 58rem; }

.ah-seccion { padding-block: clamp(3.6rem, 8vw, 7rem); }
.ah-seccion--papel { background: var(--ah-papel); }
.ah-seccion--oscura { background: var(--ah-carbon); color: var(--ah-claro-oscuro); }
.ah-seccion--navy { background: var(--ah-navy); color: #DCE7F5; }

.ah-seccion--oscura h1, .ah-seccion--oscura h2,
.ah-seccion--oscura h3, .ah-seccion--oscura h4,
.ah-seccion--navy h1, .ah-seccion--navy h2,
.ah-seccion--navy h3, .ah-seccion--navy h4 { color: var(--ah-blanco); }

.ah-seccion--oscura a, .ah-seccion--navy a { color: var(--ah-celeste); }

/* Encabezado de seccion ------------------------------------------------- */
.ah-cabezal { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.ah-cabezal--centro { margin-inline: auto; text-align: center; }

.ah-guino {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--ah-fuente-titulo);
  font-size: .78rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ah-azul-tinta);
  margin-bottom: .95rem;
}
.ah-guino::before {
  content: ""; width: 1.9rem; height: 3px; border-radius: 2px;
  background: var(--ah-ambar); flex: none;
}
.ah-seccion--oscura .ah-guino, .ah-seccion--navy .ah-guino { color: var(--ah-ambar); }
.ah-cabezal--centro .ah-guino::before { display: none; }

.ah-entradilla {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--ah-texto);
  max-width: 40rem;
}
.ah-cabezal--centro .ah-entradilla { margin-inline: auto; }
.ah-seccion--oscura .ah-entradilla, .ah-seccion--navy .ah-entradilla { color: var(--ah-claro-oscuro); }

/* -------------------------------------------------------------- 4. Botones */
.ah-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--ah-fuente-titulo);
  font-size: .95rem; font-weight: 700; letter-spacing: .005em;
  padding: .95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .22s var(--ah-resorte), box-shadow .22s var(--ah-facil),
              background-color .18s var(--ah-facil), color .18s var(--ah-facil),
              border-color .18s var(--ah-facil);
}
.ah-boton:hover { transform: translateY(-2px); }
.ah-boton:active { transform: translateY(0); }

/* El ambar SIEMPRE con texto carbon: 11.37:1. Con blanco daria 1.62:1. */
.ah-boton--primario { background: var(--ah-ambar); color: var(--ah-carbon); box-shadow: var(--ah-sombra-1); }
.ah-boton--primario:hover { background: #FFD03D; color: var(--ah-carbon); box-shadow: var(--ah-sombra-2); }

.ah-boton--navy { background: var(--ah-navy); color: var(--ah-blanco); }
.ah-boton--navy:hover { background: var(--ah-navy-deep); color: var(--ah-blanco); }

.ah-boton--linea { border-color: var(--ah-navy); color: var(--ah-navy); background: transparent; }
.ah-boton--linea:hover { background: var(--ah-navy); color: var(--ah-blanco); }

.ah-boton--fantasma { border-color: rgba(255, 255, 255, .45); color: var(--ah-blanco); background: rgba(255, 255, 255, .06); }
.ah-boton--fantasma:hover { background: rgba(255, 255, 255, .16); border-color: var(--ah-blanco); color: var(--ah-blanco); }

.ah-boton--bloque { width: 100%; }

.ah-enlace-flecha {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--ah-fuente-titulo); font-weight: 700; font-size: .93rem;
  color: var(--ah-azul-tinta); text-decoration: none;
}
.ah-enlace-flecha svg { width: 1.05em; height: 1.05em; transition: transform .22s var(--ah-facil); }
.ah-enlace-flecha:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------ 5. Cabecera */
.ah-cabecera {
  position: fixed; inset: 0 0 auto; z-index: 60;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s var(--ah-facil), border-color .3s var(--ah-facil),
              box-shadow .3s var(--ah-facil);
}
.ah-cabecera.is-pegada {
  background: rgba(255, 255, 255, .96);
  border-bottom-color: var(--ah-linea);
  box-shadow: var(--ah-sombra-1);
}

/* Sobre el hero la cabecera arranca transparente y en blanco. */
.ah-cabecera--sobre-hero:not(.is-pegada) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-cab-enlace,
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-cab-tel { color: var(--ah-blanco); }
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-logo-color { display: none; }
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-logo-blanco { display: block; }
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-hamburguesa span[aria-hidden] { background: var(--ah-blanco); }

.ah-logo-blanco { display: none; }

.ah-cab-fila {
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  min-height: 4.6rem;
  padding-block: .7rem;
}

.ah-logo { flex: none; display: block; line-height: 0; }
.ah-logo img { width: auto; height: clamp(2.5rem, 4.4vw, 3.35rem); }

.ah-nav { margin-left: auto; }
.ah-nav-lista { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.35rem); list-style: none; margin: 0; padding: 0; }
.ah-nav-lista > li { margin: 0; position: relative; }

.ah-cab-enlace {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--ah-fuente-titulo); font-size: .9rem; font-weight: 600;
  color: var(--ah-tinta); text-decoration: none;
  padding: .55rem .2rem;
  position: relative;
  transition: color .18s var(--ah-facil);
}
.ah-cab-enlace::after {
  content: ""; position: absolute; left: .2rem; right: .2rem; bottom: .2rem;
  height: 2px; border-radius: 2px; background: var(--ah-ambar);
  transform: scaleX(0); transform-origin: left; transition: transform .26s var(--ah-facil);
}
.ah-cab-enlace:hover::after, .ah-cab-enlace[aria-current="page"]::after { transform: scaleX(1); }
.ah-cab-enlace:hover { color: var(--ah-navy); }
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-cab-enlace:hover { color: var(--ah-blanco); }
.ah-cab-enlace svg { width: .7rem; height: .7rem; opacity: .55; }

/* Submenu de escritorio */
.ah-submenu {
  position: absolute; top: 100%; left: -1rem; z-index: 5;
  min-width: 20rem;
  list-style: none; margin: 0; padding: .55rem;
  background: var(--ah-blanco);
  border: 1px solid var(--ah-linea);
  border-radius: var(--ah-radio);
  box-shadow: var(--ah-sombra-3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ah-facil), transform .2s var(--ah-facil), visibility .2s;
}
.ah-nav-lista > li:hover > .ah-submenu,
.ah-nav-lista > li:focus-within > .ah-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.ah-submenu li { margin: 0; }
.ah-submenu a {
  display: block; padding: .62rem .8rem; border-radius: var(--ah-radio-chico);
  font-size: .9rem; font-weight: 500; color: var(--ah-texto); text-decoration: none;
  transition: background-color .16s, color .16s;
}
.ah-submenu a:hover { background: var(--ah-papel); color: var(--ah-navy); }

.ah-cab-acciones { display: flex; align-items: center; gap: .7rem; flex: none; }

.ah-cab-tel {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--ah-fuente-titulo); font-weight: 700; font-size: .9rem;
  color: var(--ah-navy); text-decoration: none; white-space: nowrap;
}
.ah-cab-tel svg { width: 1.05rem; height: 1.05rem; }

.ah-idioma {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--ah-fuente-titulo); font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .42rem .7rem; border-radius: 999px;
  border: 1.5px solid currentColor; color: var(--ah-navy);
  text-decoration: none; opacity: .8;
}
.ah-idioma:hover { opacity: 1; color: var(--ah-navy); }
.ah-cabecera--sobre-hero:not(.is-pegada) .ah-idioma { color: var(--ah-blanco); }

/* Hamburguesa. El primer hijo es el <span class="ah-vis-oculto">, asi que las
   tres barras son los hijos 2, 3 y 4: se seleccionan por [aria-hidden] y no
   por nth-child, que es la trampa clasica de este componente. */
.ah-hamburguesa {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 2.9rem; height: 2.9rem; padding: 0;
  background: transparent; border: 0; cursor: pointer; flex: none;
}
.ah-hamburguesa span[aria-hidden] {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ah-tinta); margin-inline: auto;
  transition: transform .28s var(--ah-facil), opacity .18s var(--ah-facil), background-color .2s;
}
/* OJO CON EL INDICE. `nth-of-type` cuenta entre hermanos del MISMO elemento,
   y el primer hijo del boton es el <span class="ah-vis-oculto"> con el rotulo
   accesible. Las tres barras son por tanto los spans 2, 3 y 4. Con 1-2-3 la
   cruz sale como una sola raya diagonal y una barra horizontal suelta:
   comprobado en el navegador, no es teoria. */
body.ah-menu-abierto .ah-hamburguesa span[aria-hidden]:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
body.ah-menu-abierto .ah-hamburguesa span[aria-hidden]:nth-of-type(3) { opacity: 0; }
body.ah-menu-abierto .ah-hamburguesa span[aria-hidden]:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }

/* Panel movil ----------------------------------------------------------- */
.ah-panel {
  position: fixed; inset: 0; z-index: 55;
  display: flex; flex-direction: column;
  padding: calc(var(--ah-cab) + 1.4rem) var(--ah-margen) 2.4rem;
  background: var(--ah-blanco);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-1.2rem);
  transition: opacity .28s var(--ah-facil), transform .28s var(--ah-facil), visibility .28s;
}
body.ah-menu-abierto .ah-panel { opacity: 1; visibility: visible; transform: none; }

/* Un elemento con backdrop-filter se vuelve el bloque contenedor de sus
   descendientes position:fixed. Con el panel dentro de la cabecera eso lo
   dejaba de 74 px de alto. Se apaga el filtro mientras el menu esta abierto. */
body.ah-menu-abierto .ah-cabecera {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--ah-blanco);
  z-index: 80;
}
body.ah-menu-abierto { overflow: hidden; }

.ah-panel-lista { list-style: none; margin: 0; padding: 0; }
.ah-panel-lista > li { margin: 0; border-bottom: 1px solid var(--ah-linea-suave); }
.ah-panel-lista > li > a, .ah-panel-boton {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 1.05rem .2rem;
  font-family: var(--ah-fuente-titulo); font-size: 1.18rem; font-weight: 700;
  color: var(--ah-tinta); text-decoration: none;
  background: transparent; border: 0; text-align: left; cursor: pointer;
}
.ah-panel-boton svg { width: 1rem; height: 1rem; transition: transform .26s var(--ah-facil); }
.ah-panel-boton[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Un submenu con max-height:0 sigue ocupando su padding vertical: hay que
   llevarlo a 0 tambien o el acordeon cerrado deja una franja de 1.6 rem. */
.ah-panel-sub {
  list-style: none; margin: 0;
  padding: 0 0 0 .9rem;
  max-height: 0; overflow: hidden;
  transition: max-height .32s var(--ah-facil), padding .32s var(--ah-facil);
}
.ah-panel-sub.is-abierto { max-height: 34rem; padding: 0 0 1rem .9rem; }
.ah-panel-sub a {
  display: block; padding: .62rem 0;
  font-size: 1rem; color: var(--ah-texto); text-decoration: none;
}
.ah-panel-sub a:hover { color: var(--ah-navy); }

.ah-panel-pie { margin-top: auto; padding-top: 2rem; display: grid; gap: .8rem; }

@media (max-width: 1023px) {
  .ah-nav { display: none; }
  .ah-hamburguesa { display: flex; }
  .ah-cab-tel span { display: none; }

  /* Objetivo tactil de 44x44 como minimo. Medido en el navegador: el boton
     del telefono quedaba en 33x33 y el conmutador de idioma en 82x35, los
     dos por debajo de lo que un pulgar acierta con fiabilidad. */
  .ah-cab-tel {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0;
  }
  .ah-idioma { min-height: 44px; padding-inline: .9rem; font-size: .8rem; }
}
@media (max-width: 560px) {
  .ah-idioma { padding: .38rem .55rem; font-size: .72rem; }
}

/* ==========================================================================
   6. HERO PANORAMICO 3D
   --------------------------------------------------------------------------
   La escena tiene tres capas y el orden importa:

     .ah-hero-escena   perspective. NO lleva preserve-3d.
       .ah-hero-camara preserve-3d. Aqui viven SOLO las fotos.
     .ah-hero-velo     FUERA de la escena, apilados con z-index.
     .ah-hero-cuerpo   el texto, encima de todo.

   Cuatro trampas comprobadas en proyectos anteriores, todas evitadas aqui:

   1. `img { max-width: 100% }` de la seccion 2 ANULA el ancho de la foto.
      Sin `max-width: none` el navegador la recorta al 100 % del padre y al
      empujarla con translateZ negativo la perspectiva la encoge y descubre
      una franja de fondo. Por eso la foto lo declara explicitamente.

   2. Los velos NO pueden vivir dentro del contenedor preserve-3d: con un
      translateZ pequeno el navegador los ordena POR DETRAS de la foto,
      porque en la ordenacion 3D pesan tambien la opacidad en transicion y
      cualquier will-change. Fuera de la escena y con z-index es determinista.

   3. `will-change: transform` sobre la capa preserve-3d hace que Chrome NO
      pinte la foto: se ve un rectangulo negro con la imagen cargada y en su
      sitio. El paralaje funciona igual sin el. No volver a ponerlo.

   4. Las fotos y los paneles inactivos necesitan `top: 0` explicito. Sin el
      toman su posicion estatica (debajo del activo) y durante el cruce de
      opacidad el panel saliente aparece abajo, encima de los controles.
   ========================================================================== */

.ah-hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding-top: calc(var(--ah-cab) + 2rem);
  padding-bottom: clamp(1.6rem, 4vw, 3rem);
  background: var(--ah-carbon);
  overflow: hidden;
  isolation: isolate;
}

/* --- capa 1: la escena en perspectiva --------------------------------- */
.ah-hero-escena {
  position: absolute; inset: 0; z-index: 0;
  perspective: 1250px;
  perspective-origin: 50% 48%;
  pointer-events: none;
}

.ah-hero-camara {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  /* --ah-px/--ah-py los escribe el puntero; --ah-sy, el scroll. */
  transform:
    translate3d(calc(var(--ah-px, 0) * -14px), calc(var(--ah-py, 0) * -10px + var(--ah-sy, 0px)), 0)
    rotateY(calc(var(--ah-px, 0) * 2.4deg))
    rotateX(calc(var(--ah-py, 0) * -1.6deg));
  transition: transform .5s var(--ah-facil);
}

.ah-hero-foto {
  position: absolute;
  top: -18%; left: -16%;
  width: 132%; height: 136%;
  max-width: none;          /* <- imprescindible: ver trampa 1 */
  object-fit: cover;
  transform: translateZ(-190px) scale(1.19);
  opacity: 0;
  transition: opacity 1.05s var(--ah-facil);
}
.ah-hero-foto.is-activa { opacity: 1; }

/* Ken Burns muy lento sobre la foto activa. Va en scale ademas del scale de
   compensacion de la perspectiva, por eso el keyframe arranca en 1.19. */
@keyframes ah-deriva {
  from { transform: translateZ(-190px) scale(1.19); }
  to   { transform: translateZ(-190px) scale(1.29); }
}
.ah-hero-foto.is-activa { animation: ah-deriva 17s var(--ah-facil) forwards; }

/* Un plano intermedio: una rejilla tenue mas cerca de la camara que la foto,
   para que el paralaje se lea como profundidad y no como un simple empujon. */
.ah-hero-malla {
  position: absolute; inset: -10%;
  transform: translateZ(-60px);
  opacity: .1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(ellipse 62% 46% at 46% 62%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 62% 46% at 46% 62%, #000 0%, transparent 70%);
}

/* --- capa 2: los velos, fuera de la escena 3D -------------------------- */
.ah-hero-velo { position: absolute; inset: 0; pointer-events: none; }
/* Calibrados mirando la foto, no a ojo de codigo: el objetivo es que el
   panoramico SE VEA y que el texto siga por encima de 7:1. El velo base
   trabaja fuerte solo en el tercio inferior, que es donde vive el texto; el
   lateral es un apoyo suave y la vineta solo cierra las esquinas. */
.ah-hero-velo--base {
  z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 20, 43, .95) 0%, rgba(4, 20, 43, .78) 26%,
                    rgba(4, 20, 43, .34) 54%, rgba(4, 20, 43, .12) 74%,
                    rgba(4, 20, 43, .42) 100%);
}
.ah-hero-velo--lado {
  z-index: 2;
  background: linear-gradient(102deg, rgba(0, 38, 90, .6) 0%, rgba(0, 38, 90, .2) 38%, transparent 62%);
}
.ah-hero-velo--vineta {
  z-index: 3;
  background: radial-gradient(ellipse 92% 84% at 52% 44%, transparent 48%, rgba(0, 27, 66, .5) 100%);
}

/* Franja ambar del logotipo, como firma grafica en el borde inferior. */
.ah-hero-firma {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 4px;
  background: linear-gradient(90deg, var(--ah-ambar) 0%, var(--ah-azul) 38%, var(--ah-navy) 72%, transparent 100%);
}

/* --- capa 3: el contenido --------------------------------------------- */
.ah-hero-cuerpo { position: relative; z-index: 5; width: 100%; }

.ah-hero-paneles { position: relative; min-height: 22rem; }

.ah-hero-panel {
  position: absolute;
  top: 0; left: 0;            /* <- trampa 4 */
  width: 100%; max-width: 46rem;
  opacity: 0; visibility: hidden;
  transform: translateY(18px);
  transition: opacity .6s var(--ah-facil), transform .6s var(--ah-facil), visibility .6s;
}
.ah-hero-panel.is-activa {
  position: relative;
  opacity: 1; visibility: visible; transform: none;
}

.ah-hero-guino {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--ah-fuente-titulo);
  font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ah-ambar);
  background: rgba(4, 20, 43, .5);
  border: 1px solid rgba(255, 194, 0, .32);
  padding: .48rem 1rem; border-radius: 999px;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ah-hero-titulo {
  font-size: clamp(2.15rem, 6.2vw, 4.6rem);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.03em;
  color: var(--ah-blanco);
  margin: 0 0 1.1rem;
  text-shadow: 0 2px 24px rgba(0, 20, 50, .5);
}

/* Destello del <em>. Es un degradado recortado al texto; en un titulo de
   varias lineas el recorte se calcula sobre la caja completa, asi que el
   <em> viaja entero con nowrap para que el degradado no se parta a media
   palabra. Es una pieza EN LINEA: el nowrap aqui si corresponde. */
.ah-hero-titulo em {
  font-style: normal;
  white-space: nowrap;
  background: linear-gradient(96deg, var(--ah-ambar) 0%, #FFE07A 44%, var(--ah-ambar) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ah-destello 6.5s linear infinite;
}
@keyframes ah-destello {
  0%   { background-position: 220% 0; }
  100% { background-position: -20% 0; }
}

.ah-hero-texto {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.68;
  color: #DCE6F2;
  max-width: 36rem;
  margin: 0 0 1.9rem;
  text-shadow: 0 1px 12px rgba(0, 20, 50, .45);
}

.ah-hero-acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --- controles --------------------------------------------------------- */
.ah-hero-controles {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.4rem 2rem;
  margin-top: clamp(2rem, 4vw, 3.2rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.ah-hero-pestanas {
  display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0;
  flex: 1 1 0;              /* 1 1 0, NO 1 1 auto: con auto el navegador
                               coloca por tamano de contenido y recien
                               despues encoge, asi que la lista se va a un
                               renglon y las flechas a otro. */
  min-width: 0;
}
.ah-hero-pestanas li { margin: 0; flex: 1 1 0; min-width: 0; }

.ah-hero-pestana {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: .7rem 0 0;
  color: rgba(255, 255, 255, .58);
  font-family: var(--ah-fuente-titulo);
  font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-top: 2px solid rgba(255, 255, 255, .2);
  position: relative;
  transition: color .2s var(--ah-facil), border-color .2s var(--ah-facil);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ah-hero-pestana:hover { color: var(--ah-blanco); border-top-color: rgba(255, 255, 255, .5); }
.ah-hero-pestana[aria-selected="true"] { color: var(--ah-blanco); border-top-color: transparent; }

/* Barra de avance: se anima con el mismo tiempo que el auto-avance. */
.ah-hero-pestana::before {
  content: ""; position: absolute; top: -2px; left: 0; height: 2px; width: 100%;
  background: var(--ah-ambar);
  transform: scaleX(0); transform-origin: left;
}
.ah-hero-pestana[aria-selected="true"]::before { animation: ah-avance var(--ah-hero-lapso, 7s) linear forwards; }
body.ah-hero-pausa .ah-hero-pestana::before { animation-play-state: paused; }
@keyframes ah-avance { to { transform: scaleX(1); } }

.ah-hero-botones {
  display: flex; align-items: center; gap: .5rem;
  flex: none;               /* NUNCA `flex: 1 1 20rem`: al girar el eje a
                               columna en movil ese 20rem se convierte en
                               ALTURA y el bloque atraviesa el hero. */
}

.ah-hero-flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.9rem; height: 2.9rem; padding: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .07);
  color: var(--ah-blanco); cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s var(--ah-resorte);
}
.ah-hero-flecha:hover { background: rgba(255, 255, 255, .2); border-color: var(--ah-blanco); transform: scale(1.06); }
.ah-hero-flecha svg { width: 1.05rem; height: 1.05rem; }

.ah-hero-cuenta {
  font-family: var(--ah-fuente-titulo); font-weight: 700; font-size: .82rem;
  color: rgba(255, 255, 255, .72); letter-spacing: .08em;
  margin-right: .4rem; white-space: nowrap;
}
.ah-hero-cuenta b { color: var(--ah-ambar); font-weight: 800; }

/* El destello del <em> lleva `nowrap` para que `background-clip: text` no
   parta el degradado entre renglones. Eso funciona en escritorio, pero a
   390 px una frase como «clean, sealed and documented» mide 503 px y el
   `overflow: hidden` del hero la RECORTA: se pierde texto. Medido en el
   navegador. Un degradado que se reinicia por linea es mucho menos malo que
   una frase cortada, asi que en movil se deja fluir. */
@media (max-width: 800px) {
  .ah-hero-titulo em { white-space: normal; }
}

@media (max-width: 800px) {
  .ah-hero-controles { flex-direction: column; align-items: stretch; }
  .ah-hero-botones { justify-content: space-between; }
  .ah-hero-paneles { min-height: 25rem; }

  /* En movil el texto ocupa casi toda la foto, asi que el velo base tiene que
     trabajar mas arriba. Medido sobre la diapositiva del aislamiento, que es
     la mas clara: sin esto el destello ambar del <em> cae sobre fibra rosa
     iluminada y pierde contraste. */
  .ah-hero-velo--base {
    background:
      linear-gradient(to top, rgba(4, 20, 43, .96) 0%, rgba(4, 20, 43, .88) 32%,
                      rgba(4, 20, 43, .7) 66%, rgba(4, 20, 43, .52) 100%);
  }
  .ah-hero-velo--lado { background: linear-gradient(180deg, rgba(0, 27, 66, .55) 0%, transparent 40%); }
}
@media (max-width: 520px) {
  .ah-hero-pestana { font-size: 0; padding-top: .55rem; }
  .ah-hero-pestana::after { content: attr(data-num); font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ah-hero-foto.is-activa { animation: none; }
  .ah-hero-camara { transition: none; transform: none; }
  .ah-hero-titulo em { animation: none; }
  .ah-hero-pestana[aria-selected="true"]::before { animation: none; transform: scaleX(1); }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   7. Rejillas y tarjetas
   ========================================================================== */
.ah-rejilla { display: grid; gap: clamp(1.1rem, 2vw, 1.8rem); }
.ah-rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.ah-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.ah-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Tarjeta de servicio ---------------------------------------------------- */
.ah-servicio {
  display: flex; flex-direction: column;
  background: var(--ah-blanco);
  border: 1px solid var(--ah-linea);
  border-radius: var(--ah-radio);
  overflow: hidden;
  transition: transform .3s var(--ah-facil), box-shadow .3s var(--ah-facil),
              border-color .3s var(--ah-facil);
}
.ah-servicio:hover {
  transform: translateY(-5px);
  box-shadow: var(--ah-sombra-3);
  border-color: transparent;
}

/* Un <a> con aspect-ratio sigue siendo display:inline y el navegador ignora
   aspect-ratio y overflow. Sin este display:block la foto toma su alto
   natural y el overflow:hidden de la tarjeta RECORTA el parrafo. */
.ah-servicio-foto {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ah-papel);
}
.ah-servicio-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ah-facil);
}
.ah-servicio:hover .ah-servicio-foto img { transform: scale(1.06); }

.ah-servicio-icono {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 12px;
  background: var(--ah-ambar); color: var(--ah-carbon);
  box-shadow: 0 6px 18px rgba(0, 20, 50, .28);
}
.ah-servicio-icono svg { width: 1.5rem; height: 1.5rem; }

.ah-servicio-cuerpo { padding: 1.5rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ah-servicio-cuerpo h3 { margin-bottom: .5rem; font-size: 1.22rem; }
.ah-servicio-cuerpo h3 a { color: inherit; text-decoration: none; }
.ah-servicio-cuerpo h3 a:hover { color: var(--ah-navy); }
.ah-servicio-cuerpo p { font-size: .97rem; color: var(--ah-texto); margin-bottom: 1.2rem; }
.ah-servicio-cuerpo .ah-enlace-flecha { margin-top: auto; }

/* Pilar / caracteristica ------------------------------------------------- */
.ah-pilar {
  padding: 1.7rem;
  background: var(--ah-blanco);
  border: 1px solid var(--ah-linea);
  border-radius: var(--ah-radio);
  transition: transform .3s var(--ah-facil), box-shadow .3s var(--ah-facil);
}
.ah-pilar:hover { transform: translateY(-4px); box-shadow: var(--ah-sombra-2); }
.ah-pilar-icono {
  display: grid; place-items: center;
  width: 3.2rem; height: 3.2rem; border-radius: 14px;
  background: linear-gradient(140deg, var(--ah-navy) 0%, var(--ah-azul) 100%);
  color: var(--ah-blanco);
  margin-bottom: 1.1rem;
}
.ah-pilar-icono svg { width: 1.6rem; height: 1.6rem; }
.ah-pilar h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.ah-pilar p { font-size: .95rem; margin: 0; }

.ah-seccion--oscura .ah-pilar {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .12);
}
.ah-seccion--oscura .ah-pilar p { color: var(--ah-claro-oscuro); }
.ah-seccion--oscura .ah-pilar-icono { background: var(--ah-ambar); color: var(--ah-carbon); }

/* Cifras ----------------------------------------------------------------- */
.ah-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1.4rem; }
.ah-cifra { text-align: center; padding: 1.2rem .6rem; }
.ah-cifra b {
  display: block;
  font-family: var(--ah-fuente-titulo);
  font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 900; line-height: 1;
  color: var(--ah-ambar);
  letter-spacing: -.03em;
  margin-bottom: .5rem;
}
.ah-cifra span { font-size: .9rem; color: var(--ah-claro-oscuro); display: block; }

/* Proceso ---------------------------------------------------------------- */
.ah-proceso { counter-reset: paso; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.ah-paso { position: relative; padding-top: 3.6rem; }
.ah-paso::before {
  counter-increment: paso; content: counter(paso, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--ah-fuente-titulo); font-size: 2.5rem; font-weight: 900;
  line-height: 1; color: var(--ah-ambar);
  letter-spacing: -.04em;
}
.ah-paso::after {
  content: ""; position: absolute; top: 1.15rem; left: 3.4rem; right: -1.4rem;
  height: 2px; background: linear-gradient(90deg, var(--ah-linea), transparent);
}
.ah-paso:last-child::after { display: none; }
.ah-paso h3 { font-size: 1.08rem; margin-bottom: .45rem; }
.ah-paso p { font-size: .95rem; margin: 0; }
.ah-seccion--oscura .ah-paso::after { background: linear-gradient(90deg, rgba(255, 255, 255, .22), transparent); }
.ah-seccion--oscura .ah-paso p { color: var(--ah-claro-oscuro); }
@media (max-width: 700px) { .ah-paso::after { display: none; } }

/* Bloque partido texto + foto -------------------------------------------- */
.ah-partido {
  display: grid; gap: clamp(1.8rem, 4vw, 3.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center;
}
.ah-partido--invertido > :first-child { order: 2; }
@media (max-width: 767px) { .ah-partido--invertido > :first-child { order: 0; } }

.ah-marco {
  position: relative;
  border-radius: var(--ah-radio);
  overflow: hidden;
  box-shadow: var(--ah-sombra-3);
}
.ah-marco img { width: 100%; height: 100%; object-fit: cover; }
.ah-marco--alto { aspect-ratio: 4 / 5; }
.ah-marco--ancho { aspect-ratio: 16 / 11; }

/* Un adorno de tejado, tomado del logotipo, para las fotos destacadas. */
.ah-marco--tejado::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--ah-ambar) 0 22%, var(--ah-azul) 22% 58%, var(--ah-navy) 58% 100%);
}

/* Lista con palomita ----------------------------------------------------- */
.ah-lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ah-lista-check li {
  position: relative; padding-left: 2.1rem; margin: 0;
  font-size: .99rem; line-height: 1.6;
}
.ah-lista-check li::before {
  content: ""; position: absolute; left: 0; top: .18em;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--ah-ambar);
  /* Palomita dibujada con mascara para no depender de una fuente de iconos. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ah-lista-check li::after {
  content: ""; position: absolute; left: .38rem; top: .48em;
  width: .64rem; height: .34rem;
  border-left: 2.2px solid var(--ah-carbon);
  border-bottom: 2.2px solid var(--ah-carbon);
  transform: rotate(-45deg);
}
.ah-seccion--oscura .ah-lista-check li { color: var(--ah-claro-oscuro); }

/* Lista de senales ------------------------------------------------------- */
.ah-senales { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.ah-senales li {
  margin: 0; padding: 1rem 1.1rem 1rem 3.1rem;
  background: var(--ah-blanco);
  border: 1px solid var(--ah-linea);
  border-left: 3px solid var(--ah-ambar);
  border-radius: var(--ah-radio-chico);
  font-size: .97rem; position: relative;
}
.ah-senales li::before {
  content: "!"; position: absolute; left: 1.15rem; top: 1rem;
  font-family: var(--ah-fuente-titulo); font-weight: 900; font-size: 1.05rem;
  color: var(--ah-ambar-tinta);
}

/* Acordeon de preguntas -------------------------------------------------- */
.ah-faq { display: grid; gap: .7rem; }
.ah-faq-item {
  background: var(--ah-blanco);
  border: 1px solid var(--ah-linea);
  border-radius: var(--ah-radio);
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.ah-faq-item.is-abierta { border-color: rgba(0, 62, 132, .28); box-shadow: var(--ah-sombra-1); }
.ah-faq-boton {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  width: 100%; padding: 1.15rem 1.3rem; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--ah-fuente-titulo); font-size: 1.02rem; font-weight: 700;
  color: var(--ah-tinta); line-height: 1.4;
}
.ah-faq-mas { flex: none; position: relative; width: 1.15rem; height: 1.15rem; margin-top: .18rem; }
.ah-faq-mas::before, .ah-faq-mas::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: var(--ah-azul); border-radius: 2px;
  transition: transform .28s var(--ah-facil), opacity .2s;
}
.ah-faq-mas::before { width: 100%; height: 2.4px; }
.ah-faq-mas::after { width: 2.4px; height: 100%; }
.ah-faq-item.is-abierta .ah-faq-mas::after { transform: rotate(90deg); opacity: 0; }
.ah-faq-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .32s var(--ah-facil);
}
.ah-faq-item.is-abierta .ah-faq-panel { grid-template-rows: 1fr; }
.ah-faq-panel > div { overflow: hidden; }
.ah-faq-panel p { padding: 0 1.3rem 1.3rem; font-size: .98rem; margin: 0; }

/* Galeria ---------------------------------------------------------------- */
.ah-gal-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.ah-gal-filtro {
  padding: .55rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--ah-linea); background: var(--ah-blanco);
  font-family: var(--ah-fuente-titulo); font-size: .85rem; font-weight: 700;
  color: var(--ah-texto); cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}
.ah-gal-filtro:hover { border-color: var(--ah-navy); color: var(--ah-navy); }
.ah-gal-filtro[aria-pressed="true"] { background: var(--ah-navy); border-color: var(--ah-navy); color: var(--ah-blanco); }

.ah-galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.ah-gal-pieza {
  position: relative; display: block;
  aspect-ratio: 27 / 40;
  border-radius: var(--ah-radio); overflow: hidden;
  background: var(--ah-papel);
  transition: transform .3s var(--ah-facil), box-shadow .3s var(--ah-facil), opacity .3s;
}
.ah-gal-pieza img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ah-facil); }
.ah-gal-pieza:hover { transform: translateY(-4px); box-shadow: var(--ah-sombra-3); }
.ah-gal-pieza:hover img { transform: scale(1.07); }
.ah-gal-pieza[hidden] { display: none; }
.ah-gal-pie {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 2.4rem .9rem .9rem;
  font-size: .84rem; font-weight: 600; color: var(--ah-blanco); line-height: 1.4;
  background: linear-gradient(to top, rgba(4, 20, 43, .92), transparent);
}

/* Areas de servicio ------------------------------------------------------ */
.ah-areas { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ah-area-grupo h3,
.ah-area-grupo > h2 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ah-navy); padding-bottom: .7rem; margin-bottom: .9rem;
  border-bottom: 2px solid var(--ah-ambar);
  /* Dos renglones reservados: con «South Bay and the border» a dos lineas y
     los demas a una, la linea ambar y las listas salian desalineadas. */
  display: flex; align-items: flex-end; min-height: 3.1em;
}
.ah-area-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .38rem; }
.ah-area-lista li { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: .5rem; }
.ah-area-lista li::before {
  content: ""; flex: none; width: .38rem; height: .38rem; border-radius: 50%;
  background: var(--ah-azul);
}
.ah-seccion--oscura .ah-area-grupo h3 { color: var(--ah-blanco); }
.ah-seccion--oscura .ah-area-lista li { color: var(--ah-claro-oscuro); }

/* ==========================================================================
   8. Formulario de contacto
   ========================================================================== */
.ah-contacto { display: grid; gap: clamp(1.8rem, 4vw, 3.4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); align-items: start; }

.ah-form { display: grid; gap: 1.1rem; }
.ah-form-fila { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }

.ah-campo { display: grid; gap: .42rem; }
.ah-campo label, .ah-campo legend {
  font-family: var(--ah-fuente-titulo); font-size: .82rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ah-tinta);
}
.ah-campo:has(legend) { border: 0; padding: 0; margin: 0; }
.ah-campo legend { padding: 0 0 .42rem; }
.ah-campo label .ah-req { color: var(--ah-ambar-tinta); }

.ah-campo input, .ah-campo select, .ah-campo textarea {
  width: 100%;
  font-family: var(--ah-fuente-texto); font-size: 1rem;
  color: var(--ah-tinta);
  padding: .85rem 1rem;
  background: var(--ah-blanco);
  border: 1.5px solid var(--ah-linea);
  border-radius: var(--ah-radio-chico);
  transition: border-color .18s, box-shadow .18s;
}
.ah-campo textarea { min-height: 8.5rem; resize: vertical; }
.ah-campo select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.1rem;
  padding-right: 2.6rem;
}
.ah-campo input:focus, .ah-campo select:focus, .ah-campo textarea:focus {
  outline: none;
  border-color: var(--ah-azul);
  box-shadow: 0 0 0 3px rgba(0, 120, 195, .16);
}
.ah-campo input[aria-invalid="true"], .ah-campo textarea[aria-invalid="true"] { border-color: #C42B2B; }
.ah-campo-error { font-size: .84rem; color: #A81F1F; }

/* Reto antispam. Se destaca con la franja ambar para que se lea como parte
   del formulario y no como un error, y el texto de ayuda va asociado con
   aria-describedby para que el lector de pantalla lo anuncie con el campo. */
.ah-reto {
  padding: 1rem 1.1rem;
  background: var(--ah-papel);
  border-left: 3px solid var(--ah-ambar);
  border-radius: 0 var(--ah-radio-chico) var(--ah-radio-chico) 0;
}
.ah-reto input { max-width: 14rem; background: var(--ah-blanco); }
.ah-campo-ayuda { font-size: .84rem; color: var(--ah-texto-suave); }

.ah-radios { display: flex; flex-wrap: wrap; gap: .5rem; }
.ah-radio { position: relative; }
.ah-radio input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ah-radio span {
  display: block; padding: .62rem 1.1rem;
  border: 1.5px solid var(--ah-linea); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--ah-texto);
  transition: background-color .18s, border-color .18s, color .18s;
}
.ah-radio input:checked + span { background: var(--ah-navy); border-color: var(--ah-navy); color: var(--ah-blanco); }
.ah-radio input:focus-visible + span { outline: 3px solid var(--ah-ambar); outline-offset: 2px; }

.ah-form-aviso { font-size: .86rem; color: var(--ah-texto-suave); }

.ah-aviso {
  padding: 1rem 1.2rem; border-radius: var(--ah-radio-chico);
  font-size: .96rem; border-left: 4px solid;
}
.ah-aviso--ok { background: #EAF6EF; border-color: #1E8449; color: #14532D; }
.ah-aviso--mal { background: #FDECEC; border-color: #C42B2B; color: #7F1D1D; }

/* Trampa contra robots: un campo real que ningun humano ve. */
.ah-miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Ficha de datos --------------------------------------------------------- */
.ah-datos { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0 0 1.8rem; }
.ah-dato { display: flex; gap: 1rem; margin: 0; align-items: flex-start; }
.ah-dato-icono {
  flex: none; display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem; border-radius: 11px;
  background: var(--ah-navy); color: var(--ah-blanco);
}
.ah-dato-icono svg { width: 1.25rem; height: 1.25rem; }
.ah-dato b {
  display: block; font-family: var(--ah-fuente-titulo);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ah-texto-suave); margin-bottom: .12rem;
}
.ah-dato a, .ah-dato span { font-size: 1rem; color: var(--ah-tinta); text-decoration: none; font-weight: 500; }
/* Area de toque de 24 px en los datos de contacto y en el pie inferior:
   son enlaces de telefono y correo, justo los que mas se tocan en movil. */
.ah-dato a { display: inline-block; padding-block: .15rem; min-height: 24px; }
.ah-pie-abajo a { display: inline-block; padding-block: .2rem; min-height: 24px; }
.ah-dato a:hover { color: var(--ah-navy); text-decoration: underline; }

/* OJO: el pie es contexto oscuro pero NO lleva `.ah-seccion--oscura`. Sin
   incluir `.ah-pie` aqui, las fichas de dato heredaban `--ah-tinta` (#0B1B33)
   sobre carbon y quedaban invisibles. Pasa igual con la etiqueta, que en gris
   suave da 3.87:1 sobre oscuro. */
.ah-seccion--oscura .ah-dato-icono,
.ah-pie .ah-dato-icono { background: var(--ah-ambar); color: var(--ah-carbon); }
.ah-seccion--oscura .ah-dato a, .ah-seccion--oscura .ah-dato span,
.ah-pie .ah-dato a, .ah-pie .ah-dato span { color: var(--ah-blanco); }
.ah-seccion--oscura .ah-dato b,
.ah-pie .ah-dato b { color: var(--ah-celeste); }

.ah-mapa {
  border: 0; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--ah-radio); display: block;
  filter: saturate(.85);
}

/* ==========================================================================
   9. Blog
   ========================================================================== */
.ah-posts { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }

.ah-post {
  display: flex; flex-direction: column;
  background: var(--ah-blanco);
  border: 1px solid var(--ah-linea);
  border-radius: var(--ah-radio);
  overflow: hidden;
  transition: transform .3s var(--ah-facil), box-shadow .3s var(--ah-facil);
}
.ah-post:hover { transform: translateY(-5px); box-shadow: var(--ah-sombra-3); }
.ah-post-foto {
  display: block; position: relative;
  aspect-ratio: 16 / 10; overflow: hidden; background: var(--ah-papel);
}
.ah-post-foto .ah-etiqueta {
  position: absolute; left: .9rem; bottom: .9rem; z-index: 2;
  background: var(--ah-ambar); color: var(--ah-carbon);
}
.ah-post-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ah-facil); }
.ah-post:hover .ah-post-foto img { transform: scale(1.05); }
.ah-post-cuerpo { padding: 1.4rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ah-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--ah-texto-suave); margin-bottom: .7rem;
}
.ah-post-cuerpo .ah-post-meta { white-space: nowrap; }
.ah-etiqueta {
  display: inline-block; padding: .22rem .65rem; border-radius: 999px;
  background: rgba(0, 62, 132, .09); color: var(--ah-navy);
  font-family: var(--ah-fuente-titulo); font-size: .72rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
.ah-post h3 { font-size: 1.14rem; margin-bottom: .55rem; }
.ah-post h3 a { color: inherit; text-decoration: none; }
.ah-post h3 a:hover { color: var(--ah-navy); }
.ah-post p { font-size: .95rem; margin-bottom: 1.1rem; }
.ah-post .ah-enlace-flecha { margin-top: auto; }

/* Articulo --------------------------------------------------------------- */
.ah-articulo { max-width: var(--ah-ancho-texto); margin-inline: auto; }

/* La medida del articulo va en REM y no en `ch`: `ch` es relativo a la fuente
   del PROPIO elemento, asi que un h2 al doble de tamano calcula una medida
   mayor que el contenedor y se sale a todo lo ancho, desalineado del texto. */
.ah-articulo > * { max-width: var(--ah-ancho-texto); }

.ah-articulo h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.4rem; }
.ah-articulo h3 { margin-top: 1.9rem; }
.ah-articulo p { font-size: 1.09rem; line-height: 1.78; }
.ah-articulo ul { display: grid; gap: .6rem; }
.ah-articulo li { font-size: 1.05rem; line-height: 1.7; }

.ah-articulo-nota {
  margin: 2.2rem 0 0;
  padding: 1.3rem 1.5rem;
  background: var(--ah-papel);
  border-left: 4px solid var(--ah-ambar);
  border-radius: 0 var(--ah-radio-chico) var(--ah-radio-chico) 0;
  font-size: 1.02rem; color: var(--ah-tinta); font-weight: 500;
}

.ah-articulo-cabezal { text-align: center; max-width: 48rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.ah-articulo-portada {
  border-radius: var(--ah-radio); overflow: hidden;
  aspect-ratio: 16 / 8; margin-bottom: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--ah-sombra-2);
}
.ah-articulo-portada img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   10. Migas, paginacion y cierre
   ========================================================================== */
.ah-migas { font-size: .84rem; color: var(--ah-texto-suave); margin-bottom: .9rem; }
.ah-migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; }
.ah-migas li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.ah-migas li + li::before { content: "/"; opacity: .45; }
.ah-migas a { color: inherit; text-decoration: none; }
.ah-migas a:hover { color: var(--ah-navy); text-decoration: underline; }

.ah-portada {
  position: relative;
  padding-top: calc(var(--ah-cab) + clamp(3rem, 7vw, 5.5rem));
  padding-bottom: clamp(2.6rem, 6vw, 4.5rem);
  background: var(--ah-navy-noche);
  color: var(--ah-claro-oscuro);
  overflow: hidden;
  isolation: isolate;
}
.ah-portada-foto { position: absolute; inset: 0; z-index: -2; }
.ah-portada-foto img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.ah-portada::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(0, 27, 66, .92) 0%, rgba(0, 27, 66, .6) 55%, rgba(0, 27, 66, .82) 100%);
}
.ah-portada h1 { color: var(--ah-blanco); margin-bottom: .6rem; }
.ah-portada .ah-migas { color: rgba(255, 255, 255, .72); }
.ah-portada .ah-migas a:hover { color: var(--ah-ambar); }
.ah-portada-texto { font-size: clamp(1.02rem, 1.7vw, 1.18rem); max-width: 42rem; color: #DCE6F2; }
.ah-portada-firma {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--ah-ambar) 0%, var(--ah-azul) 38%, var(--ah-navy) 72%, transparent 100%);
}

.ah-paginacion { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 2.6rem; }
.ah-paginacion .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 2.6rem; height: 2.6rem; padding-inline: .7rem;
  border: 1.5px solid var(--ah-linea); border-radius: var(--ah-radio-chico);
  font-family: var(--ah-fuente-titulo); font-weight: 700; font-size: .9rem;
  color: var(--ah-texto); text-decoration: none;
}
.ah-paginacion .page-numbers:hover { border-color: var(--ah-navy); color: var(--ah-navy); }
.ah-paginacion .page-numbers.current { background: var(--ah-navy); border-color: var(--ah-navy); color: var(--ah-blanco); }

/* Bloque de cierre ------------------------------------------------------- */
.ah-cierre {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--ah-navy);
  color: #DCE7F5;
  padding-block: clamp(3.4rem, 7vw, 6rem);
}
.ah-cierre::before {
  /* La silueta del tejado del logotipo, como marca de agua. */
  content: ""; position: absolute; right: -4%; bottom: -30%; z-index: -1;
  width: min(46rem, 68%); aspect-ratio: 1602 / 504;
  background: url("../img/marca-simbolo.png") right bottom / contain no-repeat;
  opacity: .07;
}
.ah-cierre h2 { color: var(--ah-blanco); max-width: 26rem; }
.ah-cierre p { color: #C9DAEE; max-width: 34rem; }
.ah-cierre-acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }

/* ==========================================================================
   11. Pie
   ========================================================================== */
.ah-pie { background: var(--ah-carbon); color: var(--ah-claro-oscuro); padding-block: clamp(3rem, 6vw, 4.6rem) 0; }
/* OJO CON ESTA REJILLA. La version anterior era
   `minmax(min(100%, 17rem), 1.35fr) repeat(auto-fit, minmax(min(100%, 10rem), 1fr))`
   y DESBORDABA en movil. El truco `min(100%, X)` evita que UNA pista supere
   al contenedor, pero no impide que la SUMA lo supere: a 390 px resolvia a
   «272px 160px» dentro de 353 px de caja, y la segunda columna se salia de
   la pantalla. Medido en el navegador, no deducido.
   La forma correcta es `minmax(0, 1fr)`, que no tiene suelo de contenido
   minimo, mas puntos de corte explicitos. */
.ah-pie-rejilla {
  display: grid; gap: 2.2rem;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  padding-bottom: 2.8rem;
}
@media (max-width: 900px) {
  .ah-pie-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ah-pie-rejilla { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}
.ah-pie-logo img { height: 3.2rem; width: auto; margin-bottom: 1.1rem; }
.ah-pie-resumen { font-size: .94rem; color: var(--ah-claro-oscuro); max-width: 24rem; }

.ah-pie h3 {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ah-ambar); margin-bottom: 1.1rem;
}
.ah-pie-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ah-pie-lista li { margin: 0; }
.ah-pie-lista a {
  color: var(--ah-claro-oscuro); text-decoration: none; font-size: .94rem;
  /* WCAG 2.2 pide 24x24 de area de toque. Los enlaces del pie median 18-20
     de alto: el padding vertical los lleva por encima sin mover el diseno. */
  display: inline-block; padding-block: .2rem; min-height: 24px;
}
.ah-pie-lista a:hover { color: var(--ah-blanco); text-decoration: underline; }

.ah-redes { display: flex; gap: .6rem; margin-top: 1.4rem; }
.ah-red {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .22);
  color: var(--ah-blanco);
  transition: background-color .2s, border-color .2s, transform .2s var(--ah-resorte);
}
.ah-red:hover { background: var(--ah-ambar); border-color: var(--ah-ambar); color: var(--ah-carbon); transform: translateY(-2px); }
.ah-red svg { width: 1.15rem; height: 1.15rem; }

.ah-pie-abajo {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .7rem 1.6rem;
  align-items: center; justify-content: space-between;
  font-size: .85rem; color: #93A7C0;
}
.ah-pie-abajo a { color: #93A7C0; }
.ah-pie-abajo a:hover { color: var(--ah-blanco); }

/* Barra fija de llamada en movil ----------------------------------------- */
.ah-barra-movil {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: none; gap: 1px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 -6px 24px rgba(0, 20, 50, .22);
}
.ah-barra-movil a {
  flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .95rem .6rem;
  font-family: var(--ah-fuente-titulo); font-size: .88rem; font-weight: 700;
  text-decoration: none;
}
.ah-barra-movil a:first-child { background: var(--ah-navy); color: var(--ah-blanco); }
.ah-barra-movil a:last-child { background: var(--ah-ambar); color: var(--ah-carbon); }
.ah-barra-movil svg { width: 1.05rem; height: 1.05rem; flex: none; }
@media (max-width: 767px) {
  .ah-barra-movil { display: flex; }
  body { padding-bottom: 3.4rem; }
  .ah-pie-abajo { padding-bottom: 1rem; }
}

/* ==========================================================================
   12. Revelado al hacer scroll
   ========================================================================== */
.ah-revela { opacity: 0; transform: translateY(22px); }
.ah-revela.is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ah-facil), transform .7s var(--ah-facil);
  transition-delay: var(--ah-retraso, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .ah-revela { opacity: 1; transform: none; }
  .ah-servicio:hover, .ah-post:hover, .ah-pilar:hover, .ah-gal-pieza:hover { transform: none; }
}
/* Si el JS no corre, nada puede quedarse invisible. */
.no-js .ah-revela { opacity: 1; transform: none; }

/* ==========================================================================
   13. Impresion
   ========================================================================== */
@media print {
  .ah-cabecera, .ah-panel, .ah-barra-movil, .ah-hero-controles, .ah-cierre { display: none !important; }
  .ah-hero { min-height: auto; }
  body { color: #000; }
}