/* ==========================================================================
   Grupo Ecológico Fátima · grupofatima.com.ve
   Hoja de estilos única. Todos los valores salen del
   Design System Grupo Ecológico Fátima («Brutalismo Ecológico»).
   ========================================================================== */

/* ---------- Fuentes alojadas en el proyecto ---------- */
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Display: Meditative (pendiente) → Gloock como sustituto oficial del sistema. */
@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---------- Tokens del design system ---------- */
:root {
  /* Paleta del manual */
  --color-verde-medio: #688955;
  --color-verde-claro: #6ea053;
  --color-verde-oscuro: #3a5b2a;
  --color-carbon: #333333;
  --color-blanco: #ffffff;

  /* Roles */
  --color-surface: #ffffff;
  --color-surface-alt: #f1f3ee;
  --color-ink: var(--color-carbon);
  --color-ink-muted: #5f5f5f;
  --color-ink-on-dark: #ffffff;
  --color-ink-muted-on-dark: #bfc7b9;
  --color-line: var(--color-carbon);
  --color-line-soft: #d6d9d2;
  --color-primary: var(--color-verde-oscuro);
  --color-on-primary: #ffffff;
  --color-focus: var(--color-verde-oscuro);
  --color-focus-on-dark: #ffffff;
  --color-danger: #a3361f;

  /* Código de color por área de servicio */
  --color-area-recuperar: var(--color-verde-claro);  /* 1 y 3 */
  --color-area-cumplir: var(--color-verde-oscuro);   /* 2 */
  --color-area-cerrar: var(--color-verde-medio);     /* 4 y 5 */
  --color-area-operar: var(--color-carbon);          /* 6 */

  /* Tipografía */
  --font-display: "Meditative", "Gloock", Georgia, "Times New Roman", serif;
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --font-size-display-xl: clamp(3rem, 11.5vw, 10rem);
  --font-size-display-lg: clamp(2.75rem, 8vw, 7.5rem);
  --font-size-display-md: clamp(2.25rem, 5.5vw, 4.5rem);
  --font-size-h1: clamp(2.25rem, 4.6vw, 3.5rem);
  --font-size-h2: clamp(1.875rem, 3.4vw, 2.5rem);
  --font-size-h3: clamp(1.25rem, 2vw, 1.625rem);
  --font-size-h4: 1.25rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-label: 0.75rem;
  --font-size-micro: 0.6875rem;

  /* Espaciado (baseline 8px) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 128px;
  --space-3xl: 240px;
  --grid-gutter: 24px;
  --grid-margin: 24px;
  --container-max: 1440px;
  --section-pad: clamp(64px, 9vw, 128px);

  /* Bordes, radios y sombras de bloque */
  --border-thin: 1px;
  --border-md: 1.5px;
  --border-thick: 2px;
  --border-heavy: 4px;
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;
  --shadow-block: 4px 4px 0 0 #333333;
  --shadow-block-lg: 8px 8px 0 0 #333333;
  --shadow-block-verde: 6px 6px 0 0 #6ea053;

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  --header-h: 72px;
}

@media (min-width: 1024px) {
  :root { --grid-margin: 48px; --header-h: 88px; }
}
@media (min-width: 1280px) {
  :root { --grid-margin: 80px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-primary); text-underline-offset: 3px; }
a:hover { color: var(--color-carbon); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.on-dark :focus-visible, .section--dark :focus-visible, .section--green :focus-visible,
.hero :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible { outline-color: var(--color-focus-on-dark); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-md); top: -100px; z-index: 200;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 12px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: var(--space-md); color: var(--color-on-primary); }

.icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 32px; height: 32px; }
.icon--xl { width: 48px; height: 48px; }

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

/* ---------- Tipografía ---------- */
.display, .h1, .h2, .display-xl, .display-lg, .display-md { font-family: var(--font-display); font-weight: 400; }
.display-xl { font-family: var(--font-display); font-size: var(--font-size-display-xl); line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase; }
.display-lg { font-family: var(--font-display); font-size: var(--font-size-display-lg); line-height: 0.9; letter-spacing: -0.02em; }
.display-md { font-family: var(--font-display); font-size: var(--font-size-display-md); line-height: 0.95; letter-spacing: -0.015em; }
.h1 { font-size: var(--font-size-h1); line-height: 1.04; letter-spacing: -0.01em; }
.h2 { font-size: var(--font-size-h2); line-height: 1.1; letter-spacing: -0.005em; }
.h3 { font-family: var(--font-sans); font-size: var(--font-size-h3); line-height: 1.2; font-weight: 700; }
.h4 { font-family: var(--font-sans); font-size: var(--font-size-h4); line-height: 1.25; font-weight: 600; }
.lead { font-size: var(--font-size-body-lg); line-height: 1.6; }
.label {
  font-family: var(--font-sans); font-size: var(--font-size-label); line-height: 1.2;
  font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.micro { font-size: var(--font-size-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.en { font-style: italic; color: var(--color-ink-muted); font-weight: 400; }
.accent { color: var(--color-primary); }
.on-dark .accent, .section--dark .accent { color: var(--color-verde-claro); }
.section--green .accent { color: var(--color-blanco); text-decoration: underline; text-decoration-color: var(--color-verde-claro); text-decoration-thickness: 4px; text-underline-offset: 0.18em; text-decoration-skip-ink: none; }

/* Kicker con barra pesada (expediente técnico) */
.kicker { display: inline-flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-lg); }
.kicker::after { content: ""; width: 96px; height: var(--border-heavy); background: currentColor; }
.kicker .label { color: inherit; }

/* ---------- Secciones y fondos alternos ---------- */
.section { padding-block: var(--section-pad); position: relative; overflow: hidden; }
.section--light { background: var(--color-surface); color: var(--color-ink); }
.section--alt { background: var(--color-surface-alt); color: var(--color-ink); }
.section--dark { background: var(--color-carbon); color: var(--color-ink-on-dark); }
.section--green { background: var(--color-verde-oscuro); color: var(--color-ink-on-dark); }
.section--dark .muted, .section--green .muted { color: var(--color-ink-muted-on-dark); }
.section--green .muted { color: var(--color-blanco); }
.muted { color: var(--color-ink-muted); }

.section-head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); max-width: 980px; }
.section-head .lead { max-width: 720px; }
.section-foot { margin-top: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: var(--border-md) solid var(--color-carbon); border-radius: var(--radius-1);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn .icon { width: 20px; height: 20px; }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 var(--color-carbon); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-block); }
.btn--primary:hover { background: var(--color-carbon); color: var(--color-blanco); }
.btn--outline { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-block); }
.btn--outline:hover { background: var(--color-carbon); color: var(--color-blanco); }
.btn--light { background: var(--color-blanco); color: var(--color-verde-oscuro); border-color: var(--color-blanco); box-shadow: var(--shadow-block-verde); }
.btn--light:hover { background: var(--color-carbon); color: var(--color-blanco); border-color: var(--color-carbon); }
.btn--ghost-light { background: transparent; color: var(--color-blanco); border-color: var(--color-blanco); }
.btn--ghost-light:hover { background: var(--color-blanco); color: var(--color-verde-oscuro); }
.btn--sm { min-height: 44px; padding: 10px 16px; font-size: 0.9375rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 700; text-decoration: none; color: var(--color-primary);
  border-bottom: var(--border-thick) solid currentColor;
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.section--dark .link-arrow, .section--green .link-arrow { color: var(--color-blanco); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border: var(--border-md) solid currentColor; border-radius: var(--radius-pill);
  font-size: var(--font-size-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4;
}

/* ==========================================================================
   ENCABEZADO
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-surface);
  border-bottom: var(--border-md) solid var(--color-carbon);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header.is-compact { box-shadow: 0 4px 0 0 rgba(51, 51, 51, 0.12); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  height: var(--header-h);
  transition: height var(--dur-slow) var(--ease);
}
.site-header.is-compact .header-inner { height: 64px; }
.brand { display: block; flex: none; }
.brand img { width: 132px; height: auto; transition: width var(--dur-slow) var(--ease); }
.site-header.is-compact .brand img { width: 112px; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 12px;
  background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); border-radius: var(--radius-1);
  font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Menú móvil a pantalla completa */
.site-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 99;
  background: var(--color-verde-oscuro); color: var(--color-blanco);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--space-lg) var(--grid-margin) var(--space-xl);
  display: none;
}
.site-header.is-compact .site-nav { inset: 64px 0 0 0; }
.site-nav.is-open { display: block; }
.nav-list > li { border-bottom: var(--border-thin) solid rgba(255, 255, 255, 0.28); }
.nav-item { display: flex; align-items: center; justify-content: space-between; }
.nav-link {
  display: flex; align-items: center; min-height: 56px; flex: 1;
  font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1;
  color: var(--color-blanco); text-decoration: none;
}
.nav-link:hover { color: var(--color-blanco); text-decoration: underline; }
.nav-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; background: transparent; border: var(--border-md) solid rgba(255,255,255,.6); border-radius: var(--radius-1); color: var(--color-blanco);
}
.sub-toggle .icon { transition: transform var(--dur) var(--ease); }
.sub-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.subnav { display: none; padding: 0 0 var(--space-md); }
.subnav.is-open { display: block; }
.subnav a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0;
  color: var(--color-blanco); text-decoration: none; font-weight: 500; font-size: 1rem; line-height: 1.35;
}
.subnav a:hover { text-decoration: underline; }
.subnav .area-chip { border-color: rgba(255,255,255,.7); }
.nav-actions { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.nav-actions .btn { width: 100%; }

.lang {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--font-size-label); font-weight: 700; letter-spacing: 0.2em;
}
.lang > * { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.lang .lang-active { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lang .lang-switch { color: inherit; text-decoration: none; }
.lang .lang-switch:hover { text-decoration: underline; }
.lang .lang-sep { min-width: 0; opacity: .6; }

/* Chip de número de área */
.area-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; border: var(--border-md) solid currentColor;
  font-family: var(--font-display); font-size: 1.125rem; line-height: 1;
}
.area-chip--1, .area-chip--3 { background: var(--color-area-recuperar); color: var(--color-blanco); border-color: var(--color-area-recuperar); }
.area-chip--2 { background: var(--color-area-cumplir); color: var(--color-blanco); border-color: var(--color-area-cumplir); }
.area-chip--4, .area-chip--5 { background: var(--color-area-cerrar); color: var(--color-blanco); border-color: var(--color-area-cerrar); }
.area-chip--6 { background: var(--color-area-operar); color: var(--color-blanco); border-color: var(--color-area-operar); }
.area-chip--p { background: var(--color-blanco); color: var(--color-verde-oscuro); border-color: var(--color-verde-oscuro); }
.subnav .area-chip--2 { border-color: rgba(255,255,255,.7); }

@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static; display: flex !important; align-items: center; gap: 20px;
    background: transparent; color: var(--color-ink); padding: 0; overflow: visible;
  }
  .nav-list { display: flex; align-items: center; gap: 4px; }
  .nav-list > li { border: 0; position: relative; }
  .nav-item { gap: 0; }
  .nav-link {
    min-height: 44px; padding: 0 10px; flex: none;
    font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    color: var(--color-ink);
  }
  .nav-link:hover { color: var(--color-primary); }
  .nav-link[aria-current="page"] { color: var(--color-primary); text-underline-offset: 8px; }
  .has-sub .nav-link { padding-right: 2px; }
  .sub-toggle { width: 28px; height: 44px; border: 0; color: var(--color-ink); }
  .sub-toggle .icon { width: 16px; height: 16px; }
  .subnav {
    position: absolute; top: 100%; left: 0; min-width: 320px;
    padding: 8px; background: var(--color-surface);
    border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-lg);
  }
  .subnav--wide { min-width: 420px; }
  .has-sub:hover > .subnav, .has-sub:focus-within > .subnav, .subnav.is-open { display: block; }
  .subnav a { color: var(--color-ink); padding: 8px 12px; font-size: 0.9375rem; }
  .subnav a:hover { background: var(--color-surface-alt); text-decoration: none; color: var(--color-primary); }
  .subnav .area-chip--2 { border-color: var(--color-area-cumplir); }
  .subnav .subnav-sep { border-top: var(--border-thin) solid var(--color-line-soft); margin: 6px 0; }
  .nav-actions { display: flex; align-items: center; gap: 12px; margin: 0; }
  .nav-actions .btn { width: auto; min-height: 44px; padding: 10px 14px; font-size: 0.875rem; white-space: nowrap; }
  .lang { color: var(--color-ink); }
}
@media (min-width: 1360px) {
  .nav-link { padding: 0 12px; font-size: 0.8125rem; }
  .nav-actions .btn { padding: 10px 20px; }
}

