/* ==========================================================================
   GRUPO FLM INGENIERÍA · Hoja de estilos
   Estética: ingeniería técnica / precisión industrial.
   Base gris fría · grafito · acento ámbar · secciones en acero · retícula de plano.
   Tipografías: Sora (títulos) · IBM Plex Sans (texto) · IBM Plex Mono (etiquetas/códigos).
   ========================================================================== */

:root{
  --ink:#14181C;
  --bg:#ECEFF1;          /* gris frío dominante */
  --surface:#F7F9FA;     /* casi blanco (paneles claros) */
  --panel:#E0E6E9;       /* panel algo más oscuro */
  --line:#CFD6DA;
  --line-2:#B6C0C5;
  --muted:#586067;
  --muted:#586067;
  --accent:#E0631B;      /* ámbar industrial */
  --accent-2:#BE520F;    /* hover */
  --accent-soft:rgba(224,99,27,.12);
  --steel:#15303E;       /* acero oscuro (secciones oscuras / hero) */
  --steel-2:#1D4256;
  --on-dark:#E8EDEF;
  --on-dark-muted:rgba(232,237,239,.62);

  --font-display:'Sora', system-ui, sans-serif;
  --font-body:'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --container:1240px;
  --gutter:clamp(1.1rem,.5rem+2vw,2.4rem);
  --radius:3px;
  --header-h:74px;
  --t-fast:.25s ease;
  --t-mid:.4s ease;
  --t-slow:.7s cubic-bezier(.16,1,.3,1);
  --fs-h2:clamp(1.7rem,1.15rem+2vw,2.75rem);
}

/* --------------------------------------------------------------- RESET -- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--font-body);
  font-weight:400;
  background:var(--bg);
  color:var(--ink);
  line-height:1.62;
  font-size:1rem;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
select,input,textarea{ font:inherit; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#fff; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:.7rem 1rem; z-index:200; }
.skip-link:focus{ left:8px; top:8px; }

/* --------------------------------------------------------- TIPOGRAFÍA -- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.02em; color:var(--ink); }
h1{ font-size:clamp(2.4rem,1.4rem+4.4vw,5rem); }
h2{ font-size:clamp(1.7rem,1.1rem+2.4vw,3rem); }
h3{ font-size:1.18rem; font-weight:600; letter-spacing:-.01em; }
p{ color:var(--ink); }
em{ font-style:normal; color:var(--accent); }
strong{ font-weight:600; }

/* --------------------------------------------------------------- LAYOUT - */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(4rem,2.4rem+6vw,8rem) 0; position:relative; }
.section--tight{ padding:clamp(2.6rem,1.6rem+3vw,4.2rem) 0; }
.section--panel{ background:var(--panel); }
.section--surface{ background:var(--surface); }
.section--dark{ background:var(--steel); color:var(--on-dark); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--on-dark); }
.rule{ height:1px; background:var(--line); border:0; }
.center{ text-align:center; }
.mt-cta{ margin-top:clamp(2rem,1rem+2vw,3rem); }

/* Etiqueta mono con marca técnica */
.kicker{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.74rem;
  font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.kicker::before{ content:""; width:26px; height:1px; background:var(--accent); display:inline-block; }
.kicker--plain::before{ display:none; }
.section--dark .kicker{ color:#F4A263; }
.section--dark .kicker::before{ background:#F4A263; }

.head{ max-width:62ch; }
.head .kicker{ margin-bottom:1.1rem; }
.head p.head__lead{ color:var(--muted); margin-top:1.1rem; font-size:1.05rem; max-width:60ch; }

/* --------------------------------------------------------------- BOTONES - */
.btn{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-mono); font-size:.8rem;
  font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:.9em 1.3em; border-radius:var(--radius);
  border:1px solid transparent; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.btn .ar{ transition:transform var(--t-fast); }
.btn:hover .ar{ transform:translate(2px,-2px); }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-2); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }
.btn--ghost.on-dark{ border-color:rgba(232,237,239,.4); color:var(--on-dark); }
.btn--ghost.on-dark:hover{ border-color:var(--on-dark); background:rgba(232,237,239,.06); }
.btn--lg{ padding:1.05em 1.7em; font-size:.84rem; }

.link-ar{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-mono); font-size:.82rem;
  font-weight:500; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--line-2);
  padding-bottom:.3rem; transition:color var(--t-fast), border-color var(--t-fast); }
