@charset "UTF-8";
/* ==========================================================================
   NAVA-OR Ingeniería Eléctrica
   Sistema visual: "Panel + Plano"

   - Fondo charcoal = interior del tablero. Fondo claro = lámina de plano.
   - El naranja significa energizado. Se usa poco para que signifique algo.
   - Geometría tomada del logo: chaflán a 45°, cero esquinas redondeadas.

   Índice
   01. Fuentes
   02. Tokens
   03. Reset y base
   04. Utilidades y chaflán
   05. Tipografía
   06. Botones y enlaces
   07. Cabecera y navegación
   08. Hero
   09. Marcas
   10. Ingeniería (lámina de plano)
   11. Tableros
   12. Servicios
   13. Sectores
   14. Proyectos
   15. Nosotros
   16. Testimonios
   17. Preguntas frecuentes
   18. Cierre y contacto
   19. Formulario
   20. Pie y flotante
   21. Movimiento
   ========================================================================== */

/* 01. FUENTES ============================================================= */

/* Archivo — grotesca variable (peso 100-900, ancho 62-125).
   Ancho expandido en los títulos: lenguaje de placa de equipo industrial. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Martian Mono — sólo para rótulos técnicos: legendero de tablero,
   anotaciones de plano, fichas de proyecto. Nunca para texto corrido. */
@font-face {
  font-family: 'Martian Mono';
  src: url('/assets/fonts/martianmono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 02. TOKENS ============================================================== */

:root {
  /* Superficies oscuras: el interior del tablero.
     Neutros con un matiz mínimo hacia el naranja de marca (hue 40). */
  --ink-900: oklch(0.145 0.006 40);
  --ink-850: oklch(0.178 0.006 40);
  --ink-800: oklch(0.212 0.006 40);
  --ink-700: oklch(0.262 0.008 40);
  --ink-600: oklch(0.330 0.009 40);

  /* Texto sobre oscuro — verificado ≥4.5:1 sobre --ink-800 */
  --text-hi:  oklch(0.960 0.003 40);   /* 15.7:1 */
  --text-mid: oklch(0.790 0.005 40);   /*  9.1:1 */
  --text-low: oklch(0.660 0.006 40);   /*  5.7:1 */

  /* Lámina de plano: neutro puro, deliberadamente sin tono crema */
  --paper:   oklch(0.968 0 0);
  --paper-2: oklch(0.930 0 0);
  --graph-hi:  oklch(0.200 0.005 40);  /* 16.5:1 sobre --paper */
  --graph-mid: oklch(0.430 0.006 40);  /*  7.4:1 sobre --paper */

  /* Energizado */
  --live:    oklch(0.648 0.221 39);    /* #fc4f00 — 4.9:1 sobre charcoal */
  --live-hi: oklch(0.720 0.190 42);
  --live-08: oklch(0.648 0.221 39 / 0.08);
  --live-20: oklch(0.648 0.221 39 / 0.20);
  --live-40: oklch(0.648 0.221 39 / 0.40);

  /* Contenido sobre relleno naranja */
  --blanco: #ffffff;

  /* Verde oficial de WhatsApp, sólo para los accesos a ese canal */
  --wa: #25d366;
  --wa-hi: #1fbb59;

  /* Líneas */
  --line:      oklch(1 0 0 / 0.11);
  --line-soft: oklch(1 0 0 / 0.06);
  --line-dark: oklch(0.200 0.005 40 / 0.14);

  /* Tipografía */
  --f-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   clamp(1.15rem, 0.95rem + 0.85vw, 1.5rem);
  --t-lg:   clamp(1.5rem,  1.2rem + 1.5vw,  2.25rem);
  --t-xl:   clamp(2rem,    1.4rem + 2.9vw,  3.4rem);
  --t-2xl:  clamp(2.5rem,  1.5rem + 4.6vw,  5rem);

  /* Ritmo */
  --wrap: 78rem;
  --pad:  clamp(1.15rem, 4vw, 2.5rem);
  --band: clamp(4.5rem, 9vw, 8.5rem);
  --gap:  clamp(1.15rem, 2.2vw, 2rem);

  /* Chaflán a 45°: la firma geométrica del logo */
  --ch:    14px;
  --ch-sm: 9px;
  --ch-lg: 22px;

  /* Capas */
  --z-base: 1;
  --z-sticky: 100;
  --z-flotante: 200;
  --z-menu: 300;
  --z-saltar: 400;

  /* Curvas */
  --sal:  cubic-bezier(0.16, 1, 0.3, 1);      /* ease-out-expo */
  --sal2: cubic-bezier(0.22, 0.61, 0.36, 1);

  --cabecera-h: 4.75rem;
  color-scheme: dark;
}

@media (max-width: 60rem) {
  :root { --cabecera-h: 4rem; }
}

/* 03. RESET Y BASE ======================================================== */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa la cabecera fija al saltar a un ancla */
  scroll-padding-top: calc(var(--cabecera-h) + 1rem);
}

body {
  font-family: var(--f-sans);
  font-size: var(--t-base);
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1.65;
  color: var(--text-mid);
  background: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--live); color: var(--ink-900); }

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

