/* ============================================================
   TRANSFORMACIÓN EDUCATIVA – Estilos
   Paleta: blanco · negro · morado oscuro
   Sin esquinas curvas · Contenido en tabs
   ============================================================ */

:root {
  --black:          #0d0d0d;
  --dark:           #1a1a2e;
  --purple-dark:    #2c1654;
  --purple:         #4a1d96;
  --purple-mid:     #6b21a8;
  --blue-light:     #e0f2fe;
  --green-light:    #f0fdf4;
  --orange-light:   #fff7ed;
  --white:          #ffffff;
  --off-white:      #f7f7f9;
  --border:         #d4d4e0;
  --text:           #0d0d0d;
  --text-muted:     #4b4b6b;
  --grad-dark:      linear-gradient(135deg,#0d0d0d 0%,#2c1654 100%);
  --grad-purple:    linear-gradient(135deg,#2c1654 0%,#4a1d96 100%);
  --grad-blue:      linear-gradient(135deg,#e0f2fe 0%,#bae6fd 100%);
  --grad-green:     linear-gradient(135deg,#f0fdf4 0%,#bbf7d0 100%);
  --max-w:          1160px;
  --pad:            7rem 1.5rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--white);color:var(--text);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.inner{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}

/* ---- HEADER ---- */
.site-header{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:2px solid var(--black);transition:transform 0.3s ease,box-shadow 0.3s ease}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:.9rem 0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:.65rem;flex-shrink:0}
.brand-logo{height:38px;width:auto}
.brand-text{font-size:.9rem;font-weight:500;color:var(--text-muted);line-height:1.2}
.brand-text strong{display:block;font-weight:800;font-size:.95rem;color:var(--black)}

.main-nav{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;justify-content:flex-end}
.main-nav a{white-space:nowrap}

/* ---- BOTONES ---- */
.btn{display:inline-block;padding:.85rem 1.9rem;font-size:.9rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;border:2px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn-dark{background:var(--grad-dark);color:var(--white);border-color:var(--black)}
.btn-dark:hover{background:var(--grad-purple);border-color:var(--purple-dark)}
.btn-white{background:var(--white);color:var(--black);border-color:var(--white)}
.btn-white:hover{background:transparent;color:var(--white)}
.btn-full{width:100%;text-align:center}

/* ---- HERO ---- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg, #0d0d0d 0%, #2c1654 50%, #4a1d96 100%)}
.hero-content{position:relative;z-index:1;text-align:center;color:#fff;max-width:820px;padding:2rem 1.5rem}
.hero-logo{width:88px;height:88px;object-fit:contain;margin:0 auto 1.25rem;filter:brightness(0) invert(1)}
.hero-eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:1rem}
.hero-content h1{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;color:#fff;margin-bottom:1.25rem}
.hero-lead{font-size:clamp(1rem,1.8vw,1.15rem);color:rgba(255,255,255,.75);line-height:1.7;max-width:600px;margin:0 auto 2rem}
.hero-scroll-hint{font-size:1.4rem;color:rgba(255,255,255,.3);margin-top:.5rem;animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(6px);opacity:.7}}

/* ---- HERO ENTRANCE ANIMATIONS ---- */
@keyframes heroPanFade{
  from{opacity:0;transform:translateY(-28px)}
  to  {opacity:1;transform:translateY(0)}
}

.hero-logo,
.hero-eyebrow,
.hero-content h1,
.hero-lead,
.hero-scroll-hint{
  opacity:0;
  animation:heroPanFade .85s cubic-bezier(.22,.61,.36,1) forwards;
}

.hero-logo        { animation-delay:.15s }
.hero-eyebrow     { animation-delay:.30s }
.hero-content h1  { animation-delay:.46s }
.hero-lead        { animation-delay:.62s }
.hero-scroll-hint {
  animation-delay:.80s;
  animation:heroPanFade .85s cubic-bezier(.22,.61,.36,1) .80s forwards,
            nudge 2.2s ease-in-out 1.7s infinite;
}

/* ---- NAVEGACIÓN PRINCIPAL ---- */
.main-nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:1.5rem}
.main-nav::-webkit-scrollbar{display:none}
.nav-link{font-size:.9rem;font-weight:600;color:var(--text-muted);text-transform:none;letter-spacing:.05em;transition:color .18s}
.nav-link:hover{color:var(--black)}

/* ---- SECCIONES ---- */
.section{padding:var(--pad)}
.section-white{background:var(--white)}
.section-light{background:var(--off-white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section-dark{background:var(--grad-dark);color:var(--white)}
.section-purple{background:var(--grad-purple);color:var(--white)}
.section-blue{background:var(--grad-blue)}
.section-green{background:var(--grad-green)}

.section-label-row{margin-bottom:.6rem}
.section-label{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-mid);border-left:3px solid var(--purple-mid);padding-left:.6rem}
.section-label.light{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.5)}

h2{font-size:clamp(1.75rem,3.5vw,2.6rem);font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--black);margin-bottom:1rem}
.section-dark h2,.section-purple h2{color:var(--white)}
.section-lead{font-size:1.05rem;color:var(--text-muted);max-width:680px;margin-bottom:2.5rem;line-height:1.7}
.light-lead{color:rgba(255,255,255,.8)}

/* ---- CHALLENGES LIST ---- */
.challenges-list{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-bottom:2.5rem;counter-reset:challenge}
.challenge-item{counter-increment:challenge;display:grid;grid-template-columns:3rem 1fr;grid-template-rows:auto auto;column-gap:1.25rem;padding:2.25rem 2.5rem 2.25rem 0;border-top:1px solid var(--border);align-items:start}
.challenge-item:nth-child(even){padding-left:2.5rem;padding-right:0;border-left:1px solid var(--border)}
.challenge-item::before{content:counter(challenge,decimal-leading-zero);grid-column:1;grid-row:1/3;font-size:2rem;font-weight:800;color:var(--border);line-height:1;padding-top:.2rem}
.challenge-item h3{grid-column:2;grid-row:1;font-size:1rem;font-weight:700;color:var(--black);margin-bottom:.4rem}
.challenge-item p{grid-column:2;grid-row:2;font-size:.92rem;color:var(--text-muted);line-height:1.65}

/* ---- CALLOUT ---- */
.callout{background:var(--dark);color:var(--white);padding:1.75rem 2.5rem;border-left:5px solid var(--purple-mid)}
.callout p{font-size:1.1rem;font-weight:500;line-height:1.6}

/* ---- RETO SPLIT ---- */
.reto-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.reto-copy h2{color:var(--white)}
.reto-copy p{color:rgba(255,255,255,.8);line-height:1.7;margin-bottom:1rem}
.reto-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12)}
.stat-block{background:rgba(255,255,255,.05);padding:1.75rem 1.5rem;display:flex;flex-direction:column;gap:.4rem}
.stat-num{font-size:2.5rem;font-weight:800;color:var(--white);line-height:1}
.stat-label{font-size:.82rem;color:rgba(255,255,255,.65);line-height:1.4}

