/* ==========================================================================
   LN SERVICES INC — Mockup sitio corporativo (home)
   Estructura calcada del layout de referencia (iasaglobal.com/panama).
   TEMA CLARO: base blanco/gris claro; navy #011341 solo como acento
   estructural (navbar, hero, sección destacada, footer).
   Colores planos, esquinas 2-4px, sombras mínimas, bordes 1px.
   Tipografía: misma que iasaglobal.com/panama (referencia del cliente) —
   Oxanium (headings, kicker, stats, botones, wordmark) + Roboto (cuerpo).
   Google Fonts. Ver DECISIONS.md 2026-07-14.
   ========================================================================== */

:root{
  --navy: #011341;
  --navy-2: #04205e;
  --navy-3: #0a2f7a;
  --silver: #aeb7c4;
  --silver-light: #d7dce4;
  --off-white: #f4f6f9;
  --white: #ffffff;
  --ink: #1b2431;
  --text: #3c4658;
  --line: #dfe4ec;
  --line-dark: rgba(255,255,255,.14);
  --wa: #1fae5b;
  --orange: #f99b18;
  /* Naranja de marca sobre navy: 8.31:1. Sobre blanco solo da 2.16:1 (falla
     WCAG AA). Este tono más oscuro (misma familia) se usa en H2 sobre
     secciones blancas: 4.6:1 vs #fff, supera el 4.5:1 de AA para texto
     grande. Auditoría 2026-07-28. */
  --orange-a11y: #b85c00;

  --font: 'Roboto', Arial, sans-serif;
  --font-display: 'Oxanium', 'Roboto', Arial, sans-serif;

  --container: 1180px;
  --radius: 3px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html{ scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Encabezados requeridos para la jerarquía semántica (SEO/accesibilidad)
   pero sin equivalente visual en el diseño aprobado: se ocultan de la
   vista sin quitarlos del árbol de accesibilidad. */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body{
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4{ margin: 0 0 .5em; line-height: 1.15; font-family: var(--font-display); font-weight: 700; }
p{ margin: 0 0 1em; line-height: 1.65; color: var(--text); }

.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- reveal on scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].in-view{ opacity: 1; transform: translateY(0); }

/* ---------- buttons (rectangulares, planos) ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .9em 1.7em;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn-primary{ background: var(--white); color: var(--navy); }
.btn-primary:hover{ background: var(--silver-light); }

.btn-outline-navy{ background: transparent; border-color: var(--navy); color: var(--navy); }
.btn-outline-navy:hover{ background: var(--navy); color: var(--white); }

/* Hero slide 1 (split): primario naranja sólido + secundario outline blanco, ref. mockup aprobado */
.btn-orange{ background: var(--orange); border-color: var(--orange); color: var(--white); text-transform: uppercase; }
.btn-orange:hover{ background: #e08a0f; border-color: #e08a0f; }

.btn-outline-white{ background: transparent; border-color: rgba(255,255,255,.5); color: var(--white); text-transform: uppercase; }
.btn-outline-white:hover{ background: var(--white); border-color: var(--white); color: var(--navy); }

.btn-chevron{ transition: transform .3s var(--ease); }
.btn:hover .btn-chevron{ transform: translateX(4px); }

.btn-block{ width: 100%; }
.btn-lg{ padding: 1.05em 2em; font-size: 1rem; }

.btn-whatsapp{ background: var(--wa); color: var(--white); }
.btn-whatsapp:hover{ background: #188a48; }

/* El "Cotizar" del navbar usa .btn-quote-cta--nav (efecto ShiftUp unificado, confirmado por
   Oscar 2026-07-15; reemplaza al antiguo .btn-nav-cta verde WhatsApp). Los selectores llevan
   el elemento (a.nav-cta--desktop) para ganarle en cascada al display:inline-flex de
   .btn-quote-cta, declarado más abajo. */
a.nav-cta--desktop{ display: none; flex-shrink: 0; }

/* ---------- CTA principal "Cotiza tu proyecto" (hover ShiftUp, ref. iasaglobal.com/panama) ----------
   Estructura: <a class="btn-quote-cta"><span>Texto</span></a>
   - Fondo glass (translúcido + blur), sin borde, esquinas rectas (radius 0), acorde a "formas
     industriales" ya aprobado en el sitio (2026-07-13).
   - Barra de acento (::after del enlace) barre de 6px a 100% de ancho en hover: color plano,
     sin degradados.
   - Símbolo "+" armado con pseudo-elementos del span; gira -90deg en hover.
   - Variante por defecto (--dark) pensada para vivir sobre fondos navy/foto oscura (hero): el glass
     rgba(209,209,209,.25) sobre un fondo oscuro compone un panel translúcido OSCURO (25% de gris
     claro sobre foto+overlay navy), no uno claro, así que el texto en reposo va en blanco (legible
     sobre el glass oscuro) y pasa a navy en hover (legible sobre la barra plata --silver que llena
     el botón). Es lo opuesto al spec literal de IASA (que asume blanco solo en hover) pero es lo que
     exige la física real del contraste con estos colores — ver DECISIONS.md 2026-07-15. Variante
     --light (aún sin uso, dejada lista) para fondos claros: barra navy, ahí sí blanco en hover. */
.btn-quote-cta{
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  background: rgba(209, 209, 209, .25);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  border: none;
  border-radius: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 22px 28px;
  cursor: pointer;
  transition: color .2s ease-out;
}
.btn-quote-cta::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background-color: var(--silver);
  z-index: -1;
  transition: width .4s var(--ease);
}
.btn-quote-cta:hover::after,
.btn-quote-cta:focus-visible::after{
  width: 100%;
}
.btn-quote-cta:hover,
.btn-quote-cta:focus-visible{
  color: var(--navy);
}
.btn-quote-cta span{
  position: relative;
  display: flex;
  align-items: center;
  transform: translateX(3px);
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}
.btn-quote-cta:hover span,
.btn-quote-cta:focus-visible span{
  transform: translateX(0);
}
.btn-quote-cta span::before{
  content: "";
  position: relative;
  margin-right: 20px;
  width: 2px;
  height: 14px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}
.btn-quote-cta span::after{
  content: "";
  position: absolute;
  top: 6px;
  left: -6px;
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
}
.btn-quote-cta:hover span::before,
.btn-quote-cta:hover span::after,
.btn-quote-cta:focus-visible span::before,
.btn-quote-cta:focus-visible span::after{
  transform: rotate(-90deg);
}
/* Variante para fondo claro (lista para futuros usos de este mismo CTA fuera del hero) */
.btn-quote-cta--light{ background: rgba(1, 19, 65, .06); color: var(--navy); }
.btn-quote-cta--light::after{ background-color: var(--navy); }
.btn-quote-cta--light:hover,
.btn-quote-cta--light:focus-visible{ color: var(--white); }
/* Variante compacta para el "Cotizar" del navbar: el header es navy en las 4 páginas, así
   que usa la variante oscura por defecto, solo con padding/símbolo reducidos para caber en
   la barra y en el menú hamburguesa. */
.btn-quote-cta--nav{ padding: 8px 16px; font-size: .85rem; } /* 8px vert: cabe en el header de 74px */
.btn-quote-cta--nav span::before{ margin-right: 12px; height: 12px; }
.btn-quote-cta--nav span::after{ top: 5px; left: -5px; width: 12px; }
@media (max-width: 480px){
  .btn-quote-cta{ padding: 16px 20px; font-size: .88rem; }
  .btn-quote-cta span::before{ margin-right: 16px; }
}

/* ==========================================================================
   HEADER + DROPDOWN (navy)
   ========================================================================== */
/* Banda propia del header (ref. captura aprobada docs/feedback-hero-2026-07-25.png):
   fondo navy-2 plano (un paso más claro que el navy de la página, mismo tono de
   la paleta, sin inventar colores) + línea naranja fina en el borde inferior
   que cruza TODO el ancho. Ver DECISIONS.md 2026-07-25 (corrección). */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  padding: 19px 0;
  background: var(--navy-2);
  border-bottom: 2px solid var(--orange);
  transition: background-color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.scrolled{ padding: 11px 0; }
.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 28px; }

/* Header a ancho completo en desktop (ref. cliente iasaglobal.com/panama):
   logo casi al borde izquierdo, menú casi al borde derecho. Override solo
   del .container dentro del header — el .container global no se toca.
   Padding lateral escala 28px (900px) -> 36px (1920px+); en móvil el
   .header-inner conserva el padding normal de .container (20px). */
@media (min-width: 900px){
  .site-header .container{
    max-width: none;
    padding-left: clamp(28px, 1.25vw + 12px, 36px);
    padding-right: clamp(28px, 1.25vw + 12px, 36px);
  }
}

/* Lockup horizontal: monograma LN + wordmark al lado */
.brand{ display: flex; align-items: center; gap: 16px; padding-right: 10px; }
/* Separador vertical a la derecha del logo (ref. captura aprobada 2026-07-25):
   línea fina blanca translúcida, solo en desktop (en móvil el wordmark se
   oculta y el nav es hamburguesa). */
@media (min-width: 900px){
  .brand::after{
    content: '';
    display: block;
    width: 1px; height: 28px;
    background: rgba(255,255,255,.25);
    margin-left: 28px;
  }
}
/* Header compactado un 30% (feedback Oscar 2026-07-25): alto total 74px
   = padding 19x2 + logo 34 + borde 2 (antes 106px = 29x2 + 46 + 2). */
.brand-logo{ height: 34px; width: auto; transition: height .4s var(--ease); }
.site-header.scrolled .brand-logo{ height: 28px; }
.brand-wordmark{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--silver-light);
  white-space: nowrap;
  line-height: 1;
  padding-top: 4px;
}
@media (max-width: 560px){
  .brand-wordmark{ display: none; }
  .brand-logo{ height: 34px; }
}

.main-nav{ align-items: center; gap: 2px; }

.nav-item{ position: relative; }
.nav-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--white);
  padding: 8px 22px;
  line-height: 1.1; /* header compacto: que el alto lo dicte el logo (34px) */
  cursor: pointer;
  transition: color .3s;
}
.nav-link::after{
  content: '';
  position: absolute; left: 22px; right: 22px; bottom: 4px;
  height: 2px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-link:hover::after{ transform: scaleX(1); }

.dd-chevron{ transition: transform .3s var(--ease); }
.has-dropdown.is-open .dd-chevron,
.has-dropdown:hover .dd-chevron{ transform: rotate(180deg); }

.dropdown-panel{
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index: 10;
}
.dropdown-panel a{
  padding: 10px 14px;
  border-radius: 2px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy);
  transition: background-color .25s, color .25s;
}
.dropdown-panel a:hover{ background: var(--off-white); color: var(--navy-3); }
.dropdown-panel__all{
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 12px !important;
  color: var(--navy-3) !important;
  text-decoration: underline;
}

