/* ==========================================================================
   PACAL Care Systems — Réplica HTML/CSS puro
   Paleta: navy #002680, coral #FFA17A
   Tipografía:
     - Highlight/Headers: Roboto
     - Body fallbacks: Helvetica, Arial, sans-serif
     - Monospace: Roboto Mono / monospace (temporizadores/remarcados)
   ========================================================================== */

:root {
  /* Color Palette */
  --navy-900: #000c30;
  --navy-850: #001247;
  --navy-800: #001f66;
  --navy-700: #002e99;
  --navy-600: #0045d8;
  --coral-500: #ff9b7a;
  --coral-600: #ff8560;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --surface-0: #ffffff;
  --surface-50: #f7f8fc;
  --surface-100: #eef1f9;
  --surface-tint-purple: #f1eefb;
  --surface-tint-green: #eaf7f1;
  --surface-tint-violet: #f2eefc;
  --surface-tint-orange: #fdeee7;
  --border-soft: #e2e6f0;

  /* Typography System */
  --font-highlight: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --max-width: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 12px 32px -16px rgba(15, 23, 42, 0.18);
  --shadow-soft: 0 4px 14px -6px rgba(15, 23, 42, 0.12);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: var(--font-highlight);
  margin: 0;
  line-height: 1.15;
  font-weight: 700;
}

