/* ============================================================
   PEA — Programa Escuela Activa
   Sistema gráfico propio del subdominio pea.rinsainc.com
   v4.0 · 2026-07-02 · Página única interactiva ("una sola sábana")
   Doctrina: CORE/web/REGLAS-WEBS-PROGRAMAS.md
   ============================================================ */

:root {
  --pea-verde:              #2E7D32;   /* Verde bosque · marca */
  --pea-verde-dark:         #14401A;
  --pea-verde-deep:         #1B5E20;
  --pea-verde-medium:       #43A047;
  --pea-verde-light:        #EAF6EA;
  --pea-lime:               #74C947;   /* Verde PEA brillante (identidad heredada) */
  --pea-accent:             #E07B00;   /* Ámbar cálido · acento narrativo */
  --pea-accent-dark:        #B86200;
  --pea-crema:              #FAFBF6;
  --pea-crema-warm:         #F1F4EA;
  --pea-text:               #0D0D0D;
  --pea-text-soft:          #333333;
  --pea-text-muted:         #666666;
  --pea-text-mute:          #888888;
  --pea-border:             #E3E7DB;
  --pea-border-soft:        #EFF1EB;
  --pea-white:              #FFFFFF;

  /* Ejes (los 4 actores de la comunidad educativa) */
  --eje-1:                  #1D6FB8;   /* Azul · Directivos */
  --eje-1-soft:             #E7F1FB;
  --eje-2:                  #2E7D32;   /* Verde · Docentes */
  --eje-2-soft:             #EAF6EA;
  --eje-3:                  #EA7317;   /* Naranja · Estudiantes */
  --eje-3-soft:             #FEF1E5;
  --eje-4:                  #7A3FB0;   /* Violeta · Padres de familia */
  --eje-4-soft:             #F2EAFA;

  --pea-font-display:       'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', sans-serif;
  --pea-font-body:          'Inter', 'Helvetica Neue', sans-serif;

  --pea-nav-height:         72px;
  --pea-container:          1240px;
  --pea-container-narrow:   980px;
}

/* ============================================================
   BASE
   ============================================================ */
html { scroll-behavior: smooth; }

body {
  font-family: var(--pea-font-body);
  color: var(--pea-text);
  background: var(--pea-crema);
  line-height: 1.55;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--pea-font-display);
  color: var(--pea-verde-deep);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

a { color: var(--pea-verde-medium); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--pea-accent); }

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

.pea-skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--pea-verde);
  color: var(--pea-white);
  padding: 12px 20px;
  border-radius: 8px;
  z-index: 200;
}
.pea-skip:focus { left: 8px; }

/* Reveal on scroll */
.pea-reveal { opacity: 0; transform: translateY(18px); transition: opacity 500ms ease, transform 500ms ease; }
.pea-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pea-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   NAVEGACIÓN · sticky · solo anclas internas
   ============================================================ */
.pea-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--pea-border);
}
.pea-nav__inner {
  width: 100%;
  max-width: var(--pea-container);
  margin: 0 auto;
  height: var(--pea-nav-height);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pea-nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pea-font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--pea-verde-deep);
}
.pea-nav__logo-mark {
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, var(--pea-verde) 0%, var(--pea-lime) 100%);
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pea-white);
  flex-shrink: 0;
}
.pea-nav__logo-mark svg { width: 15px; height: 15px; }
.pea-nav__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}
.pea-nav__link {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--pea-text-soft);
  border-radius: 6px;
  transition: all 150ms ease;
  white-space: nowrap;
}
.pea-nav__link:hover { background: var(--pea-crema-warm); color: var(--pea-verde-deep); }
.pea-nav__link.is-active { color: var(--pea-verde-deep); background: var(--pea-verde-light); }
.pea-nav__cta {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--pea-verde);
  color: var(--pea-white);
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 200ms ease;
  white-space: nowrap;
}
.pea-nav__cta:hover { background: var(--pea-verde-deep); color: var(--pea-white); transform: translateY(-1px); }
.pea-nav__cta svg { width: 16px; height: 16px; }
.pea-nav__hamburger {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.pea-nav__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pea-verde-deep);
  margin: 4px 0;
  transition: all 200ms ease;
}
@media (max-width: 980px) {
  .pea-nav__links, .pea-nav__cta { display: none; }
  .pea-nav__hamburger { display: block; }
}