/* ==========================================================================
   PORTADA (S-1)
   ========================================================================== */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--color-blanco);
  background: var(--color-verde-oscuro);
  min-height: min(92vh, 900px);
  display: flex; flex-direction: column;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero::before { /* veladura verde-oscuro al 82% */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(58, 91, 42, 0.82);
}
.hero-leaves { position: absolute; z-index: -1; right: -6%; bottom: 12%; width: clamp(220px, 34vw, 520px); opacity: 1; pointer-events: none; }
.hero-grid { /* retícula de expediente técnico */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 96px 96px;
}
.hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.hero .kicker { color: var(--color-blanco); }
.hero h1 { max-width: 12ch; }
.hero-lead { margin-top: var(--space-lg); max-width: 640px; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.5; }
.hero-sectors { margin-top: var(--space-md); max-width: 760px; color: var(--color-blanco); }
.hero-actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); }
.hero-pool { border-top: var(--border-md) solid rgba(255,255,255,.5); }
.hero-pool .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); padding-block: var(--space-md); }
.hero-pool .label { color: var(--color-blanco); flex-basis: 100%; }
.pool-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) clamp(24px, 4vw, 56px); }
.pool-logos a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.pool-logos img { height: 32px; width: auto; }
.pool-logos .pool-aca img { height: 40px; }
.pool-logos .tag { font-size: 0.625rem; padding: 2px 8px; }
@media (min-width: 1024px) {
  .hero-pool .label { flex-basis: auto; }
}

/* ==========================================================================
   CIFRAS (S-2) · números protagonistas
   ========================================================================== */
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border-heavy) solid var(--color-carbon); }
.figure { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: var(--border-md) solid var(--color-carbon); }
.figure:nth-child(odd) { border-right: var(--border-md) solid var(--color-carbon); }
.figure:nth-child(even) { padding-left: var(--space-md); }
.figure-num {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5rem, 15vw, 11.25rem); line-height: .85; letter-spacing: -0.03em;
  color: var(--color-verde-oscuro); font-variant-numeric: tabular-nums;
}
.figure-label { display: block; margin-top: var(--space-md); font-weight: 700; font-size: 1rem; line-height: 1.35; }
.figure-detail { display: block; font-weight: 400; color: var(--color-ink-muted); }
@media (min-width: 900px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figure { padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-lg); border-bottom: 0; border-right: var(--border-md) solid var(--color-carbon); }
  .figure:first-child { padding-left: 0; }
  .figure:last-child { border-right: 0; }
  .figure:nth-child(even) { padding-left: var(--space-lg); }
}

/* ==========================================================================
   DESAFÍOS (S-3) · desafío → respuesta
   ========================================================================== */
.challenges { border-top: var(--border-heavy) solid var(--color-blanco); counter-reset: ch; }
.challenge {
  display: grid; grid-template-columns: 48px 1fr; gap: 6px 16px;
  padding: var(--space-lg) 0; text-decoration: none; color: inherit;
  border-bottom: var(--border-thin) solid rgba(255,255,255,.3);
  transition: background-color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.challenge:hover { color: inherit; background: rgba(255,255,255,.06); }
.challenge-num { grid-row: span 2; font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--color-verde-claro); }
.challenge-problem { color: var(--color-ink-muted-on-dark); font-size: 1rem; }
.challenge-answer { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; font-size: 1.0625rem; line-height: 1.45; color: var(--color-blanco); }
.challenge-answer .icon { color: var(--color-verde-claro); margin-top: 1px; transition: transform var(--dur) var(--ease); }
.challenge:hover .challenge-answer .icon { transform: translateX(6px); }
.challenge-head { display: none; }
@media (min-width: 900px) {
  .challenge-head {
    display: grid; grid-template-columns: 64px 1fr 1fr; gap: var(--space-lg);
    padding: var(--space-md) 0; color: var(--color-ink-muted-on-dark);
    border-bottom: var(--border-md) solid rgba(255,255,255,.6);
  }
  .challenge { grid-template-columns: 64px 1fr 1fr; gap: var(--space-lg); align-items: center; padding: 28px 0; }
  .challenge:hover { padding-left: 12px; padding-right: 12px; }
  .challenge-num { grid-row: auto; font-size: 2.5rem; }
  .challenge-answer { font-size: 1.125rem; }
}

/* ==========================================================================
   PROPUESTA DE VALOR (S-4)
   ========================================================================== */
