/* ============================================================ */
/*  CONSULTORÍA CHÁVEZ CARMONA · Sitio v8 "Cinematic"           */
/*  Dark cinematográfico on-brand · grafito + azul + esmeralda  */
/*  Paleta/tipografía: 08-Marketing/CCC-Matriz-Branding/snippets */
/* ============================================================ */

/* ============================================================ */
/*  FUENTES DE MARCA AUTO-HOSPEDADAS                            */
/*  Antes venian del CDN de fuentes de Google, lo que costaba    */
/*  dos conexiones nuevas en la ruta critica (habia que bajar la */
/*  hoja remota ANTES de saber siquiera la URL de cada woff2) y  */
/*  le mandaba la IP de cada visitante a Google en cada carga.   */
/*  Declaraciones calcadas de las que servia ese CDN, unicode-   */
/*  range incluido: el comportamiento por peso no cambia.        */
/*  Los dominios de origen NO se escriben aqui a proposito: el   */
/*  gate de tests/fuentes.test.mjs prohibe nombrarlos y leeria   */
/*  este mismo comentario como una recaida.                      */
/*  Las 4 familias son OFL 1.1 -> /assets/fonts/OFL.txt          */
/* ============================================================ */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-normal-400.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-normal-400.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-normal-500.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-normal-500.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-ext-normal-600.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-normal-600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/inter-latin-ext-normal-400_500_600.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/inter-latin-normal-400_500_600.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-ext-normal-400_500_600_700.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/space-grotesk-latin-normal-400_500_600_700.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root {
  /* ── Primarios de marca (heredados del logo, NO negociables) ── */
  --azul-ccc:        #1FA3DA;
  --azul-hondo:      #1689B8;
  --verde-lima:      #8DC63F;
  --verde-esmeralda: #2DAA3E;
  --esmeralda-claro: #3ED155;
  --verde-cta:       #1E7A2B;   /* D8 3-sep-2026: fondo de texto BLANCO 5.42:1 (WCAG AA). #2DAA3E da 3.03:1: sólo iconos/acentos */
  --verde-cta-hover: #21852F;   /* 4.71:1 con blanco */

  /* ── Neutros. Grafito es el ÚNICO fondo oscuro permitido ── */
  --grafito:         #1F2937;
  --grafito-hondo:   #151b24;   /* derivada más profunda p/ hero — NO negro puro */
  --grafito-noche:   #10151c;   /* fondo base del sitio dark */
  --gris-medio:      #6B7280;
  --gris-claro:      #E5E7EB;
  --fondo-crema:     #F9FAFB;
  --blanco:          #FFFFFF;

  /* ── Alias sobre fondo oscuro ── */
  --texto-alto:      #F4F7FA;             /* titulares sobre oscuro */
  --texto-medio:     rgba(244,247,250,0.72);
  --texto-suave:     rgba(244,247,250,0.66);
  --linea:           rgba(244,247,250,0.10);
  --linea-fuerte:    rgba(244,247,250,0.18);
  --superficie:      #1a222d;             /* cards sobre el fondo noche */
  --superficie-alta: #212c39;

  /* ── Tipografía ── */
  --f-display: 'Space Grotesk', 'SF Pro Display', 'Segoe UI', Arial, sans-serif;
  --f-body:    'Inter', 'SF Pro Display', 'Segoe UI', Arial, sans-serif;
  --f-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  /* ── Ritmo y easing ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0.05, 0.36, 1);
  --wrap:     1200px;
  --gutter:   clamp(20px, 5vw, 64px);
}

/* ============================================================ */
/*  RESET                                                        */
/* ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* L3 (13-sep-2026): aquí vivían 3 reglas de la librería de scroll suave que se cortó.
   El scroll-behavior de arriba es el que da la suavidad; el desfase del nav lo pone app.js. */

body {
  font-family: var(--f-body);
  background: var(--grafito-noche);
  color: var(--texto-medio);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--verde-esmeralda); color: var(--blanco); }

/* ============================================================ */
/*  LAYOUT                                                       */
/* ============================================================ */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(80px, 12vw, 160px); }
.section--tight { padding-block: clamp(56px, 8vw, 100px); }

/* ============================================================ */
/*  TIPOGRAFÍA                                                   */
/* ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--azul-ccc);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow--muted { color: var(--texto-suave); }
.eyebrow .idx { color: var(--verde-lima); }

h1, h2, h3, h4 { font-family: var(--f-display); color: var(--texto-alto); line-height: 1.08; font-weight: 600; }

.display {
  font-weight: 700;
  font-size: clamp(48px, 9.5vw, 148px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.h-sec {
  font-weight: 600;
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
}
.h-sub {
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: -0.01em;
}
.lede {
  font-family: var(--f-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--texto-medio);
  max-width: 62ch;
}
.muted { color: var(--texto-suave); }

/* gradiente de marca sobre texto (azul→esmeralda, como el hero "al primer kWh") */
.grad {
  background: linear-gradient(105deg, var(--azul-ccc) 0%, var(--verde-lima) 55%, var(--verde-esmeralda) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================ */
/*  BOTONES                                                      */
/* ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-body); font-weight: 600;
  font-size: clamp(15px, 1.1vw, 16px);
  padding: 15px 26px; border-radius: 999px;
  transition: transform .35s var(--ease-out), background .3s ease, box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.btn svg { transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--primary {
  background: var(--verde-cta); color: var(--blanco);
  box-shadow: 0 8px 30px -8px rgba(30,122,43,0.55);
}
.btn--primary:hover { transform: translateY(-2px); background: var(--verde-cta-hover); box-shadow: 0 14px 40px -10px rgba(30,122,43,0.7); }
.btn--ghost {
  background: transparent; color: var(--texto-alto);
  border: 1px solid var(--linea-fuerte);
}
.btn--ghost:hover { border-color: var(--azul-ccc); color: var(--blanco); transform: translateY(-2px); }

/* ============================================================ */
/*  NAV                                                          */
/* ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 18px;
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(16,21,28,0.82);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--linea);
  padding-block: 12px;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--f-display); font-weight: 600; font-size: 16px;
  letter-spacing: 0.01em; color: var(--texto-alto);
}
.brand__sub {
  font-family: var(--f-mono); font-weight: 500; font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--texto-suave);
  margin-top: 3px;
}

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links > a, .nav-item > .nav-top {
  font-size: 15px; font-weight: 500; color: var(--texto-medio);
  position: relative; padding-block: 4px; transition: color .25s ease;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; font-family: inherit;
}
.nav-links > a::after, .nav-item > .nav-top::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0;
  background: var(--verde-lima); transition: width .3s var(--ease-out);
}
.nav-links > a:hover, .nav-item:hover > .nav-top, .nav-item.is-open > .nav-top { color: var(--texto-alto); }
.nav-links > a:hover::after { width: 100%; }
.nav-top .chev { width: 10px; height: 10px; transition: transform .3s var(--ease-out); }
.nav-item:hover .nav-top .chev, .nav-item.is-open .nav-top .chev { transform: rotate(180deg); }

/* dropdown mega-menu */
.nav-item { position: relative; }
.nav-drop {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; padding: 10px; border-radius: 16px;
  background: rgba(20,27,36,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--linea-fuerte); box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease-out), transform .28s var(--ease-out), visibility .28s;
  display: grid; gap: 2px;
}
.nav-drop.wide { min-width: 380px; grid-template-columns: 1fr 1fr; }
.nav-item:hover .nav-drop, .nav-item.is-open .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } /* puente hover */
.nav-drop a { display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 10px; transition: background .2s ease; }
.nav-drop a:hover { background: rgba(31,163,218,0.10); }
.nav-drop .di-t { font-size: 14.5px; font-weight: 500; color: var(--texto-alto); }
.nav-drop .di-s { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--texto-suave); }
.nav-drop .di-all { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--linea); border-radius: 0 0 10px 10px; }
.nav-drop .di-all .di-t { color: var(--verde-lima); }