.link-ar .ar{ transition:transform var(--t-fast); }
.link-ar:hover{ color:var(--accent); border-color:var(--accent); }
.link-ar:hover .ar{ transform:translate(2px,-2px); }

/* --------------------------------------------------------------- CABECERA - */
.site-header{ position:fixed; top:0; left:0; width:100%; z-index:90; height:var(--header-h);
  display:flex; align-items:center; border-bottom:1px solid transparent; transition:background var(--t-mid), border-color var(--t-mid); }
.site-header__inner{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; }
.site-header.is-solid{ background:rgba(236,239,241,.92); backdrop-filter:blur(12px); border-bottom-color:var(--line); }
body.light-header .site-header{ background:var(--surface); border-bottom-color:var(--line); position:sticky; }

.brand{ display:flex; flex-direction:column; line-height:1.05; }
.brand b{ font-family:var(--font-display); font-weight:700; font-size:1.04rem; letter-spacing:-.01em; color:var(--ink); }
.brand span{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }
/* Sobre el hero oscuro (solo home, cabecera transparente) la marca va clara */
body:not(.light-header) .site-header:not(.is-solid) .brand b{ color:var(--on-dark); }
body:not(.light-header) .site-header:not(.is-solid) .brand span{ color:var(--on-dark-muted); }

.nav{ display:flex; align-items:center; gap:clamp(1.5rem,.7rem+1.9vw,3rem); }
.nav a{ font-family:var(--font-mono); font-size:.76rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink); position:relative; padding:.4rem 0; transition:color var(--t-fast); }
.nav a .nx{ color:var(--accent); margin-right:.4em; font-size:.66rem; }
.nav a::after{ content:""; position:absolute; left:0; bottom:-1px; height:1.5px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--t-fast); }
.nav a:hover::after,.nav a.is-current::after{ transform:scaleX(1); }
.nav a.is-current{ color:var(--accent); }
/* En home (cabecera transparente sobre acero): texto claro */
body:not(.light-header) .site-header:not(.is-solid) .nav a{ color:var(--on-dark); }
body:not(.light-header) .site-header:not(.is-solid) .nav a .nx{ color:#F4A263; }
body:not(.light-header) .site-header:not(.is-solid) .nav a.is-current{ color:#fff; }

.h-actions{ display:flex; align-items:center; gap:.8rem; }

/* Selector de idioma */
.lang{ position:relative; }
.lang__btn{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.5em .7em; color:var(--ink); transition:border-color var(--t-fast), color var(--t-fast); }
.lang__btn:hover{ border-color:var(--ink); }
body:not(.light-header) .site-header:not(.is-solid) .lang__btn{ color:var(--on-dark); border-color:rgba(232,237,239,.34); }
body:not(.light-header) .site-header:not(.is-solid) .lang__btn:hover{ border-color:var(--on-dark); }
.lang__chev{ transition:transform var(--t-fast); }
.lang.is-open .lang__chev{ transform:rotate(180deg); }
.lang__menu{ position:absolute; top:calc(100% + 9px); right:0; min-width:184px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 50px -22px rgba(20,24,28,.45);
  padding:.35rem; display:grid; gap:1px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast); z-index:60; }
.lang.is-open .lang__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang__opt{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; padding:.6rem .8rem;
  border-radius:var(--radius); color:var(--ink); transition:background var(--t-fast); font-family:var(--font-body); font-size:.92rem; }
.lang__opt:hover{ background:var(--panel); }
.lang__opt .c{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; color:var(--muted); }
.lang__opt[aria-selected="true"]{ color:var(--accent); }
.lang__opt[aria-selected="true"] .c{ color:var(--accent); }

/* Hamburguesa */
.burger{ display:none; width:42px; height:42px; position:relative; }
.burger span{ position:absolute; left:9px; right:9px; height:1.6px; background:var(--ink);
  transition:transform var(--t-fast), opacity var(--t-fast), background var(--t-fast); }
.burger span:nth-child(1){ top:15px; } .burger span:nth-child(2){ top:21px; } .burger span:nth-child(3){ top:27px; }
body:not(.light-header) .site-header:not(.is-solid) .burger span{ background:var(--on-dark); }
body.light-header .site-header .burger span{ background:var(--ink); }
body.menu-open .burger span{ background:var(--ink); }
body.menu-open .burger span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* Menú móvil */
.mnav{ position:fixed; inset:0; z-index:95; background:var(--surface);
  clip-path:inset(0 0 100% 0); transition:clip-path var(--t-slow); display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2.5rem; }
body.menu-open .mnav{ clip-path:inset(0 0 0 0); }
.mnav__list{ display:grid; gap:.5rem; }
.mnav__list a{ display:flex; align-items:baseline; gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,1.3rem+4vw,3.1rem); letter-spacing:-.02em;
  opacity:0; transform:translateY(14px); transition:opacity .5s, transform .5s, color var(--t-fast); }
