/* =================================================================
   LAYOUT — el marco que se repite en las 7 rutas
   Header, navegación, hero, encabezado de página interior,
   footer y botón flotante.
   ================================================================= */

/* =================================================================
   HEADER
   -----------------------------------------------------------------
   CAMBIO RESPECTO DEL BOCETO (bug de la migración a rutas):
   antes el header era translúcido hasta scrollY > 40 y recién ahí
   se volvía sólido. Eso funcionaba porque la única página empezaba
   con el hero oscuro a pantalla completa. En una ruta interior, que
   arranca con fondo hormigón, el header quedaba ilegible.
   Ahora: SÓLIDO por defecto. La transparencia es una excepción que
   se pide con .over-hero, y sólo la usa el home.
   ================================================================= */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  background: var(--color-primary-dark);
  border-bottom: var(--border-hair) solid var(--line-inv-1);
  transition: background var(--transition), border-color var(--transition);
}

.site-header.over-hero {
  background: rgb(var(--rgb-carbon-dark) / .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line-inv-2);
}
.site-header.over-hero.is-solid {
  background: var(--color-primary-dark);
  border-bottom-color: var(--line-inv-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  min-height: var(--header-h);
  padding: 0.6rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* ---------- Marca ----------
   PENDIENTE (cliente): logo definitivo. .brand-mark es un placeholder
   TIPOGRÁFICO ("AP" en Chivo 900, no el triángulo de relleno del boceto) que
   ocupa una caja de tamaño fijo (--size-mark / --size-mark-lg). Para poner el
   logo real alcanza con reemplazar el contenido de .brand-mark por un <img>
   o un <svg> — la caja ya está reservada, así que el swap no toca layout.css
   ni desplaza nada alrededor. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-text-inverse);
}
.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--size-mark);
  height: var(--size-mark);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--weight-black);
  letter-spacing: var(--track-brand);
  color: var(--color-accent-light);
}
/* El día que .brand-mark tenga <img> o <svg> en vez de texto, esto ya
   los hace ocupar toda la caja sin agregar una regla nueva. */
.brand-mark img,
.brand-mark svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.brand-text em {
  font-style: normal;
  font-size: var(--text-marca-sub);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--ink-inv-3);
}

/* ---------- Navegación ---------- */
.site-nav { display: none; }

/* El menú mobile bloquea el scroll de fondo mientras está abierto (JS agrega
   .nav-open en <html>). scrollbar-gutter evita que la barra de scroll del
   navegador aparezca/desaparezca y corra el layout al abrir y cerrar. */
html { scrollbar-gutter: stable; }
html.nav-open { overflow: hidden; }

.nav-link {
  position: relative;
  padding: 0.4rem 0;
  font-size: var(--label-lg);
  font-weight: var(--weight-semi);
  color: var(--ink-inv-2);
  transition: color var(--transition);
}
.nav-link:hover { color: var(--color-text-inverse); }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--color-accent);
  transition: width var(--dur-slow) var(--ease-out);
}
.nav-link:hover::after { width: 100%; }

/* Página actual. Necesario al pasar a rutas: en una sola página con
   anclas no hacía falta. */
.nav-link[aria-current="page"] { color: var(--color-text-inverse); }
.nav-link[aria-current="page"]::after { width: 100%; }

.nav-cta {
  padding: 0.75rem 1.2rem;
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--label-md);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-brand);
  text-transform: uppercase;
  transition: background var(--transition);
}
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--color-accent-hover); color: var(--color-white); }
.nav-cta[aria-current="page"] { background: var(--color-accent-hover); }

/* ---------- Menú mobile ---------- */
.nav-toggle {
  width: var(--tap-sm);
  height: var(--tap-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: var(--border-hair) solid var(--line-inv-1);
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--color-text-inverse);
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-fast);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav.is-open {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: 0.5rem var(--gutter) 1.4rem;
  background: var(--color-primary-dark);
  border-bottom: var(--border-mark) solid var(--color-accent);
  box-shadow: var(--shadow-lg);
}
.site-nav.is-open .nav-link {
  padding: 0.9rem 0;
  border-bottom: var(--border-hair) solid var(--line-inv-2);
  font-size: var(--text-sm);
}
.site-nav.is-open .nav-cta {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  text-align: center;
  justify-content: center;
  border-bottom: 0;
}