p {
  font-family: var(--font-body);
  margin: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mono, .timer, code, pre {
  font-family: var(--font-mono);
}

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

:focus-visible {
  outline: 2px solid var(--coral-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Eyebrow / badge ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-highlight);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid rgba(255, 133, 96, 0.35);
  color: var(--navy-800);
}

.eyebrow--on-dark {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-family: var(--font-highlight);
  font-weight: 500;
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.eyebrow-check {
  color: var(--coral-500);
  font-weight: 900;
  font-size: 13px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-highlight);
  font-weight: 700;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-icon {
  font-size: 15px;
  line-height: 1;
}

.btn--coral {
  background: linear-gradient(135deg, #ff9b7a 0%, #f07850 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(240, 120, 80, 0.35);
  border: none;
}

.btn--coral:hover {
  background: linear-gradient(135deg, #ff8c64 0%, #e0663d 100%);
  box-shadow: 0 6px 22px rgba(240, 120, 80, 0.45);
}

.btn--outline-dark {
  background: rgba(0, 20, 80, 0.35);
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-weight: 500;
  backdrop-filter: blur(8px);
}

.btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn--outline-header {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 22px;
}

.btn--outline-header:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

.btn--navy {
  background: var(--navy-800);
  color: #ffffff;
}

.btn--navy:hover {
  background: var(--navy-700);
}

.btn--outline-navy {
  background: transparent;
  border-color: var(--navy-800);
  color: var(--navy-800);
}

.btn--outline-navy:hover {
  background: var(--surface-100);
}

.btn--ghost-red {
  background: var(--surface-100);
  color: #ff0000;
}

.btn--ghost-red:hover {
  background: var(--surface-50);
}

.btn--full {
  width: 100%;
  justify-content: center;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.btn-icon {
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-icon--youtube {
  width: auto;
  height: 31px;
}

.eyebrow-check {
  color: var(--coral-500);
  font-size: 16px;
  line-height: 1;
}

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.logo-img {
  height: 38px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
  transition: opacity 0.2s ease;
}

.logo-img:hover {
  opacity: 0.9;
}

.logo-img--footer {
  height: 32px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
}

.main-nav a:not(.btn) {
  font-family: var(--font-highlight);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.15s ease;
}

.main-nav a:not(.btn):hover {
  color: #ffffff;
}

.nav-actions {
  display: flex;
  align-items: center;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: #ffffff;
}

.nav-toggle svg {
  width: 24px;
  height: 24px;
}

/* ---------- Hero Wrapper & Hero ---------- */
.hero-wrapper {
  position: relative;
  background: radial-gradient(130% 120% at 75% 20%, #003dbb 0%, #00238c 35%, #001247 75%, #000c30 100%);
  overflow: hidden;
}

.hero-wrapper::before {
  content: "";
  position: absolute;
  top: -20%;
  right: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 85, 255, 0.22) 0%, rgba(0, 85, 255, 0) 70%);
  pointer-events: none;
}

.hero {
  position: relative;
  background: transparent;
  padding-block: 72px 120px;
  overflow: hidden;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-copy {
  position: relative;
  max-width: 620px;
  background: rgba(0, 12, 48, 0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.hero-copy h1 {
  font-family: var(--font-highlight);
  color: #ffffff;
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-block: 20px 18px;
  line-height: 1.18;
}

.hero-copy p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  max-width: 46ch;
  margin-bottom: 32px;
  line-height: 1.6;
}

/* Variante que ocupa todo el ancho de contenido disponible (about.html),
   en vez del panel angosto de 620px pensado para el hero de la home. */
.hero-copy--wide {
  max-width: none;
}

.hero-copy--wide p {
  max-width: none;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.particle-sphere {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Generic section ---------- */
.section {
  padding-block: 88px;
}

.section--tint {
  background: var(--surface-50);
}

.section-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: 48px;
}

.section-head .eyebrow {
  margin-bottom: 18px;
}

.section-head h2 {
  font-size: clamp(26px, 3vw, 34px);
  color: var(--ink-900);
  margin-bottom: 14px;
}

.section-head p {
  color: var(--ink-500);
  font-size: 15.5px;
}

.text-accent {
  color: var(--coral-600);
}

/* ---------- About values grid ---------- */
.values-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 32px;
}

/* Línea que conecta las 3 piezas, a la altura de sus títulos. */
.values-grid::before {
  content: "";
  position: absolute;
  top: 44px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 2px;
  background: linear-gradient(90deg, var(--coral-500), var(--navy-700), var(--coral-500));
  opacity: 0.35;
  z-index: 0;
}

.value-item {
  position: relative;
  z-index: 1;
  display: block;
  text-align: center;
  background: #ffffff;
  border: 2px solid var(--coral-500);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* "pre-animate" solo lo añade el JS: si no llega a ejecutarse, las tarjetas
   se muestran directamente sin depender de la animación de entrada. */
.value-item.pre-animate {
  opacity: 0;
  transform: translateY(14px);
}

.value-item.pre-animate.is-visible {
  animation: value-item-in 0.55s ease forwards;
}

.value-item:nth-child(2).is-visible {
  animation-delay: 0.12s;
}

.value-item:nth-child(3).is-visible {
  animation-delay: 0.24s;
}

@keyframes value-item-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.value-item:hover,
.value-item:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.value-item h3 {
  font-family: var(--font-highlight);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

/* Colapsado por defecto (0fr): solo se ve el título. En hover/focus (equipos
   con ratón) o siempre en pantallas pequeñas/táctiles, se expande a 1fr y
   aparece el resto del texto, sin necesidad de max-height fijo. */
.value-item-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.value-item-detail-inner {
  overflow: hidden;
}

.value-item-detail-inner p {
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.55;
}

.value-item-detail-inner p strong {
  color: var(--coral-600);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .value-item:hover .value-item-detail,
  .value-item:focus-visible .value-item-detail {
    grid-template-rows: 1fr;
  }
}

/* Sin ratón fiable (táctil) o pantalla pequeña: siempre desplegado. */
@media (hover: none), (max-width: 720px) {
  .value-item-detail {
    grid-template-rows: 1fr;
  }
}

.values-cta {
  text-align: center;
  margin-top: 40px;
}

/* ---------- Video / channel section ---------- */
.video-wrap {
  max-width: var(--max-width);
  margin-inline: auto;
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--ink-900);
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-cta {
  text-align: center;
  margin-top: 28px;
}

/* ---------- Solutions list ---------- */
.solutions-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 8px;
}

.solution-card {
  display: flex;
  align-items: stretch;
  background: var(--surface-tint-purple);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.solution-card:hover,
.solution-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.solution-card:nth-child(2) {
  background: var(--surface-tint-green);
  flex-direction: row-reverse;
}

.solution-card:nth-child(3) {
  background: var(--surface-tint-orange);
}

.solution-card-media {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  aspect-ratio: 4 / 3;
}

.solution-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-card-body {
  flex: 1;
  padding: 30px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.solution-card-body h3 {
  font-family: var(--font-highlight);
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 10px;
}

.solution-card-body p {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-700);
  line-height: 1.6;
  max-width: 62ch;
  margin-bottom: 16px;
}

.solution-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-highlight);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy-800);
}

.solution-card:hover .solution-card-link {
  color: var(--coral-600);
}

.solution-card-link .btn-icon {
  font-size: 16px;
  transition: transform 0.18s ease;
}

.solution-card:hover .solution-card-link .btn-icon {
  transform: translateX(3px);
}

/* ---------- Training (Formación) split section ---------- */
.training {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  padding-block: 88px;
}

.training .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "intro list" "cta list";
  gap: 16px 56px;
  align-items: center;
}

.training-copy {
  grid-area: intro;
}

.training-cta {
  grid-area: cta;
}

.training-list {
  grid-area: list;
}

.training-copy h2 {
  font-family: var(--font-highlight);
  color: #ffffff;
  font-size: clamp(26px, 3vw, 32px);
  margin-block: 18px 16px;
}

.training-copy p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  max-width: 48ch;
  margin-bottom: 0;
}

.training-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.training-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease;
}

.training-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.training-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  color: #ffffff;
}

.training-icon svg {
  width: 18px;
  height: 18px;
}

.training-item-body {
  flex: 1;
}

.training-item-body h3 {
  font-family: var(--font-highlight);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.training-item-body p {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.6);
  font-size: 12.5px;
  line-height: 1.5;
}

.training-chevron {
  color: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}

/* ---------- Results / stats ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 48px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 700;
  color: var(--navy-800);
}

.stat-label {
  font-size: 12.5px;
  color: var(--ink-500);
  margin-top: 6px;
  line-height: 1.4;
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: var(--navy-900);
  padding-block: 80px;
  text-align: center;
}

.final-cta h2 {
  color: #ffffff;
  font-size: clamp(24px, 3vw, 32px);
  font-family: var(--font-highlight);
  font-weight: 700;
  margin-bottom: 14px;
  text-align: center;
}

.final-cta p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 15.5px;
  font-family: var(--font-body);
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: 32px;
  text-align: center;
}

.final-cta .hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-900);
  padding-block: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-copy {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.45);
}

.site-footer .logo-mark {
  color: #ffffff;
  font-size: 17px;
}

.site-footer .logo-sub {
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- About page: hero video facade ---------- */
.hero-video {
  max-width: 760px;
  margin-inline: auto;
  margin-top: 40px;
}

.video-facade {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
}

.video-facade-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.video-facade-play img {
  width: 76px;
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s ease;
}

.video-facade:hover .video-facade-play img,
.video-facade:focus-visible .video-facade-play img {
  transform: scale(1.08);
}

/* ---------- About page: hub de especialidades ---------- */
.specialty-hub {
  position: relative;
}

.hub {
  position: relative;
  width: min(440px, 100%);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 120px;
  height: 120px;
  padding: 18px;
  border-radius: 50%;
  background: var(--navy-800);
  box-shadow: var(--shadow-card);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

.hub-logo {
  width: 100%;
  height: auto;
}

/* Líneas de conexión: divs finos posicionados/rotados por JS (ver
   specialty-hub.js), no un SVG estático, para poder recalcular el ángulo
   dinámicamente si se añaden o quitan especialidades. */
.hub-line {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  height: 2px;
  background: var(--border-soft);
  transform-origin: left center;
  transition: background 0.2s ease, height 0.2s ease;
}

.hub-line.is-active {
  height: 3px;
  background: var(--coral-500);
}

.hub-nodes {
  /* absolute + inset:0 para que ocupe exactamente la misma caja que .hub
     (100% ancho/alto). Como sus hijos son todos position:absolute, un
     "position: relative" aquí colapsaría la altura del <ul> a 0 y el
     top/left en % de los nodos se calcularía mal (pegado arriba del hub
     en vez de centrado, a diferencia del logo y las líneas). */
  position: absolute;
  inset: 0;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hub-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 88px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid var(--coral-500);
  border-radius: 50%;
  background: #ffffff;
  font-family: var(--font-highlight);
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  transition: transform 0.55s ease, opacity 0.55s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hub.is-visible .hub-node {
  opacity: 1;
  transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(1);
}

.hub-node:hover,
.hub-node:focus-visible,
.hub-node.is-active {
  background: var(--coral-500);
  box-shadow: var(--shadow-soft);
}

.hub-node-icon {
  width: 26px;
  height: 26px;
  color: var(--navy-800);
}

.hub-node:hover .hub-node-icon,
.hub-node:focus-visible .hub-node-icon,
.hub-node.is-active .hub-node-icon {
  color: #ffffff;
}

.hub-node-label {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy-800);
  text-align: center;
}

.hub-node:hover .hub-node-label,
.hub-node:focus-visible .hub-node-label,
.hub-node.is-active .hub-node-label {
  color: #ffffff;
}

.hub-detail {
  min-height: 3em;
  max-width: 60ch;
  margin: 32px auto 0;
  color: var(--ink-700);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

/* ---------- About page: socios principales ---------- */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.partner-card {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}

.partner-photo {
  width: 96px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-100);
}

.partner-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.partner-name {
  font-family: var(--font-highlight);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 2px;
}

.partner-role {
  font-family: var(--font-highlight);
  font-size: 13px;
  font-weight: 700;
  color: var(--coral-600);
  margin-bottom: 12px;
}

.partner-bio {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-500);
  line-height: 1.6;
  margin-bottom: 14px;
}

.partner-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-100);
  color: var(--navy-800);
  transition: background 0.18s ease, color 0.18s ease;
}