@media (hover: hover){
  .has-dropdown:hover .dropdown-panel{
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
}
.has-dropdown.is-open .dropdown-panel{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}

.nav-toggle{
  display: flex; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px; z-index: 210;
}
.nav-toggle span{ width: 26px; height: 2px; background: var(--white); transition: transform .3s var(--ease), opacity .3s var(--ease); }

.site-header.scrolled{
  background: var(--navy-2);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.site-header.menu-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .nav-toggle span:nth-child(2){ opacity: 0; }
.site-header.menu-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 900px){
  .main-nav{ display: flex; flex: 1; justify-content: center; }
  .main-nav .nav-cta--mobile{ display: none; }
  a.nav-cta--desktop{ display: inline-flex; }
  .nav-toggle{ display: none; }
}

@media (max-width: 899px){
  .main-nav{
    display: flex;
    position: fixed; inset: 0 0 auto 0; top: 0;
    background: var(--navy);
    flex-direction: column; align-items: stretch;
    padding: 84px 28px 40px;
    max-height: 100vh;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform .45s var(--ease);
  }
  .main-nav.open{ transform: translateY(0); }
  .main-nav .nav-link{ font-size: 1.15rem; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--line-dark); justify-content: space-between; }
  .nav-link::after{ display: none; }
  .nav-item{ width: 100%; }
  .dropdown-panel{
    position: static; transform: none; box-shadow: none; border: none; background: rgba(255,255,255,.04);
    max-height: 0; overflow: hidden; padding: 0; opacity: 1; visibility: visible; pointer-events: auto;
    transition: max-height .35s var(--ease), padding .35s var(--ease);
  }
  .has-dropdown.is-open .dropdown-panel{ max-height: 460px; padding: 8px; }
  /* BUG FIX (reporte de Oscar, 2026-07-16): en móvil, el submenú "Servicios"
     mostraba los textos de los ítems cortados por la izquierda (más de la
     mitad oculta). Causa raíz: la regla ".has-dropdown.is-open .dropdown-panel"
     de escritorio (línea ~322, FUERA de cualquier media query) aplica
     "transform: translateX(-50%) translateY(0)" para centrar el panel
     absolutamente posicionado bajo el botón "Servicios" (contrarresta su
     "left: 50%"). Esa regla tiene especificidad (0,0,3,0) — 3 clases — más
     alta que la regla móvil ".dropdown-panel{ transform: none }" de arriba
     (0,0,1,0, 1 clase), así que ganaba la cascada también en móvil pese a
     estar pensada solo para el panel de escritorio. Como en móvil el panel
     es "position: static" (no "absolute"), el "translateX(-50%)" seguía
     desplazando visualmente todo el panel un 50% de su propio ancho hacia
     la izquierda (con el panel a ~334px de ancho, esto lo movía -167px,
     dejando buena parte del panel y de cada enlace fuera del viewport por
     la izquierda) — de ahí el texto "cortado". Fix: se neutraliza el
     transform en el estado abierto también en móvil, con la misma
     especificidad (0,0,3,0) y declarada después en el archivo, para que
     gane sin afectar el comportamiento de escritorio (esa regla sigue
     intacta fuera de esta media query). */
  .has-dropdown.is-open .dropdown-panel{ transform: none; }
  .dropdown-panel a{ color: var(--silver-light); }
  .dropdown-panel a:hover{ background: rgba(255,255,255,.06); color: var(--white); }
  /* BUG FIX (reporte de Oscar, 2026-07-15): ".dropdown-panel__all" ("Ver todos
     los servicios") trae "color: var(--navy-3) !important" (línea ~305, pensado
     para el panel BLANCO de escritorio). En el menú hamburguesa móvil el fondo
     del panel es oscuro (rgba(255,255,255,.04) sobre --navy), así que ese
     !important dejaba el enlace en navy oscuro sobre navy oscuro: contraste
     ~1.4:1, prácticamente ilegible, tanto en reposo como en hover (el hover
     solo aclara el fondo un poco, rgba(255,255,255,.06), pero el texto seguía
     forzado a navy-3). Se sobreescribe aquí con selectores igual de
     específicos + !important (ganan por ser declarados después en la cascada)
     para que el enlace use los mismos colores claros que el resto del submenú.
     Los otros 6 enlaces del dropdown nunca tuvieron este problema: no llevan
     !important, así que la regla móvil de la línea de arriba ya los pintaba
     bien (--silver-light sobre fondo oscuro). */
  .dropdown-panel__all{ color: var(--silver-light) !important; border-top-color: var(--line-dark); }
  .dropdown-panel__all:hover{ color: var(--white) !important; }
  .main-nav .btn-quote-cta--nav{ margin-top: 22px; align-self: flex-start; }
}

