/* ============================================================
   FRACTUM ESTUDIO — Sistema de diseño v7 "Bitácora monumental"
   La bitácora técnica de v6 llevada a escala editorial: rotulación
   de plano a tamaño cartel, números de lámina fantasma, retícula
   de columnas visible, tinta azul-negra profunda y cian eléctrico.
   El movimiento cuenta el proceso de obra: las líneas se trazan,
   las imágenes se destapan, los números suben. Nada decorativo
   se mueve si el usuario pide reduced-motion.
   ============================================================ */

/* ---------- Variables globales ---------- */
:root {
  /* Tinta — azules de marca llevados a profundidad de obra negra */
  --tinta-00:         #0E2536;
  --tinta-10:         #0E2536;
  --tinta-20:         #0E2536;
  --azul-corp:        #124A61;
  --azul-tecnico:     #1E6787;

  /* Trazo y acento */
  --trazo:            #127EB5;
  --trazo-fuerte:     #0E5F87;
  --cian:             #5EC6E8;
  --trazo-suave:      rgba(18, 126, 181, 0.10);

  /* Papel — grises fríos heredados de v6 (decisión del cliente) */
  --blanco:           #FFFFFF;
  --papel:            #EDEFF1;
  --papel-oscuro:     #E1E4E7;
  --linea:            #DBDEE1;
  --linea-oscura:     #AEB5BB;
  --linea-tinta:      rgba(255, 255, 255, 0.14);

  /* Texto */
  --texto-oscuro:     #16212B;
  --texto-suave:      #4E5A64;
  --texto-invertido:  rgba(255, 255, 255, 0.72);

  /* Tipografía */
  --fuente-titulos:   'Barlow Semi Condensed', sans-serif;
  --fuente-cuerpo:    'IBM Plex Sans', sans-serif;
  --fuente-mono:      'IBM Plex Mono', monospace;

  /* Escala display: rotulación de plano a escala 1:1 */
  --display-xl:       clamp(2.4rem, 5vw, 3.6rem);
  --display-lg:       clamp(2.4rem, 4vw, 3.6rem);
  --display-md:       clamp(1.8rem, 4vw, 3.2rem);

  /* Geometría: esquinas a hueso, como plano impreso */
  --radio:            0px;

  /* Movimiento */
  --ease-expo:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transicion:       0.3s var(--ease-suave);
  --transicion-larga: 0.7s var(--ease-expo);

  --sombra-suave:     0 2px 14px rgba(4, 8, 13, 0.08);
  --sombra-media:     0 14px 44px rgba(4, 8, 13, 0.16);
  --espacio-seccion:  clamp(88px, 13vw, 170px);
}

/* ---------- Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--texto-oscuro);
  background: var(--blanco);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: var(--trazo); color: var(--blanco); }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--tinta-10);
}
h1, h2 { text-wrap: balance; }
p { margin: 0 0 1.2em; color: var(--texto-suave); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

section[id], header[id] { scroll-margin-top: 88px; }

:focus-visible {
  outline: 3px solid var(--trazo);
  outline-offset: 3px;
}

.enlace-saltar {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 300;
  background: var(--tinta-10);
  color: var(--blanco);
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  padding: 12px 18px;
  transition: top var(--transicion);
}
.enlace-saltar:focus { top: 16px; }

.contenedor {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ---------- Utilidades tipográficas ---------- */
.eyebrow {
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--trazo);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

h2 { font-size: var(--display-md); }

/* Título display: mayúsculas condensadas, como rótulo de lámina */
.titulo-display {
  font-size: var(--display-lg);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.58;
}
/* Palabra delineada: tinta hueca, el trazo del plano sin rellenar.
   El color del trazo se define por contexto (no con currentColor: el
   relleno transparente lo volvería invisible). */
.palabra-contorno {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--tinta-10);
}
.titulo-display .palabra-contorno{
    display:block;
    margin-top:0.2em; /* ajusta este valor */
}
.seccion-oscura .palabra-contorno,
.pagina-404 .palabra-contorno,
.site-footer .palabra-contorno,
.cta-final .palabra-contorno,
.hero .palabra-contorno,
.page-header .palabra-contorno {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.85);
}
@supports not (-webkit-text-stroke: 1px black) {
  .palabra-contorno { color: inherit; }
}

/* Encabezado de sección v7: número de lámina fantasma detrás del título */
.encabezado-seccion {
  position: relative;
  margin: 0 0 clamp(48px, 6vw, 80px);
  padding-top: 30px;
}
.encabezado-seccion[data-sheet]::before {
  content: attr(data-sheet);
  position: absolute;
  top: 0; left: 2px;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--texto-suave);
  opacity: 0.75;
}
/* Número fantasma: cifra enorme delineada que asoma tras el título */
.encabezado-seccion[data-num]::after {
  content: attr(data-num);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--linea-oscura);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.seccion-oscura .encabezado-seccion[data-num]::after { -webkit-text-stroke-color: var(--linea-tinta); opacity: 0.9; }
.seccion-oscura .encabezado-seccion[data-sheet]::before { color: rgba(255,255,255,0.5); }
.encabezado-seccion > * { position: relative; z-index: 1; }

.seccion-intro { font-size: 1.1rem; max-width: 560px; }

/* ---------- Animaciones de entrada ---------- */
/* data-anim nace oculto solo si hay JS (clase .js en <html>).
   script-v7.js aplica en-vista con IntersectionObserver o Motion. */
[data-anim] {
  --anim-y: 32px;
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}
.js [data-anim] {
  opacity: 0;
  transform: translateY(var(--anim-y));
}
.js [data-anim="fade"] { --anim-y: 0px; transform: scale(0.985); }
.js [data-anim="izq"]  { transform: translateX(-40px); }
.js [data-anim="der"]  { transform: translateX(40px); }
[data-anim].en-vista { opacity: 1; transform: none; }

/* Revelado por línea: cada .linea-mascara recorta su contenido y el
   inner sube desde abajo, como texto impreso saliendo del plotter. */
.linea-mascara { display: block; overflow: hidden; }
.linea-mascara > .linea-inner {
  display: block;
  transition: transform 0.9s var(--ease-expo);
}
.js .linea-mascara > .linea-inner { transform: translateY(110%); }
.en-vista .linea-mascara > .linea-inner,
.linea-mascara.en-vista > .linea-inner { transform: translateY(0); }

/* Imagen que se destapa: cortina de tinta que se retira */
.img-revelado { position: relative; overflow: hidden; }
.img-revelado::after {
  content: '';
  position: absolute;
  inset: 1s;
  background: var(--tinta-20);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 1s var(--ease-expo);
  z-index: 2;
  pointer-events: none;
}
.img-revelado.en-vista::after { transform: scaleY(0); }
.js .img-revelado img { transform: scale(1.12); transition: transform 1.2s var(--ease-expo); }
.img-revelado.en-vista img { transform: scale(1); }