/* Drawer mobile */
.pea-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(13,13,13,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 110;
}
.pea-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 80vw);
  background: var(--pea-white);
  z-index: 120;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 4px;
  box-shadow: -8px 0 24px rgba(13,13,13,0.08);
  overflow-y: auto;
}
.pea-drawer.is-open { transform: translateX(0); }
.pea-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.pea-drawer__close {
  align-self: flex-end;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin-bottom: 16px;
}
.pea-drawer__link {
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--pea-text);
  border-radius: 8px;
}
.pea-drawer__link:hover { background: var(--pea-verde-light); color: var(--pea-verde-deep); }

/* ============================================================
   HERO
   ============================================================ */
.pea-hero {
  padding: 80px 0 96px 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--pea-crema) 0%, var(--pea-white) 100%);
}
.pea-hero::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(46,125,50,0.07) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.pea-hero__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
.pea-hero__eyebrow {
  font-family: var(--pea-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pea-accent);
  margin-bottom: 16px;
}
.pea-hero__title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  color: var(--pea-verde-deep);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-bottom: 20px;
}
.pea-hero__title em {
  font-style: normal;
  color: var(--pea-verde-medium);
  font-weight: 800;
}
.pea-hero__lede {
  font-size: 18px;
  color: var(--pea-text-soft);
  max-width: 560px;
  margin-bottom: 32px;
  line-height: 1.55;
}
.pea-hero__cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Visual del hero: la escuela y sus 4 ejes orbitando */
.pea-hero__visual {
  position: relative;
  display: grid;
  place-items: center;
}
.pea-orbita {
  width: min(100%, 480px);
  height: auto;
  overflow: visible;
}
.pea-orbita__spin {
  transform-origin: 250px 250px;
  animation: peaSpin 80s linear infinite;
}
@keyframes peaSpin { to { transform: rotate(360deg); } }
.pea-orbita__ring {
  fill: none;
  stroke: rgba(46,125,50,0.16);
  stroke-width: 1;
}
.pea-orbita__link {
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  opacity: 0.55;
  animation: peaDraw 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards var(--d);
}
.pea-orbita__link.e1 { stroke: var(--eje-1); }
.pea-orbita__link.e2 { stroke: var(--eje-2); }
.pea-orbita__link.e3 { stroke: var(--eje-3); }
.pea-orbita__link.e4 { stroke: var(--eje-4); }
@keyframes peaDraw { to { stroke-dashoffset: 0; } }
.pea-orbita__core { fill: var(--pea-verde); }
.pea-orbita__core-ring {
  fill: none;
  stroke: var(--pea-lime);
  stroke-width: 2;
  opacity: 0;
  transform-origin: 250px 250px;
  animation: peaHaloRing 3.4s ease-out infinite 0.4s;
}
@keyframes peaHaloRing {
  0% { opacity: 0.5; transform: scale(0.6); }
  80%, 100% { opacity: 0; transform: scale(1.5); }
}
.pea-orbita__nodo {
  opacity: 0;
  animation: peaNodeIn 0.5s ease forwards var(--d);
}
.pea-orbita__nodo.e1 { fill: var(--eje-1); }
.pea-orbita__nodo.e2 { fill: var(--eje-2); }
.pea-orbita__nodo.e3 { fill: var(--eje-3); }
.pea-orbita__nodo.e4 { fill: var(--eje-4); }
@keyframes peaNodeIn { to { opacity: 1; } }
.pea-orbita__halo {
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: peaHalo 3.2s ease-out infinite var(--d);
}
.pea-orbita__halo.e1 { fill: var(--eje-1); }
.pea-orbita__halo.e2 { fill: var(--eje-2); }
.pea-orbita__halo.e3 { fill: var(--eje-3); }
.pea-orbita__halo.e4 { fill: var(--eje-4); }
@keyframes peaHalo {
  0% { opacity: 0.4; transform: scale(0.5); }
  80%, 100% { opacity: 0; transform: scale(2.4); }
}
.pea-orbita__core-glyph { fill: var(--pea-white); }
.pea-orbita__labels text {
  font-family: var(--pea-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  fill: var(--pea-text-muted);
  text-anchor: middle;
  opacity: 0;
  animation: peaNodeIn 0.5s ease forwards var(--d);
}
@media (prefers-reduced-motion: reduce) {
  .pea-orbita__spin { animation: none; }
  .pea-orbita__link { animation: none; stroke-dashoffset: 0; }
  .pea-orbita__nodo, .pea-orbita__labels text { animation: none; opacity: 1; }
  .pea-orbita__halo, .pea-orbita__core-ring { animation: none; opacity: 0; }
}
@media (max-width: 880px) {
  .pea-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .pea-orbita { width: min(100%, 360px); margin: 0 auto; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.pea-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--pea-font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 200ms ease;
  border: 2px solid transparent;
  text-decoration: none;
  line-height: 1.2;
}
.pea-btn--primary {
  background: var(--pea-verde);
  color: var(--pea-white);
  border-color: var(--pea-verde);
}
.pea-btn--primary:hover {
  background: var(--pea-verde-deep);
  border-color: var(--pea-verde-deep);
  color: var(--pea-white);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(46,125,50,0.25);
}
.pea-btn--ghost {
  background: transparent;
  color: var(--pea-verde-deep);
  border-color: var(--pea-border);
}
.pea-btn--ghost:hover {
  background: var(--pea-white);
  border-color: var(--pea-verde);
  color: var(--pea-verde-deep);
}
.pea-btn svg { width: 18px; height: 18px; }

/* ============================================================
   SECCIÓN GENÉRICA + MARCADOR DE PREGUNTA
   ============================================================ */
.pea-section { padding: 88px 0; }
.pea-section--cream { background: var(--pea-crema-warm); }
.pea-section--white { background: var(--pea-white); }
.pea-section--dark {
  background: var(--pea-verde-dark);
  color: var(--pea-white);
}
.pea-section--dark h2, .pea-section--dark h3 { color: var(--pea-white); }

.pea-section__head { max-width: 760px; margin-bottom: 48px; }
.pea-section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.pea-section__eyebrow {
  font-family: var(--pea-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pea-accent);
  margin-bottom: 12px;
}
.pea-section--dark .pea-section__eyebrow { color: var(--pea-lime); }
.pea-section__title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--pea-verde-deep);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.pea-section--dark .pea-section__title { color: var(--pea-white); }
.pea-section__intro {
  font-size: 17px;
  color: var(--pea-text-soft);
  line-height: 1.6;
}
.pea-section--dark .pea-section__intro { color: rgba(255,255,255,0.82); }

/* Marcador narrativo: ¿por qué? / ¿cómo? / ¿qué? */
.pea-pregunta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pea-font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--pea-white);
  background: var(--pea-accent);
  padding: 8px 18px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.pea-pregunta--verde { background: var(--pea-verde); }