/* ==========================================================================
   HERO CINEMATIC — canvas full-screen, 240 frames scroll-driven
   Técnica heredada del hero de zippyttech.com (canvas + precarga progresiva +
   textos en secuencia con el scroll), adaptada a la marca LN Services:
   colores planos (navy/naranja/blanco), sin degradados/glows. Reemplaza el
   antiguo hero-slider (carrusel de 3 slides). Ver DECISIONS.md.
   ========================================================================== */
.hero-cinematic{
  position: relative;
  height: 460vh;
  background: var(--navy);
}
@media (max-width: 768px){
  .hero-cinematic{ height: 300vh; }
}

/* Sticky stage: ocupa todo el viewport mientras dura el scroll */
.hero-cinematic-stage{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  background: var(--navy); /* fondo de marca detrás del canvas mientras carga */
}

.cinema-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* ---- Brackets HUD en las 4 esquinas: acento tipo "plano técnico", líneas
   planas sin blur/glow (coherente con la sección "Planos de ingeniería"). ---- */
.hud-bracket{ position: absolute; width: 20px; height: 20px; pointer-events: none; color: rgba(255,255,255,.32); z-index: 5; }
.hud-bracket::before,
.hud-bracket::after{ content: ''; position: absolute; background: currentColor; }
.hud-bracket::before{ width: 1px; height: 100%; }
.hud-bracket::after{ width: 100%; height: 1px; }
.hud-bracket.tl{ top: 90px; left: 16px; }
.hud-bracket.tl::before{ left: 0; top: 0; }
.hud-bracket.tl::after{ left: 0; top: 0; }
.hud-bracket.tr{ top: 90px; right: 16px; }
.hud-bracket.tr::before{ right: 0; top: 0; }
.hud-bracket.tr::after{ right: 0; top: 0; }
.hud-bracket.bl{ bottom: 16px; left: 16px; }
.hud-bracket.bl::before{ left: 0; bottom: 0; }
.hud-bracket.bl::after{ left: 0; bottom: 0; }
.hud-bracket.br{ bottom: 16px; right: 16px; }
.hud-bracket.br::before{ right: 0; bottom: 0; }
.hud-bracket.br::after{ right: 0; bottom: 0; }
@media (min-width: 900px){
  .hud-bracket.tl, .hud-bracket.tr{ top: 108px; }
}

/* ---- Barra de progreso + hint de scroll, justo bajo el header fijo (74px) ---- */
.cinema-topbar{ position: absolute; top: 74px; left: 0; right: 0; z-index: 8; pointer-events: none; }
.cinema-progress-track{ height: 2px; background: rgba(255,255,255,.16); }
.cinema-progress-fill{ height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--orange); }
.cinema-scroll-hint{
  position: absolute; top: 84px; right: 16px; z-index: 8;
  font-family: var(--font-display); font-weight: 700; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6);
  pointer-events: none;
}
@media (min-width: 900px){ .cinema-scroll-hint{ top: 104px; right: 40px; } }

/* ---- Overlay 1: panel persistente con el H1 del sitio (SEO), kicker, CTAs
   y sellos de confianza. Fondo navy plano (sin blur) para legibilidad sobre
   la fotografía; se retira temprano (ver JS) para dar paso al overlay 2. ---- */
.cinema-hero-panel{
  position: absolute;
  z-index: 10;
  left: 0; right: 0; bottom: 0;
  /* padding-bottom 92px (no 26px): por debajo de 900px el panel es un
     "bottom sheet" a todo el ancho, así que su última fila (sellos de
     confianza) cae justo en la esquina inferior derecha -- la misma que
     ocupa el botón flotante de WhatsApp (.whatsapp-float, fixed, 58px,
     22px de margen, z-index 150). Sin este respiro el texto "Soporte 24/7"
     queda tapado por el botón (confirmado en captura real de pantalla,
     390x844). Ver DECISIONS.md. */
  padding: 24px 20px 92px;
  background: rgba(1, 19, 65, .92);
  border-top: 2px solid var(--orange);
  max-height: 78vh;
  overflow-y: auto;
}
@media (min-width: 640px){
  .cinema-hero-panel{ padding: 28px 34px 96px; }
}
@media (min-width: 900px){
  .cinema-hero-panel{
    left: 40px; right: auto; bottom: 64px;
    max-width: 460px;
    /* Desde 900px el panel es una tarjeta angosta anclada a la izquierda
       (bottom:64px, max-width:460px) -- lejos de la esquina del WhatsApp
       flotante, así que el padding-bottom vuelve a lo normal. */
    padding-bottom: 30px;
    border-top: none;
    border-left: 3px solid var(--orange);
    max-height: calc(100vh - 180px);
  }
}

/* ---- Overlay 2: 2 mensajes en secuencia con el scroll (contenido de los
   antiguos slides 2 y 3, incluida su CTA). ---- */
.cinema-big-panel{
  position: absolute;
  z-index: 9;
  left: 0; right: 0; top: 116px;
}
@media (min-width: 900px){
  .cinema-big-panel{ left: auto; right: 40px; top: 120px; max-width: 440px; }
}
.cinema-big-slides-wrap{ display: grid; }
/* El fondo/borde vive en CADA slide (no en .cinema-big-panel): si viviera en
   el contenedor se vería una caja navy vacía flotando antes/después de que
   cualquier mensaje esté activo (bug real, encontrado en captura real de
   pantalla -- ver DECISIONS.md). Así el panel solo "existe" visualmente
   cuando hay un mensaje activo. */
.cinema-big-slide{
  grid-area: 1 / 1;            /* se solapan; el JS activa uno a la vez */
  padding: 20px 20px 22px;
  background: rgba(1, 19, 65, .92);
  border-bottom: 2px solid var(--orange);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
@media (min-width: 900px){
  .cinema-big-slide{
    padding: 26px 30px 28px;
    border-bottom: none;
    border-right: 3px solid var(--orange);
  }
}
.cinema-big-slide.is-active{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.cinema-big-tag{
  font-family: var(--font-display); font-weight: 700; font-size: .76rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--orange);
  margin: 0 0 10px;
}
.cinema-big-title{
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--white); font-size: clamp(1.2rem, 2.1vw, 1.7rem);
  line-height: 1.2; letter-spacing: -.01em; margin: 0 0 10px;
}
.cinema-big-title em{ font-style: normal; color: var(--orange); }
.cinema-big-desc{ color: var(--silver-light); font-size: .9rem; line-height: 1.55; margin: 0; max-width: 42ch; }
.cinema-big-slide .btn-quote-cta{ margin-top: 16px; padding: 14px 20px; font-size: .82rem; }