/* ---- COMPONENTS VERTICAL ---- */
.components-vertical{display:flex;flex-direction:column;gap:3rem}
.component-vertical-item{border-bottom:1px solid var(--border);padding-bottom:2.5rem}
.component-vertical-item:last-child{border-bottom:none}
.component-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.component-number{font-size:2rem;font-weight:800;color:var(--purple-mid);line-height:1}
.component-header h3{font-size:1.2rem;font-weight:700;color:var(--black);margin:0}
.component-vertical-item>p{font-size:1rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.5rem}
.component-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.component-tags span{font-size:.85rem;font-weight:600;color:var(--purple-dark);background:var(--off-white);border:1px solid var(--border);padding:.4rem .8rem;border-radius:20px}

/* ---- HUB GRID ---- */
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.15)}
.hub-item{padding:2rem 1.5rem;border-right:1px solid rgba(255,255,255,.12)}
.hub-item:last-child{border-right:none}
.hub-icon{font-size:1.75rem;color:rgba(255,255,255,.6);margin-bottom:1rem}
.hub-item h3{font-size:.98rem;font-weight:700;color:var(--white);margin-bottom:.6rem}
.hub-item p{font-size:.87rem;color:rgba(255,255,255,.7);line-height:1.6}

/* ---- TABLA NIVELES ---- */
.levels-table-wrap{overflow-x:auto;margin-bottom:0}
.levels-table{width:100%;border-collapse:collapse;font-size:.88rem}
.levels-table th,.levels-table td{padding:1rem 1.25rem;text-align:left;border:none;border-bottom:1px solid var(--border);vertical-align:top}
.levels-table thead th{background:transparent;color:var(--text-muted);font-weight:700;font-size:.82rem;letter-spacing:.03em;border-bottom:1px solid var(--border);padding-top:1.5rem}
.levels-table thead th:first-child{color:var(--text-muted);font-weight:500}
.levels-table thead th:nth-child(2){box-shadow:inset 0 4px 0 var(--border)}
.levels-table thead th:nth-child(3){box-shadow:inset 0 4px 0 var(--purple-mid)}
.levels-table thead th:nth-child(4){box-shadow:inset 0 4px 0 var(--purple-dark);color:var(--black)}
.levels-table tbody td:nth-child(4){background:rgba(74,29,150,.04)}
.levels-table tbody td:first-child{font-weight:600;color:var(--text-muted);font-size:.85rem}
.level-badge{display:block;font-size:.65rem;font-weight:700;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;margin-bottom:.3rem}
.level-badge-hi{color:var(--purple-mid);font-weight:800}