/* ============================================================
   CARRUSEL DE AVALES · el respaldo detrás del PEA
   ============================================================ */
.pea-carrusel { position: relative; }
.pea-carrusel__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 16px 4px;
}
.pea-carrusel__track::-webkit-scrollbar { display: none; }
.pea-carrusel__item {
  flex: 0 0 min(300px, 78vw);
  scroll-snap-align: start;
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  margin: 0;
}
.pea-carrusel__logo {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pea-carrusel__logo img {
  height: 72px;
  max-width: 100%;
  object-fit: contain;
}
.pea-carrusel__mark {
  font-family: var(--pea-font-display);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pea-verde);
  line-height: 1;
}
.pea-carrusel__item figcaption strong {
  display: block;
  font-family: var(--pea-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--pea-verde-deep);
  line-height: 1.3;
}
.pea-carrusel__item figcaption span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--pea-text-muted);
  line-height: 1.4;
}
.pea-carrusel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 8px;
}
.pea-carrusel__dots { display: flex; gap: 8px; }
.pea-carrusel__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: var(--pea-border);
  cursor: pointer;
  padding: 0;
  transition: all 200ms ease;
}
.pea-carrusel__dot.is-active { background: var(--pea-verde); transform: scale(1.25); }
.pea-carrusel__arrow {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--pea-border);
  background: var(--pea-white);
  color: var(--pea-verde-deep);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.pea-carrusel__arrow:hover { border-color: var(--pea-verde); background: var(--pea-verde-light); }
.pea-carrusel__arrow svg { width: 18px; height: 18px; }

/* ============================================================
   ALIANZA · Rinsa pone / Tu colegio pone
   ============================================================ */