/* El manejador de anclas enfoca la sección de destino para que el teclado
   siga la navegación. Es un destino de foco programático, no interactivo,
   así que no debe dibujar contorno. */
section[tabindex='-1']:focus,
section[tabindex='-1']:focus-visible { outline: none; }

.saltar {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -140%);
  z-index: var(--z-saltar);
  padding: 0.75rem 1.5rem;
  background: var(--live);
  color: var(--blanco);
  font-weight: 700;
  font-size: var(--t-sm);
  transition: transform 0.2s var(--sal);
}
.saltar:focus { transform: translate(-50%, 0); }

/* 04. UTILIDADES Y CHAFLÁN ================================================ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.seccion {
  padding-block: var(--band);
  scroll-margin-top: var(--cabecera-h);
}

/* Corta la esquina superior izquierda y la inferior derecha, siguiendo
   la diagonal del isotipo. Reemplaza por completo a border-radius. */
.chaflan {
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.chaflan--sm {
  clip-path: polygon(
    var(--ch-sm) 0, 100% 0,
    100% calc(100% - var(--ch-sm)), calc(100% - var(--ch-sm)) 100%,
    0 100%, 0 var(--ch-sm)
  );
}

/* Caja chaflanada con borde de 1px: el fondo hace de borde y el
   pseudo-elemento interior, desplazado 1px, hace de relleno. */
.marco {
  position: relative;
  background: var(--line);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.marco::before {
  content: '';
  position: absolute;
  inset: 1px;
  background: var(--ink-850);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.marco > * { position: relative; z-index: 1; }

/* Rótulo técnico: legendero de tablero, anotación de plano */
.rotulo {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
}

/* 05. TIPOGRAFÍA ========================================================== */

.titulo {
  font-size: var(--t-xl);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--text-hi);
  text-wrap: balance;
}
.titulo--plano { color: var(--graph-hi); }

.titulo em {
  font-style: normal;
  color: var(--live);
}

.parrafo {
  font-size: var(--t-base);
  line-height: 1.72;
  color: var(--text-mid);
  max-width: 68ch;
  text-wrap: pretty;
}
.parrafo--plano { color: var(--graph-mid); }
.parrafo--destacado {
  color: var(--text-hi);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.5;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  margin-top: 0.5rem;
}

.seccion__cabeza {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.seccion__intro { max-width: 60ch; }

@media (min-width: 60rem) {
  .seccion__cabeza {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }
}

/* 06. BOTONES Y ENLACES =================================================== */

.btn {
  --ch: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  font-size: var(--t-sm);
  font-weight: 700;
  font-variation-settings: 'wdth' 105;
  letter-spacing: 0.01em;
  text-align: center;
  min-height: 2.9rem;
  transition: background-color 0.25s var(--sal2), color 0.25s var(--sal2),
              transform 0.25s var(--sal);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.btn i { font-size: 0.9em; transition: transform 0.25s var(--sal); }

.btn--vivo {
  background: var(--live);
  color: var(--blanco);
}
.btn--vivo:hover { background: var(--live-hi); transform: translateY(-2px); }
.btn--vivo:hover i.fa-arrow-right { transform: translateX(4px); }
.btn--vivo:active { transform: translateY(0); }

/* Relleno sólido en vez de borde: un contorno de 1px quedaría cortado
   en las diagonales del chaflán, porque clip-path recorta el box-shadow.
   Regla del sistema: chaflán = forma sólida, borde = línea de rejilla. */
.btn--linea {
  background: var(--ink-700);
  color: var(--text-hi);
}
.btn--linea:hover {
  background: var(--text-hi);
  color: var(--ink-900);
  transform: translateY(-2px);
}

.btn--grande { padding: 1.1rem 2rem; font-size: var(--t-base); min-height: 3.3rem; }
.btn--bloque { width: 100%; }

.enlace-vivo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--live);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--live-40);
  transition: color 0.2s var(--sal2), border-color 0.2s var(--sal2);
}
.enlace-vivo i { transition: transform 0.25s var(--sal); }
.enlace-vivo:hover { color: var(--live-hi); border-color: var(--live-hi); }
.enlace-vivo:hover i { transform: translateX(4px); }

/* 07. CABECERA Y NAVEGACIÓN =============================================== */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  background: oklch(0.145 0.006 40 / 0.72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
  transition: background-color 0.3s var(--sal2), border-color 0.3s var(--sal2);
}
.cabecera.esta-fija {
  background: oklch(0.145 0.006 40 / 0.94);
  border-bottom-color: var(--line);
}

/* backdrop-filter convierte a la cabecera en bloque contenedor de sus
   descendientes `position: fixed`, así que el panel del menú quedaba
   encajonado dentro de los 64px del header. Mientras el menú está
   abierto se retira el filtro y el panel vuelve a medirse contra la
   ventana. La cabecera queda opaca, que es lo que corresponde. */
.cabecera.tiene-menu-abierto {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--ink-900);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: var(--cabecera-h);
}

.marca { flex-shrink: 0; display: block; }
.marca__img {
  height: clamp(1.6rem, 2.4vw, 2.05rem);
  width: auto;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.nav__lista {
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 1.5vw, 1.5rem);
}