/* Trazo de Koch que se dibuja al entrar en vista */
.trazo-fractal { display: block; overflow: visible; }
.trazo-fractal path {
  fill: none;
  stroke: var(--trazo);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.js .trazo-dibujable path {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.trazo-dibujable.en-vista path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  [data-anim], .js [data-anim] { opacity: 1; transform: none; transition: none; }
  .js .linea-mascara > .linea-inner { transform: none; transition: none; }
  .img-revelado::after { display: none; }
  .js .img-revelado img { transform: none; transition: none; }
  .js .trazo-dibujable path { stroke-dashoffset: 0; transition: none; }
  html { scroll-behavior: auto; }
  .hero-video-fondo { display: none; }
}

/* ---------- Botones dinámicos ---------- */
/* Estructura: <a class="btn"><span class="btn-texto"><span>Texto</span></span><span class="btn-icono">…</span></a>
   El relleno sube desde la base (::before) y el rótulo rueda hacia
   arriba mostrando su duplicado (attr(data-texto) en ::after). El
   imán del cursor lo aplica script-v7.js solo con puntero fino. */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 18px 34px;
  border: 1px solid var(--tinta-10);
  color: var(--tinta-10);
  background: transparent;
  cursor: pointer;
  transition: color 0.35s var(--ease-expo), border-color 0.35s var(--ease-expo),
              transform 0.2s var(--ease-suave);
  will-change: transform;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tinta-10);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease-expo);
  z-index: -1;
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { color: var(--blanco); }
.btn:active { transform: scale(0.97); }

.btn-texto { position: relative; display: block; overflow: hidden; }
.btn-texto > span {
  display: block;
  transition: transform 0.45s var(--ease-expo);
}
.btn-texto::after {
  content: attr(data-texto);
  position: absolute;
  left: 0; top: 100%;
  transition: transform 0.45s var(--ease-expo);
}
.btn:hover .btn-texto > span,
.btn:focus-visible .btn-texto > span { transform: translateY(-100%); }
.btn:hover .btn-texto::after,
.btn:focus-visible .btn-texto::after { transform: translateY(-100%); }

.btn-icono {
  display: inline-flex;
  transition: transform 0.45s var(--ease-expo);
}
.btn:hover .btn-icono { transform: translateX(5px); }

/* Variante sólida: tinta desde el inicio, se enciende a trazo */
.btn-solido {
  background: var(--tinta-10);
  color: var(--blanco);
  border-color: var(--tinta-10);
}
.btn-solido::before { background: var(--trazo); }
.btn-solido:hover, .btn-solido:focus-visible { border-color: var(--trazo); color: var(--blanco); }

/* Variante para fondos oscuros */
.btn-claro { border-color: rgba(255,255,255,0.4); color: var(--blanco); }
.btn-claro::before { background: var(--blanco); }
.btn-claro:hover, .btn-claro:focus-visible { color: var(--tinta-10); border-color: var(--blanco); }
.btn-claro-solido { background: var(--cian); border-color: var(--cian); color: var(--tinta-10); }
.btn-claro-solido::before { background: var(--blanco); }
.btn-claro-solido:hover, .btn-claro-solido:focus-visible { color: var(--tinta-10); border-color: var(--blanco); }

.btn-ancho { width: 100%; justify-content: center; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn-texto > span, .btn-texto::after, .btn-icono { transition: none; }
  .btn:hover .btn-texto > span { transform: none; }
  .btn:hover .btn-texto::after { transform: translateY(-100%); visibility: hidden; }
  .btn:hover { background: var(--tinta-10); }
  .btn-solido:hover { background: var(--trazo); }
  .btn-claro:hover { background: var(--blanco); }
  .btn::before { display: none; }
}

/* Enlace flecha: mono en mayúsculas con subrayado que se traza */
.enlace-flecha {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-10);
  padding-bottom: 6px;
  cursor: pointer;
}
.enlace-flecha::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.32);
  transform-origin: left;
  transition: transform 0.5s var(--ease-expo);
}
.enlace-flecha:hover::after { transform: scaleX(1); }
.enlace-flecha i, .enlace-flecha .flecha { transition: transform 0.45s var(--ease-expo); }
.enlace-flecha:hover i, .enlace-flecha:hover .flecha { transform: translateX(6px); }
.enlace-flecha--claro { color: var(--blanco); }
.enlace-flecha--acento { color: var(--trazo); }


   HEADER — barra técnica; se oculta al bajar y reaparece al subir
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--linea);
  transition: transform 0.5s var(--ease-expo), box-shadow var(--transicion),
              background var(--transicion);
}
.site-header.oculto { transform: translateY(-100%); }
.site-header.scrolled { box-shadow: var(--sombra-suave); background: rgba(255, 255, 255, 0.95); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  transition: height var(--transicion);
}
.site-header.scrolled .header-inner { height: 62px; }
.logo-img { height: 46px; width: auto; transition: height var(--transicion); }
.site-header.scrolled .logo-img { height: 36px; }

.nav-principal {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-principal a {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-oscuro);
  position: relative;
  padding: 4px 0;
  transition: color var(--transicion);
}
.nav-principal a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--trazo);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-expo);
}
.nav-principal a:not(.nav-cta):hover::after,
.nav-principal a.activo::after { transform: scaleX(1); transform-origin: left; }
.nav-principal a.activo { color: var(--trazo); }

.nav-cta {
  border: 1px solid var(--tinta-10);
  color: var(--tinta-10) !important;
  padding: 10px 20px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tinta-10);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--ease-expo);
  z-index: -1;
}
.nav-cta:hover::before { transform: scaleY(1); }
.nav-cta:hover { color: var(--blanco) !important; }

.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px; height: 44px;
}
.menu-toggle span {
  display: block; height: 2px; width: 26px;
  background: var(--tinta-10);
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-toggle.activo span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.activo span:nth-child(2) { opacity: 0; }
.menu-toggle.activo span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO v7 — pantalla completa, titular monumental por líneas
   ============================================================ */
.hero {
  position: relative;
  background: var(--tinta-10);
  overflow: hidden;
  clip-path: inset(0);
  min-height: 82vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 180px 0 0;
}
.hero-fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video-fondo {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(4, 8, 13, 0.96) 0%, rgba(4, 8, 13, 0.55) 45%, rgba(4, 8, 13, 0.72) 100%);
  pointer-events: none;
}
/* Retícula de columnas: líneas verticales tenues sobre el hero,
   la hoja de plano detrás del rótulo */
.hero-reticula {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px calc(100% / 6));
}
.hero-coordenadas,
.hero-sello {
  position: absolute;
  z-index: 3;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
}
.hero-coordenadas { left: clamp(20px, 4vw, 48px); top: 34px; }
.hero-sello { right: clamp(20px, 4vw, 48px); top: 34px; text-align: right; }
@media (max-width: 760px) { .hero-coordenadas, .hero-sello { display: none; } }