/* Movimiento reducido: sin animación de scroll -- se listan los 2 mensajes
   completos, uno debajo del otro, siempre visibles (ver también el JS:
   dibuja el último frame fijo y no anima el canvas). */
@media (prefers-reduced-motion: reduce){
  .cinema-big-slides-wrap{ display: block; }
  .cinema-big-slide{
    position: static;
    opacity: 1 !important;
    transform: none !important;
    transition: none;
    pointer-events: auto;
    margin-bottom: 22px;
  }
  .cinema-big-slide:last-child{ margin-bottom: 0; }
}

/* ---- Loader inicial mientras precargan los frames ---- */
.cinema-loader{
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--navy);
  transition: opacity .5s ease, visibility 0s .5s;
}
.cinema-loader.is-hidden{ opacity: 0; visibility: hidden; }
.cinema-loader-eyebrow{
  font-family: var(--font-display); font-weight: 700; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange);
}
.cinema-loader-bar{ width: 220px; height: 2px; background: rgba(255,255,255,.16); }
.cinema-loader-fill{ height: 100%; width: 0%; background: var(--orange); transition: width .15s ease-out; }
.cinema-loader-meta{
  font-family: var(--font); font-size: .8rem; letter-spacing: .04em; color: var(--silver-light);
}
/* Mientras el loader del hero cinematic está visible, se bloquea el scroll
   de toda la página (mismo patrón que .plano-lightbox-open):
   evita que el usuario haga scroll hacia frames que aún no cargaron y "vea
   pegada" la animación. Se libera apenas terminan de cargar todos los
   frames efectivos (o por el timeout de seguridad de 45s). Ver DECISIONS.md. */
body.cinema-loading-lock{ overflow: hidden; }

/* ---- Estilos de texto del overlay 1 (H1/kicker/CTAs/sellos), reutilizados
   dentro de .cinema-hero-panel -- único lugar donde se usan hoy. ---- */
.hero-split-kicker{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  margin: 0;
}
.hero-split-kicker .text-orange{ color: var(--orange); }
.hero-split-kicker-underline{
  display: block;
  width: 46px; height: 3px;
  background: var(--orange);
  margin: .8rem 0 1.2rem;
}

.hero-split-title{
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  /* Tamaño recalculado para el panel angosto del hero cinematic (antes vivía
     en una columna de ancho completo con clamp hasta 5.6rem + scaleX(.88));
     ahora el título comparte panel con CTAs y sellos, así que se achica y
     se deja de comprimir horizontalmente. Ver DECISIONS.md. */
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: .98;
  letter-spacing: -.01em;
  margin: 0;
}

.hero-split-line{
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 1.1rem;
  margin: .8rem 0 0;
}

.hero-split-sub{
  color: var(--silver-light);
  font-size: .96rem;
  max-width: 420px;
  margin: 1em 0 0;
}