.pea-alianza {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 820px) { .pea-alianza { grid-template-columns: 1fr; } }
.pea-alianza__col {
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 16px;
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
}
.pea-alianza__col::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--pea-verde);
}
.pea-alianza__col--uni::before { background: var(--pea-accent); }
.pea-alianza__label {
  font-family: var(--pea-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pea-text-muted);
  margin-bottom: 8px;
}
.pea-alianza__title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
}
.pea-alianza__lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pea-alianza__lista li {
  font-size: 15px;
  color: var(--pea-text-soft);
  line-height: 1.55;
  padding-left: 26px;
  position: relative;
}
.pea-alianza__lista li svg {
  position: absolute;
  left: 0; top: 3px;
  width: 16px; height: 16px;
  color: var(--pea-verde-medium);
}
.pea-alianza__col--uni .pea-alianza__lista li svg { color: var(--pea-accent); }
.pea-alianza__puente {
  margin-top: 24px;
  text-align: center;
  font-size: 17px;
  color: var(--pea-text-soft);
}
.pea-alianza__puente strong { color: var(--pea-verde-deep); }

/* ============================================================
   OBJETIVO TIPO KPI
   ============================================================ */
.pea-kpi {
  text-align: center;
  padding: 8px 0;
}
.pea-kpi__label {
  font-family: var(--pea-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}
.pea-kpi__frase {
  font-family: var(--pea-font-display);
  font-size: clamp(28px, 4.4vw, 54px);
  font-weight: 800;
  color: var(--pea-white);
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 940px;
  margin: 0 auto 40px auto;
}
.pea-kpi__frase em { font-style: normal; color: var(--pea-lime); }
.pea-kpi__cifras {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}
.pea-kpi__cifra { text-align: center; }
.pea-kpi__num {
  font-family: var(--pea-font-display);
  font-size: 44px;
  font-weight: 800;
  color: var(--pea-white);
  line-height: 1;
}
.pea-kpi__desc {
  margin-top: 8px;
  font-size: 14px;
  color: rgba(255,255,255,0.7);
}

/* ============================================================
   EJES · 4 tarjetas (cómo se hace)
   ============================================================ */
.pea-ejes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1000px) { .pea-ejes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .pea-ejes-grid { grid-template-columns: 1fr; } }

.pea-eje-card {
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 16px;
  padding: 32px 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.pea-eje-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--e-accent);
}
.pea-eje-card__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--e-soft);
  color: var(--e-accent);
  display: flex; align-items: center; justify-content: center;
}
.pea-eje-card__icon svg { width: 28px; height: 28px; }
.pea-eje-card__tag {
  display: inline-block;
  font-family: var(--pea-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-accent);
  margin-top: 4px;
}
.pea-eje-card__title {
  font-family: var(--pea-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--pea-text);
  line-height: 1.2;
}
.pea-eje-card__desc {
  font-size: 14px;
  color: var(--pea-text-muted);
  line-height: 1.5;
}
.pea-eje-card.e1 { --e-accent: var(--eje-1); --e-soft: var(--eje-1-soft); }
.pea-eje-card.e2 { --e-accent: var(--eje-2); --e-soft: var(--eje-2-soft); }
.pea-eje-card.e3 { --e-accent: var(--eje-3); --e-soft: var(--eje-3-soft); }
.pea-eje-card.e4 { --e-accent: var(--eje-4); --e-soft: var(--eje-4-soft); }

/* ============================================================
   TABS · ejes
   ============================================================ */
.pea-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 12px;
  margin-bottom: 28px;
}
.pea-tab {
  flex: 1 1 auto;
  min-width: 120px;
  padding: 12px 18px;
  border: none;
  background: transparent;
  font-family: var(--pea-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--pea-text-muted);
  cursor: pointer;
  border-radius: 8px;
  transition: all 180ms ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pea-tab__num {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pea-text-mute);
  font-weight: 700;
}
.pea-tab:hover { background: var(--pea-crema-warm); color: var(--pea-verde-deep); }
.pea-tab.is-active { background: var(--pea-verde); color: var(--pea-white); }
.pea-tab.is-active .pea-tab__num { color: rgba(255,255,255,0.7); }
.pea-tab--eje.e1.is-active { background: var(--eje-1); }
.pea-tab--eje.e2.is-active { background: var(--eje-2); }
.pea-tab--eje.e3.is-active { background: var(--eje-3); }
.pea-tab--eje.e4.is-active { background: var(--eje-4); }

/* ============================================================
   DETALLE DE EJE · corazón de la web (despliega en sitio)
   ============================================================ */