.partner-linkedin:hover,
.partner-linkedin:focus-visible {
  background: var(--navy-800);
  color: #ffffff;
}

.partner-linkedin svg {
  width: 17px;
  height: 17px;
}

/* ---------- Asesoría: hero antes/después ---------- */
.chaos-order {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  margin-top: 48px;
}

.order-panel {
  background: var(--surface-0);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 26px 24px;
  min-height: 250px;
}

/* El panel "antes" no lleva caja propia: la nube de abajo hace de
   contenedor visual. */
.chaos-panel {
  position: relative;
  min-height: 250px;
}

.chaos-panel-label {
  display: block;
  font-family: var(--font-highlight);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-bottom: 18px;
}

/* Nube: varios círculos/óvalos del mismo color superpuestos en un único
   <g>, para que se fundan en una sola silueta sin costuras visibles. La
   sombra se aplica al <svg> completo (no a cada círculo) para que salga
   una única sombra recortada a la silueta resultante. */
.chaos-cloud {
  position: relative;
  min-height: 260px;
}

.chaos-cloud-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.14));
}

/* Panel "antes": cada mensaje vive en un "slot" con posición fija (sin
   solaparse) dentro de la nube. El slot controla la aparición al hacer
   scroll (opacity/translateY, disparada una vez); la tarjeta interior
   controla el flotado continuo (animation en bucle) — se separan en dos
   elementos porque una animation y una transition sobre el mismo "transform"
   del mismo elemento se pisarían entre sí. */
.chaos-cards {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.chaos-card-slot {
  position: absolute;
  width: 42%;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.chaos-cards.is-visible .chaos-card-slot {
  opacity: 1;
  transform: translateY(0);
}

.chaos-card-slot--1 {
  top: 10%;
  left: 6%;
}

.chaos-card-slot--2 {
  top: 8%;
  left: 52%;
}

.chaos-card-slot--3 {
  top: 58%;
  left: 4%;
}

.chaos-card-slot--4 {
  top: 56%;
  left: 50%;
}

.chaos-cards.is-visible .chaos-card-slot--1 {
  transition-delay: 0s;
}

.chaos-cards.is-visible .chaos-card-slot--2 {
  transition-delay: 0.12s;
}

.chaos-cards.is-visible .chaos-card-slot--3 {
  transition-delay: 0.24s;
}

.chaos-cards.is-visible .chaos-card-slot--4 {
  transition-delay: 0.36s;
}

.chaos-card {
  padding: 12px 14px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-highlight);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-900);
  text-align: center;
  transform: rotate(var(--rot, 0deg));
  animation: chaos-float 5s ease-in-out infinite;
  animation-play-state: paused;
}

.chaos-cards.is-visible .chaos-card {
  animation-play-state: running;
}

.chaos-card-slot--2 .chaos-card,
.chaos-card-slot--3 .chaos-card {
  animation-name: chaos-float-alt;
  animation-duration: 6s;
}

.chaos-card-slot--4 .chaos-card {
  animation-duration: 4.5s;
}

@keyframes chaos-float {
  0%,
  100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(var(--rot, 0deg)) translate(4px, -8px);
  }
}

@keyframes chaos-float-alt {
  0%,
  100% {
    transform: rotate(var(--rot, 0deg)) translate(0, 0);
  }
  50% {
    transform: rotate(var(--rot, 0deg)) translate(-5px, 7px);
  }
}

.chaos-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
}

.chaos-arrow-svg {
  width: 100%;
  height: 24px;
  overflow: visible;
}