.hero-inner{
    position:relative;
    z-index:2;
    width:100%;
    top:0;
    left:0;
}
.hero .eyebrow { color: var(--cian); }

.hero-titulo {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: var(--display-xl);
  line-height: 0.94;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--blanco);
  margin: 0 0 30px;
  max-width: 20ch;
}
.hero-titulo .palabra-contorno { -webkit-text-stroke-color: var(--cian); }

.hero-bajada{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:28px;
    margin-bottom:clamp(40px,6vw,72px);
}
.hero-parrafo {
  color: rgba(255,255,255,0.88);
  font-size: 1.06rem;
  max-width: 460px;
  margin: 0;
}
.hero-botones{
    display:flex;
    align-items:center;
    gap:22px;
    flex-wrap:wrap;
    margin:0;
}

/* Cinta inferior del hero: métricas + indicador de scroll, separadas
   por la misma línea de la retícula */
.hero-cinta {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--linea-tinta);
  background: rgba(4, 8, 13, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-cinta-inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
}
.hero-metricas {
  display: flex;
  flex: 1;
}
.hero-metricas div {
  flex: 1;
  padding: 22px clamp(16px, 2.5vw, 36px);
  border-left: 1px solid var(--linea-tinta);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-metricas div:first-child { border-left: none; padding-left: 0; }
.hero-metricas strong {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  color: var(--blanco);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero-metricas span {
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.hero-scroll {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0 22px clamp(16px, 2.5vw, 36px);
  border-left: 1px solid var(--linea-tinta);
  font-family: var(--fuente-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}
.hero-scroll-linea {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}
.hero-scroll-linea::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--cian);
  animation: gotaScroll 2s var(--ease-expo) infinite;
}
@keyframes gotaScroll {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-linea::after { animation: none; top: 0; }
}
@media (max-width: 760px) {
  .hero-scroll { display: none; }
  .hero-metricas { flex-direction: column; }
  .hero-metricas div { border-left: none; border-top: 1px solid var(--linea-tinta); padding: 14px 0; }
  .hero-metricas div:first-child { border-top: none; }
}

/* ============================================================
   BANDA MARQUEE — rotulación gigante en desfile continuo
   ============================================================ */
.banda-marquee {
  overflow: hidden;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  background: var(--blanco);
  padding: clamp(18px, 2.5vw, 30px) 0;
  user-select: none;
}
.banda-marquee--tinta {
  background: var(--tinta-10);
  border-color: var(--linea-tinta);
}
.banda-marquee-pista {
  display: flex;
  width: max-content;
  gap: 0;
  animation: desfileBanda 30s linear infinite;
}
.banda-marquee-grupo {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 56px);
  padding-right: clamp(28px, 4vw, 56px);
  flex-shrink: 0;
}
.banda-marquee-grupo span {
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--tinta-10);
  white-space: nowrap;
}
.banda-marquee-grupo span.palabra-contorno {
  color: transparent;
  -webkit-text-stroke: 1px var(--linea-oscura);
}
.banda-marquee--tinta .banda-marquee-grupo span { color: var(--blanco); }
.banda-marquee--tinta .banda-marquee-grupo span.palabra-contorno {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.45);
}
.banda-marquee-grupo .marquee-triangulo {
  width: 0; height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 20px solid var(--trazo);
  flex-shrink: 0;
}
@keyframes desfileBanda {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .banda-marquee-pista { animation: none; }
}

/* ============================================================
   SECCIONES GENERALES
   ============================================================ */
.seccion { padding: var(--espacio-seccion) 0; position: relative; }
.seccion-papel { background: var(--papel); }
.seccion-oscura {
  background: var(--tinta-10);
  color: var(--blanco);
  position: relative;
}
/* Retícula de columnas en secciones oscuras: la hoja de plano */
.seccion-oscura::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px calc(100% / 6));
  pointer-events: none;
}
.seccion-oscura .contenedor { position: relative; }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--blanco); }
.seccion-oscura .eyebrow { color: var(--cian); }
.seccion-oscura p { color: var(--texto-invertido); }

.grid-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.grid-dos.invertido { grid-template-columns: 0.92fr 1.08fr; }

/* ---------- Nosotros: texto + tarjetas M/V ---------- */
.tarjetas-mv { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--linea); }
.tarjeta-mv {
  position: relative;
  padding: 30px 0 26px 34px;
  border-bottom: 1px solid var(--linea);
  transition: padding-left 0.5s var(--ease-expo);
}
.tarjeta-mv::before {
  content: '';
  position: absolute;
  left: 0; top: 30px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 13px solid var(--trazo);
  transition: transform 0.5s var(--ease-expo);
}
.tarjeta-mv:hover { padding-left: 42px; }
.tarjeta-mv:hover::before { transform: rotate(180deg); }
.tarjeta-mv h3 {
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.4em;
}
.tarjeta-mv p { margin: 0; font-size: 0.98rem; }

/* ============================================================
   MARCA — interludio de marca entre Nosotros y Filosofía: el
   logotipo flota con un resplandor que respira, como una lámina
   retroiluminada en la mesa de dibujo.
   ============================================================ */
.seccion-marca {
  padding: clamp(50px, 7vw, 90px) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.marca-animada {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
.marca-animada-glow {
  position: absolute;
  width: min(60vw, 460px);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(94, 198, 232, 0.4) 0%, rgba(94, 198, 232, 0) 70%);
  filter: blur(6px);
  z-index: -1;
  animation: respiroMarca 4.5s ease-in-out infinite;
}
.marca-animada-logo {
  width: clamp(200px, 26vw, 380px);
  height: auto;
  animation: flotarMarca 5.5s ease-in-out infinite;
}
@keyframes flotarMarca {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}
@keyframes respiroMarca {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .marca-animada-glow, .marca-animada-logo { animation: none; }
}

/* ---------- Filosofía ---------- */
.filosofia-grafico { position: relative; }
.filosofia-img { width: 100%; }
.filosofia-folio {
  position: absolute;
  left: 18px; bottom: 18px;
  z-index: 3;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blanco);
  background: rgba(4, 8, 13, 0.72);
  padding: 7px 12px;
  backdrop-filter: blur(4px);
}
.motivo-koch { width: 190px; height: 28px; margin: 6px 0 26px; }

/* ============================================================
   VALORES — placas sobre tinta con cifra fantasma
   ============================================================ */