.value-grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; }
.value-card {
  background: var(--color-surface); border: var(--border-md) solid var(--color-carbon);
  padding: 24px; display: grid; grid-template-columns: 56px 1fr; gap: 8px 16px; align-content: start;
}
.value-card .value-num { grid-row: span 2; font-size: 3.5rem; }
@media (min-width: 700px) {
  .value-card { padding: var(--space-lg); grid-template-columns: 1fr; gap: var(--space-md); }
  .value-card .value-num { grid-row: auto; font-size: 4.5rem; }
}
.value-num { font-family: var(--font-display); font-size: 4.5rem; line-height: .85; color: var(--color-verde-medio); }
.value-card h3 { font-size: 1.25rem; }
.value-card p { color: var(--color-ink-muted); }
@media (min-width: 700px) { .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .value-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   SEIS ÁREAS (S-5) · código de color por área
   ========================================================================== */
.area-grid { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr; }
.area-card {
  --area: var(--color-area-recuperar);
  display: flex; flex-direction: column; text-decoration: none; color: var(--color-ink);
  background: var(--color-surface); border: var(--border-md) solid var(--color-carbon);
  box-shadow: var(--shadow-block);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.area-card:hover { color: var(--color-ink); transform: translate(-3px, -3px); box-shadow: var(--shadow-block-lg); }
.area-card--1, .area-card--3 { --area: var(--color-area-recuperar); }
.area-card--2 { --area: var(--color-area-cumplir); }
.area-card--4, .area-card--5 { --area: var(--color-area-cerrar); }
.area-card--6 { --area: var(--color-area-operar); }
.area-card-top {
  position: relative; overflow: hidden;
  background: var(--area); color: var(--color-blanco);
  display: flex; align-items: flex-end; justify-content: space-between;
  min-height: 128px; padding: var(--space-md) var(--space-lg) 0;
  border-bottom: var(--border-md) solid var(--color-carbon);
}
.area-card-num { font-family: var(--font-display); font-size: 7rem; line-height: .72; transform: translateY(6px); }
@media (min-width: 700px) { .area-card-top { min-height: 168px; } .area-card-num { font-size: 9rem; } }
.area-card-top .icon { width: 48px; height: 48px; align-self: flex-start; margin-top: 8px; stroke-width: 1.25; }
.area-card-index { position: absolute; top: var(--space-md); left: var(--space-lg); padding: 3px 8px; background: var(--color-blanco); color: var(--color-carbon); border: var(--border-md) solid var(--color-carbon); font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.area-card-body { padding: var(--space-lg); display: grid; gap: 6px; flex: 1; align-content: start; }
.area-card-body h3 { font-size: 1.375rem; line-height: 1.2; }
.area-card-body .en { font-size: .9375rem; }
.area-card-body p { margin-top: 8px; }
.area-card-more { margin-top: auto; padding: 0 var(--space-lg) var(--space-lg); display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primary); }
.area-card-more .icon { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.area-card:hover .area-card-more .icon { transform: translateX(4px); }
@media (min-width: 700px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   PROGRAMA DE PASIVOS A ACTIVOS (S-6) · línea de ocho pasos
   ========================================================================== */
.program-intro { display: grid; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.program-intro .h2 { max-width: 16ch; }
.steps { position: relative; display: grid; gap: 0; counter-reset: step; }
.steps::before { /* línea vertical en móvil */
  content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: var(--border-heavy); background: var(--color-verde-claro);
}
.step { position: relative; display: grid; grid-template-columns: 58px 1fr; gap: var(--space-md); align-items: center; padding: 10px 0; }
.step-icon {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; background: var(--color-carbon); color: var(--color-verde-claro);
  border: var(--border-heavy) solid var(--color-verde-claro);
}
.step-icon .icon { width: 26px; height: 26px; }
.step-text { display: grid; gap: 2px; }
.step-num { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; color: var(--color-verde-claro); }
.step-name { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
@media (min-width: 1200px) {
  .steps { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
  .steps::before { left: 0; right: 0; top: 32px; bottom: auto; width: auto; height: var(--border-heavy); }
  .step { grid-template-columns: 1fr; align-items: start; padding: 0; gap: var(--space-md); }
  .step-icon { width: 68px; height: 68px; }
  .step-icon .icon { width: 30px; height: 30px; }
  .step-num { font-size: 2.75rem; }
  .step-name { font-size: 0.875rem; hyphens: auto; -webkit-hyphens: auto; }
}

/* ==========================================================================
   UN GRUPO (S-7) · diagrama de estructura
   ========================================================================== */
.org { display: grid; gap: 0; }
.org-head {
  display: grid; gap: var(--space-md); align-items: center; text-decoration: none;
  background: var(--color-verde-oscuro); color: var(--color-blanco);
  padding: var(--space-lg); border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-lg);
  position: relative; overflow: hidden;
  transition: background-color var(--dur) var(--ease);
}
.org-head:hover { background: var(--color-carbon); color: var(--color-blanco); }
.org-head img.org-logo { width: 220px; }
.org-head p { max-width: 560px; }
.org-head .org-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.org-head .org-leaves { position: absolute; right: -40px; bottom: -48px; width: 200px; opacity: .9; pointer-events: none; }
.org-connector { display: block; width: 100%; height: 56px; color: var(--color-carbon); }
.org-connector--mobile { width: 4px; height: 40px; margin-inline: auto; background: var(--color-carbon); }
.org-connector--desktop { display: none; }
.org-children { display: grid; gap: var(--grid-gutter); }
.org-card {
  display: grid; gap: var(--space-md); align-content: start; text-decoration: none; color: var(--color-ink);
  background: var(--color-surface); border: var(--border-md) solid var(--color-carbon);
  border-top: var(--border-heavy) solid var(--color-carbon);
  padding: var(--space-lg); box-shadow: var(--shadow-block);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.org-card:hover { color: var(--color-ink); transform: translate(-3px, -3px); box-shadow: var(--shadow-block-lg); }
.org-card-logo { height: 64px; display: flex; align-items: center; }
.org-card-logo img { max-height: 48px; width: auto; max-width: 100%; }
.org-card-logo .logo-aca { max-height: 64px; }
.org-card .tag { justify-self: start; color: var(--color-ink-muted); }
.org-card h3 { font-size: 1.25rem; }
.org-card p { color: var(--color-ink-muted); }
.org-card .org-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--color-primary); margin-top: auto; }
@media (min-width: 900px) {
  .org-head { grid-template-columns: auto 1fr auto; gap: var(--space-xl); padding: var(--space-lg) var(--space-xl); }
  .org-connector--mobile { display: none; }
  .org-connector--desktop { display: block; }
  .org-children { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   EXPERIENCIA (S-8) · tarjetas con mirada aérea vectorial
   ========================================================================== */
.projects { display: grid; gap: var(--grid-gutter); }
.project-card {
  display: grid; grid-template-rows: auto 1fr; text-decoration: none; color: var(--color-blanco);
  background: var(--color-carbon); border: var(--border-md) solid rgba(255,255,255,.7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.project-card:hover { color: var(--color-blanco); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 0 var(--color-verde-claro); }
.project-visual { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: var(--border-md) solid rgba(255,255,255,.7); background: var(--color-carbon); }
.project-visual svg { width: 100%; height: 100%; }
.project-num { position: absolute; left: var(--space-md); bottom: 6px; font-family: var(--font-display); font-size: 6rem; line-height: .8; color: var(--color-blanco); }
.project-body { padding: var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.project-body .tag { justify-self: start; color: var(--color-blanco); border-color: var(--color-verde-claro); }
.project-body h3 { font-size: 1.25rem; line-height: 1.3; }
.project-place { display: inline-flex; align-items: center; gap: 8px; color: var(--color-ink-muted-on-dark); font-weight: 500; }
.project-place .icon { color: var(--color-verde-claro); }
@media (min-width: 900px) { .projects { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ==========================================================================
   INDUSTRIAS (S-9) · mosaico de etiquetas
   ========================================================================== */
.industry-grid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: var(--border-md) solid var(--color-carbon); border-left: var(--border-md) solid var(--color-carbon); }
.industry-grid > li { display: flex; }
.industry-grid > li:last-child { grid-column: 1 / -1; }
.industry-tile {
  flex: 1; display: flex; align-items: center; gap: var(--space-md);
  min-height: 72px; padding: var(--space-md) var(--space-lg);
  background: var(--color-surface); color: var(--color-ink); text-decoration: none;
  border-right: var(--border-md) solid var(--color-carbon); border-bottom: var(--border-md) solid var(--color-carbon);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.industry-tile .icon { width: 32px; height: 32px; color: var(--color-verde-oscuro); transition: color var(--dur) var(--ease); }
.industry-tile .icon-arrow { width: 20px; height: 20px; margin-left: auto; opacity: 0; transition: opacity var(--dur) var(--ease); }
.industry-tile:hover { background: var(--color-verde-oscuro); color: var(--color-blanco); }
.industry-tile:hover .icon { color: var(--color-blanco); }
.industry-tile:hover .icon-arrow { opacity: 1; }
@media (min-width: 600px) { .industry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .industry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .industry-tile { min-height: 120px; flex-direction: column; align-items: flex-start; justify-content: space-between; }
  .industry-tile .icon-arrow { position: absolute; }
  .industry-tile { position: relative; }
  .industry-tile .icon-arrow { right: var(--space-md); top: var(--space-md); }
  .industry-grid > li:last-child .industry-tile { min-height: 88px; flex-direction: row; align-items: center; justify-content: flex-start; background: var(--color-verde-oscuro); color: var(--color-blanco); }
  .industry-grid > li:last-child .industry-tile .icon { color: var(--color-blanco); }
  .industry-grid > li:last-child .industry-tile:hover { background: var(--color-carbon); }
}

/* ==========================================================================
   POR QUÉ AHORA (S-10)
   ========================================================================== */
.why { display: grid; gap: var(--space-xl); align-items: center; }
.why-poster { display: flex; align-items: flex-end; gap: var(--space-md); color: var(--color-verde-claro); }
.why-poster-num { font-family: var(--font-display); font-size: clamp(10rem, 30vw, 22rem); line-height: .78; letter-spacing: -0.04em; }
.why-poster-unit { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1; padding-bottom: .1em; }
.why-poster-caption { margin-top: var(--space-md); max-width: 30ch; font-weight: 700; font-size: 1.125rem; color: var(--color-blanco); }
.why-list { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-blanco); margin-top: var(--space-lg); }
.why-list li { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--border-thin) solid rgba(255,255,255,.3); }
.why-list .icon { color: var(--color-verde-claro); width: 28px; height: 28px; margin-top: 2px; }
.why-list strong { color: var(--color-blanco); }
@media (min-width: 1024px) { .why { grid-template-columns: 5fr 7fr; gap: var(--space-2xl); } }

/* ==========================================================================
   BLOQUE DE CIERRE (CTA reutilizable)
   ========================================================================== */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-verde-oscuro); color: var(--color-blanco);
  padding-block: clamp(80px, 11vw, 160px);
}
.cta-iso { position: absolute; z-index: -1; right: -60px; top: 50%; transform: translateY(-50%); width: clamp(280px, 42vw, 620px); opacity: .16; pointer-events: none; }
.cta-band h2 { max-width: 12ch; }
.cta-band p { margin-top: var(--space-lg); max-width: 560px; font-size: var(--font-size-body-lg); }
.cta-actions { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (max-width: 599px) { .cta-actions .btn, .hero-actions .btn { width: 100%; } }

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
.site-footer { background: var(--color-carbon); color: var(--color-blanco); padding-top: var(--space-xl); }
.footer-top { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); }
.footer-brand img { width: 200px; }
.footer-brand p { margin-top: var(--space-md); font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; }
.footer-cols { display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
.footer-col h2 { font-family: var(--font-sans); font-size: var(--font-size-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink-muted-on-dark); padding-bottom: 12px; margin-bottom: 8px; border-bottom: var(--border-heavy) solid var(--color-blanco); }
.footer-col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-blanco); text-decoration: none; line-height: 1.35; padding: 4px 0; gap: 8px; }
.footer-col a:hover { text-decoration: underline; color: var(--color-blanco); }
.footer-col li { display: block; }
.footer-col .contact-item { display: grid; padding: 6px 0; line-height: 1.4; }
.footer-col .contact-item span { font-size: var(--font-size-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ink-muted-on-dark); }
.footer-col .contact-item a { min-height: 32px; padding: 2px 0; font-size: .9375rem; overflow-wrap: anywhere; }
.footer-pool { border-top: var(--border-md) solid rgba(255,255,255,.4); border-bottom: var(--border-md) solid rgba(255,255,255,.4); }
.footer-pool .container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); padding-block: var(--space-lg); }
.footer-pool .label { color: var(--color-ink-muted-on-dark); flex-basis: 100%; }
.footer-legal .container { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding-block: var(--space-md); font-size: var(--font-size-body-sm); color: var(--color-ink-muted-on-dark); }
.footer-legal a { color: var(--color-blanco); display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 700px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .footer-top { grid-template-columns: 3fr 9fr; }
  .footer-cols { grid-template-columns: 0.8fr 1.15fr 0.85fr 1.4fr; gap: var(--space-lg); }
  .footer-pool .label { flex-basis: auto; }
}

/* ==========================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */
.wa-float {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  min-width: 56px; min-height: 56px; padding: 0 18px 0 16px;
  background: var(--color-verde-oscuro); color: var(--color-blanco); text-decoration: none;
  border: var(--border-thick) solid var(--color-blanco); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-block); font-weight: 700; font-size: .9375rem;
  transition: background-color var(--dur) var(--ease);
}
.wa-float:hover { background: var(--color-carbon); color: var(--color-blanco); }
.wa-float .icon { width: 26px; height: 26px; }
.wa-float-text { display: none; }
@media (min-width: 900px) { .wa-float { right: 24px; bottom: 24px; } .wa-float-text { display: inline; } }

/* ==========================================================================
   MOVIMIENTO SOBRIO (solo si el usuario no pidió reducirlo)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Impresión mínima */
@media print {
  .site-header, .wa-float, .site-nav { position: static; display: none; }
  .hero::before { background: rgba(58, 91, 42, 1); }
}

/* ==========================================================================
   PÁGINAS INTERIORES · componentes compartidos
   ========================================================================== */

/* Migas de pan */
.breadcrumbs { background: var(--color-surface); border-bottom: var(--border-thin) solid var(--color-line-soft); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; padding-block: 6px; font-size: var(--font-size-body-sm); font-weight: 500; }
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: var(--color-ink-muted); }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-ink-muted); }

/* Encabezado de página */
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(56px, 8vw, 112px); }
.page-hero .kicker { color: inherit; }
.page-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.25rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.015em; max-width: 18ch; }
.page-title--long { font-size: clamp(2rem, 4.2vw, 3.5rem); max-width: 24ch; }
.page-lead { margin-top: var(--space-lg); max-width: 760px; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.6; }
.page-lead + .page-lead { margin-top: var(--space-md); }
.page-hero .hero-actions { margin-top: var(--space-lg); }
.page-hero-leaves { position: absolute; z-index: -1; right: -40px; bottom: -60px; width: clamp(180px, 26vw, 380px); pointer-events: none; }
.page-hero--split .container { display: grid; gap: var(--space-xl); align-items: center; }
.poster-num { font-family: var(--font-display); font-size: clamp(9rem, 26vw, 20rem); line-height: .78; letter-spacing: -0.04em; color: var(--color-verde-claro); }
@media (min-width: 1024px) { .page-hero--split .container { grid-template-columns: 7fr 5fr; } .page-hero--split .poster-num { text-align: right; } }