.chaos-arrow-line {
  fill: none;
  stroke: var(--coral-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease;
}

.chaos-arrow-head {
  fill: none;
  stroke: var(--coral-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.chaos-arrow.is-visible .chaos-arrow-line {
  stroke-dashoffset: 0;
}

.chaos-arrow.is-visible .chaos-arrow-head {
  opacity: 1;
  transition-delay: 0.5s;
}

.order-timeline-wrap {
  position: relative;
}

/* Línea vertical dibujada con stroke-dasharray/dashoffset (normalizado a 1
   con pathLength="1", así no hace falta calcular la longitud real en JS).
   Va de centro del primer punto a centro del último: por eso el wrapper se
   recorta "radio del punto" arriba y abajo (7px = mitad de .order-dot). */
.order-line-wrap {
  position: absolute;
  left: 6px;
  top: 7px;
  bottom: 7px;
  width: 2px;
  z-index: 0;
}

.order-line-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.order-line-path {
  fill: none;
  stroke: var(--coral-500);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1s ease;
}

.order-timeline-wrap.is-visible .order-line-path {
  stroke-dashoffset: 0;
}

.order-timeline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.order-step {
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.order-timeline-wrap.is-visible .order-step {
  opacity: 1;
  transform: translateY(0);
}

.order-timeline-wrap.is-visible .order-step:nth-child(1) {
  transition-delay: 0.05s;
}

.order-timeline-wrap.is-visible .order-step:nth-child(2) {
  transition-delay: 0.25s;
}

.order-timeline-wrap.is-visible .order-step:nth-child(3) {
  transition-delay: 0.45s;
}

.order-timeline-wrap.is-visible .order-step:nth-child(4) {
  transition-delay: 0.65s;
}

.order-dot {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--coral-500);
  border: 2px solid var(--surface-0);
  box-shadow: 0 0 0 2px var(--coral-500);
}

.order-text {
  font-family: var(--font-highlight);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-900);
}

/* ---------- Asesoría: contraste ejecución vs. entendimiento ---------- */
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.contrast-card {
  background: var(--surface-0);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 30px 28px;
}

.contrast-card--check {
  border-color: var(--coral-500);
}

.contrast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 22px;
  margin-bottom: 16px;
}

.contrast-icon--cross {
  background: var(--surface-100);
  color: var(--ink-500);
}

.contrast-icon--check {
  background: var(--coral-500);
  color: #ffffff;
}

.contrast-card h3 {
  font-family: var(--font-highlight);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 10px;
}

.contrast-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.6;
}

/* ---------- Asesoría: proceso + toggle de modalidad ---------- */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

.process-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 24px 26px;
}

.process-step-number {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-family: var(--font-highlight);
  font-weight: 900;
  font-size: 15px;
}

.process-step-body h3 {
  font-family: var(--font-highlight);
  font-size: 17px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 6px;
}

.process-step-body p {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-500);
  line-height: 1.6;
}

.modality-toggle-wrap {
  max-width: 760px;
  margin: 28px auto 18px;
  text-align: center;
}

.modality-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: var(--surface-100);
  border-radius: var(--radius-pill);
}

.modality-btn {
  border: 0;
  background: transparent;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-family: var(--font-highlight);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-500);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.modality-btn[aria-pressed="true"] {
  background: var(--navy-800);
  color: #ffffff;
}

.modality-panels {
  max-width: 760px;
  margin-inline: auto;
}

/* Colapsa/expande con la técnica grid-template-rows 0fr/1fr (misma que ya
   usamos en las tarjetas de "Sobre nosotros"): permite una transición de
   altura suave sin necesidad de conocer la altura real del contenido. */
.modality-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  padding: 0 26px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--surface-0);
  margin-top: 0;
  transition: grid-template-rows 0.4s ease, opacity 0.3s ease, padding 0.4s ease, margin 0.4s ease, border-color 0.4s ease;
}

.modality-panel.is-active {
  grid-template-rows: 1fr;
  opacity: 1;
  padding: 24px 26px;
  margin-top: 18px;
}

.modality-panel-inner {
  overflow: hidden;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* ---------- Asesoría: entregables ---------- */
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.deliverable-card {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 26px 22px;
}

.deliverable-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--surface-tint-orange);
  color: var(--navy-800);
  margin-bottom: 16px;
}

.deliverable-card h3 {
  font-family: var(--font-highlight);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: 8px;
}

.deliverable-card p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.6;
}

/* ---------- Asesoría: scroll-reveal genérico ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger por grupo: nth-child se cuenta entre hermanos reales, así que
   basta con escoger el contenedor de cada grupo para que cada uno tenga
   su propia cascada independiente. */
.contrast-grid .reveal:nth-child(2),
.deliverables-grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.process-steps .reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.process-steps .reveal:nth-child(3),
.deliverables-grid .reveal:nth-child(3) {
  transition-delay: 0.2s;
}

.deliverables-grid .reveal:nth-child(4) {
  transition-delay: 0.3s;
}

.training-areas .reveal:nth-child(2),
.presencial-grid .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.training-areas .reveal:nth-child(3),
.presencial-grid .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

.training-areas .reveal:nth-child(4),
.presencial-grid .reveal:nth-child(4) {
  transition-delay: 0.24s;
}

/* ---------- FoR: hub "equipo investigador" + 3 columnas ---------- */
.research-hub {
  margin-top: 48px;
}

/* En escritorio/tablet, .research-team-box es solo un contenedor: el
   aspecto de "caja" vive en .research-team-label (el pill, ancho completo
   para que las 3 líneas verticales lleguen a tocarlo) y en .research-columns
   debajo. En móvil (ver responsive) .research-team-box gana fondo propio
   para "abrazar" visualmente los tres servicios en una sola tarjeta, en vez
   de que parezcan cuatro cajas independientes. */