.pea-detalle__panel {
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 18px;
  padding: 32px;
  border-top: 4px solid var(--d-accent);
}
@media (max-width: 640px) { .pea-detalle__panel { padding: 22px 16px; } }
.pea-detalle__panel.e1 { --d-accent: var(--eje-1); --d-soft: var(--eje-1-soft); }
.pea-detalle__panel.e2 { --d-accent: var(--eje-2); --d-soft: var(--eje-2-soft); }
.pea-detalle__panel.e3 { --d-accent: var(--eje-3); --d-soft: var(--eje-3-soft); }
.pea-detalle__panel.e4 { --d-accent: var(--eje-4); --d-soft: var(--eje-4-soft); }

.pea-detalle__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pea-border-soft);
}
.pea-detalle__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--pea-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pea-white);
  background: var(--d-accent);
  flex-shrink: 0;
  margin-top: 4px;
}
.pea-detalle__titles { flex: 1; }
.pea-detalle__actor {
  font-family: var(--pea-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-accent);
  margin-bottom: 2px;
}
.pea-detalle__programa {
  font-size: 23px;
  font-weight: 800;
  color: var(--pea-text);
  line-height: 1.2;
}
.pea-detalle__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pea-detalle__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pea-text-soft);
  background: var(--d-soft);
  border-radius: 999px;
  padding: 5px 12px;
}
.pea-detalle__chip svg { width: 13px; height: 13px; color: var(--d-accent); }

.pea-detalle__lede {
  font-size: 16px;
  color: var(--pea-text-soft);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 760px;
}
.pea-detalle__cols {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
}
@media (max-width: 820px) { .pea-detalle__cols { grid-template-columns: 1fr; gap: 20px; } }
.pea-detalle__subtitle {
  font-family: var(--pea-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pea-text-muted);
  margin-bottom: 14px;
}
.pea-detalle__contenidos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pea-detalle__contenidos li {
  font-size: 14.5px;
  color: var(--pea-text-soft);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.pea-detalle__contenidos li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 8px; height: 8px;
  border-radius: 3px;
  background: var(--d-accent);
}
.pea-detalle__contenidos li strong { color: var(--pea-text); }

.pea-detalle__aside {
  background: var(--pea-crema);
  border: 1px solid var(--pea-border-soft);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-self: start;
}
.pea-detalle__dato-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pea-text-mute);
  margin-bottom: 4px;
}
.pea-detalle__dato-valor {
  font-size: 15px;
  font-weight: 600;
  color: var(--pea-text);
  line-height: 1.4;
}
.pea-detalle__gratis {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--eje-2-soft);
  color: var(--eje-2);
  font-family: var(--pea-font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}
.pea-detalle__gratis svg { width: 14px; height: 14px; }
.pea-detalle__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--d-accent);
  color: var(--pea-white);
  font-size: 14px;
  font-weight: 600;
  transition: all 200ms ease;
}
.pea-detalle__cta:hover { color: var(--pea-white); filter: brightness(0.92); transform: translateY(-1px); }
.pea-detalle__cta svg { width: 16px; height: 16px; transition: transform 200ms ease; }
.pea-detalle__cta:hover svg { transform: translateX(3px); }
.pea-detalle__nota {
  margin-top: 20px;
  font-size: 13px;
  color: var(--pea-text-muted);
  text-align: center;
}

/* ============================================================
   ACTIVACIÓN · modelo territorial + fases + principios
   ============================================================ */
.pea-modelo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 820px) { .pea-modelo { grid-template-columns: 1fr; } }
.pea-modelo__col {
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 16px;
  padding: 32px 28px;
}
.pea-modelo__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--pea-verde-light);
  color: var(--pea-verde);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.pea-modelo__icon svg { width: 24px; height: 24px; }