/* =================================================================
   HERO — sólo el home
   ================================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  background: var(--color-primary-dark);
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; }
.hero-bg img,
.hero-bg .figure {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

/* MEJORA A — el boceto tenía brightness(1.12) sobre la foto: subía
   el brillo para que la stock quedara luminosa. Con una foto plana
   de celular eso quema las altas luces y se lleva puesto el
   contraste del título. Ahora la foto se BAJA (--img-grade) y el
   contraste del texto lo garantiza el velo, que no depende de la
   imagen que llegue. */
.hero-bg img { object-fit: cover; filter: var(--img-grade); }
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}

.hero-inner {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--header-h) + 3.5rem) var(--gutter) var(--space-2xl);
}
.hero-copy { max-width: 660px; }
.hero .eyebrow { color: var(--ink-inv-2); }
.hero h1 { color: var(--color-white); margin-bottom: 1.4rem; }
.hero-lead {
  max-width: var(--measure-lead);
  margin-bottom: 2.1rem;
  font-size: var(--text-lg);
  color: var(--ink-inv-2);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

.hero-scroll {
  position: absolute;
  left: 50%; bottom: var(--space-md);
  transform: translateX(-50%);
  z-index: var(--z-raised);
  width: 26px; height: 42px;
  display: grid;
  justify-items: center;
  padding-top: 7px;
  border: var(--border-medium) solid var(--ink-inv-4);
  border-radius: var(--radius-full);
}
.hero-scroll span {
  width: 3px; height: 8px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  animation: scrollHint 1.9s ease-in-out infinite;
}
@keyframes scrollHint {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(14px); }
}

/* ---------- Hero tipográfico — la variante que usa el home ----------
   DECISIÓN DE CONTENIDO, no de estilo: el home no abre con foto. No hay
   material fotográfico propio todavía y una imagen de stock diría lo
   contrario de lo que vende AP (obra propia, en una sola ciudad). El
   trabajo lo hace la tipografía: Chivo 900 en mayúsculas apretadas sobre
   carbón, con la trama de plano (.blueprint-bg) como única textura.

   Además baja de 100svh a alto natural. Es deliberado: la bifurcación
   —las dos líneas de negocio— tiene que asomar sin scrollear, porque el
   visitante tiene que reconocer cuál de las dos es la suya de entrada.
   Un hero de pantalla completa lo obligaría a un scroll a ciegas. */
.hero.hero-tipo {
  min-height: auto;
  border-bottom: var(--border-mark) solid var(--color-accent);
}
.hero.hero-tipo .hero-inner { padding-bottom: var(--space-2xl); }
.hero.hero-tipo h1 { margin-bottom: var(--space-md); }

/* ---------- Bajada de datos del hero ----------
   "16 proyectos · +140 unidades · Una ciudad, una trayectoria".
   Los números en Chivo 900 y tabulares: se leen como cifras que se
   comparan, no como texto. El punto medio es el único adorno y va en
   ladrillo, que es cómo se marca en este sistema. */
.hero-datos {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-sm);
}
.hero-datos li {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-size: var(--text-lg);
  color: var(--ink-inv-2);
}
.hero-datos li:not(:last-child)::after {
  content: '·';
  margin-left: var(--space-2xs);
  color: var(--color-accent);
  font-weight: var(--weight-bold);
}
.hero-datos strong {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-snug);
  font-variant-numeric: tabular-nums;
  color: var(--color-white);
}

/* =================================================================
   ENCABEZADO DE PÁGINA INTERIOR
   -----------------------------------------------------------------
   NUEVO. Las 6 rutas que no son el home no pueden abrir con un hero
   de 100svh: obliga a un scroll entero antes de ver contenido y
   exige una foto grande por página que no tenemos.
   Misma familia visual (banda oscura, eyebrow, título en Chivo),
   un tercio de la altura y sin depender de una imagen.
   ================================================================= */

.page-head {
  position: relative;
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl);
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  border-bottom: var(--border-mark) solid var(--color-accent);
  overflow: hidden;
}
.page-head h1 {
  color: var(--color-white);
  font-size: var(--text-2xl);
  margin-bottom: 0.8rem;
}
.page-head .lead {
  color: var(--ink-inv-2);
  max-width: 56ch;
}
.page-head .eyebrow { color: var(--color-accent-light); }