/* Encabezado de empresa */
.company-hero .container { display: grid; gap: var(--space-lg); }
.logo-plate { display: inline-flex; align-items: center; justify-content: center; justify-self: start; background: var(--color-blanco); padding: 20px 28px; border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-verde); }
.logo-plate img { height: 56px; width: auto; max-width: 260px; }
.logo-plate .logo-aca { height: 80px; }
.company-hero .tag { justify-self: start; color: var(--color-blanco); }

/* Encabezado de área de servicio */
.area-band { --area: var(--color-area-recuperar); background: var(--area); color: var(--color-blanco); position: relative; overflow: hidden; isolation: isolate; }
.area-band--2 { --area: var(--color-area-cumplir); }
.area-band--3 { --area: var(--color-area-recuperar); }
.area-band--4, .area-band--5 { --area: var(--color-area-cerrar); }
.area-band--6 { --area: var(--color-area-operar); }
.area-band .container { display: grid; gap: var(--space-md) var(--space-xl); align-items: end; padding-top: var(--space-lg); }
.area-band-num { font-family: var(--font-display); font-size: clamp(10rem, 30vw, 22rem); line-height: .7; transform: translateY(0.06em); }
.area-band-text { padding-bottom: var(--space-xl); display: grid; gap: var(--space-md); }
.area-band-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--color-blanco); color: var(--color-carbon); border: var(--border-md) solid var(--color-carbon); font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.area-band-chip .icon { width: 18px; height: 18px; }
.area-band .page-title { font-size: clamp(2.25rem, 5vw, 4.25rem); max-width: 16ch; }
.area-band-en { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.2; }
.area-band-icon { position: absolute; right: var(--grid-margin); top: var(--space-lg); width: 56px; height: 56px; stroke-width: 1.25; }
@media (min-width: 900px) { .area-band .container { grid-template-columns: auto 1fr; } .area-band-icon { width: 72px; height: 72px; } }
.area-intro .container { display: grid; gap: var(--space-lg); }
.area-intro .lead-strong { font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.45; font-weight: 700; color: var(--color-primary); max-width: 900px; }
.area-intro p { max-width: 820px; }