.research-team-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 56px;
  padding: 16px 26px;
  background: var(--surface-0);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-family: var(--font-highlight);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink-900);
  text-align: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.research-team-box.is-visible .research-team-label {
  opacity: 1;
  transform: scale(1);
}

.research-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Las 3 columnas se revelan a la vez (mismo transition-delay, muy corto),
   a diferencia del stagger largo de otras vistas: aquí un desfase notable
   sugeriría un orden de aparición y, por tanto, de importancia — y los tres
   servicios son igual de válidos por separado. */
.research-column {
  position: relative;
  display: block;
  text-align: center;
  background: var(--surface-0);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 28px 22px;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.research-columns.is-visible .research-column {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.research-column:hover,
.research-column:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.research-column--funding,
.research-column--tracking,
.research-column--outcome {
  border-color: var(--coral-500);
}

.research-column-line-wrap {
  position: absolute;
  left: 50%;
  top: -56px;
  width: 2px;
  height: 56px;
  transform: translateX(-50%);
}

.research-column-line-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.research-column-line-path {
  fill: none;
  stroke: var(--border-soft);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.5s ease;
}

.research-column--funding .research-column-line-path,
.research-column--tracking .research-column-line-path,
.research-column--outcome .research-column-line-path {
  stroke: var(--coral-500);
}

.research-columns.is-visible .research-column-line-path {
  stroke-dashoffset: 0;
  transition-delay: 0.05s;
}

.research-column-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 22px;
  margin-bottom: 14px;
}

.research-column--funding .research-column-icon {
  background: var(--surface-tint-orange);
  color: var(--coral-600);
}

.research-column--tracking .research-column-icon {
  background: var(--surface-100);
  color: var(--navy-800);
}

.research-column--outcome .research-column-icon {
  background: var(--surface-100);
  color: var(--navy-600);
}

.research-column h3 {
  font-family: var(--font-highlight);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 8px;
}

.research-column p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
}

/* ---------- FoR: detalle de cada servicio ---------- */
.research-detail {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.research-detail + .research-detail {
  margin-top: 20px;
}

.research-detail-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 26px;
}

.research-detail-icon--funding {
  background: var(--surface-tint-orange);
  color: var(--coral-600);
}

.research-detail-icon--tracking {
  background: var(--surface-100);
  color: var(--navy-800);
}

.research-detail-icon--outcome {
  background: var(--surface-100);
  color: var(--navy-600);
}

.research-detail-body h3 {
  font-family: var(--font-highlight);
  font-size: 21px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 10px;
}

.research-detail-when {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink-700);
  line-height: 1.6;
  margin-bottom: 16px;
}

.research-detail-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.research-detail-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-700);
  line-height: 1.55;
}

.research-detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral-500);
}

.research-detail-independent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  background: var(--surface-50);
  border-radius: var(--radius-pill);
  font-family: var(--font-highlight);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy-800);
}

.research-detail-independent .material-symbols-outlined {
  font-size: 16px;
  color: var(--coral-500);
}

/* ---------- Integración: hero "puente entre sistemas" ---------- */
.bridge {
  display: flex;
  align-items: center;
  margin-top: 48px;
}

.bridge-node {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 16px;
  background: var(--surface-0);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.bridge-node.is-visible {
  opacity: 1;
}

.bridge-node--internal {
  border-color: var(--navy-800);
}

.bridge-node--external {
  border-color: var(--coral-500);
}

.bridge-node-icon {
  font-size: 24px;
  margin-bottom: 2px;
}

.bridge-node--internal .bridge-node-icon {
  color: var(--navy-800);
}

.bridge-node--external .bridge-node-icon {
  color: var(--coral-600);
}

.bridge-node-label {
  font-family: var(--font-highlight);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink-900);
  margin-bottom: 2px;
}

/* Cada nodo agrupa varios sistemas/servicios reales bajo una misma
   categoría (interno o externo), para dejar claro que PACAL conecta
   "todos esos" sistemas, no solo uno. */
.bridge-node-tag {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-500);
  background: var(--surface-50);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}

.bridge-link {
  position: relative;
  flex: 1;
  height: 2px;
  min-width: 40px;
}

.bridge-link-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.bridge-link-path {
  fill: none;
  stroke: var(--coral-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s ease;
}

.bridge-link.is-visible .bridge-link-path {
  stroke-dashoffset: 0;
}

/* El sello "PACAL" aparece sobre cada línea, no fundido con ninguno de los
   sistemas: representa que PACAL gestiona esa integración concreta, tanto
   si conecta un servicio interno como uno externo. */
.bridge-link-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px 5px 7px;
  background: var(--surface-0);
  border: 1.5px solid var(--navy-800);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-highlight);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--navy-800);
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bridge-link-badge.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

.bridge-link-badge-icon {
  width: 12px;
  height: 12px;
  color: var(--navy-800);
}

.bridge-center {
  flex: 0 0 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 18px;
  background: var(--navy-800);
  border: 2px solid var(--coral-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-align: center;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.bridge-center.is-visible {
  opacity: 1;
  transform: scale(1);
}

.bridge-center-icon {
  font-size: 30px;
  color: #ffffff;
}

.bridge-center-label {
  font-family: var(--font-highlight);
  font-weight: 800;
  font-size: 14.5px;
  color: #ffffff;
}

.bridge-anchor {
  text-align: center;
  margin-top: 32px;
}

.bridge-anchor a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-highlight);
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease;
}

.bridge-anchor a:hover,
.bridge-anchor a:focus-visible {
  color: #ffffff;
}

.bridge-anchor .material-symbols-outlined {
  font-size: 16px;
}

/* ---------- Integración: cumplimiento y seguridad ---------- */
.compliance-section {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  padding-block: 88px;
}

.compliance-section .section-head h2 {
  color: #ffffff;
}

.compliance-section .section-head p {
  color: rgba(255, 255, 255, 0.72);
}