/* submenús en el menú móvil */
.mm-group { margin-block: 4px; }
.mm-group > .mm-h { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); padding: 6px 0; }
.mobile-menu .mm-sub { font-size: clamp(18px,4.5vw,24px) !important; font-weight: 500 !important; padding-block: 5px !important; color: var(--texto-medio) !important; }

.nav-cta { display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14.5px; color: var(--blanco);
  background: var(--verde-cta); padding: 10px 20px; border-radius: 999px;
  transition: transform .3s var(--ease-out), background .3s ease; }
.nav-cta:hover { transform: translateY(-2px); background: var(--verde-cta-hover); }
.nav-cta svg { transition: transform .3s var(--ease-out); }
.nav-cta:hover svg { transform: translateX(3px); }

.hamburger { display: none; width: 40px; height: 40px; position: relative; }
.hamburger span { position: absolute; left: 9px; right: 9px; height: 2px; background: var(--texto-alto); border-radius: 2px; transition: transform .3s var(--ease-out), opacity .2s ease; }
.hamburger span:nth-child(1) { top: 14px; }
.hamburger span:nth-child(2) { top: 20px; }
.hamburger span:nth-child(3) { top: 26px; }
body.menu-open .hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* menú móvil */
.mobile-menu {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16,21,28,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--gutter);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s ease;
}
/* L3: el fondo dejaba de scrollear porque la librería de scroll suave se detenía sola.
   Al cortarla, el bloqueo tiene que vivir aquí o el fondo se mueve detrás del menú. */
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu a {
  font-family: var(--f-display); font-size: clamp(30px, 8vw, 48px); font-weight: 600;
  color: var(--texto-alto); padding-block: 8px; opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .2s ease;
}
body.menu-open .mobile-menu a { opacity: 1; transform: none; }
.mobile-menu a:hover { color: var(--verde-lima); }
.mobile-menu a:nth-child(1){transition-delay:.06s}.mobile-menu a:nth-child(2){transition-delay:.1s}
.mobile-menu a:nth-child(3){transition-delay:.14s}.mobile-menu a:nth-child(4){transition-delay:.18s}
.mobile-menu a:nth-child(5){transition-delay:.22s}.mobile-menu a:nth-child(6){transition-delay:.26s}
.mobile-menu .mm-cta { color: var(--esmeralda-claro); }

/* ============================================================ */
/*  HERO                                                         */
/* ============================================================ */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  /* el .nav es fixed y mide ~94 px: sin este piso el contenido del hero se desborda
     hacia arriba en movil y el eyebrow se encima sobre el logotipo */
  padding-top: 112px;
  padding-bottom: 48px;  /* L13 opcion D: era clamp(72px, 11vh, 128px) */
  overflow: hidden;
}
/* capa de fondo (canvas o video) — FIJA al viewport; el contenido la cubre al scrollear */
.hero__bg {
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(120% 90% at 70% 10%, #1c2836 0%, var(--grafito-hondo) 45%, var(--grafito-noche) 100%);
}
/* contenido bajo el hero: sube por encima del fondo fijo */
.page-body { position: relative; z-index: 2; background: var(--grafito-noche); }
.hero__bg canvas, .hero__bg video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__bg video { opacity: 0; transition: opacity 1s ease; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, var(--grafito-noche) 2%, transparent 42%),
    linear-gradient(to right, rgba(16,21,28,0.6) 0%, transparent 60%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: clamp(11px,1.1vw,13px); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-medio);
  padding: 8px 16px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  margin-bottom: 16px;  /* L13: era 28px */ background: rgba(26,34,45,0.4);
}

.hero__title { margin-bottom: 18px; }  /* L13: era 30px */
.hero__title .l1 { display: block; color: var(--texto-alto); }
.hero__title .l2 { display: block; }
.hero__sub { max-width: 54ch; margin-bottom: 24px; }  /* L13: era 40px */
.hero__sub strong { color: var(--texto-alto); font-weight: 600; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* Tira de credenciales. L14: ya NO es hija del .hero — vive en la banda .creds-band,
   inmediatamente debajo. Se conserva el nombre .hero__creds porque sus estilos no cambian;
   que este fuera del hero lo vigila por nombre el caso «L14 · la tira de credenciales vive
   FUERA del hero» de tests/hero-pliegue.test.mjs. Su margin-top (20 / 28 en movil) es el
   valor con el que se midio el ahorro del hero: cambiarlo obliga a re-medir. */
.hero__creds {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(28px,3vw,48px); row-gap: 24px;
  margin-top: 20px; padding-top: 18px;  /* L13: eran clamp(48px, 7vh, 84px) y 28px */
  border-top: 1px solid var(--linea);
}
.cred__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px,3vw,40px); color: var(--texto-alto); line-height: 1; }
.cred__lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-top: 8px; display: block; }
/* La banda que hospeda la tira desde L14. Solo aporta el aire de abajo: el de arriba lo
   sigue poniendo el margin-top de .hero__creds, que es el que se midio. */
.creds-band { padding-bottom: clamp(28px,4vw,44px); }

.manifiesto__title .muted { color: rgba(244,247,250,0.62); }
.kpi-unit { font-size: clamp(20px,2.4vw,34px); color: var(--verde-lima); }
.cred__num--word { font-size: clamp(15px,1.4vw,18px); font-weight: 500; color: var(--texto-medio); }

/* ============================================================ */
/*  MANIFIESTO                                                   */
/* ============================================================ */
.manifiesto { border-top: 1px solid var(--linea); }
.manifiesto__title {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(28px, 4.4vw, 60px); line-height: 1.12; letter-spacing: -0.02em;
  color: var(--texto-alto); max-width: 20ch; margin-bottom: 40px;
}
/* L3 (13-sep-2026): aquí vivía la regla del revelado palabra por palabra del manifiesto.
   Ningún HTML del sitio marca esas palabras, así que el efecto nunca llegó a verse. */
.manifiesto__body { max-width: 60ch; margin-bottom: 24px; }

/* ============================================================ */
/*  SERVICIOS — lista editorial                                 */
/* ============================================================ */
.sec-head { max-width: 820px; margin-bottom: clamp(48px, 6vw, 80px); }
.sec-head .h-sec { margin-block: 18px; }