.nav__enlace {
  position: relative;
  display: block;
  padding: 0.5rem 0;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variation-settings: 'wdth' 96;
  letter-spacing: 0.005em;
  color: var(--text-mid);
  white-space: nowrap;
  transition: color 0.2s var(--sal2);
}
.nav__enlace::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--live);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--sal);
}
.nav__enlace:hover { color: var(--text-hi); }
.nav__enlace:hover::after,
.nav__enlace.esta-activo::after { transform: scaleX(1); }
.nav__enlace.esta-activo { color: var(--text-hi); }

.nav__cta { padding: 0.7rem 1.15rem; font-size: 0.8125rem; min-height: 2.5rem; }

/* Barra de progreso de lectura */
.cabecera__progreso {
  height: 2px;
  width: 100%;
  background: var(--live);
  transform: scaleX(var(--avance, 0));
  transform-origin: left;
  transition: transform 0.1s linear;
}

/* Hamburguesa */
.hamburguesa {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-right: -0.5rem;
}
.hamburguesa__linea {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-hi);
  transition: transform 0.3s var(--sal), opacity 0.2s linear;
}
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] .hamburguesa__linea:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 64rem) {
  .hamburguesa { display: flex; }

  .nav {
    position: fixed;
    inset: var(--cabecera-h) 0 0 0;
    z-index: var(--z-menu);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 1.5rem var(--pad) 3rem;
    background: var(--ink-900);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.4s var(--sal), visibility 0.4s;
  }
  .nav.esta-abierto { transform: translateX(0); visibility: visible; }

  .nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__lista li { border-bottom: 1px solid var(--line-soft); }

  .nav__enlace {
    padding: 1.15rem 0;
    font-size: 1.15rem;
    font-weight: 700;
    font-variation-settings: 'wdth' 108;
    color: var(--text-hi);
  }
  .nav__enlace::after { display: none; }
  .nav__enlace.esta-activo { color: var(--live); }

  .nav__cta { margin-top: 2rem; padding: 1.1rem 2rem; font-size: var(--t-base); min-height: 3.3rem; }
}

/* 08. HERO ================================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: calc(var(--cabecera-h) + 3rem);
  overflow: hidden;
}

/* Orden de pintado sin índices negativos: foto, velo (::after, último
   hijo) y encima el contenido elevado a z-index 1. */
.hero__fondo { position: absolute; inset: 0; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Doble velo: uno direccional para el contraste del texto, otro vertical
   para que la perspectiva de la sala eléctrica siga leyéndose. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      oklch(0.145 0.006 40 / 0.95) 0%,
      oklch(0.145 0.006 40 / 0.86) 38%,
      oklch(0.145 0.006 40 / 0.52) 72%,
      oklch(0.145 0.006 40 / 0.42) 100%),
    linear-gradient(to top,
      oklch(0.145 0.006 40 / 0.92) 0%,
      oklch(0.145 0.006 40 / 0.20) 45%,
      oklch(0.145 0.006 40 / 0.55) 100%);
}

.hero__contenido {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  width: 100%;
}

.hero__origen {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: 1.75rem;
  padding: 0.5rem 0.95rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-hi);
  background: var(--live-20);
  --ch: 7px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.hero__origen i { color: var(--live); }

.hero__titulo {
  font-size: var(--t-2xl);
  font-weight: 800;
  font-variation-settings: 'wdth' 116;
  line-height: 0.96;
  letter-spacing: -0.032em;
  color: var(--text-hi);
  text-transform: none;
}
.hero__titulo em { font-style: normal; color: var(--live); }

.hero__bajada {
  margin-top: 1.75rem;
  max-width: 54ch;
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--text-mid);
  text-wrap: pretty;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

/* Franja técnica al pie del hero */
.hero__franja {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border-top: 1px solid var(--line);
  background: oklch(0.145 0.006 40 / 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero__franja li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.15rem var(--pad);
  border-left: 1px solid var(--line-soft);
}
.hero__franja li:first-child { border-left: 0; }

.dato__k {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--live);
}
.dato__v {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.35;
}

@media (max-width: 40rem) {
  .hero { min-height: 92svh; }
  .hero__acciones .btn { flex: 1 1 100%; }
  .hero__franja li { padding-block: 0.9rem; }
  .hero__franja li:nth-child(odd) { border-left: 0; }
}

/* 09. MARCAS ============================================================== */

.marcas {
  background: var(--ink-900);
  border-block: 1px solid var(--line-soft);
  padding-block: clamp(2rem, 4vw, 3rem);
}
.marcas__caja {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.marcas__intro {
  display: grid;
  gap: 0.5rem;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--live);
}
.marcas__nota {
  font-family: var(--f-sans);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.6;
  color: var(--text-mid);
  max-width: 62ch;
}

/* Rejilla pareja de 8 celdas: 2 columnas en móvil y 4 en escritorio.
   Antes era una lista con flex-wrap y "Lovato" quedaba huérfano en una
   segunda línea, con un hueco grande al lado del rótulo. */
.marcas__lista {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
}
@media (min-width: 40rem) { .marcas__lista { grid-template-columns: repeat(4, 1fr); } }