.grid-valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: valor;
  border-left: 1px solid var(--linea-tinta);
}
.tarjeta-valor {
  position: relative;
  counter-increment: valor;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 34px);
  border-right: 1px solid var(--linea-tinta);
  border-top: 1px solid var(--linea-tinta);
  border-bottom: 1px solid var(--linea-tinta);
  overflow: hidden;
  isolation: isolate;
  transition: background 0.5s var(--ease-expo);
}
/* Cifra fantasma que sube al hacer hover */
.tarjeta-valor::before {
  content: counter(valor, decimal-leading-zero);
  position: absolute;
  right: 10px;
  bottom: -22px;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: 6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.16);
  z-index: -1;
  transition: transform 0.6s var(--ease-expo), -webkit-text-stroke-color 0.6s var(--ease-expo);
  pointer-events: none;
}
.tarjeta-valor:hover { background: rgba(255,255,255,0.04); }
.tarjeta-valor:hover::before {
  transform: translateY(-14px);
  -webkit-text-stroke-color: rgba(94, 198, 232, 0.5);
}
.tarjeta-valor h3 {
  color: var(--blanco);
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 14px 0 10px;
}
.tarjeta-valor p { font-size: 0.94rem; margin: 0; }
.icono-img {
  width: 46px; height: 46px; object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: transform 0.5s var(--ease-expo);
}
.tarjeta-valor:hover .icono-img { transform: translateY(-4px); }

/* ============================================================
   ÍNDICE DE SERVICIOS (home) — filas monumentales con vista previa
   ============================================================ */
.lista-disciplinas {
  counter-reset: disciplina;
  border-top: 1px solid var(--linea);
}
.fila-servicio {
  position: relative;
  counter-increment: disciplina;
  display: grid;
  grid-template-columns: minmax(52px, 90px) 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding: clamp(26px, 3.6vw, 44px) clamp(8px, 1.5vw, 20px);
  border-bottom: 1px solid var(--linea);
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
}
/* Cortina de tinta que sube al pasar el cursor */
.fila-servicio::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tinta-10);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-expo);
  z-index: -1;
}
.fila-servicio:hover::before,
.fila-servicio:focus-visible::before { transform: scaleY(1); }

.fila-servicio-num {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--trazo);
  transition: color 0.4s var(--ease-expo);
}
.fila-servicio-num::before { content: counter(disciplina, decimal-leading-zero) ' /'; }
.fila-servicio h3 {
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 6px;
  transition: color 0.4s var(--ease-expo), transform 0.5s var(--ease-expo);
}
.fila-servicio p {
  margin: 0;
  font-size: 0.96rem;
  max-width: 620px;
  transition: color 0.4s var(--ease-expo);
}
.fila-servicio-flecha {
  width: 52px; height: 52px;
  border: 1px solid var(--linea-oscura);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--tinta-10);
  transition: background 0.4s var(--ease-expo), color 0.4s var(--ease-expo),
              border-color 0.4s var(--ease-expo), transform 0.5s var(--ease-expo);
}
.fila-servicio:hover h3 { color: var(--blanco); transform: translateX(10px); }
.fila-servicio:hover p { color: rgba(255,255,255,0.65); }
.fila-servicio:hover .fila-servicio-num { color: var(--cian); }
.fila-servicio:hover .fila-servicio-flecha {
  background: var(--cian);
  border-color: var(--cian);
  color: var(--tinta-10);
  transform: rotate(-45deg);
}

/* Vista previa flotante: fotografía que sigue al cursor sobre el
   índice (la crea script-v7.js; solo existe con puntero fino) */
.vista-previa {
  position: fixed;
  z-index: 90;
  width: 300px;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 0.35s var(--ease-expo), transform 0.35s var(--ease-expo);
  box-shadow: var(--sombra-media);
}
.vista-previa.visible { opacity: 1; transform: scale(1); }
.vista-previa img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Servicios complementarios: tres placas técnicas */
.grid-complementarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: clamp(48px, 6vw, 72px);
  border: 1px solid var(--linea);
}
.placa-complementaria {
  position: relative;
  padding: clamp(24px, 3vw, 38px);
  border-right: 1px solid var(--linea);
  overflow: hidden;
  isolation: isolate;
}
.placa-complementaria:last-child { border-right: none; }
.placa-complementaria::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--trazo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-expo);
}
.placa-complementaria:hover::before { transform: scaleX(1); }
.placa-complementaria .servicio-icono {
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--trazo);
  border: 1px solid var(--linea-oscura);
  margin-bottom: 18px;
  transition: background 0.4s var(--ease-expo), color 0.4s var(--ease-expo),
              border-color 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
}
.placa-complementaria:hover .servicio-icono {
  background: var(--tinta-10);
  border-color: var(--tinta-10);
  color: var(--cian);
  transform: translateY(-4px);
}
.placa-complementaria h4 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4em;
}
.placa-complementaria p { font-size: 0.93rem; margin: 0; }

.ver-todos-servicios { text-align: center; margin-top: clamp(40px, 5vw, 60px); }

/* ============================================================
   CLIENTES — marquee de logotipos
   ============================================================ */
.seccion-clientes { padding-bottom: calc(var(--espacio-seccion) * 0.72); }
.marquee-clientes {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 44px;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-clientes-pista {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  padding: 0 clamp(24px, 3.5vw, 55px);
  animation: desfileClientes 36s linear infinite;
}
.marquee-clientes:hover .marquee-clientes-pista { animation-play-state: paused; }
@keyframes desfileClientes {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-clientes-pista { animation: none; }
  .marquee-clientes { overflow-x: auto; }
}
.logo-cliente {
  flex: 0 0 auto;
  width: clamp(120px, 12vw, 180px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fondo propio + isolation: la pista se anima con transform, lo que
     aísla el mix-blend-mode del img en su propio contexto; sin este
     fondo opaco pintado antes, el multiply no tendría contra qué
     fundir el recuadro blanco del PNG y se vería un bloque gris. */
  background: var(--papel);
  isolation: isolate;
}
.logo-cliente img {
  max-width: 100%;
  max-height: 74px;
  object-fit: contain;
  opacity: 0.55;
  filter: grayscale(1) contrast(1.05);
  /* Los PNG traen su recuadro blanco de fondo horneado; multiply lo
     funde con el papel de la sección en vez de recortar el archivo. */
  mix-blend-mode: multiply;
  transition: opacity 0.5s var(--ease-expo), filter 0.5s var(--ease-expo),
              transform 0.5s var(--ease-expo);
}
.logo-cliente:hover img { opacity: 1; filter: grayscale(0); transform: scale(1.06); }

/* ============================================================
   FAQ — pliegos numerados
   ============================================================ */
.lista-faq {
  border-top: 1px solid var(--linea-tinta);
  max-width: 860px;
  counter-reset: faq;
}
.seccion:not(.seccion-oscura) .lista-faq { border-color: var(--linea); }
.item-faq {
  border-bottom: 1px solid var(--linea-tinta);
  counter-increment: faq;
  transition: background var(--transicion);
}
.seccion:not(.seccion-oscura) .item-faq { border-color: var(--linea); }
.item-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 4px;
  display: flex;
  align-items: baseline;
  gap: 22px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--blanco);
  transition: color var(--transicion);
}
.seccion:not(.seccion-oscura) .item-faq summary { color: var(--tinta-10); }
.item-faq summary:hover { color: var(--cian); }
.seccion:not(.seccion-oscura) .item-faq summary:hover { color: var(--trazo); }
.item-faq summary::before {
  content: counter(faq, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--fuente-mono);
  font-size: 0.76rem;
  color: var(--trazo);
  letter-spacing: 0.04em;
}
.seccion-oscura .item-faq summary::before { color: var(--cian); }
.item-faq summary::-webkit-details-marker { display: none; }
.item-faq summary .marcador-faq {
  margin-left: auto;
  align-self: center;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--linea-tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-mono);
  font-size: 1.05rem;
  color: var(--cian);
  transition: border-color var(--transicion), background var(--transicion),
              transform 0.5s var(--ease-expo);
}
.seccion:not(.seccion-oscura) .item-faq summary .marcador-faq {
  border-color: var(--linea-oscura);
  color: var(--trazo);
}
.item-faq summary .marcador-faq::after { content: '+'; }
.item-faq summary:hover .marcador-faq { border-color: var(--cian); }
.item-faq[open] summary .marcador-faq {
  border-color: var(--cian);
  background: rgba(94, 198, 232, 0.12);
  transform: rotate(135deg);
}
.item-faq p {
  margin: 0 4px 26px 46px;
  max-width: 680px;
  font-size: 1rem;
}