.mnav__list a .nx{ font-family:var(--font-mono); font-weight:400; font-size:.8rem; color:var(--accent); }
.mnav__list a:hover{ color:var(--accent); }
body.menu-open .mnav__list a{ opacity:1; transform:translateY(0); }
body.menu-open .mnav__list a:nth-child(1){ transition-delay:.10s; }
body.menu-open .mnav__list a:nth-child(2){ transition-delay:.16s; }
body.menu-open .mnav__list a:nth-child(3){ transition-delay:.22s; }
body.menu-open .mnav__list a:nth-child(4){ transition-delay:.28s; }
body.menu-open .mnav__list a:nth-child(5){ transition-delay:.34s; }
body.menu-open .mnav__list a:nth-child(6){ transition-delay:.40s; }
.mnav__foot{ margin-top:2.4rem; display:grid; gap:.3rem; font-family:var(--font-mono); font-size:.82rem; color:var(--muted); }
.mnav__foot a{ color:var(--ink); }
.mnav__foot .lbl{ letter-spacing:.14em; text-transform:uppercase; font-size:.68rem; color:var(--accent); margin-bottom:.3rem; }

/* --------------------------------------------------------------- HERO --- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  color:var(--on-dark); overflow:hidden; background:var(--steel); }
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(150deg,#15303E 0%, #1D4256 55%, #15303E 100%); }
.hero::after{ content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg, rgba(15,30,40,.30) 0%, rgba(15,30,40,.55) 60%, rgba(15,30,40,.82) 100%); }
/* Retícula tipo plano */
.hero__grid{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(232,237,239,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,237,239,.07) 1px, transparent 1px);
  background-size:64px 64px; mask-image:linear-gradient(180deg, transparent, #000 30%); }
.hero__top{ position:absolute; top:calc(var(--header-h) + 1.2rem); left:0; width:100%; z-index:5; }
.hero__top .wrap{ display:flex; justify-content:space-between; gap:1rem; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); }
.hero__top span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__top span::before{ content:""; width:6px; height:6px; background:var(--accent); border-radius:50%; }
.hero__inner{ position:relative; z-index:5; padding-bottom:clamp(2.4rem,1.4rem+3vw,4rem); padding-top:8rem; }
.hero__kicker{ color:#F4A263; }
.hero h1{ max-width:16ch; margin:1.4rem 0 1.5rem; color:#fff; }
.hero__sub{ max-width:54ch; color:var(--on-dark); opacity:.9; font-size:clamp(1rem,.95rem+.3vw,1.18rem); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero__foot{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(2.4rem,1.6rem+2vw,3.6rem);
  border:1px solid rgba(232,237,239,.16); background:rgba(232,237,239,.16); }
.hero__foot div{ background:rgba(15,30,40,.4); padding:1.1rem 1.2rem; }
.hero__foot dt{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-muted); }
.hero__foot dd{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin-top:.35rem; color:#fff; }
.hero__scroll{ position:absolute; right:var(--gutter); bottom:clamp(2.4rem,1.4rem+3vw,4rem); z-index:5;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark-muted);
  writing-mode:vertical-rl; display:flex; align-items:center; gap:.6rem; }
.hero__scroll::after{ content:""; width:1px; height:40px; background:linear-gradient(var(--accent), transparent); }
/* Entrada escalonada del hero */
[data-h]{ opacity:0; transform:translateY(20px); }
.hero.is-ready [data-h]{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.hero.is-ready [data-h="1"]{ transition-delay:.05s; }
.hero.is-ready [data-h="2"]{ transition-delay:.15s; }
.hero.is-ready [data-h="3"]{ transition-delay:.25s; }
.hero.is-ready [data-h="4"]{ transition-delay:.35s; }
.hero.is-ready [data-h="5"]{ transition-delay:.45s; }

/* ---------------------------------------------------- CABECERA DE PÁGINA - */
.page-hero{ padding:calc(var(--header-h) + clamp(3rem,2rem+4vw,5.5rem)) 0 clamp(2.4rem,1.6rem+2vw,3.6rem);
  background:var(--surface); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero::after{ content:""; position:absolute; right:-40px; top:-40px; width:240px; height:240px; pointer-events:none;
  background-image:linear-gradient(rgba(20,24,28,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20,24,28,.05) 1px, transparent 1px);
  background-size:30px 30px; }
.crumbs{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1.3rem; }
.crumbs a{ color:var(--muted); } .crumbs a:hover{ color:var(--accent); }
.crumbs span{ margin:0 .3em; color:var(--line-2); }
.page-hero h1{ max-width:18ch; }
.page-hero__lead{ color:var(--muted); max-width:58ch; margin-top:1.2rem; font-size:1.08rem; }
.page-hero__index{ position:absolute; right:var(--gutter); bottom:1.4rem; font-family:var(--font-mono); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--line-2); }

/* ------------------------------------------------ INTRO / SOBRE (split) -- */
.split{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,1rem+4vw,5rem); align-items:start; }
.statement{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.5rem,1.05rem+1.9vw,2.45rem);
  line-height:1.18; letter-spacing:-.02em; }
.prose p{ color:var(--muted); font-size:1.06rem; }
.prose p + p{ margin-top:1.1rem; }
.sign{ margin-top:1.8rem; display:flex; align-items:center; gap:.9rem; }
.sign::before{ content:""; width:30px; height:1px; background:var(--accent); }
.sign b{ font-family:var(--font-display); font-weight:600; }
.sign span{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.frame{ position:relative; aspect-ratio:4/5; background:var(--panel); border:1px solid var(--line);
  background-image:linear-gradient(135deg, var(--panel), var(--surface)); display:grid; place-items:center; overflow:hidden; }
.frame::before,.frame::after{ content:""; position:absolute; width:22px; height:22px; border:1.5px solid var(--accent); }
.frame::before{ top:12px; left:12px; border-right:0; border-bottom:0; }
.frame::after{ bottom:12px; right:12px; border-left:0; border-top:0; }
.frame__tag{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ------------------------------------------------------- SERVICIOS (cards) */
.scards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.scard{ background:var(--surface); padding:clamp(1.6rem,1.1rem+1.4vw,2.6rem); position:relative;
  display:flex; flex-direction:column; gap:.8rem; transition:background var(--t-fast); min-height:200px; }
.scard:hover{ background:#fff; }
.scard::before{ content:""; position:absolute; top:16px; right:16px; width:18px; height:18px;
  border-top:1.5px solid var(--line-2); border-right:1.5px solid var(--line-2); transition:border-color var(--t-fast); }
.scard:hover::before{ border-color:var(--accent); }
.scard__code{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.12em; color:var(--accent); }
.scard h3{ font-size:1.28rem; max-width:18ch; }
.scard p{ color:var(--muted); font-size:.98rem; }

/* ------------------------------------------------------------- SECTORES -- */
.sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.sector{ background:var(--surface); padding:clamp(1.5rem,1rem+1.4vw,2.3rem); display:flex; flex-direction:column; gap:.55rem;
  position:relative; transition:background var(--t-fast); }
.sector:hover{ background:var(--accent); color:#fff; }
.sector:hover .sector__n,.sector:hover p{ color:rgba(255,255,255,.85); }
.sector:hover h3{ color:#fff; }
.sector__n{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; color:var(--accent); transition:color var(--t-fast); }
.sector h3{ font-size:1.22rem; transition:color var(--t-fast); }
.sector p{ color:var(--muted); font-size:.94rem; transition:color var(--t-fast); }

/* ------------------------------------------------------------- PROYECTOS - */
.pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,.6rem+1.6vw,2.2rem); }
.pcard{ display:block; position:relative; }
.pcard__img{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--panel); border:1px solid var(--line); }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow), filter var(--t-mid);
  filter:grayscale(.25) contrast(1.02); }
.pcard:hover .pcard__img img{ transform:scale(1.04); filter:grayscale(0); }
.pcard__img::after{ content:""; position:absolute; inset:0; border:0 solid var(--accent); transition:border-width var(--t-fast); pointer-events:none; }
.pcard:hover .pcard__img::after{ border-width:3px; }
.pcard__bar{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:.9rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.pcard__cat{ color:var(--accent); }
.pcard__m{ color:var(--muted); }
.pcard__t{ font-family:var(--font-display); font-weight:600; font-size:1.3rem; margin-top:.35rem; letter-spacing:-.01em; }
.pcard--tall .pcard__img{ aspect-ratio:16/13; }

/* ----------------------------------------------------------- MÉTRICAS --- */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); }
.metric{ padding:clamp(1.4rem,1rem+1.4vw,2.4rem) 1.4rem; border-left:1px solid rgba(232,237,239,.18); }
.metric:first-child{ border-left:0; }
.metric__n{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,1.6rem+3vw,4rem); line-height:1; color:#fff; letter-spacing:-.03em; }
.metric__n .suf{ color:var(--accent); }
.metric__l{ font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-muted); margin-top:.9rem; }