.hero-split-ctas{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Sellos de confianza: grid 2x2 fijo (el panel del hero cinematic es angosto
   en cualquier viewport, a diferencia de la columna de ancho completo que
   tenía el slide 1 original). */
.hero-trust-row{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.hero-trust-item{ display: flex; align-items: center; gap: 8px; }
.hero-trust-text{
  display: flex; flex-direction: column;
  font-size: .72rem; color: var(--silver-light); font-weight: 500; line-height: 1.3;
}
.hero-trust-text strong{
  color: var(--white);
  font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .01em;
  text-transform: uppercase;
}
.hero-trust-icon{ flex: 0 0 auto; width: 24px; height: 24px; color: var(--white); }

/* ==========================================================================
   SECTIONS — genéricos (tema claro)
   ========================================================================== */
.section{ padding: 90px 0; }
.section--white{ background: var(--white); }
.section--muted{ background: var(--off-white); }
.section--dark{ background: var(--navy); }

/* Título de sección alineado a la izquierda con regla corta (estilo IASA) */
.section-head{
  max-width: 640px;
  margin: 0 0 2.8rem;
  text-align: left;
}
.section-head h2{
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .01em;
  padding-bottom: .55em;
  position: relative;
}
.section-head h2::after{
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  background: var(--navy);
}
.section-head--dark h2::after{ background: var(--white); }
.h2--light{ color: var(--white) !important; }
.section-sub{ font-size: 1rem; margin-top: 1em; }

/* ==========================================================================
   SERVICIOS (claro)
   ========================================================================== */
.services-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start; /* alturas naturales, no todas iguales */
}
@media (min-width: 680px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px){ .services-grid{ grid-template-columns: repeat(3, 1fr); } }

.service-card{
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.service-card:hover{ border-color: var(--navy); transform: translateY(-4px); }

.service-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: var(--radius);
  background: var(--off-white); color: var(--navy);
  margin-bottom: 1.1rem;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.service-icon svg{ width: 28px; height: 28px; }
.service-card:hover .service-icon{ background: var(--navy); color: var(--white); }

.service-card h3{ font-size: 1.04rem; color: var(--navy); }
.service-card p{ font-size: .92rem; }

/* ==========================================================================
   SERVICIOS — rediseño home (ref. mockup de Oscar 2026-07-22)
   Grid de 6 tarjetas, 2 columnas x 3 filas en desktop, 1 columna en mobile.
   Namespace "svc-" DELIBERADO y separado de .services-grid/.service-card/
   .service-icon de arriba: esas clases las sigue usando "Diferenciales" en
   nosotros.html (icono+título+texto, sin foto) y NO se tocan aquí para no
   romper esa sección. Ver DECISIONS.md.
   ========================================================================== */
.svc-section .section-head{ margin-bottom: 2.4rem; }

.svc-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
@media (min-width: 900px){ .svc-grid{ grid-template-columns: 1fr 1fr; gap: 26px; } }

.svc-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(3,20,60,.07);
  transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.svc-card:hover{ box-shadow: 0 20px 42px rgba(3,20,60,.14); transform: translateY(-5px); }
@media (min-width: 700px){ .svc-card{ flex-direction: row; } }

.svc-card-content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 22px;
  min-width: 0;
}
@media (min-width: 700px){
  .svc-card-content{ flex: 0 0 56%; max-width: 56%; flex-direction: row; gap: 16px; padding: 28px 24px; }
}

.svc-card-side{
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
}
@media (min-width: 700px){
  .svc-card-side{ flex-direction: column; align-items: flex-start; justify-content: space-between; }
}

.svc-hex{
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 58px; height: 58px;
  background: var(--navy);
  color: var(--orange);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  transition: transform .35s var(--ease);
}
.svc-hex svg{ width: 27px; height: 27px; }
.svc-card:hover .svc-hex{ transform: scale(1.08) rotate(6deg); }

.svc-more{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--navy); color: var(--white);
  padding: .6em 1.05em; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .01em; white-space: nowrap;
  transition: background-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
@media (min-width: 700px){ .svc-more{ margin-top: 18px; } }
.svc-more svg{ color: var(--orange); flex: 0 0 auto; transition: transform .3s var(--ease); }
.svc-more:hover{ background: var(--navy-2); box-shadow: 0 8px 18px rgba(1,19,65,.24); }
.svc-more:hover svg, .svc-card:hover .svc-more svg{ transform: translateX(4px); }

.svc-card-main{ position: relative; min-width: 0; padding-top: 6px; }
.svc-num{
  position: absolute;
  left: 0; top: -14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4rem; line-height: 1;
  color: rgba(1, 19, 65, .08);
  user-select: none;
  z-index: 0;
}
.svc-card-main h3{
  position: relative; z-index: 1;
  font-size: 1.06rem;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-top: 1.5rem;
  margin-bottom: .5rem;
}
.svc-card-main p{ position: relative; z-index: 1; font-size: .9rem; margin-bottom: 0; }

.svc-card-photo{
  position: relative;
  flex: 1 1 auto;
  min-height: 190px;
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 700px){ .svc-card-photo{ flex: 0 0 44%; max-width: 44%; min-height: 0; } }
.svc-card-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.svc-card:hover .svc-card-photo img{ transform: scale(1.07); }
@media (min-width: 700px){
  .svc-card-photo img{ clip-path: polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
.svc-card-photo::after{
  content: '';
  position: absolute; right: 0; bottom: 0;
  width: 46px; height: 46px;
  background: var(--orange);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

/* ==========================================================================
   EQUIPOS QUE ATENDEMOS (claro, grilla centrada)
   ========================================================================== */
.equipos-section{ padding-bottom: 70px; }

.equipos-carousel{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  padding: 6px 0;
}

.equipo-card{
  flex: 0 0 180px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 18px;
  text-align: center;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.equipo-card:hover{ border-color: var(--navy); transform: translateY(-4px); }
.equipo-icon{ display: inline-flex; color: var(--navy); margin-bottom: 14px; }
.equipo-icon svg{ width: 40px; height: 40px; }
.equipo-card p{ color: var(--ink); font-size: .86rem; font-weight: 600; margin-bottom: 0; }

@media (max-width: 479px){
  .equipo-card{ flex: 0 0 calc(50% - 8px); padding: 20px 10px; }
  .equipo-icon svg{ width: 34px; height: 34px; }
  .equipo-card p{ font-size: .8rem; }
}

.carousel-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  align-items: center; justify-content: center;
  cursor: pointer; z-index: 3;
  display: none;
  transition: border-color .3s, background-color .3s;
}
.carousel-arrow:hover{ border-color: var(--navy); }
.carousel-arrow--prev{ left: 0; }
.carousel-arrow--next{ right: 0; }
@media (min-width: 760px){ .carousel-arrow{ display: flex; } }

/* ==========================================================================
   TALLERES (claro, asimétrico: texto izq + visual der)
   ========================================================================== */
.talleres-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: center;
}
@media (min-width: 960px){ .talleres-grid{ grid-template-columns: 1.15fr .85fr; } }

.talleres-text .section-head{ margin-bottom: 1.6rem; }
.talleres-text p{ font-size: 1rem; max-width: 560px; }

.talleres-datos{
  margin: 1.2rem 0 1.8rem;
  border-left: 3px solid var(--navy);
  padding-left: 18px;
}
.talleres-datos li{
  font-size: .92rem;
  color: var(--text);
  margin-bottom: 8px;
}

.talleres-acciones{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.talleres-acciones .btn{ font-size: .9rem; }

.talleres-visuals{
  display: block;
}
.talleres-visual{
  aspect-ratio: 1;
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.talleres-visual--main{
  aspect-ratio: 1 / 1;
}

.talleres-visual--map{ padding: 0; overflow: hidden; }
.talleres-visual--map:hover{ background: var(--off-white); border-color: var(--line); }
.talleres-visual--map iframe{ width: 100%; height: 100%; min-height: 220px; border: 0; display: block; }
@media (max-width: 560px){ .talleres-visual--map iframe{ min-height: 260px; } }

/* ==========================================================================
   NUESTRO TRABAJO (claro, reels de video real del taller)
   Reutilizado también dentro de servicios.html (variante compacta .reel-card--sm)
   ========================================================================== */
.trabajo-section{ padding-bottom: 70px; }

/* Frame del slider centrado en la página (igual max-width que .container);
   a partir de 760px se reservan gutters laterales para las flechas, que
   quedan fuera de la fila de videos en vez de flotar sobre el borde de la
   pantalla. Ver DECISIONS.md. */
.reels-wrap{ position: relative; max-width: var(--container); margin: 10px auto 0; }
@media (min-width: 760px){ .reels-wrap{ padding: 0 54px; } }

.reels-carousel{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 20px 24px;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) transparent;
}
@media (min-width: 760px){ .reels-carousel{ padding: 6px 4px 24px; } }
.reels-carousel::-webkit-scrollbar{ height: 6px; }
.reels-carousel::-webkit-scrollbar-thumb{ background: var(--silver); border-radius: 3px; }

.reel-card{
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 420px;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  transition: border-color .3s var(--ease);
}
.reel-card:hover{ border-color: var(--navy); }
@media (min-width: 640px){ .reel-card{ height: 460px; } }
@media (min-width: 960px){ .reel-card{ height: 480px; } }

.reel-video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
}

/* Poster propio con <img loading="lazy"> en vez del atributo poster de <video>
   (que el navegador siempre carga de forma eager, sin respetar preload/lazy).
   Se apila encima del <video> y se oculta al reproducir. Ver DECISIONS.md. */
.reel-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.reel-card.is-playing .reel-poster{ display: none; }

.reel-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
  z-index: 3;
}
.reel-play svg{ margin-left: 3px; }
.reel-play:hover{ background: var(--navy-2); transform: translate(-50%, -50%) scale(1.08); }
.reel-card.is-playing .reel-play{ display: none; }

.reel-badge{
  position: absolute; top: 12px; left: 12px;
  background: var(--navy);
  color: var(--white);
  font-size: .64rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px;
  z-index: 2;
}
.reel-card.is-playing .reel-badge{ display: none; }

.reel-label{
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(1, 19, 65, .82);
  color: var(--white);
  font-family: var(--font-display); font-weight: 600;
  font-size: .82rem;
  padding: 10px 12px;
  z-index: 2;
}
.reel-card.is-playing .reel-label{ display: none; }

/* Variante compacta embebida dentro de un artículo de servicio (servicios.html) */
.service-reels{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 12px;
  margin-top: 1.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--silver) transparent;
}
.service-reels::-webkit-scrollbar{ height: 6px; }
.service-reels::-webkit-scrollbar-thumb{ background: var(--silver); border-radius: 3px; }

.reel-card--sm{ height: 230px; }
@media (min-width: 640px){ .reel-card--sm{ height: 270px; } }

/* ==========================================================================
   DESTACADO (navy: tabs + stats)
   ========================================================================== */
.featured-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 960px){ .featured-grid{ grid-template-columns: 1fr 1.05fr; } }

.featured-visual{
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  padding: 24px;
}
.featured-visual svg{ width: 100%; height: auto; }