.compliance-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 720px;
  margin-inline: auto;
}

.compliance-badge {
  text-align: center;
}

.compliance-seal {
  width: 120px;
  height: 120px;
  margin-bottom: 18px;
}

.compliance-badge h3 {
  font-family: var(--font-highlight);
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}

.compliance-badge p {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
}

/* ---------- Formaciones: áreas de la formación asíncrona ---------- */
.training-areas {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 820px;
  margin-inline: auto;
}

.training-area-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.training-area-card:hover {
  border-color: var(--coral-500);
  box-shadow: var(--shadow-soft);
}

.training-area-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface-tint-orange);
  color: var(--navy-800);
  font-size: 22px;
}

.training-area-body {
  flex: 1;
  min-width: 0;
}

.training-area-body h3 {
  font-family: var(--font-highlight);
  font-size: 15.5px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 3px;
}

.training-area-body p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.5;
}

/* ---------- Formaciones: diferenciadores de la formación presencial ---------- */
.presencial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.presencial-card {
  background: var(--surface-0);
  border: 2px solid var(--coral-500);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  text-align: center;
}

.presencial-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-800);
  color: #ffffff;
  font-size: 24px;
  margin-bottom: 16px;
}

.presencial-card h3 {
  font-family: var(--font-highlight);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 8px;
}

.presencial-card p {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
}

/* Detalle sutil que refuerza "en directo, sin diapositivas": un cursor de
   terminal parpadeando junto al título. Empieza pausado y solo arranca
   cuando la tarjeta entra en viewport (misma lógica de "una vez al hacer
   scroll" que el resto de animaciones del sitio), en vez de parpadear
   permanentemente desde la carga de la página. */
.cursor-blink {
  display: inline-block;
  font-family: var(--font-mono);
  color: var(--coral-500);
  animation: cursor-blink 1s step-end infinite;
  animation-play-state: paused;
}

.presencial-card--live.is-visible .cursor-blink {
  animation-play-state: running;
}

@keyframes cursor-blink {
  0%,
  50% {
    opacity: 1;
  }
  50.01%,
  100% {
    opacity: 0;
  }
}

/* ---------- Formaciones: vídeo guiado por scroll ----------
   El wrapper reserva exactamente 100vh en el flujo normal del documento (un
   único "hueco" de pantalla, no una franja larga que recorrer). Mientras el
   bloque está activo, training-scroll-video.js intercepta cada gesto de
   scroll (rueda/touch/teclado) y avanza o retrocede un checkpoint por gesto
   — nunca de forma proporcional a la distancia scrolleada. El panel
   (.training-scroll-video-sticky) descansa en position:sticky como estado
   base (funciona razonablemente incluso sin JS); el JS añade "is-locked"
   para pasarlo a position:fixed mientras bloquea el scroll de la página, y
   lo quita al soltar — como scrollY nunca se mueve durante el bloqueo (todo
   gesto interceptado lleva preventDefault), volver a sticky no necesita
   ningún ajuste de scroll. Con prefers-reduced-motion (o sin soporte de
   IntersectionObserver) el JS añade "is-static": aquí eso anula la reserva
   de 100vh y el panel vuelve a su altura de contenido normal, sin bloqueo
   ni fondo a pantalla completa. */
.training-scroll-video {
  position: relative;
  height: 100vh;
}

.training-scroll-video.is-static {
  height: auto;
}

.training-scroll-video-sticky {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-inline: 24px;
  background: #000000;
  overflow: hidden;
  /* Sin esto, .site-header (z-index: 50, dentro del .hero-wrapper anterior
     en el DOM) puede pintarse por encima de este panel en cualquier
     instante en que ambos coincidan en el viewport (p.ej. al entrar desde
     abajo con scroll rápido, mientras el bloqueo todavía está corrigiendo
     la posición): el header "se mete" visualmente en la sección animada.
     Por encima de 50 pero por debajo del menú móvil (100/101) para no
     tapar ese menú si llegara a abrirse mientras este panel está activo. */
  z-index: 60;
}

.training-scroll-video-sticky.is-locked {
  position: fixed;
  top: 0;
  left: 0;
}

.training-scroll-video.is-static .training-scroll-video-sticky {
  position: static;
  height: auto;
  padding-block: 56px;
}

/* Tamaño del vídeo: al menos el ancho de contenido del sitio en pantallas
   normales (min(96vw, 1600px) supera --max-width: 1180px salvo en ventanas
   muy estrechas), pero sin desbordar verticalmente — el tercer término de
   min() limita el ancho al que cabe bajo un techo de 78vh de alto a la
   proporción visible (recortada) del vídeo, así aspect-ratio nunca empuja
   el vídeo fuera de la pantalla en formatos bajos y anchos.

   Recorte: 10% de recorte a cada lado (izquierda y derecha) sobre la
   resolución nativa 1280x720 → ancho visible = 1280 * (1 - 2*0.10) = 1024,
   alto sin cambios = 720 → proporción visible 1024/720 (en vez del 16/9
   nativo). object-fit: cover con object-position centrado (el valor por
   defecto) es lo que hace el recorte real: al ser el contenedor menos
   ancho que el vídeo en proporción, cover escala para llenar el alto y
   recorta el sobrante de ancho a partes iguales por los dos lados. Para
   cambiar el % de recorte, recalcular este aspect-ratio (y el tercer
   término de min() de abajo, que usa la misma proporción para el techo de
   altura) a partir de 16*(1-2*pct)/9. */
.training-scroll-video-el {
  display: block;
  width: min(96vw, 1600px, calc(78vh * 1024 / 720));
  aspect-ratio: 1024 / 720;
  border-radius: 16px;
  background: #000000;
  object-fit: cover;
}

