/* ============================================================
   NOSOTROS — estilos específicos de página
   (solo se AÑADE; reutiliza tokens del sistema CENTRO)
   ============================================================ */

/* 1) HERO INSTITUCIONAL — navy, solo título, anclado abajo-izquierda */
.hero--about {
  position: relative;
  background: #081226;
  min-height: 600px;
  height: 92vh;
  display: flex;
  align-items: flex-end;
  /* respiro inferior igual al de los otros heroes (~120px) */
  padding-block: clamp(3rem, 8vh, 5rem) clamp(8rem, 18vh, 12rem);
  --text: #FFFFFF;
  --border: rgba(255,255,255,0.16);
  --accent: #5AA0E0;
}
html[data-theme="dark"] .hero--about { background: #081226; }
.hero--about .wrap { position: relative; z-index: 2; width: 100%; }
/* Animación de red 3D (globo de nodos + partículas) detrás del título */
.hero-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hero-net__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,18,38,0.7) 0%, rgba(8,18,38,0.25) 38%, rgba(8,18,38,0) 60%);
}
@media (max-width: 640px) {
  .hero-net__veil { background: linear-gradient(180deg, rgba(8,18,38,0.2), rgba(8,18,38,0.78)); }
}
.about-hero__title {
  font-family: var(--font-display); font-weight: 700; color: #FFFFFF;
  font-size: clamp(2.2rem, 1.45rem + 3.1vw, 3.8rem); line-height: 1.1;
  letter-spacing: -0.01em; max-width: 18ch; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
/* Entrada dinámica del título (revelado por palabra, tipo máscara) */
.about-hero__title .word-mask {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding-bottom: 0.14em; margin-bottom: -0.14em;
}
.about-hero__title .word {
  display: inline-block; transform: translateY(118%); opacity: 0;
  will-change: transform, opacity;
}
.about-hero__title.is-in .word {
  transform: none; opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
/* Garantía de visibilidad: estado final sin transición (iframe/pestaña en 2º plano) */
.about-hero__title.is-shown .word { transform: none; opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .about-hero__title .word { transform: none; opacity: 1; transition: none; }
}

/* Pilares — aparición de texto carácter por carácter (al cambiar de pestaña) */
.char-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  animation: charIn .5s cubic-bezier(.22,.61,.36,1) forwards;
}
.char-reveal .char.space { width: 0.28em; }
/* Agrupa las letras por palabra para que NUNCA se corten a la mitad */
.char-reveal .char-word { display: inline-block; white-space: nowrap; }
@keyframes charIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .char-reveal .char { animation: none; opacity: 1; transform: none; }
}

/* 2) ¿QUIÉNES SOMOS? — imagen apaisada redondeada (foto grupal 1920×1280, 3:2 → completa, sin recortar gente) */
.about-square.ph {
  /* padding-bottom en vez de aspect-ratio: misma proporción 3/2 pero sin la
     propiedad aspect-ratio (que en Windows con escalado fraccionario deja la
     foto borrosa). 2/3 = 66.6667%. */
  width: 100%; max-width: 710px; min-height: 0;
  height: 0; padding-bottom: 66.6667%;
  border-radius: 15px; margin-left: auto;
}
.p-18 { font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }
.p-18 + .p-18 { margin-top: var(--sp-3); }

/* 3) NUESTRO PROPÓSITO — cita grande azul centrada */
.proposito-quote {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(1.05rem, 0.92rem + 0.9vw, 1.4rem); line-height: 1.45;
  color: var(--accent); text-align: center; text-wrap: balance;
  max-width: 980px; margin: var(--sp-4) auto 0;
}

/* 4) + 7) COLUMNAS CON DIVISORES VERTICALES (valores / cultura) */
.col-split { display: grid; grid-template-columns: repeat(3, 1fr); }
.col-split--4 { grid-template-columns: repeat(4, 1fr); }
.col-split__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.7rem; padding: var(--sp-3) clamp(1rem, 3vw, 2.25rem);
  border-left: 1px solid var(--border);
}
.col-split__item:first-child { border-left: 0; }
.col-split__item .icon-chip {
  margin: 0 auto 0.25rem;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.col-split__item .icon-chip { color: var(--ic, var(--accent)); }
.col-split__item:hover .icon-chip {
  transform: scale(1.04);
  background: var(--ic-soft, var(--accent-soft));
  box-shadow: 0 0 30px 6px var(--ic-soft, var(--accent-soft));
}
.col-split__label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); letter-spacing: 0.02em;
  line-height: 1.15; color: var(--text);
}
.col-split__desc { font-size: var(--fs-body); color: var(--text-muted); max-width: 28ch; line-height: 1.5; }
@media (max-width: 820px) {
  .col-split, .col-split--4 { grid-template-columns: 1fr 1fr; }
  .col-split__item:nth-child(odd) { border-left: 0; }
  .col-split__item { border-top: 1px solid var(--border); }
  .col-split__item:nth-child(1), .col-split--4 .col-split__item:nth-child(2) { border-top: 0; }
}
@media (max-width: 520px) {
  .col-split, .col-split--4 { grid-template-columns: 1fr; }
  .col-split__item { border-left: 0; border-top: 1px solid var(--border); }
  .col-split__item:first-child { border-top: 0; }
}