/* «Ejecuta: empresa» */
.exec-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--font-size-body-sm); font-weight: 600; }
.exec-label { font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: 2px 8px; border: var(--border-md) solid currentColor; }
.exec-tag a { display: inline-flex; align-items: center; min-height: 32px; color: var(--color-primary); font-weight: 700; }
.section--dark .exec-tag a, .section--green .exec-tag a { color: var(--color-blanco); }

/* Bloques de servicio */
.svc-grid { display: grid; gap: var(--grid-gutter); }
.svc { background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); border-top: var(--border-heavy) solid var(--color-carbon); padding: 24px; display: grid; gap: 10px; align-content: start; }
.section--light .svc { background: var(--color-surface-alt); }
.svc h3 { font-size: 1.1875rem; line-height: 1.3; }
.svc p { color: var(--color-ink-muted); }
.svc ul.dash { display: grid; gap: 6px; }
.svc ul.dash li { position: relative; padding-left: 18px; color: var(--color-ink-muted); }
.svc ul.dash li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--color-primary); }
.svc .exec-tag { margin-top: 6px; }
.svc--wide { grid-column: 1 / -1; }
.svc-group { display: grid; gap: var(--space-md); align-content: start; }
.svc-group-title { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: var(--border-heavy) solid var(--color-carbon); font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; font-weight: 400; }
.svc-group-title .icon { width: 32px; height: 32px; color: var(--color-primary); }
.svc-group .svc { padding: 20px; }
.service-block { display: grid; gap: var(--space-lg); padding-block: var(--space-lg); border-top: var(--border-heavy) solid currentColor; }
.service-block + .service-block { margin-top: var(--space-xl); }
.service-block-head { display: grid; gap: 12px; }
.service-block-head h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.625rem, 3vw, 2.25rem); line-height: 1.12; }
.service-block-body { display: grid; gap: var(--space-md); }
.service-block-body > p { max-width: 760px; }
@media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-block { grid-template-columns: 4fr 8fr; }
}

/* Ficha técnica (tabla de dos columnas) */
.spec-table { border-top: var(--border-heavy) solid var(--color-carbon); }
.spec-table caption { text-align: left; }
.spec-row { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: var(--border-thin) solid var(--color-line-soft); }
.spec-row dt { font-weight: 700; }
.spec-row dd { margin: 0; color: var(--color-ink-muted); }
.section--dark .spec-table { border-top-color: var(--color-blanco); }
.section--dark .spec-row { border-bottom-color: rgba(255,255,255,.3); }
.section--dark .spec-row dd { color: var(--color-ink-muted-on-dark); }
@media (min-width: 760px) { .spec-row { grid-template-columns: minmax(180px, 3fr) 7fr; } }

/* Mini fichas con cifra grande */
.facts { display: grid; gap: var(--grid-gutter); }
.fact { background: var(--color-surface); color: var(--color-ink); border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block); padding: 24px; display: grid; gap: 4px; align-content: start; }
.section--dark .fact, .section--green .fact { box-shadow: var(--shadow-block-verde); }
.fact-visual { height: 88px; margin-bottom: 12px; color: var(--color-verde-oscuro); }
.fact-visual svg { height: 100%; width: auto; max-width: 100%; }
.fact-num { font-family: var(--font-display); font-size: clamp(3.25rem, 6vw, 4.75rem); line-height: .95; letter-spacing: -0.02em; color: var(--color-verde-oscuro); }
.fact-unit { font-weight: 700; font-size: 1.0625rem; }
.fact-desc { color: var(--color-ink-muted); font-size: .9375rem; }
@media (min-width: 600px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .facts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .facts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Diagrama de flujo */
.flow { display: grid; gap: 0; counter-reset: flow; }
.flow-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--color-surface); color: var(--color-ink); border: var(--border-md) solid var(--color-carbon); font-weight: 700; line-height: 1.3; }
.flow-step .icon { width: 28px; height: 28px; color: var(--color-verde-oscuro); }
.flow-step--end { background: var(--color-verde-oscuro); color: var(--color-blanco); border-color: var(--color-verde-oscuro); }
.flow-step--end .icon { color: var(--color-blanco); }
.flow-arrow { display: flex; justify-content: center; color: currentColor; height: 36px; align-items: center; }
.flow-arrow .icon { transform: rotate(90deg); }
.flow-outputs { display: grid; gap: 12px; margin-top: var(--space-lg); }
.flow-output { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: var(--border-md) dashed currentColor; font-weight: 600; }
.flow-output .icon { color: var(--color-verde-claro); }
.section--light .flow-output .icon, .section--alt .flow-output .icon { color: var(--color-verde-oscuro); }
@media (min-width: 1024px) {
  .flow { grid-template-columns: repeat(var(--flow-n, 5), minmax(0, 1fr) 40px); grid-template-columns: none; display: flex; align-items: stretch; }
  .flow-step { flex: 1; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 132px; }
  .flow-arrow { width: 40px; height: auto; flex: none; }
  .flow-arrow .icon { transform: none; }
  .flow-outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Lo que recibe» */
.receive { border: var(--border-md) solid var(--color-carbon); border-top: var(--border-heavy) solid var(--color-verde-oscuro); background: var(--color-surface); padding: clamp(24px, 4vw, 48px); box-shadow: var(--shadow-block-lg); }
.receive .label { color: var(--color-primary); margin-bottom: 12px; }
.receive-text { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.4; font-weight: 600; max-width: 960px; }

/* Etiquetas de industria y de área */
.chip-links { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; border: var(--border-md) solid var(--color-carbon); font-weight: 600; font-size: .9375rem; line-height: 1.25; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip-link .icon { color: var(--color-verde-oscuro); }
.chip-link:hover { background: var(--color-verde-oscuro); color: var(--color-blanco); }
.chip-link:hover .icon { color: var(--color-blanco); }
.area-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 4px; background: var(--color-surface); color: var(--color-ink); border: var(--border-md) solid var(--color-carbon); text-decoration: none; font-weight: 600; font-size: .875rem; line-height: 1.25; }
.area-tag .area-chip { width: 34px; height: 34px; }
.area-tag:hover { background: var(--color-carbon); color: var(--color-blanco); }
.area-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* Otras áreas */
.mini-areas { display: grid; gap: 12px; }
.mini-area { --area: var(--color-area-recuperar); display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto; align-items: center; gap: 0 16px; min-height: 72px; padding-right: 16px; background: var(--color-surface); color: var(--color-ink); text-decoration: none; border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mini-area:hover { color: var(--color-ink); transform: translate(-2px, -2px); box-shadow: var(--shadow-block-lg); }
.mini-area--2 { --area: var(--color-area-cumplir); }
.mini-area--4, .mini-area--5 { --area: var(--color-area-cerrar); }
.mini-area--6 { --area: var(--color-area-operar); }
.mini-area-num { grid-row: 1 / span 2; align-self: stretch; display: flex; align-items: center; justify-content: center; background: var(--area); color: var(--color-blanco); font-family: var(--font-display); font-size: 2.25rem; border-right: var(--border-md) solid var(--color-carbon); }
.mini-area .icon { display: none; }
.mini-area-name { font-weight: 700; line-height: 1.3; padding-block: 12px; }
@media (min-width: 700px) { .mini-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .mini-areas { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mini-area { grid-template-columns: 1fr; grid-template-rows: 96px auto; padding: 0; align-items: start; }
  .mini-area-num { grid-row: 1; border-right: 0; border-bottom: var(--border-md) solid var(--color-carbon); font-size: 4rem; justify-content: flex-start; padding-left: 20px; }
  .mini-area-name { padding: 16px 20px 20px; }
}

/* Pilares */
.pillars { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-carbon); }
.pillar { display: grid; gap: 12px; padding: var(--space-lg) 0; border-bottom: var(--border-md) solid var(--color-carbon); }
.pillar .icon { width: 40px; height: 40px; color: var(--color-verde-oscuro); }
.pillar-word { font-family: var(--font-display); font-size: clamp(2.5rem, 4.6vw, 3.75rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; }
.pillar p { color: var(--color-ink-muted); max-width: 34ch; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pillar:nth-child(odd) { padding-right: var(--space-lg); border-right: var(--border-md) solid var(--color-carbon); } .pillar:nth-child(even) { padding-left: var(--space-lg); } }
@media (min-width: 1100px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pillar { border-bottom: 0; padding: var(--space-lg); border-right: var(--border-md) solid var(--color-carbon); } .pillar:first-child { padding-left: 0; } .pillar:last-child { border-right: 0; } .pillar:nth-child(even) { padding-left: var(--space-lg); } }

/* Estructura del grupo */
.org-card--plain { cursor: default; }
.org-card--plain:hover { transform: none; box-shadow: var(--shadow-block); }
.allies { margin-top: var(--space-lg); display: grid; gap: 12px; padding: var(--space-lg); border: var(--border-thick) dashed var(--color-carbon); background: var(--color-surface); }
.allies h3 { display: flex; align-items: center; gap: 12px; }
.allies h3 .icon { color: var(--color-verde-oscuro); }
.allies p { color: var(--color-ink-muted); }
.area-bar { margin-top: var(--space-lg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--border-md) solid var(--color-carbon); }
.area-bar a { --area: var(--color-area-recuperar); display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; background: var(--area); color: var(--color-blanco); text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.2; }
.area-bar a.area-bar--2 { --area: var(--color-area-cumplir); }
.area-bar a.area-bar--4, .area-bar a.area-bar--5 { --area: var(--color-area-cerrar); }
.area-bar a.area-bar--6 { --area: var(--color-area-operar); }
.area-bar a.area-bar--1, .area-bar a.area-bar--3, .area-bar a.area-bar--4, .area-bar a.area-bar--5 { color: var(--color-carbon); background: var(--color-surface); box-shadow: inset 8px 0 0 var(--area); padding-left: 20px; }
.area-bar a:hover { filter: brightness(.92); }
.area-bar-num { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }
@media (min-width: 1100px) { .area-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Ciclo con SABANICA al centro */
.cycle-wrap { display: grid; gap: var(--space-xl); align-items: center; }
.cycle-svg { display: none; width: 100%; max-width: 760px; margin-inline: auto; }
.cycle-svg text { font-family: var(--font-sans); }
.cycle-list { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-carbon); counter-reset: cyc; }
.cycle-list li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; padding: 14px 0; border-bottom: var(--border-thin) solid var(--color-line-soft); font-weight: 700; }
.cycle-list li span.n { font-family: var(--font-display); font-size: 1.75rem; color: var(--color-verde-oscuro); font-weight: 400; }
.cycle-list .cycle-center { background: var(--color-carbon); color: var(--color-blanco); padding-inline: 12px; }
.cycle-list .cycle-center span.n { color: var(--color-blanco); }
.cycle-motto { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; color: var(--color-verde-oscuro); margin-top: var(--space-lg); }
@media (min-width: 900px) {
  .cycle-wrap { grid-template-columns: 5fr 7fr; }
  .cycle-svg { display: block; }
  .cycle-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
}

/* Compromisos y sello */
.commit-grid { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-blanco); }
.commit { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-bottom: var(--border-thin) solid rgba(255,255,255,.3); }
.commit .icon { width: 32px; height: 32px; color: var(--color-verde-claro); }
.commit strong { display: block; color: var(--color-blanco); margin-bottom: 4px; }
.commit p { color: var(--color-ink-muted-on-dark); }
.commit-layout { display: grid; gap: var(--space-xl); align-items: start; }
.trace-seal { width: 220px; height: 220px; color: var(--color-blanco); }
@media (min-width: 900px) { .commit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); } }
@media (min-width: 1200px) { .commit-layout { grid-template-columns: 1fr 260px; } }