/* Mismo patrón de crossfade que el resto del sitio usa para texto que
   cambia sincronizado con una animación: el JS solo alterna "is-visible",
   la transición vive aquí. min-height reserva sitio para el checkpoint más
   largo para que el resto del layout no salte al cambiar de frase. Blanco
   sólido y negrita (no el rgba/regular de .hero-copy p) para que el texto
   tenga más peso visual sobre el fondo negro a pantalla completa.

   font-size fluido (clamp) en vez de un valor fijo: crece con el ancho de
   pantalla en vez de ser un tamaño único, así se ajusta bien en móvil
   (mínimo 1.25rem ≈ 20px) y es notablemente grande en pantallas de
   escritorio (máximo 2.35rem ≈ 37.6px), con el término intermedio
   (0.8rem + 1.7vw) creciendo de forma proporcional al ancho disponible en
   vez de saltar entre breakpoints fijos. max-width al ancho de contenido
   del sitio (--max-width) en vez de un valor propio más estrecho, para que
   el texto aproveche todo el ancho disponible en vez de quedar en una
   columna angosta centrada. */
.training-scroll-video-caption {
  max-width: var(--max-width);
  min-height: 2.6em;
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 0.8rem + 1.7vw, 2.35rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.training-scroll-video-caption.is-visible {
  opacity: 1;
}

/* Palabras destacadas con <strong> dentro del texto de animation-text.json:
   mismo naranja de marca que el resto del sitio usa como acento
   (.btn--coral, iconos de check, etc.), no un naranja nuevo inventado para
   este bloque. */
.training-scroll-video-caption strong {
  color: var(--coral-500);
  font-weight: 800;
}

/* ---------- Formaciones: carrusel "con quién hemos trabajado" ---------- */
.collab-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Scroll horizontal nativo (accesible por touch/trackpad/arrastre y por
   teclado gracias al tabindex), sin ninguna librería de carrusel. Las
   flechas y los puntitos de abajo son solo atajos adicionales sobre el
   mismo scroll. El padding-inline lateral es lo que permite que la
   primera y la última tarjeta también puedan quedar centradas (si no,
   chocarían contra el borde del contenedor antes de llegar al centro). */
.collab-track {
  --collab-card-width: clamp(240px, 27vw, 300px);
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px calc((100% - var(--collab-card-width)) / 2) 16px;
  /* Difumina el borde de las tarjetas que asoman a los lados, como pista
     visual de que hay más contenido al desplazarse. */
  mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  /* La barra de scroll se sustituye por los puntitos de abajo. */
  scrollbar-width: none;
}

.collab-track::-webkit-scrollbar {
  display: none;
}

.collab-card {
  flex: 0 0 var(--collab-card-width);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.collab-card:hover {
  border-color: var(--coral-500);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

/* Alto fijo (no aspect-ratio): así todas las tarjetas del carrusel miden
   exactamente lo mismo pase lo que pase con la imagen de cada una. La
   imagen primero se ajusta al ancho completo de la tarjeta manteniendo su
   proporción (width: 100%; height: auto) y luego, si el resultado es más
   alto que el hueco fijado, el overflow: hidden recorta lo que sobra por
   arriba y por abajo (centrado verticalmente vía flex) en vez de encoger
   la imagen para que quepa entera. */
.collab-card-media {
  height: 170px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-100);
}

.collab-card-img {
  display: block;
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.collab-card-body {
  padding: 18px 20px 20px;
}

.collab-card-name {
  font-family: var(--font-highlight);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-900);
  margin-bottom: 6px;
}

.collab-card-desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.55;
}

.collab-nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface-0);
  color: var(--navy-800);
  transition: background 0.18s ease, border-color 0.18s ease;
}

.collab-nav:hover,
.collab-nav:focus-visible {
  background: var(--surface-100);
  border-color: var(--coral-500);
}

.collab-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.collab-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-soft);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.collab-dot:hover,
.collab-dot:focus-visible {
  background: var(--ink-400);
}

.collab-dot.is-active {
  background: var(--coral-500);
  transform: scale(1.35);
}