/* ============================================================
   CONTACTO
   ============================================================ */
.lista-contacto { margin-top: 30px; display: flex; flex-direction: column; }
.lista-contacto li {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
.lista-contacto li:first-child { border-top: 1px solid var(--linea); }
.etiqueta-contacto {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.etiqueta-contacto i { color: var(--trazo); width: 18px; }
.lista-contacto a {
  color: var(--texto-oscuro);
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 1.08rem;
  position: relative;
}
.lista-contacto a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--trazo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-expo);
}
.lista-contacto a:hover::after { transform: scaleX(1); }

.formulario-contacto {
  background: var(--blanco);
  padding: clamp(26px, 3.5vw, 44px);
  border: 1px solid var(--linea);
  position: relative;
}
/* Esquinas de registro en el formulario: marcas de encuadre */
.formulario-contacto::before,
.formulario-contacto::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--trazo);
  border-style: solid;
  pointer-events: none;
}
.formulario-contacto::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.formulario-contacto::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.campo { margin-bottom: 22px; }
.campo-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
label {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--texto-suave);
}
input, select, textarea {
  width: 100%;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  padding: 12px 2px;
  border: none;
  border-bottom: 1px solid var(--linea-oscura);
  border-radius: 0;
  background: transparent;
  color: var(--texto-oscuro);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
input:focus, select:focus, textarea:focus {
  border-bottom-color: var(--trazo);
  box-shadow: 0 1px 0 0 var(--trazo);
}
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }
textarea { resize: vertical; }

.campo input.campo--invalid,
.campo select.campo--invalid,
.campo textarea.campo--invalid { border-bottom-color: #b3261e; }
.campo input.campo--invalid:focus,
.campo select.campo--invalid:focus,
.campo textarea.campo--invalid:focus { box-shadow: 0 1px 0 0 #b3261e; }
.campo-error {
  display: block;
  min-height: 1.1em;
  margin-top: 7px;
  font-size: 0.82rem;
  color: #b3261e;
}

.form-confirmacion {
  margin: 14px 0 0;
  font-size: 0.94rem;
  color: var(--texto-suave);
  min-height: 1.2em;
}
.form-confirmacion.form-ok    { color: #17694a; font-weight: 500; }
.form-confirmacion.form-error { color: #b3261e; font-weight: 500; }

.form-legal {
  margin: 16px 0 0;
  font-size: 0.8rem;
  color: var(--texto-suave);
}
.form-legal a {
  color: var(--trazo);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.form-legal a:hover { border-bottom-color: var(--trazo); }

/* ============================================================
   FOOTER — cierre monumental con wordmark delineado
   ============================================================ */
.site-footer {
  background: var(--tinta-00);
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) 0 0;
}
.site-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px calc(100% / 6));
  pointer-events: none;
}
.footer-inner { position: relative; }
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--linea-tinta);
}
.footer-cta h2 {
  font-size: var(--display-md);
  text-transform: uppercase;
  color: var(--blanco);
  max-width: 15ch;
  margin: 0;
}
.footer-cta h2 .palabra-contorno { -webkit-text-stroke-color: var(--cian); }

.footer-columnas {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(36px, 4.5vw, 56px) 0;
}
.footer-col h4 {
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: 18px;
}
.footer-col nav, .footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a, .footer-col span {
  color: rgba(255,255,255,0.72);
  font-size: 0.94rem;
  width: fit-content;
  position: relative;
  transition: color var(--transicion);
}
.footer-col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--cian);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-expo);
}
.footer-col a:hover { color: var(--blanco); }
.footer-col a:hover::after { transform: scaleX(1); }
.footer-desc {
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  max-width: 300px;
  margin: 14px 0 0;
}
.footer-logo { height: 34px; width: auto; }

/* Wordmark monumental delineado al pie */
.footer-wordmark {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(3.4rem, 13.5vw, 12.5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.22);
  user-select: none;
  pointer-events: none;
  margin-bottom: -0.14em;
}
@supports not (-webkit-text-stroke: 1px black) {
  .footer-wordmark { color: rgba(255,255,255,0.08); }
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 20px 0 24px;
  border-top: 1px solid var(--linea-tinta);
}
.footer-copy {
  color: rgba(255,255,255,0.4);
  font-size: 0.76rem;
  font-family: var(--fuente-mono);
  letter-spacing: 0.04em;
  margin: 0;
}
.footer-social { display: flex; gap: 18px; }
.footer-social a {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linea-tinta);
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  transition: color var(--transicion), border-color var(--transicion),
              background var(--transicion), transform var(--transicion);
}
.footer-social a:hover {
  color: var(--tinta-10);
  background: var(--cian);
  border-color: var(--cian);
  transform: translateY(-3px);
}

/* ============================================================
   PÁGINAS INTERNAS — encabezado de lámina
   ============================================================ */
.page-header {
  background: var(--tinta-10);
  padding: clamp(72px, 9vw, 130px) 0 0;
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px calc(100% / 6));
  pointer-events: none;
}
/* Rótulo de lámina fantasma en la esquina del encabezado */
.page-header-inner {
  position: relative;
  padding-top: 26px;
  padding-bottom: clamp(48px, 6vw, 84px);
}
.page-header-inner[data-sheet]::before {
  content: attr(data-sheet);
  position: absolute;
  top: 0; left: 0;
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.5);
}
.page-header-inner[data-sheet]::after {
  content: attr(data-sheet);
  position: absolute;
  right: 0;
  bottom: clamp(10px, 2vw, 26px);
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 7rem);
  line-height: 1;
  letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.14);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.page-header .eyebrow { color: var(--cian); }