.marcas__lista li {
  display: grid;
  place-items: center;
  min-height: 4.5rem;
  padding: 1rem 0.75rem;
  text-align: center;
  font-size: clamp(0.875rem, 1.3vw, 1.05rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 92;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-low);
  background: var(--ink-850);
  transition: color 0.25s var(--sal2), background-color 0.25s var(--sal2);
}
.marcas__lista li:hover { color: var(--text-hi); background: var(--ink-700); }

/* 10. INGENIERÍA — lámina de plano ======================================== */

.plano {
  position: relative;
  padding-block: var(--band);
  background: var(--paper);
  color: var(--graph-mid);
  scroll-margin-top: var(--cabecera-h);
}

/* Retícula de lámina: cuadrícula fina de 40px con una gruesa cada 200px */
.plano::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark) 1px, transparent 1px),
    linear-gradient(to right, oklch(0.2 0.005 40 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(0.2 0.005 40 / 0.05) 1px, transparent 1px);
  background-size: 200px 200px, 200px 200px, 40px 40px, 40px 40px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  opacity: 0.85;
}
.plano > .wrap { position: relative; }

.plano__encabezado {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.plano__encabezado > div {
  display: grid;
  gap: 1.5rem;
  align-content: center;
}
@media (min-width: 62rem) {
  .plano__encabezado { grid-template-columns: 1fr 0.85fr; }
}

.plano__foto {
  --ch: var(--ch-lg);
  overflow: hidden;
  background: var(--paper-2);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.plano__foto img { width: 100%; aspect-ratio: 14 / 9; object-fit: cover; }

/* Diagrama unifilar */
.unifilar {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: oklch(1 0 0 / 0.55);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  overflow-x: auto;
}
.unifilar__svg { width: 100%; min-width: 40rem; height: auto; }
.unifilar__pie {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--graph-mid);
  margin-bottom: 1.25rem;
}

.uf-linea path, .uf-simbolo circle, .uf-simbolo rect, .uf-simbolo path,
.uf-caja rect, .uf-tierra path {
  fill: none;
  stroke: var(--graph-hi);
  stroke-width: 1.6;
  stroke-linecap: square;
}
.uf-caja rect { stroke-width: 1.3; fill: oklch(1 0 0 / 0.7); }
.uf-barra path { stroke: var(--live); stroke-width: 4.5; stroke-linecap: butt; }
.uf-linea--viva path { stroke: var(--live); stroke-width: 2.2; }
.uf-tierra path { stroke-width: 1.9; }

.uf-glifo, .uf-rotulo text {
  font-family: var(--f-mono);
  fill: var(--graph-hi);
  text-anchor: middle;
  font-variation-settings: 'wdth' 87.5;
}
.uf-glifo { font-size: 11px; font-weight: 500; }
.uf-rotulo text { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; }

.uf-nota text {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  fill: var(--graph-mid);
  font-variation-settings: 'wdth' 87.5;
}
.uf-nota text[x='330'], .uf-nota text[x='520'],
.uf-nota text[x='710'], .uf-nota text[x='900'] { text-anchor: middle; }

/* Etapas: secuencia real, por eso van numeradas */
.etapas {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  margin-bottom: clamp(3rem, 5vw, 4rem);
  box-shadow: 0 0 0 1px var(--line-dark);
}
@media (min-width: 52rem) {
  .etapas { grid-template-columns: repeat(3, 1fr); }
}

.etapa {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--paper);
  transition: background-color 0.3s var(--sal2);
}
.etapa:hover { background: oklch(1 0 0 / 0.9); }

.etapa__n {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--live);
  margin-bottom: 1.5rem;
  font-variation-settings: 'wdth' 87.5;
}
.etapa__titulo {
  font-size: var(--t-md);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--graph-hi);
  margin-bottom: 0.85rem;
}
.etapa__texto { font-size: var(--t-sm); line-height: 1.65; color: var(--graph-mid); }

/* Entregables: se leen como la viñeta de un plano, en celdas con
   filete fino. Antes eran seis ítems sueltos en dos filas desparejas. */
.entregables__titulo {
  font-size: var(--t-sm);
  font-family: var(--f-mono);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--graph-hi);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-dark);
  margin-bottom: 1.5rem;
}

.entregables__lista {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-dark);
  box-shadow: 0 0 0 1px var(--line-dark);
}
@media (min-width: 44rem) { .entregables__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .entregables__lista { grid-template-columns: repeat(3, 1fr); } }

.entregables__lista li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  row-gap: 0.2rem;
  align-content: start;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  background: var(--paper);
  transition: background-color 0.3s var(--sal2);
}
.entregables__lista li:hover { background: oklch(1 0 0 / 0.92); }

.entregables__lista i {
  grid-row: 1 / span 2;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.1rem;
  font-size: 0.95rem;
  color: var(--live);
  background: var(--live-08);
  --ch: 6px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.entregable__n {
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--graph-hi);
}
.entregable__d {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--graph-mid);
}

/* 11. TABLEROS ============================================================ */

.tableros { background: var(--ink-800); }

.rejilla-tableros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
}

.tablero {
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  transition: background-color 0.35s var(--sal2);
}
.tablero:hover { background: var(--ink-700); }