.featured-content .section-head{ margin-bottom: 1.6rem; }
.featured-content p{ color: var(--silver-light); }

.tabs-nav{
  display: flex; gap: 6px; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line-dark);
}
.tab-btn{
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: .88rem;
  color: var(--silver);
  padding: 10px 4px; margin-right: 22px;
  position: relative;
  transition: color .3s;
}
.tab-btn::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--white);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.tab-btn.is-active{ color: var(--white); }
.tab-btn.is-active::after{ transform: scaleX(1); }

.tab-panel{ display: none; }
.tab-panel.is-active{ display: block; animation: fadeInTab .5s var(--ease); }
@keyframes fadeInTab{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }

.featured-stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 2rem;
}
@media (min-width: 560px){ .featured-stats{ grid-template-columns: repeat(4, 1fr); } }

.fstat{ text-align: left; border-left: 3px solid var(--white); padding-left: 14px; }
.stat-number{ display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 700; color: var(--white); }
.stat-number--static{ color: var(--white); }
.stat-label{ display: block; font-size: .74rem; color: var(--silver-light); letter-spacing: .02em; margin-top: .2em; }

/* ---------- Planos técnicos reales (dentro de RECONSTRUCCIÓN, navy) ---------- */
.planos-block{
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--line-dark);
}
.planos-head{ max-width: 640px; margin-bottom: 26px; }
.planos-title{ color: var(--white); font-size: clamp(1.25rem, 2.4vw, 1.5rem); margin-bottom: .5em; }
.planos-sub{ color: var(--silver-light); font-size: .92rem; margin: 0; }

.planos-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 620px){ .planos-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .planos-grid{ grid-template-columns: repeat(3, 1fr); } }

.plano-card{ display: flex; flex-direction: column; }

.plano-trigger{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 280px;
  padding: 16px;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: var(--white);
  cursor: zoom-in;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.plano-trigger:hover, .plano-trigger:focus-visible{
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.plano-trigger img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.plano-zoom{
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.plano-label{
  display: block;
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--white);
}
.plano-label em{
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: .82rem;
  color: var(--silver-light);
  margin-top: 2px;
}

@media (max-width: 599px){
  .plano-trigger{ height: 240px; }
}

/* ==========================================================================
   LIGHTBOX — Planos técnicos (zoom/pan)
   ========================================================================== */
.plano-lightbox-overlay{
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: rgba(2, 8, 24, .86);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.plano-lightbox-overlay.is-visible{ opacity: 1; }
.plano-lightbox-overlay[hidden]{ display: none; }

.plano-lightbox{
  position: relative;
  width: 100%;
  max-width: 1240px;
  height: min(92vh, 1100px);
  background: var(--navy);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(.96);
  transition: transform .35s var(--ease);
}
.plano-lightbox-overlay.is-visible .plano-lightbox{ transform: scale(1); }

.plano-lightbox__bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-dark);
}
.plano-lightbox__caption{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  color: var(--white);
}
.plano-lightbox__actions{ display: flex; gap: 8px; }
.plano-lightbox__btn{
  width: 36px; height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--line-dark);
  background: transparent;
  color: var(--silver-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.plano-lightbox__btn:hover{ background: rgba(255,255,255,.1); color: var(--white); }

.plano-lightbox__viewport{
  position: relative;
  flex: 1 1 auto;
  overflow: auto;
  background: var(--off-white);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.plano-lightbox__viewport.is-panning{ cursor: grabbing; }

.plano-lightbox__img{
  display: block;
  max-width: none;
  transform-origin: 0 0;
  -webkit-user-drag: none;
}

.plano-lightbox__hint{
  margin: 0;
  padding: 8px 16px 12px;
  text-align: center;
  font-size: .76rem;
  color: var(--silver);
}
@media (max-width: 599px){
  .plano-lightbox__hint{ display: none; }
  .plano-lightbox__caption{ font-size: .82rem; }
}

body.plano-lightbox-open{ overflow: hidden; }

/* ==========================================================================
   MODAL — Logo de cliente ampliado (más simple que el lightbox de planos:
   son imágenes de marca, no dibujos técnicos, no hace falta zoom/pan)
   ========================================================================== */
.cliente-lightbox-overlay{
  position: fixed; inset: 0;
  z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 24, .86);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.cliente-lightbox-overlay.is-visible{ opacity: 1; }
.cliente-lightbox-overlay[hidden]{ display: none; }

.cliente-lightbox{
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 56px 40px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  transform: scale(.96);
  transition: transform .35s var(--ease);
}
.cliente-lightbox-overlay.is-visible .cliente-lightbox{ transform: scale(1); }

.cliente-lightbox__close{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.cliente-lightbox__close:hover{ background: var(--off-white); color: var(--orange); }

.cliente-lightbox__img{
  display: block;
  max-width: 100%;
  max-height: 58vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cliente-lightbox__caption{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
}

body.cliente-lightbox-open{ overflow: hidden; }

@media (max-width: 599px){
  .cliente-lightbox{ padding: 48px 22px 24px; }
  .cliente-lightbox__img{ max-height: 44vh; }
}

/* ==========================================================================
   SECTORES (cabecera con foto + grilla 2x2 de tarjetas con foto lateral)
   ========================================================================== */
.sectores-section{ overflow: hidden; }

/* ---- cabecera: texto izq + foto grande der ---- */
.sectores-head{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 56px;
}
@media (min-width: 900px){ .sectores-head{ grid-template-columns: 1.05fr 1fr; } }

.sectores-title{
  font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.05;
  color: var(--navy);
  text-transform: uppercase;
  margin: 0;
}
.sectores-title .text-orange{ color: var(--orange-a11y); }
.sectores-underline{
  display: block;
  width: 64px; height: 4px;
  background: var(--orange);
  margin: 1rem 0 1.1rem;
}
.sectores-head-text .section-sub{ margin-top: 0; max-width: 46ch; }

.sectores-dots{
  display: none;
  position: absolute;
  top: -30px; left: 44%;
  width: 90px; height: 66px;
  background-image: radial-gradient(circle, var(--line) 1.6px, transparent 1.6px);
  background-size: 12px 12px;
  opacity: .9;
  pointer-events: none;
}
@media (min-width: 900px){ .sectores-dots{ display: block; } }

.sectores-head-photo{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy);
  aspect-ratio: 16 / 9;
}
.sectores-head-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.sectores-head-photo::after{
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 16px;
  background: var(--orange);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}
@media (max-width: 899px){ .sectores-dots{ display: none; } }

/* ---- grilla 2x2 de tarjetas ---- */
.sectores-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px){ .sectores-grid{ grid-template-columns: 1fr 1fr; } }

.sector-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(3,20,60,.06);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.sector-card:hover{ box-shadow: 0 16px 36px rgba(3,20,60,.12); transform: translateY(-4px); }
@media (min-width: 560px){ .sector-card{ flex-direction: row; } }

.sector-card-body{ flex: 1 1 auto; padding: 30px 26px; min-width: 0; }
@media (min-width: 560px){ .sector-card-body{ flex: 0 0 58%; max-width: 58%; } }

.sector-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: var(--navy);
  color: var(--white);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
  margin-bottom: 1rem;
}
.sector-icon svg{ width: 28px; height: 28px; }

.sector-card h3{ font-size: 1.06rem; color: var(--navy); margin-bottom: 0; }
.sector-underline{
  display: block;
  width: 40px; height: 3px;
  background: var(--orange);
  margin: .7rem 0 1rem;
}
.sector-desc{ font-size: .9rem; margin-bottom: 1rem; }

.sector-bullets{ margin: 0; }
.sector-bullets li{
  font-size: .88rem; color: var(--text); font-weight: 500;
  padding-left: 28px; position: relative; margin-bottom: 10px;
  display: flex; align-items: center; min-height: 20px;
}
.sector-bullets li:last-child{ margin-bottom: 0; }
.sector-bullets li::before{
  content: ''; position: absolute; left: 0; top: 1px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--navy);
}
.sector-bullets li::after{
  content: '';
  position: absolute; left: 5px; top: 6px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-48deg);
}