.svc-list { border-top: 1px solid var(--linea); }
.svc {
  display: grid; grid-template-columns: 88px 1fr auto; align-items: center; gap: clamp(16px,3vw,48px);
  padding-block: clamp(26px, 3.4vw, 42px);
  border-bottom: 1px solid var(--linea);
  position: relative; transition: padding-inline .45s var(--ease-out);
}
.svc__idx { font-family: var(--f-mono); font-size: 13px; color: var(--verde-lima); letter-spacing: 0.05em; }
.svc__main { min-width: 0; }
.svc__name {
  font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 44px);
  letter-spacing: -0.02em; color: var(--texto-alto); line-height: 1.05;
  transition: color .4s var(--ease-out), transform .5s var(--ease-out);
}
.svc__tags { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-suave); margin-top: 12px; display: block; }
.svc__desc {
  font-size: 15.5px; line-height: 1.55; color: var(--texto-medio); max-width: 60ch;
  margin-top: 0; max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease-out), opacity .4s ease, margin-top .5s var(--ease-out);
}
.svc__arrow {
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--linea-fuerte);
  display: grid; place-items: center; color: var(--texto-medio);
  transition: background .4s var(--ease-out), color .4s ease, border-color .4s ease, transform .5s var(--ease-out);
  flex: none;
}
.svc:hover { background: linear-gradient(90deg, rgba(31,163,218,0.05), transparent 60%); }
.svc:hover .svc__name { color: var(--texto-alto); transform: translateX(8px); }
.svc:hover .svc__desc { max-height: 120px; opacity: 1; margin-top: 16px; }
.svc:hover .svc__arrow { background: var(--verde-esmeralda); border-color: var(--verde-esmeralda); color: var(--blanco); transform: rotate(-45deg); }
/* fix 2 (3-sep-2026): la descripción no depende de :hover en teclado, táctil ni móvil */
.svc:focus-within .svc__desc { max-height: 120px; opacity: 1; margin-top: 16px; }
@media (hover: none), (max-width: 720px) {
  .svc__desc { max-height: none; opacity: 1; margin-top: 12px; }
}

/* ============================================================ */
/*  PORTFOLIO — bento con parallax                              */
/* ============================================================ */
.portfolio { background: var(--grafito-hondo); border-block: 1px solid var(--linea); }
.bento {
  display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(150px, 15vw, 220px); gap: clamp(10px, 1.2vw, 18px);
  margin-top: clamp(40px, 5vw, 64px);
}
.tile {
  position: relative; overflow: hidden; border-radius: 14px;
  background: var(--superficie); border: 1px solid var(--linea);
}
/* zoom y parallax van en propiedades SEPARADAS a propósito: el parallax de app.js escribe
   --py cuadro a cuadro, y si compartieran un solo transform el zoom del hover heredaría
   esa cadencia (o el transform en línea se comería el hover, que es lo que pasaba antes). */
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  scale: 1.08; translate: 0 var(--py, 0%);
  transition: scale 1.2s var(--ease-out);
  will-change: scale, translate;
}
.tile:hover img { scale: 1.14; }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,21,28,0.92) 0%, rgba(16,21,28,0.15) 45%, transparent 70%);
}
.tile__meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(14px,1.5vw,22px); }
.tile__tag { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.tile__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(15px,1.4vw,19px); color: var(--texto-alto); margin-top: 6px; line-height: 1.15; }
.tile__loc { font-size: 12.5px; color: var(--texto-suave); margin-top: 5px; }

/* spans del bento (12 col) */
.t-a { grid-column: span 5; grid-row: span 2; }
.t-b { grid-column: span 4; grid-row: span 1; }
.t-c { grid-column: span 3; grid-row: span 1; }
.t-d { grid-column: span 4; grid-row: span 2; }
.t-e { grid-column: span 3; grid-row: span 1; }
.t-f { grid-column: span 5; grid-row: span 1; }
.t-g { grid-column: span 3; grid-row: span 1; }
.t-h { grid-column: span 4; grid-row: span 1; }

/* ============================================================ */
/*  PROCESO — pasos pinned                                      */
/* ============================================================ */
.proceso { position: relative; }
.proc-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.proc-sticky { position: sticky; top: 18vh; }
.proc-count { font-family: var(--f-display); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.proc-count .cur { font-size: clamp(80px, 12vw, 180px); color: var(--azul-ccc); }
.proc-count .tot { font-size: clamp(28px, 4vw, 52px); color: var(--texto-suave); }
.proc-progress { height: 2px; background: var(--linea); margin-top: 30px; border-radius: 2px; overflow: hidden; }
.proc-progress i { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--azul-ccc), var(--verde-esmeralda)); transition: width .5s var(--ease-out); }
.proc-steps { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 40px); }
.proc-step {
  padding: clamp(24px,3vw,38px); border-radius: 16px;
  background: var(--superficie); border: 1px solid var(--linea);
  transition: opacity .5s ease, transform .5s var(--ease-out), border-color .4s ease;
}
html.js .proc-step { opacity: 0.4; transform: translateY(6px); }   /* fix 5: atenuado sólo con JS */
html.js .proc-step.is-active { opacity: 1; transform: none; border-color: var(--linea-fuerte); }
.proc-step__k { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.proc-step h3 { font-size: clamp(21px,2.4vw,30px); margin-block: 12px 12px; color: var(--texto-alto); }
.proc-step p { font-size: 15.5px; line-height: 1.6; color: var(--texto-medio); }

/* ============================================================ */
/*  KPIs                                                        */
/* ============================================================ */
.kpis { background: var(--grafito-noche); border-block: 1px solid var(--linea); padding-block: clamp(72px,9vw,120px); }
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,40px); }
.kpi { border-top: 2px solid var(--linea); padding-top: 24px; }
.kpi__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(48px,7vw,96px); line-height: 1; letter-spacing: -0.03em; color: var(--esmeralda-claro); white-space: nowrap; }
.kpi__num .suf { color: var(--verde-lima); }
.kpi__lbl { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); margin-top: 14px; display: block; }

/* ============================================================ */
/*  SECTORES                                                    */
/* ============================================================ */
.sect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.sect { background: var(--grafito-noche); padding: clamp(24px,3vw,40px); display: flex; align-items: baseline; gap: 16px; transition: background .4s ease; }
.sect:hover { background: var(--superficie); }
.sect span { font-family: var(--f-mono); font-size: 13px; color: var(--verde-lima); }
.sect p { font-family: var(--f-display); font-weight: 500; font-size: clamp(17px,1.8vw,22px); color: var(--texto-alto); }

/* ============================================================ */
/*  COBERTURA                                                   */
/* ============================================================ */
.cob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.5vw,32px); }
.cob {
  padding: clamp(28px,3.5vw,48px); border-radius: 18px;
  background: var(--superficie); border: 1px solid var(--linea); position: relative; overflow: hidden;
}
.cob::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--azul-ccc), var(--verde-esmeralda)); }
.cob__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); }
.cob h3 { font-size: clamp(24px,2.8vw,34px); margin-block: 14px 18px; color: var(--texto-alto); }
.cob__addr { font-size: 15px; line-height: 1.6; color: var(--texto-medio); margin-bottom: 16px; }
.cob__cities { font-family: var(--f-mono); font-size: 12.5px; line-height: 1.9; color: var(--texto-suave); }

/* ============================================================ */
/*  MAPA / UBICACIÓN                                            */
/* ============================================================ */
.mapa { margin-top: clamp(28px,3.5vw,44px); border-radius: 18px; overflow: hidden; border: 1px solid var(--linea-fuerte); position: relative; box-shadow: 0 20px 50px -24px rgba(0,0,0,0.6); }
.mapa iframe { width: 100%; height: clamp(300px, 40vw, 440px); border: 0; display: block; filter: grayscale(0.25) contrast(1.02) brightness(0.92); }
.mapa__tag { position: absolute; left: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-alto); padding: 8px 14px; border-radius: 999px; background: rgba(20,27,36,0.9); border: 1px solid var(--linea-fuerte); backdrop-filter: blur(6px); }
.mapa__tag .pin { width: 12px; height: 12px; color: var(--verde-esmeralda); }
.mapa__link { position: absolute; right: 16px; bottom: 16px; z-index: 2; font-family: var(--f-body); font-weight: 600; font-size: 13px; color: var(--blanco); padding: 9px 16px; border-radius: 999px; background: var(--verde-cta); }
.mapa__link:hover { background: var(--verde-cta-hover); }