.tablero__medio { overflow: hidden; background: var(--ink-900); }
.tablero__medio img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.06);
  transition: transform 0.6s var(--sal), filter 0.45s var(--sal2);
}
.tablero:hover .tablero__medio img { transform: scale(1.045); filter: grayscale(0) contrast(1.02); }

.tablero__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  flex: 1;
}
.tablero__titulo {
  font-size: var(--t-md);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text-hi);
}
.tablero__texto { font-size: var(--t-sm); line-height: 1.6; color: var(--text-mid); }

/* Última celda: nomenclatura, no una tarjeta más */
.tablero--nota { background: var(--live-08); }
.tablero--nota:hover { background: var(--live-08); }

.siglas { display: grid; gap: 0.85rem; margin-block: 0.5rem 1.25rem; }
.siglas li {
  display: grid;
  grid-template-columns: 3.1rem 1fr;
  gap: 0.65rem;
  align-items: baseline;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--text-mid);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-soft);
}
.siglas li:last-child { border-bottom: 0; padding-bottom: 0; }
.siglas b {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--live);
  font-variation-settings: 'wdth' 87.5;
}
.tablero--nota .enlace-vivo { margin-top: auto; align-self: flex-start; }

/* 12. SERVICIOS =========================================================== */

.servicios { background: var(--ink-900); }

/* Los cuatro servicios tienen 8, 2, 3 y 6 etiquetas. En columnas de igual
   alto eso dejaba huecos enormes en medio de las tarjetas cortas, porque
   las etiquetas iban ancladas abajo. Como filas, cada servicio se mide
   según su propio contenido y el problema desaparece. */
.rejilla-servicios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.servicio {
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-850);
  transition: background-color 0.35s var(--sal2);
}
.servicio:hover { background: var(--ink-800); }

@media (min-width: 56rem) {
  .servicio {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
}

.servicio__intro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}

.servicio__icono {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.15rem;
  color: var(--live);
  background: var(--live-08);
  --ch: 8px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
  transition: background-color 0.35s var(--sal2), color 0.35s var(--sal2);
}
.servicio:hover .servicio__icono { background: var(--live); color: var(--blanco); }

.servicio__titulo {
  font-size: var(--t-md);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text-hi);
  margin-bottom: 0.5rem;
}
.servicio__texto { font-size: var(--t-sm); line-height: 1.6; color: var(--text-mid); max-width: 46ch; }

/* En móvil las etiquetas quedan bajo el texto y un filete las separa;
   en escritorio ocupan su propia columna y ya no lo necesitan. */
.etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.4rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 56rem) {
  .etiquetas { padding-top: 0.35rem; border-top: 0; }
}
.etiquetas li {
  --ch: 5px;
  padding: 0.3rem 0.6rem;
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-mid);
  background: oklch(1 0 0 / 0.075);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}

.servicios__foto {
  --ch: var(--ch-lg);
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
/* 4:3 en móvil y 16:9 en escritorio. El 21:8 anterior recortaba tanto
   la foto que el encuadre se perdía. */
.servicios__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 48rem) {
  .servicios__foto img { aspect-ratio: 16 / 9; }
}

/* Placa sólida achaflanada en vez de un degradado sobre la imagen:
   el texto se lee siempre igual, sin depender de lo que haya debajo. */
.servicios__pie {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: min(38ch, 92%);
  padding: clamp(1.15rem, 2.4vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--text-hi);
  background: oklch(0.145 0.006 40 / 0.93);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  --ch: 16px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.servicios__pie::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 3px;
  background: var(--live);
  margin-bottom: 0.85rem;
}

/* 13. SECTORES ============================================================ */

.sectores { background: var(--ink-800); }

/* Seis sectores: 3+3 en escritorio, 2+2+2 en tablet, apilados en móvil.
   Con auto-fit quedaba una fila de 4 y otra de 2, dejando dos huecos vacíos. */
.rejilla-sectores {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
}
@media (min-width: 38rem) { .rejilla-sectores { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .rejilla-sectores { grid-template-columns: repeat(3, 1fr); } }

.sector {
  position: relative;
  overflow: hidden;
  min-height: clamp(19rem, 34vw, 26rem);
  display: flex;
  align-items: flex-end;
  background: var(--ink-900);
}
/* Sin z-index negativo: la imagen va primero en el DOM, el velo después
   y el texto encima. Los índices negativos dentro de un contexto aislado
   fallaban al pintar de forma intermitente en Chrome. */
.sector img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.5) contrast(1.05);
  transition: transform 0.7s var(--sal), filter 0.5s var(--sal2);
}
.sector::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    oklch(0.145 0.006 40 / 0.94) 8%,
    oklch(0.145 0.006 40 / 0.55) 48%,
    oklch(0.145 0.006 40 / 0.28) 100%);
  transition: background 0.5s var(--sal2);
}
.sector:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1); }
.sector:hover::after {
  background: linear-gradient(to top,
    oklch(0.145 0.006 40 / 0.9) 8%,
    oklch(0.145 0.006 40 / 0.42) 55%,
    oklch(0.145 0.006 40 / 0.15) 100%);
}