/* Capacidades + fotos */
.cap-layout { display: grid; gap: var(--space-xl); }
.photo-stack { display: grid; gap: var(--grid-gutter); align-content: start; }
.photo { margin: 0; }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-lg); }
.photo figcaption { margin-top: 12px; font-size: var(--font-size-body-sm); color: var(--color-ink-muted); }
.section--dark .photo figcaption, .section--green .photo figcaption { color: var(--color-ink-muted-on-dark); }
@media (min-width: 600px) and (max-width: 1099px) { .photo-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cap-layout { grid-template-columns: 8fr 4fr; } }

/* Tarjetas grandes de áreas (Servicios) */
.area-card-list { margin-top: 12px; display: grid; gap: 6px; }
.area-card-list li { position: relative; padding-left: 18px; font-size: .9375rem; color: var(--color-ink-muted); }
.area-card-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: var(--color-carbon); }
.wide-card { grid-column: 1 / -1; display: grid; gap: var(--space-md); align-items: center; padding: var(--space-lg); background: var(--color-carbon); color: var(--color-blanco); text-decoration: none; border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-verde); transition: transform var(--dur) var(--ease); }
.wide-card:hover { color: var(--color-blanco); transform: translate(-3px, -3px); }
.wide-card .label { color: var(--color-verde-claro); }
.wide-card h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; }
.wide-card .more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
@media (min-width: 900px) { .wide-card { grid-template-columns: 1fr auto; padding: var(--space-lg) var(--space-xl); } }

/* Modalidades / acordeón */
.acc-list { display: grid; gap: 12px; }
.acc { background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); }
.acc summary { list-style: none; display: grid; grid-template-columns: 40px 1fr 24px; gap: 12px; align-items: center; min-height: 56px; padding: 14px 18px; cursor: pointer; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .icon { color: var(--color-verde-oscuro); width: 28px; height: 28px; }
.acc summary .acc-chevron { width: 20px; height: 20px; color: var(--color-ink); transition: transform var(--dur) var(--ease); }
.acc[open] summary .acc-chevron { transform: rotate(180deg); }
.acc-body { padding: 0 18px 18px 70px; color: var(--color-ink-muted); }
.acc-body ul { display: grid; gap: 8px; }
.acc-body li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.acc-body li .icon { width: 20px; height: 20px; color: var(--color-verde-oscuro); margin-top: 2px; }
@media (min-width: 900px) {
  .acc-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-list--grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acc--static summary { cursor: default; grid-template-columns: 40px 1fr; }
  .acc--static summary .acc-chevron { display: none; }
}

/* Programa: pasos detallados */
.steps-detail { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-verde-claro); }
.step-d { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-bottom: var(--border-thin) solid rgba(255,255,255,.3); }
.step-d-num { font-family: var(--font-display); font-size: 3.5rem; line-height: .85; color: var(--color-verde-claro); }
.step-d h3 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 6px; }
.step-d h3 .icon { color: var(--color-verde-claro); }
.step-d p { color: var(--color-ink-muted-on-dark); }
@media (min-width: 900px) { .steps-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); } }
@media (min-width: 1200px) {
  .steps-detail { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-lg); }
  .step-d { grid-template-columns: 1fr; gap: 12px; }
  .step-d-num { font-size: 5rem; }
}