/* ============================================================ */
/*  FAQ                                                         */
/* ============================================================ */
.faq-list { border-top: 1px solid var(--linea); max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: clamp(20px,2.4vw,28px); text-align: left;
  font-family: var(--f-display); font-weight: 500; font-size: clamp(17px,1.9vw,22px); color: var(--texto-alto);
}
.faq-q .ic { flex: none; width: 30px; height: 30px; position: relative; }
.faq-q .ic::before, .faq-q .ic::after { content: ''; position: absolute; background: var(--azul-ccc); border-radius: 2px; transition: transform .35s var(--ease-out); }
.faq-q .ic::before { top: 14px; left: 6px; right: 6px; height: 2px; }
.faq-q .ic::after { left: 14px; top: 6px; bottom: 6px; width: 2px; }
.faq-item.open .faq-q .ic::after { transform: rotate(90deg); opacity: 0; }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease-io); }
.faq-a p { padding-bottom: clamp(20px,2.4vw,28px); font-size: 15.5px; line-height: 1.65; color: var(--texto-medio); max-width: 70ch; }

/* ============================================================ */
/*  CTA FINAL                                                   */
/* ============================================================ */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 120% at 50% 120%, #1c3628 0%, var(--grafito-hondo) 55%, var(--grafito-noche) 100%); }
.cta-final__bg canvas, .cta-final__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.cta-final__inner { position: relative; z-index: 2; }
.cta-final .h-sec { margin-block: 20px; max-width: 18ch; margin-inline: auto; }
.cta-final .lede { margin-inline: auto; margin-bottom: 40px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ============================================================ */
/*  FOOTER                                                      */
/* ============================================================ */
.footer { position: relative; z-index: 2; background: var(--grafito-hondo); border-top: 1px solid var(--linea); padding-top: clamp(56px,7vw,88px); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: clamp(28px,4vw,56px); }
.foot-brand .brand { margin-bottom: 20px; }
.foot-tag { font-size: 14.5px; line-height: 1.6; color: var(--texto-medio); max-width: 34ch; margin-bottom: 18px; }
.foot-promesa { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--azul-ccc); }
.foot-col h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); font-weight: 500; margin-bottom: 18px; }
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col a, .foot-col li { font-size: 14.5px; color: var(--texto-medio); transition: color .25s ease; line-height: 1.5; }
.foot-col a:hover { color: var(--verde-lima); }
.foot-social { display: flex; gap: 10px; margin-top: 20px; }
.foot-social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea-fuerte); display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; color: var(--texto-medio); transition: all .3s ease; }
.foot-social a:hover { border-color: var(--verde-esmeralda); color: var(--verde-esmeralda); transform: translateY(-2px); }
.foot-legal { border-top: 1px solid var(--linea); margin-top: clamp(48px,6vw,72px); padding-block: 26px; }
.foot-legal .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.foot-legal p, .foot-legal a { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--texto-suave); }
.foot-legal a:hover { color: var(--verde-lima); }

/* WhatsApp flotante */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--verde-esmeralda); color: var(--blanco);
  display: grid; place-items: center;
  box-shadow: 0 12px 34px -8px rgba(45,170,62,0.6);
  transition: transform .3s var(--ease-out);
}
.wa-float:hover { transform: scale(1.08) translateY(-2px); }

/* ============================================================ */
/*  REVEAL (animación de entrada al scroll)                     */
/* ============================================================ */
/* fix 5 (3-sep-2026): el reveal es opt-in — sólo cuando el JS puso html.js; sin JS todo se ve */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js [data-reveal].in { opacity: 1; transform: none; }
html.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
html.js [data-reveal-stagger].in > * { opacity: 1; transform: none; }

/* ============================================================ */
/*  PÁGINAS INTERNAS (servicios, portfolio, contacto, blog)     */
/* ============================================================ */
.subhero { padding-top: clamp(130px, 18vh, 200px); padding-bottom: clamp(48px,6vw,80px); position: relative; overflow: hidden; border-bottom: 1px solid var(--linea); }
.subhero__bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(90% 120% at 80% -10%, #1c2836, var(--grafito-noche) 60%); }
.subhero .wrap { position: relative; z-index: 1; }
/* L21 (23-sep-2026) · foto alusiva al servicio en la cabecera de 6 paginas de servicio (las 3 que no
   tienen foto propia se quedan con el degradado). Mismo esquema que el hero de la portada: <picture>
   con corte en 721 px, y el ENCUADRE va en el recorte del archivo (gen_subhero_servicios.py), no en
   el object-position. El scrim es mas denso que el del home porque aqui el texto chico -migas a 12 px
   y la entrada- es semitransparente y corre casi todo el ancho: su contraste se midio sobre el
   render. Foto, scrim y el .subhero__bg que ya traian 2 paginas van en z 0; el .wrap sigue en z 1. */
.subhero__photo { position: absolute; inset: 0; z-index: 0; }
.subhero__photo picture { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.subhero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(.82) contrast(1.02); }
.subhero__scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to top, var(--grafito-noche) 0%, rgba(16,21,28,0) 40%),
    linear-gradient(90deg, rgba(8,13,19,.94) 0%, rgba(8,13,19,.8) 50%, rgba(8,13,19,.45) 100%); }
@media (max-width: 720px) {
  .subhero__scrim { background: linear-gradient(to top, var(--grafito-noche) 0%, rgba(8,13,19,.82) 45%, rgba(8,13,19,.78) 100%); }
}
.subhero__title { font-size: clamp(40px, 7vw, 92px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.98; margin-block: 20px 24px; color: var(--texto-alt, var(--texto-alto)); }
.breadcrumb { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--texto-suave); }
.breadcrumb a:hover { color: var(--verde-lima); }
.breadcrumb .sep { margin-inline: 8px; color: var(--linea-fuerte); }

/* kicker (eyebrow legacy en páginas internas) */
.kicker { font-family: var(--f-mono); font-size: clamp(11px,1vw,13px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--azul-ccc); margin-bottom: 16px; }

/* chips de la subhero */
.page-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.chip { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--texto-medio); padding: 8px 15px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: rgba(26,34,45,0.5); }

/* content-grid: label a la izquierda, contenido a la derecha (páginas de servicio) */
.content-block { padding-block: clamp(48px, 6vw, 88px); border-top: 1px solid var(--linea); }
.content-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(28px,5vw,72px); align-items: start; }
.content-grid > div:first-child { position: sticky; top: 110px; }
.content-grid h2 { font-size: clamp(24px,3vw,38px); color: var(--texto-alto); margin-bottom: 16px; letter-spacing: -0.01em; }
.content-grid h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(18px,2vw,23px); color: var(--texto-alto); margin-block: 28px 10px; }
.content-grid h3:first-child { margin-top: 0; }
.content-grid p { font-size: 16.5px; line-height: 1.7; color: var(--texto-medio); margin-bottom: 14px; }
.content-grid > div:last-child > ul { display: flex; flex-direction: column; gap: 13px; margin-block: 6px 8px; }
.content-grid > div:last-child > ul > li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.6; color: var(--texto-medio); }
.content-grid > div:last-child > ul > li::before { content: ''; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 4px; background: rgba(45,170,62,0.14); border: 1px solid var(--verde-esmeralda); }
.content-grid > div:last-child > ul > li::after { content: ''; position: absolute; left: 5px; top: 11px; width: 5px; height: 8px; border-right: 2px solid var(--esmeralda-claro); border-bottom: 2px solid var(--esmeralda-claro); transform: rotate(45deg); }
.content-grid strong { color: var(--texto-alto); font-weight: 600; }
.deliverables { margin-top: 28px; padding: 22px 24px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--azul-ccc); }
.deliverables h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); font-weight: 500; margin-bottom: 10px; }
.deliverables p { font-size: 15px; line-height: 1.6; color: var(--texto-medio); margin: 0; }