.page-header h1 {
  color: var(--blanco);
  font-size: var(--display-lg);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.96;
  max-width: 14ch;
  position: relative;
  z-index: 1;
}
.page-header p {
  color: var(--texto-invertido);
  font-size: 1.06rem;
  margin: 0;
  max-width: 560px;
  position: relative;
  z-index: 1;
}
/* Cinta de datos al pie del encabezado de lámina */
.page-header-cinta {
  position: relative;
  border-top: 1px solid var(--linea-tinta);
  padding: 16px 0;
}
.page-header-cinta .contenedor {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 36px;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   CATÁLOGO DE TRÁMITES (Servicios / Normatividad)
   ============================================================ */
.catalogo-servicios { padding-top: clamp(40px, 6vw, 72px); }
.catalogo-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 56px;
  align-items: start;
}
.catalogo-servicios--tabs .catalogo-layout {
  grid-template-columns: 330px 1fr;
  align-items: start;
}
.catalogo-nav {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: calc(100vh - 120px);
}
.buscador-tramites {
  position: relative;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.buscador-tramites i {
  position: absolute;
  left: 2px; top: 50%;
  transform: translateY(-50%);
  color: var(--linea-oscura);
  font-size: 0.85rem;
  pointer-events: none;
}
.buscador-tramites input {
  width: 100%;
  font-family: var(--fuente-cuerpo);
  font-size: 0.92rem;
  padding: 12px 8px 12px 26px;
  border: none;
  border-bottom: 1px solid var(--linea-oscura);
  background: transparent;
  color: var(--tinta-10);
  transition: border-color var(--transicion);
}
.buscador-tramites input:focus { outline: none; border-bottom-color: var(--trazo); box-shadow: 0 1px 0 0 var(--trazo); }
.buscador-tramites input::placeholder { color: var(--linea-oscura); }

.catalogo-nav-lista {
  overflow-y: auto;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
}
.nav-categoria { border-bottom: 1px solid var(--linea); }
.nav-categoria:last-child { border-bottom: none; }
.nav-categoria-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 4px;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--tinta-10);
  text-align: left;
  transition: color var(--transicion);
}
.nav-categoria-btn:hover { color: var(--trazo); }
.nav-categoria.abierta .nav-categoria-btn { color: var(--trazo); }
.nav-categoria-btn i:first-child { color: var(--trazo); width: 16px; flex-shrink: 0; transition: transform var(--transicion); }
.nav-categoria-btn:hover i:first-child { transform: translateY(-1px) scale(1.08); }
.nav-categoria-nombre { flex: 1; line-height: 1.3; }
.nav-categoria-cuenta {
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  color: var(--texto-suave);
  border: 1px solid var(--linea-oscura);
  padding: 2px 8px;
  flex-shrink: 0;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.nav-categoria.abierta .nav-categoria-cuenta {
  background: var(--tinta-10);
  border-color: var(--tinta-10);
  color: var(--blanco);
}
.nav-categoria-caret {
  font-size: 0.72rem;
  color: var(--linea-oscura);
  flex-shrink: 0;
  transition: transform var(--transicion);
}
.nav-categoria.abierta .nav-categoria-caret { transform: rotate(180deg); }
.nav-categoria-lista {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: max-height var(--transicion-larga), opacity var(--transicion);
}
.nav-categoria.abierta .nav-categoria-lista {
  max-height: 900px;
  opacity: 1;
  padding-bottom: 12px;
}
.nav-tramite-btn {
  display: block;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--texto-suave);
  padding: 8px 10px 8px 28px;
  margin-left: 2px;
  border-left: 1px solid var(--linea);
  transition: color var(--transicion), border-color var(--transicion),
              transform var(--transicion), font-weight 0s;
}
.nav-tramite-btn[hidden] { display: none; }
.nav-tramite-btn:hover { color: var(--tinta-10); transform: translateX(4px); border-left-color: var(--linea-oscura); }
.nav-tramite-btn.activo {
  color: var(--tinta-10);
  font-weight: 600;
  border-left: 2px solid var(--trazo);
}
.catalogo-nav-vacio {
  font-size: 0.86rem;
  color: var(--texto-suave);
  padding: 16px 4px;
  text-align: center;
}

.catalogo-panel { min-width: 0; }
.tramite-panel { animation: panelEntrada 0.35s ease; }
@keyframes panelEntrada {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.tramite-panel .campo-tramite,
.tramite-panel .tramite-pie {
  animation: panelEntrada 0.5s var(--ease-expo) both;
}
.tramite-panel .campo-tramite:nth-child(1) { animation-delay: 0.06s; }
.tramite-panel .campo-tramite:nth-child(2) { animation-delay: 0.12s; }
.tramite-panel .campo-tramite:nth-child(3) { animation-delay: 0.18s; }
.tramite-panel .campo-tramite:nth-child(4) { animation-delay: 0.24s; }
.tramite-panel .tramite-pie { animation-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .tramite-panel,
  .tramite-panel .campo-tramite,
  .tramite-panel .tramite-pie { animation: none; }
}

.tramite-panel-vacio {
  max-width: 560px;
  padding: 8px 0 4px;
  animation: panelEntrada 0.4s ease;
}
.tramite-panel-vacio-estado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 22px;
}
.punto-pulso {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--trazo);
  flex-shrink: 0;
}
.punto-pulso::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid var(--trazo);
  animation: pulsoRadar 2.2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
@keyframes pulsoRadar {
  0% { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .punto-pulso::after { animation: none; opacity: 0; } }
.tramite-panel-vacio .motivo-koch { width: 150px; margin: 0 0 24px; }
.tramite-panel-vacio h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  text-transform: uppercase;
  max-width: 460px;
}
.tramite-panel-vacio > p:not(.tramite-panel-vacio-estado) { max-width: 480px; }
.tramite-panel-vacio-metricas {
  display: flex;
  gap: 40px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
}
.tramite-panel-vacio-metricas div strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--tinta-10);
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.tramite-panel-vacio-metricas div span {
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.tramite-panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trazo);
  margin-bottom: 12px;
}
.tramite-panel-eyebrow i { font-size: 0.82rem; }
.tramite-panel-eyebrow span { color: var(--linea-oscura); text-transform: none; letter-spacing: 0; }
.tramite-panel h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  max-width: 760px;
  margin-bottom: 8px;
}
.tramite-panel-cuerpo {
  margin-top: 28px;
  padding-top: 4px;
  border-top: 1px solid var(--linea);
}
.campo-tramite {
  padding: 24px 0;
  border-bottom: 1px solid var(--linea);
  max-width: 720px;
}
.campo-tramite:last-child { border-bottom: none; padding-bottom: 8px; }
.campo-tramite-label {
  font-family: var(--fuente-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--trazo);
  margin-bottom: 8px;
}
.campo-tramite p { margin: 0; max-width: 660px; }
.campo-tramite p + p { margin-top: 10px; }
.campo-tramite .lista-requisitos { margin-top: 10px; }