/* Resultados con ícono */
.results { display: grid; gap: var(--grid-gutter); }
.result { background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); padding: 24px; display: grid; gap: 10px; align-content: start; }
.result .icon { width: 36px; height: 36px; color: var(--color-verde-oscuro); }
.result h3 { font-size: 1.125rem; }
.result p { color: var(--color-ink-muted); font-size: .9375rem; }
.result--accent { background: var(--color-verde-oscuro); color: var(--color-blanco); border-color: var(--color-verde-oscuro); }
.result--accent .icon, .result--accent p { color: var(--color-blanco); }
@media (min-width: 600px) { .results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Participantes */
.participants { display: grid; gap: var(--grid-gutter); }
.participant { display: grid; gap: 8px; padding: 24px; border: var(--border-md) solid var(--color-carbon); border-top: var(--border-heavy) solid var(--color-carbon); background: var(--color-surface); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur) var(--ease); }
.participant:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.participant strong { font-size: 1.125rem; }
.participant span { color: var(--color-ink-muted); }
.participant .more { color: var(--color-primary); font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
@media (min-width: 700px) { .participants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .participants { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Industrias */
.jump-bar { position: sticky; top: 64px; z-index: 20; background: var(--color-surface); border-bottom: var(--border-md) solid var(--color-carbon); }
.jump-bar .container { display: flex; gap: 8px; overflow-x: auto; padding-block: 10px; scrollbar-width: thin; }
.jump-bar a { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 14px; border: var(--border-md) solid var(--color-carbon); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: .875rem; white-space: nowrap; }
.jump-bar a .icon { width: 18px; height: 18px; color: var(--color-verde-oscuro); }
.jump-bar a:hover { background: var(--color-verde-oscuro); color: var(--color-blanco); }
.jump-bar a:hover .icon { color: var(--color-blanco); }
.ind-cards { display: grid; gap: var(--grid-gutter); }
.ind-card { scroll-margin-top: 150px; display: grid; gap: 16px; align-content: start; background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block); padding: 24px; }
.ind-card-head { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: var(--border-heavy) solid var(--color-carbon); }
.ind-card-head .icon { width: 40px; height: 40px; color: var(--color-verde-oscuro); }
.ind-card-head .num { margin-left: auto; font-family: var(--font-display); font-size: 2rem; color: var(--color-verde-medio); }
.ind-card h2 { font-family: var(--font-sans); font-size: 1.25rem; line-height: 1.25; font-weight: 700; }
.ind-card .label { color: var(--color-ink-muted); margin-bottom: 6px; }
.ind-problems { display: grid; gap: 4px; color: var(--color-ink-muted); }
.ind-problems li { position: relative; padding-left: 16px; }
.ind-problems li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--color-ink-muted); }
.ind-answer { color: var(--color-primary); font-weight: 600; }
.ind-card--wide { background: var(--color-verde-oscuro); color: var(--color-blanco); border-color: var(--color-carbon); }
.ind-card--wide .ind-card-head { border-bottom-color: var(--color-blanco); }
.ind-card--wide .ind-card-head .icon, .ind-card--wide .ind-card-head .num { color: var(--color-blanco); }
.ind-card--wide .label, .ind-card--wide .ind-problems { color: var(--color-blanco); }
.ind-card--wide .ind-problems li::before { background: var(--color-blanco); }
.ind-card--wide .ind-answer { color: var(--color-blanco); }
@media (min-width: 700px) { .ind-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ind-card--wide { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .ind-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ind-card--wide { grid-template-columns: 1fr 1fr 1fr; column-gap: var(--space-lg); } .ind-card--wide .ind-card-head { grid-column: 1 / -1; } }

/* Experiencia: proyectos alternados */
.project-rows { display: grid; gap: var(--space-xl); }
.project-row { display: grid; gap: var(--space-lg); align-items: center; }
.project-row .project-visual { border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-lg); aspect-ratio: 16 / 10; }
.project-row-body { display: grid; gap: var(--space-md); align-content: start; }
.project-row-body .tag { justify-self: start; color: var(--color-primary); }
.project-row-body h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.1; }
.project-row-body .project-place { color: var(--color-ink-muted); }
.project-row-body .project-place .icon { color: var(--color-verde-oscuro); }
.project-row-num { font-family: var(--font-display); font-size: 4rem; line-height: .8; color: var(--color-verde-medio); }
@media (min-width: 900px) {
  .project-row { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .project-row:nth-child(even) .project-visual { order: 2; }
}

/* Presencia: mapa */
.presence { display: grid; gap: var(--space-xl); align-items: center; }
.vzla-map { width: 100%; max-width: 720px; height: auto; }
.vzla-map text { font-family: var(--font-sans); }
.map-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: var(--space-md); color: var(--color-ink-muted-on-dark); font-size: var(--font-size-body-sm); }
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.map-legend i { display: inline-block; width: 18px; height: 18px; border: var(--border-md) solid var(--color-blanco); }
.map-legend i.ops { background: var(--color-verde-claro); }
.map-legend i.pin { border-radius: 50%; background: var(--color-blanco); width: 14px; height: 14px; }
.presence-figs { display: grid; gap: var(--space-lg); }
.presence-figs .poster-num { font-size: clamp(9rem, 22vw, 16rem); }
.presence-figs .figure-label { color: var(--color-blanco); }
.presence-mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); border-top: var(--border-heavy) solid var(--color-blanco); padding-top: var(--space-md); }
.presence-mini .n { font-family: var(--font-display); font-size: 4rem; line-height: .9; color: var(--color-verde-claro); }
.presence-mini p { color: var(--color-ink-muted-on-dark); }
@media (min-width: 1024px) { .presence { grid-template-columns: 7fr 5fr; } }

/* Su empresa en norma */
.change-table { width: 100%; border-collapse: collapse; }
.change-table caption { text-align: left; }
.change-table th, .change-table td { text-align: left; vertical-align: top; padding: 16px; border-bottom: var(--border-thin) solid rgba(255,255,255,.3); }
.change-table thead th { font-size: var(--font-size-label); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--color-ink-muted-on-dark); border-bottom: var(--border-heavy) solid var(--color-blanco); }
.change-table tbody th { font-weight: 700; color: var(--color-blanco); width: 34%; }
.change-table td { color: var(--color-ink-muted-on-dark); }
.change-table td.how { color: var(--color-blanco); font-weight: 600; }
@media (max-width: 899px) {
  .change-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .change-table, .change-table tbody, .change-table tr, .change-table th, .change-table td { display: block; width: 100%; }
  .change-table tr { border: var(--border-md) solid rgba(255,255,255,.6); margin-bottom: 16px; padding: 8px 4px; }
  .change-table th, .change-table td { border: 0; padding: 8px 12px; }
  .change-table tbody th { width: 100%; }
  .change-table td::before { content: attr(data-label); display: block; font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-blanco); margin-bottom: 4px; }
}
.side-fact { border: var(--border-heavy) solid var(--color-verde-claro); padding: var(--space-lg); display: grid; gap: 8px; }
.side-fact .n { font-family: var(--font-display); font-size: clamp(5rem, 10vw, 8rem); line-height: .85; color: var(--color-verde-claro); }
.side-fact p { font-weight: 700; font-size: 1.125rem; }
.norm-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1200px) { .norm-layout { grid-template-columns: 9fr 3fr; } .side-fact { position: sticky; top: 100px; } }

.checklist { display: grid; gap: var(--grid-gutter); }
.check-block { background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block); }
.check-block summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 16px 20px; background: var(--color-verde-oscuro); color: var(--color-blanco); font-weight: 700; font-size: 1.125rem; cursor: pointer; line-height: 1.25; }
.check-block:nth-child(3n+2) summary { background: var(--color-carbon); }
.check-block:nth-child(3n+3) summary { background: var(--color-verde-oscuro); }
.check-block summary::-webkit-details-marker { display: none; }
.check-block summary .n { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; }
.check-block summary .acc-chevron { margin-left: auto; width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.check-block[open] summary .acc-chevron { transform: rotate(180deg); }
.check-items { display: grid; gap: 10px; padding: 20px; }
.check-items li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .9375rem; line-height: 1.45; }
.check-items .icon { width: 22px; height: 22px; color: var(--color-verde-oscuro); stroke-width: 2; }
@media (min-width: 760px) { .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .checklist { grid-template-columns: repeat(3, minmax(0, 1fr)); } .check-block summary { cursor: default; } .check-block summary .acc-chevron { display: none; } }

.steps-band { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-carbon); }
.steps-band li { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 20px 0; border-bottom: var(--border-thin) solid var(--color-line-soft); }
.steps-band .n { font-family: var(--font-display); font-size: 3.25rem; line-height: .85; color: var(--color-verde-oscuro); }
.steps-band h3 { font-size: 1.125rem; margin-bottom: 4px; }
.steps-band p { color: var(--color-ink-muted); }
@media (min-width: 1100px) { .steps-band { grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 0; gap: var(--grid-gutter); } .steps-band li { grid-template-columns: 1fr; border-bottom: 0; border-top: var(--border-heavy) solid var(--color-carbon); padding-top: 20px; } .steps-band .n { font-size: 4.5rem; } }

.legal { border: var(--border-md) solid var(--color-carbon); background: var(--color-surface); }
.legal summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 20px; cursor: pointer; font-weight: 700; }
.legal summary::-webkit-details-marker { display: none; }
.legal summary .acc-chevron { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.legal[open] summary .acc-chevron { transform: rotate(180deg); }
.legal-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 20px; border-top: var(--border-thin) solid var(--color-line-soft); }
.legal-table thead th { font-size: var(--font-size-label); letter-spacing: .2em; text-transform: uppercase; color: var(--color-ink-muted); border-top: var(--border-heavy) solid var(--color-carbon); }
.legal-table tbody th { width: 40%; }
.legal-table td { color: var(--color-ink-muted); }
@media (max-width: 599px) { .legal-table thead { display: none; } .legal-table tr { display: block; border-top: var(--border-thin) solid var(--color-line-soft); padding: 8px 0; } .legal-table th, .legal-table td { display: block; width: 100%; border: 0; padding: 4px 20px; } }