/* CTA band (páginas internas, sin canvas) */
.cta-band { text-align: center; padding-block: clamp(72px,10vw,120px); border-top: 1px solid var(--linea); background: radial-gradient(90% 130% at 50% 130%, rgba(45,170,62,0.10), var(--grafito-noche) 60%); }
.cta-band .cta-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(30px,4.5vw,52px); color: var(--texto-alto); margin-block: 18px; letter-spacing: -0.02em; }
.cta-band .cta-sub { font-size: clamp(16px,1.5vw,19px); color: var(--texto-medio); margin-bottom: 36px; }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

@media (max-width: 880px) {
  .content-grid { grid-template-columns: 1fr; gap: 20px; }
  .content-grid > div:first-child { position: relative; top: 0; }
}

.prose { max-width: 760px; }
.prose h2 { font-size: clamp(26px,3.4vw,40px); margin-block: 48px 20px; color: var(--texto-alto); }
.prose h3 { font-size: clamp(20px,2.4vw,26px); margin-block: 32px 14px; color: var(--texto-alto); }
.prose p { font-size: 16.5px; line-height: 1.7; color: var(--texto-medio); margin-bottom: 18px; }
.prose ul.ticks { display: flex; flex-direction: column; gap: 12px; margin-block: 20px; }
.prose ul.ticks li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.6; color: var(--texto-medio); }
.prose ul.ticks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: rgba(45,170,62,0.15); border: 1px solid var(--verde-esmeralda); }
.prose ul.ticks li::after { content: ''; position: absolute; left: 6px; top: 11px; width: 5px; height: 9px; border-right: 2px solid var(--esmeralda-claro); border-bottom: 2px solid var(--esmeralda-claro); transform: rotate(45deg); }
.prose strong { color: var(--texto-alto); font-weight: 600; }

.svc-layout { display: grid; grid-template-columns: 1fr 320px; gap: clamp(32px,5vw,72px); align-items: start; }
.svc-aside { position: sticky; top: 110px; padding: clamp(24px,3vw,32px); border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); }
.svc-aside h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--texto-suave); font-weight: 500; margin-bottom: 16px; }
.svc-aside ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.svc-aside li { font-size: 14px; color: var(--texto-medio); display: flex; gap: 8px; }
.svc-aside li b { color: var(--azul-ccc); font-family: var(--f-mono); font-weight: 500; }
/* L10 · las dos reglas que la columna lateral necesita DENTRO de .legal-copy, cuyo bloque
   minificado de la reabsorcion (linea ~808) gana por orden a lo declarado aqui arriba:
     · el wrap de .legal-copy topa en 920px y con 320px de aside el texto caeria a ~400px;
     · .legal-copy li empata en especificidad con .svc-aside li y, por ir despues, le
       impondria 1.05rem a los renglones del aside, que el diseno pide a 14px. */
.legal-copy .wrap.svc-layout { max-width: var(--wrap); }
.legal-copy .svc-aside li { font-size: 14px; color: var(--texto-medio); }

.other-svc { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 24px; }
.other-svc a { padding: 20px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--linea); transition: border-color .3s ease, transform .3s var(--ease-out); }
.other-svc a:hover { border-color: var(--azul-ccc); transform: translateY(-3px); }
.other-svc .n { font-family: var(--f-mono); font-size: 11px; color: var(--verde-lima); }
.other-svc .t { font-family: var(--f-display); font-weight: 500; font-size: 16px; color: var(--texto-alto); margin-top: 8px; }

/* portfolio (página) */
.pf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px,2vw,26px); }
.pf-card { border-radius: 16px; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea); transition: border-color .4s ease, transform .5s var(--ease-out); }
.pf-card:hover { border-color: var(--linea-fuerte); transform: translateY(-4px); }
.pf-card__img { aspect-ratio: 4/3; overflow: hidden; }
/* L11 · igual que en el hero: <picture> es display:inline y de alto automatico, asi que el
   height:100% de la <img> se resolveria contra una caja colapsada. */
.pf-card__img picture { display: block; width: 100%; height: 100%; }
.pf-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.pf-card:hover .pf-card__img img { transform: scale(1.06); }
.pf-card__body { padding: 20px 22px 24px; }
.pf-card__tag { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.pf-card__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px,1.6vw,20px); color: var(--texto-alto); margin-block: 8px 6px; line-height: 1.2; }
.pf-card__loc { font-size: 13.5px; color: var(--texto-suave); line-height: 1.5; }
@media (max-width: 880px) { .pf-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pf-grid { grid-template-columns: 1fr; } }

/* contacto */

/* aviso de confirmacion tras enviar el formulario (vuelve con ?enviado=1) */
.form-ok {
  margin-bottom: 22px; padding: 14px 18px;
  border: 1px solid var(--verde-cta); border-left-width: 4px; border-radius: 8px;
  background: rgba(30,122,43,0.12); color: var(--texto-alto);
  font-size: 15px; line-height: 1.55;
}
.form-ok strong { color: var(--texto-alto); }

.contact-form { min-width: 0; }
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px,5vw,64px); align-items: start; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px; border-radius: 10px; font: inherit; font-size: 15px;
  background: var(--superficie); border: 1px solid var(--linea-fuerte); color: var(--texto-alto);
  transition: border-color .3s ease; outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--azul-ccc); }
.field textarea { min-height: 130px; resize: vertical; }
.contact-info { padding: clamp(28px,3.5vw,44px); border-radius: 18px; background: var(--superficie); border: 1px solid var(--linea); }
.contact-info .row { padding-block: 18px; border-bottom: 1px solid var(--linea); }
.contact-info .row:last-child { border-bottom: 0; }
.contact-info .k { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.contact-info .v { font-size: 16px; color: var(--texto-alto); }
.contact-info .v:hover { color: var(--verde-lima); }

/* sección privada / muestra (no listada) */
.priv-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); padding: 7px 14px; border: 1px solid var(--linea-fuerte); border-radius: 999px; background: rgba(141,198,63,0.06); margin-bottom: 22px; }
.priv-badge .lock { width: 12px; height: 12px; }
.vid-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,26px); margin-top: clamp(32px,4vw,48px); }
.vid { border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--linea); }
.vid video { width: 100%; height: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background: #000; }
.vid__cap { padding: 14px 18px; background: var(--superficie); }
.vid__cap .t { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--texto-alto); }
.vid__cap .s { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--verde-lima); margin-top: 4px; }
@media (max-width: 720px){ .vid-grid { grid-template-columns: 1fr; } }

/* blog: lista de artículos */
.blog-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,2vw,26px); }
.blog-card { display: flex; flex-direction: column; padding: clamp(24px,3vw,32px); border-radius: 16px; background: var(--superficie); border: 1px solid var(--linea); transition: border-color .3s ease, transform .4s var(--ease-out); }
.blog-card:hover { border-color: var(--azul-ccc); transform: translateY(-4px); }
.blog-card .bc-cat { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-lima); }
.blog-card h3 { font-size: clamp(19px,2vw,24px); color: var(--texto-alto); margin-block: 14px 12px; line-height: 1.2; }
.blog-card p { font-size: 15px; line-height: 1.6; color: var(--texto-medio); flex: 1; }
.blog-card .bc-more { margin-top: 18px; font-family: var(--f-body); font-weight: 600; font-size: 14px; color: var(--azul-ccc); }
.blog-card:hover .bc-more { color: var(--esmeralda-claro); }
@media (max-width:880px){ .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .blog-grid { grid-template-columns: 1fr; } }