.sector-card-photo{
  position: relative;
  flex: 1 1 auto;
  min-height: 190px;
  overflow: hidden;
  background: var(--navy);
}
@media (min-width: 560px){
  .sector-card-photo{ flex: 0 0 42%; max-width: 42%; }
}
.sector-card-photo img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (min-width: 560px){
  .sector-card-photo img{ clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 4% 100%); }
}
.sector-card-photo::after{
  content: '';
  position: absolute; right: 0; bottom: 0;
  width: 40px; height: 40px;
  background: var(--orange);
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

/* ==========================================================================
   CLIENTES (carrusel infinito de logos, ref. matresapanama.com)
   Para agregar/quitar un logo: edita las 2 tandas de <li> en index.html
   (la 2a tanda es la copia aria-hidden que hace el loop) y actualiza
   --clientes-count aquí abajo con el número de logos ÚNICOS (no el total
   con la copia). El resto del cálculo del loop es automático.
   ========================================================================== */
.clientes-section{ overflow: hidden; }
.clientes-section .section-head{ margin-bottom: 2.4rem; }
.clientes-section .section-head .text-orange{ color: var(--orange-a11y); }
/* "LN Services" no debe partirse en dos líneas (pedido de Oscar); el nowrap
   abarca solo esa frase, no el título completo, para que siga envolviendo
   bien en móvil. Se mantiene aunque ahora el h2 completo también es nowrap
   (ver bloque de abajo): es inofensivo y sirve de respaldo si algún día el
   nowrap del h2 completo se quita. */
.clientes-section .section-head h2 .ln-nowrap{ white-space: nowrap; }

/* Título y subtítulo de "Clientes" completos en una sola línea (pedido de
   Oscar, 2026-07-25). Se quita el max-width de 640px que hereda de
   .section-head (pensado para texto que envuelve en 2+ líneas) y se fuerza
   nowrap con font-size fluido (clamp con vw) para que la frase completa
   quepa sin overflow horizontal en cualquier ancho, incluida una pantalla
   angosta de 390px. Los valores de la fórmula se midieron con Puppeteer
   contra el ancho real disponible del contenedor en cada viewport (ver
   DECISIONS.md) -- no son un clamp() genérico. */
.clientes-section .section-head{ max-width: none; }
.clientes-section .section-head h2{
  white-space: nowrap;
  font-size: clamp(0.85rem, calc(4.41vw - 1.764px), 2.1rem);
}
/* El párrafo es mucho más largo que el título; por debajo de 660px de ancho
   de viewport ya no cabe en una línea con un tamaño legible (el piso de la
   fórmula, 0.85rem, empieza a quedar más justo que el ancho disponible),
   así que ahí se abandona el nowrap y vuelve a envolver en 2-3 líneas con
   su tamaño normal (1rem), en vez de forzar una letra ilegible. A 660px+,
   nowrap + clamp (fórmula medida con Puppeteer contra el ancho real del
   contenedor, con margen de seguridad; ver DECISIONS.md). */
.clientes-section .section-head .section-sub{
  white-space: nowrap;
  max-width: none;
  font-size: clamp(0.85rem, calc(1.95vw - 0.78px), 1rem);
}
@media (max-width: 660px){
  .clientes-section .section-head .section-sub{
    white-space: normal;
    font-size: 1rem;
  }
}

.clientes-marquee{
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}

.clientes-track{
  --clientes-count: 14; /* cantidad de logos ÚNICOS (sin contar la copia del loop) */
  --card-w: 226px;
  --card-h: 138px;
  --card-gap: 28px;
  display: flex;
  align-items: stretch;
  gap: var(--card-gap);
  width: max-content;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  animation: clientesScroll 34s linear infinite;
  will-change: transform;
}
.clientes-marquee:hover .clientes-track{ animation-play-state: paused; }

@keyframes clientesScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-1 * var(--clientes-count) * (var(--card-w) + var(--card-gap)))); }
}