.lista-requisitos { display: flex; flex-direction: column; gap: 8px; }
.lista-requisitos li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  color: var(--texto-suave);
}
.lista-requisitos li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  background: var(--trazo);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lista-requisitos-sub {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--linea);
}
.lista-requisitos-sub li { padding-left: 14px; font-size: 0.92rem; color: var(--texto-suave); }
.lista-requisitos-sub li::before { display: none; }

.referencia-legal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  border-left: 2px solid var(--trazo);
  padding: 3px 0 3px 12px;
  margin: 6px 0 18px;
}
.tramite-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--linea);
  max-width: 760px;
}
.tramite-pie .referencia-legal { margin: 0; flex: 1 1 auto; min-width: 0; border-bottom: 1px solid transparent; transition: border-color var(--transicion), color var(--transicion); }
.tramite-pie a.referencia-legal:hover { border-bottom-color: var(--trazo); color: var(--tinta-10); }
.enlace-duda {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--trazo);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}
.enlace-duda:hover { border-bottom-color: var(--trazo); }

/* ============================================================
   CTA FINAL — remate de páginas interiores
   ============================================================ */
.cta-final {
  text-align: left;
  padding: clamp(72px, 10vw, 130px) 0;
  background: var(--tinta-10);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px calc(100% / 6));
  pointer-events: none;
}
.cta-final .contenedor {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.cta-final h2 {
  margin-bottom: 0.35em;
  color: var(--blanco);
  font-size: var(--display-md);
  text-transform: uppercase;
  max-width: 16ch;
}
.cta-final h2 .palabra-contorno { -webkit-text-stroke-color: var(--cian); }
.cta-final p { max-width: 440px; margin: 0; color: var(--texto-invertido); }
.cta-final :focus-visible { outline-color: var(--cian); }

/* ============================================================
   PROYECTOS — EXPEDIENTES
   ============================================================ */
.lista-expedientes {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
}
.expediente {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  background: var(--blanco);
  border: 1px solid var(--linea);
  overflow: hidden;
  transition: border-color var(--transicion-larga), box-shadow var(--transicion-larga),
              transform 0.6s var(--ease-expo);
}
.expediente:nth-child(even) { grid-template-columns: 1.15fr 0.85fr; }
.expediente:nth-child(even) .expediente-imagen { order: 2; }
.expediente:hover {
  border-color: var(--tinta-10);
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
}

.expediente-imagen {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-right: 1px solid var(--linea);
}
.expediente:nth-child(even) .expediente-imagen {
  border-right: none;
  border-left: 1px solid var(--linea);
}
.expediente-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.45);
  transition: filter 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}
.expediente:hover .expediente-imagen img {
  filter: grayscale(0);
  transform: scale(1.045);
}
.expediente-folio {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 1;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--blanco);
  background: rgba(4, 8, 13, 0.78);
  backdrop-filter: blur(4px);
  padding: 6px 11px;
}

.expediente-cuerpo {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.5vw, 44px);
}
.expediente-cuerpo .categoria-blog { margin-bottom: 12px; }
.expediente-cuerpo h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 0.45em;
}
.expediente-cuerpo > p {
  font-size: 0.97rem;
  max-width: 560px;
  margin-bottom: 24px;
}
.expediente-datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
  margin: auto 0 22px;
  padding-top: 20px;
  border-top: 1px solid var(--linea);
}
.expediente-datos div { min-width: 0; }
.expediente-datos dt {
  font-family: var(--fuente-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 3px;
}
.expediente-datos dd {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--tinta-10);
  line-height: 1.3;
}
.expediente-enlace {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trazo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  position: relative;
  padding-bottom: 4px;
}
.expediente-enlace::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--trazo);
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.5s var(--ease-expo);
}
.expediente-enlace:hover::after { transform: scaleX(1); }
.expediente-enlace i { font-size: 0.72rem; transition: transform 0.45s var(--ease-expo); }
.expediente-enlace:hover i { transform: translateX(5px); }

@media (max-width: 980px) {
  .expediente,
  .expediente:nth-child(even) { grid-template-columns: 1fr; }
  .expediente:nth-child(even) .expediente-imagen { order: 0; border-left: none; }
  .expediente-imagen {
    min-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--linea);
  }
  .expediente-datos { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   BLOG
   ============================================================ */
.categoria-blog {
  display: inline-flex;
  align-items: center;
  font-family: var(--fuente-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--trazo);
  margin-bottom: 14px;
  align-self: flex-start;
}
.categoria-blog::before { content: '['; margin-right: 5px; opacity: 0.6; }
.categoria-blog::after { content: ']'; margin-left: 5px; opacity: 0.6; }

.post-destacado {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  background: var(--blanco);
  border: 1px solid var(--linea);
  margin-bottom: clamp(36px, 5vw, 56px);
  overflow: hidden;
  transition: border-color var(--transicion-larga), box-shadow var(--transicion-larga),
              transform 0.6s var(--ease-expo);
}
.post-destacado:hover {
  border-color: var(--tinta-10);
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
}
.post-destacado-imagen {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  border-right: 1px solid var(--linea);
}
.post-destacado-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4);
  transition: filter 0.8s var(--ease-expo), transform 0.8s var(--ease-expo);
}
.post-destacado:hover .post-destacado-imagen img {
  filter: grayscale(0);
  transform: scale(1.045);
}
.post-destacado-cuerpo {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 52px);
}
.post-destacado-cuerpo .fecha-blog { margin-top: auto; }
.post-destacado h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  text-transform: uppercase;
  max-width: 640px;
  color: var(--tinta-10);
}
.post-destacado p { max-width: 580px; font-size: 1.02rem; }
@media (max-width: 980px) {
  .post-destacado { grid-template-columns: 1fr; }
  .post-destacado-imagen {
    min-height: 210px;
    border-right: none;
    border-bottom: 1px solid var(--linea);
  }
}

.grid-blog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 3vw, 36px);
}
.tarjeta-blog {
  background: var(--blanco);
  border: 1px solid var(--linea);
  transition: border-color var(--transicion-larga), box-shadow var(--transicion-larga),
              transform 0.6s var(--ease-expo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.tarjeta-blog:hover {
  border-color: var(--tinta-10);
  box-shadow: var(--sombra-media);
  transform: translateY(-4px);
}
.tarjeta-blog a {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  flex: 1;
}
.blog-imagen {
  margin: -26px -24px 18px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--linea);
}
.blog-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3);
  transition: transform 0.8s var(--ease-expo), filter 0.8s var(--ease-expo);
}
.tarjeta-blog:hover .blog-imagen img { transform: scale(1.05); filter: grayscale(0); }
.tarjeta-blog h2 {
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: 0.5em;
  color: var(--tinta-10);
}
.tarjeta-blog p { font-size: 0.94rem; margin-bottom: 16px; flex: 1; }

.fecha-blog {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fuente-mono);
  font-size: 0.76rem;
  color: var(--texto-suave);
  border-top: 1px solid var(--linea);
  padding-top: 12px;
}
.fecha-blog i { font-size: 0.7rem; color: var(--trazo); }