/* artículo */
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--texto-suave); margin-top: 18px; }
.article-meta .cat { color: var(--verde-lima); }
.prose .tip { margin: 26px 0; padding: 22px 24px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--linea); border-left: 3px solid var(--verde-esmeralda); }
.prose .tip h4 { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde-lima); font-weight: 500; margin-bottom: 10px; }
.prose .tip p { margin: 0; font-size: 15.5px; }

/* equipo en campo (Nosotros) */
.equipo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,20px); margin-top: clamp(32px,4vw,48px); }
.eq { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; border: 1px solid var(--linea); }
/* L11 · ver la nota de .pf-card__img picture: sin display:block la foto colapsa. */
.eq picture { display: block; width: 100%; height: 100%; }
.eq img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.eq:hover img { transform: scale(1.05); }
.eq::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(16,21,28,0.9), transparent 55%); }
.eq span { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--texto-alto); }
.eq.tall { aspect-ratio: 3/4; }
@media (max-width:720px){ .equipo-grid { grid-template-columns: 1fr 1fr; } }
/* L10 · variante de 4 columnas de la banda de equipo. Su media va DESPUES a proposito:
   tiene la misma especificidad que la de .equipo-grid y manda el orden, asi que sin ella
   esta regla dejaria 4 columnas tambien en movil. */
.equipo-grid--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:720px){ .equipo-grid--4 { grid-template-columns: 1fr 1fr; } }