/* ---- PRICING ---- */
.pricing-blocks{display:grid;grid-template-columns:480px 1fr;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.price-card-main{padding:2.5rem;background:var(--grad-dark);color:var(--white)}
.price-header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:1.75rem;border-bottom:1px solid rgba(255,255,255,.15);padding-bottom:1.25rem}
.price-tag{font-size:4rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.price-period{font-size:.9rem;color:rgba(255,255,255,.6)}
.price-breakdown{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}
.price-line{display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:rgba(255,255,255,.8);border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:.75rem}
.price-line strong{color:var(--white);font-size:1rem}
.price-note{font-size:.82rem;color:rgba(255,255,255,.6);line-height:1.6;margin-bottom:2rem}
.price-includes{padding:2.5rem;background:var(--white)}
.price-includes h3{font-size:1rem;font-weight:700;color:var(--black);margin-bottom:1.25rem}
.includes-list{display:flex;flex-direction:column;gap:.7rem}
.includes-list li{display:flex;align-items:center;gap:.65rem;font-size:.92rem;color:var(--text)}
.includes-list li i{color:var(--purple-mid);flex-shrink:0}

/* ---- MARQUEE HORIZONTAL ---- */
.marquee-wrap{
  padding:2.25rem 0;
  margin:3rem 0;
  overflow:hidden;
}
.marquee-inner{
  display:flex;
  white-space:nowrap;
  will-change:transform;
}
.marquee-group{
  display:flex;
  align-items:center;
  gap:3rem;
  flex-shrink:0;
}
.marquee-group img{
  width:140px;
  height:48px;
  object-fit:contain;
  display:block;
}

/* ---- ALLIANCE CARDS ---- */
.alliance-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem;padding-top:.5rem}
.alliance-card{padding:0}
.alliance-card h3{font-size:.88rem;font-weight:800;color:var(--black);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.75rem}
.alliance-card p{font-size:.88rem;color:var(--text-muted);line-height:1.7}

/* Aliados: título y subtítulo centrados */
.aliados-centered .aliados-header{text-align:center}
.aliados-centered .aliados-header .section-lead{margin-left:auto;margin-right:auto}