/* ---------- Artículos ---------- */
.articulo-ancho { max-width: 760px; }
.volver-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--trazo);
  margin-bottom: 32px;
  transition: color var(--transicion);
}
.volver-blog .flecha-izq { transition: transform 0.4s var(--ease-expo); }
.volver-blog:hover { color: var(--trazo-fuerte); }
.volver-blog:hover .flecha-izq { transform: translateX(-5px); }
.articulo-blog h1 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.4em;
}
.meta-articulo {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--texto-suave);
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--linea);
}
.cuerpo-articulo h2 {
  font-size: 1.45rem;
  text-transform: uppercase;
  margin-top: 1.8em;
}
.cuerpo-articulo p { font-size: 1.04rem; }
.cuerpo-articulo ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
  list-style: disc;
}
.cuerpo-articulo li { margin-bottom: 0.4em; color: var(--texto-suave); }

/* ============================================================
   PÁGINA 404
   ============================================================ */
.pagina-404 {
  min-height: calc(100dvh - 76px);
  display: flex;
  align-items: center;
  background: var(--tinta-10);
  position: relative;
  overflow: hidden;
  padding: var(--espacio-seccion) 0;
}
.pagina-404::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.045) 0 1px, transparent 1px calc(100% / 6));
  pointer-events: none;
}
.pagina-404::after {
  content: '404';
  position: absolute;
  right: -2vw;
  bottom: -4vw;
  font-family: var(--fuente-titulos);
  font-weight: 800;
  font-size: clamp(10rem, 32vw, 26rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.12);
  pointer-events: none;
  user-select: none;
}
.pagina-404-inner { max-width: 640px; position: relative; z-index: 1; }
.pagina-404 .eyebrow { color: var(--cian); }
.pagina-404 .motivo-koch { width: 190px; margin: 0 0 26px; }
.pagina-404 .motivo-koch path { stroke: rgba(255,255,255,0.4); }
.pagina-404 h1 {
  color: var(--blanco);
  font-size: var(--display-lg);
  text-transform: uppercase;
  line-height: 0.98;
}
.pagina-404 p { color: var(--texto-invertido); }
.pagina-404-acciones {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ============================================================
   BARRA DE PROGRESO DE LECTURA
   ============================================================ */
.barra-progreso {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--trazo);
  z-index: 200;
  transition: width 0.12s linear;
}
@media (prefers-reduced-motion: reduce) { .barra-progreso { transition: none; } }

/* ============================================================
   BOTÓN VOLVER ARRIBA
   ============================================================ */
.boton-arriba {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
  width: 46px;
  height: 46px;
  border: 1px solid var(--linea-tinta);
  background: var(--tinta-10);
  color: var(--blanco);
  font-family: var(--fuente-mono);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra-suave);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion), background var(--transicion);
}
.boton-arriba.visible { opacity: 1; transform: none; pointer-events: auto; }
.boton-arriba:hover { background: var(--trazo); }

/* ============================================================
   BOTÓN WHATSAPP FLOTANTE
   ============================================================ */
.btn-whatsapp {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 999;
  background: #1FAF54;
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 20px rgba(31, 175, 84, 0.4);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.btn-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 28px rgba(31, 175, 84, 0.5);
}
@media (max-width: 480px) {
  .btn-whatsapp { width: 50px; height: 50px; font-size: 1.8rem; bottom: 78px; right: 16px; }
  .boton-arriba { right: 16px; bottom: 16px; width: 42px; height: 42px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .grid-dos, .grid-dos.invertido { grid-template-columns: 1fr; gap: 44px; }
  .grid-valores { grid-template-columns: 1fr 1fr; border-left: none; }
  .grid-complementarios { grid-template-columns: 1fr; }
  .placa-complementaria { border-right: none; border-bottom: 1px solid var(--linea); }
  .placa-complementaria:last-child { border-bottom: none; }
  .grid-blog { grid-template-columns: 1fr 1fr; }
  .footer-columnas { grid-template-columns: 1fr 1fr; }
  .catalogo-layout { grid-template-columns: 1fr; gap: 8px; }
  .catalogo-servicios--tabs .catalogo-layout { grid-template-columns: 1fr; gap: 28px; }
  .catalogo-nav { position: static; max-height: none; }
  .catalogo-nav-lista { overflow-y: visible; }
  .nav-categoria.abierta .nav-categoria-lista { max-height: none; }
  .fila-servicio { grid-template-columns: minmax(44px, 60px) 1fr auto; }
  .vista-previa { display: none; }
}

@media (max-width: 760px) {
  .nav-principal {
    position: absolute;
    top: 76px; left: 0; right: 0;
    background: var(--blanco);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid var(--linea);
    max-height: 0;
    overflow: hidden;
    box-shadow: none;
    transition: max-height var(--transicion-larga), box-shadow var(--transicion-larga);
  }
  .nav-principal.abierto { max-height: 520px; box-shadow: var(--sombra-media); }
  .nav-principal a {
    padding: 18px 24px;
    border-bottom: 1px solid var(--papel);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transicion), transform var(--transicion);
  }
  .nav-principal.abierto a { opacity: 1; transform: none; }
  .nav-principal.abierto a:nth-child(1) { transition-delay: 50ms; }
  .nav-principal.abierto a:nth-child(2) { transition-delay: 90ms; }
  .nav-principal.abierto a:nth-child(3) { transition-delay: 130ms; }
  .nav-principal.abierto a:nth-child(4) { transition-delay: 170ms; }
  .nav-principal.abierto a:nth-child(5) { transition-delay: 210ms; }
  .nav-principal.abierto a:nth-child(6) { transition-delay: 250ms; }
  .nav-principal.abierto a:nth-child(7) { transition-delay: 290ms; }
  .nav-principal a::after { display: none; }
  .nav-cta { margin: 14px 24px; text-align: center; justify-content: center; display: flex; }
  .menu-toggle { display: flex; }

  .seccion { padding: 72px 0; }
  .hero { min-height: calc(100svh - 76px); padding-top: 80px; }
  .campo-grupo { grid-template-columns: 1fr; }
  .grid-valores { grid-template-columns: 1fr; }
  .grid-blog { grid-template-columns: 1fr; }
  .footer-columnas { grid-template-columns: 1fr; gap: 32px; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .cta-final .contenedor { flex-direction: column; align-items: flex-start; }
  .fila-servicio {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fila-servicio-flecha { display: none; }
  .encabezado-seccion[data-num]::after { font-size: 4.5rem; opacity: 0.3; }
  .formulario-contacto { padding: 24px 20px; }
  .page-header-inner[data-sheet]::after { font-size: 2.6rem; }
  .tramite-pie { flex-direction: column; align-items: flex-start; }
}
.hero-contenido{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.hero-texto{
    flex:0 0 30%;
}

.hero-imagen{
    flex:0 0 30%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-imagen img{
    max-width:500px;
    transform:translateY(-100px);
    flex:0 0 30%;
}