/* tira de credenciales / confianza */
.trust-band { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--linea); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; margin-top: clamp(32px,4vw,44px); }
.trust { background: var(--grafito-noche); padding: clamp(22px,2.6vw,30px); }
.trust .t-h { font-family: var(--f-display); font-weight: 600; font-size: clamp(17px,1.8vw,21px); color: var(--texto-alto); margin-bottom: 8px; }
.trust .t-p { font-size: 13.5px; line-height: 1.55; color: var(--texto-suave); }
@media (max-width:720px){ .trust-band { grid-template-columns: 1fr 1fr; } }
.trust-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--texto-suave); }
.trust-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* 404 */
.err-wrap { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.err-code { font-family: var(--f-display); font-weight: 700; font-size: clamp(100px,26vw,320px); line-height: 0.9; letter-spacing: -0.04em; }

/* ============================================================ */
/*  RESPONSIVE                                                  */
/* ============================================================ */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .proc-wrap { grid-template-columns: 1fr; }
  .proc-sticky { position: relative; top: 0; display: flex; align-items: center; gap: 24px; margin-bottom: 24px; }
  .proc-progress { flex: 1; margin-top: 0; }
  .svc-layout { grid-template-columns: 1fr; }
  .svc-aside { position: relative; top: 0; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero__creds { grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-top: clamp(36px,6vh,84px); }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .sect-grid { grid-template-columns: 1fr 1fr; }
  .cob-grid { grid-template-columns: 1fr; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { justify-content: center; }
  .other-svc { grid-template-columns: 1fr; }
  /* bento → apilado uniforme en móvil */
  .bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .t-a,.t-b,.t-c,.t-d,.t-e,.t-f,.t-g,.t-h { grid-column: span 1; grid-row: span 1; }
  .t-a, .t-d { grid-column: span 2; grid-row: span 2; }
  .svc { grid-template-columns: 40px 1fr auto; gap: 14px; }
  .svc__arrow { width: 42px; height: 42px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; }
  .foot-legal .wrap { flex-direction: column; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================ */
/*  ACCESIBILIDAD / REDUCED MOTION                              */
/* ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero__bg canvas { display: none; }
}
:focus-visible { outline: 2px solid var(--azul-ccc); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--verde-cta); color: #fff; padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { left: 8px; }

/* CCC 20260904b · guías, privacidad y simplificación visual */
.brand__mark img{display:block;width:100%;height:100%;object-fit:contain}.hero__bg--photo{position:absolute!important;inset:0}.hero__bg--photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:saturate(.82) contrast(1.02)}.hero__scrim{background:linear-gradient(90deg,rgba(8,13,19,.94) 0%,rgba(8,13,19,.74) 54%,rgba(8,13,19,.38) 100%)}.hero__title{max-width:980px}.hero__title .l1,.hero__title .l2{font-size:clamp(42px,6.4vw,92px);line-height:.98}.hero__creds{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}.guide-hero{padding-bottom:clamp(56px,8vw,100px)}.answer-first{max-width:920px;border-left:4px solid var(--verde-cta);padding-left:20px}.guide-grid{display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.5fr);gap:clamp(30px,7vw,110px);max-width:1120px}.guide-grid p{font-size:1.05rem;line-height:1.75;margin:0 0 1.2rem}.guide-grid h2{font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.12}.guide-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.guide-card{display:block;background:var(--grafito-noche);border:1px solid var(--borde);border-radius:16px;padding:clamp(24px,4vw,42px);color:var(--texto-alto);text-decoration:none}.guide-card span{font-family:var(--f-mono);color:var(--verde-cta)}.guide-card h2{font-size:clamp(1.3rem,2.2vw,2rem);margin:16px 0 12px}.guide-card p{color:var(--texto-suave);line-height:1.65}.guide-card b{display:block;margin-top:20px;color:var(--azul-ccc)}.legal-copy .wrap{max-width:920px}.legal-copy h2{font-size:clamp(1.5rem,2.5vw,2.2rem);margin:2.2em 0 .6em}.legal-copy p,.legal-copy li{font-size:1.05rem;line-height:1.75;color:var(--texto-suave)}.legal-copy a{color:var(--azul-ccc)}.service-answer .btn{margin-top:16px}.honey-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}.form-privacy a{text-decoration:underline}.mapa iframe{display:none}.source-block a{text-decoration:underline;text-underline-offset:3px}.wa-float{font-size:12px;font-weight:700;text-decoration:none}
@media(max-width:720px){.guide-grid,.guide-cards{grid-template-columns:1fr}.hero__creds{grid-template-columns:1fr;gap:14px;margin-top:28px}.hero__title .l1,.hero__title .l2{font-size:clamp(38px,12vw,58px)}.hero__sub{font-size:1rem}.hero__bg--photo img{object-position:62% center}.guide-card{padding:24px}.content-block{padding-block:52px}}
@media(prefers-reduced-motion:reduce){.hero__bg--photo img{transform:none!important}}

/* Pulido de portada tras revisión local */
.hero__title{max-width:980px}.hero__title .l1,.hero__title .l2{font-size:clamp(52px,5.7vw,72px);line-height:1.02;color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor}.hero__title .l2{color:#fff}
.hero__eyebrow{display:block;width:auto;border:0;background:none;padding:0;border-radius:0;letter-spacing:.08em;color:rgba(255,255,255,.82)}
.need-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.need-grid>a{display:block;min-height:220px;padding:28px;background:var(--grafito-noche);border:1px solid var(--borde);border-radius:14px;color:var(--texto-alto);text-decoration:none;transition:border-color .2s ease,transform .2s ease}.need-grid>a:hover,.need-grid>a:focus-visible{border-color:var(--azul-ccc);transform:translateY(-2px)}.need-grid span{font-family:var(--f-mono);font-size:.82rem;color:var(--verde-cta)}.need-grid h3{font-size:1.35rem;margin:18px 0 10px}.need-grid p{font-size:.98rem;line-height:1.6;color:var(--texto-suave)}
@media(max-width:820px){.need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero__title .l1,.hero__title .l2{font-size:clamp(40px,10.8vw,58px)}}
@media(max-width:520px){.need-grid{grid-template-columns:1fr}.need-grid>a{min-height:auto}.hero__eyebrow{font-size:.72rem;line-height:1.5}}
@media(prefers-reduced-motion:reduce){.need-grid>a:hover,.need-grid>a:focus-visible{transform:none}}

/* Hero con art direction (<picture>).
   Sin esto la foto colapsa: <picture> es display:inline y con alto automático, así que el
   width:100%/height:100% del <img> se resolvería contra una caja de 0 px de alto. */
.hero__bg--photo picture{display:block;position:absolute;inset:0;width:100%;height:100%}
/* La variante de móvil ya viene recortada en vertical, así que se centra: el 62% se calibró
   para la toma apaisada anterior y aquí desplazaría el encuadre sin motivo. */
@media(max-width:720px){.hero__bg--photo img{object-position:center center}}

/* ============================================================ */
/*  L17 · EXPLAINER FV (servicios/paneles-solares)               */
/*  La instalación se arma en 4 etapas: .s1..s4 se acumulan,     */
/*  .a1..a4 marcan la etapa en curso y .pausa congela los flujos.*/
/*  Sin JS el <svg> nace con s1 s2 s3 s4: se ve el estado final. */
/*  Dos clases del artboard NO viajan: .chico es el @media de    */
/*  600px de abajo, y .rm sobra porque el reduced-motion global  */
/*  de este archivo ya mata animaciones y transiciones.          */
/*  Todo va acotado bajo .legal-copy donde empata: sus reglas    */
/*  p/li (1.05rem, linea ~832) van antes pero ganarían por orden */
/*  a un selector de igual peso, igual que en el aside (L10).    */
/* ============================================================ */
.fv{display:block;width:100%;height:auto;overflow:hidden}
.fv .lote{fill:rgba(244,247,250,.025);stroke:rgba(244,247,250,.12);stroke-width:1;stroke-dasharray:3 5}
.fv .wire{stroke:rgba(244,247,250,.26);stroke-width:1;fill:none}
.fv .pole{stroke:rgba(244,247,250,.42);stroke-width:4;stroke-linecap:round}
.fv .pole.cru{stroke-width:3}
.fv .wall-l{fill:#1a222d;stroke:rgba(244,247,250,.16);stroke-width:1;stroke-linejoin:round}
.fv .wall-r{fill:#151b24;stroke:rgba(244,247,250,.16);stroke-width:1;stroke-linejoin:round}
.fv .roof{fill:#212c39;stroke:rgba(244,247,250,.22);stroke-width:1;stroke-linejoin:round}
.fv .win{fill:#10151c;stroke:rgba(244,247,250,.14);stroke-width:1;transition:fill .7s ease}
.fv.s3 .win{fill:rgba(141,198,63,.30)}
.fv .rail{stroke:rgba(244,247,250,.40);stroke-width:1.4;stroke-linecap:round}
.fv .rails{opacity:0;transition:opacity .4s ease}
.fv.s1 .rails{opacity:1}
.fv .pn{opacity:0;transform:translateY(-26px);transition:opacity .35s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.fv.s1 .pn{opacity:1;transform:none}
/* L17b · el escalonado cuelga de .s1: retrasa la ENTRADA y no la salida (si no, Repetir
   quitaba s1 y el motor lo reponia a los 300 ms antes de que 11 de 12 modulos bajaran) */
.fv.s1 .pn:nth-child(1){transition-delay:250ms}.fv.s1 .pn:nth-child(2){transition-delay:360ms}.fv.s1 .pn:nth-child(3){transition-delay:470ms}.fv.s1 .pn:nth-child(4){transition-delay:580ms}.fv.s1 .pn:nth-child(5){transition-delay:690ms}.fv.s1 .pn:nth-child(6){transition-delay:800ms}.fv.s1 .pn:nth-child(7){transition-delay:910ms}.fv.s1 .pn:nth-child(8){transition-delay:1020ms}.fv.s1 .pn:nth-child(9){transition-delay:1130ms}.fv.s1 .pn:nth-child(10){transition-delay:1240ms}.fv.s1 .pn:nth-child(11){transition-delay:1350ms}.fv.s1 .pn:nth-child(12){transition-delay:1460ms}
/* Repetir: app.js pone .reinicio, quita las etapas, fuerza un reflow y la quita; la figura
   vuelve a 0 de golpe y la entrada escalonada corre completa otra vez */
.fv.reinicio,.fv.reinicio *{transition:none!important}
.fv .pn-f{fill:rgba(22,137,184,.62);stroke:#1FA3DA;stroke-width:1.2;stroke-linejoin:round}
.fv .pn-c{stroke:rgba(31,163,218,.55);stroke-width:.8}
.fv .eq-t{fill:#2a3644;stroke:rgba(244,247,250,.30);stroke-width:1;stroke-linejoin:round}
.fv .eq-f{fill:#212c39;stroke:rgba(244,247,250,.30);stroke-width:1;stroke-linejoin:round}
.fv .eq-s{fill:#1a222d;stroke:rgba(244,247,250,.30);stroke-width:1;stroke-linejoin:round}
.fv .fin{stroke:rgba(244,247,250,.22);stroke-width:1}
.fv .led{fill:#374151;transition:fill .3s ease}
.fv.s2 .led{fill:#8DC63F}
.fv .mu-t{fill:#2a3644;stroke:rgba(244,247,250,.24);stroke-width:1;stroke-linejoin:round}
.fv .mu-r{fill:#151b24;stroke:rgba(244,247,250,.24);stroke-width:1;stroke-linejoin:round}
.fv .mu-l{fill:#1a222d;stroke:rgba(244,247,250,.24);stroke-width:1;stroke-linejoin:round}
.fv .mufa{stroke:rgba(244,247,250,.42);stroke-width:2.4;stroke-linecap:round}
.fv .dsp{fill:#10151c;stroke:rgba(244,247,250,.30);stroke-width:.8;transition:fill .4s ease}
.fv.s4 .dsp{fill:rgba(141,198,63,.55)}
.fv .cd{fill:none;stroke:rgba(244,247,250,.16);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fv .fl{fill:none;stroke:#8DC63F;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4 9;opacity:0;transition:opacity .45s ease}
/* L17b (WCAG 2.2.2) · los bucles infinitos corren SOLO bajo .is-viva, que app.js pone al
   tomar el control (IO y sin reduced-motion) y trae Pausar. Sin ella la figura queda en su
   estado final QUIETA: los flujos se ven punteados y sin moverse. */
.fv.s2 .fl-dc,.fv.s3 .fl-ac,.fv.s4 .fl-md,.fv.s4 .fl-red{opacity:1}
.fv-explica.is-viva .fv.s2 .fl-dc,.fv-explica.is-viva .fv.s3 .fl-ac,.fv-explica.is-viva .fv.s4 .fl-md{animation:fvFlujo 1.1s linear infinite}
.fv-explica.is-viva .fv.s4 .fl-red{animation:fvVaiven 2.6s ease-in-out infinite alternate}
@keyframes fvFlujo{to{stroke-dashoffset:-26}}
@keyframes fvVaiven{from{stroke-dashoffset:0}to{stroke-dashoffset:-78}}
.fv .co{opacity:0;transition:opacity .45s ease}
.fv.s4 .co{opacity:1}
.fv .co-l{stroke:rgba(31,163,218,.55);stroke-width:1;stroke-dasharray:2 3}
.fv .co-b{fill:#10151c;stroke:rgba(31,163,218,.70);stroke-width:1}
.fv .co-a{fill:none;stroke:#8DC63F;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fv-explica.is-viva .fv.s4 .co-a1{animation:fvAlterna 2.6s ease-in-out infinite alternate}
.fv-explica.is-viva .fv.s4 .co-a2{animation:fvAlterna 2.6s ease-in-out infinite alternate-reverse}
/* la pausa va DESPUES de los bucles y con su mismo peso: el shorthand `animation` repone
   play-state:running, asi que una regla anterior o mas ligera no congelaria nada */
.fv-explica.is-viva .fv.pausa .fl,.fv-explica.is-viva .fv.pausa .co-a{animation-play-state:paused}
@keyframes fvAlterna{from{opacity:1}to{opacity:.25}}
.fv .tx{fill:rgba(244,247,250,.62);font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-anchor:end}
.fv .mk{opacity:0;transition:opacity .4s ease}
.fv.s1 .mk1,.fv.s2 .mk2,.fv.s3 .mk3,.fv.s4 .mk4{opacity:1}
.fv .mk-l{stroke:rgba(31,163,218,.55);stroke-width:1}
.fv .mk circle{fill:#10151c;stroke:#1FA3DA;stroke-width:1.4;transition:fill .3s ease}
.fv .mk text{fill:#F4F7FA;font-family:var(--f-mono);font-size:11px;font-weight:500;text-anchor:middle;dominant-baseline:central}
.fv.a1 .mk1 circle,.fv.a2 .mk2 circle,.fv.a3 .mk3 circle,.fv.a4 .mk4 circle{fill:#1FA3DA}
/* L17b · el digito del marcador activo va oscuro: #10151c sobre #1FA3DA = 6.38:1 (el #F4F7FA daba 2.67:1) */
.fv.a1 .mk1 text,.fv.a2 .mk2 text,.fv.a3 .mk3 text,.fv.a4 .mk4 text{fill:#10151c}

/* marco de la figura, lectura del contador y controles */
.legal-copy .fv-intro{margin:0 0 28px}
.fv-fig{margin:0;border-radius:16px;background:var(--superficie);border:1px solid var(--linea);overflow:hidden}
.fv-lienzo{padding:22px 24px 10px}
.fv-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-top:1px solid var(--linea)}
.fv-lectura{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.fv-lbl{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-suave)}
.fv-valor{font-family:var(--f-display);font-size:28px;font-weight:600;line-height:1;color:var(--texto-alto);font-variant-numeric:tabular-nums}
.fv-unidad{font-family:var(--f-mono);font-size:13px;font-weight:500;color:var(--verde-lima)}
.fv-ctrl{display:flex;gap:10px}
.fv-bt{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--linea-fuerte);background:transparent;color:var(--texto-alto);font-family:var(--f-body);font-size:13px;font-weight:500;cursor:pointer;transition:border-color .3s ease}
.fv-bt:hover{border-color:var(--azul-ccc)}
/* el inline-flex de arriba le gana al display:none que el navegador da a [hidden] */
.fv-bt[hidden]{display:none}
.fv-ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fv-ic-play,.fv-explica.is-pausa .fv-ic-pausa{display:none}
.fv-explica.is-pausa .fv-ic-play{display:block}

/* lista de pasos: el contenido accesible (el <svg> es aria-hidden) */
.legal-copy .fv-pasos{margin:28px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:26px}
.legal-copy .fv-paso{padding-top:16px;display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--linea);transition:opacity .4s ease,border-color .4s ease}
.legal-copy .fv-paso.is-on{border-top-color:var(--azul-ccc)}
/* L17b · atenuado que se sigue leyendo: con .85 sobre #10151c el <p> queda en 5.99:1, el
   numero en 4.92:1 y el <h3> en 12.44:1 (con .42 eran 2.39, 2.11 y 3.89). El gate lo recalcula. */
.legal-copy .fv-paso.is-off{opacity:.85}
.fv-n{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.12em;color:var(--azul-ccc)}
.legal-copy .fv-paso h3{margin:0;font-size:20px;font-weight:500;line-height:1.2}
.legal-copy .fv-paso p{margin:0;font-size:15px;line-height:1.6;color:var(--texto-suave)}
.legal-copy .fv-nota{margin:22px 0 0;font-size:13.5px;line-height:1.6;color:rgba(244,247,250,.55)}

@media (max-width: 600px) {
  .fv .mk,.fv .co,.fv .tx{transform-box:fill-box;transform-origin:center;transform:scale(1.6)}
  .fv-lienzo{padding:14px 8px 6px}
  .fv-pie{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 18px}
  .legal-copy .fv-pasos{grid-template-columns:minmax(0,1fr)}
  .legal-copy .fv-paso h3{font-size:19px}
}

/* Pulida 5-nov-2026 · prepublicación (09-Sistemas/Web-CCC-Matriz/PULIDA-Web-CCC-Prepublicacion-2026-11-05.md) */
/* V-01: --borde nunca se definió y anulaba el borde entero de las tarjetas; fondo propio y número legible (lima 8.97:1) */
:root{--borde:var(--linea-fuerte)}
.need-grid>a,.guide-card{background:var(--superficie);border:1px solid var(--linea-fuerte)}
.need-grid span,.guide-card span{color:var(--verde-lima)}
/* V-02: con 13 subenlaces el menú móvil no cabe en un teléfono: se desplaza dentro de sí mismo */
.mobile-menu{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding-top:96px;padding-bottom:40px}
/* V-03 (decisión de JCR): la ubicación va como tarjeta con dirección y «Cómo llegar», sin mapa incrustado */
.mapa{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;padding:20px 24px;background:var(--superficie);overflow:visible}
.mapa__tag,.mapa__link{position:static}
.mapa__tag{background:none;border:0;padding:0;backdrop-filter:none;-webkit-backdrop-filter:none;font-size:12px}
/* V-08: vuelve el fundido inferior del hero hacia el fondo de la página (la regla de 20260904b lo había pisado) */
.hero__scrim{background:linear-gradient(to top,var(--grafito-noche) 0%,rgba(16,21,28,0) 28%),linear-gradient(90deg,rgba(8,13,19,.94) 0%,rgba(8,13,19,.74) 54%,rgba(8,13,19,.38) 100%)}
/* EMB-05: un fallo del formulario no se pinta con la caja verde del éxito (contacto.js marca data-estado) */
.form-ok[data-estado="error"]{border-color:var(--linea-fuerte);border-left-color:var(--texto-alto);background:var(--superficie)}
/* V-04: el bento usa <picture> con WebP; sin esto la <img> pierde el alto del tile */
.tile picture{display:block;width:100%;height:100%}
/* V-09: a 360 px el nombre y el subtítulo se partían en dos renglones junto a «Cotizar» y la hamburguesa */
@media(max-width:480px){.brand__sub{display:none}.brand__name{white-space:nowrap}.nav-inner{gap:12px}.nav-cta{padding:8px 12px;font-size:13px}}
@media(max-width:370px){.nav-cta{display:none}}
/* V-02: los subenlaces del menú móvil se leían pegados en un solo párrafo */
.mm-group{display:flex;flex-wrap:wrap;column-gap:18px;row-gap:0}.mm-group>.mm-h{flex-basis:100%}