/* ------------------------------------------------------------ PRINCIPIOS - */
.principles{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.principle{ background:var(--surface); padding:clamp(1.6rem,1.1rem+1.4vw,2.4rem); display:flex; flex-direction:column; gap:.7rem; }
.principle h3{ display:flex; align-items:baseline; gap:.7rem; font-size:1.22rem; }
.principle h3 .vn{ font-family:var(--font-mono); font-weight:400; font-size:.8rem; color:var(--accent); }
.principle p{ color:var(--muted); font-size:.98rem; }

/* --------------------------------------------------------------- CONTACTO */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,1rem+4vw,5rem); align-items:start; }
.cdetails{ display:grid; gap:1.6rem; }
.cdetail{ display:grid; gap:.3rem; }
.cdetail .lbl{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#F4A263; }
.cdetail a,.cdetail p{ font-size:1.12rem; color:var(--on-dark); }
.cdetail a:hover{ color:#fff; }
.contact .btn{ margin-top:.6rem; }
.cform{ background:var(--surface); border:1px solid var(--line); padding:clamp(1.5rem,1rem+1.6vw,2.6rem); border-radius:var(--radius); }
.field{ display:grid; gap:.45rem; margin-bottom:1.1rem; }
.field label{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{ width:100%; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.85rem .9rem; font-size:.98rem; transition:border-color var(--t-fast); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:130px; }
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{ border-color:#C0392B; }
.consent{ display:flex; align-items:flex-start; gap:.6rem; margin-bottom:1.2rem; font-size:.9rem; color:var(--muted); }
.consent input{ margin-top:.25rem; accent-color:var(--accent); }
.consent a{ color:var(--accent); text-decoration:underline; }
.cform__msg{ margin-top:1rem; font-size:.92rem; display:none; padding:.8rem 1rem; border-radius:var(--radius); }
.cform__msg.ok{ display:block; background:rgba(46,125,50,.12); color:#2E7D32; }
.cform__msg.err{ display:block; background:rgba(192,57,43,.12); color:#C0392B; }

/* --------------------------------------------------------------- FOOTER -- */
.foot{ background:var(--steel); color:var(--on-dark); padding:clamp(3rem,2rem+3vw,5rem) 0 2rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; padding-bottom:clamp(2rem,1.4rem+2vw,3rem); }
.foot-brand b{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; color:#fff; }
.foot-brand p{ color:var(--on-dark-muted); margin-top:.9rem; max-width:38ch; font-size:.96rem; }
.foot-col h4{ font-family:var(--font-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:#F4A263; margin-bottom:1.1rem; }
.foot-col ul{ display:grid; gap:.6rem; }
.foot-col a{ color:var(--on-dark-muted); font-size:.96rem; transition:color var(--t-fast); }
.foot-col a:hover{ color:#fff; }

/* Bloque Kit Digital: logo grande, sin texto descriptivo */
.foot-kit{ display:flex; align-items:center; padding:clamp(1.8rem,1rem+2vw,2.4rem) 0; border-top:1px solid rgba(232,237,239,.14); border-bottom:1px solid rgba(232,237,239,.14); }
.foot-kit__logo{ width:clamp(280px,50vw,480px); height:auto; }
.foot-kit__logo--ph{ width:clamp(280px,50vw,480px); min-height:96px; border:1px dashed rgba(232,237,239,.32);
  border-radius:var(--radius); display:grid; place-items:center; text-align:center; font-family:var(--font-mono);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-muted); padding:1.4rem; }

.foot-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.6rem; }
.foot-legal{ display:flex; flex-wrap:wrap; gap:1.2rem; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.foot-legal a{ color:var(--on-dark-muted); } .foot-legal a:hover{ color:#fff; }
.foot-copy{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--on-dark-muted); }
.foot .lang__btn{ color:var(--on-dark); border-color:rgba(232,237,239,.3); }
.foot .lang__menu{ bottom:calc(100% + 9px); top:auto; }

/* --------------------------------------------------------------- COOKIES - */
.cookie{ position:fixed; left:clamp(1rem,2vw,1.6rem); bottom:clamp(1rem,2vw,1.6rem); z-index:120; max-width:380px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 24px 60px -24px rgba(20,24,28,.45);
  padding:1.4rem; transform:translateY(140%); transition:transform var(--t-slow); }
.cookie.is-visible{ transform:translateY(0); }
.cookie b{ font-family:var(--font-display); font-weight:600; }
.cookie p{ color:var(--muted); font-size:.9rem; margin:.5rem 0 1rem; }
.cookie p a{ color:var(--accent); text-decoration:underline; }
.cookie__row{ display:flex; gap:.6rem; }
.cookie__row .btn{ padding:.7em 1em; font-size:.74rem; }

/* ------------------------------------------------------------ WHATSAPP --- */
.wa{ position:fixed; right:clamp(1rem,2vw,1.6rem); bottom:clamp(1rem,2vw,1.6rem); z-index:110; width:56px; height:56px;
  border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; box-shadow:0 14px 34px -12px rgba(224,99,27,.6);
  transition:transform var(--t-fast), background var(--t-fast); }
.wa:hover{ transform:translateY(-3px); background:var(--accent-2); }
.wa svg{ width:28px; height:28px; }

/* --------------------------------------------------------- PÁGINAS LEGALES */
.legal-body{ padding-top:clamp(2.6rem,1.6rem+3vw,4rem); }
.legal-doc{ display:none; max-width:74ch; }
.legal-doc.is-active{ display:block; }
.legal-doc h2{ font-size:1.3rem; margin:2.2rem 0 .8rem; }
.legal-doc h2:first-child{ margin-top:0; }
.legal-doc h3{ font-size:1.05rem; margin:1.4rem 0 .5rem; }
.legal-doc p{ color:var(--muted); margin-bottom:.9rem; }
.legal-doc ul,.legal-doc ol{ margin:0 0 1rem 1.2rem; color:var(--muted); }
.legal-doc ul{ list-style:disc; } .legal-doc ol{ list-style:decimal; }
.legal-doc li{ margin-bottom:.4rem; }
.legal-doc a{ color:var(--accent); text-decoration:underline; }
.legal-doc strong{ color:var(--ink); }
.legal-doc table{ width:100%; border-collapse:collapse; margin:1rem 0 1.4rem; font-size:.92rem; }
.legal-doc th,.legal-doc td{ border:1px solid var(--line); padding:.6rem .7rem; text-align:left; vertical-align:top; color:var(--muted); }
.legal-doc th{ background:var(--panel); color:var(--ink); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.ph{ background:#FBE8C8; color:#7A4B12; padding:0 .25em; border-radius:2px; }

/* --------------------------------------------------------------- SITEMAP - */
.smap{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.6rem,1rem+2vw,3rem); }
.smap-block h2{ font-size:1.15rem; font-family:var(--font-mono); font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem; }
.smap-block ul{ display:grid; gap:.1rem; }
.smap-block a{ display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(1.3rem,1rem+1.4vw,1.9rem);
  padding:.7rem 0; border-bottom:1px solid var(--line); transition:color var(--t-fast), padding-left var(--t-fast); }
.smap-block a:hover{ color:var(--accent); padding-left:.6rem; }

/* ----------------------------------------------------------- REVELADO --- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.08s; } [data-delay="2"]{ transition-delay:.16s; } [data-delay="3"]{ transition-delay:.24s; }

/* ----------------------------------------------------------- RESPONSIVE -- */
@media (max-width:1000px){
  .nav{ display:none; }
  .burger{ display:block; }
  .split,.contact{ grid-template-columns:1fr; }
  .frame{ aspect-ratio:16/10; max-width:520px; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .metric:nth-child(3){ border-left:0; }
}
@media (max-width:720px){
  .scards,.sectors,.principles{ grid-template-columns:1fr; }
  .pgrid{ grid-template-columns:1fr; }
  .hero__foot{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:1.8rem; }
  .hero__scroll{ display:none; }
}
@media (max-width:540px){
  :root{ --header-h:64px; }
  .hero__top{ display:none; }
  .metrics{ grid-template-columns:1fr 1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  [data-reveal],[data-h]{ opacity:1 !important; transform:none !important; }
}

/* Marcador de dato pendiente de completar dentro de las páginas legales */
.legal-body .ph{ background:#FBE8C8; color:#7A3B0A; padding:.04em .4em; border-radius:3px; font-weight:500; }