/* 5) PILARES ESTRATÉGICOS — tarjeta con pestañas tipo línea de tiempo */
.pillars-card {
  background: var(--surface-2); border: 2px solid var(--border);
  border-radius: 15px; padding: clamp(1.75rem, 4vw, 3.5rem);
}
.pillar-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: clamp(1.75rem, 4vw, 2.75rem) auto clamp(2rem, 5vw, 3.25rem);
  max-width: 820px; position: relative;
}
/* Línea continua que une los 3 pilares (de centro a centro: 1/6 → 5/6) */
.pillar-tabs::before {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: var(--border-strong); z-index: 0; pointer-events: none;
}
.pillar-tab {
  background: none; border: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 0 0.5rem;
}
.pillar-tab__label {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.55rem); color: var(--text-faint);
  transition: color var(--t) var(--ease);
}
.pillar-tab.active .pillar-tab__label { color: var(--text); }
.pillar-tab__track { position: relative; width: 100%; height: 2px; background: transparent; z-index: 1; }
.pillar-tab__track::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--surface-2); border: 2px solid var(--border-strong);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pillar-tab.active .pillar-tab__track::before { background: var(--text); border-color: var(--text); }
/* Latido suave del puntito activo */
@media (prefers-reduced-motion: no-preference) {
  .pillar-tab.active .pillar-tab__track::before { animation: pillarBeat 1.6s ease-in-out infinite; }
}
@keyframes pillarBeat {
  0%   { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 var(--accent-line); }
  70%  { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 10px transparent; }
  100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 transparent; }
}
/* Onda que recorre la línea de un pilar al siguiente */
.pillar-wave-svg {
  position: absolute; left: 16.667%; width: 66.666%; bottom: -10px; height: 40px;
  overflow: visible; z-index: 2; pointer-events: none; opacity: 0;
  transition: opacity .25s ease;
}
.pillar-wave-svg path {
  fill: none; stroke: var(--accent, #2a6fdb); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.pillar-panel {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.pillar-panel__title { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem); margin-bottom: var(--sp-3); }
.pillar-panel__desc { font-size: var(--fs-body); line-height: 1.6; color: var(--text-muted); }
.pillar-panel .ph {
  /* La caja debe calzar EXACTO con la proporción de la foto servida para que
     background-size:cover NO recorte (cualquier recorte manda la imagen a la
     ruta de compositing borrosa de Chromium en Windows). Las fotos de pilar
     v4 son 941×747 → padding-bottom = 747/941 = 79.3836%. */
  width: 100%; max-width: 560px; min-height: 0;
  height: 0; padding-bottom: 79.3836%;
  border-radius: 15px; margin-left: auto;
}
@media (max-width: 760px) {
  .pillar-panel { grid-template-columns: 1fr; }
  .pillar-panel .ph { margin-inline: auto; }
  /* Recorta el contenido al arrastrar los pilares para un efecto de carrusel
     limpio (que no se salga de la tarjeta). Solo aplica en móvil. */
  .pillars-card { overflow: hidden; }
}

/* ===== Ajustes de comentarios ===== */
/* Cultura · ícono “Innovación” (col 1) amarillo */
.col-split--4 .col-split__item:nth-child(1) .icon-chip { --ic:#FDC633; --ic-soft:rgba(253,198,51,.18); }

/* Título de pilares: no cortar palabras a la mitad */
.pillar-panel__title { overflow-wrap: normal; word-break: keep-all; hyphens: none; text-wrap: balance; }

/* Título “Nuestros Valores” bicolor (palabra 1 amarillo, palabra 2 azul) */
main > section:nth-child(4) .reveal-text > span:nth-child(1),
main > section:nth-child(4) .reveal-text > span:nth-child(1) > span { color:#000000; }
main > section:nth-child(4) .reveal-text > span:nth-child(2),
main > section:nth-child(4) .reveal-text > span:nth-child(2) > span { color:#14A0BB; }

/* Hero · "transformación digital" en azul (el título se divide en palabras por JS) */
.about-hero__title .word-mask:nth-child(3) .word,
.about-hero__title .word-mask:nth-child(4) .word { color:#14A0BB; }

/* Pilares · tarjeta #666666 con texto y puntitos en blanco */
.pillars-card { background:#666666; border-color:rgba(255,255,255,.24); }
.pillars-card__title { color:#FFFFFF; text-align:center; margin:0 0 clamp(1.25rem,3vw,2rem); }
.pillars-card__title > span:nth-child(1),
.pillars-card__title > span:nth-child(1) > span { color:#FDC633; }
.pillars-card .pillar-tab__label { color:rgba(255,255,255,.72); }
.pillars-card .pillar-tab.active .pillar-tab__label { color:#FFFFFF; }
.pillars-card .pillar-panel__title { color:#FFFFFF; }
.pillars-card .pillar-panel__desc { color:rgba(255,255,255,.86); }
.pillars-card .pillar-tabs::before { background:rgba(255,255,255,.38); }
.pillars-card .pillar-tab__track::before { background:#666666; border-color:#FFFFFF; }
.pillars-card .pillar-tab.active .pillar-tab__track::before { background:#FFFFFF; border-color:#FFFFFF; }
/* La onda que viaja al cambiar de pilar va en blanco (no azul) */
.pillars-card .pillar-wave-svg path { stroke:#FFFFFF; }

/* Fondo (Figma): banda azul-grisácea que arranca a media tarjeta de Pilares
   y baja hasta cubrir "Empresas". La tarjeta gris flota mitad-blanco/mitad-azul. */
.section.nos-pilares { position: relative; isolation: isolate; }
.section.nos-pilares::after {
  content: ""; position: absolute; left: 0; right: 0; top: 42%; bottom: 0;
  background: var(--bg-2); z-index: -1; pointer-events: none;
}