/* ---- QUOTES ---- */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(255,255,255,.12)}
.quote-grid blockquote{padding:2.5rem 2rem;border-right:1px solid rgba(255,255,255,.12)}
.quote-grid blockquote:last-child{border-right:none}
.quote-grid blockquote p{font-size:1rem;font-style:italic;color:rgba(255,255,255,.85);line-height:1.7}
.quote-main{background:rgba(255,255,255,.06)}
.quote-main p{font-size:1.2rem!important;font-weight:700;font-style:normal!important;color:#fff!important}
.quote-main cite{font-size:.82rem;color:rgba(255,255,255,.5);font-style:normal}

/* ---- CONTACTO ---- */
.contact-grid{display:grid;grid-template-columns:1fr 380px;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.contact-form-area{padding:2.5rem;border-right:1px solid var(--border)}
.contact-info-area{padding:2.5rem;background:var(--off-white)}
.field-group{margin-bottom:1.25rem}
.field-group label{display:block;font-size:.82rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.4rem}
.field-group input,.field-group textarea{width:100%;padding:.75rem 1rem;font-size:.95rem;font-family:inherit;border:1.5px solid var(--border);background:var(--white);color:var(--text);border-radius:0;outline:none;transition:border-color .18s}
.field-group input:focus,.field-group textarea:focus{border-color:var(--purple-mid)}
.field-group textarea{resize:vertical;min-height:100px}
.field-error{display:block;font-size:.78rem;color:#c0392b;margin-top:.25rem;min-height:1em}
.contact-info-block{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--border)}
.contact-info-block:last-child{border-bottom:none;margin-bottom:0}
.contact-info-block h3{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:.5rem}
.contact-info-block p{font-size:.92rem;color:var(--text);line-height:1.6}
.contact-links{display:flex;flex-direction:column;gap:.6rem;margin-top:.75rem}
.contact-link{display:flex;align-items:center;gap:.6rem;font-size:.88rem;font-weight:600;color:var(--purple-dark);transition:color .18s}
.contact-link:hover{color:var(--purple-mid)}
.contact-link i{width:16px;flex-shrink:0}

/* ---- FOOTER ---- */
.tabs-shell > .tab-panel.active:last-of-type > section:last-child,
.tabs-shell .tab-panel.active > *:last-child{ margin-bottom:0 }
.tabs-shell{ padding-bottom:5rem }
.site-footer{background:var(--black);color:rgba(255,255,255,.7);padding-top:5rem}
.footer-inner{display:grid;grid-template-columns:1fr 180px 180px;gap:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-logo{height:34px;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1)}
.footer-brand p{font-size:.88rem;line-height:1.6;margin-bottom:.4rem}
.footer-contact{margin-top:1rem;display:flex;flex-direction:column;gap:.45rem}
.footer-contact a{color:rgba(255,255,255,.75);font-size:.88rem;transition:color .18s}
.footer-contact a:hover{color:var(--white)}
.footer-small{font-size:.78rem!important;color:rgba(255,255,255,.4)!important}
.footer-nav,.footer-legal{display:flex;flex-direction:column;gap:.5rem}
.footer-nav h4,.footer-legal h4{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.25rem}
.footer-nav a{font-size:.87rem;color:rgba(255,255,255,.65);transition:color .18s;cursor:pointer}
.footer-nav a:hover{color:var(--white)}
.footer-legal p{font-size:.87rem;color:rgba(255,255,255,.55)}
.footer-bottom{padding:1.25rem 0;background:rgba(0,0,0,.3)}
.footer-bottom p{font-size:.78rem;color:rgba(255,255,255,.35);text-align:center}

/* ============================================================
   SCROLL ENTRANCE ANIMATIONS
   ============================================================ */
@keyframes panLeft  { from{opacity:0;transform:translateX(-48px)} to{opacity:1;transform:translateX(0)} }
@keyframes panRight { from{opacity:0;transform:translateX( 48px)} to{opacity:1;transform:translateX(0)} }
@keyframes panUp    { from{opacity:0;transform:translateY( 40px)} to{opacity:1;transform:translateY(0)} }

/* Elementos individuales con clases .reveal-* */
.reveal-left.is-visible  { animation: panLeft  .75s cubic-bezier(.22,.61,.36,1) forwards }
.reveal-right.is-visible { animation: panRight .75s cubic-bezier(.22,.61,.36,1) forwards }
.reveal-up.is-visible    { animation: panUp    .75s cubic-bezier(.22,.61,.36,1) forwards }

.reveal-delay-1 { animation-delay: .20s }
.reveal-delay-2 { animation-delay: .45s }
.reveal-delay-3 { animation-delay: .70s }
.reveal-delay-4 { animation-delay: .95s }

/* Estado oculto solo cuando JS está activo (evita flash inicial) */
.js-reveal-ready .reveal-left,
.js-reveal-ready .reveal-right,
.js-reveal-ready .reveal-up {
  opacity: 0;
}

/* Secciones completas que animan como bloque */
.section-dark,
.section-purple { overflow: hidden }

.js-reveal-ready #reto-stats { opacity:0; transform:translateX(-48px) }
#reto-stats.is-visible { animation: panLeft  .85s cubic-bezier(.22,.61,.36,1) .2s forwards }

.js-reveal-ready #hub { opacity:0; transform:translateX(48px) }
#hub.is-visible { animation: panRight .85s cubic-bezier(.22,.61,.36,1) .2s forwards }

.js-reveal-ready #aliados { opacity:0; transform:translateY(40px) }
#aliados.is-visible { animation: panUp .85s cubic-bezier(.22,.61,.36,1) .2s forwards }

/* Respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .reveal-left, .reveal-right, .reveal-up { opacity:1; animation:none }
  #reto-stats, #hub, #aliados { opacity:1; transform:none; animation:none }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .hub-item:nth-child(2){border-right:none}
  .hub-item{border-bottom:1px solid rgba(255,255,255,.1)}
  .hub-item:last-child{border-bottom:none}
  .pricing-blocks{grid-template-columns:1fr}
  .price-includes{border-left:none;border-top:2px solid var(--black)}
  .alliance-cards{grid-template-columns:repeat(2,1fr);gap:2rem}
  .quote-grid{grid-template-columns:1fr}
  .quote-grid blockquote{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .contact-grid{grid-template-columns:1fr}
  .contact-form-area{border-right:none;border-bottom:2px solid var(--black)}
  .footer-inner{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  :root{--pad:3.5rem 1.25rem}

  /* Header */
  .nav-inner{flex-wrap:wrap;justify-content:center;gap:1rem}
  .brand{width:100%;justify-content:center}
  .main-nav{justify-content:center;gap:1rem}
  .site-header.header-hidden{transform:translateY(-100%);box-shadow:none}

  /* Hero */
  .hero-content{padding:2rem 1rem}
  .hero-content h1{font-size:clamp(2rem,8vw,2.7rem)}

  /* Grids */
  .problem-grid{grid-template-columns:1fr}
  .problem-item{border-right:none!important}
  .problem-item:last-child{border-bottom:none}
  .reto-inner{grid-template-columns:1fr;gap:2rem}
  .reto-stats{grid-template-columns:1fr 1fr}
  .component-item{grid-template-columns:56px 1fr}
  .component-num{font-size:1.8rem;padding:1.5rem 0}
  .component-body{padding:1.5rem 1.25rem}
  .challenges-list{grid-template-columns:1fr}
  .challenge-item:nth-child(even){padding-left:0;border-left:none}
  .alliance-cards{grid-template-columns:1fr;gap:1.5rem}
  .full-photo{height:220px}
  .tab-btn{padding:.9rem 1.25rem;font-size:.78rem}
  .footer-inner{grid-template-columns:1fr;gap:2rem}

  /* ---- Centrado móvil: "Un cambio real...", Hub, Aliados ---- */

  /* "Un cambio real que empieza por las personas" */
  .reto-inner .reto-copy{text-align:center}

  /* Hub institucional */
  #hub{text-align:center}
  #hub .hub-icon{display:flex;justify-content:center}

  /* "Unidos por una misma meta" — encabezado y tarjetas */
  .aliados-header{text-align:center}
  .alliance-card{text-align:center}
}