.sector__texto { position: relative; z-index: 1; padding: clamp(1.25rem, 2.6vw, 1.9rem); }
.sector__titulo {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--text-hi);
  margin-bottom: 0.5rem;
}
/* Línea naranja que crece al pasar el cursor: el sector "se energiza" */
.sector__titulo::after {
  content: '';
  display: block;
  width: 2rem;
  height: 3px;
  background: var(--live);
  margin-top: 0.75rem;
  transform-origin: left;
  transition: width 0.4s var(--sal);
}
.sector:hover .sector__titulo::after { width: 4.5rem; }

.sector__nota {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 34ch;
  margin-top: 0.75rem;
}

/* 14. PROYECTOS =========================================================== */

.proyectos { background: var(--ink-900); }

.rejilla-proyectos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--gap);
}

.proyecto {
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
  transition: background-color 0.35s var(--sal2);
}
.proyecto:hover { background: var(--ink-700); }

.proyecto__medio { overflow: hidden; background: var(--ink-900); }
.proyecto__medio img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.05);
  transition: transform 0.6s var(--sal), filter 0.45s var(--sal2);
}
.proyecto:hover .proyecto__medio img { transform: scale(1.04); filter: grayscale(0) contrast(1); }

.proyecto__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.proyecto__titulo {
  font-size: var(--t-md);
  font-weight: 700;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--text-hi);
}
.proyecto__sub {
  font-size: var(--t-sm);
  color: var(--text-low);
  margin-top: 0.35rem;
  margin-bottom: 1.35rem;
}

/* Ficha técnica: leída como un legendero de tablero */
.ficha {
  display: grid;
  gap: 0;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.ficha > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line-soft);
}
.ficha > div:last-child { border-bottom: 0; }
.ficha dt {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-low);
  align-self: center;
}
.ficha dd {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.4;
}

@media (max-width: 26rem) {
  .ficha > div { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* 15. NOSOTROS ============================================================ */

.nosotros { background: var(--ink-800); }

.nosotros__intro {
  display: grid;
  gap: clamp(1.75rem, 4vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 62rem) {
  .nosotros__intro { grid-template-columns: 0.85fr 1fr; align-items: start; }
}
.nosotros__texto { display: grid; gap: 1.35rem; }

.nosotros__fotos {
  display: grid;
  gap: var(--gap);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 48rem) {
  .nosotros__fotos { grid-template-columns: 1.25fr 1fr; }
}
.nosotros__fotos figure {
  --ch: var(--ch-lg);
  overflow: hidden;
  background: var(--ink-900);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.nosotros__fotos img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(0.3) contrast(1.05);
  transition: filter 0.5s var(--sal2), transform 0.6s var(--sal);
}
.nosotros__fotos figure:hover img { filter: grayscale(0); transform: scale(1.03); }

.pilares {
  display: grid;
  gap: 1px;
  background: var(--line);
  box-shadow: 0 0 0 1px var(--line);
  margin-bottom: clamp(3rem, 5vw, 4rem);
}
@media (min-width: 52rem) { .pilares { grid-template-columns: 1fr 1fr; } }

.pilar { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--ink-850); }
.pilar__titulo {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-hi);
  margin-bottom: 1rem;
}
.pilar__titulo--segundo { margin-top: 2.25rem; }
.pilar__texto { font-size: var(--t-sm); line-height: 1.7; color: var(--text-mid); }

.marcado { display: grid; gap: 0.75rem; margin-top: 1.5rem; }
.marcado li {
  position: relative;
  padding-left: 1.85rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-mid);
}
/* Marca de verificación dibujada en CSS, sin depender de iconos externos */
.marcado li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.6rem;
  height: 0.32rem;
  border-left: 2px solid var(--live);
  border-bottom: 2px solid var(--live);
  transform: rotate(-45deg);
}

.razones__titulo {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-hi);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.75rem;
}
.razones__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1.35rem 2rem;
}
.razones__lista li {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--text-mid);
}
.razones__lista i {
  flex-shrink: 0;
  width: 1.5rem;
  margin-top: 0.15rem;
  font-size: 1.05rem;
  color: var(--live);
  text-align: center;
}

/* 16. TESTIMONIOS ========================================================= */

.testimonios { background: var(--ink-900); }
.testimonios .titulo { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.rejilla-testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--gap);
}

.testimonio {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink-850);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
  transition: background-color 0.35s var(--sal2);
}
.testimonio:hover { background: var(--ink-700); }

.testimonio__cita {
  flex: 1;
  font-size: var(--t-base);
  line-height: 1.62;
  color: var(--text-hi);
  text-wrap: pretty;
}
.testimonio__cita::before {
  content: '';
  display: block;
  width: 1.75rem;
  height: 3px;
  background: var(--live);
  margin-bottom: 1.35rem;
}

.testimonio__firma { display: grid; gap: 0.2rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.testimonio__nombre { font-size: var(--t-sm); font-weight: 700; color: var(--text-hi); }
.testimonio__cargo {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-low);
}

/* 17. PREGUNTAS FRECUENTES =============================================== */

.faq { background: var(--ink-800); }
.faq__caja { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 62rem) {
  .faq__caja { grid-template-columns: 0.75fr 1fr; align-items: start; }
  .faq .titulo { position: sticky; top: calc(var(--cabecera-h) + 2rem); }
}

.faq__lista { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--text-hi);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--sal2);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--live); }

