/* =========================================================
   Alliance Risk & Protection — styles.css
   Paleta: negro profundo #0a0a0a + rojo #c8102e + grises
   Tipografía: Moderat Extended (titulares) + Poppins (cuerpo)
   ========================================================= */

/* --- Fuentes oficiales Alliance (carga local) ------------------ */
/* Moderat Extended: Regular / Medium / Bold + sus Italic */
@font-face {
  font-family: 'Moderat Extended';
  src: url('../assets/fonts/Moderat/Moderat-Extended-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat Extended';
  src: url('../assets/fonts/Moderat/Moderat-Extended-Regular-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat Extended';
  src: url('../assets/fonts/Moderat/Moderat-Extended-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat Extended';
  src: url('../assets/fonts/Moderat/Moderat-Extended-Medium-Italic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat Extended';
  src: url('../assets/fonts/Moderat/Moderat-Extended-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Moderat Extended';
  src: url('../assets/fonts/Moderat/Moderat-Extended-Bold-Italic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Poppins: Light / Regular / Medium / SemiBold / Bold */
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../assets/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Reset suave ------------------------------------------------ */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  background: #0a0a0a;
  color: #fff;
  font-family: 'Poppins', system-ui, sans-serif;
  overflow-x: hidden;
}

/* Reset responsive de medios: ninguna imagen/svg/video desborda su contenedor
   en pantallas estrechas. Las reglas específicas (logo navbar, etc.) mantienen
   mayor especificidad y siguen mandando. */
img, svg, video { max-width: 100%; }
img { height: auto; }

/* Tamaño base de párrafos un poco más grande para mejor lectura */
p { font-size: 1.15rem; line-height: 1.7; }

/* --- Variables -------------------------------------------------- */
:root {
  --alliance-black: #0a0a0a;
  --alliance-red: #c8102e;
  --alliance-red-dark: #9c0c24;
  --alliance-gray-900: #111;
  --alliance-gray-800: #1a1a1a;
  --alliance-gray-700: #2a2a2a;
  --alliance-gray-400: #9a9a9a;

  /* Altura del navbar fijo — usada para clearance de títulos.
     Navbar afinado: padding 0.75rem + logo 64px (ahora domina sobre el
     navbar__inner min-height 56px) + margen. */
  --nav-h: 92px;
}
@media (max-width: 900px) {
  /* Navbar afinado en móvil: padding 0.65rem + logo 52px + margen. */
  :root { --nav-h: 78px; }
}

/* ── Scroll-margin para anclas (#promesa, #sectores, etc.):
   al hacer click en un link interno, la sección no queda pegada al navbar. */
section[id]:not(.hero):not(#inicio) {
  scroll-margin-top: calc(var(--nav-h) + 1rem);
}

/* --- FAQ accesible (details/summary nativo, sin JS; theme-agnostic) ------ */
.faq { max-width: 62ch; margin: 2rem auto 0; }
.faq__item { border-bottom: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 18%, transparent); }
.faq__item > summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: "+";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--alliance-red);
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.faq__item[open] > summary::after { content: "\2212"; }
.faq__item > p {
  margin: 0 0 1.25rem;
  line-height: 1.7;
  opacity: 0.82;
  max-width: 60ch;
}
.faq__item > summary:focus-visible { outline: 2px solid var(--alliance-red); outline-offset: 3px; border-radius: 4px; }

/* --- Utilidades base (equivalen a las clases Tailwind usadas en <body>;
   incorporadas aquí tras retirar el CDN de Tailwind Play) --------- */
.bg-alliance-black { background-color: #0a0a0a; }
.text-white { color: #fff; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* --- Tipografía editorial -------------------------------------- */
.font-serif { font-family: 'Moderat Extended', 'Poppins', sans-serif; }
.font-sans  { font-family: 'Poppins', system-ui, sans-serif; }

.display-xl {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--alliance-red);
}

/* --- Noise texture cinematográfica ----------------------------- */
/* Se aplica como capa fija sobre fondos oscuros · opacity sutil máx 0.035 */
.noise { position: relative; }
.noise::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Noise global sobre body (sutil) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* --- Scrollbar oscuro ----------------------------------------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--alliance-red); }

/* --- Selección ------------------------------------------------ */
::selection { background: var(--alliance-red); color: #fff; }

/* --- Botones magnéticos --------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 1.6rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.btn .arrow { transition: transform 0.3s ease; position: relative; z-index: 2; }
.btn:hover .arrow { transform: translateX(6px); }
.btn > *:not(.arrow) { position: relative; z-index: 2; }

.btn-primary {
  background: var(--theme-accent, var(--alliance-red));
  color: var(--theme-on-accent, #fff);
  border-color: var(--theme-accent, var(--alliance-red));
}
.btn-primary .arrow,
.btn-primary i { color: var(--theme-on-accent, #fff); }
.btn-primary:hover {
  background: var(--theme-accent-hover, #a30d27);
  color: var(--theme-on-accent, #fff);
  border-color: var(--theme-accent-hover, #a30d27);
  box-shadow: 0 18px 36px rgba(200, 16, 46, 0.35);
  transform: translateY(-2px);
}
.btn-primary:hover .arrow,
.btn-primary:hover i { color: var(--theme-on-accent, #fff); }

.btn-ghost {
  background: transparent;
  color: var(--theme-fg, #fff);
  border-color: var(--theme-border-strong, rgba(255,255,255,0.4));
}
.btn-ghost .arrow,
.btn-ghost i { color: inherit; }
/* Pseudo-element que crece de izquierda a derecha al hover */
.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--alliance-red);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-ghost:hover {
  color: #ffffff;
  border-color: var(--alliance-red);
}
.btn-ghost:hover .arrow,
.btn-ghost:hover i { color: #ffffff; }
.btn-ghost:hover::before {
  width: 100%;
}

/* --- Link con underline animado (crece desde el centro) ------- */
.link-anim {
  position: relative;
  display: inline-block;
  color: var(--theme-fg, #fff);
  transition: color 0.3s;
}
.link-anim::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              left 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.link-anim:hover::after {
  left: 0;
  width: 100%;
}
.link-anim:hover { color: var(--theme-accent, var(--alliance-red)); }

/* Navbar blanco sólido: texto negro en vez del blanco por defecto de
   .link-anim (que se mantiene blanco en footer y otros usos sobre fondo
   oscuro). Sin subrayado nativo del navegador. Scoped a .navbar__menu —
   no toca la clase .link-anim compartida. */
.navbar__menu .link-anim {
  color: #1a1a1a;
  text-decoration: none;
}
.navbar__menu .link-anim:link,
.navbar__menu .link-anim:visited {
  text-decoration: none;
}

/* --- Reveal helpers (animan al entrar al viewport) ------------ */
.reveal { opacity: 0; transform: translateY(40px); }
.reveal-fade { opacity: 0; }

/* --- Container editorial ------------------------------------- */
.container-edit {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
@media (min-width: 640px)  { .container-edit { padding: 0 1.75rem; } }
@media (min-width: 1024px) { .container-edit { padding: 0 2rem; } }

/* --- Section spacing ----------------------------------------- */
section { position: relative; }
/* Top: solo navbar clearance + respiro mínimo (la sección debe caber en una pantalla).
   Bottom: menos espacio para mantener altura compacta. */
.section-pad { padding: calc(var(--nav-h) + 0.5rem) 0 2.25rem; }
@media (max-width: 768px) {
  .section-pad { padding: calc(var(--nav-h) + 0.5rem) 0 1.75rem; }
}

/* --- Section divider (línea decorativa entre secciones) ------- */
.section-divider {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
  background: inherit;
}
.section-divider::after {
  content: '';
  display: block;
  width: 80px;
  height: 1px;
  background: var(--alliance-red);
}
@media (max-width: 768px) {
  .section-divider { padding: 28px 0; }
}

/* --- Image hover utilities ----------------------------------- */
.img-zoom { overflow: hidden; }
.img-zoom img,
.img-zoom .bg-img {
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.img-zoom:hover img,
.img-zoom:hover .bg-img { transform: scale(1.08); }

/* =============== NAVBAR =============== */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Menú blanco sólido, siempre (no transparente/glass) — letras negras. */
  background-color: #ffffff;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  transition: padding 0.4s ease, box-shadow 220ms ease;
  padding: 0.75rem 0;
}
.navbar.is-scrolled {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(10,10,10,0.08);
  box-shadow: 0 4px 24px rgba(10,10,10,0.06);
  padding: 0.6rem 0;
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
}
.navbar__logo { display: inline-flex; align-items: center; margin-right: 0.5rem; }
.navbar__logo img {
  max-height: 64px;
  width: auto;
  display: block;
  transition: max-height 0.4s ease;
}
.navbar.is-scrolled .navbar__logo img { max-height: 52px; }

.navbar__menu {
  display: none;
  gap: 1.25rem;
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 500;
  align-items: center;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .navbar__menu { display: flex; }
}
@media (min-width: 1280px) {
  .navbar__menu { gap: 1.75rem; font-size: 0.78rem; letter-spacing: 0.1em; }
}
/* Navbar más fino: tipografía compacta uniforme del menú (gana por especificidad
   sobre .navbar__menu, sin importar el breakpoint) */
.navbar .navbar__menu a,
.navbar .navbar__menu a:link,
.navbar .navbar__menu a:visited {
  font-size: 0.82rem;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-decoration: none;
}

.navbar__cta { display: none; }
@media (min-width: 1024px) {
  .navbar__cta {
    display: inline-flex;
    padding: 0.5rem 1.1rem;
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Navbar fino en tablet/móvil (el layout con burger ya aplica <1024px) */
@media (max-width: 900px) {
  .navbar { padding-block: 0.65rem; }
  .navbar__inner { min-height: 52px; }
  .navbar__logo img { max-height: 52px; }
}

/* --- Burger --- */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(10,10,10,0.18);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.burger:hover { background: rgba(10,10,10,0.05); border-color: rgba(10,10,10,0.4); }
.burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #0a0a0a;
  transition: transform 0.4s, opacity 0.3s;
}
.burger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1024px) { .burger { display: none; } }

/* --- Mobile menu drawer --- */
.mobile-menu {
  position: fixed;
  inset: 0;
  height: 100dvh; /* usa el viewport dinámico: evita cortes por la barra del navegador móvil */
  background: #0a0a0a;
  z-index: 90;
  padding: calc(env(safe-area-inset-top) + 5rem) 1.5rem calc(env(safe-area-inset-bottom) + 1.75rem);
  transform: translateY(-100%);
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 0; }
.mobile-menu__nav a {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.35rem, 5.5vw, 2rem);
  line-height: 1.15;
  font-weight: 500;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  transition: color 0.3s, padding-left 0.4s;
}
.mobile-menu__nav a:hover { color: var(--alliance-red); padding-left: 0.5rem; }
.mobile-menu__nav .num {
  flex-shrink: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--alliance-red);
  font-weight: 500;
}
.mobile-menu__footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mobile-menu__footer p {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  color: var(--alliance-gray-400);
  font-size: 1rem;
}
/* Pantallas de poca altura (móvil apaisado o teléfonos pequeños): aún más compacto */
@media (max-height: 720px) {
  .mobile-menu { padding-top: calc(env(safe-area-inset-top) + 4rem); }
  .mobile-menu__nav a { font-size: clamp(1.15rem, 4.8vw, 1.6rem); padding: 0.45rem 0; }
  .mobile-menu__footer { padding-top: 1.25rem; }
}
body.no-scroll { overflow: hidden; }

/* =============== HERO =============== */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #050505;
}
/* Esquinas L-shape decorativas (elementos HTML reales para no chocar con .noise::before) */
.hero__corner {
  position: absolute;
  width: 60px;
  height: 60px;
  opacity: 0.6;
  z-index: 4;
  pointer-events: none;
}
.hero__corner--tl {
  top: 90px;
  left: 2rem;
  border-top: 1px solid rgba(200, 16, 46, 0.4);
  border-left: 1px solid rgba(200, 16, 46, 0.4);
}
.hero__corner--br {
  bottom: 1.5rem;
  right: 2rem;
  border-bottom: 1px solid rgba(200, 16, 46, 0.4);
  border-right: 1px solid rgba(200, 16, 46, 0.4);
}
@media (max-width: 768px) {
  .hero__corner { width: 36px; height: 36px; }
  .hero__corner--tl { top: 80px; left: 1rem; }
  .hero__corner--br { bottom: 1rem; right: 1rem; }
}
.hero__video-wrap {
  position: absolute;
  inset: -10% 0 -10% 0;
  z-index: 0;
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.7) contrast(1.05) saturate(0.95);
}
/* Split overlay: protege el texto a la izquierda, deja respirar el video a la derecha */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.20) 100%);
}
.hero__content {
  position: relative;
  z-index: 3;
  padding-top: 4rem;
  padding-bottom: 2.5rem;
  max-width: 1240px;
}
.hero__title {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  line-height: 1.1;
  margin: 0.85rem 0 1.1rem;
  max-width: 760px;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Cada línea del título (para stagger GSAP)
   Estado base VISIBLE — si GSAP no carga, el contenido sigue legible.
   GSAP usa gsap.set() en main.js para ocultar y luego anima a visible. */
.hero__line {
  display: block;
  overflow: hidden;
}
.hero__line-inner {
  display: inline-block;
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}
.hero__eyebrow,
.hero__sub,
.hero__ctas {
  opacity: 1;
  transform: none;
  will-change: transform, opacity;
}
.hero__title em {
  font-style: italic;
  color: #fff;
  position: relative;
}
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0.08em;
  height: 0.08em;
  background: var(--alliance-red);
}
.hero__accent { color: var(--alliance-red); font-style: italic; }

.hero__sub {
  max-width: 52ch;
  font-size: clamp(0.9rem, 1vw, 1.02rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.75rem;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Scroll indicator · esquina inferior derecha */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  right: 6rem;
  left: auto;
  transform: none;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.65rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  transition: color 0.3s;
}
.hero__scroll:hover { color: #fff; }
.hero__scroll-text { font-weight: 500; }
.hero__scroll-line {
  position: relative;
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -30px;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(180deg, transparent, var(--alliance-red));
  animation: scrollDown 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes scrollDown {
  0%   { top: -30px; }
  60%  { top: 60px; }
  100% { top: 60px; }
}
@media (max-width: 768px) {
  .hero__scroll { display: none; }
  .hero__content {
    padding-top: 5rem;
    padding-bottom: 2rem;
  }
  .hero__title {
    margin: 1rem 0 1.25rem;
  }
  .hero__sub {
    font-size: 0.9rem;
    margin-bottom: 1.75rem;
    max-width: none;
  }
}

/* =============== BANDA DE CONFIANZA =============== */
.trust {
  position: relative;
  background: #111111;
  border-top: 1px solid rgba(200,16,46,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 4.5rem 0;
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1rem;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .trust__grid { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; }
}
.trust__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
  padding: 1rem 0 1rem 1.5rem;
}
@media (min-width: 768px) {
  .trust__item + .trust__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
  }
}
@media (max-width: 768px) {
  .trust__item { padding-left: 1rem; border-left: 1px solid rgba(255,255,255,0.08); }
}
.trust__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--alliance-red);
  display: inline-flex;
  align-items: baseline;
}
.trust__num .sep { color: var(--alliance-red); margin: 0 0.05em; }
.trust__num span[data-counter] {
  color: var(--alliance-red);
  -webkit-text-fill-color: var(--alliance-red);
}
.trust__label {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #999;
  font-weight: 500;
  line-height: 1.5;
}

/* =============== MODELO GERA =============== */
.gera {
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 50%, #0a0a0a 100%);
}
.gera__head {
  max-width: 1100px;
  margin: 0 auto 4.5rem;
  text-align: center;
}
.gera__title {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  margin: 1.25rem 0 1.5rem;
}
.gera__title em { color: var(--alliance-red); font-style: italic; }
.gera__intro {
  max-width: 65ch;
  margin: 0 auto;
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  line-height: 1.7;
}
.gera__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 4rem;
}
@media (min-width: 768px) { .gera__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .gera__grid { grid-template-columns: repeat(4, 1fr); } }

.gera-card {
  position: relative;
  background: var(--theme-card-bg, #111);
  border: 1px solid var(--theme-card-border, rgba(255,255,255,0.06));
  padding: 2.5rem 2rem;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.5s, transform 0.5s, background 0.5s;
}
.gera-card:hover {
  border-color: rgba(200, 16, 46, 0.6);
  background: #141414;
  transform: translateY(-6px);
}
.gera-card__bg {
  position: absolute;
  top: -0.15em;
  right: -0.1em;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(11rem, 22vw, 18rem);
  line-height: 0.85;
  color: rgba(200, 16, 46, 0.08);
  pointer-events: none;
  z-index: 0;
  transition: color 0.5s, transform 0.6s ease;
}
.gera-card:hover .gera-card__bg {
  color: rgba(200, 16, 46, 0.18);
  transform: scale(1.05) translateY(-0.05em);
}
.gera-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.gera-card__phase {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.gera-card__name {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.gera-card__desc {
  color: rgba(255,255,255,0.7);
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
.gera-card__value {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-size: 0.88rem;
  line-height: 1.55;
}
.gera-card__value span {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  margin-bottom: 0.4rem;
  font-weight: 500;
}
.gera__cta { text-align: center; }

/* =============== CICLO GERA (gera.html — fases animadas) =============== */

.gera-cycle {
  display: flex;
  flex-direction: column;
}

/* Split negro | blanco, full-bleed */
.gera-cycle__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  align-items: stretch;
}

.gera-cycle__dark {
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Stage del lado oscuro: anillo + controles + dots en columna */
.gera-cycle__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  width: 100%;
  max-width: 460px;
  position: relative;
  z-index: 1;
}

/* ── Capas de fondo decorativas del lado oscuro ─────────────────────
   Viven DETRÁS del anillo (z-index 0). Contienen:
   ::before → glow rojo que respira
   .gera-bg__wave → ondas concéntricas tipo radar
   ──────────────────────────────────────────────────────────────────── */
.gera-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Glow rojo central: resplandor radial difuso que respira */
.gera-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 72% 72% at 50% 50%,
    rgba(200,16,46,0.38) 0%,
    rgba(200,16,46,0.15) 48%,
    transparent 72%
  );
  animation: gcGlowBreathe 7s ease-in-out infinite;
  will-change: transform, opacity;
}

@keyframes gcGlowBreathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.22); }
}

/* Ondas de radar: 4 anillos concéntricos que se expanden y desvanecen */
.gera-bg__wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 74%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border-style: solid;
  border-width: 1.5px;
  border-color: rgba(255,255,255,0.20);
  animation: gcRadarPulse 6s ease-out infinite;
  will-change: transform, opacity;
}

/* El primer anillo lleva toque rojo; los demás en blanco tenue */
.gera-bg__wave:nth-child(1) {
  border-color: rgba(200,16,46,0.42);
  animation-delay: 0s;
}
.gera-bg__wave:nth-child(2) {
  border-color: rgba(255,255,255,0.22);
  animation-delay: 1.5s;
}
.gera-bg__wave:nth-child(3) {
  border-color: rgba(255,255,255,0.15);
  animation-delay: 3s;
}
.gera-bg__wave:nth-child(4) {
  border-color: rgba(255,255,255,0.09);
  animation-delay: 4.5s;
}

@keyframes gcRadarPulse {
  0%   { transform: translate(-50%, -50%) scale(0.12); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.08); opacity: 0; }
}

/* Pausa cuando la sección sale del viewport (clase gestionada por JS) */
.gera-cycle__dark.is-offscreen .gera-bg::before,
.gera-cycle__dark.is-offscreen .gera-bg__wave {
  animation-play-state: paused;
}

/* Accesibilidad: sin movimiento → glow estático + anillos fijos tenues */
@media (prefers-reduced-motion: reduce) {
  .gera-bg::before {
    animation: none;
    opacity: 0.75;
  }
  .gera-bg__wave {
    animation: none;
    opacity: 0.14;
  }
  .gera-bg__wave:nth-child(1) { transform: translate(-50%, -50%) scale(0.25); }
  .gera-bg__wave:nth-child(2) { transform: translate(-50%, -50%) scale(0.50); }
  .gera-bg__wave:nth-child(3) { transform: translate(-50%, -50%) scale(0.72); }
  .gera-bg__wave:nth-child(4) { transform: translate(-50%, -50%) scale(0.90); }
}

.gera-cycle__light {
  background: #f5f4f2;
  display: flex;
  align-items: center;
  padding: 4.5rem 3.5rem 4.5rem 4rem;
  position: relative;
  overflow: hidden;
}

/* Anillo: contenedor relativo para el texto central superpuesto */
.gera-cycle__ring-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
}

.gera-cycle__svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ── Elementos SVG del anillo ── */

/* Track punteado: flujo de guiones en sentido horario refuerza la dirección */
.gc-track {
  fill: none;
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1.5;
  stroke-dasharray: 6 10;
  opacity: 0;
  animation: gcDashFlow 1.8s linear infinite;
}
@keyframes gcDashFlow {
  to { stroke-dashoffset: -16; }
}

/* Arco de progreso: se llena de la fase activa hacia la siguiente.
   stroke-dasharray + stroke-dashoffset se actualizan desde JS. */
.gc-progress {
  fill: none;
  stroke: rgba(200,16,46,0.78);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(200,16,46,0.45));
  transition: opacity 0.3s ease;
}

/* Estela del cometa: segmento brillante detrás del punto luminoso */
.gc-comet-trail {
  fill: none;
  stroke: #c8102e;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
  opacity: 0;
  filter: drop-shadow(0 0 8px rgba(200,16,46,0.7));
}

/* Anillo punteado del centro: rota muy lento alrededor del texto */
.gc-center-ring {
  fill: none;
  stroke: rgba(200,16,46,0.32);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  transform-origin: 200px 200px;
  animation: gcCenterSpin 42s linear infinite;
}
@keyframes gcCenterSpin {
  to { transform: rotate(360deg); }
}

/* Anillo interior: rota muy lento en loop */
.gc-inner-ring {
  fill: none;
  stroke: rgba(200,16,46,0.18);
  stroke-width: 1;
  stroke-dasharray: 4 8;
  transform-origin: 200px 200px;
  animation: gcInnerSpin 26s linear infinite;
}
@keyframes gcInnerSpin {
  to { transform: rotate(-360deg); }
}

/* Flechas de dirección (sentido horario) */
.gc-arrows { opacity: 0.9; }
.gc-arrow {
  fill: none;
  stroke: rgba(200,16,46,0.42);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: gcArrowPulse 3.6s ease-in-out infinite;
}
.gc-arrows .gc-arrow:nth-child(2) { animation-delay: 0.9s; }
.gc-arrows .gc-arrow:nth-child(3) { animation-delay: 1.8s; }
.gc-arrows .gc-arrow:nth-child(4) { animation-delay: 2.7s; }
@keyframes gcArrowPulse {
  0%, 100% { stroke: rgba(200,16,46,0.32); }
  50%      { stroke: rgba(200,16,46,0.78); }
}

/* Cometa: punto luminoso + halo difuso (más visible y elegante) */
.gc-comet {
  fill: #ffffff;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(200,16,46,0.95))
          drop-shadow(0 0 14px rgba(200,16,46,0.6));
}
.gc-comet-glow {
  fill: rgba(200,16,46,0.38);
  opacity: 0;
  filter: blur(9px);
}

/* Nodos */
.gc-node {
  cursor: pointer;
  outline: none;
}
.gc-node:focus-visible .gc-node__bg {
  stroke: rgba(200,16,46,0.7);
  stroke-width: 2;
}

.gc-node__bg {
  fill: #1c1c1c;
  stroke: rgba(255,255,255,0.1);
  stroke-width: 1;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

.gc-node__letter {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  fill: rgba(255,255,255,0.35);
  pointer-events: none;
  transition: fill 0.4s ease;
}

/* Nodo activo */
.gc-node.is-active .gc-node__bg {
  fill: #c8102e;
  stroke: rgba(200,16,46,0.4);
  animation: gcNodePulse 2.4s ease-in-out infinite;
}
.gc-node.is-active .gc-node__letter { fill: #ffffff; }

@keyframes gcNodePulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(200,16,46,0.35)); }
  50%       { filter: drop-shadow(0 0 16px rgba(200,16,46,0.75)); }
}

/* Nodos inactivos: levemente atenuados */
.gc-node:not(.is-active) .gc-node__bg     { opacity: 0.6; }
.gc-node:not(.is-active) .gc-node__letter { opacity: 0.6; }

/* ── Texto central superpuesto (más protagonista) ── */
.gc-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.gc-center__top {
  display: block;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  font-weight: 600;
  text-shadow: 0 0 14px rgba(200,16,46,0.35);
}
.gc-center__line {
  display: block;
  width: 28px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,16,46,0.9) 50%,
    transparent 100%
  );
}
.gc-center__sub {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-style: italic;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0.08em;
}

/* ── Controles: indicador 01/04 + navegación manual ── */
.gc-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.gc-nav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.gc-nav:hover,
.gc-nav:focus-visible {
  background: rgba(200,16,46,0.16);
  border-color: rgba(200,16,46,0.55);
  color: #ffffff;
  outline: none;
}
.gc-nav:active { transform: scale(0.94); }

.gc-indicator {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  color: #ffffff;
  min-width: 88px;
  justify-content: center;
}
.gc-indicator__cur {
  font-size: 1.65rem;
  font-weight: 700;
  color: #c8102e;
  line-height: 1;
  letter-spacing: 0.04em;
  transition: color 0.3s ease;
}
.gc-indicator__sep {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.35);
  font-weight: 300;
}
.gc-indicator__tot {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}

/* Dots: indicador visual de 4 fases */
.gc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}
.gc-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255,255,255,0.22);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}
.gc-dot:hover { background: rgba(255,255,255,0.48); }
.gc-dot:focus-visible {
  outline: 2px solid rgba(200,16,46,0.7);
  outline-offset: 3px;
}
.gc-dot.is-active {
  background: #c8102e;
  width: 26px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(200,16,46,0.55);
}

/* ── Panel de detalle (lado blanco) ── */
.gc-detail { width: 100%; max-width: 500px; position: relative; z-index: 1; }

.gc-detail__body { display: flex; flex-direction: column; }

.gc-detail__phase {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #c8102e;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.gc-detail__letter {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(4.5rem, 11vw, 8rem);
  line-height: 0.85;
  color: rgba(200,16,46,0.1);
  margin-bottom: 0.4rem;
  will-change: opacity, transform;
}

.gc-detail__name {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.05;
  color: #111111;
  margin-bottom: 0.85rem;
  will-change: opacity, transform;
}

.gc-detail__desc {
  color: #555555;
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 1.4rem;
  will-change: opacity, transform;
}

.gc-detail__value-block {
  padding: 1rem 1.25rem;
  border-left: 3px solid #c8102e;
  background: rgba(200,16,46,0.04);
  border-radius: 0 6px 6px 0;
}

.gc-detail__value-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(200,16,46,0.65);
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.gc-detail__value-text {
  color: #222222;
  font-size: 0.9rem;
  line-height: 1.6;
  will-change: opacity, transform;
}

/* ── Marca de agua: triángulo Alliance (ícono del favicon) en panel claro ──
   SVG con fill-rule=evenodd reproduce la forma exacta del logo:
   triángulo exterior + muesca interna recortada.
   z-index 0 → siempre detrás de todo el texto. ── */
.gc-watermark {
  position: absolute;
  bottom: -5%;
  right: -4%;
  width: clamp(200px, 44%, 340px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
}

.gc-watermark__svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: rgba(0,0,0,0.065);
  filter: drop-shadow(4px 7px 14px rgba(0,0,0,0.11));
}

/* ── Footer CTA ── */
.gera-cycle__footer {
  background: #0a0a0a;
  padding: 3rem 1.5rem;
  text-align: center;
}

/* ── prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .gc-inner-ring,
  .gc-center-ring,
  .gc-track,
  .gc-arrow,
  .gc-node.is-active .gc-node__bg { animation: none !important; }
  .gc-track { opacity: 1 !important; stroke-dashoffset: 0 !important; }
  .gc-node  { opacity: 1 !important; transform: none !important; }
  .gc-detail__body { opacity: 1 !important; transform: none !important; }
  .gc-comet,
  .gc-comet-glow,
  .gc-comet-trail,
  .gc-progress { display: none; }
  /* Las flechas estáticas, el indicador 01/04 y la navegación manual
     deben seguir siendo perfectamente usables. */
  .gc-arrow { stroke: rgba(200,16,46,0.55); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .gera-cycle__split { grid-template-columns: 1fr; min-height: 0; }
  .gera-cycle__dark  { padding: 2.8rem 1.5rem; }
  .gera-cycle__light { padding: 2.5rem 2rem; justify-content: center; }
  .gera-cycle__stage { max-width: 360px; gap: 1.1rem; }
  .gera-cycle__ring-wrap { max-width: 320px; }
  .gc-detail { text-align: center; }
  .gc-detail__letter { font-size: clamp(3.5rem, 14vw, 5.5rem); }
  .gc-detail__value-block { text-align: left; }
  .gc-center__top { font-size: 0.7rem; }
  .gc-center__sub { font-size: 0.62rem; }
  .gc-watermark { width: clamp(150px, 38%, 240px); bottom: -4%; right: -3%; }
}
@media (max-width: 480px) {
  .gera-cycle__ring-wrap { max-width: 260px; }
  .gc-detail__name { font-size: clamp(1.3rem, 6vw, 1.9rem); }
  .gc-controls { gap: 1.1rem; }
  .gc-nav { width: 44px; height: 44px; }   /* tamaño touch cómodo */
  .gc-indicator__cur { font-size: 1.45rem; }
  .gc-center__top { font-size: 0.62rem; letter-spacing: 0.28em; }
  .gc-center__sub { font-size: 0.56rem; }
  .gc-watermark { width: clamp(120px, 40%, 180px); bottom: -3%; right: -2%; }
}

/* =============== SECTORES =============== */
.sectores {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(200,16,46,0.06) 0%, transparent 70%),
    #0a0a0a;
  position: relative;     /* contiene al .sectores__halo absoluto */
}
/* Halo rojo difuso que respira muy lentamente — atmósfera de fondo */
.sectores__halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 65% 55% at 50% 45%,
      rgba(200, 16, 46, 0.16) 0%,
      rgba(200, 16, 46, 0.08) 30%,
      transparent 65%
    );
  transform-origin: 50% 45%;
  opacity: 0.65;                                /* base efectivo ≈ 0.10 */
  animation: sectores-halo-breath 9s ease-in-out infinite;
  /* Mejora rendimiento de la animación (GPU) */
  will-change: transform, opacity;
}
@keyframes sectores-halo-breath {
  0%, 100% { transform: scale(1);    opacity: 0.65; }    /* ≈ 0.10 visible */
  50%      { transform: scale(1.15); opacity: 1;    }    /* ≈ 0.16 visible */
}
/* Respeta la preferencia de "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
  .sectores__halo { animation: none; opacity: 0.78; }
}
/* El contenido va por encima del halo */
.sectores > .container-edit {
  position: relative;
  z-index: 1;
}
.sectores__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 4rem;
  align-items: end;
}
@media (min-width: 900px) {
  .sectores__head { grid-template-columns: 1.1fr 1fr; gap: 4rem; }
}
.sectores__title {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  margin-top: 1rem;
}
.sectores__title em { color: var(--alliance-red); font-style: italic; }
.sectores__intro {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 50ch;
}

/* ============== BENTO GRID DE SECTORES ==============
   Mobile (<768): stack 1 columna.
   Tablet (768-1023): card 1 ocupa fila completa, cards 2-3 se reparten abajo.
   Desktop (>=1024): bento 3 col × 2 row → card 1 grande 2×2, cards 2-3 chicas 1×1 a la derecha. */
.sectores__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
/* Tablet */
@media (min-width: 768px) {
  .sectores__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(220px, auto);
    gap: 0.875rem;
  }
  .sectores__grid > .sector-card { aspect-ratio: auto; min-height: 260px; }
  .sectores__grid > .sector-card:first-child {
    grid-column: 1 / -1;
    min-height: 320px;
  }
}
/* Desktop: bento 3×2 */
@media (min-width: 1024px) {
  .sectores__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: 0.875rem;
    min-height: 560px;
  }
  .sectores__grid > .sector-card { aspect-ratio: auto; min-height: 0; }
  .sectores__grid > .sector-card:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }
  .sectores__grid > .sector-card:nth-child(2),
  .sectores__grid > .sector-card:nth-child(3) {
    grid-column: span 1;
    grid-row: span 1;
  }
}

.sector-card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: #fff;
  cursor: pointer;
  background: #111;
}
.sector-card .bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.80) saturate(1.0);
  transition: transform 0.6s ease, filter 0.6s ease;
}
.sector-card:hover .bg-img {
  transform: scale(1.05);
  filter: brightness(0.95) saturate(1.1);
}
.sector-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.40) 100%);
  z-index: 1;
}
.sector-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
}
.sector-card__num {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--alliance-red);
  letter-spacing: 0.1em;
}
.sector-card__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  max-width: 18ch;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sector-card__desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 0.6s ease, opacity 0.45s ease 0.05s, transform 0.5s ease;
}
.sector-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.1s, transform 0.5s ease 0.1s;
}
.sector-card__cta i { transition: transform 0.3s ease; }
.sector-card:hover .sector-card__cta i { transform: translateX(8px); }
.sector-card:hover .sector-card__title { transform: translateY(-4px); }
.sector-card:hover .sector-card__desc {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}
.sector-card:hover .sector-card__cta {
  opacity: 1;
  transform: translateY(0);
}
/* En mobile, mostrar siempre el desc */
@media (max-width: 700px) {
  .sector-card__desc { max-height: 200px; opacity: 1; transform: none; font-size: 0.82rem; }
  .sector-card__cta { opacity: 1; transform: none; }
}
/* Card featured (la primera del grid asimétrico): título más grande + descripción visible */
@media (min-width: 1024px) {
  .sectores__grid > .sector-card:first-child .sector-card__title {
    font-size: 1.5rem;
    max-width: 22ch;
  }
  .sectores__grid > .sector-card:first-child .sector-card__desc {
    max-height: 200px;
    opacity: 1;
    transform: none;
  }
  .sectores__grid > .sector-card:first-child .sector-card__cta {
    opacity: 1;
    transform: none;
  }
}

/* =============== SERVICIOS =============== */
.services { background: #0f0f0f; }
.services__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 4rem;
}
@media (min-width: 900px) { .services__head { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.services__title {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  margin-top: 1rem;
}
.services__title em { color: var(--alliance-red); font-style: italic; }
.services__intro {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  max-width: 48ch;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 700px)  { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
  position: relative;
  padding: 2.5rem 2rem;
  background: #111;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 320px;
  overflow: hidden;
  transition: background 0.5s ease, border-color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
}
/* Borde superior rojo que crece de 0px a 3px */
.service-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 0;
  background: var(--alliance-red);
  transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}
.service-card:hover {
  background: #141414;
  border-color: rgba(200,16,46,0.4);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.service-card:hover::before { height: 3px; }

/* Imagen de fondo (div hijo, hace zoom independiente del card) */
.service-card__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.6s ease;
}
.service-card:hover .service-card__img { transform: scale(1.05); }

/* Overlay oscuro via ::after (::before está tomado por el borde rojo) */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  transition: background 0.4s ease;
}
.service-card:hover::after { background: rgba(0, 0, 0, 0.25); }

.service-card__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--alliance-red);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}
.service-card__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.15;
  position: relative;
  z-index: 2;
}
.service-card__desc {
  color: rgba(255,255,255,0.80);
  font-size: 0.92rem;
  line-height: 1.65;
  flex: 1;
  position: relative;
  z-index: 2;
}
.service-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  margin-top: 0.5rem;
  transition: color 0.3s ease;
  position: relative;
  z-index: 2;
}
.service-card__cta i { transition: transform 0.3s ease; }
.service-card__cta:hover { color: var(--alliance-red); }
.service-card__cta:hover i { transform: translateX(8px); }
.service-card:hover .service-card__cta i { transform: translateX(8px); }

/* =============== NOSOTROS =============== */
.about {
  position: relative;
  background-color: #0a0a0a;
  background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  background-position: 0 0;
  overflow: hidden;
}
/* Override section-pad para que la sección Nosotros entre en una vista */
.about.section-pad {
  padding: calc(var(--nav-h) + 0.25rem) 0 0.75rem;
}
@media (max-width: 768px) {
  .about.section-pad {
    padding: calc(var(--nav-h) + 0.25rem) 0 0.5rem;
  }
}
.about__giant {
  position: absolute;
  bottom: -3rem;
  right: -2rem;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14rem, 32vw, 32rem);
  line-height: 0.85;
  color: rgba(255,255,255,0.025);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}
.about__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;            /* centra ambas columnas verticalmente para mejor balance */
}
@media (min-width: 1024px) {
  .about__inner { grid-template-columns: 1fr 1.15fr; gap: 2.5rem; }
}

.about__image {
  position: relative;
  aspect-ratio: 16 / 11;          /* panorámica → mucho más baja */
  overflow: hidden;
  border-radius: 10px;
  z-index: 2;
}
.about__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(25%) contrast(1.03) brightness(1.0);
}
/* Tint rojo duotone sobre la imagen */
.about__image-tint {
  position: absolute;
  inset: 0;
  background: rgba(200, 16, 46, 0.08);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
/* "40+" gigante decorativo (watermark editorial centrado detrás de la imagen) */
.about__col--image { position: relative; }
.about__giant-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 800;
  font-size: clamp(6rem, 15vw, 12rem);
  line-height: 1;
  color: #c8102e;
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .about__giant-num { display: none; }
}
.about__quote {
  margin-top: 0.9rem;
  border-left: 3px solid var(--alliance-red);
  padding-left: 14px;
  position: relative;
  z-index: 2;
}
.about__quote-text {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  line-height: 1.28;
  font-weight: 500;
}
.about__quote-text em { color: var(--alliance-red); font-style: italic; }
.about__quote-sub {
  color: var(--alliance-gray-400);
  font-size: 0.78rem;
  margin-top: 0.3rem;
  line-height: 1.5;
}

.about__title {
  font-size: clamp(1.3rem, 2vw, 1.85rem);
  margin: 0.55rem 0 0.7rem;
  line-height: 1.2;
}
.about__title em { color: var(--alliance-red); font-style: italic; }
.about__desc {
  color: rgba(255,255,255,0.72);
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 0.85rem;
}

.about__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) { .about__pillars { grid-template-columns: 1fr 1fr; } }

.pillar {
  position: relative;
  padding: 0.55rem 1rem 0.55rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}
.pillar:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (min-width: 640px) {
  .pillar:nth-last-child(2) { border-bottom: 1px solid rgba(255,255,255,0.08); }
}
.pillar__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.1em;
  padding-top: 0.2rem;
  transition: color 0.3s ease;
}
.pillar:hover .pillar__num {
  color: var(--alliance-red);
}
.pillar h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
  letter-spacing: -0.005em;
}
.pillar p {
  color: rgba(255,255,255,0.65);
  font-size: 0.76rem;
  line-height: 1.4;
}
/* CTA en Nosotros: más compacto para el home */
.about__cta {
  margin-top: 0.85rem;
  padding: 0.55rem 1.05rem;
  font-size: 0.78rem;
}

/* Valores corporativos — cards con imagen */
.valor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 600px) { .valor-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .valor-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .valor-card__img { height: 180px; }
  .valor-card__content { padding: 1.25rem 1.25rem 1.5rem; }
  .valor-card__content h3 { font-size: 1.05rem; }
  .valor-card__content p { font-size: 0.87rem; }
}

.valor-card {
  background: #141414;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.valor-card:hover {
  border-color: rgba(200,16,46,0.35);
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.28);
}

/* Área de imagen */
.valor-card__img {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
}

/* Franja roja animada en la base de la imagen */
.valor-card__img::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--alliance-red, #c8102e);
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.valor-card:hover .valor-card__img::before { transform: scaleX(1); }

/* Overlay degradado: sutil cálido arriba, oscuro abajo */
.valor-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(200,16,46,0.06) 0%,
    transparent 35%,
    rgba(0,0,0,0.45) 100%
  );
  pointer-events: none;
}
.valor-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.valor-card:hover .valor-card__img img { transform: scale(1.06); }

/* Contenido */
.valor-card__content { padding: 1.75rem 2rem 2rem; }

/* Número con línea horizontal */
.valor-card__num {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  color: var(--alliance-red, #c8102e);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.valor-card__num::after {
  content: '';
  display: block;
  width: 2rem;
  height: 1.5px;
  background: currentColor;
  opacity: 0.4;
  flex-shrink: 0;
}
.valor-card__content h3 {
  font-size: 1.2rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.valor-card__content p {
  color: rgba(255,255,255,0.68);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .valor-card { transition: border-color 0.3s ease; }
  .valor-card:hover { transform: none; }
  .valor-card__img::before { transition: none; transform: scaleX(1); }
  .valor-card__img img { transition: none; }
}

/* =============== BLOG / CENTRO DE CONOCIMIENTO =============== */
.blog { background: #0d0d0d; }
.blog__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 3.5rem;
}
@media (min-width: 900px) { .blog__head { grid-template-columns: 1.4fr auto; gap: 3rem; } }
.blog__title {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  margin-top: 1rem;
}
.blog__title em { color: var(--alliance-red); font-style: italic; }

.blog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 700px)  { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .blog__grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card { background: #111; border: 1px solid rgba(255,255,255,0.05); transition: border-color 0.4s, transform 0.5s; }
.blog-card:hover { border-color: rgba(200,16,46,0.4); transform: translateY(-6px); }
.blog-card__link { display: flex; flex-direction: column; color: inherit; }
.blog-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.87) saturate(0.95);
  transition: transform 1.2s ease, filter 0.6s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.06); filter: brightness(1.0) saturate(1.1); }

.blog-card__body { padding: 1.75rem 1.5rem 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; }
.blog-card__meta {
  display: flex;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  font-weight: 500;
}
.blog-card__meta span:first-child { color: var(--alliance-red); }
.blog-card__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  transition: color 0.3s;
}
.blog-card:hover .blog-card__title { color: var(--alliance-red); }
.blog-card__desc {
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  line-height: 1.6;
}
.blog-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  margin-top: 0.5rem;
  transition: gap 0.3s, color 0.3s;
}
.blog-card:hover .blog-card__cta { gap: 0.85rem; color: var(--alliance-red); }

/* =============== CONTACTO =============== */
.contact { background: #0a0a0a; }
.contact__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact__inner { grid-template-columns: 1fr 1.2fr; gap: 5rem; }
}

.contact__title {
  font-size: clamp(2rem, 4.2vw, 3.8rem);
  margin: 1.25rem 0 1.5rem;
}
.contact__title em { color: var(--alliance-red); font-style: italic; }
.contact__intro {
  color: rgba(255,255,255,0.72);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.contact__list { display: flex; flex-direction: column; gap: 0; }
.contact__list li {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.contact__list li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
.contact__icon {
  flex: 0 0 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: var(--alliance-red);
  font-size: 0.9rem;
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.contact__list li:hover .contact__icon {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #fff;
}
.contact__label {
  display: block;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  font-weight: 500;
  margin-bottom: 0.2rem;
}
.contact__value {
  display: inline-block;
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
  transition: color 0.3s;
}
a.contact__value:hover { color: var(--alliance-red); }

.contact__keywords { margin-top: 2.5rem; }
.contact__keywords-title {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  font-weight: 500;
  margin-bottom: 0.85rem;
}
.contact__keywords-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.contact__keywords-list span {
  display: inline-flex;
  padding: 0.5rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.78);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.contact__keywords-list span:hover {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #fff;
}

/* --- Formulario --- */
.contact-form {
  background: #111;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 768px) { .contact-form { padding: 3rem 2.5rem; } }
.contact-form__header {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field > span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  font-weight: 500;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 0.7rem 0;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.3s;
  border-radius: 0;
}
.field textarea {
  border: 1px solid rgba(255,255,255,0.15);
  padding: 0.9rem 1rem;
  resize: vertical;
  min-height: 100px;
  background: rgba(255,255,255,0.02);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,0.4); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--alliance-red);
}
.field select {
  appearance: none;
  background: transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23c8102e' stroke-width='1.5'/></svg>") no-repeat right 0 center / 12px 8px;
  padding-right: 1.5rem;
  cursor: pointer;
}
.field select option { background: #111; color: #fff; }

.field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}
.field--checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--alliance-red);
}
.field--checkbox span {
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: rgba(255,255,255,0.7);
  font-weight: 400;
  line-height: 1.5;
}

.contact-form__submit { align-self: flex-start; margin-top: 0.5rem; }
.contact-form__note {
  font-size: 0.75rem;
  color: var(--alliance-gray-400);
  margin-top: 0.5rem;
}

/* Validación visual: marca en rojo los campos obligatorios vacíos
   solo después de un intento de envío (clase .was-validated añadida en JS) */
.contact-form.was-validated input:invalid,
.contact-form.was-validated select:invalid,
.contact-form.was-validated textarea:invalid {
  border-color: #c8102e;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}
.contact-form input:focus:invalid,
.contact-form select:focus:invalid,
.contact-form textarea:focus:invalid {
  border-color: #c8102e;
  box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.15);
}

/* =============== CIERRE / CTA FINAL — v2 cinematográfico =============== */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--theme-bg, #070707);
  padding: 90px 0;
}
@media (max-width: 1024px) { .cta-final { padding: 70px 0; } }
@media (max-width: 768px)  { .cta-final { padding: 56px 0; } }

/* Glow rojo tenue detrás del frame derecho */
.cta-final__glow {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(20%, -50%);
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(200,16,46,0.11) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Layout 2 columnas */
.cta-final__inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 960px) {
  .cta-final__inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* Columna izquierda */
.cta-final__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.cta-final__title {
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 0.95;
  margin: 1rem 0 1.75rem;
  letter-spacing: -0.025em;
}
.cta-final__title em { color: var(--alliance-red); font-style: italic; }

/* Líneas para stagger reveal en el cierre */
.cta-final__line { display: block; overflow: hidden; }
.cta-final__line-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%);
  will-change: transform, opacity;
}

.cta-final__sub {
  max-width: 50ch;
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2.25rem;
}

.cta-final__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Micro-mención de autoridad bajo los CTAs */
.cta-final__trust {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
}
.cta-final__trust i { color: var(--alliance-red); font-size: 0.85rem; }

/* ---- Columna derecha: escena de detección ---- */
.cta-final__scene { position: relative; }

.scene-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(200,16,46,0.22);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 48px rgba(200,16,46,0.1),
    0 24px 64px rgba(0,0,0,0.65);
  background: #0c0c0c;
}

.scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.4) contrast(1.15);
  will-change: filter;
}

/* Línea de escaneo */
.scene-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,16,46,0.55) 30%,
    rgba(255,30,60,0.95) 50%,
    rgba(200,16,46,0.55) 70%,
    transparent 100%
  );
  box-shadow: 0 0 10px rgba(200,16,46,0.55), 0 0 22px rgba(200,16,46,0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}

/* Viñeta cinematográfica */
.scene-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Marcadores / miras */
.scene-marker {
  position: absolute;
  left: var(--mx);
  top: var(--my);
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  z-index: 8;
  cursor: pointer;
  opacity: 0;
}

.scene-marker__ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(200,16,46,0.45);
  box-shadow: 0 0 6px rgba(200,16,46,0.3);
  pointer-events: none;
  animation: markerPulse 2.8s ease-in-out infinite;
  opacity: 0.6;
}

.scene-marker__cross {
  width: 20px;
  height: 20px;
  stroke: #c8102e;
  stroke-width: 1.5;
  fill: none;
  display: block;
  position: relative;
  z-index: 1;
}
.scene-marker__cross circle { fill: rgba(200,16,46,0.12); }

/* Etiquetas de cada mira */
.scene-marker__label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
}
.scene-marker__label--right { left: calc(100% + 8px); flex-direction: row; }
.scene-marker__label--left  { right: calc(100% + 8px); flex-direction: row-reverse; }

.scene-marker__connector {
  display: block;
  width: 20px;
  height: 1px;
  background: rgba(200,16,46,0.55);
  flex-shrink: 0;
}

.scene-marker__text {
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  background: rgba(5,5,5,0.7);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid rgba(200,16,46,0.18);
}

/* Hover: resaltar mira activa */
.scene-marker:hover .scene-marker__cross { stroke: #ff2244; }
.scene-marker:hover .scene-marker__ring {
  border-color: rgba(200,16,46,0.85);
  box-shadow: 0 0 14px rgba(200,16,46,0.55);
  opacity: 1;
}

/* Contador de riesgos */
.scene-counter {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(5,5,5,0.78);
  border: 1px solid rgba(200,16,46,0.3);
  border-radius: 5px;
  padding: 4px 10px;
  opacity: 0;
}

.scene-counter__label {
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
}

.scene-counter__num {
  font-size: 1.05rem;
  font-weight: 700;
  color: #c8102e;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  min-width: 1.5ch;
}

/* Ticks de esquina tipo visor */
.scene-tick {
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 10;
  pointer-events: none;
}
.scene-tick::before,
.scene-tick::after {
  content: '';
  position: absolute;
  background: rgba(200,16,46,0.55);
}
.scene-tick--tl { top: 6px; left: 6px; }
.scene-tick--tl::before { top: 0; left: 0; width: 100%; height: 1.5px; }
.scene-tick--tl::after  { top: 0; left: 0; width: 1.5px; height: 100%; }
.scene-tick--tr { top: 6px; right: 6px; }
.scene-tick--tr::before { top: 0; right: 0; width: 100%; height: 1.5px; }
.scene-tick--tr::after  { top: 0; right: 0; width: 1.5px; height: 100%; }
.scene-tick--bl { bottom: 6px; left: 6px; }
.scene-tick--bl::before { bottom: 0; left: 0; width: 100%; height: 1.5px; }
.scene-tick--bl::after  { bottom: 0; left: 0; width: 1.5px; height: 100%; }
.scene-tick--br { bottom: 6px; right: 6px; }
.scene-tick--br::before { bottom: 0; right: 0; width: 100%; height: 1.5px; }
.scene-tick--br::after  { bottom: 0; right: 0; width: 1.5px; height: 100%; }

/* Pulso de las miras */
@keyframes markerPulse {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%       { transform: scale(1.5); opacity: 1;   }
}

/* prefers-reduced-motion: estado final sin animar */
@media (prefers-reduced-motion: reduce) {
  .cta-final__line-inner { opacity: 1 !important; transform: none !important; }
  .scene-img    { filter: grayscale(80%) brightness(0.55) contrast(1.1) !important; }
  .scene-marker { opacity: 1 !important; }
  .scene-marker__label { opacity: 1 !important; }
  .scene-counter { opacity: 1 !important; }
  .scene-scan  { display: none; }
  .scene-marker__ring { animation: none; }
}

/* Responsive */
@media (max-width: 768px) {
  .cta-final__title { font-size: clamp(2.1rem, 8vw, 3rem); margin: 0.75rem 0 1.5rem; }
  .cta-final__sub   { max-width: 100%; }
  .scene-marker__label { display: none; }
}
@media (max-width: 480px) {
  .scene-frame { aspect-ratio: 3 / 2; }
}

/* =============== FOOTER =============== */
.footer {
  position: relative;
  background: var(--theme-bg, #050505);
  border-top: 1px solid var(--theme-border, rgba(255,255,255,0.06));
  padding: 5rem 0 1.5rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .footer__top { grid-template-columns: 1.1fr 2fr; gap: 5rem; }
}

.footer__logo {
  width: 220px;
  min-width: 180px;
  height: auto;
  display: block;
  margin-bottom: 1.5rem;
  mix-blend-mode: lighten;
  filter: brightness(1.1) contrast(1.08);
}
.footer__claim {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 36ch;
  margin-bottom: 1rem;
}
.footer__motto {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.4rem;
  margin-bottom: 1.75rem;
}
.footer__motto em { color: var(--alliance-red); font-style: italic; }

.footer__social { display: flex; gap: 0.6rem; }
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: #fff;
  font-size: 0.85rem;
  transition: background 0.3s, border-color 0.3s, color 0.3s, transform 0.3s;
}
.footer__social a:hover {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  transform: translateY(-2px);
}
.footer__social a[aria-label="LinkedIn"]:hover {
  background: #0A66C2;
  border-color: #0A66C2;
}
.footer__social a[aria-label="Instagram"]:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  border-color: transparent;
}
.footer__social a[aria-label="Facebook"]:hover {
  background: #1877F2;
  border-color: #1877F2;
}
.footer__social a[aria-label="YouTube"]:hover {
  background: #FF0000;
  border-color: #FF0000;
}
.footer__social a[aria-label="WhatsApp"]:hover {
  background: #25D366;
  border-color: #25D366;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (min-width: 768px)  { .footer__cols { grid-template-columns: repeat(4, 1fr); } }

.footer__col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.footer__col ul { display: flex; flex-direction: column; gap: 0.6rem; }
.footer__col li,
.footer__col li a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.footer__keyword strong { color: var(--alliance-red); font-weight: 600; letter-spacing: 0.04em; }

/* Franja de respaldo · microseñales de autoridad */
.footer__trust {
  margin-top: 2.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2rem;
}
.footer__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: #b8b8b8;
}
.footer__trust-item i {
  color: var(--alliance-red);
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .footer__trust { gap: 0.6rem 1.4rem; }
  .footer__trust-item { font-size: 0.78rem; }
}

.footer__bottom {
  margin-top: 2.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  font-size: 0.78rem;
  color: var(--alliance-gray-400);
}
.footer__legal { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer__legal a { color: var(--alliance-gray-400); font-size: 0.78rem; }

/* =============== WHATSAPP FLOTANTE =============== */
.wa-float {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #25d366;
  color: #fff;
  padding: 0;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(37, 211, 102, 0.35), 0 4px 10px rgba(0,0,0,0.3);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s, gap 0.4s, padding 0.4s;
}
.wa-float:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 18px 50px rgba(37, 211, 102, 0.5), 0 6px 12px rgba(0,0,0,0.35);
}
.wa-float__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  font-size: 1.7rem;
  position: relative;
  z-index: 3;
}
.wa-float__label {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-right: 0;
  transition: max-width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), padding 0.5s;
  position: relative;
  z-index: 3;
}
.wa-float:hover .wa-float__label {
  max-width: 200px;
  padding-right: 1.4rem;
}
.wa-float__pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #25d366;
  z-index: 1;
  animation: wa-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.wa-float__pulse--2 { animation-delay: 1.1s; }
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0;    }
  100% { transform: scale(1.7); opacity: 0;    }
}
@media (max-width: 640px) {
  .wa-float { right: 1rem; bottom: 1rem; }
  .wa-float__icon { width: 54px; height: 54px; font-size: 1.5rem; }
}

/* =============== PAGE HERO (hero de páginas internas) =============== */
.page-hero {
  position: relative;
  min-height: 56vh;
  padding: 10rem 0 5rem;
  overflow: hidden;
  background: #0a0a0a;
  display: flex;
  align-items: center;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.15) brightness(0.70) contrast(1.05);
}
.page-hero__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 25% 50%, rgba(200,16,46,0.10) 0%, rgba(10,10,10,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.50) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
}
.page-hero__title {
  font-size: clamp(2rem, 1.5rem + 2.6vw, 4rem);
  line-height: 1.15;
  margin: 1.25rem 0 1.5rem;
  max-width: 28ch;
  padding-bottom: 0.15em;
}
.page-hero__title em {
  color: var(--alliance-red);
  font-style: italic;
}
.page-hero__sub {
  max-width: 62ch;
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
}
@media (max-width: 768px) {
  .page-hero {
    min-height: 44vh;
    padding: 7rem 0 3.5rem;
  }
  .page-hero__sub { font-size: 0.92rem; max-width: none; }
}

/* =============== NAVBAR · estado activo (página actual) =============== */
.navbar__menu a[aria-current="page"],
.navbar__menu a.is-active {
  color: var(--alliance-red);
}
.navbar__menu a[aria-current="page"]::after,
.navbar__menu a.is-active::after {
  left: 0;
  width: 100%;
  background: var(--alliance-red);
}
.mobile-menu__nav a[aria-current="page"] {
  color: var(--alliance-red);
  padding-left: 0.5rem;
}
.mobile-menu__nav a[aria-current="page"] .num {
  opacity: 1;
}

/* =============== HOME · preview GERA (teaser 4 fases) =============== */
.gera-preview__phases {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 auto 3.5rem;
  max-width: 1100px;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .gera-preview__phases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gera-preview__phases { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

.gera-preview__phases li {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.06);
  background: #111;
  transition: border-color 0.4s, background 0.4s, transform 0.4s;
  position: relative;
  overflow: hidden;
}
.gera-preview__phases li:hover {
  border-color: rgba(200, 16, 46, 0.4);
  background: #141414;
  transform: translateY(-4px);
}
.gera-preview__letter {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--alliance-red);
  text-stroke: 2px var(--alliance-red);
  transition: color 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}
.gera-preview__phases li:hover .gera-preview__letter {
  color: rgba(200, 16, 46, 0.15);
}
.gera-preview__name {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}

/* =============== HOME · banner CTA de contacto =============== */
.cta-banner {
  position: relative;
  padding: 6rem 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #120407 60%, #1a0508 100%);
  overflow: hidden;
}
.cta-banner__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
/* Desktop ≥900: SPLIT — texto + botón a la izquierda, imagen a la derecha */
@media (min-width: 900px) {
  .cta-banner__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-areas:
      "content media"
      "actions media";
    column-gap: 3rem;
    row-gap: 1.4rem;
    align-items: start;
  }
  /* El primer hijo es el contenedor de eyebrow + título + descripción */
  .cta-banner__inner > div:first-child { grid-area: content; }
  .cta-banner__actions { grid-area: actions; align-self: start; }
  .cta-banner__media { grid-area: media; align-self: stretch; }
}
.cta-banner__title {
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.1;
  margin: 0.75rem 0 1rem;
  max-width: 22ch;
}
.cta-banner__title em { color: var(--alliance-red); font-style: italic; }
.cta-banner__desc {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 55ch;
}
.cta-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* === CTA banner · Media (imagen split derecha) === */
.cta-banner__media {
  position: relative;
  min-height: 320px;
  border-radius: 10px;
  overflow: hidden;
  background-image: url('../assets/img/cta-operacion.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}
/* Nosotros: imagen propia para la sección "Hablemos" (no afecta otras páginas) */
body.page-nosotros .cta-banner__media {
  background-image: url('../assets/img/hablemos01.png');
}
/* Sectores: misma imagen para "¿Tu sector está acá?" (no afecta otras páginas) */
body.page-sectores .cta-banner__media {
  background-image: url('../assets/img/hablemos01.png');
}
/* Servicios: misma imagen para "Diseñá tu esquema" (no afecta otras páginas) */
body.page-servicios .cta-banner__media {
  background-image: url('../assets/img/hablemos01.png');
}
/* Blog: misma imagen para "¿Quieres profundizar?" (no afecta otras páginas) */
body.page-blog .cta-banner__media {
  background-image: url('../assets/img/hablemos01.png');
}
/* Fundido desde el borde interno hacia el fondo oscuro: borra el borde
   izquierdo (en desktop) o inferior (en móvil) para integrarse sin saltos. */
.cta-banner__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, #120407 0%, rgba(18,4,7,0.72) 18%, rgba(18,4,7,0.30) 42%, transparent 62%),
    linear-gradient(180deg, rgba(18,4,7,0.45) 0%, transparent 28%, rgba(18,4,7,0.40) 100%);
  pointer-events: none;
}
/* Viñeta sutil para fundir mejor con la sección */
.cta-banner__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse at 75% 50%, transparent 40%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* Mobile (<900): media va abajo, se funde por el borde superior */
@media (max-width: 899px) {
  .cta-banner__media {
    min-height: 200px;
    margin-top: 0.25rem;
  }
  .cta-banner__media::before {
    background:
      linear-gradient(180deg, rgba(18,4,7,0.85) 0%, rgba(18,4,7,0.30) 28%, transparent 55%, rgba(18,4,7,0.45) 100%);
  }
  .cta-banner__media::after {
    background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0,0,0,0.35) 100%);
  }
}

@media (max-width: 768px) {
  .cta-banner { padding: 4rem 0; }
}

/* =============== NAVBAR · dropdown (Servicios) =============== */
.nav-group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-group__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nav-group__icon {
  font-size: 0.55em;
  opacity: 0.6;
  transition: transform 0.4s, opacity 0.3s;
}
.nav-group:hover .nav-group__icon,
.nav-group:focus-within .nav-group__icon {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--alliance-red);
}
.nav-group__dropdown {
  position: absolute;
  top: 100%;
  left: -1.25rem;
  margin-top: 0.85rem;
  min-width: 280px;
  background: rgba(12, 12, 12, 0.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              visibility 0.3s;
  z-index: 110;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.nav-group:hover .nav-group__dropdown,
.nav-group:focus-within .nav-group__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-group__dropdown a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.95rem;
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 500;
  border-radius: 2px;
  transition: background 0.3s, color 0.3s, padding-left 0.3s;
  border-left: 2px solid transparent;
}
.nav-group__dropdown a:hover,
.nav-group__dropdown a[aria-current="page"] {
  background: rgba(200,16,46,0.08);
  color: #fff;
  border-left-color: var(--alliance-red);
  padding-left: 1.15rem;
}
.nav-group__dropdown small {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  font-weight: 500;
  margin-top: 0.15rem;
}
/* Variante 2 columnas para el dropdown de Sectores (9 ítems) */
.nav-group__dropdown--cols {
  min-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
  left: -2rem;
}

/* =============== MODALIDADES (Ángel Protector) =============== */
.modalities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px)  { .modalities-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .modalities-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }

.modality-card {
  position: relative;
  padding: 2.5rem 1.75rem;
  background: #111;
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  transition: background 0.5s, border-color 0.5s, transform 0.5s;
}
.modality-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 2px;
  background: var(--alliance-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.modality-card:hover {
  background: #141414;
  border-color: rgba(200,16,46,0.4);
  transform: translateY(-6px);
}
.modality-card:hover::before { transform: scaleX(1); }

.modality-card__icon {
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: var(--alliance-red);
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.modality-card:hover .modality-card__icon {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #fff;
}
.modality-card__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}
.modality-card__desc {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* =============== BENEFICIOS (lista premium) =============== */
.benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
}
@media (min-width: 700px)  { .benefits-grid { grid-template-columns: repeat(2, 1fr); column-gap: 3rem; } }

.benefits-grid li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.benefits-grid li:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (min-width: 700px) {
  .benefits-grid li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
}
.benefits-grid__check {
  flex: 0 0 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--alliance-red);
  border-radius: 999px;
  color: var(--alliance-red);
  font-size: 0.7rem;
  margin-top: 0.15rem;
}
.benefits-grid__text {
  color: rgba(255,255,255,0.85);
  font-size: 0.98rem;
  line-height: 1.55;
}

/* =============== TIMELINE · "Cómo funciona" (8 pasos) =============== */
.angel-timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 880px;
}
.angel-timeline::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg,
    rgba(200,16,46,0.4) 0%,
    rgba(255,255,255,0.12) 50%,
    rgba(200,16,46,0.4) 100%);
}
.angel-timeline > li {
  position: relative;
  padding: 0 0 2.25rem 4.5rem;
}
.angel-timeline > li:last-child { padding-bottom: 0; }
.angel-timeline__num {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  border: 1px solid rgba(200,16,46,0.5);
  border-radius: 999px;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--alliance-red);
  transition: background 0.4s, color 0.4s, border-color 0.4s, transform 0.4s;
}
.angel-timeline > li:hover .angel-timeline__num {
  background: var(--alliance-red);
  color: #fff;
  transform: scale(1.05);
}
.angel-timeline__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0.85rem 0 0.5rem;
}
.angel-timeline__desc {
  color: rgba(255,255,255,0.72);
  font-size: 0.94rem;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .angel-timeline::before { left: 22px; }
  .angel-timeline > li { padding-left: 3.75rem; }
  .angel-timeline__num { width: 44px; height: 44px; font-size: 1rem; }
}

/* =============== MENSAJE DE CONFIANZA =============== */
.angel-trust {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  margin-top: 2rem;
  background: rgba(200,16,46,0.05);
  border: 1px solid rgba(200,16,46,0.25);
  border-left: 3px solid var(--alliance-red);
}
.angel-trust__icon {
  flex: 0 0 auto;
  font-size: 1.2rem;
  color: var(--alliance-red);
}
.angel-trust__text {
  color: rgba(255,255,255,0.85);
  font-size: 0.92rem;
  line-height: 1.6;
}
.angel-trust__text strong { color: #fff; font-weight: 600; }

/* =============== CALCULADORA DE AHORRO OPERATIVO =============== */
.calculator {
  position: relative;
  padding: calc(var(--nav-h) + 0.25rem) 0 0.5rem;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(200,16,46,0.07) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(200,16,46,0.05) 0%, transparent 60%),
    #111111;
  border-top: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}
@media (max-width: 768px) {
  .calculator { padding: calc(var(--nav-h) + 0.25rem) 0 1rem; }
}

/* --- Intro (bloque de entrada antes de iniciar) --- */
.calc-intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
/* Título intro = elemento más fuerte de la card (jerarquía suave) */
.calc-intro__title {
  font-size: clamp(1.05rem, 0.8rem + 0.85vw, 1.35rem);
  line-height: 1.25;
  margin: 0.3rem 0 0.5rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.calc-intro__title em { color: var(--alliance-red); font-style: italic; }
.calc-intro__desc {
  color: rgba(255,255,255,0.72);
  font-size: 0.8rem;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0 auto 0.8rem;
}
.calc-intro__cta { margin-top: 0.15rem; }
/* Botón Iniciar cálculo: jerarquía secundaria, ligero */
.calc-card__pane .calc-intro .btn {
  padding: 0.5rem 1.05rem;
  font-size: 0.74rem;
}
.calc-intro__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
}
.calc-intro__hint i { color: var(--alliance-red); }

/* --- Wizard contenedor --- */
.calc-wizard {
  max-width: 980px;
  margin: 0 auto;
  background: rgba(15, 15, 15, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 2.5rem 1.5rem;
  position: relative;
  z-index: 2;
  display: none;
  animation: calcFadeIn 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.calc-wizard.is-open { display: block; }
@media (min-width: 768px) { .calc-wizard { padding: 3rem 3rem; } }
@keyframes calcFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Barra de progreso --- */
.calc-progress {
  margin-bottom: 2.5rem;
}
.calc-progress__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}
.calc-progress__label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  font-weight: 500;
}
.calc-progress__count {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #fff;
}
.calc-progress__count strong { color: var(--alliance-red); font-style: normal; font-weight: 600; }
.calc-progress__bar {
  position: relative;
  height: 3px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.calc-progress__fill {
  position: absolute;
  inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--alliance-red), #ff3a5c);
  transition: right 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Step (cada paso del wizard) --- */
.calc-step {
  display: none;
  animation: stepIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.calc-step.is-active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.calc-step__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.calc-step__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.calc-step__hint {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

/* --- Opciones visuales (sectores con íconos) --- */
.calc-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}
@media (min-width: 640px)  { .calc-options { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .calc-options { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

.calc-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1.25rem 1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  text-align: left;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.calc-option:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}
.calc-option__icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  color: var(--alliance-red);
  font-size: 0.95rem;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.calc-option__label {
  font-size: 0.88rem;
  line-height: 1.3;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.calc-option.is-selected {
  background: rgba(200,16,46,0.08);
  border-color: var(--alliance-red);
}
.calc-option.is-selected .calc-option__icon {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #fff;
}
.calc-option.is-selected .calc-option__label { color: #fff; }

/* --- Slider numérico (Paso 2: Puntos de control) --- */
.calc-range {
  padding: 1rem 0;
}
.calc-range__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.calc-range__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.5rem, 8vw, 6rem);
  color: var(--alliance-red);
  line-height: 1;
}
.calc-range__unit {
  font-size: 0.95rem;
  color: var(--alliance-gray-400);
  letter-spacing: 0.04em;
}
.calc-range__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.08);
  outline: none;
  margin-bottom: 1rem;
}
.calc-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--alliance-red);
  cursor: pointer;
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 2px var(--alliance-red);
  transition: transform 0.3s;
}
.calc-range__input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.calc-range__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--alliance-red);
  cursor: pointer;
  border: 3px solid #0a0a0a;
  box-shadow: 0 0 0 2px var(--alliance-red);
}
.calc-range__bounds {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--alliance-gray-400);
  letter-spacing: 0.08em;
}

/* --- Radio cards (Pasos 3, 5, 7) --- */
.calc-radios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}
@media (min-width: 700px) { .calc-radios { grid-template-columns: 1fr 1fr; } }

.calc-radio {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.calc-radio:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.calc-radio__dot {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.35);
  position: relative;
  transition: border-color 0.3s;
}
.calc-radio__dot::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--alliance-red);
  border-radius: 999px;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.calc-radio__text {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}
.calc-radio.is-selected {
  background: rgba(200,16,46,0.07);
  border-color: var(--alliance-red);
}
.calc-radio.is-selected .calc-radio__dot { border-color: var(--alliance-red); }
.calc-radio.is-selected .calc-radio__dot::after { transform: scale(1); }
.calc-radio.is-selected .calc-radio__text { color: #fff; }

/* --- Checkboxes múltiples (Pasos 4, 6) --- */
.calc-checks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}
@media (min-width: 640px) { .calc-checks { grid-template-columns: 1fr 1fr; } }

.calc-check {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}
.calc-check:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.calc-check__box {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255,255,255,0.35);
  position: relative;
  transition: border-color 0.3s, background 0.3s;
}
.calc-check__box::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.5l2.5 2.5L10 3' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / 14px;
  transform: scale(0);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.calc-check__icon {
  color: var(--alliance-red);
  font-size: 0.95rem;
  opacity: 0.85;
}
.calc-check__text {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
  flex: 1;
}
.calc-check.is-selected {
  background: rgba(200,16,46,0.08);
  border-color: var(--alliance-red);
}
.calc-check.is-selected .calc-check__box {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
}
.calc-check.is-selected .calc-check__box::after { transform: scale(1); }
.calc-check.is-selected .calc-check__text { color: #fff; }

/* --- Navegación anterior / siguiente --- */
.calc-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.calc-nav .btn-ghost { padding: 0.7rem 1.3rem; font-size: 0.78rem; }
.calc-nav .btn-primary { padding: 0.7rem 1.3rem; font-size: 0.78rem; }
.calc-nav__prev {
  visibility: visible;
}
.calc-nav__prev.is-hidden { visibility: hidden; }

/* --- Pantalla de resultados --- */
.calc-result { display: none; animation: calcFadeIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.calc-result.is-active { display: block; }
.calc-result__head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.calc-result__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.calc-result__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.calc-result__title em { color: var(--alliance-red); font-style: italic; }

/* --- Gauge / Medidor semicircular --- */
.calc-gauge {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto 1.5rem;
  aspect-ratio: 2 / 1.45;
}
.calc-gauge svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.calc-gauge__bg-arc {
  fill: none;
  stroke: rgba(255,255,255,0.06);
  stroke-width: 14;
  stroke-linecap: butt;
}
.calc-gauge__segment {
  fill: none;
  stroke-width: 14;
  stroke-linecap: butt;
  opacity: 0.35;
  transition: opacity 0.5s;
}
.calc-gauge__segment.is-active { opacity: 1; }
.calc-gauge__needle {
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  transform: rotate(-90deg);
  transition: transform 1.6s cubic-bezier(0.4, 1.2, 0.6, 1);
}
.calc-gauge__hub {
  fill: var(--alliance-red);
}
.calc-gauge__hub-outer {
  fill: none;
  stroke: rgba(255,255,255,0.3);
  stroke-width: 1.5;
}
.calc-gauge__value {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 100%;
}
.calc-gauge__level-label {
  display: block;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  text-transform: capitalize;
}
.calc-gauge__level-label[data-level="bajo"]    { color: #4ade80; }
.calc-gauge__level-label[data-level="medio"]   { color: #facc15; }
.calc-gauge__level-label[data-level="alto"]    { color: #f59e0b; }
.calc-gauge__level-label[data-level="crítico"] { color: var(--alliance-red); }
.calc-gauge__level-meta {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--alliance-gray-400);
  margin-top: 0.35rem;
}

/* --- Resultado grid (vulnerabilidades + impacto + recomendaciones) --- */
.calc-result__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
}
@media (min-width: 900px) { .calc-result__grid { grid-template-columns: 1.2fr 1fr; } }

.calc-result__panel {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1.75rem 1.5rem;
}
.calc-result__panel-title {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  margin-bottom: 1rem;
}

.calc-vuln-list { list-style: none; padding: 0; margin: 0; }
.calc-vuln-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
  font-size: 0.93rem;
  line-height: 1.5;
}
.calc-vuln-list li:last-child { border-bottom: none; }
.calc-vuln-list li i {
  color: var(--alliance-red);
  font-size: 0.75rem;
  margin-top: 0.4rem;
}

.calc-impact__amount {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  color: #fff;
  line-height: 1.15;
  margin-bottom: 0.85rem;
}
.calc-impact__amount strong { color: var(--alliance-red); font-style: italic; font-weight: 600; }
.calc-impact__caveat {
  font-size: 0.8rem;
  color: var(--alliance-gray-400);
  line-height: 1.55;
  font-style: italic;
}

.calc-reco {
  background: rgba(200,16,46,0.04);
  border: 1px solid rgba(200,16,46,0.18);
  padding: 1.5rem 1.5rem;
  margin-top: 2rem;
}
.calc-reco__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.calc-reco__text {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  line-height: 1.7;
}

.calc-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2.5rem;
}

/* --- Formulario de captura post-resultado --- */
.calc-capture {
  margin-top: 3rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.calc-capture__head {
  text-align: center;
  margin-bottom: 2rem;
}
.calc-capture__head h3 {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.calc-capture__head p {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50ch;
  margin: 0 auto;
}

/* --- Texto de cierre del bloque --- */
/* En el home la sección debe caber en una vista: ocultamos el texto de cierre */
.calculator .calc-closing { display: none; }

.calc-closing {
  max-width: 720px;
  margin: 0.75rem auto 0;
  text-align: center;
  position: relative;
  z-index: 2;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.calc-closing p {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-style: italic;
  font-size: clamp(0.78rem, 0.9vw, 0.92rem);
  line-height: 1.45;
  color: rgba(255,255,255,0.8);
}
.calc-closing p em { color: var(--alliance-red); font-style: italic; }

/* =============== MARQUEE DE SECTORES (ticker horizontal infinito) =============== */
.marquee {
  position: relative;
  background: var(--theme-bg, #111111);
  border-top: 1px solid var(--theme-border, rgba(255,255,255,0.05));
  border-bottom: 1px solid var(--theme-border, rgba(255,255,255,0.05));
  padding: 16px 0;
  overflow: hidden;
}
.marquee__inner {
  overflow: hidden;
  position: relative;
}
.marquee__track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  width: max-content;
  min-width: 100%;
  animation: marquee-scroll 25s linear infinite;
  animation-play-state: running;
  will-change: transform;
  transform: translate3d(0,0,0);
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__track > span {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 400;
  flex-shrink: 0;
}
.marquee__track > .marquee__sep {
  color: var(--alliance-red);
  font-size: 1.2rem;
  letter-spacing: 0;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Respetar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* Cursor personalizado eliminado — se usa el cursor nativo del sistema. */

/* =============== TEXT-REVEAL EN GERA INTRO (neutralizado para tema híbrido) =============== */
/* En fondo blanco el efecto de "niebla" hacía las palabras invisibles.
   Ahora heredan el color del contenedor (.theme-light .gera__intro = #555). */
.gera__intro .word {
  display: inline-block;
  opacity: 1;
  color: inherit;
  filter: none;
}

/* =============== BREADCRUMBS (páginas internas) =============== */
.breadcrumb { margin-bottom: 1.5rem; position: relative; z-index: 3; }
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  list-style: none;
  padding: 0;
  margin: 0;
}
.breadcrumb li { display: flex; align-items: center; }
.breadcrumb li:not(:last-child)::after {
  content: '/';
  color: var(--alliance-red);
  margin-left: 0.5rem;
}
.breadcrumb a { color: rgba(255,255,255,0.55); transition: color 0.3s ease; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb li[aria-current="page"] { color: #fff; font-weight: 500; }

/* =============== FOOTER · contacto y firma =============== */
.footer__contact {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.footer__contact li,
.footer__contact a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}
.footer__contact i { color: var(--alliance-red); margin-right: 0.5rem; width: 1rem; text-align: center; }
.footer__contact a { transition: color 0.3s ease; }
.footer__contact a:hover { color: #fff; }
.footer__made { color: var(--alliance-gray-400); font-size: 0.78rem; }
.footer__heart { color: var(--alliance-red); }

/* =========================================================
   EVOLUCIÓN — COMPONENTES REUTILIZABLES (páginas nuevas)
   ========================================================= */

/* Encabezado de sección */
.section-head { max-width: 760px; margin-bottom: 3.5rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p.lead { color: rgba(255,255,255,0.75); font-size: 1.2rem; line-height: 1.7; margin-top: 1rem; }

/* Prosa (legal, artículos) */
.prose { max-width: 760px; margin: 0 auto; color: rgba(255,255,255,0.78); font-size: 1rem; line-height: 1.8; }
.prose h2 { font-family: 'Moderat Extended','Poppins',sans-serif; font-size: clamp(1.4rem,3vw,2rem); color:#fff; margin: 2.5rem 0 1rem; }
.prose h3 { font-size: 1.15rem; color:#fff; margin: 1.75rem 0 0.75rem; }
.prose p { margin-bottom: 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.2rem 1.25rem; display:flex; flex-direction:column; gap:0.55rem; }
.prose li { line-height: 1.7; }
.prose a { color: var(--alliance-red); text-decoration: underline; }
.prose strong { color: #fff; }
.prose em { color: var(--alliance-red); font-style: italic; }
.prose .prose__updated { font-size: 0.85rem; color: rgba(255,255,255,0.45); margin-bottom: 2rem; }

/* Grid de features / capacidades / valores */
.feature-grid { display:grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width:640px){ .feature-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .feature-grid--3 { grid-template-columns: repeat(3,1fr); } }
.feature-card {
  position: relative; background: #111111; border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px; padding: 2rem 1.75rem; overflow: hidden;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.feature-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--alliance-red); transform: scaleX(0); transform-origin:left; transition: transform 0.4s ease; }
.feature-card:hover { transform: translateY(-6px); border-color: rgba(200,16,46,0.4); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card__icon { width:54px; height:54px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(200,16,46,0.12); color: var(--alliance-red); font-size: 1.35rem; margin-bottom: 1.25rem; }
.feature-card__num { font-family:'Moderat Extended',sans-serif; color: rgba(200,16,46,0.55); font-size: 0.85rem; letter-spacing: 0.1em; }
.feature-card h3 { font-size: 1.15rem; color:#fff; margin: 0.5rem 0 0.75rem; font-weight:600; }
.feature-card p { color: rgba(255,255,255,0.66); font-size: 0.92rem; line-height: 1.6; }
.feature-card__value { margin-top:1rem; font-size:0.82rem; color:rgba(255,255,255,0.5); border-top:1px solid rgba(255,255,255,0.07); padding-top:0.9rem; }
.feature-card__value span { display:block; color:var(--alliance-red); text-transform:uppercase; letter-spacing:0.1em; font-size:0.68rem; margin-bottom:0.3rem; }

/* Timeline */
.timeline { position: relative; max-width: 820px; margin: 0 auto; }
.timeline::before { content:''; position:absolute; left:5px; top:0; bottom:0; width:2px; background: linear-gradient(180deg, var(--alliance-red), rgba(200,16,46,0.08)); }
.timeline__item { position: relative; padding: 0 0 2.75rem 2rem; }
.timeline__item:last-child { padding-bottom:0; }
.timeline__item::before { content:''; position:absolute; left:0; top:0.4rem; width:12px; height:12px; border-radius:50%; background: var(--alliance-red); box-shadow:0 0 0 4px rgba(200,16,46,0.18); }
.timeline__year { font-family:'Moderat Extended',sans-serif; color: var(--alliance-red); font-size: 1.35rem; }
.timeline__item h3 { color:#fff; font-size:1.05rem; margin:0.25rem 0 0.5rem; }
.timeline__item p { color: rgba(255,255,255,0.66); font-size:0.92rem; line-height:1.65; }

/* Stats / contadores en fila */
.stats-row { display:grid; grid-template-columns: repeat(2,1fr); gap:2rem; text-align:center; }
@media (min-width:768px){ .stats-row { grid-template-columns: repeat(4,1fr); } }
.stats-row__num { display:block; font-family:'Moderat Extended',sans-serif; font-size: clamp(2.5rem,5vw,3.5rem); color: var(--alliance-red); line-height:1; }
.stats-row__label { display:block; margin-top:0.75rem; color: rgba(255,255,255,0.6); font-size:0.85rem; letter-spacing:0.04em; line-height:1.4; }

/* Equipo */
.team-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:1.5rem; }
@media (min-width:768px){ .team-grid { grid-template-columns: repeat(4,1fr); } }
.team-card { text-align:center; }
.team-card__photo { aspect-ratio:1; border-radius:14px; background: linear-gradient(160deg,#1a1a1a,#0f0f0f); border:1px solid rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.18); font-size:2.5rem; margin-bottom:1rem; }
.team-card h3 { color:#fff; font-size:1rem; }
.team-card p { color: var(--alliance-red); font-size:0.8rem; letter-spacing:0.04em; margin-top:0.25rem; }

/* Logos aliados/clientes */
.logo-row { display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:center; }
.logo-row__item { width:150px; height:70px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.03); border:1px solid var(--theme-border, rgba(255,255,255,0.06)); border-radius:10px; color:var(--theme-fg-subtle, rgba(255,255,255,0.45)); font-weight:600; letter-spacing:0.04em; opacity:0.55; transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.logo-row__item:hover { opacity:1; color:#fff; border-color:rgba(200,16,46,0.4); }

/* ODS chips */
.ods-grid { display:flex; flex-wrap:wrap; gap:0.75rem; }
.ods-chip { display:inline-flex; align-items:center; gap:0.5rem; padding:0.6rem 1.1rem; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); font-size:0.85rem; color:rgba(255,255,255,0.8); }
.ods-chip i { color: var(--alliance-red); }

/* Testimonios */
.testimonials { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ .testimonials { grid-template-columns: repeat(3,1fr); } }
.testimonial { background:#111111; border:1px solid rgba(255,255,255,0.07); border-radius:14px; padding:2rem; display:flex; flex-direction:column; gap:1.25rem; }
.testimonial__quote { font-style:italic; color:rgba(255,255,255,0.82); line-height:1.7; font-size:0.98rem; }
.testimonial__quote::before { content:'\201C'; color:var(--alliance-red); font-size:2.6rem; font-family:Georgia,serif; display:block; line-height:0.5; margin-bottom:0.4rem; }
.testimonial__person { display:flex; align-items:center; gap:0.9rem; margin-top:auto; }
.testimonial__avatar { width:48px; height:48px; border-radius:50%; background:linear-gradient(160deg,#2a2a2a,#111); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.3); flex-shrink:0; }
.testimonial__name { color:#fff; font-weight:600; font-size:0.92rem; }
.testimonial__role { color:var(--alliance-red); font-size:0.78rem; }

/* Blog */
.article-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:640px){ .article-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .article-grid { grid-template-columns: repeat(3,1fr); } }
.article-card { display:flex; flex-direction:column; background:#111; border:1px solid rgba(255,255,255,0.07); border-radius:14px; overflow:hidden; transition:transform 0.4s ease, border-color 0.4s ease; }
.article-card:hover { transform:translateY(-6px); border-color:rgba(200,16,46,0.4); }
.article-card__img { aspect-ratio:16/10; background-size:cover; background-position:center; }
.article-card__body { padding:1.5rem; display:flex; flex-direction:column; gap:0.75rem; flex:1; }
.article-card__tag { align-self:flex-start; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--alliance-red); border:1px solid rgba(200,16,46,0.4); padding:0.25rem 0.7rem; border-radius:999px; }
.article-card h3 { color:#fff; font-size:1.1rem; line-height:1.35; }
.article-card__excerpt { color:rgba(255,255,255,0.6); font-size:0.9rem; line-height:1.6; flex:1; }
.article-card__meta { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; color:rgba(255,255,255,0.45); margin-top:0.5rem; }
.article-card__cta { color:var(--alliance-red); font-weight:600; }
.blog-filters { display:flex; flex-wrap:wrap; gap:0.75rem; justify-content:center; margin-bottom:3rem; }
.blog-filter { padding:0.55rem 1.3rem; border-radius:999px; border:1px solid rgba(255,255,255,0.15); background:transparent; color:rgba(255,255,255,0.7); font-size:0.85rem; cursor:pointer; transition:all 0.3s ease; font-family:inherit; }
.blog-filter:hover, .blog-filter.is-active { background:var(--alliance-red); border-color:var(--alliance-red); color:#fff; }

/* Página de error 404 */
.error-page { min-height:78vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:9rem 0 4rem; }
.error-page__code { font-family:'Moderat Extended',sans-serif; font-size:clamp(5rem,20vw,11rem); line-height:1; color:var(--alliance-red); }

/* Tema verde · SOLO sostenibilidad (acento secundario, conserva rojo de marca) */
.theme-green .feature-card__icon { background: rgba(10,126,62,0.14); color:#12a152; }
.theme-green .feature-card::before { background:#0a7e3e; }
.theme-green .feature-card:hover { border-color: rgba(10,126,62,0.45); }
.theme-green .ods-chip i { color:#12a152; }
.theme-green .stats-row__num { color:#12a152; }
.theme-green .page-hero__title em { color:#12a152; }
.theme-green .page-hero__title em::after { background:#0a7e3e; }


/* =================================================================
   PREMIUM INTERACTIONS — Vercel · Linear · Emil Kowalski feel
   ================================================================= */

/* Registrar --angle para que el conic-gradient se pueda animar */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---- EFECTO 1: Scroll progress bar (obvia, width-based) ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: #c8102e;
  z-index: 99999;
  pointer-events: none;
  transition: none;
  will-change: transform;
}

/* ---- EFECTO 2: Page transition (cortina roja sube y baja) ---- */
/* Page transition (cortina roja) eliminada — navegación instantánea. */

/* ---- Button hover lift + glow + color flip (item 3) ---- */
@media (hover: hover) and (min-width: 1024px) {
  .btn {
    transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .btn:hover {
    box-shadow: 0 14px 32px -10px rgba(200, 16, 46, 0.55);
  }
  /* btn-primary hover: rojo más profundo, NO blanco (blanco causaba que el
     botón "desapareciera" sobre secciones theme-light de fondo blanco). */
  .btn-primary:hover {
    background-color: #a30d27;
    color: #ffffff;
    border-color: #a30d27;
  }
  .btn-primary:hover .arrow,
  .btn-primary:hover i {
    color: #ffffff;
  }
}

/* ---- EFECTO 3: Border glow rotando (alta visibilidad) ---- */
@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes rotateBorder {
  to { --border-angle: 360deg; }
}

.feature-card,
.sector-card,
.article-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.3s ease;
}

@media (hover: hover) and (min-width: 1024px) {
  .feature-card:hover,
  .sector-card:hover,
  .article-card:hover {
    border-color: transparent;
    background:
      linear-gradient(#111, #111) padding-box,
      conic-gradient(
        from var(--border-angle),
        #c8102e,
        #ff4060,
        #c8102e,
        transparent,
        #c8102e
      ) border-box;
    animation: rotateBorder 3s linear infinite;
  }
}

/* Fallback para navegadores sin @property o sin conic-gradient */
@supports not (background: conic-gradient(from 0deg, red)) {
  .feature-card:hover,
  .sector-card:hover,
  .article-card:hover {
    border-color: #c8102e !important;
    box-shadow: 0 0 24px rgba(200, 16, 46, 0.3);
  }
}

/* (Cursor personalizado eliminado — bloque de estados retirado.) */

/* ---- Counter suffix fade-in (item 5) ---- */
.counter-suffix {
  display: inline-block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.counter-suffix.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- will-change hints para elementos animados ---- */
.btn,
[data-magnetic] { will-change: transform; }


/* =========================================================
   SISTEMA VISUAL UNIFICADO · v2 (armonía, jerarquía, ritmo)
   Aplica sobre toda la web sin romper componentes existentes.
   ========================================================= */

:root {
  /* Escala tipográfica unificada — reducida para evitar look "gigante" */
  --fs-eyebrow: 17px;
  --fs-body: 1rem;
  --fs-body-lg: 1.08rem;
  --fs-lead: 1.1rem;
  --fs-card-title: 1.15rem;
  --fs-card-body: 0.96rem;
  --fs-h3: 1.22rem;
  --fs-h4: 1.08rem;
  --fs-display-sm: clamp(1.4rem, 2.4vw, 1.85rem);
  --fs-display-md: clamp(1.7rem, 3vw, 2.4rem);
  --fs-display-lg: clamp(1.9rem, 3.6vw, 3.2rem);   /* H2 de sección — valor efectivo del home (regla h2.display-xl) */
  --fs-h1: clamp(1.95rem, 3.8vw, 3.1rem);      /* H1 display / page-hero — escala del home */

  /* Ritmo vertical y respiración */
  --space-section: clamp(3rem, 5vw, 5rem);
  --space-section-tight: clamp(2.25rem, 3.5vw, 3.5rem);
  --gap-heading-body: 1rem;
  --gap-block: 1.1rem;

  /* Line-heights coherentes */
  --lh-display: 1.08;
  --lh-heading: 1.22;
  --lh-body: 1.65;
  --lh-tight: 1.45;
}

/* --- Tipografía base global --------------------------------- */
body { font-size: var(--fs-body); }
p { font-size: var(--fs-body); line-height: var(--lh-body); }

/* Default para .display-xl cuando no hay font-size override (faltaba) */
.display-xl { font-size: var(--fs-display-lg); line-height: var(--lh-heading); }
h1.display-xl { font-size: var(--fs-h1); }

/* Eyebrow más legible y elegante */
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: 0.28em; }

/* --- Page hero ---------------------------------------------- */
.page-hero { padding: 8.5rem 0 4rem; }
@media (max-width: 768px) { .page-hero { padding: 6.5rem 0 3rem; } }
.page-hero__title { font-size: var(--fs-h1); line-height: 1.18; margin: 1.2rem 0 1.35rem; }
.page-hero__sub { font-size: clamp(0.98rem, 1vw, 1.12rem); line-height: 1.65; max-width: 60ch; color: rgba(255,255,255,0.78); }
@media (max-width: 768px) {
  .page-hero__sub { font-size: 0.98rem; max-width: none; }
}

/* --- Section-head: respiración consistente ------------------ */
.section-head { margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.section-head p.lead { font-size: var(--fs-lead); line-height: var(--lh-body); margin-top: 1.1rem; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: rgba(255,255,255,0.78); }

/* --- Prosa (legal, artículos) más cómoda -------------------- */
.prose { font-size: var(--fs-body); line-height: 1.8; }
.prose h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); line-height: 1.2; margin: 2.75rem 0 1.1rem; }
.prose h3 { font-size: var(--fs-h3); line-height: 1.25; margin: 2rem 0 0.85rem; }
.prose p { margin-bottom: 1.2rem; }
.prose .prose__updated { font-size: 0.92rem; }

/* --- Cards de features (más presencia tipográfica) ---------- */
.feature-card { padding: 2.25rem 1.9rem; }
.feature-card h3 { font-size: var(--fs-card-title); line-height: 1.3; margin: 0.6rem 0 0.85rem; }
.feature-card p { font-size: var(--fs-card-body); line-height: 1.65; color: rgba(255,255,255,0.72); }
.feature-card__icon { width: 58px; height: 58px; font-size: 1.45rem; margin-bottom: 1.35rem; }

/* --- Timeline más equilibrada ------------------------------- */
.timeline__item h3 { font-size: var(--fs-h4); line-height: 1.35; margin: 0.35rem 0 0.6rem; }
.timeline__item p { font-size: var(--fs-card-body); line-height: 1.7; }
.timeline__year { font-size: 1.5rem; }

/* --- Equipo / pilares / tech ------------------------------- */
.team-card h3 { font-size: 1.12rem; }
.team-card p { font-size: 0.88rem; }
.pillar__num { font-size: 0.95rem; }
.pillar h3 { line-height: 1.25; }
.pillar p { color: rgba(255,255,255,0.72); }

/* --- Home: Hero principal ---------------------------------- */
.hero__sub { font-size: clamp(1.05rem, 1.2vw, 1.22rem); line-height: 1.65; max-width: 58ch; }
@media (max-width: 768px) {
  .hero__sub { font-size: 1.02rem; max-width: none; }
}

/* --- Home: GERA preview cards ------------------------------ */
.gera__intro { font-size: var(--fs-lead); line-height: 1.7; max-width: 70ch; }
.gera-card__name { font-size: 1.8rem; line-height: 1.2; }
.gera-card__desc { font-size: var(--fs-card-body); line-height: 1.7; color: rgba(255,255,255,0.74); }
.gera-card__phase { font-size: 0.78rem; letter-spacing: 0.22em; }

/* --- Home: Sectores grid (cards con imagen) ---------------- */
.sector-card__title { font-size: 1.65rem; line-height: 1.18; }
.sector-card__desc { font-size: 1rem; line-height: 1.6; }
.sector-card__cta { font-size: 0.86rem; letter-spacing: 0.1em; }

/* --- Services intro y grid --------------------------------- */
.services__intro { font-size: var(--fs-lead); line-height: 1.7; color: rgba(255,255,255,0.78); }
.service-card { padding: 2.75rem 2.2rem; }
.service-card__title { font-size: 1.7rem; line-height: 1.22; margin-bottom: 0.8rem; }
.service-card__desc { font-size: var(--fs-card-body); line-height: 1.7; color: rgba(255,255,255,0.72); }
.service-card__cta { font-size: 0.92rem; letter-spacing: 0.08em; }

/* --- Ángel Protector ---------------------------------------- */
.modality-card__title { font-size: 1.35rem; line-height: 1.25; }
.modality-card__desc { font-size: var(--fs-card-body); line-height: 1.65; color: rgba(255,255,255,0.75); }
.benefits-grid__text { font-size: 1.05rem; line-height: 1.6; }
.angel-timeline__title { font-size: 1.35rem; line-height: 1.25; }
.angel-timeline__desc { font-size: var(--fs-card-body); line-height: 1.7; color: rgba(255,255,255,0.75); }

/* --- Contact page ------------------------------------------ */
.contact__intro { font-size: var(--fs-lead); line-height: 1.7; }
.contact__label { font-size: 0.7rem; letter-spacing: 0.2em; }
.contact__value { font-size: 1.08rem; }
.contact__keywords-list span { font-size: 0.88rem; padding: 0.55rem 0.95rem; }

/* --- Article cards / blog ---------------------------------- */
.article-card { border-radius: 16px; }
.article-card__body { padding: 1.65rem; gap: 0.85rem; }
.article-card h3 { font-size: 1.22rem; line-height: 1.32; }
.article-card__excerpt { font-size: var(--fs-card-body); line-height: 1.6; }
.article-card__meta { font-size: 0.86rem; }

/* --- Testimonios ------------------------------------------- */
.testimonial__quote { font-size: 1.05rem; line-height: 1.7; }
.testimonial__name { font-size: 1rem; }
.testimonial__role { font-size: 0.82rem; }

/* --- ODS chips y stats ------------------------------------ */
.ods-chip { padding: 0.65rem 1.15rem; font-size: 0.92rem; }
.stats-row__label { font-size: 0.92rem; line-height: 1.45; }

/* --- CTA banner: más presencia ----------------------------- */
.cta-banner__title { font-size: clamp(2rem, 3.5vw, 3.4rem); line-height: 1.1; }
.cta-banner__desc { font-size: var(--fs-body-lg); line-height: 1.65; }

/* --- Sectores: bloques inyectados desde brochures ---------- */
/* Asegura legibilidad de los bloques inline definidos en sector-*.html */
.split-2col p[style*="font-size"] { line-height: 1.7; }
.cap-item { padding: 1.55rem 1.4rem; border-radius: 6px; }
.cap-item__num { font-size: 1.85rem; margin-bottom: 0.65rem; }
.cap-item__title { font-size: 1.18rem !important; line-height: 1.32; }
.cap-item__desc { font-size: 1.02rem !important; line-height: 1.65; color: rgba(255,255,255,0.74) !important; }
.pull-quote { padding: 1.75rem 2rem; border-radius: 4px; }
.pull-quote__text { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.4; }
.pull-quote__body { font-size: 1.12rem; line-height: 1.72; }
.pull-quote__source { font-size: 0.82rem; letter-spacing: 0.16em; }
.phase__title { font-size: 1.45rem; line-height: 1.25; }
.phase__list { font-size: 1.1rem; line-height: 1.72; }
.diff-list strong { font-size: 1.18rem; }
.diff-list span { font-size: 1.05rem; line-height: 1.65; }
.kpi-block { padding: 1.55rem 1.8rem; border-radius: 4px; }
.kpi-block__label { font-size: 0.82rem; letter-spacing: 0.16em; }
.kpi-block ul { font-size: 1.05rem; line-height: 1.72; }

/* --- Visual interlude (imagen de transición entre bloques) -- */
.visual-interlude {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  background: #0a0a0a;
}
@media (min-width: 900px) {
  .visual-interlude { min-height: 420px; }
}
.visual-interlude__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(0.25) contrast(1.05) brightness(0.85);
  transition: transform 1.2s ease;
}
.visual-interlude:hover .visual-interlude__bg { transform: scale(1.03); }
.visual-interlude__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.40) 0%, transparent 50%, rgba(0,0,0,0.40) 100%);
}
.visual-interlude__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  min-height: inherit;
  padding: 4rem 1.5rem;
  max-width: 880px;
  margin: 0 auto;
}
.visual-interlude__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--alliance-red);
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.visual-interlude__quote {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.1rem);
  line-height: 1.35;
  color: #fff;
  margin: 0;
  letter-spacing: -0.005em;
}
.visual-interlude__quote em { color: var(--alliance-red); font-style: italic; }
.visual-interlude__caption {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* --- Visual interlude · variante LIGHT (manifiesto, solo gera.html) ─────
   Convive con la variante dark (foto+overlay) que usan otras páginas.
   Todas las reglas están scopeadas a `.visual-interlude--light`. ───────── */

/* Resetea la base dark: cancela min-height de imagen, fondo negro y oculta
   la foto/overlay heredados si por error siguen presentes en el markup. */
.visual-interlude.visual-interlude--light {
  min-height: 0;
  padding: clamp(4.5rem, 9vw, 7rem) 1.5rem;
  background:
    radial-gradient(ellipse 75% 55% at 92% 0%,  rgba(200,16,46,0.055) 0%, transparent 62%),
    radial-gradient(ellipse 65% 50% at 8% 100%, rgba(200,16,46,0.035) 0%, transparent 58%),
    #f5f4f2;
  overflow: hidden;
  position: relative;
}

.visual-interlude--light .visual-interlude__bg,
.visual-interlude--light .visual-interlude__overlay { display: none !important; }

/* Neutraliza el override global que fuerza texto blanco sobre la foto.
   Especificidad (0,2,X) + !important para vencer a `.visual-interlude p`. */
.visual-interlude--light h1,
.visual-interlude--light h2,
.visual-interlude--light h3,
.visual-interlude--light h4,
.visual-interlude--light p,
.visual-interlude--light a,
.visual-interlude--light span,
.visual-interlude--light em {
  text-shadow: none !important;
}

.visual-interlude--light .vi-inner {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* ── Fondo decorativo de la sección ────────────────────────────────────
   Capa absoluta debajo del contenido (z-index 0). Compuesta por:
   ::before → malla/grilla técnica gris claro con máscara radial
              que desvanece hacia los bordes
   ::after  → resplandor radial rojo de marca detrás del manifiesto ── */
.visual-interlude--light .vi-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.visual-interlude--light .vi-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(17,17,17,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17,17,17,0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  /* Máscara: visible en el centro, se desvanece hacia los bordes */
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 22%, transparent 85%);
          mask-image: radial-gradient(ellipse 72% 68% at 50% 50%, #000 22%, transparent 85%);
}

.visual-interlude--light .vi-bg::after {
  content: '';
  position: absolute;
  top: 26%;
  left: 50%;
  width: min(820px, 78%);
  aspect-ratio: 2.2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(200,16,46,0.13) 0%,
    rgba(200,16,46,0.05) 40%,
    transparent 72%
  );
  filter: blur(20px);
}

/* Eyebrow rojo */
.visual-interlude--light .vi-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--alliance-red) !important;
  margin: 0 0 1.6rem;
}

/* Manifiesto: frase grande, centrada, oscura */
.visual-interlude--light .vi-manifesto {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: #111 !important;
  max-width: 920px;
  margin: 0 0 clamp(3rem, 6vw, 4.5rem);
  will-change: opacity, transform;
}

/* Palabras-clave: arrancan en oscuro, se encienden a rojo con stagger.
   La transición usa solo `color` (no es transform/opacity, pero es un
   cambio puntual, no una animación de movimiento). */
.visual-interlude--light .vi-word {
  font-style: italic;
  font-weight: 500;
  color: #111 !important;
  transition: color 0.55s ease;
  will-change: color;
}
.visual-interlude--light .vi-word.is-on { color: var(--alliance-red) !important; }

/* Tres pilares — grid de 3 columnas con divisores sutiles */
.visual-interlude--light .vi-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  width: 100%;
  max-width: 980px;
  text-align: left;
}

.visual-interlude--light .vi-pillar {
  position: relative;
  padding: 0 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  will-change: transform, opacity;
}

/* Imagen ancha arriba de cada pilar (100% columna, aspect-ratio 16/10).
   Fallback: si el <img> falla (onerror lo oculta) el wrapper queda como
   bloque vacío con fondo muy tenue; el diseño no se rompe. */
.visual-interlude--light .vi-pillar__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(17,17,17,0.05);
  margin: 0 0 1.4rem;
  flex-shrink: 0;
}

.visual-interlude--light .vi-pillar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Divisor vertical entre columnas (no antes del primer pilar) */
.visual-interlude--light .vi-pillar + .vi-pillar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(17,17,17,0.18) 18%,
    rgba(17,17,17,0.18) 82%,
    transparent 100%
  );
}

.visual-interlude--light .vi-pillar__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--alliance-red) !important;
  margin-bottom: 0.85rem;
}

.visual-interlude--light .vi-pillar__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.2;
  color: #111 !important;
  margin: 0 0 0.75rem;
  position: relative;
  padding-bottom: 0.55rem;
}

/* Subrayado rojo corto bajo el título */
.visual-interlude--light .vi-pillar__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--alliance-red);
}

.visual-interlude--light .vi-pillar__desc {
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #555 !important;
  margin: 0;
}

/* Móvil/tablet: columnas se apilan, divisor pasa a horizontal */
@media (max-width: 760px) {
  .visual-interlude.visual-interlude--light { padding: 3.5rem 1.25rem; }
  .visual-interlude--light .vi-manifesto { font-size: clamp(1.35rem, 5.4vw, 1.85rem); }
  .visual-interlude--light .vi-pillars {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    max-width: 460px;
    text-align: left;
  }
  .visual-interlude--light .vi-pillar { padding: 0; }
  .visual-interlude--light .vi-pillar + .vi-pillar { padding-top: 1.6rem; }
  .visual-interlude--light .vi-pillar + .vi-pillar::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(17,17,17,0.18) 18%,
      rgba(17,17,17,0.18) 82%,
      transparent 100%
    );
  }
}

/* Accesibilidad: sin animación → estado final visible directamente */
@media (prefers-reduced-motion: reduce) {
  .visual-interlude--light .vi-manifesto,
  .visual-interlude--light .vi-pillar {
    opacity: 1 !important;
    transform: none !important;
  }
  .visual-interlude--light .vi-word {
    color: var(--alliance-red) !important;
    transition: none !important;
  }
}

/* --- Ritmo / divisores -------------------------------------- */
.section-divider { padding: 50px 0; }
@media (max-width: 768px) { .section-divider { padding: 32px 0; } }

/* --- Refinamientos finales ---------------------------------- */
/* Tamaño coherente para h2.display-xl secundarios (más equilibrado que h1) */
h2.display-xl { font-size: var(--fs-display-lg); line-height: var(--lh-heading); }

/* Asegura margen inferior consistente del eyebrow */
.eyebrow { margin-bottom: 0.85rem; display: inline-block; }

/* Mejora ligera del contraste de párrafos sin tocar estilos específicos */
.section-head p:not(.lead):not([class*="__"]):not([style*="color"]) { color: rgba(255,255,255,0.78); }

/* =========================================================
   ANTI-TEMBLOR · Bloqueo de transform en contenedores de sección
   ---------------------------------------------------------
   Los siguientes selectores marcan elementos que NUNCA deben
   recibir el efecto magnético/mousemove. El bug original venía
   de un selector JS `[class*="cta"]` que matcheaba estos
   contenedores y los movía con el cursor (provocando un
   "temblor" en el fondo). El JS ya fue corregido; estas reglas
   son una defensa adicional para que ningún script futuro
   reintroduzca el problema.
   ========================================================= */
.cta-banner,
.cta-banner__inner,
.cta-banner__title,
.cta-banner__desc,
.cta-banner__actions,
.cta-final,
.cta-final__inner,
.cta-final__title,
.cta-final__line,
.cta-final__line-inner,
.cta-final__sub,
.cta-final__ctas,
.cta-final__bg,
.cta-final__bg-img,
.cta-final__bg-overlay,
.hero__ctas,
.gera__cta,
.sector-card__cta,
.service-card__cta,
.about__cta,
.calc-intro__cta,
.visual-interlude,
.visual-interlude__bg,
.visual-interlude__overlay,
.visual-interlude__content,
.page-hero,
.page-hero__bg,
.page-hero__bg-img,
.page-hero__bg-overlay {
  /* Sólo bloqueamos translate dinámico; el transform: scale(1.05)
     estático del .cta-final__bg-img sigue funcionando porque
     se aplica en CSS, no por mousemove. */
}
/* El bloqueo real se hace en el JS (selector restringido).
   Las clases listadas arriba son referencia para futuros
   mantenedores: NO añadir data-magnetic a ninguna de ellas. */

/* Fondo del CTA banner: estático y consistente en todas las páginas */
.cta-banner {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(200,16,46,0.10) 0%, transparent 65%),
    linear-gradient(135deg, #0a0a0a 0%, #120407 60%, #1a0508 100%);
  background-attachment: scroll;
  background-repeat: no-repeat;
}

/* =====================================================================
   ALLIANCE HYBRID THEME — sistema Apple-like
   Hero, navbar, marquee, CTA banner, CTA final y footer
   permanecen oscuros. Las secciones marcadas con .theme-light (y su
   modificador --alt para off-white #f8f9fa) cambian a fondo claro con
   texto oscuro. El rojo Alliance (#c8102e) funciona en ambos fondos.
   El selector body.alliance-hybrid neutraliza el fondo body negro para
   que los section-divider no se vean como franjas oscuras entre dos
   secciones claras.
   ===================================================================== */

body.alliance-hybrid { background: #ffffff; }

/* Section-divider: hereda el fondo del body (blanco). Variante --dark
   para el divider entre dos secciones oscuras (cta-banner → cta-final) */
body.alliance-hybrid .section-divider { background: #ffffff; }
.section-divider--dark { background: #0a0a0a !important; }

/* Transición oscuro → claro — pasos distribuidos uniformemente para
   evitar el banding que produce un único stop intermedio coloreado */
.section-divider--dark-to-light {
  background: linear-gradient(to bottom,
    #0a0a0a  0%,
    #171717 14%,
    #2e2e2e 28%,
    #555555 42%,
    #8a8a8a 56%,
    #c0c0c0 70%,
    #e2e2e2 84%,
    #f8f9fa 100%
  ) !important;
  height: 180px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.section-divider--dark-to-light::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alliance-red), transparent);
  opacity: 0.5;
  display: block;
}

/* Transición claro → oscuro */
.section-divider--light-to-dark {
  background: linear-gradient(to bottom,
    #f8f9fa  0%,
    #e2e2e2 16%,
    #c0c0c0 30%,
    #8a8a8a 44%,
    #555555 58%,
    #2e2e2e 72%,
    #171717 86%,
    #0a0a0a 100%
  ) !important;
  height: 180px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.section-divider--light-to-dark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--alliance-red), transparent);
  opacity: 0.5;
  display: block;
}

/* ods-chip en body.alliance-hybrid: el body es blanco, por lo que cualquier
   chip sobre fondo transparente hereda blanco → texto oscuro por defecto */
body.alliance-hybrid .ods-chip {
  color: #555555;
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.15);
}
body.alliance-hybrid .ods-chip i { color: var(--alliance-red); }
/* Excepción: error-page y secciones explícitamente oscuras → texto blanco */
body.alliance-hybrid .error-page .ods-chip {
  color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}
body.alliance-hybrid .error-page .ods-chip i { color: var(--alliance-red); }

/* --- BASE: fondos de sección ----------------------------------------- */
/* Iluminación ambiental sutil: dos focos de luz roja de marca en esquinas
   opuestas dan profundidad cinematográfica sin saturar */
.theme-light {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(ellipse 75% 55% at 95% 0%, rgba(200,16,46,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 65% 50% at 0% 100%, rgba(200,16,46,0.035) 0%, transparent 55%);
}
.theme-light.theme-light--alt {
  background-color: #f8f9fa !important;
  background-image:
    radial-gradient(ellipse 75% 55% at 95% 0%, rgba(200,16,46,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 65% 50% at 0% 100%, rgba(200,16,46,0.028) 0%, transparent 55%);
}

/* Las secciones claras no llevan textura .noise; si por error la tienen
   neutralizamos el pseudo-element para que no muestre ruido sobre claro */
.theme-light::before { display: none !important; }

/* --- TIPOGRAFÍA en secciones claras ---------------------------------- */
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light .display-xl { color: #111111; }
.theme-light p { color: #555555; }
.theme-light em { color: var(--alliance-red); }
/* Eyebrow se mantiene en rojo Alliance (ya está definido globalmente) */

/* Intros / leads de sección */
.theme-light .gera__intro,
.theme-light .sectores__intro,
.theme-light .services__intro,
.theme-light .about__desc,
.theme-light .calc-intro__desc,
.theme-light .lead { color: #555555; }

/* --- TRUST BAND (banda de confianza) --------------------------------- */
.theme-light .trust__num { color: var(--alliance-red); }
.theme-light .trust__label { color: #555555; }
.theme-light .trust__item { border-color: rgba(0,0,0,0.10); }
.theme-light .trust__item + .trust__item::before { background: rgba(0,0,0,0.10); }
@media (min-width: 700px) {
  .theme-light .trust__item { border-left-color: rgba(0,0,0,0.10); }
}

/* --- GERA PREVIEW (letras G E R A) ----------------------------------- */
.theme-light .gera-preview__phases li {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .gera-preview__phases li:hover {
  background: #ffffff;
  border-color: rgba(200,16,46,0.30);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.theme-light .gera-preview__letter { color: var(--alliance-red); }
.theme-light .gera-preview__name { color: #111111; }

/* --- GERA CARDS (página /gera.html) ---------------------------------- */
.theme-light .gera-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .gera-card:hover {
  background: #ffffff;
  border-color: rgba(200,16,46,0.30);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.theme-light .gera-card__name { color: #111111; }
.theme-light .gera-card__desc { color: #555555; }
.theme-light .gera-card__phase { color: rgba(200,16,46,0.75); }

/* --- SECTOR CARDS (con imagen de fondo + overlay) -------------------- */
/* Mantienen su texto blanco sobre overlay oscuro. Sin cambios. */

/* --- SERVICE CARDS --------------------------------------------------- */
/* Cards SIN imagen (preview en home) → fondo NEGRO con texto BLANCO
   (decisión de diseño: contraste premium card oscura sobre sección clara). */
.theme-light .service-card:not(:has(.service-card__img)) {
  background: #111111;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.theme-light .service-card:not(:has(.service-card__img)):hover {
  background: #141414;
  border-color: rgba(200,16,46,0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.20);
}
.theme-light .service-card:not(:has(.service-card__img)) .service-card__num { color: var(--alliance-red); }
.theme-light .service-card:not(:has(.service-card__img)) .service-card__title { color: #ffffff; }
.theme-light .service-card:not(:has(.service-card__img)) .service-card__desc { color: #cccccc; }
.theme-light .service-card:not(:has(.service-card__img)) .service-card__cta { color: #ffffff; }
.theme-light .service-card:not(:has(.service-card__img)) .service-card__cta i { color: #ffffff; }
.theme-light .service-card:not(:has(.service-card__img)) .service-card__cta:hover { color: var(--alliance-red); }
.theme-light .service-card:not(:has(.service-card__img)) .service-card__cta:hover i { color: var(--alliance-red); }
/* Cards CON imagen (servicios.html) — overlay oscuro mantiene texto blanco. Sin cambios. */

/* --- ABOUT section --------------------------------------------------- */
.theme-light .about__title { color: #111111; }
.theme-light .about__desc { color: #555555; }
.theme-light .about__quote-text { color: #111111; }
.theme-light .about__quote-sub { color: #555555; }
.theme-light .about__giant-num { color: rgba(0,0,0,0.06); }

/* --- PILLARS --------------------------------------------------------- */
.theme-light .pillar { border-bottom-color: rgba(0,0,0,0.10); }
.theme-light .pillar:last-child { border-bottom-color: rgba(0,0,0,0.10); }
@media (min-width: 640px) {
  .theme-light .pillar:nth-last-child(2) { border-bottom-color: rgba(0,0,0,0.10); }
}
.theme-light .pillar__num { color: rgba(200,16,46,0.70); }
.theme-light .pillar:hover .pillar__num { color: var(--alliance-red); }
.theme-light .pillar h3 { color: #111111; }
.theme-light .pillar p { color: #555555; }

/* --- CALCULADORA (intro y wizard externos) --------------------------- */
.theme-light .calc-intro__title { color: #111111; }
.theme-light .calc-intro__title em { color: var(--alliance-red); }
.theme-light .calc-intro__desc { color: #555555; }
.theme-light .calc-intro__hint { color: #888888; }
.theme-light .calc-intro__hint i { color: var(--alliance-red); }
.theme-light .calc-closing p { color: #555555; }
.theme-light .calc-closing em { color: var(--alliance-red); }

/* --- TESTIMONIOS ----------------------------------------------------- */
.theme-light .testimonial {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .testimonial__quote { color: #333333; }
.theme-light .testimonial__name { color: #111111; }
.theme-light .testimonial__role { color: #777777; }
.theme-light .testimonial__avatar { background: rgba(200,16,46,0.10); color: var(--alliance-red); }

/* --- TESTIMONIOS: compactar sección sin tocar globales ---------------- */
.testimonials-section.section-pad {
  padding-top: calc(var(--nav-h) + 0.25rem);
  padding-bottom: 1.75rem;
}
@media (max-width: 768px) {
  .testimonials-section.section-pad {
    padding-bottom: 1.25rem;
  }
}
.testimonials-section .display-xl {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
}
.testimonials-section .section-head {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.testimonials-section .testimonials {
  gap: 1.25rem;
}
.testimonials-section .testimonial {
  padding: 1.5rem;
  gap: 1rem;
}
.testimonials-section .testimonial__quote {
  font-size: 0.92rem;
  line-height: 1.65;
}
.testimonials-section .testimonial__avatar {
  width: 40px;
  height: 40px;
}
.testimonials-section .testimonial__name { font-size: 0.9rem; }
.testimonials-section .testimonial__role { font-size: 0.76rem; }

/* --- CLIENTS / Logo row --------------------------------------------- */
.theme-light .logo-row__item {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  color: #777777;
  opacity: 0.85;
}
.theme-light .logo-row__item:hover {
  color: #111111;
  border-color: rgba(200,16,46,0.40);
  opacity: 1;
}

/* --- CLIENTS: compactar sección sin tocar globales ------------------- */
.clients.section-pad {
  padding-top: calc(var(--nav-h) + 0.25rem);
  padding-bottom: 1.75rem;
}
@media (max-width: 768px) {
  .clients.section-pad {
    padding-bottom: 1.25rem;
  }
}
.clients .display-xl {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1.2;
}
.clients .section-head {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.clients .logo-row {
  gap: 1.25rem;
}
.clients .logo-row__item {
  width: 128px;
  height: 60px;
}

/* --- SECTORES head (intros y títulos) -------------------------------- */
.theme-light .sectores__title { color: #111111; }

/* --- FEATURE-CARD (cards genéricas) --------------------------------- */
.theme-light .feature-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .feature-card:hover {
  background: #ffffff !important;
  border-color: rgba(200,16,46,0.30);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  animation: none !important;
}
.theme-light .feature-card h3 { color: #111111; }
.theme-light .feature-card p { color: #555555; }
.theme-light .feature-card__value { color: #888888; border-top-color: rgba(0,0,0,0.08); }
.theme-light .feature-card__value span { color: var(--alliance-red); }

/* --- STATS-ROW (contadores en fila) --------------------------------- */
.theme-light .stats-row__num { color: var(--alliance-red); }
.theme-light .stats-row__label { color: #555555; }

/* --- TEAM-CARD -------------------------------------------------------- */
.theme-light .team-card h3 { color: #111111; }

/* --- SECTION-HEAD párrafos (alta especificidad base — usar !important) */
/* Base rule .section-head p:not(.lead):not([class*="__"]):not([style*="color"])
   tiene especificidad 0,4,1; .theme-light .lead tiene 0,2,0 < 0,2,1 de la base.
   Se usa !important únicamente aquí para ganar la batalla de especificidad. */
.theme-light .section-head p { color: #555555 !important; }
.theme-light .section-head p.eyebrow { color: var(--alliance-red) !important; }
.theme-light .section-head p.lead { color: #555555 !important; }

/* --- TIMELINE (nosotros.html — dentro de secciones theme-light) ------- */
.theme-light .timeline__year { color: var(--alliance-red); }

/* --- ODS-CHIP (nosotros.html, sector pages — dentro de theme-light) --- */
.theme-light .ods-chip {
  color: #555555;
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
}
.theme-light .ods-chip i { color: var(--alliance-red); }

/* --- PROSE (artículos de blog, privacidad, terminos — en theme-light) - */
.theme-light .prose { color: #333333; }
.theme-light .prose strong { color: #111111; }
.theme-light .prose .prose__updated { color: rgba(0,0,0,0.4); }

/* --- ARTICLE-CARD (blog.html — dentro de theme-light) --------------- */
.theme-light .article-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .article-card:hover {
  background: #ffffff !important;
  border-color: rgba(200,16,46,0.30);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  animation: none !important;
}
.theme-light .article-card h3 { color: #111111; }
.theme-light .article-card__excerpt { color: #555555; }
.theme-light .article-card__meta { color: #888888; }

/* --- VALOR-CARD (página nosotros — theme-light) --------------------- */
.theme-light .valor-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
}
.theme-light .valor-card:hover {
  background: #ffffff;
  border-color: rgba(200,16,46,0.28);
  box-shadow: 0 14px 44px rgba(0,0,0,0.11), 0 4px 12px rgba(0,0,0,0.06);
}
.theme-light .valor-card__content h3 { color: #111111; }
.theme-light .valor-card__content p   { color: #555555; }

/* En fondo claro el overlay de imagen es más neutro (sin tinte rojizo) */
.theme-light .valor-card__img::after {
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.04) 0%,
    transparent 35%,
    rgba(0,0,0,0.38) 100%
  );
}

/* --- CAP-ITEM (capacidades en páginas sectoriales) ------------------ */
.theme-light .cap-item {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .cap-item:hover {
  background: #ffffff;
  border-color: rgba(200,16,46,0.30);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.theme-light .cap-item__title { color: #111111 !important; }
.theme-light .cap-item__desc { color: #555555 !important; }

/* --- MODALITY-CARD (Ángel Protector) — cards oscuras en sección clara */
/* Las cards mantienen fondo #111 incluso dentro de .theme-light. Sin
   este override, .theme-light h3 (#111) y .theme-light p (#555) las
   volvían invisibles sobre el negro. */
.theme-light .modality-card {
  background: #111111;
  border-color: rgba(255,255,255,0.08);
}
.theme-light .modality-card:hover {
  background: #141414;
  border-color: rgba(200,16,46,0.45);
}
.theme-light .modality-card__title { color: #ffffff !important; }
.theme-light .modality-card__desc { color: #cccccc !important; }
.theme-light .modality-card__icon { color: var(--alliance-red); border-color: rgba(255,255,255,0.18); }
.theme-light .modality-card:hover .modality-card__icon { color: #ffffff; }

/* --- BTN-PRIMARY en secciones claras --------------------------------- */
/* El base hover ponía fondo blanco + texto negro: se confundía con la
   sección clara. Acá lo mantenemos rojo pero un tono más profundo,
   con texto blanco siempre. */
.theme-light .btn-primary {
  background: var(--alliance-red);
  color: #ffffff;
  border-color: var(--alliance-red);
}
.theme-light .btn-primary:hover {
  background: #a30d27;
  color: #ffffff;
  border-color: #a30d27;
  box-shadow: 0 14px 32px rgba(200,16,46,0.30);
}
.theme-light .btn-primary .arrow,
.theme-light .btn-primary i { color: #ffffff; }
.theme-light .btn-primary:hover .arrow,
.theme-light .btn-primary:hover i { color: #ffffff; }

/* --- BTN-GHOST en secciones claras ----------------------------------- */
.theme-light .btn-ghost {
  color: #111111;
  border-color: rgba(0,0,0,0.35);
}
.theme-light .btn-ghost .arrow,
.theme-light .btn-ghost i { color: #111111; }
.theme-light .btn-ghost::before { background: var(--alliance-red); }
.theme-light .btn-ghost:hover {
  color: #ffffff;
  border-color: var(--alliance-red);
}
.theme-light .btn-ghost:hover .arrow,
.theme-light .btn-ghost:hover i { color: #ffffff; }

/* --- BLOG-FILTER (botones de filtro del blog en theme-light) -------- */
.theme-light .blog-filter {
  color: #555555;
  border-color: rgba(0,0,0,0.20);
  background: transparent;
}
.theme-light .blog-filter:hover,
.theme-light .blog-filter.is-active {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #ffffff;
}

/* --- LOGO-ROW items en theme-light (hover override) ----------------- */
.theme-light .logo-row__item:hover {
  color: #111111;
  border-color: rgba(200,16,46,0.40);
}

/* --- INPUTS / TEXTAREA / SELECT (formularios en secciones claras) ---- */
.theme-light .field > span,
.theme-light label > span { color: #555555; }
.theme-light .field input[type="text"],
.theme-light .field input[type="email"],
.theme-light .field input[type="tel"],
.theme-light .field input[type="number"],
.theme-light .field textarea,
.theme-light .field select {
  background: #ffffff;
  border-color: rgba(0,0,0,0.12);
  color: #111111;
}
.theme-light .field input::placeholder,
.theme-light .field textarea::placeholder { color: #999999; }
.theme-light .field input:focus,
.theme-light .field textarea:focus,
.theme-light .field select:focus {
  border-color: var(--alliance-red);
  background: #ffffff;
}
.theme-light .field--checkbox span { color: #555555; }
.theme-light .contact-form__note { color: #888888; }

/* --- CONTACT-FORM container (Ángel Protector, Contacto, Trabaja con nosotros) */
.theme-light .contact-form {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.theme-light .contact-form__header { color: #111111; }

/* --- CONTACT panel info (.contact__list y derivados) — Ángel Protector,
   contacto.html, etc. en secciones theme-light ----------------------- */
.theme-light .contact__title { color: #111111; }
.theme-light .contact__intro { color: #555555; }
.theme-light .contact__list li {
  border-top-color: rgba(0,0,0,0.10);
}
.theme-light .contact__list li:last-child {
  border-bottom-color: rgba(0,0,0,0.10);
}
.theme-light .contact__icon {
  border-color: rgba(0,0,0,0.15);
  color: var(--alliance-red);
}
.theme-light .contact__list li:hover .contact__icon {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #ffffff;
}
.theme-light .contact__label { color: var(--alliance-red); }
.theme-light .contact__value { color: #333333; }
.theme-light a.contact__value { color: #333333; }
.theme-light a.contact__value:hover { color: var(--alliance-red); }
.theme-light .contact__keywords-title { color: var(--alliance-red); }
.theme-light .field input,
.theme-light .field select,
.theme-light .field textarea {
  border-bottom-color: rgba(0,0,0,0.18);
}
.theme-light .field textarea {
  border: 1px solid rgba(0,0,0,0.15);
  background: #f8f9fa;
}
.theme-light .field select option {
  background: #ffffff;
  color: #111111;
}

/* --- BENEFITS-GRID (Ángel Protector beneficios) */
.theme-light .benefits-grid li {
  border-bottom-color: rgba(0,0,0,0.10) !important;
}
.theme-light .benefits-grid__text { color: #333333; }

/* --- ANGEL-TIMELINE (cómo funciona en angel-protector.html) */
.theme-light .angel-timeline::before {
  background: linear-gradient(180deg,
    rgba(200,16,46,0.45) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(200,16,46,0.45) 100%);
}
.theme-light .angel-timeline__num {
  background: #ffffff;
  border-color: rgba(200,16,46,0.45);
  color: var(--alliance-red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.theme-light .angel-timeline > li:hover .angel-timeline__num {
  background: var(--alliance-red);
  color: #ffffff;
}
.theme-light .angel-timeline__title { color: #111111; }
.theme-light .angel-timeline__desc { color: #555555; }

/* --- ANGEL-TRUST (mensaje de confianza) */
.theme-light .angel-trust {
  background: rgba(200,16,46,0.06);
  border-color: rgba(200,16,46,0.30);
}
.theme-light .angel-trust__text { color: #333333; }
.theme-light .angel-trust__text strong { color: #111111; }

/* --- CALCULADORA (wizard contenedor) --------------------------------- */
.theme-light .calc-wizard {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  border-radius: 8px;
}

/* --- CALCULADORA (botones de opción, radios, checks, range) ---------- */
.theme-light .calc-option,
.theme-light .calc-radio,
.theme-light .calc-check {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  color: #111111;
}
.theme-light .calc-option:hover,
.theme-light .calc-radio:hover,
.theme-light .calc-check:hover {
  border-color: rgba(200,16,46,0.30);
  background: #ffffff;
}
.theme-light .calc-option.is-selected,
.theme-light .calc-radio.is-selected,
.theme-light .calc-check.is-checked,
.theme-light .calc-check.is-selected {
  border-color: var(--alliance-red);
  background: var(--alliance-red);
}
.theme-light .calc-option.is-selected .calc-option__label,
.theme-light .calc-radio.is-selected .calc-radio__text,
.theme-light .calc-check.is-checked .calc-check__text,
.theme-light .calc-check.is-selected .calc-check__text { color: #ffffff !important; }
.theme-light .calc-option.is-selected .calc-option__icon,
.theme-light .calc-radio.is-selected .calc-radio__dot,
.theme-light .calc-check.is-checked .calc-check__icon,
.theme-light .calc-check.is-selected .calc-check__icon { color: #ffffff; }
.theme-light .calc-option__label,
.theme-light .calc-radio__text,
.theme-light .calc-check__text { color: #111111; }
.theme-light .calc-option__icon,
.theme-light .calc-check__icon { color: var(--alliance-red); }
.theme-light .calc-step__title { color: #111111; }
.theme-light .calc-step__hint { color: #777777; }
.theme-light .calc-step__eyebrow { color: var(--alliance-red); }
.theme-light .calc-progress__label { color: #777777; }
.theme-light .calc-progress__count { color: #111111; }
.theme-light .calc-progress__count strong { color: var(--alliance-red); }
.theme-light .calc-progress__bar { background: rgba(0,0,0,0.08); }
.theme-light .calc-range__num { color: var(--alliance-red); }
.theme-light .calc-range__unit { color: #555555; }
.theme-light .calc-range__bounds { color: #888888; }
.theme-light .calc-range__input { background: rgba(0,0,0,0.18); }
.theme-light .calc-range__input::-webkit-slider-thumb { border-color: #ffffff; }
.theme-light .calc-range__input::-moz-range-thumb { border-color: #ffffff; }
.theme-light .calc-result__title { color: #111111; }
.theme-light .calc-result__panel {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.theme-light .calc-result__panel-title { color: #111111; }
.theme-light .calc-vuln-list li { color: #555555; }
.theme-light .calc-impact__amount { color: #111111; }
.theme-light .calc-impact__caveat { color: #888888; }
.theme-light .calc-reco {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
}
.theme-light .calc-reco__title { color: #111111; }
.theme-light .calc-reco__text { color: #555555; }
.theme-light .calc-gauge__value .calc-gauge__level-meta { color: #777777; }
.theme-light .calc-capture {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
}
.theme-light .calc-capture h3 { color: #111111; }
.theme-light .calc-capture p { color: #555555; }

/* --- CALCULADORA gauge (medidor): aguja y arco bg en theme-light ----- */
.theme-light .calc-gauge__bg-arc { stroke: rgba(0,0,0,0.10); }
.theme-light .calc-gauge__needle { stroke: var(--alliance-red); }
.theme-light .calc-gauge__hub-outer { stroke: rgba(0,0,0,0.30); }
.theme-light .calc-gauge__hub { fill: var(--alliance-red); }

/* --- CALCULADORA btn-ghost dentro de calc-wizard (refuerzo visibilidad) */
.theme-light .calc-wizard .btn-ghost,
.theme-light .calc-result__actions .btn-ghost,
.theme-light .calc-capture .btn-ghost {
  color: #111111 !important;
  border-color: rgba(0,0,0,0.35);
  background: transparent;
}
.theme-light .calc-wizard .btn-ghost .arrow,
.theme-light .calc-wizard .btn-ghost i,
.theme-light .calc-result__actions .btn-ghost .arrow,
.theme-light .calc-result__actions .btn-ghost i,
.theme-light .calc-capture .btn-ghost .arrow,
.theme-light .calc-capture .btn-ghost i { color: #111111; }
.theme-light .calc-wizard .btn-ghost:hover,
.theme-light .calc-result__actions .btn-ghost:hover,
.theme-light .calc-capture .btn-ghost:hover {
  color: #ffffff !important;
  border-color: var(--alliance-red);
}
.theme-light .calc-wizard .btn-ghost:hover .arrow,
.theme-light .calc-wizard .btn-ghost:hover i,
.theme-light .calc-result__actions .btn-ghost:hover .arrow,
.theme-light .calc-result__actions .btn-ghost:hover i,
.theme-light .calc-capture .btn-ghost:hover .arrow,
.theme-light .calc-capture .btn-ghost:hover i { color: #ffffff; }

/* ====== TEXTO SOBRE IMÁGENES — SIEMPRE BLANCO ====== */
/* Cards de sector (siempre tienen imagen de fondo) */
.sector-card .sector-card__title,
.sector-card .sector-card__desc,
.sector-card .sector-card__cta,
.sector-card h1, .sector-card h2, .sector-card h3, .sector-card h4,
.sector-card p, .sector-card a {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
/* Número del sector: mantener en rojo */
.sector-card .sector-card__num {
  color: var(--alliance-red) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Service cards con imagen de fondo */
.service-card:has(.service-card__img) .service-card__title,
.service-card:has(.service-card__img) .service-card__desc,
.service-card:has(.service-card__img) .service-card__cta {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* Número de servicio: mantener en rojo */
.service-card:has(.service-card__img) .service-card__num {
  color: var(--alliance-red) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Blog cards (fondo oscuro #111, sección theme-light) */
.theme-light .blog-card .blog-card__title { color: #ffffff !important; text-shadow: none; }
.theme-light .blog-card .blog-card__desc { color: rgba(255,255,255,0.65) !important; text-shadow: none; }
.theme-light .blog-card .blog-card__cta { color: #ffffff !important; text-shadow: none; }
.theme-light .blog-card .blog-card__meta { color: var(--alliance-gray-400) !important; }
.theme-light .blog-card .blog-card__meta span:first-child { color: var(--alliance-red) !important; }

/* Visual-interlude sections (dark, always have text on image) */
.visual-interlude h1, .visual-interlude h2, .visual-interlude h3, .visual-interlude h4,
.visual-interlude p, .visual-interlude a, .visual-interlude span,
.visual-interlude .eyebrow, .visual-interlude em {
  color: #ffffff !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.visual-interlude em { color: var(--alliance-red) !important; }

/* Page heroes (siempre dark, texto siempre blanco) */
.page-hero h1, .page-hero h2, .page-hero h3,
.page-hero p, .page-hero a, .page-hero span,
.page-hero .eyebrow, .page-hero .display-xl,
.page-hero .page-hero__title, .page-hero .page-hero__sub {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Home hero */
.hero__content h1, .hero__content h2, .hero__content p,
.hero__content a, .hero__content span, .hero__content .eyebrow,
.hero__content .display-xl {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* ====== TEMA HÍBRIDO — COMPONENTES SECTOR (override inline <style> blocks) ====== */
.theme-light .cap-item {
  background: #f8f9fa;
  border-color: rgba(0,0,0,0.08);
}
.theme-light .cap-item__title { color: #111111 !important; }
.theme-light .cap-item__desc { color: #555555 !important; }

.theme-light .phase { background: transparent; }
.theme-light .phase__num { background: #f0f0f0; border-color: rgba(200,16,46,0.4); }
.theme-light .phase__title { color: #111111; }
.theme-light .phase__list { color: #555555; }

.theme-light .diff-list li { border-bottom-color: rgba(0,0,0,0.08); }
.theme-light .diff-list strong { color: #111111; }
.theme-light .diff-list span { color: #555555; }

.theme-light .kpi-block {
  background: #f4f4f4;
  border-top-color: var(--alliance-red);
}
.theme-light .kpi-block__title { color: #111111; }
.theme-light .kpi-block ul { color: #555555; }

.theme-light .pull-quote { background: rgba(0,0,0,0.04); }
.theme-light .pull-quote__text { color: #111111; }
.theme-light .pull-quote__body { color: #555555; }


/* ================== HERO · CANVAS DE PARTÍCULAS CONECTADAS ==================
   Capa de partículas tipo "red de vigilancia" sobre el video del hero.
   z-index 2: encima del overlay (1), debajo del texto (3) y de los corners (4). */
.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
}
@media (max-width: 768px) {
  /* Reducimos peso en mobile (el JS también baja la cantidad de partículas) */
  .hero__particles { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__particles { display: none; }
}

/* ================== REVEAL · TEXTO PALABRA POR PALABRA (scroll-link) ==================
   Cada palabra de un párrafo con [data-reveal-text] se envuelve en .reveal-word.
   El JS las anima de opacidad 0.15 → 1 conforme el usuario hace scroll. */
[data-reveal-text] {
  /* No cambiar tamaño ni color, solo permitir spans inline. */
}
.reveal-word {
  display: inline-block;
  opacity: 0.15;
  color: inherit;
  transition: opacity 0.05s linear;
  will-change: opacity;
}
/* En fondos claros, el texto base es oscuro → palabras "fantasma" en gris claro */
.theme-light .reveal-word { color: #c9c9c9; }
.theme-light .reveal-word.is-on { color: #111; }
/* Sobre fondos oscuros, palabras fantasma en gris medio → blanco al activarse */
.reveal-word.is-on { color: inherit; opacity: 1; }
/* Respetar palabras destacadas en rojo (em dentro de párrafo) */
.theme-light [data-reveal-text] em .reveal-word,
.theme-light [data-reveal-text] em.reveal-word { color: var(--alliance-red) !important; }
[data-reveal-text] em .reveal-word,
[data-reveal-text] em.reveal-word { color: var(--alliance-red); }

@media (prefers-reduced-motion: reduce) {
  .reveal-word { opacity: 1 !important; color: inherit !important; }
}

/* ================== REVEAL · IMÁGENES CON CORTINA (clip-path) ==================
   Aplicado por JS a elementos con [data-reveal-clip].
   La imagen entra con clip-path desde abajo + leve zoom (scale 1.2 → 1). */
[data-reveal-clip] {
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}
[data-reveal-clip] > img,
[data-reveal-clip] > .bg-img,
[data-reveal-clip] > picture > img {
  transform: scale(1.2);
  transform-origin: center center;
  will-change: transform;
}
[data-reveal-clip].is-revealed {
  clip-path: inset(0% 0 0 0);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal-clip].is-revealed > img,
[data-reveal-clip].is-revealed > .bg-img,
[data-reveal-clip].is-revealed > picture > img {
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal-clip] { clip-path: none !important; }
  [data-reveal-clip] > img,
  [data-reveal-clip] > .bg-img { transform: none !important; }
}


/* ========================================================================
   WOW EFFECTS — versión home premium
   ======================================================================== */

/* ============== 1) DECODE DEL TÍTULO DEL HERO ==============
   Cada letra del h1 es un span .decode-char. Mientras "is-scrambling"
   tiene un sutil glow rojo + opacidad reducida. Cuando se resuelve
   (is-resolved), vuelve al estado normal con una transición. */
.decode-char {
  display: inline;
  font-variant-numeric: tabular-nums;
  transition: color 0.2s ease, text-shadow 0.3s ease, opacity 0.3s ease;
}
.decode-char.is-scrambling {
  color: var(--alliance-red);
  text-shadow: 0 0 12px rgba(200, 16, 46, 0.6), 0 0 4px rgba(200, 16, 46, 0.9);
  opacity: 0.95;
}
.decode-char.is-resolved {
  color: inherit;
  text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .decode-char,
  .decode-char.is-scrambling { color: inherit; text-shadow: none; opacity: 1; }
}



/* ========================================================================
   HERO · REDISEÑO SPLIT (solo index.html)
   Estructura nueva: 2 columnas. Izquierda → texto sobre negro puro.
   Derecha → video con datos discretos abajo. Fusión suave entre ambas.
   ======================================================================== */

/* Override del .hero base — el nuevo hero NO usa flex centrado */
.hero.hero--split {
  position: relative;
  width: 100%;
  min-height: clamp(500px, 65vh, 720px);
  min-height: 100vh;
  height: 100vh;
  height: 100svh;
  display: block;
  overflow: hidden;
  background: #0a0a0a;
  align-items: stretch;
}

.hero--split .hero__inner {
  display: grid;
  grid-template-columns: 54% 46%;
  width: 100%;
  height: 100%;
}

/* ---------- COLUMNA IZQUIERDA · texto sobre negro ---------- */
.hero--split .hero__left {
  position: relative;
  z-index: 3;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: calc(var(--nav-h) + 4rem) clamp(2rem, 4vw, 5rem) 4rem clamp(2.5rem, 5vw, 5.5rem);
}
.hero--split .hero__left-content {
  width: 100%;
  max-width: none;   /* el ancho lo controla el padding de .hero__left */
}
.hero--split .hero__line {
  padding-bottom: 0.14em;
}

/* Eyebrow */
.hero--split .hero__eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
/* Franja roja elegante que acompaña el texto a la izquierda */
.hero--split .hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1.3em;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--alliance-red) 0%, rgba(200,16,46,0.15) 100%);
  border-radius: 2px;
}

/* Título — !important en propiedades que compiten con h1.display-xl (0,1,1) y
   .hero__title (0,1,0). Este selector (0,2,0) gana sin !important en font-size,
   pero se añade para anular cualquier herencia inesperada del cascade. */
.hero--split .hero__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif !important;
  font-size: clamp(2rem, 3.8vw, 3.5rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  color: #fff !important;
  text-align: left;
  margin: 0 0 1rem;
  max-width: 100% !important;
  width: auto !important;
  font-weight: 500;
  word-break: normal !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  white-space: normal !important;
  text-wrap: pretty;   /* pretty desde el inicio: evita huérfanas sin recalcular como balance */
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}
@media (prefers-reduced-motion: reduce) {
  .hero--split .hero__title {
    opacity: 1 !important;
    transform: none !important;
  }
}
.hero--split .hero__title em {
  font-style: italic;
  color: var(--alliance-red);
  position: relative;
}
.hero--split .hero__title em::after { display: none; } /* sin subrayado rojo, look más limpio */
.hero--split .hero__accent {
  color: var(--alliance-red);
  font-style: italic;
  white-space: nowrap;
}

/* Separador del eyebrow (más tenue que el texto rojo) */
.hero--split .hero__eyebrow-sep {
  color: rgba(200, 16, 46, 0.5);
  margin: 0 0.45em;
  font-weight: 400;
}

/* Subtítulo */
.hero--split .hero__sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: #ffffff;
  max-width: 460px;
  margin: 0 0 2rem;
  text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

/* Trust strip · cinturón de respaldo bajo los CTAs */
.hero--split .hero__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.4rem;
  margin: 1.6rem 0 0;
  padding: 1.3rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 540px;
}
.hero--split .hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  letter-spacing: 0.015em;
  color: #b0b0b0;
}
.hero--split .hero__trust i {
  color: var(--alliance-red);
  font-size: 0.78rem;
}
@media (max-width: 768px) {
  .hero--split .hero__trust {
    gap: 0.45rem 1rem;
    padding-top: 1.1rem;
  }
  .hero--split .hero__trust li { font-size: 11px; }
}

/* CTAs: botón primario + link sutil */
.hero--split .hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin: 0;
}
.hero--split .hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.hero--split .hero__link:hover {
  border-bottom-color: #fff;
}
.hero--split .hero__link .arrow { transition: transform 0.3s ease; }
.hero--split .hero__link:hover .arrow { transform: translateX(4px); }

/* ---------- COLUMNA DERECHA · carrusel de fotos + datos ---------- */
.hero--split .hero__right {
  position: relative;
  overflow: hidden;
  background: #0a0a0a;
}
/* Fusión con el negro de la izquierda (borde izquierdo) */
.hero--split .hero__video-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, #0a0a0a 0%, transparent 18%);
  pointer-events: none;
}

/* ========================================================================
   HERO · Carrusel de fotos — 7 slides con crossfade + Ken Burns
   Scoped a .hero__carousel dentro de .hero--split (solo index.html).
   Reemplaza el <video> del hero manteniendo el mismo box que .hero__video-wrap.
   ======================================================================== */
.hero--split .hero__carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}

.hero--split .hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  will-change: opacity;
}

.hero--split .hero__slide.is-active {
  opacity: 1;
  z-index: 1;
}

.hero--split .hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 20%;
  display: block;
  opacity: 1;
  filter: none;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
  /* Cuando el slide pierde la animación Ken Burns (al desactivarse), esta
     transition evita que el zoom "salte" de golpe a scale(1); en vez de eso
     se asienta suave, en sintonía con el 1.8s del crossfade de opacidad. */
  transition: transform 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ken Burns: la imagen activa hace zoom durante los 4s que dura en pantalla.
   ease-in-out (en vez de ease-out) da un movimiento continuo de principio a
   fin, sin la desaceleración brusca que se sentía "mecánica". */
.hero--split .hero__slide.is-active img {
  animation: heroKenBurns 4s ease-in-out forwards;
}

@keyframes heroKenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

/* Pausa en hover del carrusel entero (refuerzo visual del pausado en JS) */
.hero--split .hero__carousel:hover .hero__slide.is-active img {
  animation-play-state: paused;
}

/* Reduced motion: sin zoom, sin crossfade */
@media (prefers-reduced-motion: reduce) {
  .hero--split .hero__slide {
    transition: none;
  }
  .hero--split .hero__slide.is-active img {
    animation: none;
    transform: scale(1);
  }
}


/* ---------- INDICADOR SCROLL (mantenido, ajustado al nuevo layout) ---------- */
.hero--split .hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- RESPONSIVE ---------- */

/* ── Laptop (901px – 1400px) ── pantallas intermedias donde el clamp ya escala bien
   pero refinamos padding y columnas para que el video se vea con su encuadre */
@media (max-width: 1400px) {
  .hero--split .hero__inner { grid-template-columns: 52% 48%; }
  .hero--split .hero__left {
    padding: calc(var(--nav-h) + 3.5rem) clamp(2rem, 3.5vw, 4.5rem) 3.5rem clamp(2rem, 4vw, 5rem);
  }
  .hero--split .hero__left-content { max-width: none; }
}

/* ── Tablet (601px – 900px) ── */
@media (max-width: 900px) {
  .hero--split { height: auto; min-height: 100vh; }
  .hero--split .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto 52vh;
  }
  .hero--split .hero__left {
    padding: 7rem 2.5rem 3rem;
    justify-content: flex-start;
    min-height: auto;
  }
  .hero--split .hero__left-content { max-width: 100%; }
  .hero--split .hero__title { font-size: clamp(2.2rem, 5.5vw, 3rem); }
  .hero--split .hero__sub { max-width: 100%; font-size: 15.5px; }
  .hero--split .hero__right { min-height: 52vh; }
  /* En móvil no hay espacio lateral para priorizar el sujeto a la derecha */
  .hero--split .hero__slide img { object-position: center center; }
  /* Fade de arriba a abajo: el negro de la columna texto se funde con el video */
  .hero--split .hero__video-fade {
    background: linear-gradient(180deg, #0a0a0a 0%, transparent 18%);
  }
  .hero--split .hero__scroll { display: none; }
}

/* ── Móvil (≤ 600px) ── */
@media (max-width: 600px) {
  .hero--split .hero__inner { grid-template-rows: auto 48vh; }
  .hero--split .hero__left { padding: 6rem 1.5rem 2.5rem; }
  .hero--split .hero__title { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero--split .hero__sub { font-size: 15px; }
  /* CTAs: botón ancho completo, link centrado debajo */
  .hero--split .hero__ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .hero--split .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Móvil chico (≤ 390px) ── */
@media (max-width: 390px) {
  .hero--split .hero__left { padding: 5.5rem 1.25rem 2rem; }
  .hero--split .hero__title { font-size: clamp(1.75rem, 8.5vw, 2.1rem); }
}

/* Asegurarse de que canvas (si quedara) y corners viejas no aparezcan en este layout */
.hero--split .hero__particles,
.hero--split .hero__corner,
.hero--split .hero__overlay { display: none !important; }


/* ================================================================
   PROMESA · SECCIÓN "NUESTRA PROMESA" — ACORDEÓN SPLIT
   Fondo negro, dos columnas: imagen sticky (izq) + acordeón (der)
================================================================ */

.promesa {
  background:
    radial-gradient(ellipse 70% 50% at 90% 5%, rgba(200,16,46,0.14) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 10% 95%, rgba(200,16,46,0.07) 0%, transparent 50%),
    #0a0a0a;
  padding: calc(var(--nav-h) + 0.5rem) 0 2.25rem;
  position: relative;
  overflow: hidden;
}
/* Detalles decorativos: marcos de esquina estilo blueprint */
.promesa::before,
.promesa::after {
  content: '';
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none;
  opacity: 0.55;
}
.promesa::before {
  top: 1.75rem;
  left: 1.75rem;
  border-top: 1px solid var(--alliance-red);
  border-left: 1px solid var(--alliance-red);
}
.promesa::after {
  bottom: 1.75rem;
  right: 1.75rem;
  border-bottom: 1px solid var(--alliance-red);
  border-right: 1px solid var(--alliance-red);
}
.promesa .container-edit {
  position: relative;
  z-index: 1;
  max-width: 1440px;           /* override del container global (1240px) solo para #promesa */
  padding-left: max(2rem, 4vw);
  padding-right: max(2rem, 4vw);
}

/* Encabezado centrado */
.promesa__head {
  max-width: 960px;
  margin: 0 auto 1.5rem;
  text-align: center;
}
.promesa__eyebrow {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--alliance-red);
  margin: 0 0 1rem;
  display: block;
  line-height: 1;
}
.promesa__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  color: #fff;
  line-height: 1.12;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
.promesa__title em {
  color: var(--alliance-red);
  font-style: italic;
}
.promesa__sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.15rem);
  color: #888;
  line-height: 1.68;
  max-width: 100%;
  margin: 0 auto;
}

/* Layout split dos columnas */
.promesa__body {
  display: grid;
  grid-template-columns: 38% 62%;
  gap: 2rem;
  align-items: start;
  margin-bottom: 1.5rem;
}

/* ── Columna imagen ── */
.promesa__img-col {
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
}
.promesa__img-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 11;     /* más ancha y baja que 4/3 → ahorra altura */
}
.promesa__img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.promesa__img.is-active {
  opacity: 1;
}
.promesa__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 0.65s ease;
  display: block;
}
.promesa__img.is-active img {
  transform: scale(1);
}
.promesa__img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10,10,10,0.40) 0%, rgba(200,16,46,0.18) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Indicador "CCI · EN VIVO" */
.promesa__live {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.promesa__live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1D9E75;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(29,158,117,0.7);
  animation: promesaLiveGlow 2s ease-in-out infinite;
}
@keyframes promesaLiveGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29,158,117,0.7); }
  50%       { box-shadow: 0 0 0 8px rgba(29,158,117,0); }
}

/* ── Columna acordeón ── */
.promesa__accordion-col {
  display: flex;
  flex-direction: column;
}
.promesa__item {
  border-left: 2px solid rgba(255,255,255,0.12);
  border-radius: 0 4px 4px 0;
  transition: border-color 0.3s ease, background 0.3s ease;
  margin-bottom: 0.25rem;
}
.promesa__item.is-open {
  border-left-color: var(--alliance-red);
  background: rgba(200,16,46,0.07);
}
.promesa__trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: rgba(255,255,255,0.45);
  transition: color 0.3s ease;
}
.promesa__trigger:hover {
  color: rgba(255,255,255,0.8);
}
.promesa__item.is-open .promesa__trigger {
  color: #fff;
}
.promesa__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  min-width: 2.2em;
  color: inherit;
  transition: color 0.3s ease;
}
.promesa__item.is-open .promesa__num {
  color: var(--alliance-red);
}
.promesa__step-title {
  flex: 1;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}
/* Ícono +/− */
.promesa__icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  color: inherit;
}
.promesa__icon::before,
.promesa__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.promesa__icon::before { width: 14px; height: 2px; }
.promesa__icon::after  { width: 2px;  height: 14px; }
.promesa__item.is-open .promesa__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) scaleY(0);
}

/* Detalle (panel que se expande) */
.promesa__detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.35s ease;
}
.promesa__item.is-open .promesa__detail {
  max-height: 260px;
  opacity: 1;
}
.promesa__detail-text {
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  color: #909090;
  line-height: 1.55;
  padding: 0 1.1rem 0.45rem calc(1.1rem + 2.2em + 1rem);
}
.promesa__checks {
  list-style: none;
  padding: 0 1.1rem 0.85rem calc(1.1rem + 2.2em + 1rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.promesa__checks li {
  font-family: 'Poppins', sans-serif;
  font-size: 13.5px;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.promesa__checks li .fa-check {
  color: var(--alliance-red);
  font-size: 10px;
  flex-shrink: 0;
}

/* Pie de sección */
.promesa__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 2rem;
  margin-top: 0;
}
.promesa__gera-tag {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
}
.promesa__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  justify-content: center;
}
/* Botón 2 · contorno blanco */
.promesa__btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.35rem;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 3px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.promesa__btn-outline-white:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.promesa__btn-outline-white .fa-arrow-right { font-size: 11px; }

/* Botón 3 · contorno rojo */
.promesa__btn-outline-red {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 1.35rem;
  border: 1px solid rgba(200,16,46,0.5);
  border-radius: 3px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(200,16,46,0.9);
  background: transparent;
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.promesa__btn-outline-red:hover {
  border-color: var(--alliance-red);
  color: #fff;
  background: rgba(200,16,46,0.1);
}
.promesa__btn-outline-red .fa-arrow-right { font-size: 11px; }

/* ── Canvas red de nodos ── */
.promesa__network {
  position: absolute;
  inset: 0;
  z-index: 0;          /* detrás de todo el contenido */
  pointer-events: none; /* no bloquea clics ni hover del acordeón */
  display: block;
  opacity: 0.75;        /* reduce intensidad general para que sea sutil */
}
/* El contenedor de contenido ya tiene z-index 1 desde .promesa .container-edit */

/* Velo de legibilidad detrás del acordeón y los textos:
   se aplica al wrapper de acordeón para que la red no compita con el texto */
.promesa__accordion-col {
  position: relative;
}
.promesa__accordion-col::before {
  content: '';
  position: absolute;
  inset: -1.5rem -1.25rem;
  background: rgba(10, 10, 10, 0.45);
  border-radius: 6px;
  z-index: -1;          /* queda detrás del texto pero delante del canvas */
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .promesa__body { grid-template-columns: 40% 60%; gap: 2.5rem; }
}
@media (max-width: 900px) {
  .promesa { padding: 3.5rem 0 3rem; }
  .promesa__head { text-align: left; margin-bottom: 2rem; }
  .promesa__sub { margin: 0; }
  .promesa__body {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .promesa__img-col {
    position: static;
    margin-bottom: 2rem;
  }
  .promesa__img-wrap {
    aspect-ratio: 16 / 7;
    max-height: 220px;
    border-radius: 6px;
  }
  .promesa__detail-text,
  .promesa__checks {
    padding-left: 1.25rem;
  }
  /* El velo detrás del acordeón es excesivo en mobile, lo reducimos */
  .promesa__accordion-col::before {
    inset: -1rem -0.75rem;
  }
}
@media (max-width: 600px) {
  .promesa { padding: 3rem 0 2.5rem; }
  .promesa__title { font-size: clamp(1.4rem, 6.5vw, 1.8rem); }
  .promesa__img-wrap { max-height: 180px; }
  .promesa__ctas { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .promesa__ctas .btn,
  .promesa__ctas a { width: 100%; justify-content: center; }
  .promesa__footer { align-items: flex-start; text-align: left; }
}

/* ====================================================
   SECTORES · CARRUSEL HORIZONTAL
   ==================================================== */
.sectores__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1rem 2rem;
  margin-bottom: 1.5rem;
}
.sectores__head > div { grid-column: 1; }
.sectores__intro {
  grid-column: 2;
  max-width: 420px;
  margin: 0;
  color: rgba(0,0,0,0.7);
}

/* Flechas laterales flotantes sobre el carrusel */
.sectores__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,16,46,0.55);
  background: #ffffff;
  color: var(--alliance-red);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease,
              transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.sectores__arrow--prev { left: -22px; }
.sectores__arrow--next { right: -22px; }
.sectores__arrow:hover {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #ffffff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 10px 24px rgba(200,16,46,0.35);
}
.sectores__arrow:disabled,
.sectores__arrow[aria-disabled="true"] {
  opacity: 0;                /* ocultarlas si no se pueden usar */
  pointer-events: none;
  transform: translateY(-50%);
}

/* Contenedor del carrusel (recorta el overflow) */
.sectores__carousel {
  position: relative;
  width: 100%;
  /* Sangrado a la derecha: deja ver que hay más cards */
  margin-right: -2rem;
}
.sectores__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  /* scroll-behavior: auto — para que el auto-loop con rAF actualice scrollLeft
     instantáneamente. Las flechas pasan { behavior:'smooth' } al hacer scrollBy. */
  scroll-behavior: auto;
  padding: 0.5rem 2rem 1.5rem 0.25rem;
  cursor: grab;
  /* Ocultar scrollbar nativa */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Mejor scroll en touch */
  -webkit-overflow-scrolling: touch;
  /* Máscara de degradado en los bordes: las cards "aparecen" entrando por la
     derecha y se "desvanecen" al salir por la izquierda → efecto cinematográfico */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 70px,
    #000 calc(100% - 70px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 70px,
    #000 calc(100% - 70px),
    transparent 100%
  );
}
.sectores__track::-webkit-scrollbar { display: none; }
.sectores__track.is-dragging,
.sectores__track.is-dragging * { cursor: grabbing !important; }
.sectores__track.is-dragging { scroll-behavior: auto; }
.sectores__track.is-dragging a { pointer-events: none; }

/* Cada card del carrusel */
.sector-slide {
  flex: 0 0 250px;
  height: 330px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
  background: #0a0a0a;
  user-select: none;
  -webkit-user-drag: none;
  /* Variables que combinan focus (scale) y hover (translateY) sin pisarse */
  --slide-scale: 0.88;
  --slide-ty: 0px;
  transform: translateY(var(--slide-ty)) scale(var(--slide-scale));
  opacity: 0.55;
  filter: brightness(0.7) saturate(0.85);
  /* Sombra eliminada — cards del carrusel sin box-shadow (más limpio) */
  box-shadow: none;
  transition:
    transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    opacity   0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter    0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* ─── Card "elegida": centro del carrusel ─── */
.sector-slide.is-focus {
  --slide-scale: 1;
  opacity: 1;
  filter: brightness(1) saturate(1);
  box-shadow: none;
  z-index: 2;
}
/* Card adyacente al focus (siguiente/anterior visualmente) — un paso intermedio
   para suavizar la transición visual entre el spotlight y las "atenuadas". */
.sector-slide.is-focus + .sector-slide,
.sector-slide:has(+ .is-focus) {
  --slide-scale: 0.94;
  opacity: 0.78;
  filter: brightness(0.85) saturate(0.95);
}
.sector-slide .bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 0;
}
/* Overlay base — degradado fuerte hacia abajo para garantizar legibilidad */
.sector-slide__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,0.20) 0%,
      rgba(0,0,0,0.30) 40%,
      rgba(0,0,0,0.85) 75%,
      rgba(0,0,0,0.95) 100%
    );
  z-index: 1;
}
/* Línea de acento roja en el borde inferior — refuerza identidad */
.sector-slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--alliance-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 3;
}
.sector-slide:hover {
  --slide-ty: -8px;          /* combina con --slide-scale del focus */
}
.sector-slide:hover .bg-img { transform: scale(1.08); }
.sector-slide:hover::after { transform: scaleX(1); }

/* Foco de teclado visible (accesibilidad): solo aparece al navegar con Tab,
   no afecta el estado normal ni el hover del mouse. Mismo lenguaje visual que
   el foco de los paneles de sectores.html (.sector-panel:focus-visible). */
.sector-slide:focus-visible {
  outline: 2px solid var(--alliance-red);
  outline-offset: 3px;
  border-radius: 12px;
}

.sector-slide__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.6rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7rem;
}
.sector-slide__num {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: #fff;
  font-weight: 700;
  background: var(--alliance-red);
  padding: 0.35rem 0.7rem;
  border-radius: 3px;
  box-shadow: 0 3px 10px rgba(200,16,46,0.4);
}
/* Override de theme-light: dentro de las slides el texto SIEMPRE es blanco
   (las cards son oscuras aunque la sección esté en modo claro). */
.theme-light .sector-slide__title,
.sector-slide__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  line-height: 1.22;
  margin: 0;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.6);
}
.theme-light .sector-slide__desc,
.sector-slide__desc {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
  color: #ffffff !important;
  opacity: 0.95;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}
.theme-light .sector-slide__cta,
.sector-slide__cta {
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.25);
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: gap 0.3s ease, color 0.3s ease;
}
.sector-slide__cta i {
  color: var(--alliance-red);
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}
.sector-slide:hover .sector-slide__cta { gap: 0.85rem; }
.sector-slide:hover .sector-slide__cta i { transform: translateX(4px); }

/* Indicador de progreso */
.sectores__progress {
  position: relative;
  height: 2px;
  background: rgba(0,0,0,0.08);
  border-radius: 2px;
  margin: 0.5rem 2rem 0 0.25rem;
  overflow: hidden;
}
.sectores__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--alliance-red);
  border-radius: 2px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.18s ease-out;
}

/* (Antes había una sombra de continuidad en el borde derecho; ahora la máscara
   de degradado del track maneja la transición en ambos bordes) */
.sectores__carousel--old-fade-disabled::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: calc(100% - 1.5rem);
  background: linear-gradient(to left, rgba(248,249,250,0.95), transparent);
  pointer-events: none;
  z-index: 3;
}
.sectores__carousel.is-end::after { opacity: 0; transition: opacity 0.3s ease; }

/* Responsive */
@media (max-width: 1024px) {
  .sectores__head { grid-template-columns: 1fr; }
  .sectores__intro { grid-column: 1; max-width: 100%; }
  .sector-slide { flex: 0 0 250px; height: 360px; }
  /* Acercar más las flechas para que no se salgan del viewport */
  .sectores__arrow { width: 42px; height: 42px; font-size: 0.85rem; }
  .sectores__arrow--prev { left: 4px; }
  .sectores__arrow--next { right: 4px; }
}
@media (max-width: 700px) {
  .sectores__head {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .sectores__intro { grid-column: 1; }
  /* En mobile las flechas se ocultan; basta el swipe */
  .sectores__arrow { display: none; }
  .sector-slide { flex: 0 0 78vw; max-width: 280px; height: 340px; }
  .sectores__carousel { margin-right: -1rem; }
  .sectores__track { padding-right: 1rem; gap: 0.85rem; }
  .sectores__progress { margin-right: 1rem; }
  .sector-slide__title { font-size: 1.05rem; }
  .sector-slide__desc { font-size: 0.82rem; }
}
@media (max-width: 420px) {
  .sector-slide { flex: 0 0 84vw; height: 330px; }
  .sector-slide__title { font-size: 1rem; }
  .sector-slide__desc { font-size: 0.8rem; -webkit-line-clamp: 3; }
}

/* =====================================================================
   CALCULADORA · REDISEÑO SPLIT (imagen + wizard) + REVELACIÓN DE SCORE
   ===================================================================== */

/* Tarjeta contenedora — proporciones definitivas, escala calmada */
.calc-card {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 62%);
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  overflow: clip;   /* clip = mismo recorte visual que hidden, pero NO atrapa position:sticky */
  box-shadow:
    0 18px 45px -20px rgba(10, 10, 10, 0.14),
    0 4px 12px -8px rgba(10, 10, 10, 0.06);
  margin: 0 auto 0.5rem;
  max-width: 1020px;
  position: relative;
  isolation: isolate;
}

/* ── Columna izquierda: imagen inmersiva ── */
.calc-card__visual {
  position: relative;
  min-height: 215px;
  overflow: hidden;
  background: #0a0a0a;
}
.calc-card__visual-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity 0.7s ease, transform 1.8s ease;
}
.calc-card__visual-img[data-img="control"] {
  background-image: url('https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=900&q=80&fm=webp');
}
.calc-card__visual-img[data-img="analysis"] {
  background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=900&q=80&fm=webp');
}
.calc-card__visual-img[data-img="meeting"] {
  background-image: url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=900&q=80&fm=webp');
}
.calc-card__visual-img[data-img="security"] {
  background-image: url('https://images.unsplash.com/photo-1518186285589-2f7649de83e0?auto=format&fit=crop&w=900&q=80&fm=webp');
}
/* Mapeo paso → imagen activa */
.calc-card__visual[data-step="intro"] [data-img="control"],
.calc-card__visual[data-step="1"]     [data-img="control"],
.calc-card__visual[data-step="2"]     [data-img="control"]   { opacity: 1; transform: scale(1); }
.calc-card__visual[data-step="3"]     [data-img="analysis"],
.calc-card__visual[data-step="4"]     [data-img="analysis"]  { opacity: 1; transform: scale(1); }
.calc-card__visual[data-step="5"]     [data-img="meeting"],
.calc-card__visual[data-step="6"]     [data-img="meeting"],
.calc-card__visual[data-step="7"]     [data-img="meeting"]   { opacity: 1; transform: scale(1); }
.calc-card__visual[data-step="result"] [data-img="security"] { opacity: 1; transform: scale(1); }

/* Overlay oscuro + tinte rojo de marca */
.calc-card__visual-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(10,10,10,0.55) 0%, rgba(200,16,46,0.38) 100%),
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Indicador "EN VIVO" arriba */
.calc-card__live {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: 'Poppins', sans-serif;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.92);
}
.calc-card__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: calcLivePulse 1.6s ease-in-out infinite;
}
@keyframes calcLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

/* Caption fijo abajo */
.calc-card__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 1rem 1.1rem 1.1rem;
  color: #fff;
}
.calc-card .calc-card__caption-title,
.theme-light .calc-card .calc-card__caption-title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 1.05rem);    /* secundario al título de intro */
  font-weight: 600;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin: 0 0 0.3rem;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.calc-card .calc-card__caption-sub,
.theme-light .calc-card .calc-card__caption-sub {
  font-size: 0.72rem;
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 26ch;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* ── Columna derecha: pane del wizard ── */
.calc-card__pane {
  /* Sólo padding vertical: el horizontal va en .calc-wizard y .calc-intro
     para evitar el bug Chrome flex-column donde width:100% del hijo se
     resuelve contra el outer-width del padre (incluyendo el padding). */
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  min-width: 0;
  justify-content: center;
  /* Altura estable entre pasos para que la página no se reorganice
     cada vez que cambia el contenido del wizard */
  min-height: 410px;
}
@media (min-width: 900px) {
  .calc-card__pane { padding: 2rem 0; min-height: 430px; }
}
@media (max-width: 600px) {
  .calc-card__pane { min-height: 0; }   /* en mobile dejamos crecer naturalmente */
}

/* ── Encuadre homogéneo del wizard ──
   El wizard se vuelve flex column y ocupa toda la altura del pane.
   Progress arriba · step en el medio (crece) · nav abajo SIEMPRE. */
.calc-card__pane .calc-wizard.is-open {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}
/* El paso activo ocupa el espacio entre progress y nav. Sus hijos
   (eyebrow / title / hint / opciones) se alinean al tope para que
   TODOS los pasos arranquen visualmente en el mismo punto. */
.calc-card__pane .calc-step.is-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* Nav (Anterior / Siguiente) anclada al fondo del pane */
.calc-card__pane .calc-nav {
  margin-top: 0;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(10, 10, 10, 0.07);
}
/* Vista de resultado mantiene su layout propio */
.calc-card__pane .calc-result { flex: 1; }

/* Padding horizontal en el wizard y el intro (no en el pane) para que
   width:100% del wizard no incluya el padding del padre en Chrome flex-column. */
.calc-card__pane .calc-wizard {
  padding: 0 2.25rem !important;
  background: transparent !important;
}
.calc-card__pane .calc-intro {
  padding: 0 2.25rem !important;
  background: transparent !important;
  text-align: left;
}
/* h2.display-xl tiene especificidad 0,1,1; esta regla = 0,2,0 → gana sin !important */
.calc-card__pane .calc-intro__title {
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.45rem);
  line-height: 1.25;
  text-align: left;
}
.calc-card__pane .calc-intro__desc {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
@media (max-width: 600px) {
  .calc-card__pane .calc-intro__title {
    font-size: clamp(1rem, 0.85rem + 0.7vw, 1.2rem);
  }
}

/* Padding horizontal responsive del wizard e intro */
@media (max-width: 900px) {
  .calc-card__pane .calc-wizard { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
  .calc-card__pane .calc-intro  { padding-left: 1.75rem !important; padding-right: 1.75rem !important; }
}
@media (max-width: 600px) {
  .calc-card__pane .calc-wizard { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .calc-card__pane .calc-intro  { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}

/* ──────────── Overrides para legibilidad (bug texto blanco invisible) ──────────── */
.theme-light .calc-card__pane .calc-option {
  background: #ffffff;
  border: 1.5px solid rgba(10, 10, 10, 0.10);
}
.theme-light .calc-card__pane .calc-option:hover {
  background: rgba(200, 16, 46, 0.03);
  border-color: rgba(200, 16, 46, 0.35);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 10, 10, 0.08);
}
.theme-light .calc-card__pane .calc-option__icon {
  border-color: rgba(200, 16, 46, 0.35);
  color: var(--alliance-red);
  background: transparent;
}
.theme-light .calc-card__pane .calc-option__label {
  color: #111 !important;
}
.theme-light .calc-card__pane .calc-option.is-selected {
  background: rgba(200, 16, 46, 0.06);
  border-color: var(--alliance-red);
  box-shadow: 0 6px 18px rgba(200, 16, 46, 0.15);
}
.theme-light .calc-card__pane .calc-option.is-selected .calc-option__icon {
  background: var(--alliance-red);
  border-color: var(--alliance-red);
  color: #ffffff;
}
.theme-light .calc-card__pane .calc-option.is-selected .calc-option__label {
  color: #111 !important;
  font-weight: 600;
}

/* Radios */
.theme-light .calc-card__pane .calc-radio {
  background: #ffffff;
  border: 1.5px solid rgba(10, 10, 10, 0.10);
}
.theme-light .calc-card__pane .calc-radio:hover {
  background: rgba(200, 16, 46, 0.03);
  border-color: rgba(200, 16, 46, 0.35);
}
.theme-light .calc-card__pane .calc-radio__dot {
  border-color: rgba(10, 10, 10, 0.25);
  background: #ffffff;
}
.theme-light .calc-card__pane .calc-radio__text {
  color: #111 !important;
}
.theme-light .calc-card__pane .calc-radio.is-selected {
  background: rgba(200, 16, 46, 0.06);
  border-color: var(--alliance-red);
}
.theme-light .calc-card__pane .calc-radio.is-selected .calc-radio__text {
  color: #111 !important;
  font-weight: 600;
}

/* Checks */
.theme-light .calc-card__pane .calc-check {
  background: #ffffff;
  border: 1.5px solid rgba(10, 10, 10, 0.10);
}
.theme-light .calc-card__pane .calc-check:hover {
  background: rgba(200, 16, 46, 0.03);
  border-color: rgba(200, 16, 46, 0.35);
}
.theme-light .calc-card__pane .calc-check__box {
  border-color: rgba(10, 10, 10, 0.25);
  background: #ffffff;
}
.theme-light .calc-card__pane .calc-check__icon {
  color: var(--alliance-red);
}
.theme-light .calc-card__pane .calc-check__text {
  color: #111 !important;
}
.theme-light .calc-card__pane .calc-check.is-selected {
  background: rgba(200, 16, 46, 0.06);
  border-color: var(--alliance-red);
}
.theme-light .calc-card__pane .calc-check.is-selected .calc-check__text {
  color: #111 !important;
  font-weight: 600;
}

/* Progress bar más estilizada */
.theme-light .calc-card__pane .calc-progress__bar {
  background: rgba(10, 10, 10, 0.07);
}
.theme-light .calc-card__pane .calc-progress__fill {
  background: linear-gradient(to right, var(--alliance-red), #ff4060);
}
.theme-light .calc-card__pane .calc-progress__label,
.theme-light .calc-card__pane .calc-progress__count {
  color: #555 !important;
}
.theme-light .calc-card__pane .calc-progress__count strong {
  color: var(--alliance-red) !important;
}

/* Slider del paso 2 */
.theme-light .calc-card__pane .calc-range__input {
  background: rgba(10, 10, 10, 0.08);
}
.theme-light .calc-card__pane .calc-range__input::-webkit-slider-thumb {
  border-color: #ffffff;
}

/* Step eyebrow/title/hint */
.theme-light .calc-card__pane .calc-step__eyebrow {
  color: var(--alliance-red) !important;
  font-size: 0.58rem;
  margin-bottom: 0.28rem;
}
.theme-light .calc-card__pane .calc-step__title {
  color: #111 !important;
  font-size: clamp(0.88rem, 0.9vw, 1rem);
  line-height: 1.22;
  margin-bottom: 0.22rem;
}
.theme-light .calc-card__pane .calc-step__hint {
  color: #555 !important;
  font-size: 0.7rem;
  line-height: 1.4;
  margin-bottom: 0.55rem;
}

/* Progress más compacto dentro de la card */
.calc-card__pane .calc-progress { margin-bottom: 0.55rem; }
.calc-card__pane .calc-progress__meta { margin-bottom: 0.28rem; }
.calc-card__pane .calc-progress__label { font-size: 0.58rem; letter-spacing: 0.16em; }
.calc-card__pane .calc-progress__count { font-size: 0.72rem; }

/* Opciones (paso 1: sectores) — más compactas */
.calc-card__pane .calc-options {
  gap: 0.5rem;
  margin-top: auto;     /* se ancla al fondo del paso (homogéneo) */
  margin-bottom: auto;
}
@media (min-width: 640px) { .calc-card__pane .calc-options { gap: 0.55rem; } }
@media (min-width: 900px) { .calc-card__pane .calc-options { gap: 0.55rem; grid-template-columns: repeat(4, 1fr); } }

.calc-card__pane .calc-option {
  gap: 0.35rem;
  padding: 0.55rem 0.45rem;
  min-height: 60px;
}
.calc-card__pane .calc-option__icon {
  width: 24px;
  height: 24px;
  font-size: 0.65rem;
}
.calc-card__pane .calc-option__label {
  font-size: 0.68rem;
  line-height: 1.22;
}

/* Radios (pasos 3, 5, 7) — centrado vertical en el paso */
.calc-card__pane .calc-radios {
  gap: 0.38rem;
  margin-top: auto;
  margin-bottom: auto;
}
.calc-card__pane .calc-radio {
  padding: 0.42rem 0.78rem;
  gap: 0.6rem;
  min-height: 36px;
}
.calc-card__pane .calc-radio__text { font-size: 0.72rem; }

/* Checks (pasos 4, 6) — centrado vertical en el paso */
.calc-card__pane .calc-checks {
  gap: 0.38rem;
  margin-top: auto;
  margin-bottom: auto;
}
.calc-card__pane .calc-check {
  padding: 0.4rem 0.62rem;
  gap: 0.55rem;
  min-height: 34px;
}
.calc-card__pane .calc-check__text { font-size: 0.7rem; }
.calc-card__pane .calc-check__icon { font-size: 0.75rem; }

/* Slider (paso 2) — también centrado vertical en el paso */
.calc-card__pane .calc-range {
  margin-top: auto;
  margin-bottom: auto;
}

/* Slider (paso 2): nº grande más razonable */
.calc-card__pane .calc-range { padding: 0.35rem 0; }
.calc-card__pane .calc-range__num {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
}
.calc-card__pane .calc-range__unit { font-size: 0.72rem; }
.calc-card__pane .calc-range__value { margin-bottom: 0.45rem; gap: 0.35rem; }
.calc-card__pane .calc-range__input { margin-bottom: 0.5rem; }
.calc-card__pane .calc-range__bounds { font-size: 0.68rem; }

/* Navegación inferior */
.calc-card__pane .calc-nav {
  margin-top: 1rem;
}
.calc-card__pane .calc-nav .btn,
.calc-card__pane .calc-nav .btn-primary,
.calc-card__pane .calc-nav .btn-ghost {
  padding: 0.55rem 1rem;
  font-size: 0.72rem;
}

/* ──────────── Bloque de revelación de impacto ──────────── */
.calc-score-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 2rem;
  max-width: 520px;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  animation: calcRevealIn 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s forwards;
}
@keyframes calcRevealIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Badge tipo píldora con nivel */
.calc-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(200, 16, 46, 0.10);
  border: 1px solid rgba(200, 16, 46, 0.35);
  color: #111;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.calc-level-badge__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--alliance-red);
  animation: calcLivePulse 1.8s ease-in-out infinite;
}
.calc-level-badge[data-level="bajo"]    { background: rgba(74,222,128,0.10);  border-color: rgba(74,222,128,0.45); }
.calc-level-badge[data-level="bajo"] .calc-level-badge__dot    { background: #4ade80; }
.calc-level-badge[data-level="medio"]   { background: rgba(250,204,21,0.13);  border-color: rgba(250,204,21,0.5); }
.calc-level-badge[data-level="medio"] .calc-level-badge__dot   { background: #facc15; }
.calc-level-badge[data-level="alto"]    { background: rgba(245,158,11,0.13);  border-color: rgba(245,158,11,0.5); }
.calc-level-badge[data-level="alto"] .calc-level-badge__dot    { background: #f59e0b; }
.calc-level-badge[data-level="crítico"] { background: rgba(200,16,46,0.12);   border-color: rgba(200,16,46,0.55); }
.calc-level-badge[data-level="crítico"] .calc-level-badge__dot { background: var(--alliance-red); }
.theme-light .calc-level-badge,
.theme-light .calc-level-badge strong {
  color: #111 !important;
}

/* Score grande animado */
.calc-score {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem;
  margin: 0;
}
.calc-score__num {
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  background: linear-gradient(135deg, var(--alliance-red), #ff4060);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--alliance-red);          /* fallback */
}
.calc-score__total {
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: rgba(10, 10, 10, 0.45);
  font-style: normal;
  font-weight: 500;
}
.theme-light .calc-score__caption,
.calc-score__caption {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #666 !important;
  margin: 0.6rem 0 0;
}

/* ──────────── Gauge: legibilidad de aguja sobre fondo claro ──────────── */
.theme-light .calc-card__pane .calc-gauge__bg-arc {
  stroke: rgba(10, 10, 10, 0.10);
}
.theme-light .calc-card__pane .calc-gauge__needle {
  stroke: #111 !important;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}
.theme-light .calc-card__pane .calc-gauge__hub {
  fill: var(--alliance-red);
}
.theme-light .calc-card__pane .calc-gauge__hub-outer {
  fill: #ffffff;
  stroke: var(--alliance-red);
  stroke-width: 2;
}
.theme-light .calc-card__pane .calc-gauge__level-meta {
  color: #555 !important;
}

/* Panels del resultado */
.theme-light .calc-card__pane .calc-result__panel {
  background: rgba(10, 10, 10, 0.03);
  border: 1px solid rgba(10, 10, 10, 0.07);
  border-radius: 12px;
}
.theme-light .calc-card__pane .calc-result__panel-title {
  color: #111 !important;
}
.theme-light .calc-card__pane .calc-vuln-list li {
  border-bottom-color: rgba(10, 10, 10, 0.08);
  color: #333 !important;
}
.theme-light .calc-card__pane .calc-vuln-list li span {
  color: #333 !important;
}
.theme-light .calc-card__pane .calc-impact__amount {
  color: #111 !important;
}
.theme-light .calc-card__pane .calc-impact__caveat {
  color: #777 !important;
}
.theme-light .calc-card__pane .calc-reco {
  background: rgba(200, 16, 46, 0.04);
  border: 1px solid rgba(200, 16, 46, 0.18);
  border-radius: 12px;
}
.theme-light .calc-card__pane .calc-reco__title {
  color: #111 !important;
}
.theme-light .calc-card__pane .calc-reco__text {
  color: #333 !important;
}

/* ──────────── Responsive ──────────── */
/* Tablet/laptop pequeño: ajustar proporciones para mantener el split */
@media (max-width: 1100px) {
  .calc-card { grid-template-columns: minmax(0, 36%) minmax(0, 64%); }
  .calc-card__visual { min-height: 200px; }
}
/* Apilado: imagen arriba + wizard abajo */
@media (max-width: 900px) {
  .calc-card {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .calc-card__visual {
    min-height: 240px;
  }
  .calc-card__caption {
    padding: 1.25rem;
  }
  .calc-card__caption-title { font-size: 1.25rem; }
  .calc-card__caption-sub   { font-size: 0.88rem; max-width: none; }
  .calc-card__pane {
    padding: 2rem 0;
  }
  .calc-score-row { margin-bottom: 1.75rem; }
  .calc-score__num { font-size: clamp(2.6rem, 12vw, 4rem); }
}
@media (max-width: 600px) {
  .calc-card__visual { min-height: 200px; }
  .calc-card__pane { padding: 1.5rem 0; }
  .calc-card__caption { padding: 1rem 1rem 1.15rem; }
  .calc-card__caption-title { font-size: 1.1rem; }
  .calc-card__caption-sub   { font-size: 0.82rem; }
  .calc-card__live { top: 0.85rem; left: 0.85rem; font-size: 0.58rem; padding: 0.3rem 0.6rem; }
  .calc-level-badge { font-size: 0.7rem; padding: 0.45rem 0.85rem; letter-spacing: 0.06em; }
}

/* ═══════════════════════════════════════════════════════════════
   FIXES DEFINITIVOS — CALCULADORA (home)
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX 0: IMAGEN IZQUIERDA no se estira en pantalla de resultado ─
   Técnica: sticky. La imagen se queda fija mientras el resultado
   (más largo) hace scroll. Solo en desktop (≥900px, 2 columnas).
   Requiere overflow:clip en .calc-card (ya aplicado arriba). */
@media (min-width: 900px) {
  .calc-card__visual[data-step="result"] {
    position: sticky;
    top: var(--nav-h, 100px);  /* se pega justo bajo la navbar */
    align-self: start;          /* no hace stretch: solo toma su altura natural */
    height: 430px;              /* misma altura que el pane en modo wizard */
  }
}
/* Mobile (columna única): la imagen va arriba con altura fija pequeña */
@media (max-width: 900px) {
  .calc-card__visual[data-step="result"] {
    position: relative;
    top: auto;
    height: auto;
    min-height: 180px;
  }
}

/* ── FIX 1: CHECKBOX box se llena rojo + checkmark visible ──────── */
/* El problema: la regla del pane .calc-check__box { bg:#fff } (0,3,1)
   ganaba sobre la regla de seleccionado (0,2,0). Se eleva especificidad. */
.theme-light .calc-card__pane .calc-check.is-selected .calc-check__box {
  background: var(--alliance-red) !important;
  border-color: var(--alliance-red) !important;
}
.theme-light .calc-card__pane .calc-check.is-selected .calc-check__box::after {
  transform: scale(1);
}
/* Ícono visible en rojo (no blanco sobre fondo claro) */
.theme-light .calc-card__pane .calc-check.is-selected .calc-check__icon {
  color: var(--alliance-red) !important;
  opacity: 1;
}
/* Texto: negro legible, seminegrita */
.theme-light .calc-card__pane .calc-check.is-selected .calc-check__text {
  color: #111 !important;
  font-weight: 600;
}
/* Estado no seleccionado: ícono siempre rojo visible */
.theme-light .calc-card__pane .calc-check__icon {
  color: var(--alliance-red) !important;
  opacity: 0.8;
}

/* ── FIX 2: RADIO DOT borde rojo al seleccionar ────────────────── */
/* El relleno interior (::after) funciona desde el base CSS.
   Solo necesitamos que el borde del aro también sea rojo. */
.theme-light .calc-card__pane .calc-radio.is-selected .calc-radio__dot {
  border-color: var(--alliance-red) !important;
}
/* Texto de radio: negro legible al seleccionar */
.theme-light .calc-card__pane .calc-radio.is-selected .calc-radio__text {
  color: #111 !important;
  font-weight: 600;
}

/* ── FIX 3: BOTÓN SIGUIENTE deshabilitado — gris, no rojo opaco ─── */
.calc-card__pane .btn-primary[disabled] {
  background: rgba(10,10,10,0.09) !important;
  color: rgba(10,10,10,0.40) !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* ── FIX 4: RESULTADO proporcional dentro del pane ─────────────── */
/* Al mostrar el resultado el card crece libremente (sin min-height fijo).
   Todos los elementos se escalan para ser armónicos con los pasos. */

.calc-card__pane .calc-result__head {
  margin-bottom: 0.65rem;
  text-align: left;
}
.theme-light .calc-card__pane .calc-result__eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--alliance-red);
  margin-bottom: 0.22rem;
}
.theme-light .calc-card__pane .calc-result__title {
  font-size: clamp(0.9rem, 0.95vw, 1.05rem);
  line-height: 1.22;
  color: #111 !important;
  margin-bottom: 0;
}
.theme-light .calc-card__pane .calc-result__title em { color: var(--alliance-red); }

/* ── Fila de puntaje compacta (score-row): 3 partes en una línea ── */
.calc-card__pane .calc-score-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(10,10,10,0.03);
  border: 1px solid rgba(10,10,10,0.07);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  margin: 0.5rem 0 0.65rem;
  opacity: 1;
  transform: none;
  animation: none;
}

.calc-card__pane .calc-score-row__left,
.calc-card__pane .calc-score-row__right {
  flex: 1;
  text-align: center;
}

.calc-card__pane .calc-score-row__right {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gauge: pequeño y centrado dentro de la fila */
.calc-card__pane .calc-score-row .calc-gauge {
  flex: 0 0 88px;
  max-width: 88px;
  margin: 0;
}

/* Score compacto en el score-row */
.calc-card__pane .calc-score-row .calc-score        { margin: 0; gap: 0.12rem; }
.calc-card__pane .calc-score-row .calc-score__num   { font-size: clamp(1.5rem, 1.8vw, 1.85rem); }
.calc-card__pane .calc-score-row .calc-score__total { font-size: 0.72rem; }
.calc-card__pane .calc-score-row .calc-score__caption {
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 0.18rem;
}

/* Badge compacto en el score-row */
.calc-card__pane .calc-score-row .calc-level-badge {
  font-size: 0.55rem;
  padding: 0.2rem 0.55rem;
  letter-spacing: 0.05em;
  margin-bottom: 0;
  text-align: center;
  white-space: normal;
  line-height: 1.4;
}

/* Gauge: fuente reducida dentro del score-row */
.calc-card__pane .calc-score-row .calc-gauge__level-label { font-size: 0.7rem; }
.calc-card__pane .calc-score-row .calc-gauge__level-meta  { font-size: 0.43rem; }

/* ── Dos tarjetas lado a lado ── */
.calc-card__pane .calc-result__grid {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

/* Tarjeta con borde izquierdo rojo (color identidad) */
.theme-light .calc-card__pane .calc-result__panel {
  background: #f8f9fa;
  border: 1px solid rgba(10,10,10,0.08);
  border-left: 3px solid var(--alliance-red);
  border-radius: 8px;
  padding: 0.62rem 0.72rem;
}

.calc-card__pane .calc-result__panel-title {
  font-size: 0.57rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.theme-light .calc-card__pane .calc-result__panel-title { color: var(--alliance-red) !important; }

.calc-card__pane .calc-vuln-list li {
  font-size: 0.62rem;
  padding: 0.2rem 0;
  gap: 0.35rem;
  border-bottom: none;
}

/* Cifra de impacto: destacada en rojo */
.theme-light .calc-card__pane .calc-impact__amount {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
  color: var(--alliance-red) !important;
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.theme-light .calc-card__pane .calc-impact__caveat {
  font-size: 0.58rem;
  line-height: 1.35;
  color: #888 !important;
}

/* ── Recomendación: tinte rojo suave ── */
.calc-card__pane .calc-reco {
  margin-top: 0.55rem;
  padding: 0.62rem 0.78rem;
  border-radius: 8px;
}

.theme-light .calc-card__pane .calc-reco {
  background: rgba(200,16,46,0.04) !important;
  border: 1px solid rgba(200,16,46,0.15) !important;
}

.theme-light .calc-card__pane .calc-reco__title { font-size: 0.62rem; margin-bottom: 0.28rem; }
.theme-light .calc-card__pane .calc-reco__text  { font-size: 0.65rem; line-height: 1.42; }

/* Mobile (<600px): paneles apilados */
@media (max-width: 599px) {
  .calc-card__pane .calc-result__grid { grid-template-columns: 1fr; }
}

/* Acciones del resultado */
.calc-card__pane .calc-result__actions            { margin-top: 0.65rem; gap: 0.38rem; justify-content: flex-start; flex-wrap: wrap; }
.calc-card__pane .calc-result__actions .btn       { padding: 0.4rem 0.75rem; font-size: 0.64rem; }

/* ── FIX 5: ANILLO DE RIESGO — reemplaza el medidor de aguja ─────────── */

/* Bloque héroe: ring + info en fila */
.calc-card__pane .calc-result__hero {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.35rem 0 0.45rem;
  margin-bottom: 0;
}
@media (max-width: 560px) {
  .calc-card__pane .calc-result__hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

/* Wrapper del SVG ring */
.calc-ring-wrap {
  position: relative;
  flex: 0 0 110px;
  width: 110px;
  height: 110px;
}
@media (max-width: 560px) {
  .calc-ring-wrap { flex: 0 0 96px; width: 96px; height: 96px; }
}

/* SVG rotado -90° para que el arco inicie desde las 12 */
.calc-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  transform-origin: center;
  overflow: visible;
}

/* Pista (fondo gris del aro) */
.calc-ring__track {
  fill: none;
  stroke: rgba(10, 10, 10, 0.08);
  stroke-width: 9;
  stroke-linecap: round;
}

/* Arco de llenado animado — estado inicial: vacío (JS lo anima) */
.calc-ring__arc {
  fill: none;
  stroke: rgba(10, 10, 10, 0.12);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 301.593;
  stroke-dashoffset: 301.593;
}
/* Color del arco según nivel */
.calc-ring__arc[data-level="bajo"]    { stroke: #4ade80; }
.calc-ring__arc[data-level="medio"]   { stroke: #facc15; }
.calc-ring__arc[data-level="alto"]    { stroke: #f59e0b; }
.calc-ring__arc[data-level="crítico"] { stroke: var(--alliance-red); }

/* Centro del anillo: número + "/100" + etiqueta */
.calc-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.05rem;
  pointer-events: none;
}
.calc-ring__score-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.08rem;
  line-height: 1;
}
.calc-ring__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
  color: #111;
  transition: color 0.5s ease;
}
/* El número hereda el color del nivel */
.calc-result__hero[data-level="bajo"]    .calc-ring__num { color: #16a34a; }
.calc-result__hero[data-level="medio"]   .calc-ring__num { color: #a16207; }
.calc-result__hero[data-level="alto"]    .calc-ring__num { color: #c2410c; }
.calc-result__hero[data-level="crítico"] .calc-ring__num { color: var(--alliance-red); }
.calc-ring__denom {
  font-size: 0.6rem;
  color: #aaa;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
}
.calc-ring__sublabel {
  font-size: 0.42rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #bbb;
  font-family: 'Poppins', sans-serif;
}

/* Panel derecho: eyebrow + nivel + barra + frase */
.calc-ring__info {
  flex: 1;
  min-width: 0;
}
.calc-ring__info-eyebrow {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.18rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}
.calc-ring__level-name {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.1;
  text-transform: capitalize;
  margin-bottom: 0.45rem;
  color: #111;
  transition: color 0.4s ease;
}
.calc-result__hero[data-level="bajo"]    .calc-ring__level-name { color: #16a34a; }
.calc-result__hero[data-level="medio"]   .calc-ring__level-name { color: #a16207; }
.calc-result__hero[data-level="alto"]    .calc-ring__level-name { color: #c2410c; }
.calc-result__hero[data-level="crítico"] .calc-ring__level-name { color: var(--alliance-red); }

/* Barra de 4 segmentos */
.calc-level-segments {
  display: flex;
  gap: 3px;
  margin-bottom: 0.42rem;
}
.calc-level-seg {
  flex: 1;
  padding: 3px 0;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 0.38rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 2px;
  opacity: 0.2;
  transition: opacity 0.4s ease;
}
.calc-level-seg[data-seg="bajo"]    { background: #4ade80; color: #000; }
.calc-level-seg[data-seg="medio"]   { background: #facc15; color: #000; }
.calc-level-seg[data-seg="alto"]    { background: #f59e0b; color: #000; }
.calc-level-seg[data-seg="crítico"] { background: var(--alliance-red); color: #fff; }
.calc-level-seg.is-active           { opacity: 1; }

/* Frase breve según nivel */
.calc-ring__phrase {
  font-size: 0.6rem;
  color: #777;
  line-height: 1.4;
  font-style: italic;
  font-family: 'Poppins', sans-serif;
}

/* Sin animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .calc-ring__arc        { transition: none !important; }
  .calc-ring__num        { transition: none !important; }
  .calc-ring__level-name { transition: none !important; }
}

/* ── PARTE 2: formulario de captura (ancho completo, fuera del split) ── */
.calc-capture--full {
  display: none;
  max-width: 1020px;
  margin: 1.5rem auto 0;
  padding: 1.5rem 2rem;
  border-radius: 12px;
}

/* Mostrar cuando el visual del card está en estado "result" */
.calc-card:has([data-calc-visual][data-step="result"]) ~ .calc-capture--full {
  display: block;
}

.calc-capture--full .calc-capture__head {
  text-align: center;
  margin-bottom: 1.75rem;
}

/* Grid de 2 columnas */
.calc-capture--full .contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
  row-gap: 0;
}

/* Rows sin caja propia: sus hijos participan directamente en el grid */
.calc-capture--full .contact-form__row {
  display: contents;
}

/* Campos sueltos, botones y nota → ancho completo */
.calc-capture--full .contact-form > .field,
.calc-capture--full .contact-form > div,
.calc-capture--full .contact-form > p {
  grid-column: 1 / -1;
}

/* Alinear ancho del formulario con .calc-card (que pasa a max-width:720px a ≤900px) */
@media (max-width: 900px) {
  .calc-capture--full {
    max-width: 720px;
  }
}
@media (max-width: 640px) {
  .calc-capture--full {
    padding: 1.25rem 1rem;
  }
  .calc-capture--full .contact-form {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   PAGE-HERO · MODIFICADOR SECTORES · Hero split con reel vertical
   Todo scoped bajo .page-hero--sectores para no tocar otros heroes.
   Animación: SOLO transform/opacity. Loop GSAP en JS inline (sectores.html).
   ==================================================================== */
.page-hero--sectores {
  min-height: 88vh;
  padding: calc(var(--nav-h) + 2.5rem) 0 3rem;
  background: #0a0a0a;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Fondo: negro + glow rojo radial muy sutil tras el texto ── */
.page-hero--sectores__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-hero--sectores__glow {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 70%;
  height: 120%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%,
    rgba(200,16,46,0.13) 0%,
    rgba(200,16,46,0.06) 30%,
    rgba(200,16,46,0.02) 55%,
    transparent 75%);
  filter: blur(28px);
}

/* ── Layout split ── */
.page-hero--sectores__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
}

/* ── Columna izquierda ── */
.page-hero--sectores__left {
  position: relative;
  z-index: 3;
}
.page-hero--sectores .breadcrumb { margin-bottom: 1.5rem; }
.page-hero--sectores .page-hero__title {
  max-width: 20ch;
  margin: 1rem 0 1.35rem;
}
.page-hero--sectores__sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1rem, 1vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 44ch;
  margin: 0 0 2rem;
}

/* Enlace "Ver los 9 sectores ↓" — usa selector de hash, Lenis hace smooth scroll */
.page-hero--sectores__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color 0.35s ease, border-color 0.35s ease, gap 0.35s ease;
}
.page-hero--sectores__link:hover {
  color: var(--alliance-red);
  border-color: var(--alliance-red);
  gap: 1rem;
}
.page-hero--sectores__link-arrow {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.page-hero--sectores__link:hover .page-hero--sectores__link-arrow {
  transform: translateY(4px);
}

/* ── Columna derecha · reel vertical ── */
.page-hero--sectores__right {
  align-self: center;
  justify-self: end;
  width: 100%;
  max-width: 420px;
}

/* Contenedor del reel: altura fija, overflow oculto, máscara superior/inferior
   que funde los bordes con el fondo negro (sin bordes duros). */
.page-hero--sectores__reel {
  position: relative;
  width: 100%;
  height: clamp(440px, 64vh, 620px);
  overflow: hidden;
  will-change: opacity;
  -webkit-mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%);
          mask-image: linear-gradient(180deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%);
}

/* Track que GSAP traslada en Y. Contiene 2 copias del set para loop seamless. */
.page-hero--sectores__reel-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* Cada item: 16/10, ancho de columna, esquinas redondeadas. */
.page-hero--sectores__reel-item {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255,255,255,0.04);
}
.page-hero--sectores__reel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.10) brightness(0.85) contrast(1.05);
}

/* Etiqueta chica con el nombre del sector — pill con blur suave */
.page-hero--sectores__reel-label {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff !important;
  background: rgba(10,10,10,0.62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none !important;
}

/* ── Responsive: tablet ── */
@media (max-width: 1024px) {
  .page-hero--sectores {
    min-height: auto;
    padding: calc(var(--nav-h) + 2rem) 0 3rem;
  }
  .page-hero--sectores__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .page-hero--sectores__left  { order: 1; }
  .page-hero--sectores__right { order: 2; justify-self: center; max-width: 460px; }
  .page-hero--sectores .page-hero__title { max-width: none; }
  .page-hero--sectores__reel { height: clamp(380px, 50vh, 480px); }
}

/* ── Responsive: móvil ── */
@media (max-width: 640px) {
  .page-hero--sectores {
    padding: calc(var(--nav-h) + 1.5rem) 0 2.5rem;
  }
  .page-hero--sectores__inner { gap: 2rem; }
  .page-hero--sectores__right { max-width: 100%; }
  .page-hero--sectores__reel { height: 360px; }
  .page-hero--sectores__sub {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
  .page-hero--sectores__link { font-size: 0.74rem; }
  .page-hero--sectores__reel-label {
    font-size: 0.66rem;
    padding: 0.32rem 0.6rem;
    letter-spacing: 0.14em;
  }
}

/* ── Accesibilidad: reducir movimiento ──
   El JS no inicia el loop ni clona items; mostramos sólo los primeros
   3 originales apilados, sin scroll, sin animación. */
@media (prefers-reduced-motion: reduce) {
  .page-hero--sectores__reel-track {
    transform: none !important;
  }
  .page-hero--sectores__reel-item:nth-of-type(n+4) {
    display: none;
  }
}

/* ====================================================================
   SECTORES · ACORDEÓN HORIZONTAL (sectores.html)
   - Desktop: paneles verticales, uno expandido a la vez (flex-grow).
     Por defecto el primero (Residencial). Hover/focus expanden cualquier
     panel y colapsan los demás. Comportamiento 100% CSS.
   - Móvil: stack vertical (filas tocables, contenido siempre visible).
   - Todo scoped a `#sectores .sectores__accordion` para no afectar otros
     contextos. Accesibilidad: :focus-within ≡ :hover. Reduced-motion: ok.
   ==================================================================== */

#sectores .sectores__accordion {
  display: flex;
  flex-direction: row;
  gap: 4px;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}

/* Panel: estructura base (link). En el flex row, cada panel tiene
   flex-grow:1 por defecto (colapsado) y crece a 5 cuando es activo. */
#sectores .sector-panel {
  position: relative;
  flex: 1 1 0%;
  min-width: 76px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  will-change: flex-grow, transform, opacity;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Estado activo por defecto: primer panel expandido */
#sectores .sectores__accordion > .sector-panel:first-child {
  flex-grow: 5;
}

/* Cuando cualquier panel recibe hover/focus, el primero se colapsa… */
#sectores .sectores__accordion:hover > .sector-panel:first-child,
#sectores .sectores__accordion:focus-within > .sector-panel:first-child {
  flex-grow: 1;
}

/* …y el panel hovered/focused pasa a ser el activo */
#sectores .sectores__accordion:hover > .sector-panel:hover,
#sectores .sectores__accordion:focus-within > .sector-panel:focus-within {
  flex-grow: 5;
}

/* Foco visible accesible (override del outline genérico para que combine) */
#sectores .sector-panel:focus-visible {
  outline: 2px solid var(--alliance-red);
  outline-offset: -3px;
}

/* ── Fondo y overlays ── */
#sectores .sector-panel__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55) saturate(0.9);
  transform: scale(1.04);
  transition: filter 0.55s ease, transform 0.7s ease;
  z-index: 0;
}
#sectores .sector-panel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.78) 100%);
  z-index: 1;
  transition: background 0.45s ease;
}
#sectores .sector-panel__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--alliance-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
  z-index: 3;
  pointer-events: none;
}

/* ── Estado COLAPSADO: tira vertical (visible cuando NO activo) ── */
#sectores .sector-panel__collapsed {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  padding: 1rem 0.3rem 1.1rem;
  opacity: 1;
  transition: opacity 0.35s ease;
}
#sectores .sector-panel__num {
  font-family: 'Poppins', 'Helvetica Neue', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  text-transform: uppercase;
}
#sectores .sector-panel__name-v {
  /* margin:auto centra el nombre rotado en el alto restante del panel (entre
     el número y el borde inferior), de modo que los nombres largos
     ("Infraestructura", "Ángel Protector") queden holgados y no se recorten
     contra los bordes del panel (overflow: hidden). Letter-spacing y tamaño
     reducidos acortan la longitud vertical del texto. */
  margin: auto 0;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.74rem, 0.66rem + 0.35vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* ── Estado EXPANDIDO: contenido completo (visible cuando activo) ── */
#sectores .sector-panel__expanded {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem 1.8rem 1.8rem;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease 0.1s, transform 0.45s ease 0.1s;
}
#sectores .sector-panel__num-x {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
#sectores .sector-panel__title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  font-weight: 700;
  line-height: 1.18;
  color: #fff;
  margin: 0 0 0.65rem;
  max-width: 28ch;
}
#sectores .sector-panel__desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.1rem;
  max-width: 46ch;
}
#sectores .sector-panel__cta {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--alliance-red);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
#sectores .sector-panel__cta i {
  transition: transform 0.3s ease;
}
#sectores .sector-panel:hover .sector-panel__cta i,
#sectores .sector-panel:focus-within .sector-panel__cta i {
  transform: translateX(5px);
}

/* ── ACTIVO por defecto (primer panel): mostrar expandido + acento ── */
#sectores .sectores__accordion > .sector-panel:first-child .sector-panel__expanded {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#sectores .sectores__accordion > .sector-panel:first-child .sector-panel__collapsed {
  opacity: 0;
}
#sectores .sectores__accordion > .sector-panel:first-child .sector-panel__bg {
  filter: brightness(0.7) saturate(1);
  transform: scale(1);
}
#sectores .sectores__accordion > .sector-panel:first-child .sector-panel__accent {
  transform: scaleX(1);
}

/* ── Al hover/focus en CUALQUIER panel, el primero pierde estado activo ── */
#sectores .sectores__accordion:hover > .sector-panel:first-child .sector-panel__expanded,
#sectores .sectores__accordion:focus-within > .sector-panel:first-child .sector-panel__expanded {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s ease;
}
#sectores .sectores__accordion:hover > .sector-panel:first-child .sector-panel__collapsed,
#sectores .sectores__accordion:focus-within > .sector-panel:first-child .sector-panel__collapsed {
  opacity: 1;
}
#sectores .sectores__accordion:hover > .sector-panel:first-child .sector-panel__bg,
#sectores .sectores__accordion:focus-within > .sector-panel:first-child .sector-panel__bg {
  filter: brightness(0.55) saturate(0.9);
  transform: scale(1.04);
}
#sectores .sectores__accordion:hover > .sector-panel:first-child .sector-panel__accent,
#sectores .sectores__accordion:focus-within > .sector-panel:first-child .sector-panel__accent {
  transform: scaleX(0);
}

/* ── El panel hovered/focused (cualquiera) pasa a ser el activo ── */
#sectores .sectores__accordion:hover > .sector-panel:hover .sector-panel__expanded,
#sectores .sectores__accordion:focus-within > .sector-panel:focus-within .sector-panel__expanded {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.4s ease 0.15s, transform 0.45s ease 0.15s;
}
#sectores .sectores__accordion:hover > .sector-panel:hover .sector-panel__collapsed,
#sectores .sectores__accordion:focus-within > .sector-panel:focus-within .sector-panel__collapsed {
  opacity: 0;
}
#sectores .sectores__accordion:hover > .sector-panel:hover .sector-panel__bg,
#sectores .sectores__accordion:focus-within > .sector-panel:focus-within .sector-panel__bg {
  filter: brightness(0.7) saturate(1);
  transform: scale(1);
}
#sectores .sectores__accordion:hover > .sector-panel:hover .sector-panel__accent,
#sectores .sectores__accordion:focus-within > .sector-panel:focus-within .sector-panel__accent {
  transform: scaleX(1);
}

/* ── SERVICIO (Ángel Protector): rojo permanente + pill rótulo ── */
#sectores .sector-panel--servicio .sector-panel__overlay {
  background: linear-gradient(135deg, rgba(200,16,46,0.30) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.75) 100%);
}
#sectores .sector-panel--servicio .sector-panel__accent {
  transform: scaleX(1);
  height: 4px;
}
#sectores .sectores__accordion:hover > .sector-panel--servicio:not(:hover) .sector-panel__accent,
#sectores .sectores__accordion:focus-within > .sector-panel--servicio:not(:focus-within) .sector-panel__accent {
  /* La barra del SERVICIO se mantiene encendida aunque no esté activo */
  transform: scaleX(1);
}
#sectores .sector-panel--servicio .sector-panel__num {
  color: #fff;
  background: var(--alliance-red);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
}
#sectores .sector-panel__eyebrow {
  display: inline-flex;
  align-self: flex-start;
  background: var(--alliance-red);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  line-height: 1;
  margin-bottom: 0.75rem;
}

/* ─── DESKTOP grande (≥1024) ─── */
@media (min-width: 1024px) {
  #sectores .sectores__accordion {
    min-height: 520px;
  }
  #sectores .sector-panel { min-width: 78px; }
}

/* ─── TABLET (768–1023) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  #sectores .sectores__accordion {
    min-height: 440px;
  }
  #sectores .sector-panel { min-width: 58px; }
  #sectores .sector-panel__title { font-size: 1.1rem; }
  #sectores .sector-panel__desc { font-size: 0.82rem; }
  #sectores .sector-panel__expanded { padding: 1.3rem 1.4rem 1.5rem; }
  #sectores .sector-panel__name-v { font-size: 0.85rem; }
}

/* ─── MÓVIL (<768): stack vertical, sin acordeón ─── */
@media (max-width: 767px) {
  #sectores .sectores__accordion {
    flex-direction: column;
    gap: 0.55rem;
    min-height: 0;
  }
  /* Cada panel es una fila tocable con contenido visible */
  #sectores .sector-panel,
  #sectores .sectores__accordion > .sector-panel:first-child {
    flex: 0 0 auto;
    height: 150px;
    min-width: 0;
    transition: none;
  }
  /* En móvil no usamos la tira vertical: se oculta */
  #sectores .sector-panel__collapsed { display: none; }
  /* Y el contenido expandido está siempre visible */
  #sectores .sector-panel__expanded {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    padding: 1rem 1.15rem;
    transition: none;
  }
  #sectores .sector-panel__bg {
    filter: brightness(0.55) saturate(0.95);
    transform: none;
  }
  #sectores .sector-panel__accent {
    transform: scaleX(0.5);
    opacity: 0.8;
  }
  #sectores .sector-panel--servicio .sector-panel__accent {
    transform: scaleX(1);
    opacity: 1;
  }
  #sectores .sector-panel__title {
    font-size: 1.02rem;
    margin-bottom: 0.35rem;
    max-width: 30ch;
  }
  #sectores .sector-panel__desc {
    display: none; /* en móvil sólo título + CTA → tap navega a la página */
  }
  #sectores .sector-panel__num-x { margin-bottom: 0.35rem; }
  #sectores .sector-panel__eyebrow {
    font-size: 0.55rem;
    margin-bottom: 0.4rem;
  }
}

/* ─── Padding vertical de la sección sectores en desktop ─── */
@media (min-width: 1024px) {
  #sectores.section-pad {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* ─── prefers-reduced-motion: sin transiciones de ancho/transform ─── */
@media (prefers-reduced-motion: reduce) {
  #sectores .sector-panel,
  #sectores .sector-panel__bg,
  #sectores .sector-panel__overlay,
  #sectores .sector-panel__expanded,
  #sectores .sector-panel__collapsed,
  #sectores .sector-panel__accent,
  #sectores .sector-panel__cta i {
    transition: none !important;
  }
  #sectores .sector-panel__bg {
    transform: none !important;
  }
}

/* ====================================================================
   PAGE HERO · SERVICIOS (servicios.html)
   Modificador `.page-hero--servicios` scoped: NO toca otros heroes
   (sectores, sector-*, gera, etc). Layout SPLIT: contenido izq +
   foto derecha. Fondo negro + glow rojo.
   ==================================================================== */

.page-hero--servicios {
  background: #000 !important;
  min-height: 80vh;
  padding: 9rem 0 5rem;
  overflow: hidden;
  position: relative;
}
.page-hero--servicios__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Glow rojo radial sutil detrás del gráfico (derecha) */
.page-hero--servicios__glow {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    rgba(200,16,46,0.18) 0%,
    rgba(200,16,46,0.08) 28%,
    rgba(200,16,46,0) 60%);
  filter: blur(8px);
}

/* Layout split: contenido izquierda, gráfico derecha */
.page-hero--servicios__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  max-width: 1240px;
}
.page-hero--servicios__left {
  position: relative;
  z-index: 3;
  max-width: 36rem;
}
/* Subtítulo más corto, override del .page-hero__sub base */
.page-hero--servicios__sub {
  max-width: 38ch;
  font-size: clamp(0.98rem, 1vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.6rem;
}
/* Link "Ver servicios ↓" */
.page-hero--servicios__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.2rem 0.85rem 1.35rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.page-hero--servicios__link:hover,
.page-hero--servicios__link:focus-visible {
  background: rgba(200,16,46,0.12);
  border-color: rgba(200,16,46,0.55);
  transform: translateY(-1px);
}
.page-hero--servicios__link-arrow {
  display: inline-block;
  font-size: 0.95rem;
  transition: transform 0.4s ease;
}
.page-hero--servicios__link:hover .page-hero--servicios__link-arrow {
  transform: translateY(3px);
}

/* ─── Foto: container — llena el alto de la fila del hero (align-self:
   stretch) y se amplía al ancho disponible de la columna ─── */
.page-hero--servicios__photo {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-left: auto;
  align-self: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.75);
}
.page-hero--servicios__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
}
/* Degradado: funde el borde izquierdo de la foto con el negro de marca
   de la columna de texto, en 3 pasos para un fundido suave (sin corte) */
.page-hero--servicios__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, #0a0a0a 0%, rgba(10,10,10,0.85) 30%, rgba(10,10,10,0) 60%);
}

/* ─── Responsive ─── */
@media (max-width: 1023px) {
  .page-hero--servicios__inner {
    gap: 2rem;
  }
  .page-hero--servicios__photo {
    max-width: 460px;
  }
}

@media (max-width: 899px) {
  .page-hero--servicios {
    padding: 7rem 0 3.5rem;
    min-height: 0;
  }
  .page-hero--servicios__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .page-hero--servicios__left { max-width: none; }
  .page-hero--servicios__photo {
    max-width: 420px;
    margin: 0 auto;
  }
  /* Más cobertura/opacidad en móvil: mantiene el h1 y el subtítulo
     legibles cuando la foto queda más cerca del texto en una sola columna */
  .page-hero--servicios__photo::before {
    background: linear-gradient(to right, #0a0a0a 0%, rgba(10,10,10,0.92) 45%, rgba(10,10,10,0.15) 100%);
  }
  .page-hero--servicios__glow {
    right: auto;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 480px;
  }
}

@media (max-width: 560px) {
  .page-hero--servicios__photo {
    max-width: 340px;
  }
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  .page-hero--servicios__link,
  .page-hero--servicios__link-arrow {
    transition: none !important;
  }
}

/* ====================================================================
   PAGE HERO · BLOG (blog.html)
   Mismo patrón visual que .page-hero--servicios: split contenido izq +
   foto edge-to-edge derecha, fondo negro + glow rojo, Ken Burns en la
   foto. Modificador `.page-hero--blog` scoped a body.page-blog: NO toca
   otros heroes.
   ==================================================================== */
body.page-blog .page-hero--blog {
  background: #000;
  overflow: hidden;
  position: relative;
  padding: 0;
  min-height: clamp(500px, 68vh, 720px);
  align-items: stretch;
}
body.page-blog .page-hero--blog__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Glow rojo radial sutil detrás de la foto (derecha) */
body.page-blog .page-hero--blog__glow {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    rgba(200,16,46,0.18) 0%,
    rgba(200,16,46,0.08) 28%,
    rgba(200,16,46,0) 60%);
  filter: blur(8px);
}
body.page-blog .page-hero--blog__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: none;
  /* width:100% necesario: el hero es display:flex (heredado de .page-hero)
     y este inner es flex item; sin esto, flex-grow:0 (default) hace que su
     ancho lo fije el contenido, no el contenedor — la foto se queda corta
     y deja una franja del fondo negro visible en el borde derecho. */
  width: 100%;
  min-height: clamp(500px, 68vh, 720px);
  padding-right: 0;
  /* Mantiene padding izquierdo alineado al container global */
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
}
body.page-blog .page-hero--blog__left {
  position: relative;
  z-index: 3;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  /* Clearance para el navbar fijo arriba (el texto no debe quedar tapado) */
  padding-block: calc(var(--nav-h, 92px) + 1rem) 2.5rem;
}
body.page-blog .page-hero--blog__sub {
  max-width: 38ch;
  font-size: clamp(0.98rem, 1vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.6rem;
}
/* Link "Ver artículos ↓" */
body.page-blog .page-hero--blog__link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.2rem 0.85rem 1.35rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
body.page-blog .page-hero--blog__link:hover,
body.page-blog .page-hero--blog__link:focus-visible {
  background: rgba(200,16,46,0.12);
  border-color: rgba(200,16,46,0.55);
  transform: translateY(-1px);
}
body.page-blog .page-hero--blog__link-arrow {
  display: inline-block;
  font-size: 0.95rem;
  transition: transform 0.4s ease;
}
body.page-blog .page-hero--blog__link:hover .page-hero--blog__link-arrow {
  transform: translateY(3px);
}

/* ─── Foto: edge-to-edge, llena el alto completo de la fila del hero ─── */
body.page-blog .page-hero--blog__photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
body.page-blog .page-hero--blog__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  border-radius: 0;
  max-width: none;
  /* Zoom lento y elegante (Ken Burns) en loop suave */
  transform-origin: center center;
  will-change: transform;
  animation: heroBlogZoom 24s ease-in-out infinite alternate;
}
@keyframes heroBlogZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}

/* ─── Responsive ─── */
@media (max-width: 900px) {
  body.page-blog .page-hero--blog {
    padding: 7rem 0 3.5rem;
    min-height: 0;
    align-items: center;
  }
  body.page-blog .page-hero--blog__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    min-height: auto;
  }
  body.page-blog .page-hero--blog__left {
    max-width: none;
    padding-right: 0;
    padding-block: 0;
  }
  body.page-blog .page-hero--blog__photo {
    min-height: 300px;
    height: 300px;
    margin-inline: -1.5rem;
  }
  body.page-blog .page-hero--blog__glow {
    right: auto;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 480px;
  }
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
  body.page-blog .page-hero--blog__link,
  body.page-blog .page-hero--blog__link-arrow {
    transition: none !important;
  }
  body.page-blog .page-hero--blog__photo img {
    animation: none;
    transform: none;
  }
}

/* ====================================================================
   PAGE HERO · NOSOTROS (nosotros.html) — Split + duotono
   Modificador `.page-hero--nosotros` scoped: NO toca otros heroes
   (servicios, sectores, sector-*, gera, etc).
   Izquierda: contenido. Derecha: foto del equipo en duotono negro+rojo.
   ==================================================================== */

.page-hero--nosotros {
  background: #000 !important;
  min-height: 80vh;
  padding: 9rem 0 5rem;
  overflow: hidden;
  position: relative;
}

/* SVG inline de filtros (cero layout) */
.page-hero--nosotros__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Capa de fondo: glow rojo sutil detrás del texto */
.page-hero--nosotros__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-hero--nosotros__glow {
  position: absolute;
  top: 50%;
  left: 14%;
  width: 50vw;
  max-width: 640px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    rgba(200,16,46,0.16) 0%,
    rgba(200,16,46,0.07) 30%,
    rgba(200,16,46,0) 62%);
  filter: blur(10px);
}

/* Layout split */
.page-hero--nosotros__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  max-width: 1240px;
}
.page-hero--nosotros__left {
  position: relative;
  z-index: 3;
  max-width: 36rem;
}

/* Subtítulo corto, override del .page-hero__sub base */
.page-hero--nosotros__sub {
  max-width: 38ch;
  font-size: clamp(0.98rem, 1vw, 1.15rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  margin-top: 1.3rem;
}

/* ─── Derecha: contenedor de imagen ─── */
.page-hero--nosotros__media {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  height: clamp(360px, 58vh, 500px);
  overflow: hidden;
  border-radius: 8px;
}

/* Imagen: colores naturales, sin duotono */
.page-hero--nosotros__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  will-change: transform;
}

/* Fade hacia el negro en bordes + velo oscuro para cohesión con fondo */
.page-hero--nosotros__media-fade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Velo oscuro sutil — integra la foto con el fondo negro del hero */
    linear-gradient(rgba(10,10,10,0.40), rgba(10,10,10,0.40)),
    /* Borde izquierdo (interno) se funde con el fondo negro */
    linear-gradient(to right, #000 0%, rgba(0,0,0,0.55) 8%, transparent 28%),
    /* Borde inferior atenuado */
    linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 22%),
    /* Borde superior suave */
    linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, transparent 18%);
}

/* Máscara negra de entrada (wipe controlado por GSAP) */
.page-hero--nosotros__media-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  transform: translateX(0);
  will-change: transform;
  pointer-events: none;
}

/* ─── Responsive ─── Tablet (< 1024) ─── */
@media (max-width: 1023px) {
  .page-hero--nosotros__inner {
    gap: 2rem;
  }
  .page-hero--nosotros__media {
    max-width: 460px;
  }
}

/* ─── Stack en móvil ─── */
@media (max-width: 899px) {
  .page-hero--nosotros {
    padding: 7rem 0 3.5rem;
    min-height: 0;
  }
  .page-hero--nosotros__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .page-hero--nosotros__left { max-width: none; }
  .page-hero--nosotros__media {
    max-width: 460px;
    margin: 0 auto;
    height: clamp(220px, 45vw, 320px);
  }
  /* En móvil el fade: velo + borde inferior se funde con la sección de abajo */
  .page-hero--nosotros__media-fade {
    background:
      linear-gradient(rgba(10,10,10,0.38), rgba(10,10,10,0.38)),
      linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 22%, transparent 70%, #000 100%);
  }
  .page-hero--nosotros__glow {
    left: 50%;
    top: 22%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 520px;
  }
}

/* ─── prefers-reduced-motion: estado final estático ─── */
@media (prefers-reduced-motion: reduce) {
  .page-hero--nosotros__media-mask {
    transform: translateX(101%) !important;
  }
  .page-hero--nosotros__img {
    transform: scale(1) !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ====================================================================
   HISTORIA · LÍNEA DE TIEMPO PROGRESIVA (nosotros.html)
   Scoped a .timeline--historia: NO afecta otras instancias de .timeline.
   Fondo: claro (section.theme-light) → texto oscuro.
   Hitos en tarjeta blanca · contraste legible en inactivo · aire generoso.
   Animación: scaleY fill + is-active por GSAP scrub (solo transform/opacity).
   ==================================================================== */

.timeline--historia {
  position: relative;
  max-width: 640px;
  margin: 3rem auto 0;
  padding-left: 56px;
}

/* Línea base gris: abarca todos los hitos */
.timeline--historia .timeline__track {
  position: absolute;
  left: 18px;          /* track center = 19 px */
  top: 1rem;
  bottom: 0;
  width: 2px;
  background: #e4e4e4;
  border-radius: 1px;
  overflow: hidden;
}

/* Relleno rojo animado por GSAP (scaleY 0 → 1) */
.timeline--historia .timeline__fill {
  position: absolute;
  inset: 0;
  background: var(--alliance-red, #c8102e);
  transform: scaleY(0);
  transform-origin: top center;
}

/* Hito: sin opacity global; el contraste se gestiona por colores */
.timeline--historia .timeline__item {
  position: relative;
  padding: 0 0 2.25rem;
}
.timeline--historia .timeline__item:last-child { padding-bottom: 0; }

/* ── Tarjeta blanca ── */
.timeline--historia .timeline__card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5rem 1.75rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.timeline--historia .timeline__item.is-active .timeline__card {
  border-color: rgba(200,16,46,0.22);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(200,16,46,0.06);
}

/* Nodo: padding-left(56) + left(-45) + radius(8) = 19 = track-center(18+1) */
.timeline--historia .timeline__node {
  position: absolute;
  left: -45px;
  top: 1.65rem;        /* centrado sobre la línea del año en la tarjeta */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f3f3f3;
  border: 2px solid #ccc;
  box-sizing: border-box;
  z-index: 1;
  transition:
    transform    0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    background   0.35s ease,
    border-color 0.35s ease,
    box-shadow   0.35s ease;
}
.timeline--historia .timeline__item.is-active .timeline__node {
  background: var(--alliance-red, #c8102e);
  border-color: var(--alliance-red, #c8102e);
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgba(200,16,46,0.14);
}

/* Año — inactivo: gris medio legible · activo: rojo Alliance */
.timeline--historia .timeline__year {
  font-family: 'Moderat Extended', sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #bbb;
  margin: 0 0 0.3rem;
  line-height: 1.1;
  transition: color 0.4s ease;
}
.timeline--historia .timeline__item.is-active .timeline__year {
  color: var(--alliance-red, #c8102e);
}

/* Título — inactivo: gris · activo: negro pleno */
.timeline--historia .timeline__item h3 {
  color: #aaa;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  line-height: 1.3;
  transition: color 0.4s ease;
}
.timeline--historia .timeline__item.is-active h3 {
  color: #111;
}

/* Descripción — inactivo: gris suave legible · activo: gris oscuro */
.timeline--historia .timeline__item p:not(.timeline__year) {
  color: #bbb;
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
  transition: color 0.4s ease;
}
.timeline--historia .timeline__item.is-active p:not(.timeline__year) {
  color: #555;
}

/* prefers-reduced-motion: línea llena y todos los hitos activos, sin transición */
@media (prefers-reduced-motion: reduce) {
  .timeline--historia .timeline__fill {
    transform: scaleY(1) !important;
    transition: none;
  }
  .timeline--historia .timeline__card {
    border-color: rgba(200,16,46,0.22) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(200,16,46,0.06) !important;
    transition: none;
  }
  .timeline--historia .timeline__node {
    background: var(--alliance-red, #c8102e) !important;
    border-color: var(--alliance-red, #c8102e) !important;
    box-shadow: 0 0 0 5px rgba(200,16,46,0.14) !important;
    transform: scale(1.25) !important;
    transition: none;
  }
  .timeline--historia .timeline__year {
    color: var(--alliance-red, #c8102e) !important;
    transition: none;
  }
  .timeline--historia .timeline__item h3 {
    color: #111 !important;
    transition: none;
  }
  .timeline--historia .timeline__item p:not(.timeline__year) {
    color: #555 !important;
    transition: none;
  }
}

/* Responsive: móvil (< 600 px)
   Cálculo nodo: padding-left(44) + left(-38) + radius(7) = 13 = track-center(12+1) */
@media (max-width: 599px) {
  .timeline--historia {
    padding-left: 44px;
    margin-top: 2rem;
  }
  .timeline--historia .timeline__track {
    left: 12px;
  }
  .timeline--historia .timeline__node {
    left: -38px;
    width: 14px;
    height: 14px;
    top: 1.7rem;
  }
  .timeline--historia .timeline__card {
    padding: 1.2rem 1.4rem;
  }
  .timeline--historia .timeline__item {
    padding-bottom: 1.75rem;
  }
  .timeline--historia .timeline__year {
    font-size: 1.15rem;
  }
}

/* ====================================================================
   COBERTURA NACIONAL (nosotros.html)
   Sección oscura (#0a0a0a): split contenido / mapa vectorial de Colombia.
   El contorno del país proviene de un GeoJSON público (Natural Earth /
   johan/world.geo.json) proyectado matemáticamente — no dibujado a mano.
   Scoped a .cobertura — no afecta otras secciones ni páginas.
   NOTA: esta sección vive solo en nosotros.html, cuyo <body> no lleva la
   clase "page-home" (exclusiva de index.html) — por eso el scope es
   directo (.cobertura), sin prefijo body.page-home.
   ==================================================================== */

.cobertura {
  background: #0a0a0a;
  position: relative;
  overflow: hidden;
}

/* Overrida el padding de section-pad: esta no está justo bajo la nav */
.cobertura.section-pad {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.cobertura__container {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

.cobertura__text { min-width: 0; position: relative; z-index: 1; }

.cobertura .eyebrow { color: #e01a3c; }

.cobertura h2,
.cobertura h2 strong { color: #fff; }

.cobertura__title { margin: 0 0 1rem; }
.cobertura__title em {
  font-style: italic;
  color: #e01a3c;
}

.cobertura__deck {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 42ch;
}

/* Lista de ciudades: 2 columnas, Bogotá primera fila con badge */
.cobertura__cities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
}

.cobertura__city {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}
.cobertura__city--primary { color: #ffffff; font-weight: 500; }

.cobertura__city-dot {
  width: 6px;
  height: 6px;
  background: #e01a3c;
  border-radius: 50%;
  flex-shrink: 0;
}
.cobertura__city--primary .cobertura__city-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px rgba(224,26,60,0.15);
}

.cobertura__badge {
  font-size: 0.6rem;
  padding: 2px 8px;
  background: #e01a3c;
  color: #ffffff;
  border-radius: 3px;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-transform: uppercase;
}

/* ── Mapa SVG ── */
.cobertura__map {
  position: relative;
  z-index: 1;
  aspect-ratio: 476 / 638; /* proporción real del contorno proyectado, no 1:1 forzado */
  /* Se dimensiona por ALTO (no por ancho) para que el mapa quepa en una sola
     vista sin scroll; el ancho se deriva del alto conservando la proporción. */
  height: min(72vh, 560px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}
.cobertura__map svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Red de conexiones animada: dash que fluye desde Bogotá hacia las regiones */
.cobertura__map .co-flow line {
  stroke: #e01a3c;
  stroke-width: 0.9;
  stroke-opacity: 0.55;
  stroke-dasharray: 2 5;
  animation: coFlow 1.1s linear infinite;
}
@keyframes coFlow {
  to { stroke-dashoffset: -14; }
}

/* Núcleos blancos de los nodos: leve titileo para dar vida */
.cobertura__map .co-cores circle {
  opacity: 0.9;
  animation: coTwinkle 3s ease-in-out infinite;
}
.cobertura__map .co-cores circle:nth-child(2) { animation-delay: 0.6s; }
.cobertura__map .co-cores circle:nth-child(3) { animation-delay: 1.2s; }
.cobertura__map .co-cores circle:nth-child(4) { animation-delay: 1.8s; }
.cobertura__map .co-cores circle:nth-child(5) { animation-delay: 2.4s; }
@keyframes coTwinkle {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Etiquetas con halo oscuro para legibilidad sobre el mapa */
.cobertura__map .co-labels text {
  paint-order: stroke;
  stroke: rgba(10,10,10,0.72);
  stroke-width: 2.2px;
  stroke-linejoin: round;
}

/* Animación de pulso para Bogotá (doble halo, onda expansiva) */
@keyframes bogotaPulse {
  0%   { transform: scale(1);   opacity: 0.5;  }
  50%  { transform: scale(1.2); opacity: 0.15; }
  100% { transform: scale(1);   opacity: 0.5;  }
}
.cobertura__map .bogota-halo-1 {
  transform-origin: center;
  transform-box: fill-box;
  animation: bogotaPulse 2.5s ease-in-out infinite;
}
.cobertura__map .bogota-halo-2 {
  transform-origin: center;
  transform-box: fill-box;
  animation: bogotaPulse 2.5s ease-in-out infinite 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  .cobertura__map .bogota-halo-1,
  .cobertura__map .bogota-halo-2,
  .cobertura__map .co-flow line,
  .cobertura__map .co-cores circle {
    animation: none;
  }
}

/* Tablet / móvil: apilado */
@media (max-width: 900px) {
  .cobertura__container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cobertura__map {
    height: auto;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
}
@media (max-width: 640px) {
  .cobertura.section-pad {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .cobertura__cities {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
   SERVICIOS · MASTER-DETAIL (servicios.html)
   Layout lista + preview sobre fondo claro. Scoped a #servicios.
   Animaciones solo con transform/opacity. Reduced-motion: instantáneo.
   ==================================================================== */

#servicios .services-md {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: stretch;
}

/* ─── IZQUIERDA · LISTA NUMERADA (master) ─── */
#servicios .services-md__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
#servicios .services-md__item {
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
#servicios .services-md__item:first-child {
  border-top: 1px solid rgba(0,0,0,0.08);
}
#servicios .services-md__trigger {
  /* reset <button> */
  background: none;
  border: none;
  font: inherit;
  width: 100%;
  text-align: left;
  /* layout */
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem;
  align-items: center;
  padding: 0.9rem 0.4rem 0.9rem 0.4rem;
  color: #1a1a1a;
  cursor: pointer;
  position: relative;
  transition: padding-left 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
              color 0.3s ease;
}
#servicios .services-md__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 70%;
  background: var(--alliance-red);
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#servicios .services-md__trigger:not(.is-active):hover {
  background: rgba(0,0,0,0.03);
}
#servicios .services-md__trigger.is-active {
  padding-left: 1.2rem;
  color: var(--alliance-red);
}
#servicios .services-md__trigger.is-active::before {
  transform: translateY(-50%) scaleY(1);
}
#servicios .services-md__trigger:focus-visible {
  outline: 2px solid var(--alliance-red);
  outline-offset: 3px;
  border-radius: 3px;
}
#servicios .services-md__num {
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  color: rgba(0,0,0,0.42);
  font-weight: 600;
  transition: color 0.3s ease;
}
#servicios .services-md__trigger.is-active .services-md__num {
  color: var(--alliance-red);
}
#servicios .services-md__name {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.9rem, 1.05vw, 1.1rem);
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}
#servicios .services-md__arrow {
  display: inline-flex;
  align-items: center;
  color: var(--alliance-red);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.35s ease;
}
#servicios .services-md__trigger.is-active .services-md__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ─── DERECHA · PREVIEW PANEL (detail) ─── */
#servicios .services-md__preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.04);
  box-shadow: 0 6px 28px rgba(0,0,0,0.06);
  /* altura libre — la determina el panel más alto */
}
#servicios .services-md__panels {
  display: grid;
  grid-template-columns: 1fr;
  /* todos los panels en la misma celda; la celda crece con el más alto */
}
#servicios .services-md__panel {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
#servicios .services-md__panel.is-active {
  opacity: 1;
  pointer-events: auto;
}
#servicios .services-md__panel-img {
  /* Imagen más alta para aprovechar el espacio del panel (que se estira a la
     altura de la lista). flex-basis 220px + grow: si el panel queda más alto
     que imagen+texto, la imagen absorbe el sobrante en vez de dejar hueco. */
  flex: 1 0 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#servicios .services-md__panel.is-active .services-md__panel-img {
  transform: scale(1);
}
#servicios .services-md__panel-body {
  /* Altura natural del texto; la imagen (flex-grow) absorbe el espacio sobrante. */
  flex: 0 0 auto;
  padding: 1rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #fff;
}
/* Slide-up de los textos al activar el panel */
#servicios .services-md__panel-num,
#servicios .services-md__panel-title,
#servicios .services-md__panel-desc,
#servicios .services-md__panel-actions {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.5s ease;
}
#servicios .services-md__panel.is-active .services-md__panel-num,
#servicios .services-md__panel.is-active .services-md__panel-title,
#servicios .services-md__panel.is-active .services-md__panel-desc,
#servicios .services-md__panel.is-active .services-md__panel-actions {
  opacity: 1;
  transform: none;
}
#servicios .services-md__panel.is-active .services-md__panel-num     { transition-delay: 0.08s; }
#servicios .services-md__panel.is-active .services-md__panel-title   { transition-delay: 0.13s; }
#servicios .services-md__panel.is-active .services-md__panel-desc    { transition-delay: 0.18s; }
#servicios .services-md__panel.is-active .services-md__panel-actions { transition-delay: 0.22s; }

#servicios .services-md__panel-num {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  color: var(--alliance-red);
  font-weight: 600;
  text-transform: uppercase;
}
#servicios .services-md__panel-title {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  color: #111;
  margin: 0;
  max-width: 28ch;
}
#servicios .services-md__panel-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555;
  margin: 0;
  max-width: 60ch;
}
/* Wrapper de acciones: botón primario "Conocer más" + CTA secundario */
#servicios .services-md__panel-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: 0.4rem;
}

/* PRIMARY · "Conocer más" → subpágina del servicio */
#servicios .services-md__panel-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  background: var(--alliance-red);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--alliance-red);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(200,16,46,0.20);
}
#servicios .services-md__panel-more i {
  transition: transform 0.3s ease;
  font-size: 0.78rem;
}
#servicios .services-md__panel-more:hover,
#servicios .services-md__panel-more:focus-visible {
  background: #a30d25;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(200,16,46,0.30);
}
#servicios .services-md__panel-more:hover i,
#servicios .services-md__panel-more:focus-visible i {
  transform: translateX(4px);
}
#servicios .services-md__panel-more:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* SECUNDARY · CTA existente (cotizar/diagnóstico/…) → contacto.html */
#servicios .services-md__panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  text-decoration: none;
  transition: color 0.3s ease;
}
#servicios .services-md__panel-cta i {
  font-size: 0.65rem;
  transition: transform 0.3s ease;
}
#servicios .services-md__panel-cta:hover,
#servicios .services-md__panel-cta:focus-visible {
  color: var(--alliance-red);
}
#servicios .services-md__panel-cta:hover i,
#servicios .services-md__panel-cta:focus-visible i {
  transform: translateX(4px);
}
#servicios .services-md__panel-cta:focus-visible {
  outline: 2px solid var(--alliance-red);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ─── Padding vertical amplio para que la sección respire ─── */
@media (min-width: 1024px) {
  #servicios.section-pad {
    padding-top: 14rem;
    padding-bottom: 12rem;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  #servicios.section-pad {
    padding-top: 10rem;
    padding-bottom: 9rem;
  }
}
@media (max-width: 767px) {
  #servicios.section-pad {
    padding-top: calc(var(--nav-h) + 4rem);
    padding-bottom: 7rem;
  }
}

/* ─── Tablet (768–1023) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  #servicios .services-md {
    gap: 2rem;
  }
  #servicios .services-md__preview { overflow: hidden; }
  #servicios .services-md__trigger { padding: 0.8rem 0.3rem; }
}

/* ─── MÓVIL (<768): stack vertical, cada panel como tarjeta independiente ─── */
@media (max-width: 767px) {
  #servicios .services-md {
    display: block;
  }
  /* En móvil, ocultamos la lista master (sin hover, no aporta valor) */
  #servicios .services-md__list { display: none; }

  #servicios .services-md__preview {
    background: transparent;
    border-radius: 0;
    min-height: 0;
    overflow: visible;
    box-shadow: none;
  }
  #servicios .services-md__panels {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-height: 0;
  }
  /* Cada panel pasa a flujo normal como tarjeta apilada */
  #servicios .services-md__panel {
    grid-row: unset;
    grid-column: unset;
    opacity: 1 !important;
    pointer-events: auto;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    transition: none;
  }
  #servicios .services-md__panel-img {
    flex: 0 0 180px;
    transform: none;
    transition: none;
  }
  #servicios .services-md__panel-body {
    padding: 1.2rem 1.3rem 1.4rem;
  }
  #servicios .services-md__panel-title { font-size: 1.1rem; }
  /* Slide-up off en móvil — todos los textos visibles */
  #servicios .services-md__panel-num,
  #servicios .services-md__panel-title,
  #servicios .services-md__panel-desc,
  #servicios .services-md__panel-actions {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Botón "Conocer más" un poco más compacto en móvil */
  #servicios .services-md__panel-more {
    padding: 0.78rem 1.2rem;
    font-size: 0.74rem;
  }
}

/* ─── Fundido arriba/abajo con secciones oscuras vecinas ─── */
/* background-image en #servicios (1,0,0) sobreescribe el de .theme-light--alt (0,2,0)
   sin necesidad de !important. El background-color: #f8f9fa !important sigue intacto.
   Los degradés de fusión van delante de los focos rojos de ambiente. */
#servicios {
  background-image:
    linear-gradient(to bottom, #0a0a0a 0%, transparent 140px),
    linear-gradient(to top,    #0a0a0a 0%, transparent 140px),
    radial-gradient(ellipse 75% 55% at 95%   0%,  rgba(200,16,46,0.05)  0%, transparent 60%),
    radial-gradient(ellipse 65% 50% at 0%  100%,  rgba(200,16,46,0.035) 0%, transparent 55%);
}

/* ─── prefers-reduced-motion: cambios instantáneos ─── */
@media (prefers-reduced-motion: reduce) {
  #servicios .services-md__trigger,
  #servicios .services-md__trigger::before,
  #servicios .services-md__num,
  #servicios .services-md__arrow,
  #servicios .services-md__panel,
  #servicios .services-md__panel-img,
  #servicios .services-md__panel-num,
  #servicios .services-md__panel-title,
  #servicios .services-md__panel-desc,
  #servicios .services-md__panel-actions,
  #servicios .services-md__panel-more,
  #servicios .services-md__panel-cta {
    transition: none !important;
  }
  #servicios .services-md__panel-img {
    transform: none !important;
  }
}

/* ====================================================================
   PAGE HERO · CALCULADORA · MODIFICADOR "page-hero--calc"
   Hero split sobre fondo negro: contenido izquierda + feed CCTV derecha.
   SCOPED: todos los estilos viven bajo .page-hero--calc para NO afectar
   el .page-hero base de otras páginas (gera, sectores, servicios, nosotros).
   Animaciones solo transform/opacity. Reduced-motion: HUD estático.
   ==================================================================== */

.page-hero--calc {
  padding: 9rem 0 5rem;
  min-height: 72vh;
  background: #0a0a0a;
}

.page-hero--calc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-hero--calc__bg-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 22% 50%, rgba(200,16,46,0.12) 0%, rgba(10,10,10,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%);
}

.page-hero--calc__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 4.5rem;
  align-items: center;
  max-width: 1280px;
}

/* ─── Izquierda: contenido ─── */
.page-hero--calc__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.page-hero--calc .breadcrumb {
  margin-bottom: 1.25rem;
}
.page-hero--calc__title {
  font-size: var(--fs-h1);
  line-height: 1.12;
  max-width: 18ch;
  margin: 0.85rem 0 1.35rem;
}
.page-hero--calc__sub {
  max-width: 46ch;
  font-size: clamp(0.98rem, 1vw, 1.1rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.74);
  margin: 0 0 2rem;
}
.page-hero--calc__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-hero--calc__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
}
.page-hero--calc__hint i {
  color: var(--alliance-red, #c8102e);
}

/* ─── Derecha: feed CCTV (decorativo, aria-hidden) ─── */
.page-hero--calc__feed {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #050505;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow:
    0 30px 70px -25px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.02) inset;
}

.page-hero--calc__feed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  will-change: transform, opacity;
}

/* Tablet */
@media (max-width: 1100px) {
  .page-hero--calc__inner { gap: 3rem; }
  .page-hero--calc__feed { aspect-ratio: 4 / 3; }
}

/* Móvil: apila (contenido arriba, feed abajo) */
@media (max-width: 768px) {
  .page-hero--calc {
    padding: 7rem 0 3.5rem;
    min-height: 0;
  }
  .page-hero--calc__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .page-hero--calc__title { margin-top: 0.5rem; max-width: none; }
  .page-hero--calc__sub   { max-width: none; }
  .page-hero--calc__feed  { aspect-ratio: 16 / 11; }
}

/* ======================================================================
   calc-dark-bg: fondo oscuro en sección calculator que usa theme-light
   para mantener legibilidad de tipografía dentro del calc-card (blanco).
   Sólo aplica en calculadora.html (clase añadida sólo ahí).
   ====================================================================== */
.calculator.calc-dark-bg.theme-light,
.calculator.calc-dark-bg.theme-light.theme-light--alt {
  background-color: #111111 !important;
  background-image:
    radial-gradient(60% 50% at 80% 0%, rgba(200,16,46,0.07) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(200,16,46,0.05) 0%, transparent 60%) !important;
}

/* ======================================================================
   page-hero--sector — Modificador para hero de páginas sectoriales
   Mismo patrón visual que .page-hero--servicios/.page-hero--blog: split
   contenido izq + foto edge-to-edge derecha, fondo negro + glow rojo,
   Ken Burns en la foto. Compartido por las 8 páginas sector-*.html
   (body.sector-page). Scopeado: NO toca .page-hero base de otras páginas.
   ====================================================================== */
.page-hero--sector {
  position: relative;
  overflow: hidden;
  background: #000;
  /* Cabe en una sola vista: alto de viewport menos el navbar fijo, con un
     tope duro para no crecer de más en pantallas muy altas. height
     explícito (no solo min/max) porque .page-hero__inner usa height:100% —
     un % de altura contra un ancestro con height:auto se resuelve como
     "auto" (CSS2.1 §10.5) e ignoraría el tope. */
  height: min(calc(100vh - var(--nav-h, 92px)), 720px);
  min-height: calc(100vh - var(--nav-h, 92px));
  max-height: 720px;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.page-hero--sector__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Glow rojo radial sutil detrás de la foto (derecha) */
.page-hero--sector__glow {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    rgba(200,16,46,0.18) 0%,
    rgba(200,16,46,0.08) 28%,
    rgba(200,16,46,0) 60%);
  filter: blur(8px);
}

/* Layout split: contenido izquierda, foto derecha */
.page-hero--sector .page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: none;
  /* width:100% necesario: el hero es display:flex (heredado de .page-hero)
     y este inner es flex item; sin esto, flex-grow:0 (default) hace que su
     ancho lo fije el contenido, no el contenedor — la foto se queda corta
     y deja la franja negra de fondo visible en el borde derecho. */
  width: 100%;
  /* height:100% (no min-height:inherit): toma el alto REAL ya acotado del
     padre, en vez de recalcular su propio calc(100vh - nav) independiente
     e ignorar el max-height del padre en pantallas altas. */
  height: 100%;
  min-height: 0;
  padding-right: 0;
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
}
.page-hero--sector__left {
  position: relative;
  z-index: 3;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  /* Clearance para el navbar fijo arriba (el texto no debe quedar tapado) */
  padding-block: calc(var(--nav-h, 92px) + 1rem) 2.5rem;
}

/* Foto: edge-to-edge, llena el alto completo de la fila del hero */
.page-hero--sector__photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
.page-hero--sector__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Zoom lento y elegante (Ken Burns) en loop suave */
  transform-origin: center center;
  will-change: transform;
  animation: heroSectorZoom 24s ease-in-out infinite alternate;
}
@keyframes heroSectorZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}

/* Detalle de marca en eyebrow */
.page-hero--sector .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--alliance-red);
}
.page-hero--sector .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--alliance-red);
  flex-shrink: 0;
}

/* Tipografía del título — token --fs-h1 (auditoría global v8: misma
   escala que el home). line-height: 1.2 evita el cramped en monitores
   grandes y el clipping de la <em> itálica roja en títulos de 2 líneas. */
.page-hero--sector .page-hero__title {
  max-width: 22ch;
  margin: 1.1rem 0 1.2rem;
  letter-spacing: -0.02em;
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.2;
  overflow: visible;
}
.page-hero--sector .page-hero__sub {
  font-size: clamp(0.98rem, 1vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  max-width: 58ch;
  margin: 0;
}

/* Reveal por línea — CSS animations (sin dependencia JS) */
.page-hero--sector .reveal-line {
  animation: sectorHeroLine 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-hero--sector .reveal-line--1 { animation-delay: 0.10s; }
.page-hero--sector .reveal-line--2 { animation-delay: 0.25s; }
.page-hero--sector .reveal-line--3 { animation-delay: 0.40s; }
.page-hero--sector .reveal-line--4 { animation-delay: 0.55s; }

@keyframes sectorHeroLine {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: apila en 1 columna */
@media (max-width: 900px) {
  .page-hero--sector {
    height: auto;
    min-height: auto;
    max-height: none;
  }
  .page-hero--sector .page-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: auto;
    min-height: auto;
  }
  .page-hero--sector__left {
    max-width: none;
    padding-right: 0;
    padding-block: 0;
  }
  .page-hero--sector__photo {
    min-height: 260px;
    height: 260px;
    margin-inline: -1.5rem;
  }
  .page-hero--sector__glow {
    right: auto;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--sector .reveal-line {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .page-hero--sector__photo img {
    animation: none;
    transform: none;
  }
}


/* ======================================================================
   sector-page — tipografía fluida v5 + compactación de secciones
   Scope: .sector-page / .servicio-page (sector-* y servicio-*; logístico, salud, educación,
   industria, corporativo, retail, infraestructura).
   Escala clamp(): mínimo cómodo en mobile → escala suave → máximo
   legible en pantallas anchas. Sin tocar otras páginas.
   ====================================================================== */

/* --- Espaciado de secciones ----------------------------------------- */
:is(.sector-page, .servicio-page) .section-pad {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 900px) {
  :is(.sector-page, .servicio-page) .section-pad {
    padding-top: 3.75rem;
    padding-bottom: 3.75rem;
  }
}
:is(.sector-page, .servicio-page) .visual-interlude { min-height: 38vh; }
@media (min-width: 900px) {
  :is(.sector-page, .servicio-page) .visual-interlude { min-height: 44vh; }
}
:is(.sector-page, .servicio-page) .section-head { margin-bottom: 1.5rem !important; }
@media (min-width: 900px) {
  :is(.sector-page, .servicio-page) .section-head { margin-bottom: 1.75rem !important; }
}

/* --- Hero H1 — mismo token que el home (--fs-h1) ---------------------- */
:is(.sector-page, .servicio-page) .page-hero__title {
  font-size: var(--fs-h1) !important;
  line-height: 1.15;
  margin: 1.1rem 0 1.25rem;
}
:is(.sector-page, .servicio-page) .page-hero__sub {
  font-size: clamp(0.98rem, 1vw, 1.12rem);
  line-height: 1.65;
  max-width: 60ch;
}

/* --- H2 de sección — mismo token que el home (--fs-display-lg).
   Se excluye .cta-banner__title para que el CTA conserve la escala
   global del home (clamp 2rem→3.4rem, lh 1.1). --------------------------- */
:is(.sector-page, .servicio-page) h2.display-xl:not(.cta-banner__title) {
  font-size: var(--fs-display-lg) !important;
  line-height: var(--lh-heading) !important;
}

/* --- Pull-quote (El Reto / Filosofía) -------------------------------- */
:is(.sector-page, .servicio-page) .pull-quote__text {
  font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
  line-height: 1.42;
}
:is(.sector-page, .servicio-page) .pull-quote__body {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem) !important;
  line-height: 1.7;
  max-width: 60ch;
}

/* --- Capacidades: formato tarjeta ------------------------------------ */
:is(.sector-page, .servicio-page) .cap-item__num {
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  margin-bottom: 0.65rem;
}
:is(.sector-page, .servicio-page) .cap-item__title {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem) !important;
  line-height: 1.35;
}
:is(.sector-page, .servicio-page) .cap-item__desc {
  font-size: clamp(0.92rem, 1.2vw, 1.04rem) !important;
  line-height: 1.65;
}

/* --- Hoja de ruta (phases timeline) ---------------------------------- */
:is(.sector-page, .servicio-page) .phases { gap: 1.25rem; }
@media (min-width: 900px) {
  :is(.sector-page, .servicio-page) .phases { gap: 1.5rem; }
}
:is(.sector-page, .servicio-page) .phase__num {
  width: 50px !important;
  height: 50px !important;
  font-size: 1.15rem !important;
  margin-bottom: 0.75rem !important;
}
:is(.sector-page, .servicio-page) .phase__title {
  font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
  line-height: 1.28 !important;
  margin-bottom: 0.75rem !important;
}
:is(.sector-page, .servicio-page) .phase__list {
  font-size: clamp(0.95rem, 1.2vw, 1.08rem) !important;
  line-height: 1.72;
}
:is(.sector-page, .servicio-page) .phase__list li { margin-bottom: 0.35rem !important; }

/* --- KPI blocks ------------------------------------------------------ */
:is(.sector-page, .servicio-page) .kpi-block { padding: 1.1rem 1.3rem; }
:is(.sector-page, .servicio-page) .kpi-block__title {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem) !important;
  margin-bottom: 0.6rem;
}
:is(.sector-page, .servicio-page) .kpi-block ul {
  font-size: clamp(0.95rem, 1.2vw, 1.08rem) !important;
  line-height: 1.7;
}
:is(.sector-page, .servicio-page) .kpi-block ul li { margin-bottom: 0.3rem !important; }

/* --- Diferenciadores list -------------------------------------------- */
:is(.sector-page, .servicio-page) .diff-list { gap: 0.65rem; }
:is(.sector-page, .servicio-page) .diff-list li { padding: 0.6rem 0; }
:is(.sector-page, .servicio-page) .diff-list strong {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem) !important;
}
:is(.sector-page, .servicio-page) .diff-list span {
  font-size: clamp(0.95rem, 1.3vw, 1.08rem) !important;
  line-height: 1.65;
}

/* --- Ancho de lectura (lead paragraphs en secciones) ----------------- */
:is(.sector-page, .servicio-page) .section-head p:not(.eyebrow),
:is(.sector-page, .servicio-page) .pull-quote__body {
  max-width: 65ch;
}

/* ======================================================================
   page-hero--servicio — Modificador propio del hero de las subpáginas de
   servicio. Mismo patrón visual que .page-hero--sector/--servicios/--blog:
   split contenido izq + foto edge-to-edge derecha, fondo negro + glow
   rojo, Ken Burns en la foto, cabe en una sola vista. Clase propia para
   no afectar ningún otro hero.
   ====================================================================== */
.page-hero--servicio {
  position: relative;
  overflow: hidden;
  background: #000;
  /* Cabe en una sola vista: alto de viewport menos el navbar fijo, con un
     tope duro para no crecer de más en pantallas muy altas. height
     explícito (no solo min/max) porque .page-hero__inner usa height:100% —
     un % de altura contra un ancestro con height:auto se resuelve como
     "auto" (CSS2.1 §10.5) e ignoraría el tope. */
  height: min(calc(100vh - var(--nav-h, 92px)), 720px);
  min-height: calc(100vh - var(--nav-h, 92px));
  max-height: 720px;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.page-hero--servicio__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Glow rojo radial sutil detrás de la foto (derecha) */
.page-hero--servicio__glow {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 60vw;
  max-width: 720px;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    rgba(200,16,46,0.18) 0%,
    rgba(200,16,46,0.08) 28%,
    rgba(200,16,46,0) 60%);
  filter: blur(8px);
}

/* Layout split: contenido izquierda, foto derecha */
.page-hero--servicio .page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  /* Las fotos de assets/img/servicios/ son panorámicas (~1.8/1 a 2.4/1) y la
     celda del hero es más bien cuadrada (alto acotado a una sola vista);
     con 1fr/1fr se recortaban demasiado. Más ancho para la foto = menos
     recorte y se ve más completa. */
  grid-template-columns: 0.65fr 1.35fr;
  gap: 0;
  align-items: stretch;
  max-width: none;
  /* width:100% necesario: el hero es display:flex (heredado de .page-hero)
     y este inner es flex item; sin esto, flex-grow:0 (default) hace que su
     ancho lo fije el contenido, no el contenedor — la foto se queda corta
     y deja una franja del fondo negro visible en el borde derecho. */
  width: 100%;
  /* height:100% (no min-height:inherit): toma el alto REAL ya acotado del
     padre, en vez de recalcular su propio calc(100vh - nav) independiente
     e ignorar el max-height del padre en pantallas altas. */
  height: 100%;
  min-height: 0;
  padding-right: 0;
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
}
.page-hero--servicio__left {
  position: relative;
  z-index: 3;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  /* Clearance para el navbar fijo arriba (el texto no debe quedar tapado) */
  padding-block: calc(var(--nav-h, 92px) + 1rem) 2.5rem;
}

/* Foto: edge-to-edge, llena el alto completo de la fila del hero */
.page-hero--servicio__photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}
.page-hero--servicio__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* Zoom lento y elegante (Ken Burns) en loop suave */
  transform-origin: center center;
  will-change: transform;
  animation: heroServicioZoom 24s ease-in-out infinite alternate;
}
@keyframes heroServicioZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}

/* Detalle de marca en eyebrow */
.page-hero--servicio .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--alliance-red);
}
.page-hero--servicio .eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--alliance-red);
  flex-shrink: 0;
}

/* Tipografía del título — clamp propio (la escala v5 .servicio-page la
   refuerza con !important; ésta evita el cramped si no cargara). */
.page-hero--servicio .page-hero__title {
  max-width: 22ch;
  margin: 1.1rem 0 1.2rem;
  letter-spacing: -0.02em;
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.2;
  overflow: visible;
}
.page-hero--servicio .page-hero__sub {
  font-size: clamp(0.98rem, 1vw, 1.12rem);
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
  max-width: 58ch;
  margin: 0;
}

/* Reveal por línea — CSS animations (sin dependencia JS) */
.page-hero--servicio .reveal-line {
  animation: sectorHeroLine 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-hero--servicio .reveal-line--1 { animation-delay: 0.10s; }
.page-hero--servicio .reveal-line--2 { animation-delay: 0.25s; }
.page-hero--servicio .reveal-line--3 { animation-delay: 0.40s; }
.page-hero--servicio .reveal-line--4 { animation-delay: 0.55s; }

/* Responsive: apila en 1 columna */
@media (max-width: 900px) {
  .page-hero--servicio {
    height: auto;
    min-height: auto;
    max-height: none;
  }
  .page-hero--servicio .page-hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    height: auto;
    min-height: auto;
  }
  .page-hero--servicio__left {
    max-width: none;
    padding-right: 0;
    padding-block: 0;
  }
  .page-hero--servicio__photo {
    min-height: 260px;
    height: 260px;
    margin-inline: -1.5rem;
  }
  .page-hero--servicio__glow {
    right: auto;
    left: 50%;
    top: 70%;
    transform: translate(-50%, -50%);
    width: 90vw;
    max-width: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--servicio .reveal-line {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .page-hero--servicio__photo img {
    animation: none;
    transform: none;
  }
}

/* ======================================================================
   sector-page / servicio-page — tipografía fluida v8 (auditoría global)
   Complemento mínimo del sistema v2: solo neutraliza font-sizes inline
   hardcodeados en los HTML de sectoriales y servicios. Todo lo demás
   (.lead, .feature-card, modality, benefits, angel-timeline, intros)
   lo gobierna el SISTEMA VISUAL v2 global — la misma escala del home.
   ====================================================================== */

/* --- Párrafos de cuerpo libres en secciones split-2col (reto/filosofía).
   Pisa los style="font-size:1.2rem" inline del template.                  */
:is(.sector-page, .servicio-page) .split-2col > div > p:not(.eyebrow):not(.pull-quote__text):not(.pull-quote__body):not(.pull-quote__source) {
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.18rem) !important;
  line-height: 1.72;
  max-width: 64ch;
}

/* --- Párrafo sub-descripción en section-head (no .lead, no eyebrow).
   Pisa los style="font-size:1.05rem/0.98rem" inline del template.         */
:is(.sector-page, .servicio-page) .section-head > p:not(.eyebrow):not(.lead) {
  font-size: clamp(0.96rem, 0.84rem + 0.38vw, 1.1rem) !important;
  line-height: 1.72;
}

/* ======================================================================
   HOME · perfilamiento de contenidos (2026-06-11)
   Soporte mínimo para copys nuevos. Reutiliza tokens y la tarjeta
   .feature-card existente; no introduce un lenguaje visual nuevo.
   ====================================================================== */

/* Microcopy bajo los CTAs del hero (refuerzo OPEX/calculadora) */
.hero__microcopy {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.55);
}
.hero__microcopy i { color: var(--alliance-red); font-size: 0.82rem; }

/* Triángulo de valor — los tiles son enlaces que reutilizan .feature-card.
   Solo se garantiza igual altura y que el pie quede anclado abajo. */
.value-tri__tile {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.5rem 1.5rem;            /* compactar: override de .feature-card 2.25/1.9rem */
}
.value-tri__tile .feature-card__num { order: -1; margin-bottom: 0.3rem; }
.value-tri__tile h3 { margin-bottom: 0.55rem; }
.value-tri__tile p { font-size: 0.875rem; line-height: 1.6; }
.value-tri__tile .feature-card__value {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}
.value-tri__tile:hover .feature-card__value i { transform: translateX(4px); }
.value-tri__tile .feature-card__value i { transition: transform 0.3s ease; }

/* --- Banner de imagen 16:7 en tarjetas pilar (value-tri__tile) ----------
   Sangra hacia los bordes usando márgenes negativos iguales al padding
   de .value-tri__tile (1.5rem top, 1.5rem laterales). La card ya tiene
   overflow:hidden, así que las esquinas superiores quedan correctas. */
.value-tri__tile .value-tri__img {
  order: -2;                              /* va antes del num (order:-1) y del ícono */
  margin: -1.5rem -1.5rem 1rem;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  flex-shrink: 0;
}
.value-tri__tile .value-tri__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
.value-tri__tile:hover .value-tri__img img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .value-tri__tile .value-tri__img img { transition: none; transform: none; }
}

/* --- Comillas curly envolventes integradas al h3 de tarjetas pilar --------
   Span inline dentro del h3; la comilla escala con el tamaño del título.
   vertical-align: -0.1em baja levemente la comilla para alinearse con el
   texto sin descuadrar la caja de línea. */
.value-tri__quote-mark {
  display: inline;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.3em;
  font-weight: 700;
  color: var(--alliance-red);
  vertical-align: -0.1em;
  line-height: 1;
  user-select: none;
  margin-right: 5px;
}
.value-tri__quote-mark--close {
  margin-right: 0;
  margin-left: 4px;
}

/* =========================================================
   Pilares #valor · LAYOUT EDITORIAL DE FILAS HORIZONTALES
   Las 3 tarjetas se apilan verticalmente; cada una es un split
   horizontal (foto vertical estrecha izquierda · contenido derecha).
   Compactado para que las 3 entren en una sola vista de desktop.
   ========================================================= */
.value-tri__rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* La tarjeta-fila: anula la dirección columna y el padding de .value-tri__tile */
.value-tri__tile.value-tri__row {
  flex-direction: row;
  align-items: stretch;
  height: auto;
  min-height: 180px;
  padding: 0;
}

/* Columna izquierda · foto con presencia visual (alto completo de la fila) */
.value-tri__row-img {
  flex: 0 0 260px;
  align-self: stretch;
  overflow: hidden;
}
.value-tri__row-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.65s ease;
}
@media (hover: hover) {
  .value-tri__row:hover .value-tri__row-img img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .value-tri__row-img img { transition: none; transform: none; }
}

/* Columna derecha · contenido centrado verticalmente */
.value-tri__row-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 18px;
}

/* Línea superior · número grande + categoría, ambos en rojo */
.value-tri__row-top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.value-tri__row .feature-card__num {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--alliance-red);
  margin: 0;
}
.value-tri__row-cat {
  font-family: 'Poppins', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--alliance-red);
}

/* Título-dolor (cita) · ~16px, italic, oscuro */
.value-tri__row h3 {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  font-style: italic;
  margin: 0 0 0.35rem;
}

/* Párrafo de respuesta · ~12px, gris medio */
.value-tri__row p {
  font-size: 0.75rem;
  line-height: 1.55;
  margin: 0;
}

/* CTA · sin borde superior, rojo, con flecha animada */
.value-tri__row .feature-card__value {
  margin-top: 0.65rem;
  padding-top: 0;
  border-top: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--alliance-red);
}
.value-tri__row .feature-card__value i { transition: transform 0.3s ease; }
@media (hover: hover) {
  .value-tri__row:hover .feature-card__value i { transform: translateX(4px); }
}

/* Responsive · tablet: reduce foto, mantiene split */
@media (max-width: 900px) {
  .value-tri__row-img { flex-basis: 180px; }
}

/* Responsive · mobile: apila (foto arriba, texto abajo) */
@media (max-width: 560px) {
  .value-tri__tile.value-tri__row { flex-direction: column; min-height: auto; }
  .value-tri__row-img { flex-basis: auto; height: 200px; width: 100%; }
  .value-tri__row-content { padding: 18px 16px; }
  .value-tri__row h3 { font-size: 0.95rem; }
  .value-tri__row p { font-size: 0.73rem; }
}

/* Cierre del bloque Nosotros — línea de respaldo (40+ años, reputación) */
.about__trust-line {
  margin: 0 0 1.75rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #6b6b6b;
}
.about__trust-line strong { color: var(--alliance-red); font-weight: 600; }

/* --- Cinturón de credibilidad dentro del bloque fusionado #valor --------
   Reutiliza .trust__grid/.trust__item/.trust__num (counters de main.js
   intactos); solo se compacta para leerse como banda, no como sección. */
.value-tri__belt {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.value-tri__belt .trust__num { font-size: clamp(2.1rem, 4vw, 3.2rem); }
.value-tri__belt .trust__item { padding-top: 0.5rem; padding-bottom: 0.5rem; }

/* Reduce el padding-top de #valor: .section-pad añade clearance del navbar
   (≈108px) que aquí no hace falta — #valor no es la primera sección. */
#valor { padding-top: 56px; }
@media (max-width: 768px) { #valor { padding-top: 40px; } }

/* --- Bloque de autoridad #valor: deck consultivo + sub-bloque de dolores
   específicos. Da aire entre los 4 sub-bloques para que se lea como una sola
   conversación (dolor → respaldo → día a día → CTA). --------------------- */
.value-tri__deck {
  margin: 1.1rem 0 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: #555555;
  max-width: 54ch;
}
.value-tri__specifics { margin-top: clamp(3rem, 5vw, 4.5rem); }
.value-tri__sub-eyebrow {
  display: block;
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- Sello de marca · puente editorial (40+ años) ------------------------ */
.brand-seal { padding: 2.75rem 0; }
.brand-seal__inner { text-align: center; }
.brand-seal__text {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.4;
  font-weight: 500;
  max-width: 34ch;
  margin: 0.85rem auto 0;
}
.brand-seal__text em { color: var(--alliance-red); font-style: italic; }
.theme-light .brand-seal__text { color: #111111; }
/* Reglas editoriales flanqueando el eyebrow del sello */
.brand-seal .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.brand-seal .eyebrow::before,
.brand-seal .eyebrow::after {
  content: '';
  display: block;
  width: 2.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
  flex-shrink: 0;
}

/* --- Problemas que resolvemos (puente GERA → sectores) ------------------- */
.problemas__card { padding: 1.5rem 1.5rem 1.4rem; }
.problemas__card h3 { font-size: 1.05rem; margin: 0 0 0.55rem; line-height: 1.35; }
.problemas__card p { font-size: 0.92rem; }
.problemas__cta { margin: 2rem 0 0; text-align: center; }
.problemas__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--alliance-red);
  text-decoration: none;
}
.problemas__cta a i { transition: transform 0.3s ease; font-size: 0.85rem; }
.problemas__cta a:hover i { transform: translateX(4px); }

/* --- Sub-bloque oscuro dolores específicos --------------------------------
   Se anida dentro de #valor (theme-light) con su propio fondo negro.
   El ruido cinematográfico lo aporta el body::after global (no se necesita .noise). */
.dolor-dark {
  position: relative;
  background: var(--alliance-black);
  padding: 48px 0;
  overflow: hidden;
}
.dolor-dark .value-tri__sub-eyebrow { color: #ffffff; }

/* =========================================================================
   DIAGNÓSTICO · Fondo técnico decorativo (cuadrícula de vigilancia + alertas)
   ========================================================================= */

/* Cuadrícula roja sutil + degradé radial de enfoque — detrás de todo el contenido */
.diagnostico__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(200,16,46,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,16,46,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
/* Degradé radial encima — oscurece bordes, centra el foco en los botones */
.diagnostico__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, #0a0a0a 90%);
  pointer-events: none;
}

/* El contenido del diagnóstico queda encima del fondo decorativo */
#problemas > .container-edit { position: relative; z-index: 1; }

/* Punto de alerta: círculo rojo + anillo pulsante estilo radar */
.diagnostico__alert {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--alliance-red);
}
.diagnostico__alert::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,16,46,0.55);
  animation: diag-alert-pulse 2s ease-out infinite;
}
@keyframes diag-alert-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(4); opacity: 0; }
}

/* Posiciones — 4 esquinas + borde derecho medio */
.diagnostico__alert:nth-child(1) { top:  9%; left:  6%; }
.diagnostico__alert:nth-child(2) { top:  9%; right: 6%; }
.diagnostico__alert:nth-child(3) { bottom: 14%; left:  6%; }
.diagnostico__alert:nth-child(4) { bottom: 14%; right: 6%; }
.diagnostico__alert:nth-child(5) { top: 50%; right: 9%; }

/* Duraciones y delays distintos — se sienten orgánicos, no sincronizados */
.diagnostico__alert:nth-child(1)::after { animation-duration: 1.8s; }
.diagnostico__alert:nth-child(2)::after { animation-duration: 2.0s; animation-delay: 0.55s; }
.diagnostico__alert:nth-child(3)::after { animation-duration: 2.5s; animation-delay: 1.1s; }
.diagnostico__alert:nth-child(4)::after { animation-duration: 2.1s; animation-delay: 1.65s; }
.diagnostico__alert:nth-child(5)::after { animation-duration: 1.9s; animation-delay: 0.8s; }

/* Reduced motion: sin pulso, anillo oculto */
@media (prefers-reduced-motion: reduce) {
  .diagnostico__alert::after { animation: none; opacity: 0; }
}

/* Mobile: cuadrícula más fina, 3 puntos (esquinas top + bottom-left) */
@media (max-width: 560px) {
  .diagnostico__bg { background-size: 30px 30px; }
  .diagnostico__alert:nth-child(4),
  .diagnostico__alert:nth-child(5) { display: none; }
}

/* =========================================================================
   DIAGNÓSTICO INTERACTIVO — valores fijos, sin clamp vw en títulos.
   Selectores con #problemas para ganar especificidad sobre herencias.
   ========================================================================= */

/* --- Encabezado --- */
#problemas .diagnostico__head {
  max-width: 100%;
  margin: 0 0 18px;
}
#problemas .diagnostico__eyebrow {
  color: var(--alliance-red);
}
#problemas .diagnostico__title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 2rem;          /* 32px fijo, sin vw */
  line-height: 1.2;
  font-weight: 600;
  color: #ffffff !important;
  margin: 0.2rem 0 8px;
  text-wrap: balance;
  text-shadow: none;
}
#problemas .diagnostico__title em {
  font-style: italic;
  color: var(--alliance-red);
}
#problemas .diagnostico__lead {
  font-size: 0.95rem;
  color: #dddddd;
  line-height: 1.45;
  margin: 0 0 6px;
}
#problemas .diagnostico__hint {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.4;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}

/* --- Grid de 6 botones (2×3 desktop, 1 col mobile) --- */
#problemas .diagnostico__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
#problemas .diagnostico__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  color: #e5e5e5;
  transition: border-color 0.25s ease, background-color 0.25s ease,
              box-shadow 0.25s ease, color 0.25s ease;
}
#problemas .diagnostico__btn-text {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.3;
}
/* Check oculto por defecto */
#problemas .diagnostico__btn-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--alliance-red);
  color: #fff;
  font-size: 8px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
  #problemas .diagnostico__btn:not(.is-active):hover {
    border-color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    transform: translateY(-1px);
  }
}
#problemas .diagnostico__btn:focus-visible {
  outline: 2px solid var(--alliance-red);
  outline-offset: 2px;
}
@keyframes diagnostico-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(200,16,46,0.45), 0 0 0 4px rgba(200,16,46,0.10); }
  60%  { box-shadow: 0 0 0 7px rgba(200,16,46,0),    0 0 0 4px rgba(200,16,46,0.10); }
  100% { box-shadow: 0 0 0 0   rgba(200,16,46,0),    0 0 0 4px rgba(200,16,46,0.10); }
}
#problemas .diagnostico__btn.is-active {
  border-color: var(--alliance-red);
  background: rgba(200,16,46,0.15);
  box-shadow: 0 0 0 4px rgba(200,16,46,0.10);
  color: #ffffff;
  animation: diagnostico-pulse 2s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #problemas .diagnostico__btn.is-active {
    animation: none;
  }
}
#problemas .diagnostico__btn.is-active .diagnostico__btn-text {
  font-weight: 500;
  font-style: normal;
}
#problemas .diagnostico__btn.is-active .diagnostico__btn-check {
  opacity: 1;
  transform: scale(1);
}

/* --- Panel split imagen + contenido --- */
#problemas .diagnostico__panel {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 20px;
  align-items: stretch;
  padding: 0;          /* sin padding en el contenedor; el contenido lo gestiona */
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--alliance-red);
  border-radius: 10px;
  overflow: hidden;    /* clip del border-radius sobre imagen flush */
}
#problemas .diagnostico__panel-img-col {
  position: relative;
}
#problemas .diagnostico__image {
  position: relative;
  width: 100%;
  height: 180px;       /* altura fija desktop */
  border-radius: 0;    /* el clip lo hace el panel padre */
  overflow: hidden;
}
#problemas .diagnostico__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease;
}
#problemas .diagnostico__img.is-swapping { opacity: 0; }
#problemas .diagnostico__image-grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(10,10,10,0) 50%, rgba(10,10,10,0.5) 100%),
              linear-gradient(0deg, rgba(10,10,10,0.4) 0%, transparent 40%);
}

/* Columna de contenido — transición de swap */
#problemas .diagnostico__panel-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 18px 18px 0;   /* padding solo en la columna de texto */
  transition: opacity 0.35s ease, transform 0.35s ease;
}
#problemas .diagnostico__panel-content.is-swapping {
  opacity: 0;
  transform: translateY(8px);
}

#problemas .diagnostico__panel-eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--alliance-red);
  margin: 0 0 8px;
  text-shadow: none;
}
#problemas .diagnostico__panel-title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.25rem;   /* fijo desktop */
  font-weight: 600;
  line-height: 1.3;
  color: #ffffff !important;
  margin: 0 0 12px;
  text-shadow: none !important;  /* quita el glow que borroneaba */
}
#problemas .diagnostico__bullets {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#problemas .diagnostico__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.5;
  text-shadow: none;
}
#problemas .diagnostico__bullets li i {
  flex: 0 0 auto;
  margin-top: 0.22em;
  color: var(--alliance-red);
  font-size: 0.82em;
}
#problemas .diagnostico__panel-close {
  color: #dddddd;
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  text-shadow: none;
}

/* --- Tablet (≤900px) --- */
@media (max-width: 900px) {
  #problemas .diagnostico__image { height: 160px; }
  #problemas .diagnostico__panel-title { font-size: 1.15rem; }
  #problemas .diagnostico__title { font-size: 1.6rem; }
}

/* --- Mobile (≤600px) --- */
@media (max-width: 600px) {
  .dolor-dark { padding: 40px 0; }
  #problemas .diagnostico__title { font-size: 1.4rem; }
  #problemas .diagnostico__lead { font-size: 0.9rem; }
  #problemas .diagnostico__grid {
    grid-template-columns: 1fr;
  }
  #problemas .diagnostico__btn-text { font-size: 0.9rem; }
  #problemas .diagnostico__panel {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* En mobile la imagen va arriba (orden natural), contenido abajo */
  #problemas .diagnostico__image { height: 200px; }
  #problemas .diagnostico__panel-content {
    padding: 16px;
  }
  #problemas .diagnostico__panel-title { font-size: 1.1rem; }
  #problemas .diagnostico__bullets li { font-size: 0.9rem; }
}

/* --- Sin animaciones --- */
@media (prefers-reduced-motion: reduce) {
  #problemas .diagnostico__img,
  #problemas .diagnostico__panel-content,
  #problemas .diagnostico__btn,
  #problemas .diagnostico__btn-check { transition: none; }
  #problemas .diagnostico__img.is-swapping { opacity: 1; }
  #problemas .diagnostico__panel-content.is-swapping {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   ACENTO HUMANO Y SOSTENIBLE · #humano
   Sección que humaniza la marca (talento, reputación, sostenibilidad).
   Hereda colores de .theme-light (h2/h3 #111, p #555).
   ========================================================= */
.humano__head {
  max-width: 840px;
  margin: 0 0 3rem;
}
.humano__title {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  margin: 0.6rem 0 1.4rem;
}
.humano__lead {
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.75;
  max-width: 72ch;
}
.humano__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.humano__pillar {
  background: #ffffff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
@media (hover: hover) {
  .humano__pillar:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(10, 10, 10, 0.35);
    border-color: rgba(200, 16, 46, 0.3);
  }
}
.humano__pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(200, 16, 46, 0.1);
  color: var(--alliance-red);
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
}
.humano__pillar-title {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 0.6rem;
}
.humano__pillar-text {
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}
.humano__cta {
  margin: 2.4rem 0 0;
}
.humano__cta .link-anim {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--alliance-red);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.humano__cta .link-anim i { transition: transform 0.3s ease; }
@media (hover: hover) {
  .humano__cta .link-anim:hover i { transform: translateX(4px); }
}
@media (max-width: 900px) {
  .humano__pillars { grid-template-columns: 1fr; }
  .humano__head { margin-bottom: 2.2rem; }
}

/* =========================================================
   ENCABEZADO PREMIUM #valor · .valor-head
   Alineado a la izquierda, línea vertical de marca,
   escala tipográfica dramática, sello SVG como marca de agua.
   ========================================================= */

/* Contenedor posicional para la línea y el sello */
.valor-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0 2rem;
  margin-bottom: 2.5rem; /* reducido: el .section-head global añadía 3.5rem extra */
  overflow: hidden; /* contiene el sello que sale por la derecha */
}

/* Línea vertical · rojo → transparente */
.valor-head__rule {
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  background: linear-gradient(to bottom, var(--alliance-red) 0%, transparent 100%);
  border-radius: 2px;
  min-height: 100%;
}

/* Bloque de texto — elimina margin-left/auto del .section-head--center
   que pudiese heredar; máx 760 para no estirarse.
   margin-bottom: 0 anula el 3.5rem global de .section-head que se sumaba
   al margin-bottom del contenedor .valor-head (doble espacio ≈112px). */
.valor-head__text.section-head {
  flex: 1;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  text-align: left;
  max-width: 760px;
}

/* Eyebrow: compacto, muy espaciado, rojo */
.valor-head__text .eyebrow {
  font-size: 12px;
  letter-spacing: 0.25em;
  margin-bottom: 1.5rem;
}

/* Título: escala dramática, tracking negativo editorial */
.valor-head__text .display-xl {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0;
}

/* Deck: gris medio, generoso margin-top */
.valor-head__text .value-tri__deck {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #555;
  line-height: 1.65;
  max-width: 520px;
  margin-top: 1.75rem;
}

/* Sello SVG · triángulo Alliance como marca de agua */
.valor-head__seal {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  opacity: 0.05;
  pointer-events: none;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .valor-head {
    gap: 0 1.2rem;
    margin-bottom: 2rem;
  }
  .valor-head__seal {
    width: 160px;
    height: 160px;
    right: -20px;
    opacity: 0.04;
  }
  .valor-head__text .display-xl {
    letter-spacing: -0.025em;
  }
}
@media (max-width: 480px) {
  .valor-head__seal { display: none; } /* en pantallas muy pequeñas no compite con el texto */
}

/* ================================================================
   #valor · COMPACTADO A UNA SOLA VISTA (scoped a #valor / #problemas)
   Reduce padding, tipografía, alturas de fila, gaps e íntegramente el
   sub-bloque de diagnóstico para que TODO el bloque de autoridad
   (encabezado + 3 filas + indicadores + diagnóstico) entre en el menor
   alto posible en laptop. Solo overrides por id/clase interna del home:
   #valor y #problemas son EXCLUSIVOS de index.html — no afecta otras
   páginas ni toca los valores originales de clases compartidas.
   ================================================================ */

/* --- Sección: recorta clearance y respiro inferior --- */
#valor { padding-top: 36px; padding-bottom: 1.25rem; }
@media (max-width: 768px) { #valor { padding-top: 28px; } }

/* --- A) Encabezado consultivo --- */
#valor .valor-head { margin-bottom: 1rem; }
#valor .valor-head__text .eyebrow { margin-bottom: 0.45rem; }
#valor .valor-head__text .display-xl {
  font-size: clamp(1.45rem, 2.8vw, 2.15rem);
  line-height: 1.05;
}
#valor .valor-head__text .value-tri__deck {
  margin-top: 0.55rem;
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  line-height: 1.4;
  max-width: 560px;
}

/* --- B) Las 3 filas de dolores (split foto + texto) --- */
#valor .value-tri__rows { gap: 0.5rem; }
#valor .value-tri__tile.value-tri__row { min-height: 98px; }
#valor .value-tri__row-img { flex: 0 0 158px; }
#valor .value-tri__row-content { padding: 9px 15px; }
#valor .value-tri__row-top { margin-bottom: 0.2rem; gap: 0.5rem; }
#valor .value-tri__row .feature-card__num { font-size: 1.1rem; }
#valor .value-tri__row-cat { font-size: 0.62rem; }
#valor .value-tri__row h3 { font-size: 0.88rem; line-height: 1.22; margin: 0 0 0.2rem; }
#valor .value-tri__row p { font-size: 0.71rem; line-height: 1.38; }
#valor .value-tri__row .feature-card__value { margin-top: 0.35rem; font-size: 0.74rem; }

/* --- C) Cinturón de indicadores (40+ / 9 / 24·7 / 360°) --- */
#valor .value-tri__belt { margin-top: 1.1rem; padding-top: 0.9rem; }
#valor .value-tri__belt .trust__num { font-size: clamp(1.55rem, 3vw, 2.25rem); }
#valor .value-tri__belt .trust__item { padding-top: 0.2rem; padding-bottom: 0.2rem; }
#valor .value-tri__belt .trust__label { font-size: 0.7rem; line-height: 1.28; }

/* --- D) Sub-bloque de diagnóstico interactivo (#problemas, banda oscura) --- */
#valor .value-tri__specifics { margin-top: 1.1rem; }
#problemas.dolor-dark { padding: 20px 0; }
#problemas .diagnostico__head { margin: 0 0 9px; }
#problemas .diagnostico__title { font-size: 1.45rem; margin: 0.1rem 0 5px; }
#problemas .diagnostico__lead { font-size: 0.84rem; line-height: 1.4; margin: 0 0 4px; }
#problemas .diagnostico__hint { font-size: 0.7rem; margin: 0 0 9px; }
#problemas .diagnostico__grid { gap: 6px; margin-bottom: 11px; }
#problemas .diagnostico__btn { padding: 7px 11px; }
#problemas .diagnostico__btn-text { font-size: 0.8rem; line-height: 1.22; }
#problemas .diagnostico__panel { gap: 13px; }
#problemas .diagnostico__image { height: 122px; }
#problemas .diagnostico__panel-content { padding: 11px 11px 11px 0; }
#problemas .diagnostico__panel-eyebrow { font-size: 0.68rem; margin: 0 0 5px; }
#problemas .diagnostico__panel-title { font-size: 1rem; line-height: 1.24; margin: 0 0 7px; }
#problemas .diagnostico__bullets { gap: 4px; margin: 0 0 5px; }
#problemas .diagnostico__bullets li { font-size: 0.79rem; line-height: 1.32; }
#problemas .diagnostico__bullets li i { margin-top: 0.2em; }

/* --- E) CTA de cierre del bloque --- */
#valor .problemas__cta { margin: 0.85rem 0 0; }

/* ================================================================
   HOME · Bloque "Qué hacemos" — variante A2 (imágenes de fondo)
   Scoped a .what-we-do y .wwd-card
   No toca clases compartidas del sitio.
   ================================================================ */

.what-we-do__head { max-width: 720px; margin-bottom: 2.5rem; }
.what-we-do__deck {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--theme-fg-muted, #3a3a3a);
  margin-top: 0.75rem;
}

.what-we-do__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}
.what-we-do__grid .wwd-card {
  flex: 0 0 230px;
}
@media (max-width: 640px) {
  .what-we-do__grid .wwd-card { flex: 1 1 100%; max-width: none; }
}

.wwd-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 380px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  isolation: isolate;
  transition: transform .38s cubic-bezier(.16,.84,.44,1);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  will-change: transform;
}
.wwd-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
  z-index: 0;
  transition: transform 500ms ease;
  will-change: transform;
}
.wwd-card > * { position: relative; z-index: 2; }
.wwd-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.40) 25%,
    rgba(0,0,0,0.70) 50%,
    rgba(0,0,0,0.90) 75%,
    rgba(0,0,0,0.96) 100%
  );
  transition: opacity 320ms ease;
}
.wwd-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(10,10,10,.28); }
.wwd-card:hover::before { transform: scale(1.05); }
.wwd-card:hover .wwd-card__overlay { opacity: 0.85; }

.wwd-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 1px;
  font-weight: 500;
}
.wwd-card__content {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem;
}
.wwd-card__content::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: -30px;
  z-index: -1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,0.35) 40%,
    rgba(0,0,0,0.65) 100%
  );
  pointer-events: none;
}
.wwd-card .wwd-card__title {
  font-family: var(--font-display, "Moderat Extended"), "Poppins", sans-serif;
  font-size: 1.15rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-weight: 500;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.6);
}
.wwd-card .wwd-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.wwd-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #e01a3c;
  font-weight: 500;
  transition: gap 200ms ease;
}
.wwd-card:hover .wwd-card__cta { gap: 0.6rem; }

.what-we-do__footnote {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: var(--theme-fg-subtle, #6b6b6b);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .wwd-card, .wwd-card::before, .wwd-card__overlay, .wwd-card__cta {
    transition: none;
  }
  .wwd-card:hover { transform: none; }
  .wwd-card:hover::before { transform: none; }
}

/* ================================================================
   HOME · Escala compacta para laptop (scoped a body.page-home)
   Overrides de escala aislados al home (index). No tocan las
   clases originales — solo las sobrescriben cuando body.page-home
   está presente. No aplica a otras páginas.
   ================================================================ */

/* --- Fix de escala del bloque "Qué hacemos" — solo en index (page-home)
   Compactado para que TODO el bloque (encabezado + 4 cards + footnote)
   entre en una sola vista de laptop. --- */
body.page-home .what-we-do.section-pad {
  padding-block: 2.5rem;
}
body.page-home .what-we-do__head {
  max-width: 720px;
  margin-bottom: 1.25rem;
}
body.page-home .what-we-do .display-xl {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
body.page-home .what-we-do__deck {
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: 0.5rem;
  max-width: 620px;
}
body.page-home .what-we-do__footnote {
  margin-top: 1.25rem;
  font-size: 0.85rem;
}

/* Cards: bajar el min-height (380px era el mayor consumidor de alto)
   y compactar su contenido interno para entrar en una vista. */
body.page-home .what-we-do .wwd-card {
  min-height: 240px;
}
body.page-home .what-we-do .wwd-card__content {
  padding: 1rem 1rem 1rem;
}
body.page-home .what-we-do .wwd-card .wwd-card__title {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
body.page-home .what-we-do .wwd-card .wwd-card__desc {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

@media (min-width: 1440px) {
  body.page-home .what-we-do.section-pad { padding-block: 3rem; }
  body.page-home .what-we-do .wwd-card { min-height: 260px; }
}

@media (max-width: 640px) {
  body.page-home .what-we-do.section-pad { padding-block: 2rem; }
  body.page-home .what-we-do__head { margin-bottom: 1rem; }
  body.page-home .what-we-do .wwd-card { min-height: 200px; }
}

/* --- Grid "Qué hacemos": 7 unidades ---
   .what-we-do__grid usa flexbox (no CSS Grid) porque justify-content en
   flexbox centra cada línea de forma independiente; en Grid las columnas 1fr
   siempre llenan el 100% y una fila incompleta (06/07) queda pegada a la
   izquierda. Ancho fijo (flex: 0 0 230px, sin grow) para que todas las cards
   midan lo mismo sin importar cuántas caigan en su fila — si hubiera grow,
   la fila de 2 (06/07) se estiraría más que las filas completas. En móvil
   (<640px) cada card ocupa el 100% del ancho. --- */

/* --- Fix del eyebrow "Qué hacemos" sobre fondo claro ---
   !important necesario para ganar a la regla base (0,4,1)
   .section-head p:not(.lead):not([class*="__"]):not([style*="color"])
   { color: rgba(255,255,255,0.78) } — mismo patrón que ya usa el sitio
   en .theme-light .section-head p.eyebrow. --- */
body.page-home .what-we-do .eyebrow {
  color: #c8102e !important;
  font-weight: 500;
}

/* ================================================================
   HOME · Rediseño value-tri rows — Split interactivo con foto
   Scoped a body.page-home .value-tri__rows.
   Foto dinámica izquierda + lista editorial derecha.
   El contenedor .value-tri__rows se prefija con #valor para GANAR
   a la regla legacy de compactación #valor .value-tri__rows{gap:0.5rem}
   (especificidad de ID, línea ~11960) que sigue matcheando el
   contenedor tras el rediseño. El resto de reglas legacy sobre
   .value-tri__row/-img/-content/-top/feature-card__num/-cat quedan
   huérfanas (el nuevo DOM ya no usa esas clases) — no requieren
   prefijo especial.
   ================================================================ */

body.page-home #valor .value-tri__rows {
  display: grid;
  grid-template-columns: 0.95fr 1fr;
  gap: 2rem;
  align-items: stretch;
  margin: 2rem 0 2.5rem;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  border-top: none;
}

/* REGIÓN FOTO (izquierda) */
body.page-home .vtri-media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  min-height: 340px;
  background: #1a1a1a;
  isolation: isolate;
}
body.page-home .vtri-media__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 380ms ease;
  will-change: opacity;
}
body.page-home .vtri-media__img.is-visible {
  opacity: 1;
}
/* Overlay sutil sobre la foto para dar unidad visual con el resto */
body.page-home .vtri-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.25));
  pointer-events: none;
}

/* REGIÓN LISTA (derecha) */
body.page-home .vtri-list {
  display: flex;
  flex-direction: column;
}
body.page-home .vtri-list__item {
  display: block;
  padding: 14px 4px 14px 0;
  border-top: 0.5px solid rgba(10,10,10,0.15);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background-color 220ms ease, border-color 220ms ease, padding 220ms ease;
  border-left: 3px solid transparent;
  border-radius: 0;
}
body.page-home .vtri-list__item:last-child {
  border-bottom: 0.5px solid rgba(10,10,10,0.15);
}

/* Estado ACTIVO (anclado o hover-preview) */
body.page-home .vtri-list__item.is-active,
body.page-home .vtri-list__item.is-preview {
  background: #fafafa;
  border-left: 3px solid #c8102e;
  padding-left: 15px;
  padding-right: 16px;
  border-radius: 0 6px 6px 0;
}

/* Fila superior: número + categoría + CTA a la derecha */
body.page-home .vtri-list__top {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 5px;
}
body.page-home .vtri-list__num {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.15rem;
  color: #c8102e;
  font-weight: 500;
  line-height: 1;
  min-width: 1.2em;
}
body.page-home .vtri-list__item.is-active .vtri-list__num,
body.page-home .vtri-list__item.is-preview .vtri-list__num {
  font-size: 1.35rem;
}
body.page-home .vtri-list__cat {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: #6b6b6b;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 200ms ease;
}
body.page-home .vtri-list__item.is-active .vtri-list__cat,
body.page-home .vtri-list__item.is-preview .vtri-list__cat {
  color: #0a0a0a;
}
body.page-home .vtri-list__cta {
  margin-left: auto;
  font-size: 0.72rem;
  color: #c8102e;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 4px 0;
  border-radius: 4px;
  transition: background-color 200ms ease, color 200ms ease, padding 200ms ease;
}
body.page-home .vtri-list__item.is-active .vtri-list__cta,
body.page-home .vtri-list__item.is-preview .vtri-list__cta {
  background: #c8102e;
  color: #ffffff;
  padding: 4px 10px;
}
body.page-home .vtri-list__cta i { font-size: 0.65rem; }

/* Quote */
body.page-home .vtri-list__quote {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: #3a3a3a;
  line-height: 1.3;
  margin: 0 0 4px;
  font-weight: 500;
  transition: color 220ms ease, font-size 220ms ease;
}
body.page-home .vtri-list__item.is-active .vtri-list__quote,
body.page-home .vtri-list__item.is-preview .vtri-list__quote {
  color: #0a0a0a;
  font-size: 1rem;
}
body.page-home .value-tri__quote-mark {
  color: #c8102e;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 1em;
}

/* Descripción */
body.page-home .vtri-list__desc {
  font-size: 0.78rem;
  color: #8a8a8a;
  line-height: 1.55;
  margin: 0;
  transition: color 220ms ease;
}
body.page-home .vtri-list__item.is-active .vtri-list__desc,
body.page-home .vtri-list__item.is-preview .vtri-list__desc {
  color: #6b6b6b;
}

/* DOTS (solo móvil) */
body.page-home .vtri-dots {
  display: none;
}

/* RESPONSIVE MÓVIL */
@media (max-width: 900px) {
  body.page-home #valor .value-tri__rows {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 100%;
  }
  body.page-home .vtri-media {
    min-height: 220px;
    grid-row: 1;
  }
  body.page-home .vtri-list {
    grid-row: 2;
    position: relative;
    overflow: hidden;
  }
  /* En móvil, solo un ítem visible a la vez (el activo) */
  body.page-home .vtri-list__item {
    display: none;
    border-top: none;
    border-bottom: none;
    padding: 8px 12px 16px;
  }
  body.page-home .vtri-list__item.is-active {
    display: block;
    background: #fafafa;
    border-left: 3px solid #c8102e;
    border-radius: 0 6px 6px 0;
  }
  body.page-home .vtri-list__item:last-child {
    border-bottom: none;
  }
  /* Dots visibles en móvil */
  body.page-home .vtri-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 0 4px;
    grid-row: 3;
  }
  body.page-home .vtri-dots__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(10,10,10,0.20);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 200ms ease, width 200ms ease;
  }
  body.page-home .vtri-dots__dot.is-active {
    background: #c8102e;
    width: 20px;
    border-radius: 4px;
  }
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  body.page-home .vtri-media__img,
  body.page-home .vtri-list__item,
  body.page-home .vtri-list__cta,
  body.page-home .vtri-list__quote,
  body.page-home .vtri-list__desc,
  body.page-home .vtri-list__cat {
    transition: none;
  }
}

/* ================================================================
   HOME · Escala compacta del split value-tri (foto + lista)
   Reduce la altura del bloque foto+lista para que entre en una
   sola vista. El min-height de .vtri-media (340px) era el mayor
   consumidor de alto; se compacta junto con paddings/fuentes de
   la lista. Scoped a body.page-home.
   ================================================================ */
body.page-home #valor .value-tri__rows {
  gap: 1.25rem;
  margin: 1.1rem 0 1.5rem;
}
body.page-home .vtri-media {
  min-height: 230px;
}
body.page-home .vtri-list__item {
  padding: 8px 4px 8px 0;
}
body.page-home .vtri-list__item.is-active,
body.page-home .vtri-list__item.is-preview {
  padding-left: 13px;
  padding-right: 14px;
}
body.page-home .vtri-list__top {
  margin-bottom: 3px;
  gap: 10px;
}
body.page-home .vtri-list__num {
  font-size: 1rem;
}
body.page-home .vtri-list__item.is-active .vtri-list__num,
body.page-home .vtri-list__item.is-preview .vtri-list__num {
  font-size: 1.15rem;
}
body.page-home .vtri-list__quote {
  font-size: 0.82rem;
  line-height: 1.25;
  margin-bottom: 2px;
}
body.page-home .vtri-list__item.is-active .vtri-list__quote,
body.page-home .vtri-list__item.is-preview .vtri-list__quote {
  font-size: 0.86rem;
}
body.page-home .vtri-list__desc {
  font-size: 0.72rem;
  line-height: 1.42;
}

@media (min-width: 1440px) {
  body.page-home .vtri-media { min-height: 260px; }
}

@media (max-width: 900px) {
  body.page-home .vtri-media { min-height: 190px; }
  body.page-home .vtri-list__item.is-active { padding: 7px 12px 12px; }
}

/* ================================================================
   HOME · Rediseño diagnóstico interactivo (#problemas)
   Scoped a body.page-home #problemas.
   Tabs de categorías + dolores agrupados + panel horizontal.
   One-view: cabe en 1440x900 sin scroll interno.
   ================================================================ */

body.page-home #problemas {
  padding-block: 2.5rem;
}
body.page-home .problemas__container {
  max-width: 1080px;
  margin: 0 auto;
}

/* ENCABEZADO */
body.page-home .prob-head {
  max-width: 620px;
  margin-bottom: 1.5rem;
}
body.page-home .prob-head__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #e01a3c;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.6rem;
}
body.page-home .prob-head__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-weight: 500;
}
body.page-home .prob-head__title em {
  font-style: italic;
  color: #e01a3c;
}
body.page-home .prob-head__deck {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.68);
  line-height: 1.55;
  margin: 0;
}

/* TABS */
body.page-home .prob-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 0.5px solid rgba(255,255,255,0.12);
  margin-bottom: 1.25rem;
}
body.page-home .prob-tabs__tab {
  background: transparent;
  border: 0;
  padding: 10px 16px 12px;
  cursor: pointer;
  color: rgba(255,255,255,0.55);
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 220ms ease, border-color 220ms ease;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
body.page-home .prob-tabs__tab:hover {
  color: rgba(255,255,255,0.85);
}
body.page-home .prob-tabs__tab.is-active {
  color: #e01a3c;
  border-bottom-color: #e01a3c;
}
body.page-home .prob-tabs__num {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 0.95rem;
}

/* GRID DE OPCIONES */
body.page-home .prob-options {
  position: relative;
  margin-bottom: 1.25rem;
}
body.page-home .prob-options__group {
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
body.page-home .prob-options__group.is-active {
  display: grid;
  animation: probFadeIn 240ms ease;
}
@keyframes probFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

body.page-home .prob-options__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background-color 220ms ease, border-color 220ms ease;
}
body.page-home .prob-options__item:hover {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.28);
}
body.page-home .prob-options__item.is-active {
  background: rgba(224,26,60,0.08);
  border-color: #e01a3c;
  color: #ffffff;
}
body.page-home .prob-options__check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 220ms ease, border-color 220ms ease;
}
body.page-home .prob-options__check i {
  color: #fff;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 200ms ease;
}
body.page-home .prob-options__item.is-active .prob-options__check {
  background: #e01a3c;
  border-color: #e01a3c;
}
body.page-home .prob-options__item.is-active .prob-options__check i {
  opacity: 1;
}
body.page-home .prob-options__text {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.35;
}

/* PANEL DE SOLUCIÓN — HORIZONTAL para caber one-view */
body.page-home .prob-panel {
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  min-height: 200px;
}
body.page-home .prob-panel__slot {
  display: none;
  grid-template-columns: 240px 1fr;
  gap: 0;
  min-height: 200px;
}
body.page-home .prob-panel__slot.is-active {
  display: grid;
  animation: probFadeIn 260ms ease;
}
body.page-home .prob-panel__media {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
}
body.page-home .prob-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.page-home .prob-panel__content {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.page-home .prob-panel__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #e01a3c;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.5rem;
}
body.page-home .prob-panel__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0 0 0.75rem;
  color: #ffffff;
  font-weight: 500;
}
body.page-home .prob-panel__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
body.page-home .prob-panel__bullets li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.5;
}
body.page-home .prob-panel__bullets i {
  color: #e01a3c;
  font-size: 0.7rem;
  flex-shrink: 0;
}
body.page-home .prob-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #c8102e;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  align-self: flex-start;
  transition: background-color 200ms ease, gap 200ms ease;
}
body.page-home .prob-panel__cta:hover {
  background: #a80c25;
  gap: 8px;
}
body.page-home .prob-panel__cta i {
  font-size: 0.65rem;
}

/* FOOTNOTE */
body.page-home .prob-footnote {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  margin: 1rem 0 0;
  letter-spacing: 0.3px;
}

/* RESPONSIVE MÓVIL */
@media (max-width: 900px) {
  body.page-home #problemas { padding-block: 2rem; }
  body.page-home .prob-options__group {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body.page-home .prob-panel__slot {
    grid-template-columns: 1fr;
    grid-template-rows: 160px auto;
  }
  body.page-home .prob-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  body.page-home .prob-tabs::-webkit-scrollbar { display: none; }
  body.page-home .prob-tabs__tab { white-space: nowrap; }
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  body.page-home .prob-options__group,
  body.page-home .prob-panel__slot {
    animation: none;
  }
  body.page-home .prob-tabs__tab,
  body.page-home .prob-options__item,
  body.page-home .prob-options__check,
  body.page-home .prob-panel__cta {
    transition: none;
  }
}

/* ================================================================
   HOME · #problemas en gris suave (mismo tono que "Qué hacemos", #f4f4f4)
   Scoped a body.page-home #problemas. Invierte texto/acento: de
   blanco + rojo-brillante sobre negro, a oscuro + rojo-estándar
   sobre gris claro (mismo bi-tono usado en el resto del sitio:
   #e01a3c en dark, #c8102e en light/gray).
   ================================================================ */

body.page-home #problemas.dolor-dark {
  background: #f4f4f4;
}
/* La viñeta radial oscurecía bordes para fondo negro; en gris se
   suaviza a un tinte casi imperceptible en vez de removerla del todo. */
body.page-home #problemas .diagnostico__bg::after {
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,10,10,0.05) 100%);
}

body.page-home .prob-head__eyebrow {
  color: #c8102e;
}
body.page-home .prob-head__title {
  color: #0a0a0a;
}
body.page-home .prob-head__title em {
  color: #c8102e;
}
body.page-home .prob-head__deck {
  color: rgba(10,10,10,0.62);
}

body.page-home .prob-tabs {
  border-bottom-color: rgba(10,10,10,0.14);
}
body.page-home .prob-tabs__tab {
  color: rgba(10,10,10,0.55);
}
body.page-home .prob-tabs__tab:hover {
  color: rgba(10,10,10,0.85);
}
body.page-home .prob-tabs__tab.is-active {
  color: #c8102e;
  border-bottom-color: #c8102e;
}

body.page-home .prob-options__item {
  border-color: rgba(10,10,10,0.14);
  color: rgba(10,10,10,0.78);
}
body.page-home .prob-options__item:hover {
  background: rgba(10,10,10,0.03);
  border-color: rgba(10,10,10,0.28);
}
body.page-home .prob-options__item.is-active {
  background: rgba(200,16,46,0.07);
  border-color: #c8102e;
  color: #0a0a0a;
}
body.page-home .prob-options__check {
  border-color: rgba(10,10,10,0.3);
}
body.page-home .prob-options__item.is-active .prob-options__check {
  background: #c8102e;
  border-color: #c8102e;
}

body.page-home .prob-panel {
  background: #ffffff;
  border-color: rgba(10,10,10,0.08);
}
body.page-home .prob-panel__media {
  background: #e5e5e5;
}
body.page-home .prob-panel__eyebrow {
  color: #c8102e;
}
body.page-home .prob-panel__title {
  color: #0a0a0a;
}
body.page-home .prob-panel__bullets li {
  color: rgba(10,10,10,0.72);
}
body.page-home .prob-panel__bullets i {
  color: #c8102e;
}

body.page-home .prob-footnote {
  color: rgba(10,10,10,0.45);
}

/* ================================================================
   HOME · #promesa compactado a una sola vista (scoped a body.page-home)
   #promesa ya no es la primera sección tras el reordenamiento, no
   necesita el clearance completo de navbar. Se reduce padding,
   tipografía y alturas internas del acordeón/imagen/footer para que
   el bloque completo entre en una vista de laptop.
   ================================================================ */

body.page-home #promesa {
  padding: 40px 0 1.25rem;
}

/* Encabezado */
body.page-home .promesa__head {
  margin: 0 auto 0.9rem;
}
body.page-home .promesa__eyebrow {
  font-size: 13px;
  margin-bottom: 0.4rem;
}
body.page-home .promesa__title {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  margin-bottom: 0.4rem;
}
body.page-home .promesa__sub {
  font-size: clamp(0.8rem, 0.95vw, 0.92rem);
  line-height: 1.5;
}

/* Split imagen + acordeón */
body.page-home .promesa__body {
  gap: 1.25rem;
  margin-bottom: 0.9rem;
}
body.page-home .promesa__img-wrap {
  aspect-ratio: 16 / 8;
}
body.page-home .promesa__img-col {
  top: calc(var(--nav-h) + 0.5rem);
}
body.page-home .promesa__live {
  bottom: 0.85rem;
  left: 0.85rem;
}

/* Acordeón */
body.page-home .promesa__item {
  margin-bottom: 0.15rem;
}
body.page-home .promesa__trigger {
  padding: 0.5rem 0.9rem;
  gap: 0.7rem;
}
body.page-home .promesa__step-title {
  font-size: clamp(0.8rem, 0.92vw, 0.9rem);
}
body.page-home .promesa__num {
  font-size: 11px;
  min-width: 1.8em;
}
body.page-home .promesa__item.is-open .promesa__detail {
  max-height: 170px;
}
body.page-home .promesa__detail-text {
  font-size: 11.5px;
  line-height: 1.45;
  padding-bottom: 0.3rem;
}
body.page-home .promesa__checks {
  gap: 0.2rem;
  padding-bottom: 0.55rem;
}
body.page-home .promesa__checks li {
  font-size: 12px;
}

/* Pie de sección */
body.page-home .promesa__footer {
  padding-top: 1.1rem;
  gap: 0.85rem;
}
body.page-home .promesa__gera-tag {
  font-size: 9px;
}
body.page-home .promesa__ctas .btn-primary {
  padding: 0.55rem 1.2rem;
  font-size: 0.75rem;
}
body.page-home .promesa__btn-outline-white,
body.page-home .promesa__btn-outline-red {
  padding: 0.5rem 1.1rem;
  font-size: 11.5px;
}

@media (max-width: 900px) {
  body.page-home #promesa { padding: 32px 0 1rem; }
  body.page-home .promesa__item.is-open .promesa__detail { max-height: 220px; }
}

/* ================================================================
   HOME · #humano compactado a una sola vista (scoped a body.page-home)
   #humano no es la primera sección, no necesita el clearance completo
   de navbar. Se reduce padding, tipografía y las 3 cards de pilares
   para que el bloque completo entre en una vista de laptop.
   ================================================================ */

body.page-home #humano.section-pad {
  padding: 40px 0 1.25rem;
}

body.page-home #humano .humano__head {
  margin: 0 0 1rem;
}
body.page-home #humano .eyebrow {
  font-size: 13px;
  margin-bottom: 0.4rem;
}
body.page-home .humano__title {
  font-size: clamp(1.35rem, 2.3vw, 1.9rem);
  margin: 0.4rem 0 0.6rem;
}
body.page-home .humano__lead {
  font-size: clamp(0.82rem, 0.95vw, 0.92rem);
  line-height: 1.5;
  max-width: 68ch;
}

body.page-home .humano__pillars {
  gap: 1rem;
}
body.page-home .humano__pillar {
  padding: 1.25rem 1.25rem;
}
body.page-home .humano__pillar-icon {
  width: 40px;
  height: 40px;
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}
body.page-home .humano__pillar-title {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
body.page-home .humano__pillar-text {
  font-size: 0.85rem;
  line-height: 1.5;
}

body.page-home .humano__cta {
  margin-top: 1rem;
}

/* ================================================================
   HOME · Rediseño sección .humano — con imágenes (variante A)
   Scoped a body.page-home .humano.
   Foto lateral en encabezado + cards con thumbnail arriba.
   El padding se prefija con #humano.section-pad para GANAR a la
   regla legacy body.page-home #humano.section-pad (compactación
   anterior, especificidad de ID) que sigue matcheando el wrapper
   (el <section id="humano"> se conserva tal cual). El resto de
   reglas legacy (.humano__head/__title/__lead/__pillar*) quedan
   huérfanas: el nuevo HTML ya no usa esas clases.
   ================================================================ */

body.page-home #humano.section-pad {
  padding-block: 3.5rem;
}

/* ENCABEZADO CON FOTO LATERAL */
body.page-home .hum-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 2.5rem;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}
body.page-home .hum-head__text {
  min-width: 0;
}
body.page-home .hum-head__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #c8102e;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
body.page-home .hum-head__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #0a0a0a;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body.page-home .hum-head__title em {
  font-style: italic;
  color: #c8102e;
}
body.page-home .hum-head__deck {
  font-size: 0.92rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 0;
}
body.page-home .hum-head__media {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 380px;
}
body.page-home .hum-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* GRID DE 3 CARDS */
body.page-home .hum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-home .hum-card {
  background: #ffffff;
  border: 0.5px solid rgba(10,10,10,0.10);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
  will-change: transform;
}
body.page-home .hum-card:hover {
  transform: translateY(-3px);
  border-color: rgba(10,10,10,0.20);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
body.page-home .hum-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
}
body.page-home .hum-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms ease;
  will-change: transform;
}
body.page-home .hum-card:hover .hum-card__media img {
  transform: scale(1.04);
}
body.page-home .hum-card__body {
  padding: 1.15rem 1.15rem 1.25rem;
}
body.page-home .hum-card__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: #0a0a0a;
  font-weight: 500;
}
body.page-home .hum-card__desc {
  font-size: 0.84rem;
  color: #6b6b6b;
  line-height: 1.55;
  margin: 0;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  body.page-home #humano.section-pad { padding-block: 2.5rem; }
  body.page-home .hum-head {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  body.page-home .hum-head__media {
    aspect-ratio: 16 / 9;
    max-height: 240px;
    order: -1;
  }
  body.page-home .hum-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}
@media (min-width: 640px) and (max-width: 900px) {
  body.page-home .hum-grid { grid-template-columns: repeat(2, 1fr); }
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  body.page-home .hum-card,
  body.page-home .hum-card__media img {
    transition: none;
  }
  body.page-home .hum-card:hover {
    transform: none;
  }
  body.page-home .hum-card:hover .hum-card__media img {
    transform: none;
  }
}

/* ================================================================
   HOME · Imágenes de "Nuestra promesa" más brillantes
   Scoped a body.page-home. El overlay original oscurecía bastante
   la foto (40% negro → 18% rojo); se reduce para que las 4 fotos
   (entendemos/diseñamos/respondemos/mejoramos) se vean más claras,
   manteniendo un tinte sutil para legibilidad del indicador CCI.
   ================================================================ */
body.page-home .promesa__img-overlay {
  background: linear-gradient(120deg, rgba(10,10,10,0.15) 0%, rgba(200,16,46,0.08) 100%);
}
body.page-home .promesa__img img {
  filter: brightness(1.12);
}

/* ================================================================
   HOME · Imagen de la calculadora (visual "control" = intro/paso 1-2)
   Scoped a body.page-home (exclusivo de index.html) para no afectar
   el mismo componente .calc-card__visual-img en calculadora.html.
   El overlay y el caption ya son agnósticos a la foto de fondo
   (background propio + text-shadow), no requieren ajuste.
   ================================================================ */
body.page-home .calc-card__visual-img[data-img="control"] {
  background-image: url('../assets/img/calculadorahome/fotocalculadora.png');
}

/* CALCULADORA (página propia) · misma foto real que usa el home, para
   consistencia entre ambas calculadoras. Scoped a .calc-dark-bg (exclusivo
   de calculadora.html, no afecta el mismo componente en index.html). */
.calc-dark-bg .calc-card__visual-img[data-img="control"] {
  background-image: url('../assets/img/calculadorahome/fotocalculadora.png');
}

/* ================================================================
   HOME · Cinturón de confianza reubicado debajo del hero (#confianza-strip)
   No es la primera sección visible (el hero ya cubre el viewport),
   por eso no usa .section-pad (evita el clearance de navbar). El
   cinturón (.value-tri__belt) pierde su margen/borde superior porque
   aquí ya no tiene contenido de #valor encima.
   ================================================================ */
#confianza-strip {
  padding: 2.5rem 0 2.75rem;
}
#confianza-strip .value-tri__belt {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
/* Frase final centrada, acompaña el cinturón de indicadores en tono editorial */
.confianza-strip__tagline {
  margin: 2rem auto 0;
  max-width: 46ch;
  text-align: center;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.5;
  font-weight: 500;
  color: #333333;
}
.confianza-strip__tagline em {
  font-style: italic;
  color: var(--alliance-red);
}

/* ================================================================
   HOME · Ajuste .value-tri__belt — armonía de 4 contadores
   Scoped a body.page-home #confianza-strip .value-tri__belt (el
   prefijo #confianza-strip es necesario para ganar por especificidad
   a las reglas base .trust__grid/.trust__item/.trust__num/.trust__label
   y a los overrides .theme-light .trust__* — todos de especificidad
   0,1,0 / 0,2,0, sin ID). No toca .value-tri__rows, #problemas ni
   ninguna otra sección: value-tri__belt es exclusivo de este bloque.
   ================================================================ */

/* 1) Grid de 4 columnas exactamente iguales, centrado */
body.page-home #confianza-strip .value-tri__belt {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 640px) {
  body.page-home #confianza-strip .value-tri__belt {
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
}

/* 2) Cada contador: columna propia, centrado */
body.page-home #confianza-strip .trust__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  padding: 0;
  gap: 0;
}
/* Anula el divider heredado (pensado para fondo oscuro / layout previo) */
body.page-home #confianza-strip .trust__item::before,
body.page-home #confianza-strip .trust__item + .trust__item::before {
  content: none;
}
@media (max-width: 768px) {
  body.page-home #confianza-strip .trust__item { border-left: none; padding-left: 0; }
}

/* 3) Números grandes: mismo tamaño, peso y color entre los 4 */
body.page-home #confianza-strip .trust__num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1;
  font-weight: 600;
  color: #c8102e;
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

/* 4) Descripciones: tamaño, tracking y color uniformes, wrap consistente */
body.page-home #confianza-strip .trust__label {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.4;
  color: #6b6b6b;
  max-width: 190px;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home #confianza-strip .trust__num {
    transition: none;
  }
}

/* ================================================================
   HOME · Ajustes .promesa — legibilidad y jerarquía CTAs
   Scoped a body.page-home .promesa. .promesa__* es exclusivo de
   index.html, pero se mantiene el prefijo body.page-home .promesa
   para garantizar especificidad sobre las reglas base (0,1,0) sin
   tocarlas directamente.
   ================================================================ */

/* --- Ajuste 1 + 2: acordeón — tamaño y color (gris → blanco) --- */
body.page-home .promesa .promesa__detail-text {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.95);
}
body.page-home .promesa .promesa__checks li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}
body.page-home .promesa .promesa__step-title {
  font-size: clamp(1rem, 1.15vw, 1.1rem);
}
/* Pasos inactivos (cerrados): blanco tenue en vez de gris apagado */
body.page-home .promesa .promesa__trigger {
  color: rgba(255, 255, 255, 0.7);
}
body.page-home .promesa .promesa__item.is-open .promesa__trigger {
  color: #ffffff;
}

/* --- Ajuste 3: CTAs secundarios — borde blanco sólido + hover invertido --- */
body.page-home .promesa .promesa__btn-outline-white,
body.page-home .promesa .promesa__btn-outline-red {
  padding: 0.95rem 1.6rem;
  background: transparent;
  border: 1px solid #ffffff;
  color: #ffffff;
  font-weight: 500;
  transition: background-color 220ms ease, color 220ms ease;
}
body.page-home .promesa .promesa__btn-outline-white:hover,
body.page-home .promesa .promesa__btn-outline-red:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  body.page-home .promesa .promesa__btn-outline-white,
  body.page-home .promesa .promesa__btn-outline-red {
    transition: none;
  }
}

/* ================================================================
   CALCULADORA · Nivel de exposición al riesgo (reemplaza el output
   monetario). Selectores globales (NO body.page-home): este bloque
   se usa tanto en index.html como en calculadora.html, que comparten
   js/calculator.js y no comparten la clase body.page-home.
   Sigue el mismo patrón de 3 capas ya usado por el resto de
   .calc-result__*: regla base, .calc-card__pane (tamaño compacto
   real) y .theme-light .calc-card__pane (color sobre fondo claro).
   ================================================================ */

/* Título del nivel — reutiliza .calc-ring__phrase, ahora con más peso */
.calc-ring__info .calc-ring__phrase {
  font-style: normal;
  font-weight: 600;
}
.theme-light .calc-card__pane .calc-ring__info .calc-ring__phrase {
  color: #111111;
}

/* Descripción larga del nivel (copy exacto por nivel) */
.calc-level-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin-top: 1rem;
}
.calc-card__pane .calc-level-desc {
  font-size: 0.66rem;
  line-height: 1.5;
  margin-top: 0.55rem;
}
.theme-light .calc-card__pane .calc-level-desc { color: #444444; }

/* Desglose por área: 3 tarjetas */
.calc-area-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.75rem;
}
@media (max-width: 640px) {
  .calc-area-grid { grid-template-columns: 1fr; }
}
.calc-card__pane .calc-area-grid { gap: 0.4rem; margin-top: 0.5rem; }

.calc-area-card {
  border-radius: 8px;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(10,10,10,0.08);
  background: #f8f9fa;
}
.calc-area-card__label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  margin: 0 0 0.35rem;
}
.calc-card__pane .calc-area-card__label { font-size: 0.6rem; margin-bottom: 0.28rem; }
.calc-area-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3em;
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  color: var(--alliance-red);
}
.calc-area-card__status {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
  background: rgba(10,10,10,0.06);
  color: #555;
}
.calc-card__pane .calc-area-card__status { font-size: 0.52rem; padding: 0.12rem 0.42rem; margin-bottom: 0.3rem; }
.calc-area-card__desc {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #555;
  margin: 0;
}
.calc-card__pane .calc-area-card__desc { font-size: 0.6rem; line-height: 1.4; }

/* Estado por área: mismo esquema de color que los niveles (bajo/medio/alto) */
.calc-area-card[data-status="controlado"] {
  background: rgba(74,222,128,0.07);
  border-color: rgba(74,222,128,0.3);
}
.calc-area-card[data-status="controlado"] .calc-area-card__status {
  background: rgba(74,222,128,0.16);
  color: #16a34a;
}
.calc-area-card[data-status="con-brechas"] {
  background: rgba(250,204,21,0.08);
  border-color: rgba(250,204,21,0.35);
}
.calc-area-card[data-status="con-brechas"] .calc-area-card__status {
  background: rgba(250,204,21,0.18);
  color: #a16207;
}
.calc-area-card[data-status="critico"] {
  background: rgba(200,16,46,0.06);
  border-color: rgba(200,16,46,0.35);
}
.calc-area-card[data-status="critico"] .calc-area-card__status {
  background: rgba(200,16,46,0.14);
  color: var(--alliance-red);
}

/* Botón de reinicio — deprioritizado frente a los 2 CTAs principales */
.calc-result__restart {
  display: block;
  margin: 0.75rem auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.78rem;
  color: #888;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 200ms ease;
}
.calc-result__restart:hover { color: var(--alliance-red); }
.calc-card__pane .calc-result__restart { font-size: 0.62rem; margin-top: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .calc-result__restart { transition: none; }
}

/* ================================================================
   NOSOTROS · Rediseño completo con marco estratégico oficial 2026-2030
   Scoped a body.page-nosotros y clases .nos-*
   ================================================================ */

/* --- SECCIÓN 1 · Hero (lead) --- */
body.page-nosotros .page-hero__lead {
  max-width: 46ch;
  font-size: clamp(1rem, 1.05vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin-top: 1.3rem;
}

/* --- SECCIÓN 2 · Marco filosófico --- */
/* Reduce el padding-top: .section-pad usa calc(var(--nav-h)+0.5rem) (~100px)
   pensado para heroes bajo el navbar fijo. Marco va a mitad de página y ya
   tiene un section-divider arriba, así que ese clearance sobra. */
body.page-nosotros .nos-marco.section-pad {
  padding-top: 2.5rem;
}
body.page-nosotros .nos-marco__head {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
body.page-nosotros .nos-marco__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-nosotros .nos-marco__card {
  padding: 2rem;
  background: #ffffff;
  border-radius: 12px;
  border: 0.5px solid rgba(10,10,10,0.10);
  border-left: 3px solid #c8102e;
}
body.page-nosotros .nos-marco__label {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #c8102e;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1rem;
}
body.page-nosotros .nos-marco__title {
  /* Alineado a --fs-h3 (1.22rem), el token del sitio para titulares
     de tipo "statement" dentro de una card (mismo rol que .prose h3). */
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: var(--fs-h3, 1.22rem);
  line-height: 1.25;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
body.page-nosotros .nos-marco__body {
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.65;
  margin: 0;
}

/* --- SECCIÓN 3 · Promesa --- */
body.page-nosotros .nos-promesa__inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
body.page-nosotros .nos-promesa__title {
  color: #ffffff;
  margin: 0.5rem 0 1.25rem;
}
body.page-nosotros .nos-promesa__title em {
  color: #e01a3c;
  font-style: italic;
}
body.page-nosotros .nos-promesa__deck {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin: 0;
}

/* --- SECCIÓN 5 · Pilares --- */
/* Reduce el padding-top (mismo motivo que las demás secciones intermedias):
   el clearance del navbar de .section-pad sobra a mitad de página. */
body.page-nosotros .nos-pilares.section-pad {
  padding-top: 2.5rem;
}
body.page-nosotros .nos-pilares__head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
body.page-nosotros .nos-pilares__deck {
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 1rem 0 0;
}
body.page-nosotros .nos-pilares__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-nosotros .nos-pilar {
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  border: 0.5px solid rgba(10,10,10,0.10);
  transition: transform 260ms ease, border-color 260ms ease;
}
body.page-nosotros .nos-pilar:hover {
  transform: translateY(-3px);
  border-color: #c8102e;
}
body.page-nosotros .nos-pilar__num {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 2.25rem;
  color: #c8102e;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 1rem;
}
body.page-nosotros .nos-pilar__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.2rem;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 0.5rem;
}
body.page-nosotros .nos-pilar__caption {
  font-size: 0.8rem;
  color: #6b6b6b;
  line-height: 1.5;
  margin: 0 0 1rem;
  font-style: italic;
}
body.page-nosotros .nos-pilar__manifesto {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 0.95rem;
  color: #0a0a0a;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
  padding-top: 1rem;
  border-top: 0.5px solid rgba(10,10,10,0.12);
}

/* --- SECCIÓN 6 · Valores --- */
/* Reduce el padding-top (mismo motivo que las demás secciones intermedias). */
body.page-nosotros .nos-valores.section-pad {
  padding-top: 2.5rem;
}
body.page-nosotros .nos-valores__head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
body.page-nosotros .nos-valores__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
}
body.page-nosotros .nos-valor {
  background: #ffffff;
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  border: 0.5px solid rgba(10,10,10,0.10);
  transition: transform 260ms ease, border-color 260ms ease;
}
body.page-nosotros .nos-valor:hover {
  transform: translateY(-3px);
  border-color: #c8102e;
}
body.page-nosotros .nos-valor__name {
  /* Extremo bajo de la familia de títulos de card del sitio (1.05–1.2rem:
     gera-fase__title/wwd-card__title 1.15, gera-viva__title 1.2). Se
     mantiene en el extremo bajo por ser la grid más densa (5 columnas). */
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.05rem;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 0.4rem;
}
body.page-nosotros .nos-valor__claim {
  font-size: 0.78rem;
  color: #c8102e;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 0 0.75rem;
  font-style: italic;
}
body.page-nosotros .nos-valor__desc {
  /* Tier "descripción de card" del sitio (0.82–0.88rem: sector-slide__desc
     0.82, wwd-card__desc 0.875, gera-fase__desc 0.82). */
  font-size: 0.85rem;
  color: #6b6b6b;
  line-height: 1.55;
  margin: 0;
}

/* --- SECCIÓN 7 · Principios acordeón --- */
body.page-nosotros .nos-principios__head {
  max-width: 720px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
body.page-nosotros .nos-principios__deck {
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 1rem 0 0;
}
body.page-nosotros .nos-principios__list {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.page-nosotros .nos-principio {
  background: #ffffff;
  border-radius: 8px;
  border: 0.5px solid rgba(10,10,10,0.10);
  overflow: hidden;
}
body.page-nosotros .nos-principio__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  transition: background-color 200ms ease;
}
body.page-nosotros .nos-principio__head::-webkit-details-marker { display: none; }
body.page-nosotros .nos-principio__head:hover { background: #f8f8f8; }
body.page-nosotros .nos-principio__num {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1rem;
  color: #c8102e;
  font-weight: 500;
  min-width: 2.5rem;
}
body.page-nosotros .nos-principio__title {
  flex: 1;
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1rem;
  color: #0a0a0a;
  font-weight: 500;
  line-height: 1.35;
}
body.page-nosotros .nos-principio__icon {
  color: #c8102e;
  font-size: 0.85rem;
  transition: transform 260ms ease;
}
body.page-nosotros .nos-principio[open] .nos-principio__icon {
  transform: rotate(45deg);
}
body.page-nosotros .nos-principio__body {
  padding: 0 1.5rem 1.5rem 5rem;
}
body.page-nosotros .nos-principio__body p {
  /* Tier "texto expandido" del sitio (0.95rem: nos-marco__body,
     nos-pilar__manifesto, gera-detail__value — mismo rol de párrafo
     dentro de un panel/card espacioso, no una card compacta). */
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.65;
  margin: 0;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
  body.page-nosotros .nos-marco__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  body.page-nosotros .nos-pilares__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  body.page-nosotros .nos-valores__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.page-nosotros .nos-principio__body {
    padding: 0 1.25rem 1.25rem 4rem;
  }
}
@media (max-width: 600px) {
  body.page-nosotros .nos-valores__grid {
    grid-template-columns: 1fr;
  }
  body.page-nosotros .nos-principio__num { min-width: 2rem; }
  body.page-nosotros .nos-principio__body {
    padding: 0 1rem 1.25rem 3.25rem;
  }
}

/* --- PREFERS REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
  body.page-nosotros .nos-pilar,
  body.page-nosotros .nos-valor,
  body.page-nosotros .nos-principio__icon,
  body.page-nosotros .nos-principio__head {
    transition: none;
  }
  body.page-nosotros .nos-pilar:hover,
  body.page-nosotros .nos-valor:hover {
    transform: none;
  }
}

/* ================================================================
   SERVICIOS · Fix hero foto edge-to-edge en el lado derecho
   Scoped a body.page-servicios .page-hero--servicios
   Los !important y las declaraciones max-width:none / box-shadow:none /
   ::before content:none vencen las reglas previas (.page-hero--servicios__photo
   con max-width:760px, border, box-shadow, gradiente ::before y los max-width
   de las media queries) sin editarlas.
   ================================================================ */

body.page-servicios .page-hero--servicios {
  overflow: hidden;
  position: relative;
  /* Sin padding vertical: la foto llega arriba y abajo (sin bandas negras).
     align-items:stretch (override del .page-hero base center) hace que el
     grid interno ocupe toda la altura de la sección. */
  padding: 0 !important;
  min-height: clamp(500px, 68vh, 720px);
  align-items: stretch;
}

body.page-servicios .page-hero--servicios__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: none !important;
  /* width:100% necesario: el hero es display:flex (heredado de .page-hero)
     y este inner es flex item; sin esto, flex-grow:0 (default) hace que su
     ancho lo fije el contenido, no el contenedor — la foto se queda corta
     y deja una franja del fondo negro visible en el borde derecho. */
  width: 100%;
  padding-right: 0 !important;
  min-height: clamp(500px, 68vh, 720px);
  /* Mantiene padding izquierdo alineado al container global */
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
}

body.page-servicios .page-hero--servicios__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  /* Clearance para el navbar fijo arriba (el texto no debe quedar tapado) */
  padding-block: calc(var(--nav-h, 92px) + 1rem) 2.5rem;
}

body.page-servicios .page-hero--servicios__photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Anula el gradiente ::before que velaba la foto (recuadro previo) */
body.page-servicios .page-hero--servicios__photo::before {
  content: none;
}

body.page-servicios .page-hero--servicios__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  display: block;
  border-radius: 0 !important;
  max-width: none !important;
  /* Zoom lento y elegante (Ken Burns) en loop suave */
  transform-origin: center center;
  will-change: transform;
  animation: heroServiciosZoom 24s ease-in-out infinite alternate;
}

@keyframes heroServiciosZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}

/* Respeta la preferencia de menos movimiento: sin zoom */
@media (prefers-reduced-motion: reduce) {
  body.page-servicios .page-hero--servicios__photo img {
    animation: none;
    transform: none;
  }
}

/* Responsive: en móvil apilar en 1 columna */
@media (max-width: 900px) {
  /* En móvil se apila: restaura padding vertical (clearance del navbar) y
     deshace el stretch de altura completa del desktop. */
  body.page-servicios .page-hero--servicios {
    padding: 7rem 0 3.5rem !important;
    min-height: 0;
    align-items: center;
  }
  body.page-servicios .page-hero--servicios__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem !important;
    min-height: auto;
  }
  body.page-servicios .page-hero--servicios__left {
    padding-right: 0;
    padding-block: 0;
  }
  body.page-servicios .page-hero--servicios__photo {
    min-height: 300px;
    height: 300px;
    margin-inline: -1.5rem !important;
  }
}

/* ================================================================
   SECTORES · Ampliar el reel derecho del hero hasta el borde de la
   viewport (patrón "break-out" a la derecha). Scoped a
   body.page-sectores .page-hero--sectores.
   Solo aplica en desktop (>1024px): a esa anchura el hero YA cambia
   a una sola columna (regla existente sin tocar), así que este
   bloque no interfiere con el stacking de tablet/móvil.
   padding-left replica exactamente el inset de .container-edit en
   desktop (max-width:1240px, padding:2rem) para que el texto quede
   alineado con el resto del sitio aunque el contenedor ya no tenga
   max-width propio.
   ================================================================ */
@media (min-width: 1025px) {
  body.page-sectores .page-hero--sectores__inner {
    max-width: none !important;
    grid-template-columns: 1fr 1.15fr;
    padding-right: 0 !important;
    padding-left: max(2rem, calc((100vw - 1240px) / 2 + 2rem));
  }

  body.page-sectores .page-hero--sectores__right {
    max-width: none;
  }
}

/* ================================================================
   GERA · Rediseño completo con patrón editorial + 4 fases interactivas
   Scoped a body.page-gera y clases .gera-*
   (el hero vive aparte, en el bloque "GERA · HERO split + video
   edge-to-edge" más abajo, con el patrón body.page-gera .page-hero--gera*
   igual al usado en nosotros/sectores/servicios)
   ================================================================ */

/* ================================================================
   GERA · Hero definitivo — split con video edge-to-edge
   Sustituye completamente cualquier bloque anterior del hero.
   ================================================================ */

body.page-gera .page-hero--gera {
  position: relative;
  overflow: hidden;
  /* height explícito además de min/max: el .page-hero--gera__inner usa
     height:100%, y un % de altura contra un ancestro con height:auto se
     resuelve como "auto" (CSS2.1 §10.5) — sin esto, min/max-height quedan
     sin efecto real sobre el hijo y el video/columna vuelve a desbordar. */
  height: min(calc(100vh - var(--nav-h, 92px)), 780px);
  min-height: calc(100vh - var(--nav-h, 92px));
  max-height: 780px;
  background: #0a0a0a;
  isolation: isolate;
  /* .page-hero (base, compartido por todas las páginas) trae
     padding:10rem 0 5rem y align-items:center — pensado para heroes de solo
     texto sin tope de altura. Sin este override, ese padding (240px) come
     del presupuesto de max-height:780px y el align-items:center no deja que
     __inner haga stretch: el título + CTAs vuelven a quedar más altos que
     el área visible y el overflow:hidden los recorta (el bug original de
     "no se ven los botones"). */
  padding: var(--nav-h, 92px) 0 0;
  align-items: stretch;
}

body.page-gera .page-hero--gera__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  align-items: stretch;
  min-height: inherit;
  height: 100%;
  max-width: none;
  padding: 0;
  z-index: 1;
}

/* GRADIENT sobre el video (solo mitad derecha, evita doble oscurecimiento del texto) */
body.page-gera .page-hero__gradient {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42%;
  right: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(10,10,10,0.85) 0%,
    rgba(10,10,10,0.35) 25%,
    rgba(10,10,10,0) 55%);
}

/* COLUMNA IZQUIERDA · TEXTO */
body.page-gera .page-hero--gera__text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 3rem 2.5rem max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: transparent;
}

body.page-gera .page-hero--gera__text .eyebrow {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #e01a3c;
  margin: 0 0 0.85rem;
}

body.page-gera .page-hero--gera__text .page-hero__title {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: #ffffff;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

body.page-gera .page-hero--gera__lead {
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 420px;
}

body.page-gera .page-hero--gera__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

body.page-gera .page-hero--gera__ctas .btn {
  padding: 0.7rem 1.1rem;
  font-size: 0.78rem;
  white-space: nowrap;
}

/* COLUMNA DERECHA · VIDEO edge-to-edge */
body.page-gera .page-hero--gera__media {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  z-index: 0;
  background: #1a1a1a;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}

body.page-gera .page-hero--gera__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

body.page-gera .page-hero--gera__video-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.15) 100%);
}

/* PLAY button — clickeable, centrado en el video */
body.page-gera .page-hero--gera__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: transform 260ms ease, background-color 260ms ease;
  padding: 0;
}
body.page-gera .page-hero--gera__play:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(255,255,255,0.25);
}
body.page-gera .page-hero--gera__play i {
  font-size: 1.15rem;
  color: #ffffff;
  margin-left: 3px;
}
body.page-gera .page-hero--gera__play-halo {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(224,26,60,0.5);
  animation: geraPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
body.page-gera .page-hero--gera__play-halo--outer {
  inset: -16px;
  border-color: rgba(224,26,60,0.22);
  animation-delay: 0.6s;
}
@keyframes geraPulse {
  0%,100% { transform: scale(1); opacity: 0.55; }
  50%     { transform: scale(1.15); opacity: 0.1; }
}

/* BADGE inferior */
body.page-gera .page-hero--gera__badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 4px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  font-size: 0.62rem;
  color: #ffffff;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 500;
}
body.page-gera .page-hero--gera__badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e01a3c;
  animation: geraBadgePulse 1.6s ease-in-out infinite;
}
@keyframes geraBadgePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(1.35); }
}

/* Barra de controles del video: pausar/reproducir, volumen, silenciar */
body.page-gera .page-hero--gera__controls {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.page-gera .page-hero--gera__controls[hidden] { display: none; }
body.page-gera .page-hero--gera__ctrl-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 0.8rem;
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
body.page-gera .page-hero--gera__ctrl-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
  transform: translateY(-1px);
}
body.page-gera .page-hero--gera__ctrl-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
body.page-gera .page-hero--gera__ctrl-btn[aria-pressed="true"] {
  background: #e01a3c;
  border-color: #e01a3c;
}

/* Slider de volumen estilo YouTube: track fino con relleno rojo (JS setea el
   % vía background) + thumb circular blanco. Cross-browser (webkit/moz). */
body.page-gera .page-hero--gera__volume {
  -webkit-appearance: none;
  appearance: none;
  width: 70px;
  height: 4px;
  margin: 0 8px 0 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  cursor: pointer;
  outline: none;
}
body.page-gera .page-hero--gera__volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: transform 180ms ease;
}
body.page-gera .page-hero--gera__volume:hover::-webkit-slider-thumb { transform: scale(1.15); }
body.page-gera .page-hero--gera__volume::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  cursor: pointer;
}
body.page-gera .page-hero--gera__volume::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: transparent;
}
body.page-gera .page-hero--gera__volume:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 900px) {
  body.page-gera .page-hero--gera__controls { bottom: 12px; right: 12px; gap: 4px; padding: 5px; }
  body.page-gera .page-hero--gera__ctrl-btn { width: 30px; height: 30px; font-size: 0.72rem; }
  body.page-gera .page-hero--gera__volume { width: 48px; }
}

/* Ocultar cualquier control nativo residual del video (algunos navegadores) */
body.page-gera .page-hero--gera__video::-webkit-media-controls,
body.page-gera .page-hero--gera__video::-webkit-media-controls-panel,
body.page-gera .page-hero--gera__video::-webkit-media-controls-enclosure,
body.page-gera .page-hero--gera__video::-internal-media-controls-overlay-cast-button {
  display: none !important;
  -webkit-appearance: none;
  appearance: none;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  body.page-gera .page-hero--gera {
    height: auto;
    min-height: auto;
    max-height: none;
    padding-top: var(--nav-h, 78px);
  }
  body.page-gera .page-hero--gera__inner {
    grid-template-columns: 1fr;
  }
  body.page-gera .page-hero--gera__text {
    order: 2;
    padding: 2rem 1.5rem 2.5rem;
  }
  body.page-gera .page-hero--gera__media {
    order: 1;
    height: 300px;
    min-height: 300px;
  }
  body.page-gera .page-hero__gradient {
    left: 0;
    top: 55%;
    bottom: 0;
    background: linear-gradient(180deg,
      rgba(10,10,10,0) 0%,
      rgba(10,10,10,0.4) 40%,
      rgba(10,10,10,0.95) 90%);
  }
  body.page-gera .page-hero--gera__play { width: 54px; height: 54px; }
  body.page-gera .page-hero--gera__ctas .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-gera .page-hero--gera__play-halo,
  body.page-gera .page-hero--gera__badge-dot { animation: none; }
}

/* INTRO */
body.page-gera .gera-intro__head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
body.page-gera .gera-intro__deck {
  font-size: 1rem;
  color: #4a4a4a;
  line-height: 1.7;
  margin: 1rem 0 0;
}

/* GRID DE 4 FASES */
body.page-gera .gera-fases__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto 2.5rem;
}

body.page-gera .gera-fase {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 260ms ease;
}
body.page-gera .gera-fase:hover {
  transform: translateY(-3px);
}
body.page-gera .gera-fase__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1a;
}
body.page-gera .gera-fase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
body.page-gera .gera-fase:hover .gera-fase__media img {
  transform: scale(1.04);
}

body.page-gera .gera-fase__card {
  background: #ffffff;
  border: 0.5px solid rgba(10,10,10,0.10);
  border-top: none;
  padding: 1.5rem 1.35rem 1.5rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, background-color 220ms ease;
  font-family: inherit;
  width: 100%;
  display: block;
}
body.page-gera .gera-fase.is-active .gera-fase__card {
  border-color: #c8102e;
  background: #ffffff;
  box-shadow: 0 0 0 1px #c8102e;
}

body.page-gera .gera-fase__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(200,16,46,0.08);
  color: #c8102e;
  border-radius: 8px;
  font-size: 1rem;
  margin-bottom: 1rem;
}
body.page-gera .gera-fase__label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #c8102e;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
body.page-gera .gera-fase__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.15rem;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
body.page-gera .gera-fase__desc {
  font-size: 0.82rem;
  color: #6b6b6b;
  line-height: 1.55;
  margin: 0;
}

/* PANEL DETALLE */
body.page-gera .gera-fases__detail {
  position: relative;
  min-height: 300px;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-gera .gera-detail {
  display: none;
  animation: geraDetailFadeIn 300ms ease;
}
body.page-gera .gera-detail.is-active { display: block; }

@keyframes geraDetailFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-gera .gera-detail__inner {
  background: #fafafa;
  border-radius: 12px;
  border-left: 3px solid #c8102e;
  padding: 2.25rem 2.25rem;
}
body.page-gera .gera-detail__label {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: #c8102e;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
body.page-gera .gera-detail__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.25;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 1.75rem;
  letter-spacing: -0.01em;
  max-width: 640px;
}
body.page-gera .gera-detail__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
body.page-gera .gera-detail__sub {
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  color: #6b6b6b;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.85rem;
}
body.page-gera .gera-detail__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body.page-gera .gera-detail__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.9rem;
  color: #4a4a4a;
  line-height: 1.55;
}
body.page-gera .gera-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 5px;
  height: 5px;
  background: #c8102e;
  border-radius: 50%;
}
body.page-gera .gera-detail__value {
  font-size: 0.95rem;
  color: #0a0a0a;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  font-weight: 500;
}
body.page-gera .gera-detail__cta {
  margin-top: 0.5rem;
}

/* METODOLOGÍA VIVA */
body.page-gera .gera-viva__head {
  max-width: 780px;
  margin: 0 auto 3rem;
  text-align: center;
}
body.page-gera .gera-viva__deck {
  font-size: 0.95rem;
  color: #4a4a4a;
  line-height: 1.6;
  margin: 1rem 0 0;
}
body.page-gera .gera-viva__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-gera .gera-viva__card {
  background: #ffffff;
  border: 0.5px solid rgba(10,10,10,0.10);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  transition: transform 260ms ease, border-color 260ms ease;
}
body.page-gera .gera-viva__card:hover {
  transform: translateY(-3px);
  border-color: #c8102e;
}
body.page-gera .gera-viva__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(200,16,46,0.08);
  color: #c8102e;
  border-radius: 10px;
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
}
body.page-gera .gera-viva__num {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.5rem;
  color: #c8102e;
  font-weight: 500;
  line-height: 1;
  margin: 0 0 0.5rem;
}
body.page-gera .gera-viva__title {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.2rem;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
body.page-gera .gera-viva__body {
  font-size: 0.88rem;
  color: #6b6b6b;
  line-height: 1.6;
  margin: 0;
}

/* CTA FINAL */
body.page-gera .gera-cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
body.page-gera .gera-cta__inner h2 { color: #ffffff; }
body.page-gera .gera-cta__inner em { color: #e01a3c; font-style: italic; }
body.page-gera .gera-cta__deck {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin: 1rem 0 1.75rem;
}
body.page-gera .gera-cta__buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  body.page-gera .gera-fases__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  body.page-gera .gera-detail__cols {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  body.page-gera .gera-detail__inner {
    padding: 1.75rem 1.5rem;
  }
  body.page-gera .gera-viva__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  body.page-gera .gera-fases__grid {
    grid-template-columns: 1fr;
  }
}

/* PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  body.page-gera .gera-fase,
  body.page-gera .gera-fase__media img,
  body.page-gera .gera-fase__card,
  body.page-gera .gera-viva__card {
    transition: none;
  }
  body.page-gera .gera-fase:hover,
  body.page-gera .gera-viva__card:hover {
    transform: none;
  }
  body.page-gera .gera-fase:hover .gera-fase__media img {
    transform: none;
  }
  body.page-gera .gera-detail {
    animation: none;
  }
}

/* ================================================================
   NOSOTROS · Mejora visual completa con imágenes + interactividad
   Scoped a body.page-nosotros. Complementa el bloque nosotros previo:
   estas reglas van después y ganan en los overrides (marco grid→flex,
   pilar padding→0, etc.).
   ================================================================ */

/* --- HERO SPLIT EDITORIAL ---
   Mismo patrón breakout que .page-hero--servicios/--sectores: foto
   edge-to-edge a la derecha, texto con clearance de navbar a la izquierda,
   gradient limitado a la mitad del texto. Los !important vencen el
   .page-hero base (padding/align-items/max-width). */
body.page-nosotros .page-hero--nosotros {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 0 !important;
  min-height: clamp(500px, 65vh, 680px);
  align-items: stretch;
}

body.page-nosotros .page-hero--nosotros__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  max-width: none !important;
  /* width:100% necesario: el hero es display:flex (heredado de .page-hero) y
     este inner es flex item; sin esto su ancho lo fija el contenido y la foto
     deja de llegar al borde derecho. */
  width: 100%;
  padding-right: 0 !important;
  min-height: clamp(500px, 65vh, 680px);
  /* Mantiene el padding izquierdo alineado al container global (1200px,
     mismo cálculo que .page-hero--servicios__inner) */
  padding-left: max(1.5rem, calc((100vw - 1200px) / 2 + 1.5rem));
  z-index: 1;
}

body.page-nosotros .page-hero--nosotros__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 2rem;
  /* Clearance para el navbar fijo arriba */
  padding-block: calc(var(--nav-h, 92px) + 1rem) 2.5rem;
  min-width: 0;
  max-width: 560px;
  position: relative;
  z-index: 2;
}

body.page-nosotros .page-hero--nosotros__lead {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  margin: 1rem 0 1.75rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

body.page-nosotros .page-hero--nosotros .page-hero__title {
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

body.page-nosotros .page-hero--nosotros__ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

body.page-nosotros .page-hero--nosotros__photo {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  z-index: 0;
}

body.page-nosotros .page-hero--nosotros__photo img {
  /* Absoluto para que la foto (vertical) NO dicte la altura del hero: rellena
     la celda y se recorta con cover. Así la altura la fija el min-height del
     hero y no la proporción intrínseca de la imagen. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Gradient limitado a la zona del texto (izquierda), preserva brillo y
   color de la foto en la mitad derecha */
body.page-nosotros .page-hero--nosotros .page-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(10,10,10,0.90) 0%,
    rgba(10,10,10,0.75) 25%,
    rgba(10,10,10,0.35) 45%,
    rgba(10,10,10,0.00) 55%,
    rgba(10,10,10,0.00) 100%
  );
}

/* Responsive: en móvil apila foto arriba, texto abajo */
@media (max-width: 900px) {
  body.page-nosotros .page-hero--nosotros {
    padding: 7rem 0 3.5rem !important;
    min-height: auto;
    align-items: center;
  }
  body.page-nosotros .page-hero--nosotros__inner {
    grid-template-columns: 1fr;
    padding-left: 1.5rem;
    padding-right: 1.5rem !important;
    min-height: auto;
  }
  body.page-nosotros .page-hero--nosotros__text {
    padding-right: 0;
    padding-block: 0 2.5rem;
    max-width: 100%;
    order: 2;
  }
  body.page-nosotros .page-hero--nosotros__photo {
    order: 1;
    min-height: 260px;
    height: 260px;
    margin-inline: -1.5rem !important;
    margin-bottom: 2rem;
  }
  body.page-nosotros .page-hero--nosotros .page-hero__gradient {
    background: linear-gradient(
      180deg,
      rgba(10,10,10,0.00) 0%,
      rgba(10,10,10,0.30) 40%,
      rgba(10,10,10,0.90) 60%,
      rgba(10,10,10,1) 100%
    );
  }
}

/* --- MARCO ESTRATÉGICO SPLIT --- */
body.page-nosotros .nos-marco__split {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 2.5rem;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}
body.page-nosotros .nos-marco__media {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 480px;
}
body.page-nosotros .nos-marco__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 8s ease-out;
}
body.page-nosotros .nos-marco__split:hover .nos-marco__media img {
  transform: scale(1.03);
}
body.page-nosotros .nos-marco__grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
body.page-nosotros .nos-marco__card {
  transition: transform 260ms ease, border-left-width 260ms ease;
  border-left-width: 3px !important;
}
body.page-nosotros .nos-marco__card:hover {
  transform: translateX(4px);
  border-left-width: 5px !important;
}

/* --- PROMESA CON FONDO CINEMÁTICO --- */
body.page-nosotros .nos-promesa {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.page-nosotros .nos-promesa__bg {
  position: absolute;
  inset: -10% 0;
  z-index: -2;
  will-change: transform;
}
body.page-nosotros .nos-promesa__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}
body.page-nosotros .nos-promesa__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,10,0.75) 0%,
    rgba(10,10,10,0.65) 50%,
    rgba(10,10,10,0.85) 100%);
  z-index: -1;
}

/* --- NÚMEROS ANIMADOS --- */
/* Reduce el padding-top (mismo motivo que .nos-marco): .section-pad usa el
   clearance del navbar, innecesario a mitad de página con divider arriba. */
body.page-nosotros .nos-numeros.section-pad {
  padding-top: 2.5rem;
  padding-bottom: 0.5rem;
}
body.page-nosotros .nos-numeros__head {
  max-width: 640px;
  margin: 0 auto 2.75rem;
  text-align: center;
}
body.page-nosotros .nos-numeros__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
body.page-nosotros .nos-numero {
  text-align: center;
}
body.page-nosotros .nos-numero__value {
  /* Mismo tamaño y peso que las 4 cifras equivalentes del home
     (body.page-home #confianza-strip .trust__num) — son los MISMOS
     datos (40+, 9, 24/7, 360°), deben leerse con el mismo peso visual. */
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  color: #c8102e;
  font-weight: 600;
  line-height: 1;
  margin: 0 0 0.75rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
body.page-nosotros .nos-numero__label {
  /* Coherente con .trust__label del home (mismo bloque de datos) */
  font-size: 0.75rem;
  color: #6b6b6b;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}

/* --- HISTORIA TIMELINE --- */
/* Reduce el padding-top (mismo motivo que .nos-marco / .nos-numeros): el
   clearance del navbar de .section-pad sobra a mitad de página. */
body.page-nosotros .nos-historia.section-pad {
  padding-top: 2.5rem;
}
body.page-nosotros .nos-historia__head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}
body.page-nosotros .nos-historia__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
}
body.page-nosotros .nos-historia__line {
  position: absolute;
  top: 145px;
  left: 5%;
  right: 5%;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(200,16,46,0.15) 0%,
    #c8102e 50%,
    rgba(200,16,46,0.15) 100%);
  z-index: 0;
}
body.page-nosotros .nos-historia__hito {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
body.page-nosotros .nos-historia__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 2rem;
}
body.page-nosotros .nos-historia__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
body.page-nosotros .nos-historia__hito:hover .nos-historia__media img {
  transform: scale(1.05);
}
body.page-nosotros .nos-historia__year {
  font-size: 0.72rem;
  letter-spacing: 2px;
  color: #c8102e;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 0.5rem;
}
body.page-nosotros .nos-historia__content h3 {
  font-family: var(--font-voice, "Moderat Extended"), Georgia, serif;
  font-size: 1.05rem;
  color: #0a0a0a;
  font-weight: 500;
  margin: 0 0 0.6rem;
  line-height: 1.3;
}
body.page-nosotros .nos-historia__content p {
  font-size: 0.85rem;
  color: #6b6b6b;
  line-height: 1.6;
  margin: 0;
}

/* --- PILARES CON FOTO --- */
body.page-nosotros .nos-pilar {
  overflow: hidden;
  padding: 0 !important;
  background: #ffffff;
  border-radius: 12px;
  border: 0.5px solid rgba(10,10,10,0.10);
  transition: transform 260ms ease, border-color 260ms ease, box-shadow 260ms ease;
}
body.page-nosotros .nos-pilar:hover {
  transform: translateY(-4px);
  border-color: #c8102e;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
body.page-nosotros .nos-pilar__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1a1a1a;
}
body.page-nosotros .nos-pilar__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}
body.page-nosotros .nos-pilar:hover .nos-pilar__media img {
  transform: scale(1.04);
}
/* Padding solo al contenido de texto (no a la media que va edge-to-edge) */
body.page-nosotros .nos-pilar > *:not(.nos-pilar__media) {
  padding-inline: 1.75rem;
}
body.page-nosotros .nos-pilar > .nos-pilar__num { padding-top: 1.5rem; }
body.page-nosotros .nos-pilar > .nos-pilar__manifesto { padding-bottom: 2rem; }

/* --- VALORES CON ÍCONO Y LÍNEA HOVER --- */
body.page-nosotros .nos-valor {
  position: relative;
  overflow: hidden;
}
body.page-nosotros .nos-valor__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(200,16,46,0.08);
  color: #c8102e;
  border-radius: 10px;
  font-size: 1.1rem;
  /* Centrado horizontal del chip dentro de la card */
  margin: 0 auto 1rem;
  transition: background-color 260ms ease, transform 260ms ease;
}
body.page-nosotros .nos-valor:hover .nos-valor__icon {
  background: #c8102e;
  color: #ffffff;
  transform: scale(1.05);
}
body.page-nosotros .nos-valor__underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #c8102e;
  transition: width 300ms ease;
}
body.page-nosotros .nos-valor:hover .nos-valor__underline {
  width: 100%;
}

/* --- PRINCIPIOS CON IMAGEN LATERAL --- */
body.page-nosotros .nos-principios__split {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 3rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}
body.page-nosotros .nos-principios__split .nos-principios__list {
  max-width: none;
  margin: 0;
}
body.page-nosotros .nos-principios__media {
  position: sticky;
  top: 100px;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 4;
  max-height: 440px;
  isolation: isolate;
}
body.page-nosotros .nos-principios__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
}
body.page-nosotros .nos-principios__img.is-active {
  opacity: 1;
}

/* --- RESPONSIVE (mejora visual nosotros) --- */
@media (max-width: 900px) {
  body.page-nosotros .nos-marco__split { grid-template-columns: 1fr; }
  body.page-nosotros .nos-marco__media { min-height: 300px; aspect-ratio: 16 / 9; }
  body.page-nosotros .nos-numeros__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  body.page-nosotros .nos-historia__timeline { grid-template-columns: 1fr; gap: 2rem; }
  body.page-nosotros .nos-historia__line { display: none; }
  body.page-nosotros .nos-principios__split { grid-template-columns: 1fr; }
  body.page-nosotros .nos-principios__media {
    position: relative;
    top: 0;
    max-height: 320px;
    order: -1;
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 600px) {
  body.page-nosotros .nos-numeros__grid { grid-template-columns: 1fr; }
}

/* --- PREFERS REDUCED MOTION (mejora visual nosotros) --- */
@media (prefers-reduced-motion: reduce) {
  body.page-nosotros .nos-promesa__bg { transform: none !important; }
  body.page-nosotros .nos-marco__card,
  body.page-nosotros .nos-marco__media img,
  body.page-nosotros .nos-pilar,
  body.page-nosotros .nos-pilar__media img,
  body.page-nosotros .nos-historia__media img,
  body.page-nosotros .nos-valor__icon,
  body.page-nosotros .nos-valor__underline,
  body.page-nosotros .nos-principios__img {
    transition: none;
  }
  body.page-nosotros .nos-marco__card:hover,
  body.page-nosotros .nos-pilar:hover,
  body.page-nosotros .nos-historia__hito:hover .nos-historia__media img,
  body.page-nosotros .nos-pilar:hover .nos-pilar__media img,
  body.page-nosotros .nos-marco__split:hover .nos-marco__media img,
  body.page-nosotros .nos-valor:hover .nos-valor__icon {
    transform: none;
  }
}

/* (Override de cursor para nosotros.html retirado junto con el cursor personalizado.) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  /* Restaura el cursor nativo del sistema en esta página, ya que el
     personalizado (ocultado arriba) es lo que normalmente reemplaza al
     cursor del sistema vía `cursor: none` en el body. */
  body.page-nosotros,
  body.page-nosotros a,
  body.page-nosotros button,
  body.page-nosotros input,
  body.page-nosotros textarea,
  body.page-nosotros select,
  body.page-nosotros [role="button"] {
    cursor: auto;
  }
  body.page-nosotros a,
  body.page-nosotros button,
  body.page-nosotros [role="button"] {
    cursor: pointer;
  }
}

/* ================================================================
   FOOTER · Certificaciones ICONTEC (strip de 7 sellos)
   Aparece en el footer de todas las páginas (footer hardcoded).
   Sellos negros originales → blancos vía filter para fondo dark.
   ================================================================ */
.footer-sellos {
  padding: 1.75rem 0 1.5rem;
  border-top: 0.5px solid rgba(255,255,255,0.08);
  margin-top: 1.5rem;
}
/* Sellos ICONTEC como bloque de apertura del footer: sin borde/margen
   superior (quedaría pegado al inicio del footer) y con separador INFERIOR
   que lo divide de la marca. */
.footer-sellos--lead {
  border-top: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.08);
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 1.9rem;
}
.footer-sellos__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 2px;
  color: #e01a3c;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 1rem;
  text-align: center;
}
.footer-sellos__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  align-items: center;
  justify-content: center;
}
.footer-sellos__grid img {
  height: 92px;
  width: auto;
  /* Los sellos son badges auto-contenidos (insignia gris oscuro con contenido
     blanco; el de Sostenibilidad trae color). NO se usa brightness(0)+invert
     (convertía cada sello en un bloque blanco sólido, ilegible). grayscale(1)
     los unifica a escala de grises y preserva la legibilidad sobre el footer
     oscuro. */
  filter: grayscale(1);
  opacity: 0.85;
  transition: opacity 200ms ease, transform 200ms ease;
}
.footer-sellos__grid img:hover {
  opacity: 1;
  transform: translateY(-2px);
}
@media (max-width: 700px) {
  .footer-sellos__grid { gap: 1.25rem; }
  .footer-sellos__grid img { height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-sellos__grid img { transition: none; }
  .footer-sellos__grid img:hover { transform: none; }
}

/* ===== Modal Cards · Qué hacemos ===== */
.svc-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:clamp(0px,3vw,40px);}
.svc-modal[hidden]{display:none;}
.svc-modal__backdrop{position:absolute;inset:0;background:rgba(6,6,6,.6);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s ease;}
.svc-modal.open .svc-modal__backdrop{opacity:1;}
.svc-modal__panel{position:relative;z-index:1;overflow:hidden;transform-origin:center center;contain:layout paint;width:min(1080px,100%);max-height:min(860px,94vh);display:grid;grid-template-columns:0.9fr 1.1fr;background:#0a0a0a;color:#fff;border-radius:18px;box-shadow:0 40px 120px rgba(0,0,0,.55);}
.svc-modal__media{position:relative;min-height:320px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;background-size:cover;background-position:center;background-color:#161616;}
.svc-modal__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.2),rgba(10,10,10,.85));}
.svc-modal__num{position:absolute;top:26px;left:30px;z-index:2;font-weight:600;letter-spacing:.06em;font-size:.8rem;background:rgba(10,10,10,.5);border:1px solid rgba(255,255,255,.16);padding:6px 11px;border-radius:7px;}
.svc-modal__mtitle{position:relative;z-index:2;font-size:clamp(1.5rem,3vw,2.15rem);font-weight:700;line-height:1.05;margin:0;}
.svc-modal__mtag{position:relative;z-index:2;color:#c8102e;font-weight:600;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;margin:0 0 12px;}
.svc-modal__body{padding:clamp(26px,3.4vw,46px);overflow-y:auto;overscroll-behavior:contain;opacity:0;transform:translateY(14px);transition:opacity .4s ease .05s,transform .5s cubic-bezier(.16,.84,.44,1) .05s;}
.svc-modal.content-ready .svc-modal__body{opacity:1;transform:none;}
.svc-modal__intro{font-size:1.08rem;line-height:1.6;color:rgba(255,255,255,.9);margin:0 0 26px;}
.svc-modal__h{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:#9a9a9a;margin:0 0 14px;}
.svc-modal__list{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;}
.svc-modal__list li{position:relative;padding-left:26px;line-height:1.5;color:rgba(255,255,255,.86);font-size:.96rem;}
.svc-modal__list li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:#c8102e;border-radius:2px;transform:rotate(45deg);}
.svc-modal__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;}
.svc-modal__tags span{font-size:.78rem;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:999px;}
.svc-modal__ctas{display:flex;flex-wrap:wrap;gap:12px;}
.svc-modal .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.95rem;padding:13px 22px;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:background .25s ease,transform .25s cubic-bezier(.16,.84,.44,1),border-color .25s ease;}
.svc-modal .btn--primary{background:#c8102e;color:#fff;}
.svc-modal .btn--primary:hover{background:#9c0c24;transform:translateY(-2px);}
.svc-modal .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28);}
.svc-modal .btn--ghost:hover{border-color:#fff;transform:translateY(-2px);}
.svc-modal__close{position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;border-radius:50%;cursor:pointer;background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.2);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .3s ease .1s,background .25s ease,transform .25s ease;}
.svc-modal.content-ready .svc-modal__close{opacity:1;}
.svc-modal__close:hover{background:#c8102e;transform:rotate(90deg);}
.svc-modal__close:focus-visible{outline:3px solid #fff;outline-offset:2px;}
@media (max-width:820px){.svc-modal__panel{grid-template-columns:1fr;max-height:100vh;height:100%;width:100%;border-radius:0;}.svc-modal{padding:0;}.svc-modal__media{min-height:200px;}}
@media (prefers-reduced-motion:reduce){.svc-modal__panel,.svc-modal__body,.svc-modal__backdrop,.svc-modal__close{transition:none !important;}}

/* ===== Fluidez y elegancia global ===== */
:root{
  --ease-elegant: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.40, 0.00, 0.20, 1);
}
/* Fondo raíz oscuro: evita el flash blanco al navegar entre páginas */
html{ background-color:#0a0a0a; scroll-padding-top: var(--nav-h, 92px); }
/* Entrada de página: fade suave. CSS puro (si algo falla, la página queda visible). */
@keyframes pageEnter{ from{ opacity:0 } to{ opacity:1 } }
body{ animation: pageEnter .5s var(--ease-smooth) both; }
/* Taps limpios en móvil + transición de color coherente en enlaces */
a, button, .btn, .wwd-card, [role="button"]{ -webkit-tap-highlight-color: transparent; }
a{ transition: color .3s var(--ease-elegant); }
/* Respeto total a "reducir movimiento" */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  body{ animation: none; }
}

/* ===== Fluidez sección "Qué hacemos": ::before/overlay compositables (transform/opacity) ===== */
.wwd-card::before{ transition: transform 420ms var(--ease-elegant); }
.wwd-card__overlay{ transition: opacity 260ms var(--ease-elegant); }

/* ===== C10 · prefers-reduced-motion global ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== UX modal servicios: navegación prev/next + foco de tarjetas ===== */
.svc-modal__nav{ position:absolute; z-index:4; right:20px; bottom:20px; display:flex; align-items:center; gap:6px; opacity:0; transition:opacity .3s ease .1s; }
.svc-modal.content-ready .svc-modal__nav{ opacity:1; }
.svc-modal__navbtn{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:rgba(10,10,10,.55); border:1px solid rgba(255,255,255,.22); color:#fff; transition:background .25s ease, transform .2s ease; }
.svc-modal__navbtn:hover{ background:#c8102e; transform:translateY(-1px); }
.svc-modal__navbtn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.svc-modal__count{ font-size:.76rem; font-weight:600; letter-spacing:.04em; color:rgba(255,255,255,.92); min-width:48px; text-align:center; background:rgba(10,10,10,.5); border:1px solid rgba(255,255,255,.16); padding:7px 8px; border-radius:8px; font-variant-numeric:tabular-nums; }
.svc-modal__mtag, .svc-modal__mtitle, .svc-modal__num{ transition:opacity .2s ease; }
.svc-modal.svc-swapping .svc-modal__body{ opacity:0; transform:translateY(10px); }
.svc-modal.svc-swapping .svc-modal__mtag,
.svc-modal.svc-swapping .svc-modal__mtitle,
.svc-modal.svc-swapping .svc-modal__num{ opacity:0; }
.wwd-card:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .svc-modal__nav, .svc-modal__navbtn, .svc-modal__mtag, .svc-modal__mtitle, .svc-modal__num{ transition:none; }
}

/* ===== Menú principal sin subrayado (ni en hover ni en página activa).
   La página actual se sigue distinguiendo por el color rojo del texto. ===== */
.navbar__menu .link-anim::after,
.navbar__menu a[aria-current="page"]::after,
.navbar__menu a.is-active::after { display: none; }

/* ================================================================
   SISTEMA SECTORIAL · componentes reutilizables para páginas
   sector-*.html (residencial, salud, logistico, industria,
   corporativo, retail, infraestructura, educacion).

   Base extraída del <style> inline de sector-residencial.html
   (piloto). Se conservan los nombres de clase existentes porque
   las 7 páginas hermanas ya los usan; renombrarlos rompería las
   páginas que este pase no debe tocar. Colocado al final del
   archivo para replicar la precedencia que tenía el inline.
   ================================================================ */

/* --- Layout editorial 2 columnas (reto/filosofía, KPIs/diff) --- */
.split-2col { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .split-2col { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }

/* --- Pull-quote (cita destacada) --- */
.pull-quote { padding: 1.5rem 1.75rem; border-left: 3px solid var(--alliance-red); background: rgba(20,20,20,0.55); }
.pull-quote__text { font-family: 'Moderat Extended','Poppins',sans-serif; font-size: clamp(1.25rem, 2.2vw, 1.65rem); font-style: italic; line-height: 1.4; color: #fff; margin: 0 0 1rem; }
.pull-quote__text em { color: var(--alliance-red); }
.pull-quote__body { color: rgba(255,255,255,0.78); font-size: 1.12rem; line-height: 1.7; margin: 0; }
.pull-quote__source { margin: 1rem 0 0; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--alliance-red); text-transform: uppercase; }

/* --- Timeline horizontal de fases (hoja de ruta) --- */
.phases { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; }
@media (min-width: 900px) {
  .phases { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .phases::before { content: ''; position: absolute; top: 30px; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,16,46,0.4) 15%, rgba(200,16,46,0.4) 85%, transparent); z-index: 0; pointer-events: none; }
}
.phase { position: relative; z-index: 1; background: #0a0a0a; padding: 1rem 0; }
.phase__num { width: 60px; height: 60px; border-radius: 50%; background: #111; border: 1px solid rgba(200,16,46,0.5); display: flex; align-items: center; justify-content: center; color: var(--alliance-red); font-family: 'Moderat Extended','Poppins',sans-serif; font-size: 1.3rem; margin-bottom: 1rem; }
.phase__title { font-size: 1.38rem; color: #fff; margin-bottom: 0.8rem; font-weight: 600; }
.phase__list { color: rgba(255,255,255,0.78); font-size: 1.08rem; line-height: 1.7; padding-left: 1.1rem; margin: 0; }
.phase__list li { margin-bottom: 0.5rem; }

/* --- Lista de diferenciadores con icono --- */
.diff-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.95rem; }
.diff-list li { display: flex; align-items: flex-start; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.diff-list li:last-child { border-bottom: none; }
.diff-list i { color: var(--alliance-red); font-size: 1.25rem; margin-top: 0.2rem; flex-shrink: 0; }
.diff-list strong { color: #fff; font-size: 1.15rem; display: block; margin-bottom: 0.3rem; font-weight: 600; }
.diff-list span { color: rgba(255,255,255,0.7); font-size: 1.05rem; line-height: 1.6; }

/* --- Bloque KPI (label + lista) --- */
.kpi-block { padding: 1.45rem 1.7rem; background: rgba(20,20,20,0.55); border-top: 2px solid var(--alliance-red); }
.kpi-block__label { font-size: 0.78rem; letter-spacing: 0.18em; color: var(--alliance-red); text-transform: uppercase; margin-bottom: 0.6rem; font-weight: 600; }
.kpi-block__title { font-size: 1.2rem; color: #fff; margin-bottom: 0.75rem; font-weight: 600; }
.kpi-block ul { color: rgba(255,255,255,0.75); font-size: 1.05rem; line-height: 1.7; padding-left: 1.1rem; margin: 0; }
.kpi-block ul li { margin-bottom: 0.4rem; }

/* ================================================================
   Sector · Cómo operamos (.sector-how)
   Fusiona KPIs + Diferenciadores + Hoja de ruta en un bloque visual.
   ================================================================ */

.sector-how {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

/* Zona A · Métricas destacadas */
.sector-how__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 2rem 0;
  border-top: 1px solid rgba(10,10,10,0.08);
  border-bottom: 1px solid rgba(10,10,10,0.08);
}
.sector-how__metric {
  text-align: center;
}
.sector-how__metric-num {
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 1;
  font-weight: 500;
  color: var(--alliance-red, #c8102e);
  margin-bottom: 0.65rem;
  letter-spacing: -0.02em;
}
.sector-how__metric-label {
  font-size: 0.85rem;
  color: rgba(10,10,10,0.65);
  line-height: 1.45;
  max-width: 220px;
  margin: 0 auto;
}

/* Zona B · Diferenciadores */
.sector-how__diffs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.sector-how__diff {
  text-align: left;
}
.sector-how__diff-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(200,16,46,0.08);
  color: var(--alliance-red, #c8102e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.sector-how__diff-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a0a0a;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.sector-how__diff-desc {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  margin: 0;
}

/* Zona C · Hoja de ruta */
.sector-how__roadmap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(10,10,10,0.08);
}
.sector-how__roadmap::before {
  content: "";
  position: absolute;
  top: calc(2.5rem + 30px);
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,16,46,0.35) 15%, rgba(200,16,46,0.35) 85%, transparent);
  pointer-events: none;
  z-index: 0;
}
.sector-how__phase {
  position: relative;
  z-index: 1;
  background: #ffffff;
  padding: 0 1rem;
  text-align: center;
}
.sector-how__phase-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--alliance-red, #c8102e);
  background: #fff;
  color: var(--alliance-red, #c8102e);
  font-family: 'Moderat Extended', 'Poppins', sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.sector-how__phase-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #0a0a0a;
  margin-bottom: 0.5rem;
}
.sector-how__phase-desc {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(10,10,10,0.65);
  margin: 0;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
}

/* Sub-encabezado de zona (Cómo operamos) */
.sector-how__zone-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--alliance-red, #c8102e);
  margin: 0 0 1.5rem;
  text-align: center;
}
.sector-how__zone--diffs .sector-how__zone-label { text-align: left; }

/* Responsive */
@media (max-width: 1023px) {
  .sector-how__metrics,
  .sector-how__diffs,
  .sector-how__roadmap { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
  .sector-how__roadmap::before { display: none; }
}
@media (max-width: 720px) {
  .sector-how__metrics,
  .sector-how__diffs,
  .sector-how__roadmap { grid-template-columns: 1fr; gap: 2rem; }
  .sector-how { gap: 3rem; }
}
/* ================================================================
   Sector · Master-detail de capacidades (.matrix)
   Lista de 12 (izq) + panel de detalle (der) + filtros + prev/next.
   Nav 100% JS (data-* attributes). Self-contained: define su paleta.
   Nota: .cap-item comparte nombre con la grilla plana antigua; por eso
   todas sus reglas van scopeadas bajo .matrix__list y con !important en
   los sub-nombres compartidos (__num, __title) para ganar la cascada.
   ================================================================ */
.matrix {
  --mx-bg: #ffffff;
  --mx-panel: #ffffff;
  --mx-fg: #0a0a0a;
  --mx-muted: rgba(10,10,10,0.6);
  --mx-border: rgba(10,10,10,0.10);
  --mx-border-strong: rgba(10,10,10,0.24);
  --mx-soft: #f4f4f5;
  --cap-color: var(--alliance-red, #c8102e);
  background: var(--mx-bg);
  padding: clamp(3.5rem, 8vw, 7rem) 0;
}

/* Header editorial */
.matrix__header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: 2.25rem;
}
.matrix__header h2 { margin: 0.5rem 0 0; }
.matrix__header > p {
  color: var(--mx-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 860px) {
  .matrix__header { grid-template-columns: 1fr; align-items: start; gap: 1rem; }
}

/* Meta: contador + filtros */
.matrix__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--mx-border);
}
.matrix__count { font-size: 0.9rem; color: var(--mx-muted); }
.matrix__count strong { color: var(--mx-fg); font-weight: 700; }
.matrix__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.matrix__filter {
  appearance: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mx-fg);
  background: var(--mx-soft);
  border: 1px solid var(--mx-border);
  border-radius: 999px;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.matrix__filter > span:not(.matrix__filter-dot) { opacity: 0.5; font-variant-numeric: tabular-nums; }
.matrix__filter:hover { border-color: var(--mx-border-strong); }
.matrix__filter.is-active { background: var(--mx-fg); border-color: var(--mx-fg); color: #fff; }
.matrix__filter.is-active > span:not(.matrix__filter-dot) { opacity: 0.7; }
.matrix__filter-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.matrix__filter:focus-visible { outline: 2px solid var(--alliance-red, #c8102e); outline-offset: 2px; }

/* Cuerpo: lista + detalle */
.matrix__body {
  display: grid;
  grid-template-columns: minmax(300px, 400px) 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 960px) {
  .matrix__body { grid-template-columns: 1fr; }
}

/* Lista (izquierda) */
.matrix__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 0.35rem;
}
@media (max-width: 960px) {
  .matrix__list { max-height: none; overflow: visible; padding-right: 0; }
}
.matrix__list .cap-item {
  appearance: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--mx-panel);
  border: 1px solid var(--mx-border);
  border-left: 3px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.matrix__list .cap-item[hidden] { display: none; }
.matrix__list .cap-item:hover { border-color: var(--mx-border-strong); transform: none; }
.matrix__list .cap-item.is-active {
  border-color: var(--mx-border);
  border-left-color: var(--cap-color);
  background: var(--mx-soft);
}
.matrix__list .cap-item:focus-visible { outline: 2px solid var(--alliance-red, #c8102e); outline-offset: 2px; }
.matrix__list .cap-item__num {
  font-family: 'Moderat Extended','Poppins',sans-serif;
  font-size: 1.35rem !important;
  font-weight: 500;
  line-height: 1;
  color: var(--cap-color) !important;
  font-variant-numeric: tabular-nums;
  margin: 0 !important;
}
.matrix__list .cap-item__body { min-width: 0; }
.matrix__list .cap-item__cat {
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mx-muted);
  margin-bottom: 0.2rem;
}
.matrix__list .cap-item__title {
  font-size: 1rem !important;
  font-weight: 700;
  color: var(--mx-fg) !important;
  line-height: 1.3;
  margin: 0 !important;
}
.matrix__list .cap-item__arrow {
  color: var(--mx-muted);
  font-size: 0.85rem;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease, color 160ms ease;
}
.matrix__list .cap-item:hover .cap-item__arrow,
.matrix__list .cap-item.is-active .cap-item__arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--cap-color);
}

/* Detalle (derecha) */
.matrix__detail {
  position: sticky;
  top: 90px;
  background: var(--mx-panel);
  border: 1px solid var(--mx-border);
  border-top: 3px solid var(--cap-color);
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 960px) {
  .matrix__detail { position: static; }
}
.matrix__detail-body { padding: 2rem 2.15rem 1.75rem; transition: opacity 150ms ease; }
.matrix__detail.is-switching .matrix__detail-body { opacity: 0.3; }
.matrix__detail-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--mx-border);
}
.matrix__detail-num {
  font-family: 'Moderat Extended','Poppins',sans-serif;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  color: var(--cap-color);
  font-variant-numeric: tabular-nums;
}
.matrix__detail-heading .cat {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mx-muted);
  margin-bottom: 0.4rem;
}
.matrix__detail-heading h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--mx-fg);
  line-height: 1.2;
  margin: 0;
}
.matrix__detail-content {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem 0;
}
.matrix__detail-block .label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.matrix__detail-block.risk .label { color: var(--alliance-red, #c8102e); }
.matrix__detail-block.risk .label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--alliance-red, #c8102e);
  box-shadow: 0 0 0 3px rgba(200,16,46,0.15);
}
.matrix__detail-block.solution .label { color: var(--mx-fg); }
.matrix__detail-block p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mx-muted);
  margin: 0;
}
.matrix__detail-tech {
  margin-top: 0.85rem;
  font-family: 'JetBrains Mono','SF Mono','Consolas',monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mx-fg);
  background: var(--mx-soft);
  border: 1px solid var(--mx-border);
  border-radius: 5px;
  padding: 0.75rem 0.9rem;
  letter-spacing: 0.01em;
}
.matrix__detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mx-border);
}
.matrix__detail-nav-btn {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mx-fg);
  background: transparent;
  border: 1px solid var(--mx-border-strong);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.matrix__detail-nav-btn:hover:not(:disabled) {
  background: var(--cap-color);
  border-color: var(--cap-color);
  color: #fff;
}
.matrix__detail-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.matrix__detail-nav-position { font-size: 0.85rem; color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.matrix__detail-nav-position strong { color: var(--mx-fg); }

@media (prefers-reduced-motion: reduce) {
  .matrix__list .cap-item,
  .matrix__list .cap-item__arrow,
  .matrix__filter,
  .matrix__detail-nav-btn,
  .matrix__detail-body { transition: none; }
}

/* ================================================================
   SERVICIOS · cards "Qué hacemos" — mismas proporciones que el home
   Scoped a body.page-servicios. Replica la compactación de body.page-home
   para que las cards se vean IGUAL que en index (fila horizontal de tiles
   compactos), no como banners full-width ni como tiles muy altos (380px).
   ================================================================ */
body.page-servicios .what-we-do .wwd-card {
  min-height: 240px;
}
body.page-servicios .what-we-do .wwd-card__content {
  padding: 1rem 1rem 1rem;
}
body.page-servicios .what-we-do .wwd-card .wwd-card__title {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
body.page-servicios .what-we-do .wwd-card .wwd-card__desc {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
@media (min-width: 1440px) {
  body.page-servicios .what-we-do .wwd-card { min-height: 260px; }
}
@media (max-width: 640px) {
  body.page-servicios .what-we-do .wwd-card { min-height: 200px; }
}
/* ============ COOKIE CONSENT ============ */
/* Ocultar de verdad cuando llevan [hidden]: .cookie-modal fija display:flex,
   que de otro modo gana a la regla [hidden]{display:none} del navegador y deja
   el modal (z-index 9999) tapando toda la página e interceptando los clics. */
.cookie-banner[hidden], .cookie-modal[hidden] { display: none !important; }

/* Consent-first: mientras el banner está visible, se oscurece y bloquea el resto
   de la página (scroll + clics) para que el usuario decida primero. El backdrop
   va en z-index 9990 (bajo el banner 9998; el modal 9999 queda por encima). */
body.cookie-blocking { overflow: hidden; }
body.cookie-blocking::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9990;
  animation: cookieBackdropIn 200ms ease;
}
@media (prefers-reduced-motion: reduce) { body.cookie-blocking::before { animation: none; } }

/* Banner inferior fijo */
.cookie-banner {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 9998;
  background: #0f0f0f;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 1.5rem 1.75rem;
  max-width: 1180px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  animation: cookieBannerIn 320ms ease;
}
@keyframes cookieBannerIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.cookie-banner__inner { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.cookie-banner__title { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.cookie-banner__desc { font-size: 0.88rem; line-height: 1.55; color: rgba(255,255,255,0.75); max-width: 720px; }
.cookie-banner__desc a { color: #ff6b81; text-decoration: underline; }
.cookie-banner__desc a:hover { color: #fff; }
.cookie-banner__actions { display: flex; gap: 0.6rem; align-items: center; flex-shrink: 0; }

.cookie-btn {
  appearance: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
}
.cookie-btn--primary { background: var(--alliance-red, #c8102e); color: #fff; }
.cookie-btn--primary:hover { background: #a00d24; }
.cookie-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.25); }
.cookie-btn--ghost:hover { border-color: #fff; }
.cookie-btn:focus-visible { outline: 2px solid var(--alliance-red, #c8102e); outline-offset: 3px; }

.cookie-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); animation: cookieBackdropIn 200ms ease; }
@keyframes cookieBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.cookie-modal__panel {
  position: relative; z-index: 1;
  background: #ffffff; color: #0a0a0a;
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto;
  border: 1px solid rgba(0,0,0,0.08);
  animation: cookieModalIn 260ms ease;
}
@keyframes cookieModalIn { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } }
.cookie-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 1.75rem; border-bottom: 1px solid rgba(0,0,0,0.08); }
.cookie-modal__head h2 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
.cookie-modal__close { appearance: none; background: transparent; border: 1px solid rgba(0,0,0,0.15); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; }
.cookie-modal__close:hover { background: rgba(0,0,0,0.05); }
.cookie-modal__body { padding: 1.5rem 1.75rem; }
.cookie-modal__intro { font-size: 0.9rem; color: rgba(0,0,0,0.7); line-height: 1.6; margin-bottom: 1.5rem; }
.cookie-modal__foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 1.25rem 1.75rem; border-top: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.02); }
.cookie-modal__foot .cookie-btn--ghost { color: #0a0a0a; border-color: rgba(0,0,0,0.2); }
.cookie-modal__foot .cookie-btn--ghost:hover { border-color: #0a0a0a; }

.cookie-category { padding: 1.25rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.cookie-category:last-child { border-bottom: 0; }
.cookie-category__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.cookie-category__head h3 { font-size: 1rem; font-weight: 700; }
.cookie-category p { font-size: 0.88rem; color: rgba(0,0,0,0.65); line-height: 1.55; }

.cookie-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.cookie-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-toggle__slider { width: 40px; height: 22px; border-radius: 11px; background: rgba(0,0,0,0.2); position: relative; transition: background 200ms; display: inline-block; }
.cookie-toggle__slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 200ms; }
.cookie-toggle input:checked + .cookie-toggle__slider { background: var(--alliance-red, #c8102e); }
.cookie-toggle input:checked + .cookie-toggle__slider::before { transform: translateX(18px); }
.cookie-toggle--disabled { opacity: 0.6; cursor: not-allowed; }
.cookie-toggle__label { font-size: 0.78rem; color: rgba(0,0,0,0.6); font-weight: 600; }

@media (max-width: 720px) {
  .cookie-banner { bottom: 0.5rem; left: 0.5rem; right: 0.5rem; padding: 1.25rem; }
  .cookie-banner__inner { grid-template-columns: 1fr; }
  .cookie-banner__actions { flex-wrap: wrap; }
  .cookie-btn { flex: 1 1 auto; text-align: center; }
  .cookie-modal { padding: 0; }
  .cookie-modal__panel { max-height: 100vh; border: 0; }
  .cookie-modal__foot { flex-direction: column-reverse; }
  .cookie-modal__foot .cookie-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner, .cookie-modal__backdrop, .cookie-modal__panel { animation: none; }
}

/* Formularios: casilla de consentimiento */
.form-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1rem 0; font-size: 0.86rem; line-height: 1.5; }
.form-consent input[type="checkbox"] { margin-top: 0.25rem; }
.form-consent a { color: var(--alliance-red, #c8102e); text-decoration: underline; }
.form-consent .required { color: var(--alliance-red, #c8102e); font-weight: 700; }

/* Bloque de acciones al pie de páginas legales */
.legal-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(10,10,10,0.08); }
.legal-actions .cookie-btn { color: #0a0a0a; border-color: rgba(10,10,10,0.15); }
.legal-actions .cookie-btn:hover { border-color: #0a0a0a; }
.legal-actions .cookie-btn--primary { color: #fff; }