.related-card { display: grid; gap: var(--space-md); max-width: 760px; }

/* Empresa: sellos ISO (Organización Internacional de Normalización) */
.iso-seals { display: grid; gap: var(--grid-gutter); }
.iso-seal { display: grid; justify-items: center; text-align: center; gap: 8px; padding: var(--space-lg) var(--space-md); border: var(--border-heavy) double var(--color-carbon); background: var(--color-surface); }
.iso-seal .iso { font-size: var(--font-size-label); font-weight: 700; letter-spacing: .3em; }
.iso-seal .n { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 5rem); line-height: .9; color: var(--color-verde-oscuro); }
.iso-seal p { font-weight: 600; }
@media (min-width: 700px) { .iso-seals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.two-col { display: grid; gap: var(--grid-gutter); }
.two-col > div { padding: var(--space-lg); border: var(--border-md) solid var(--color-carbon); background: var(--color-surface); color: var(--color-ink); display: grid; gap: 12px; align-content: start; }
.two-col h3 { display: flex; gap: 12px; align-items: center; font-size: 1.375rem; }
.two-col h3 .icon { width: 32px; height: 32px; color: var(--color-verde-oscuro); }
.two-col p { color: var(--color-ink-muted); }
.motto { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.05; margin-top: var(--space-xl); }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }

.what-list { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-carbon); }
.what-list li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 18px 0; border-bottom: var(--border-thin) solid var(--color-line-soft); }
.what-list li .icon { color: var(--color-verde-oscuro); margin-top: 2px; }
.what-list strong { color: var(--color-ink); }
.what-list span { color: var(--color-ink-muted); }
@media (min-width: 1000px) { .what-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-xl); } }

.check-line { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 1.125rem; }
.check-line .icon { color: var(--color-verde-oscuro); width: 28px; height: 28px; }

/* Contacto */
.contact-layout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 7fr 5fr; } }
.form { display: grid; gap: 20px; background: var(--color-surface); border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-lg); padding: clamp(20px, 4vw, 40px); }
.form-grid { display: grid; gap: 20px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--full { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; }
.field label, .field .field-label { font-weight: 700; font-size: .9375rem; }
.field .req { color: var(--color-danger); }
.field .opt { color: var(--color-ink-muted); font-weight: 500; font-size: .875rem; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--color-ink); background: var(--color-surface);
  border: var(--border-md) solid var(--color-carbon); border-radius: var(--radius-1);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #333 50%), linear-gradient(135deg, #333 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { box-shadow: inset 0 0 0 1.5px var(--color-carbon); }
.field-error { display: none; align-items: center; gap: 6px; color: var(--color-danger); font-size: .875rem; font-weight: 600; }
.field-error .icon { width: 18px; height: 18px; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--color-danger); border-width: 2px; }
.field.is-invalid .field-error { display: flex; }
.field-check { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.field-check input { width: 24px; height: 24px; min-height: 0; margin: 2px 0 0; accent-color: var(--color-verde-oscuro); }
.field-check label { font-weight: 500; }
.field-check .field-error { grid-column: 2; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-note { font-size: .875rem; color: var(--color-ink-muted); }
.form-alert { display: none; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 20px; border: var(--border-thick) solid; font-weight: 600; }
.form-alert .icon { width: 28px; height: 28px; }
.form-alert.is-visible { display: grid; }
.form-alert--success { border-color: var(--color-verde-oscuro); background: var(--color-surface-alt); color: var(--color-verde-oscuro); }
.form-alert--error { border-color: var(--color-danger); background: var(--color-surface); color: var(--color-danger); }
.form-alert a { color: inherit; }
.channels { display: grid; gap: 0; border-top: var(--border-heavy) solid var(--color-carbon); }
.channel { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 16px 0; border-bottom: var(--border-thin) solid var(--color-line-soft); }
.channel .icon { width: 28px; height: 28px; color: var(--color-verde-oscuro); }
.channel .k { display: block; font-size: var(--font-size-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ink-muted); }
.channel a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-weight: 700; overflow-wrap: anywhere; }
.channel address { font-style: normal; font-weight: 600; }
.map-link { margin-top: 6px; }
.aside-box { margin-top: var(--space-lg); padding: var(--space-lg); background: var(--color-verde-oscuro); color: var(--color-blanco); display: grid; gap: 12px; }
.aside-box p { color: var(--color-blanco); }
.aside-box strong { color: var(--color-blanco); }

/* Privacidad */
.prose { max-width: 720px; display: grid; gap: var(--space-lg); }
.prose h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700; padding-top: var(--space-md); border-top: var(--border-heavy) solid var(--color-carbon); }
.prose p { font-size: 1.0625rem; }
.prose .updated { color: var(--color-ink-muted); font-size: .9375rem; }

/* 404 */
.e404 .container { display: grid; gap: var(--space-lg); }
.e404-num { font-family: var(--font-display); font-size: clamp(9rem, 32vw, 24rem); line-height: .78; color: var(--color-verde-oscuro); letter-spacing: -0.04em; }

/* Utilidades */
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.stack { display: grid; gap: var(--space-md); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-md); }
@media (max-width: 599px) { .btn-row .btn { width: 100%; } }
.mt-sm { margin-top: var(--space-sm); }

/* Ajustes: notas en tarjetas de área, cifras medianas, logos del pool siempre menores que el de GEF */
.mini-area-note { display: block; margin-top: 4px; font-weight: 500; font-size: .875rem; color: var(--color-ink-muted); }
.mini-area--p { --area: var(--color-blanco); }
.mini-area--p .mini-area-num { color: var(--color-verde-oscuro); }
@media (min-width: 1200px) { .mini-areas--fit { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.figure-num--sm { font-size: clamp(3.5rem, 8vw, 7rem); }
.pool-logos img { height: 24px; }
.pool-logos .pool-aca img { height: 32px; }
.org-card-logo img { max-width: 200px; max-height: 40px; }
.org-card-logo .logo-aca { max-height: 56px; }
.logo-plate img { height: auto; width: 124px; max-width: 124px; }
.logo-plate .logo-aca { width: 120px; height: auto; }
@media (min-width: 1024px) { .brand img { width: 156px; } .site-header.is-compact .brand img { width: 124px; } }

@media (min-width: 1100px) { .pillar-word { font-size: clamp(2.125rem, 2.7vw, 2.625rem); } }

/* Áreas de servicio: listas, columnas y diagramas */
.dash-list { display: grid; gap: 10px; }
.dash-list li { position: relative; padding-left: 22px; }
.dash-list li::before { content: ""; position: absolute; left: 0; top: .75em; width: 12px; height: 2px; background: var(--color-primary); }
.dash-list strong { color: var(--color-ink); }
.service-block-body .dash-list li { color: var(--color-ink-muted); }
.service-block-body .spec-table { margin-top: var(--space-md); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.svc-columns { display: grid; gap: var(--space-xl); }
.svc-stack { display: grid; gap: 12px; }
.svc-stack .svc p { color: var(--color-ink-muted); }
.svc-stack .svc strong { color: var(--color-ink); }
@media (min-width: 1100px) { .svc-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gutter); } }
.intro-split { display: grid; gap: var(--space-xl); align-items: center; }
.intro-aside svg { width: 100%; height: auto; border: var(--border-md) solid var(--color-carbon); box-shadow: var(--shadow-block-lg); }
@media (min-width: 1024px) { .intro-split { grid-template-columns: 7fr 5fr; } }
.rerefine { display: grid; gap: var(--space-xl); align-items: center; }
.rerefine .flow { width: 100%; }
@media (min-width: 1024px) { .rerefine { grid-template-columns: 8fr 4fr; } }
.section--dark .side-fact p, .section--green .side-fact p { color: var(--color-blanco); }
.commit-grid--1 { grid-template-columns: 1fr !important; }
.cap-layout--rev { align-items: center; }
@media (min-width: 1100px) { .cap-layout--rev { grid-template-columns: 5fr 7fr; } }
.area-grid > .wide-li { grid-column: 1 / -1; }
.section--dark .check-line .icon, .section--green .check-line .icon { color: var(--color-verde-claro); }
.site-header.is-compact ~ main .jump-bar { top: 64px; }
.area-grid--services .area-card-body p.label { color: var(--color-ink-muted); }
.receive + .btn-row { margin-top: var(--space-lg); }
.section--light .receive { background: var(--color-surface-alt); }
.service-block-head { align-content: start; }

@media (min-width: 700px) { .form-grid { align-items: end; } }

.section--green .poster-num { color: var(--color-blanco); }
.area-chip { font-size: 1.5rem; }
.area-tag .area-chip { font-size: 1.5rem; }