/* La pregunta es un H3 real para que los buscadores con IA lean la
   jerarquía, pero visualmente hereda el estilo del summary. */
.faq__pregunta h3 {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/* Signo + que gira a × al abrir */
.faq__pregunta::after {
  content: '';
  flex-shrink: 0;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.4em;
  background:
    linear-gradient(var(--live), var(--live)) center / 100% 2px no-repeat,
    linear-gradient(var(--live), var(--live)) center / 2px 100% no-repeat;
  transition: transform 0.35s var(--sal);
}
.faq__item[open] .faq__pregunta::after { transform: rotate(135deg); }
.faq__item[open] .faq__pregunta { color: var(--live); }

.faq__respuesta { padding-bottom: 1.5rem; }
.faq__respuesta p {
  font-size: var(--t-sm);
  line-height: 1.72;
  color: var(--text-mid);
  max-width: 68ch;
}

/* 18. CIERRE Y CONTACTO ================================================== */

/* Único bloque naranja saturado del sitio: por eso funciona como cierre */
.cierre {
  background: var(--live);
  color: var(--ink-900);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  scroll-margin-top: var(--cabecera-h);
}
.cierre__caja { display: grid; gap: 1.5rem; }
@media (min-width: 62rem) {
  .cierre__caja { grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: center; }
}
.cierre__titulo {
  font-size: var(--t-xl);
  font-weight: 800;
  font-variation-settings: 'wdth' 112;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  text-wrap: balance;
}
.cierre__texto {
  font-size: var(--t-md);
  line-height: 1.55;
  /* Sombra del propio naranja en vez de gris: no se ve lavado */
  color: oklch(0.28 0.09 39);
  max-width: 52ch;
  font-weight: 500;
}

.contacto { background: var(--ink-900); }
.contacto__rejilla { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 62rem) {
  .contacto__rejilla { grid-template-columns: 1fr 1.05fr; align-items: start; }
}
.contacto__datos { display: grid; gap: 1.5rem; align-content: start; }

.canales { display: grid; gap: 1px; background: var(--line); box-shadow: 0 0 0 1px var(--line); margin-top: 0.5rem; }
.canal {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 1.15rem clamp(1rem, 2vw, 1.5rem);
  background: var(--ink-850);
  transition: background-color 0.3s var(--sal2);
}
.canal:hover { background: var(--ink-800); }
.canal__icono {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--live);
  background: var(--live-08);
  --ch: 6px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.canal__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-low);
  margin-bottom: 0.15rem;
}
.canal__v {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-hi);
  line-height: 1.4;
  transition: color 0.2s var(--sal2);
}
a.canal__v:hover { color: var(--live); }

.mapa {
  --ch: var(--ch-lg);
  overflow: hidden;
  background: var(--ink-850);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.mapa iframe {
  width: 100%;
  height: clamp(15rem, 30vw, 20rem);
  border: 0;
  filter: grayscale(1) invert(0.92) contrast(0.86);
}

/* 19. FORMULARIO ========================================================= */

.forma {
  display: grid;
  gap: 1.15rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--ink-850);
  --ch: var(--ch-lg);
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
}
.forma__titulo {
  font-size: var(--t-lg);
  font-weight: 800;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--text-hi);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.campo { display: grid; gap: 0.45rem; }
.campo-par { display: grid; gap: 1.15rem; }
@media (min-width: 30rem) { .campo-par { grid-template-columns: 1fr 1fr; } }

.campo__etiqueta {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--text-mid);
}
.campo__etiqueta span { color: var(--live); }

.campo__control {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--t-sm);
  font-family: var(--f-sans);
  color: var(--text-hi);
  background: var(--ink-900);
  border: 1px solid var(--line);
  transition: border-color 0.2s var(--sal2), background-color 0.2s var(--sal2);
  min-height: 2.9rem;
}
.campo__control--area { resize: vertical; min-height: 7rem; line-height: 1.6; }

/* El placeholder también necesita 4.5:1, no el gris tenue por defecto */
.campo__control::placeholder { color: var(--text-low); opacity: 1; }
.campo__control:hover { border-color: var(--line); background: var(--ink-850); }
.campo__control:focus {
  outline: none;
  border-color: var(--live);
  background: var(--ink-850);
  box-shadow: 0 0 0 3px var(--live-20);
}
.campo__control[aria-invalid='true'] { border-color: var(--live); }

.campo__control:is(select) {
  appearance: none;
  cursor: pointer;
  /* Flecha dibujada con gradientes: sin request extra */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-mid) 50%),
    linear-gradient(135deg, var(--text-mid) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) center, calc(100% - 0.8rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.campo__control:is(select) option { background: var(--ink-900); color: var(--text-hi); }

.campo__error {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--live-hi);
}
.campo__error::before { content: '↳ '; }

.trampa {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.forma__nota {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-low);
}
.forma__nota a { color: var(--text-mid); border-bottom: 1px solid var(--line); }
.forma__nota a:hover { color: var(--live); border-color: var(--live); }
.forma__nota.es-error { color: var(--live-hi); font-weight: 600; }
.forma__nota.es-ok { color: var(--text-hi); font-weight: 600; }