.pea-modelo__title { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.pea-modelo__desc { font-size: 15px; color: var(--pea-text-soft); line-height: 1.55; }
.pea-modelo__desc strong { color: var(--pea-verde-deep); }

.pea-fases {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pea-fase {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  position: relative;
  padding-bottom: 28px;
}
.pea-fase:last-child { padding-bottom: 0; }
.pea-fase::before {
  content: "";
  position: absolute;
  left: 27px; top: 52px; bottom: 6px;
  width: 2px;
  background: var(--pea-border);
}
.pea-fase:last-child::before { display: none; }
.pea-fase__num {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pea-verde-light);
  color: var(--pea-verde);
  font-family: var(--pea-font-display);
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
}
.pea-fase__nombre {
  font-size: 18px;
  font-weight: 800;
  color: var(--pea-text);
  margin: 4px 0 6px 0;
}
.pea-fase__desc {
  font-size: 15px;
  color: var(--pea-text-soft);
  line-height: 1.55;
  max-width: 640px;
}

.pea-principios {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 980px) { .pea-principios { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pea-principios { grid-template-columns: 1fr; } }
.pea-principio {
  background: var(--pea-white);
  border: 1px solid var(--pea-border);
  border-radius: 14px;
  padding: 22px 20px;
}
.pea-principio svg { width: 22px; height: 22px; color: var(--pea-accent); margin-bottom: 12px; }
.pea-principio h4 { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--pea-text); }
.pea-principio p { font-size: 13.5px; color: var(--pea-text-muted); line-height: 1.5; }

/* ============================================================
   TRAYECTORIA + PRESENCIA · hitos + mapa amCharts (fondo verde)
   ============================================================ */
.pea-hitos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 940px;
  margin: 0 auto 44px auto;
}
@media (max-width: 760px) { .pea-hitos { grid-template-columns: 1fr; } }
.pea-hito {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  padding: 24px 22px;
}
.pea-hito__year {
  font-family: var(--pea-font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--pea-lime);
  margin-bottom: 8px;
}
.pea-hito__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--pea-white);
  margin-bottom: 6px;
  line-height: 1.25;
}
.pea-hito__desc { font-size: 13.5px; color: rgba(255,255,255,0.75); line-height: 1.5; }

.pea-mapa { max-width: 1040px; margin: 0 auto; }
.pea-mapa__lienzo {
  width: 100%;
  height: clamp(340px, 46vw, 540px);
  touch-action: pan-y;
}
.pea-mapa__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.pea-mapa__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
  font-family: var(--pea-font-display);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 180ms ease;
}
.pea-mapa__chip:hover { border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.1); color: var(--pea-white); }
.pea-mapa__chip.is-active { background: var(--pea-accent); border-color: var(--pea-accent); color: var(--pea-white); }
.pea-mapa__nota {
  margin: 20px auto 0 auto;
  max-width: 720px;
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* ============================================================
   CTA FINAL
   ============================================================ */
.pea-cta-block {
  background: linear-gradient(135deg, var(--pea-verde) 0%, var(--pea-verde-dark) 100%);
  border-radius: 24px;
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: center;
  color: var(--pea-white);
}
@media (max-width: 820px) {
  .pea-cta-block { grid-template-columns: 1fr; padding: 40px 28px; }
}
.pea-cta-block::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(116,201,71,0.22) 0%, transparent 70%);
  border-radius: 50%;
}
.pea-cta-block__title {
  font-family: var(--pea-font-display);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  color: var(--pea-white);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.pea-cta-block__desc {
  font-size: 16px;
  color: rgba(255,255,255,0.88);
  line-height: 1.55;
  position: relative;
}
.pea-cta-block__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.pea-cta-block .pea-btn--primary {
  background: var(--pea-white);
  color: var(--pea-verde-deep);
  border-color: var(--pea-white);
}
.pea-cta-block .pea-btn--primary:hover {
  background: var(--pea-crema);
  border-color: var(--pea-crema);
}
.pea-cta-block .pea-btn--ghost {
  background: transparent;
  color: var(--pea-white);
  border-color: rgba(255,255,255,0.45);
}
.pea-cta-block .pea-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--pea-white);
  color: var(--pea-white);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pea-footer {
  background: var(--pea-verde-dark);
  color: rgba(255,255,255,0.7);
  padding: 56px 0 32px 0;
  border-top: 4px solid var(--pea-lime);
}
.pea-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}
@media (max-width: 880px) { .pea-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 540px) { .pea-footer__grid { grid-template-columns: 1fr; } }
.pea-footer__brand { display: flex; flex-direction: column; gap: 12px; }
.pea-footer__logo {
  font-family: var(--pea-font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--pea-white);
  letter-spacing: -0.02em;
}
.pea-footer__tagline {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  max-width: 280px;
}
.pea-footer__col-title {
  font-family: var(--pea-font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pea-white);
  margin-bottom: 16px;
}
.pea-footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
}
.pea-footer__links a {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  transition: color 150ms ease;
}
.pea-footer__links a:hover { color: var(--pea-white); }
.pea-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}