/* Variante con foto: mismo bloque, con imagen de fondo y velo.
   Si no hay foto, no se nota que falta. */
.page-head.has-media .page-head-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-head.has-media .page-head-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--object-position);
  filter: var(--img-grade);
}
.page-head.has-media .page-head-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-hero);
}
.page-head .wrap { position: relative; z-index: var(--z-base); }

/* Miga de pan — necesaria recién ahora que hay jerarquía de rutas */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-sm);
  font-size: var(--label-sm);
  font-weight: var(--weight-semi);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-inv-3);
}
.breadcrumb a { transition: color var(--transition); }
.breadcrumb a:hover { color: var(--color-accent-light); }
.breadcrumb li + li::before { content: '/'; margin-right: 0.5rem; }
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb [aria-current="page"] { color: var(--ink-inv-2); }

/* =================================================================
   FOOTER
   ================================================================= */

.site-footer {
  background: var(--color-primary-dark);
  color: var(--color-text-inverse);
  padding-top: var(--space-xl);
}
.footer-grid {
  display: grid;
  gap: 2.2rem;
  padding-bottom: var(--space-lg);
}
.footer-brand .brand {
  margin-bottom: 1rem;
  color: var(--color-text-inverse);
}
.footer-brand .brand-mark {
  width: var(--size-mark-lg);
  height: var(--size-mark-lg);
  font-size: 1.1rem;
}
/* En el footer la bajada tiene más protagonismo que en el header:
   se despega del gris y toma el color de acento. */
.footer-brand .brand-text em { color: var(--color-accent-light); }
.footer-desc {
  max-width: 34ch;
  margin-bottom: 1.2rem;
  font-size: var(--text-sm);
  color: var(--ink-inv-3);
}

.footer-social { display: flex; gap: var(--space-xs); }
.footer-social a {
  display: grid;
  place-items: center;
  width: var(--size-badge);
  height: var(--size-badge);
  border: var(--border-hair) solid var(--line-inv-1);
  color: var(--ink-inv-3);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.footer-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.footer-col { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col h2 {
  margin-bottom: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--label-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--color-accent-light);
}
.footer-col a, .footer-col span {
  font-size: var(--text-sm);
  color: var(--ink-inv-3);
  transition: color var(--transition), padding-left var(--transition);
}
.footer-col a:hover { color: var(--color-text-inverse); padding-left: 5px; }

.footer-bottom {
  border-top: var(--border-hair) solid var(--line-inv-1);
  padding: 1.2rem 0;
}
.footer-bottom .wrap { display: grid; gap: 0.4rem; }
.footer-bottom p { font-size: var(--label-md); color: var(--ink-inv-3); max-width: none; }

/* =================================================================
   WHATSAPP FLOTANTE
   Vuelve al HTML cuando exista el número institucional.
   ================================================================= */

.whatsapp-float {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: var(--z-float);
  width: 56px; height: 56px;
  display: grid;
  place-items: center;
  background: var(--color-wa);
  color: var(--color-white);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
  animation: waPulse 2.6s ease-in-out infinite;
}
.whatsapp-float svg { width: var(--size-ico-lg); height: var(--size-ico-lg); }
.whatsapp-float:hover { background: var(--color-wa-hover); transform: scale(1.08); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgb(var(--rgb-wa) / .4); }
  50%      { box-shadow: 0 4px 32px rgb(var(--rgb-wa) / .7), 0 0 0 8px rgb(var(--rgb-wa) / .1); }
}

/* =================================================================
   BREAKPOINTS
   ================================================================= */

@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
  .footer-bottom .wrap { grid-template-columns: 1fr auto; align-items: center; }
  .whatsapp-float { bottom: 28px; right: 28px; width: 60px; height: 60px; }
  .page-head { padding-top: calc(var(--header-h) + var(--space-2xl)); }
}

@media (min-width: 1100px) {
  .site-nav { display: flex; align-items: center; gap: 1.6rem; }
  .nav-toggle { display: none; }
  .hero-inner {
    padding-top: calc(var(--header-h) + 5rem);
    padding-bottom: 8rem;
  }
  /* El hero tipográfico no tiene foto que llenar: no necesita el fondo
     extra de 8rem que sí pide el hero con imagen. */
  .hero.hero-tipo .hero-inner { padding-bottom: var(--space-2xl); }
  .hero-copy { max-width: 720px; }
}