/* Estado de envío */
.btn[disabled] { opacity: 0.65; cursor: progress; }
.btn[disabled]:hover { transform: none; background: var(--live); }

.forma__puntos::after {
  content: '';
  animation: puntos 1.2s steps(4, end) infinite;
}
@keyframes puntos {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
  100% { content: ''; }
}
@media (prefers-reduced-motion: reduce) {
  .forma__puntos::after { content: '...'; animation: none; }
}

/* 20. PIE Y FLOTANTE ===================================================== */

.pie {
  background: var(--ink-900);
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 6vw, 5rem);
}
.pie__rejilla {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 48rem) { .pie__rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 68rem) { .pie__rejilla { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; } }

.pie__logo { height: 2.1rem; width: auto; margin-bottom: 1.35rem; }
.pie__lema {
  font-size: var(--t-sm);
  line-height: 1.65;
  color: var(--text-mid);
  max-width: 38ch;
  margin-bottom: 1.5rem;
}

/* Único canal social: WhatsApp, con el número a la vista */
.pie__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.15rem 0.7rem 0.85rem;
  background: var(--wa);
  color: var(--blanco);
  --ch: 8px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
  transition: background-color 0.25s var(--sal2), transform 0.25s var(--sal);
}
.pie__whatsapp:hover { background: var(--wa-hi); transform: translateY(-2px); }
.pie__whatsapp > i { font-size: 1.6rem; }
.pie__whatsapp span { display: block; }
.pie__whatsapp-k {
  font-family: var(--f-mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  opacity: 0.85;
}
.pie__whatsapp-v { font-size: var(--t-sm); font-weight: 700; line-height: 1.35; }

.pie__titulo {
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variation-settings: 'wdth' 87.5;
  color: var(--live);
  margin-bottom: 1.25rem;
}
.pie__lista { display: grid; gap: 0.7rem; }
.pie__lista li, .pie__lista a {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--text-mid);
  transition: color 0.2s var(--sal2);
}
.pie__lista a:hover { color: var(--live); }
.pie__lista--datos li { color: var(--text-mid); }

.pie__base {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.75rem;
  color: var(--text-low);
}
.pie__credito a {
  color: var(--text-mid);
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--sal2), border-color 0.2s var(--sal2);
}
.pie__credito a:hover { color: var(--live); border-color: var(--live); }

/* Botón flotante de WhatsApp */
.flotante {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-flotante);
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.75rem;
  color: var(--blanco);
  background: var(--wa);
  --ch: 10px;
  clip-path: polygon(
    var(--ch) 0, 100% 0,
    100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%,
    0 100%, 0 var(--ch)
  );
  transition: transform 0.3s var(--sal), background-color 0.25s var(--sal2);
}
.flotante:hover { background: var(--wa-hi); transform: scale(1.07); }

/* 20b. AJUSTES SOBRE FONTAWESOME ========================================= */

/* FontAwesome v7 declara `display` y `width: var(--fa-width, 1.25em)` sobre
   las clases .fa-*, y su hoja se carga después de esta. En las cajas de
   icono con medida fija hay que subir la especificidad, o quedan de 20px
   de ancho y se rompe el cuadrado. */
.canal > .canal__icono {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
}
.entregables__lista li > i { display: grid; width: 2.25rem; height: 2.25rem; }
.razones__lista li > i { width: 1.5rem; }
.servicio__intro > .servicio__icono { display: grid; width: 2.75rem; height: 2.75rem; }

/* 21. MOVIMIENTO ========================================================= */

/* El contenido es visible por defecto. La animación sólo se activa
   cuando hay JS, de modo que nunca queda una sección en blanco. */
.js .revelar {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--sal), transform 0.7s var(--sal);
}
.js .revelar.es-visible { opacity: 1; transform: none; }

/* Escalonado dentro de una misma lista */
.js .revelar[data-retraso='1'] { transition-delay: 0.07s; }
.js .revelar[data-retraso='2'] { transition-delay: 0.14s; }
.js .revelar[data-retraso='3'] { transition-delay: 0.21s; }
.js .revelar[data-retraso='4'] { transition-delay: 0.28s; }
.js .revelar[data-retraso='5'] { transition-delay: 0.35s; }

/* La barra del unifilar se energiza al entrar en pantalla */
.js .unifilar .uf-barra path {
  stroke-dasharray: 750;
  stroke-dashoffset: 750;
}
.js .unifilar.es-visible .uf-barra path {
  transition: stroke-dashoffset 1.1s var(--sal) 0.25s;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Sin desplazamiento: sólo un fundido inmediato */
  .js .revelar { opacity: 1; transform: none; }
  .js .unifilar .uf-barra path { stroke-dasharray: none; stroke-dashoffset: 0; }

  .tablero:hover .tablero__medio img,
  .proyecto:hover .proyecto__medio img,
  .sector:hover img,
  .nosotros__fotos figure:hover img { transform: none; }
}

/* Impresión: la ficha técnica y los datos de contacto deben salir legibles */
@media print {
  .cabecera, .flotante, .mapa, .hero__fondo, .forma, .saltar { display: none !important; }
  body { background: #fff; color: #000; }
  .titulo, .hero__titulo { color: #000; }
  .seccion, .plano { padding-block: 1.5rem; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 0.7em; }
}