.cliente-card{
  flex: 0 0 auto;
  width: var(--card-w);
  height: var(--card-h);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(1,19,65,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 26px;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.cliente-card img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Tarjeta clicable: abre el logo en grande. Affordance sutil (borde+sombra+
   leve elevación) al hover/focus, sin degradados. */
.cliente-card-btn{
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.cliente-card-btn:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 8px; }
.cliente-card:hover, .cliente-card:focus-within{
  border-color: var(--orange);
  box-shadow: 0 12px 26px rgba(1,19,65,.14);
  transform: translateY(-3px);
}

@media (max-width: 599px){
  .clientes-track{ --card-w: 150px; --card-h: 96px; --card-gap: 16px; }
  .cliente-card{ border-radius: 12px; padding: 14px 16px; }
  .clientes-marquee{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .clientes-track{ animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .clientes-track .cliente-card[aria-hidden="true"]{ display: none; }
  .clientes-marquee{ overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   CTA CONTACTO (claro, con borde)
   ========================================================================== */
.cta-band{
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 70px 0;
}
.cta-inner{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.cta-text h2{
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin-bottom: .3em;
}
.cta-phone{ margin-bottom: .4em; }
.cta-phone a{
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.8vw, 2.5rem);
  font-weight: 700;
  color: var(--navy);
  transition: color .3s;
}
.cta-phone a:hover{ color: var(--navy-3); text-decoration: underline; }
.cta-note{ font-size: .88rem; color: var(--text); margin: 0; max-width: 480px; }

/* ==========================================================================
   FOOTER (navy, 4 columnas)
   ========================================================================== */
.site-footer{ background: var(--navy); color: var(--silver-light); padding-top: 64px; }
.footer-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line-dark);
}
@media (min-width: 720px){ .footer-inner{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px){ .footer-inner{ grid-template-columns: 1.4fr .9fr .9fr 1fr; } }

.footer-logo{ height: 96px; width: auto; margin-bottom: 18px; }
.footer-col h4{
  color: var(--white); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 1.1em;
}
.footer-col p{ color: var(--silver-light); font-size: .88rem; }
.footer-contact-line a:hover{ text-decoration: underline; }

.footer-nav{ display: flex; flex-direction: column; gap: 10px; }
.footer-nav a{ font-size: .88rem; color: var(--silver-light); }
.footer-nav a:hover{ color: var(--white); text-decoration: underline; }

.badge-24-7{
  display: inline-block; margin: .3em 0 1em;
  padding: 6px 12px; border-radius: 2px;
  border: 1px solid var(--line-dark);
  color: var(--white);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase;
}
.footer-wa-btn{ margin-top: 6px; }

.footer-bottom{ padding: 22px 0; }
.footer-bottom-inner{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.footer-bottom-inner p{ margin: 0; font-size: .78rem; color: var(--silver); }
.social-icons{ display: flex; gap: 12px; }
.social-icons a{
  width: 34px; height: 34px; border-radius: 2px;
  border: 1px solid var(--line-dark);
  color: var(--silver-light);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s, color .3s, border-color .3s;
}
.social-icons a:hover{ background: var(--white); border-color: var(--white); color: var(--navy); }

/* ==========================================================================
   WHATSAPP FLOTANTE (botón funcional, se mantiene circular)
   ========================================================================== */
.whatsapp-float{
  position: fixed; right: 22px; bottom: 22px;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  z-index: 150;
  transition: transform .3s var(--ease);
}
.whatsapp-float:hover{ transform: scale(1.06); }

/* ==========================================================================
   VOLVER ARRIBA (flotante, lado IZQUIERDO -- el WhatsApp ya ocupa la
   derecha). Oculto por defecto (visibility+opacity, no display:none, para
   poder animar la entrada/salida); JS agrega/quita ".is-visible" según el
   scroll (script.js). El scroll al inicio lo dispara JS con
   window.scrollTo({behavior:'smooth'}); <html> ya tiene
   scroll-behavior:smooth como respaldo. Mismo patrón en las 4 páginas.
   ========================================================================== */
.back-to-top{
  position: fixed; left: 22px; bottom: 22px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--navy); color: var(--white);
  border: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  cursor: pointer;
  z-index: 150;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background-color .3s;
}
.back-to-top.is-visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ background: var(--navy-2); }
.back-to-top:focus-visible{ outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 599px){
  .back-to-top{ left: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: opacity .2s, visibility .2s; transform: none; }
}

/* ==========================================================================
   PÁGINAS INTERNAS — hero + navegación (servicios / nosotros / contacto)
   ========================================================================== */
.page-hero{
  background: var(--navy);
  padding: 168px 0 60px;
}
/* .hero-kicker: usada solo por el kicker de estas páginas internas (el hero
   cinematic de index.html usa .hero-split-kicker, con orange span y barra
   inferior, no esta clase). */
.hero-kicker{
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--silver-light);
}
.page-hero .hero-kicker{ margin-bottom: .7em; }
.page-hero h1{
  color: var(--white);
  font-size: clamp(1.9rem, 4.6vw, 2.8rem);
  letter-spacing: 0;
  max-width: 760px;
}
.page-hero p{
  color: var(--silver-light);
  font-size: 1.02rem;
  max-width: 640px;
  margin-bottom: 0;
}

/* Enlace de la barra de navegación que corresponde a la página actual */
.nav-link.is-current::after{ transform: scaleX(1); }
@media (max-width: 899px){ .nav-link.is-current{ color: var(--white); } }

/* Chips de navegación rápida (servicios.html) */
.quick-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.quick-links a{
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.quick-links a:hover{ background: var(--navy); color: var(--white); border-color: var(--navy); }

/* ---------- Detalle de servicio (servicios.html) ---------- */
.service-detail{
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.service-detail:last-of-type{ border-bottom: none; }
.service-detail-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 760px){
  .service-detail-grid{ grid-template-columns: 200px 1fr; gap: 44px; }
}
.service-detail-head{ display: flex; flex-direction: row; align-items: center; gap: 16px; }
@media (min-width: 760px){ .service-detail-head{ flex-direction: column; align-items: flex-start; gap: 14px; } }
.service-detail-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; border-radius: var(--radius);
  background: var(--off-white); color: var(--navy);
  flex-shrink: 0;
}
.service-detail-icon svg{ width: 30px; height: 30px; }
.service-detail-num{
  font-family: var(--font-display); font-weight: 700; color: var(--silver);
  font-size: .8rem; letter-spacing: .08em;
}
.service-detail h2{
  color: var(--navy);
  font-size: clamp(1.25rem, 2.6vw, 1.55rem);
}
.service-detail-body p{ font-size: .98rem; max-width: 660px; }
.service-detail-list{ margin: 1.2rem 0 0; display: grid; gap: 9px; }
.service-detail-list li{
  font-size: .9rem; color: var(--text);
  padding-left: 18px; position: relative;
}
.service-detail-list li::before{
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--navy);
}
.service-detail-cta{ margin-top: 1.5rem; }
.service-detail-cta .btn{ font-size: .86rem; }

/* ---------- Historia (nosotros.html) ---------- */
.historia-text{ max-width: 760px; }
.historia-text p{ font-size: 1rem; }

/* ---------- Misión / Visión (nosotros.html) ---------- */
.mv-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px){ .mv-grid{ grid-template-columns: 1fr 1fr; } }
.mv-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.mv-card h3{
  color: var(--navy);
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mv-card p{ font-size: .95rem; margin-bottom: 0; }

/* ---------- Estadísticas en sección oscura (nosotros.html) ---------- */
.about-stats-section .featured-stats{ margin-top: 0; }
.about-stats-section .section-head{ margin-bottom: 2.4rem; }

/* ==========================================================================
   FORMULARIO DE CONTACTO (contacto.html)
   ========================================================================== */
.contacto-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 960px){ .contacto-grid{ grid-template-columns: 1.15fr .85fr; } }

.contact-form{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 28px;
}
.form-row{ display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; }
@media (min-width: 560px){ .form-row--2{ grid-template-columns: 1fr 1fr; } }
.form-group label{
  display: block; font-size: .84rem; font-weight: 700; color: var(--navy);
  margin-bottom: .5em; letter-spacing: .02em;
}
.form-group .req{ color: var(--navy-3); }
.form-group input,
.form-group select,
.form-group textarea{
  width: 100%;
  font-family: var(--font);
  font-size: .92rem;
  color: var(--ink);
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .8em .9em;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  outline: none; border-color: var(--navy); background: var(--white);
}
.form-group textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size: .8rem; color: var(--text); margin-top: -8px; margin-bottom: 20px; }
.form-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-actions .btn{ width: 100%; justify-content: center; }
@media (min-width: 480px){ .form-actions .btn{ width: auto; } }

.contact-info-card{
  background: var(--off-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 20px;
}
.contact-info-card .btn{ width: 100%; justify-content: center; margin-top: 4px; }
.contact-info-list{ display: grid; gap: 16px; margin-bottom: 22px; }
.contact-info-item{ display: flex; gap: 14px; align-items: flex-start; }
.contact-info-icon{
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius);
  background: var(--white); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; color: var(--navy);
}
.contact-info-icon svg{ width: 18px; height: 18px; }
.contact-info-item h3{
  font-size: .84rem; color: var(--navy); margin-bottom: .25em;
  text-transform: uppercase; letter-spacing: .03em;
}
.contact-info-item p{ font-size: .9rem; margin-bottom: 0; }

.contact-map{
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; aspect-ratio: 4 / 3;
}
.contact-map iframe{ width: 100%; height: 100%; min-height: 260px; border: 0; display: block; }

/* ==========================================================================
   Utilidades / accesibilidad
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}