/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .training .container {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "list" "cta";
    text-align: center;
    gap: 40px;
  }

  .training-copy p {
    margin-inline: auto;
  }

  .training-cta {
    display: flex;
    justify-content: center;
  }

  .hero-copy {
    text-align: center;
    margin-inline: auto;
  }

  .hero-copy h1,
  .hero-copy p {
    margin-inline: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .contrast-grid {
    grid-template-columns: 1fr;
  }

  .deliverables-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .presencial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  /* Hero antes/después: apilado vertical, "antes" arriba y "después" abajo.
     La nube de varios círculos SVG se sustituye por una tarjeta cuadrada
     igual que la de "después" (mismo radio/fondo/sombra que .order-panel),
     y los 4 mensajes pasan de posiciones en % + flotado a un grid 2x2
     normal: a este ancho, calcular la posición exacta de cada mensaje
     dentro de una forma irregular (y su recorte por preserveAspectRatio)
     deja de ser fiable, así que aquí manda un layout mucho más simple y
     robusto en vez de intentar reproducir el de escritorio a escala. */
  .chaos-order {
    grid-template-columns: 1fr;
  }

  /* La etiqueta "Antes" pasa a quedar dentro de la tarjeta, como "Después":
     label y nube comparten la misma celda de grid (superpuestos) en vez de
     que la label esté en el flujo normal antes de la caja, y la nube gana
     un padding-top extra para dejarle hueco arriba. */
  .chaos-panel {
    display: grid;
  }

  .chaos-panel-label {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin: 26px 0 0 24px;
    z-index: 1;
  }

  .chaos-cloud-svg {
    display: none;
  }

  .chaos-cloud {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 54px 24px 26px;
  }

  .chaos-cards {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .chaos-card-slot {
    position: static;
    width: auto;
  }

  .chaos-card {
    width: 100%;
    background: var(--surface-50);
    font-size: 13px;
    animation: none;
    transform: rotate(var(--rot, 0deg));
  }

  /* La flecha necesita una caja cuadrada antes de rotar: si se rota un
     rectángulo ancho de 100%×40px, el contenido gira pero sigue ocupando
     esa caja tan baja, así que se recorta y no se ve apuntando abajo. */
  .chaos-arrow {
    width: 56px;
    height: 56px;
    margin-inline: auto;
    transform: rotate(90deg);
  }

  .chaos-arrow-svg {
    width: 100%;
    height: 100%;
  }
}

@media (max-width: 720px) {
  .main-nav {
    position: fixed;
    inset: 0 0 0 0;
    background: rgba(0, 12, 48, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    gap: 28px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 100;
  }

  .main-nav a:not(.btn) {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .nav-toggle {
    display: block;
    z-index: 101;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .solution-card,
  .solution-card:nth-child(2) {
    flex-direction: column;
  }

  .solution-card-media {
    max-width: 100%;
    flex-basis: auto;
    aspect-ratio: 16 / 9;
  }

  .values-grid::before {
    display: none;
  }

  .deliverables-grid {
    grid-template-columns: 1fr;
  }

  .training-area-card {
    flex-direction: column;
    text-align: center;
  }

  .presencial-grid {
    grid-template-columns: 1fr;
  }

  /* En pantallas táctiles pequeñas, las flechas ocupan espacio que no
     aporta (el gesto de deslizar ya es el patrón natural) y las tarjetas
     pasan a ocupar casi todo el ancho, mostrando una detrás de otra. */
  .collab-nav {
    display: none;
  }

  /* Se sobreescribe la custom property, no el flex-basis directamente: así
     el padding-inline de .collab-track (que depende de la misma variable)
     se recalcula solo y el centrado sigue funcionando a este ancho. */
  .collab-track {
    --collab-card-width: 82vw;
  }

  .process-step,
  .modality-panel-inner {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  /* FoR: en vez de una caja "Tu equipo investigador" separada de 3 tarjetas
     independientes, .research-team-box gana fondo/borde propio y "abraza"
     los tres servicios dentro de sí misma en una única tarjeta — el pill
     pasa a ser solo la cabecera interna, y cada servicio es una fila sin
     caja ni sombra propia, separada por un borde superior fino. Las líneas
     de conexión se ocultan: dentro de una sola tarjeta ya no representan
     nada. */
  .research-team-box {
    background: var(--surface-0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px 22px 8px;
  }

  .research-team-label {
    justify-content: flex-start;
    width: auto;
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
  }

  .research-columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .research-column {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
    padding: 18px 4px;
  }

  .research-column:hover,
  .research-column:focus-visible {
    transform: none;
    box-shadow: none;
    background: var(--surface-50);
  }

  .research-column-icon {
    margin-bottom: 0;
  }

  .research-column-line-wrap {
    display: none;
  }

  .research-detail {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 22px;
  }

  .research-detail-list {
    text-align: left;
  }

  /* Integración: el puente pasa de horizontal a vertical (sistema arriba,
     integración en medio, sistema abajo), con la misma lógica de líneas
     dibujándose antes de que aparezca el centro. */
  .bridge {
    flex-direction: column;
    gap: 0;
  }

  .bridge-node {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
  }

  /* La línea (x1=0 → x2=100%, horizontal) necesita una caja ancha y baja
     antes de rotar, igual que la flecha del hero de "Asesoría": se rota el
     elemento entero 44px×2px, no se re-dibuja la línea en el eje Y. */
  .bridge-link {
    flex: 0 0 44px;
    width: 44px;
    height: 2px;
    min-width: 0;
    align-self: center;
    transform: rotate(90deg);
  }

  .bridge-link-svg {
    width: 100%;
    height: 100%;
  }

  /* .bridge-link ya está rotado 90°; sin contrarrestarlo aquí, el texto
     "PACAL" del sello se leería tumbado de lado. */
  .bridge-link-badge {
    transform: translate(-50%, -50%) rotate(-90deg) scale(0);
  }

  .bridge-link-badge.is-visible {
    transform: translate(-50%, -50%) rotate(-90deg) scale(1);
  }

  .compliance-badges {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 280px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .section {
    padding-block: 64px;
  }

  .hero {
    padding-block: 40px 64px;
  }

  .site-footer .container {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }

  /* Hub de especialidades: en vez de recalcular la disposición orbital en un
     viewport estrecho, se degrada a 3 nodos arriba, el logo de PACAL en la
     franja central y 3 nodos abajo (specialty-hub.js deja de posicionar por
     trigonometría por debajo de este ancho; aquí manda solo el CSS). ".hub"
     pasa a ser el grid de 3 columnas; ".hub-nodes" y cada "<li>" se vuelven
     "display: contents" para que los propios botones ".hub-node" sean los
     elementos del grid, en vez de quedar anidados dentro del <ul>/<li>. Así
     los 6 círculos comparten exactamente las mismas columnas que el logo y
     miden todos lo mismo, sin depender de cuánto texto tenga cada uno.  */
  .hub {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    gap: 24px 14px;
    width: 100%;
    aspect-ratio: auto;
  }

  .hub-center {
    position: static;
    grid-row: 2;
    grid-column: 1 / -1;
    transform: none;
    margin: 0;
  }

  .hub-line {
    display: none;
  }

  .hub-nodes {
    display: contents;
  }

  .hub-nodes li {
    display: contents;
  }

  .hub-nodes li:nth-child(-n + 3) .hub-node {
    grid-row: 1;
  }

  .hub-nodes li:nth-child(n + 4) .hub-node {
    grid-row: 3;
  }

  .hub-node,
  .hub.is-visible .hub-node {
    position: static;
    width: 110px;
    height: auto;
    aspect-ratio: 1 / 1;
    opacity: 1;
    transform: none;
  }

  .partners-grid {
    grid-template-columns: 1fr;
  }
}