/* ============================================================
   FUNDACIÓN PANACA — PÁGINAS INTERNAS
   Hero de sección · bloques institucionales · programas ·
   aliados · noticias · contacto. Paleta y tipografía del Figma.
   ============================================================ */

/* Acento por sección (siempre uno de los 5 colores de la paleta) */
body { --accent: var(--rojo); --accent-hover: var(--rojo-hover); --accent-suave: var(--rojo-suave); }
body.acc--verde   { --accent: var(--verde);   --accent-hover: var(--verde-hover);   --accent-suave: var(--verde-suave); }
body.acc--naranja { --accent: var(--naranja); --accent-hover: var(--naranja-hover); --accent-suave: var(--naranja-suave); }
body.acc--azul    { --accent: var(--azul);    --accent-hover: #061A28;              --accent-suave: #E7EDF2; }
body.acc--vino    { --accent: var(--vino);    --accent-hover: #501008;              --accent-suave: var(--vino-suave); }

/* ---------- HERO DE PÁGINA INTERNA ---------- */
.s-hero { position:relative; overflow:hidden; color:#fff; background: var(--azul); }
.s-hero__media { position:absolute; inset:0; z-index:0; }
.s-hero__media img { width:100%; height:100%; object-fit:cover; }
.s-hero__scrim { position:absolute; inset:0; z-index:1; background: linear-gradient(105deg, rgba(11,37,56,.94) 0%, rgba(11,37,56,.78) 45%, rgba(11,37,56,.45) 100%); }
.s-hero__in { position:relative; z-index:2; padding-block: clamp(2.5rem,6vw,4.5rem) clamp(3.5rem,8vw,6rem); max-width: 54rem; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:.5em; align-items:center; font-size:var(--step--1); color:rgba(255,255,255,.7); margin-bottom:1.4rem; }
.breadcrumb a:hover { color:#fff; }
.s-hero .eyebrow { color:#fff; opacity:.9; }
.s-hero h1 { color:#fff; font-size:var(--step-5); letter-spacing:-.03em; max-width:19ch; margin-top:1rem; }
.s-hero h1 em { font-style:normal; color:var(--naranja); }
.s-hero__sub { font-size:var(--step-1); color:rgba(255,255,255,.9); margin-top:1.2rem; max-width:56ch; }
.s-hero__cta { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.s-hero__stats { display:flex; flex-wrap:wrap; gap:2rem; margin-top:2.5rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.18); }
.s-hero__stat b { font-size:var(--step-3); font-weight:600; color:#fff; display:block; line-height:1; }
.s-hero__stat span { font-size:var(--step--1); color:rgba(255,255,255,.75); }
@media (max-width:520px){ .s-hero h1 { font-size: clamp(1.9rem, 8.2vw, 2.8rem); } }

/* ---------- SECCIÓN GENÉRICA ---------- */
.s-head { max-width:62ch; margin-bottom: clamp(2rem,4vw,3rem); }
.s-head .eyebrow { color: var(--accent); }
.s-head h2 { margin-top:1rem; }
.s-head p { margin-top:1rem; }
.s-head--center { margin-inline:auto; text-align:center; }
.s-head--center .eyebrow { justify-content:center; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:1000px){ .grid-4{ grid-template-columns:1fr 1fr; } }
@media (max-width:900px){ .grid-3{ grid-template-columns:1fr; } }
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; } }
@media (max-width:560px){ .grid-4{ grid-template-columns:1fr; } }

/* Texto largo institucional */
.prose > * + * { margin-top:1.1rem; }
.prose p { color:var(--tinta-2); max-width:72ch; }
.prose h3 { margin-top:2.2rem; }
.prose ul { display:grid; gap:.6rem; }
.prose ul li { display:flex; gap:.7rem; align-items:flex-start; color:var(--tinta-2); }
.prose ul li::before { content:""; flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-top:.6em; }

/* Bloque con imagen a un lado */
.s-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.s-split--narrow-media { grid-template-columns:1fr .85fr; }
.s-split__media { border-radius:var(--r-lg); overflow:hidden; min-height:420px; position:relative; }
.s-split__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:820px){ .s-split, .s-split--narrow-media { grid-template-columns:1fr; } .s-split__media{ min-height:280px; } }

/* Banda de prueba con acento */
.s-proof { background: var(--accent); color:#fff; }
.s-proof h2 { color:#fff; }
.s-proof .eyebrow { color:#fff; opacity:.9; }
.s-proof__nums { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md); overflow:hidden; margin-top:2rem; }
.s-proof__num { background: var(--accent-hover); padding:clamp(1.4rem,3vw,2rem); }
.s-proof__num b { font-size:var(--step-4); font-weight:600; color:#fff; display:block; line-height:1; }
.s-proof__num span { font-size:var(--step--1); color:rgba(255,255,255,.85); margin-top:.5rem; display:block; }
@media (max-width:760px){ .s-proof__nums{ grid-template-columns:1fr; } }

/* Pasos numerados */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step; }
.step { position:relative; padding-top:2.6rem; }
.step::before { counter-increment:step; content:counter(step); position:absolute; top:0; left:0; width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; font-size:var(--step-1); font-weight:600; display:grid; place-items:center; }
.step::after { content:""; position:absolute; top:20px; left:52px; right:-1.2rem; height:2px; background:var(--linea); }
.step:last-child::after { display:none; }
.step h4 { font-size:var(--step-0); margin-bottom:.4rem; }
.step p { font-size:var(--step--1); color:var(--tinta-2); }
@media (max-width:820px){ .steps{ grid-template-columns:1fr 1fr; } .step::after{ display:none; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ---------- LÍNEA DE TIEMPO ---------- */
.timeline { position:relative; max-width:920px; margin-inline:auto; }
.timeline::before { content:""; position:absolute; left:22px; top:6px; bottom:6px; width:2px; background:linear-gradient(var(--rojo), var(--naranja), var(--verde)); }
.tl { position:relative; padding:0 0 2.4rem 64px; }
.tl:last-child { padding-bottom:0; }
.tl__dot { position:absolute; left:12px; top:2px; width:22px; height:22px; border-radius:50%; background:var(--rojo); border:4px solid var(--blanco); box-shadow:0 0 0 2px var(--rojo); }
.tl:nth-child(3n+2) .tl__dot { background:var(--naranja); box-shadow:0 0 0 2px var(--naranja); }
.tl:nth-child(3n) .tl__dot { background:var(--verde); box-shadow:0 0 0 2px var(--verde); }
.tl__year { font-size:var(--step-2); font-weight:600; color:var(--rojo); line-height:1; }
.tl:nth-child(3n+2) .tl__year { color:var(--naranja-hover); }
.tl:nth-child(3n) .tl__year { color:var(--verde); }
.tl__title { font-weight:600; margin:.3rem 0 .4rem; }
.tl__text { color:var(--tinta-2); font-size:var(--step--1); max-width:58ch; }
@media (min-width:820px){
  .timeline::before { left:50%; translate:-1px 0; }
  .tl { width:50%; padding:0 3rem 2.8rem; }
  .tl:nth-child(odd) { left:0; text-align:right; }
  .tl:nth-child(even) { left:50%; }
  .tl__dot { left:auto; right:-11px; }
  .tl:nth-child(even) .tl__dot { left:-11px; right:auto; }
  .tl:nth-child(odd) .tl__text { margin-left:auto; }
}

/* ---------- PROPÓSITO / VISIÓN / MISIÓN ---------- */
/* auto-fit y no repeat(3,1fr): al quedarse la sección con una sola tarjeta —el
   propósito—, las tres columnas fijas la dejaban encogida en un tercio del ancho
   con dos huecos al lado. */
.purpose { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1.2rem; }
/* Y una tarjeta sola se centra con un ancho de lectura cómodo: estirada de borde a
   borde, la línea se hace demasiado larga para seguirla con la vista. */
.purpose__card:only-child { max-width:70ch; margin-inline:auto; }
.purpose__card { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.purpose__card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--rojo); }
.purpose__card.vision::before { background:var(--naranja); }
.purpose__card.mision::before { background:var(--verde); }
.purpose__label { font-size:var(--step--1); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rojo); }
.purpose__card.vision .purpose__label { color:var(--naranja-hover); }
.purpose__card.mision .purpose__label { color:var(--verde); }
.purpose__card h3 { font-size:var(--step-2); margin:.5rem 0 .8rem; }
.purpose__card p { color:var(--tinta-2); font-size:var(--step-0); }
@media (max-width:960px){ .purpose{ grid-template-columns:1fr; } }

/* ---------- ODS ---------- */
.ods-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.ods { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-md); padding:1.3rem; transition:transform .4s var(--ease-out), box-shadow .4s; }
.ods:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
/* El logo oficial del ODS sustituye al cuadro con el número. Ya no hace falta
   colorearlo por posición: cada objetivo trae SU color, que es el de Naciones Unidas
   y el que la gente reconoce. El icono se muestra tal cual —las directrices de la ONU
   prohíben recortarlo o recolorearlo—; aquí solo se fija su tamaño. */
.ods__logo { width:88px; height:88px; display:block; margin-bottom:.8rem; }
/* alt="" a propósito: el nombre del objetivo va justo debajo como texto real, así que
   leerlo dos veces solo estorbaría a quien usa lector de pantalla. */
.ods h4 { font-size:var(--step-0); line-height:1.2; margin-bottom:.4rem; }
.ods p { font-size:.84rem; color:var(--tinta-2); line-height:1.5; }
@media (max-width:900px){ .ods-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .ods-grid{ grid-template-columns:1fr; } }

/* ---------- HECHOS / NÚMEROS ---------- */
.facts { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-md); overflow:hidden; }
.fact { background:var(--blanco); padding:clamp(1.3rem,3vw,2rem); text-align:center; min-width:0; }
.fact b { font-size:var(--step-4); font-weight:600; color:var(--azul); line-height:1; display:block; letter-spacing:-.03em; overflow-wrap:break-word; }
.fact span { font-size:var(--step--1); color:var(--tinta-2); margin-top:.5rem; display:block; }
@media (max-width:820px){ .facts{ grid-template-columns:1fr 1fr; } }

/* Barras de participación (poblaciones) */
.bars { display:grid; gap:1rem; }
.bar__head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.35rem; }
.bar__head b { font-weight:600; }
.bar__head span { font-size:var(--step-1); font-weight:600; color:var(--accent); }
.bar__track { height:10px; border-radius:0; background:var(--hueso-2); overflow:hidden; }
.bar__fill { height:100%; border-radius:0; background:var(--accent); width:0; transition: width 1.1s var(--ease-out); }

/* ---------- PILARES EN PROFUNDIDAD ---------- */
.pdeep { display:grid; gap:1.2rem; }
.pdeep__row { display:grid; grid-template-columns:auto 1fr; gap:1.5rem; align-items:flex-start; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-out), box-shadow .4s; }
.pdeep__row:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.pdeep__n { font-size:var(--step-5); font-weight:600; color:var(--linea); line-height:.8; }
.pdeep__row h3 { font-size:var(--step-2); }
.pdeep__row p { color:var(--tinta-2); margin-top:.6rem; max-width:66ch; }
.pdeep__row p + p { margin-top:.7rem; }
@media (max-width:600px){ .pdeep__row{ grid-template-columns:1fr; gap:.5rem; } .pdeep__n{ font-size:var(--step-3); } }

/* ---------- SELLOS / CREDENCIALES ---------- */
.creds { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.cred { text-align:center; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-md); padding:1.6rem 1.2rem; }
.cred__ic { width:52px; height:52px; margin:0 auto .9rem; border-radius:50%; background:var(--accent-suave); color:var(--accent); display:grid; place-items:center; }
.cred__ic svg { width:24px; height:24px; }
.cred b { display:block; font-size:var(--step-0); }
.cred span { font-size:.82rem; color:var(--tinta-3); }
@media (max-width:820px){ .creds{ grid-template-columns:1fr 1fr; } }

/* ---------- EQUIPO / FACILITADORES ---------- */
.team { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
@media (max-width:900px){ .team{ grid-template-columns:1fr; } }
.person { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.1rem); box-shadow:var(--shadow-sm); transition:transform .4s var(--ease-out), box-shadow .4s, border-color .3s; display:flex; flex-direction:column; }
.person:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(233,10,45,.25); }
.person__top { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.person__ini { flex-shrink:0; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--azul); color:#fff; font-size:var(--step-1); font-weight:600; letter-spacing:-.02em; }
.person:nth-child(4n+2) .person__ini { background:var(--rojo); }
.person:nth-child(4n+3) .person__ini { background:var(--verde); }
.person:nth-child(4n) .person__ini   { background:var(--naranja); }
.person__name { font-size:var(--step-1); font-weight:600; line-height:1.2; color:var(--tinta); }
.person__role { font-size:var(--step--1); color:var(--accent); font-weight:600; margin-top:.2rem; }
.person__bio > p { font-size:var(--step--1); color:var(--tinta-2); line-height:1.6; }
.person__bio > p + p { margin-top:.7rem; }
.person__badge { margin-top:1rem; align-self:flex-start; }

/* ---------- PROGRAMAS DE FORMACIÓN ---------- */
.prog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; }
@media (max-width:900px){ .prog-grid{ grid-template-columns:1fr; } }
.prog-card { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.1rem); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); border-top:4px solid var(--accent); transition:transform .4s var(--ease-out), box-shadow .4s; }
.prog-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.prog-card--titulada { border-top-color:var(--rojo); }
.prog-card--diplomado { border-top-color:var(--verde); }
.prog-card--curso { border-top-color:var(--naranja); }
.prog-card__tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; }
.prog-card h3 { font-size:var(--step-1); line-height:1.25; }
.prog-card__desc { font-size:var(--step--1); color:var(--tinta-2); margin-top:.7rem; line-height:1.6; }
.prog-card__obj { font-size:var(--step--1); color:var(--tinta-2); margin-top:.9rem; padding:.8rem .9rem; background:var(--hueso); border-radius:var(--r-sm); line-height:1.55; }
.prog-card__obj b { color:var(--tinta); display:block; margin-bottom:.2rem; }
.prog-card__meta { display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--linea); font-size:var(--step--1); color:var(--tinta-2); }
.prog-card__meta div { display:flex; align-items:center; gap:.45em; }
.prog-card__meta svg { width:15px; height:15px; color:var(--accent); flex-shrink:0; }
.prog-card__lists { display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.4rem; margin-top:1rem; }
@media (max-width:560px){ .prog-card__lists{ grid-template-columns:1fr; } }
.prog-card__lists h4 { font-size:var(--step--1); text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-3); margin-bottom:.5rem; }
.prog-card__lists ul { display:grid; gap:.35rem; }
.prog-card__lists li { display:flex; gap:.5rem; align-items:flex-start; font-size:var(--step--1); color:var(--tinta-2); line-height:1.45; }
.prog-card__lists li::before { content:""; flex-shrink:0; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:.55em; }
.prog-card .btn { margin-top:1.3rem; }

/* Modalidades (2 tarjetas grandes) */
.modes { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
@media (max-width:820px){ .modes{ grid-template-columns:1fr; } }
.mode { border-radius:var(--r-lg); padding:clamp(1.6rem,3vw,2.4rem); color:#fff; display:flex; flex-direction:column; gap:.8rem; }
.mode--1 { background:var(--verde); }
.mode--2 { background:var(--vino); }
.mode h3 { color:#fff; font-size:var(--step-2); }
.mode p { color:rgba(255,255,255,.9); font-size:var(--step-0); }
.mode__list { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; }

/* Líneas de bootcamp / experiencias */
.lines { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
@media (max-width:820px){ .lines{ grid-template-columns:1fr; } }
.line { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(1.4rem,3vw,2rem); position:relative; overflow:hidden; transition:transform .4s var(--ease-out), box-shadow .4s; }
.line:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.line__ic { width:46px; height:46px; border-radius:0; display:grid; place-items:center; background:var(--accent-suave); color:var(--accent); margin-bottom:1rem; }
.line__ic svg { width:22px; height:22px; }
.line h3 { font-size:var(--step-1); margin-bottom:.5rem; }
.line p { font-size:var(--step--1); color:var(--tinta-2); line-height:1.6; }

/* El listado plano de aliados (.ally-cat / .ally-grid / .ally) se retiró al traer la
   página larga desde ERP_PANACA: ahora cada alianza tiene su bloque con cifras
   (.ally-block) y el listado completo baja al final como .ally-eco. */

/* ---------- NOTICIAS ---------- */
/* Tarjeta grande de la noticia más reciente. */
.news-feature { display:grid; grid-template-columns:1.1fr .9fr; gap:0; border-radius:var(--r-xl); overflow:hidden; border:1px solid var(--linea); background:var(--blanco); box-shadow:var(--shadow-sm); margin-bottom:2.5rem; }
.news-feature__media { position:relative; min-height:340px; }
.news-feature__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-feature__body { padding:clamp(1.8rem,3vw,3rem); display:flex; flex-direction:column; justify-content:center; }
.news-feature__body h2 { font-size:clamp(1.6rem, 1.3rem + 1.1vw, 2.35rem); margin:.6rem 0 .8rem; }
.news-feature__body p { color:var(--tinta-2); margin-bottom:1.4rem; max-width:52ch; }
@media (max-width:820px){ .news-feature{ grid-template-columns:1fr; } .news-feature__media{ min-height:220px; } }

/* Quién publicó la noticia cuando no hay una página pública a la que enlazar. */
.news__fuente { margin-top:auto; font-size:var(--step--1); color:var(--tinta-3); }

.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .news-grid{ grid-template-columns:1fr; } }
.news { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .45s var(--ease-out), box-shadow .45s; }
.news:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.news__img { aspect-ratio:16/10; position:relative; overflow:hidden; }
.news__img img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.news:hover .news__img img { transform:scale(1.06); }
.news__cat { position:absolute; top:.7rem; left:.7rem; z-index:1; }
.news__body { padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.news__date { font-size:var(--step--1); color:var(--tinta-3); font-weight:600; }
.news__body h3 { font-size:var(--step-1); line-height:1.25; margin:.4rem 0 .6rem; }
.news__body p { font-size:var(--step--1); color:var(--tinta-2); margin-bottom:1rem; }
.news__body .link-arrow { margin-top:auto; font-size:var(--step--1); }

/* Estado vacío (contenido pendiente de cargar) */
.empty-state { text-align:center; max-width:44rem; margin-inline:auto; background:var(--hueso); border:1px dashed var(--linea); border-radius:var(--r-lg); padding:clamp(2rem,5vw,3.5rem); }
.empty-state__ic { width:64px; height:64px; margin:0 auto 1.2rem; border-radius:50%; background:var(--blanco); color:var(--accent); display:grid; place-items:center; box-shadow:var(--shadow-sm); }
.empty-state__ic svg { width:28px; height:28px; }
.empty-state h3 { font-size:var(--step-2); }
.empty-state p { color:var(--tinta-2); margin:.8rem auto 1.6rem; max-width:52ch; }

/* ---------- CONTACTO ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,3.5rem); align-items:start; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info { display:grid; gap:.9rem; }
.contact-item { display:flex; gap:1rem; align-items:flex-start; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-md); padding:1.15rem 1.25rem; }
.contact-item .ic { width:44px; height:44px; border-radius:0; display:grid; place-items:center; background:var(--accent-suave); color:var(--accent); flex-shrink:0; }
.contact-item .ic svg { width:20px; height:20px; }
.contact-item b { display:block; }
.contact-item span, .contact-item a { font-size:var(--step--1); color:var(--tinta-2); }
.contact-item a:hover { color:var(--accent); }
.contact-social { display:flex; gap:.6rem; margin-top:.4rem; }
.contact-social a { width:44px; height:44px; border-radius:0; border:1px solid var(--linea); display:grid; place-items:center; color:var(--tinta-2); background:var(--blanco); transition:.3s; }
.contact-social a:hover { background:var(--accent); color:#fff; border-color:var(--accent); transform:translateY(-3px); }

/* ---------- FORMULARIO ESTÁNDAR ---------- */
.form { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow-md); }
.form h3 { font-size:var(--step-2); color:var(--tinta); }
.form > p { color:var(--tinta-2); font-size:var(--step--1); margin-top:.5rem; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }
.field.full { grid-column:1/-1; }
.field label { font-size:var(--step--1); font-weight:600; color:var(--tinta-2); }
.field label .req { color:var(--rojo); }
.field input, .field select, .field textarea {
  font:inherit; font-size:var(--step-0); padding:.72em .9em;
  border:1.5px solid var(--linea); border-radius:var(--r-sm);
  background:var(--hueso); color:var(--tinta); transition:border-color .25s, box-shadow .25s, background .25s; width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; background:var(--blanco); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-suave); }
.field textarea { resize:vertical; min-height:110px; }
.form .btn { width:100%; margin-top:1.2rem; }
.form__legal { font-size:.76rem; color:var(--tinta-3); margin-top:.8rem; text-align:center; line-height:1.5; }
@media (max-width:560px){ .form__row{ grid-template-columns:1fr; } }

/* ---------- ENVÍO: BARRA DE PROGRESO + CONFIRMACIÓN ---------- */
/* La barra la inserta main.js en cada .form; sólo ocupa espacio mientras se envía. */
.form__progress { margin-top:1rem; overflow:hidden; max-height:0; opacity:0; transition:max-height .35s var(--ease), opacity .3s, margin .35s; }
.form.is-sending .form__progress, .form.is-sent .form__progress { max-height:60px; opacity:1; }
.form__progress-track { height:6px; border-radius:var(--r-pill); background:var(--linea); overflow:hidden; }
.form__progress-bar { display:block; height:100%; width:0; border-radius:var(--r-pill); background:var(--accent); transition:width .45s var(--ease-out); }
.form.is-sent .form__progress-bar { background:var(--verde); }
.form__progress-txt { display:block; margin-top:.45rem; font-size:.78rem; font-weight:600; color:var(--tinta-3); text-align:center; }

.form__ok {
  display:none; gap:.85rem; align-items:flex-start; text-align:left;
  padding:1.05rem 1.15rem; border-radius:var(--r-md);
  background:var(--verde-suave); color:var(--verde); font-weight:600; margin-top:1rem;
  border:1px solid rgba(16,96,73,.18);
}
.form.is-sent .form__ok { display:flex; animation:formOkIn .45s var(--ease-out) both; }
.form__ok::before {
  content:"✓"; flex-shrink:0; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--verde); color:#fff; display:grid; place-items:center;
  font-size:.9rem; line-height:1; font-weight:700;
}
.form__err {
  display:none; gap:.85rem; align-items:flex-start; text-align:left;
  padding:1.05rem 1.15rem; border-radius:var(--r-md);
  background:var(--rojo-suave); color:var(--rojo); font-weight:600; margin-top:1rem;
  border:1px solid rgba(233,10,45,.18); font-size:var(--step--1);
}
.form.is-error .form__err { display:flex; animation:formOkIn .45s var(--ease-out) both; }
.form__err::before {
  content:"!"; flex-shrink:0; width:28px; height:28px; border-radius:var(--r-pill);
  background:var(--rojo); color:#fff; display:grid; place-items:center;
  font-size:.9rem; line-height:1; font-weight:700;
}
@keyframes formOkIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .form__progress, .form__progress-bar { transition:none; }
  .form.is-sent .form__ok, .form.is-error .form__err { animation:none; }
}

/* ---------- CTA CON FORMULARIO (fondo oscuro) ---------- */
.s-cta { background: var(--azul); color:#fff; position:relative; overflow:hidden; }
.s-cta__glow { position:absolute; width:60%; height:140%; top:-20%; right:-10%; background:radial-gradient(circle, rgba(233,10,45,.28), transparent 62%); pointer-events:none; }
.s-cta__grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.s-cta h2 { color:#fff; font-size:var(--step-4); }
.s-cta .eyebrow { color:var(--naranja); }
.s-cta p { color:rgba(255,255,255,.85); margin-top:1rem; max-width:46ch; }
.s-cta__contact { margin-top:1.6rem; display:grid; gap:.6rem; font-size:var(--step-0); }
.s-cta__contact a { color:#fff; display:flex; gap:.6em; align-items:center; }
.s-cta__contact svg { width:18px; height:18px; color:var(--naranja); flex-shrink:0; }
@media (max-width:900px){ .s-cta__grid{ grid-template-columns:1fr; } }

/* ---------- CROSS-LINKS ---------- */
.s-more { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.s-more a { display:flex; flex-direction:column; gap:.4rem; padding:1.3rem; border:1px solid var(--linea); border-radius:var(--r-lg); background:var(--blanco); transition:transform .4s var(--ease-out), box-shadow .4s, border-color .3s; }
.s-more a:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--accent); }
.s-more .ic { width:34px; height:34px; color:var(--accent); }
.s-more .ic svg { width:100%; height:100%; }
.s-more b { font-size:var(--step-0); }
.s-more span { font-size:var(--step--1); color:var(--tinta-3); }
@media (max-width:900px){ .s-more{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .s-more{ grid-template-columns:1fr; } }

/* ---------- ERROR ---------- */
.errorpage { min-height:60vh; display:grid; place-items:center; text-align:center; padding-block:clamp(3rem,8vw,7rem); }
.errorpage__code { font-size:var(--step-6); font-weight:600; color:var(--rojo); line-height:1; }


/* =============================================================================
   ALIADOS — migrado desde PANACA.FundacionWeb (ERP_PANACA) el 2026-08-06.
   La escala tipografica, los radios y las curvas ya eran comunes; lo unico que
   se tradujo fue la paleta, del set viejo a los 5 colores del Figma:
   green->verde, gold->naranja, ink->tinta, paper->blanco, line->linea.
   ============================================================================= */
/* Nota al pie de las cifras (de dónde salen los números). */
.fin-note { max-width:60rem; margin:2rem auto 0; font-size:var(--step--1); color:var(--tinta-2); background:var(--naranja-suave); border:1px solid rgba(216,132,44,.3); border-radius:var(--r-md); padding:1rem 1.2rem; line-height:1.55; }

/* Cifras agregadas de todas las alianzas. */
.ally-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--r-lg); overflow:hidden; }
@media (max-width:720px){ .ally-stats{ grid-template-columns:1fr 1fr; } }
.ally-stats > div { background:var(--blanco); padding:clamp(1.2rem,3vw,1.8rem); text-align:center; }
.ally-stats b { display:block; font-family:var(--font-display); font-size:var(--step-4); color:var(--verde-hover); line-height:1; letter-spacing:-.02em; }
.ally-stats span { display:block; margin-top:.4rem; font-size:var(--step--1); color:var(--tinta-2); }
.ally-intro { max-width:60ch; margin:1.6rem auto 0; text-align:center; color:var(--tinta-2); font-size:var(--step-0); }
.ally-block { display:grid; grid-template-columns:230px 1fr; gap:2rem; align-items:center; padding:2rem 0; border-bottom:1px solid var(--linea); scroll-margin-top:96px; }
.ally-block:target { animation:allyFlash 2s var(--ease); }
@keyframes allyFlash { 0%,100%{ background:transparent; } 12%{ background:rgba(224,163,46,.12); } }
.ally-block__logo { display:grid; place-items:center; height:120px; padding:1.2rem; background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-lg); }
.ally-block__logo img { max-width:100%; max-height:72px; object-fit:contain; }
.ally-block__fb { display:none; place-items:center; text-align:center; font-family:var(--font-display); font-weight:600; font-size:var(--step-1); color:var(--tinta-3); }
.ally-block__tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.7rem; }
.ally-block__body h3 { font-size:var(--step-2); color:var(--tinta); margin-bottom:.5rem; }
.ally-block__body h3 small { font-weight:400; font-size:.6em; color:var(--tinta-3); font-family:var(--font-sans); }
.ally-block__body > p { color:var(--tinta-2); font-size:var(--step--1); line-height:1.65; max-width:66ch; margin-bottom:.7rem; }
.ally-block__body > p:last-of-type { margin-bottom:0; }
.ally-block__punch { max-width:60ch; margin-top:1rem; padding-left:1rem; border-left:3px solid var(--naranja); font-family:var(--font-display); font-weight:600; font-size:var(--step-1); color:var(--tinta); line-height:1.3; }
.ally-kpis { display:flex; flex-wrap:wrap; gap:1.6rem; margin-top:1.1rem; }
.ally-kpis > div { min-width:110px; }
.ally-kpis b { display:block; font-family:var(--font-display); font-size:var(--step-3); color:var(--verde-hover); line-height:1; letter-spacing:-.02em; }
.ally-kpis span { display:block; margin-top:.25rem; font-size:.72rem; color:var(--tinta-3); line-height:1.3; }
@media (max-width:700px){
  .ally-block{ grid-template-columns:1fr; gap:1.2rem; }
  .ally-block__logo{ height:96px; width:max-content; max-width:220px; }
  .ally-kpis{ gap:1.1rem; }
  .ally-kpis b{ font-size:var(--step-2); }
}

/* Ecosistema completo de aliados (listado categorizado). */
.ally-eco { display:grid; grid-template-columns:1fr 1fr; gap:1.8rem 2.6rem; margin-top:2.2rem; }
@media (max-width:760px){ .ally-eco{ grid-template-columns:1fr; } }
.ally-cat2 h3 { font-size:var(--step-0); color:var(--verde-hover); margin-bottom:.8rem; padding-bottom:.5rem; border-bottom:1px solid var(--linea); }
.ally-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.ally-chips span { font-size:var(--step--1); color:var(--tinta-2); background:var(--verde-suave); border:1px solid var(--linea); border-radius:var(--r-pill); padding:.38em .85em; transition:background .2s, border-color .2s; }
.ally-chips span:hover { background:#DCEAE5; border-color:rgba(16,96,73,.35); }

/* ---- Directorio de aliados: muro de logos ------------------------------
   La Fundación pidió ver el logo en vez del nombre. Se resuelve con casillas
   del MISMO tamaño y no con píldoras en fila, porque los logos vienen en
   proporciones muy distintas —el del PNUD es vertical, el de Ecopetrol muy
   apaisado— y en una fila de píldoras cada uno rompía la altura por su lado.

   Los que aún no tienen archivo de logo muestran su nombre dentro de la misma
   casilla: así el muro se lee parejo mientras llega el resto de logos, en vez
   de mezclar dos formas distintas en la misma cuadrícula. */
.ally-chips { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.6rem; }
.ally-mark {
  display:grid; place-items:center; min-height:76px; padding:.7rem .9rem;
  background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-md);
  transition:border-color .2s, box-shadow .2s;
}
.ally-mark:hover { border-color:rgba(16,96,73,.35); box-shadow:var(--shadow-sm); }
/* contain y no cover: un logo recortado deja de ser el logo. */
.ally-mark img { max-width:100%; max-height:46px; object-fit:contain; }
.ally-mark i {
  font-style:normal; font-size:var(--step--1); line-height:1.3;
  color:var(--tinta-2); text-align:center;
}
/* Cuando hay logo, el nombre queda para el lector de pantalla, no en pantalla. */
.ally-mark img + i { position:absolute; width:1px; height:1px; overflow:hidden;
                     clip-path:inset(50%); white-space:nowrap; }
.ally-mark--texto { background:var(--verde-suave); }
@media (max-width:520px){ .ally-chips{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } }

/* El «Perfil del egresado» de algunos diplomados es un párrafo, no una lista.
   Ocupa las dos columnas: partido en una sola quedaría en un canal tan
   estrecho que la línea se rompería cada cuatro palabras. */
.prog-card__lists > div:has(> .prog-card__perfil) { grid-column: 1 / -1; }
.prog-card__perfil { font-size:var(--step--1); color:var(--tinta-2); line-height:1.55; }

/* ---- Catálogo de Bootcamps -------------------------------------------
   Quince programas con descripción, objetivo, temario e información
   general. Van en acordeón: abiertos de golpe convierten la página en un
   muro por el que nadie baja; cerrados, se ven los quince títulos de una
   vez y cada quien abre el que le interesa. */
.bc-grupo {
  font-size:var(--step-0); letter-spacing:.02em; margin:2rem 0 .9rem;
  padding-left:.75rem; border-left:4px solid var(--verde);
}
.bc-grupo--naranja { border-left-color:var(--naranja); }
.bc-grupo--rojo    { border-left-color:var(--rojo); }

.bc-lista { display:grid; gap:.5rem; }
.bc { background:var(--blanco); border:1px solid var(--linea); border-radius:var(--r-md); overflow:hidden; }
.bc > summary {
  display:flex; align-items:center; gap:.9rem; cursor:pointer;
  padding:.95rem 1.1rem; list-style:none;
  transition:background .2s;
}
.bc > summary::-webkit-details-marker { display:none; }
.bc > summary:hover { background:var(--hueso); }
.bc__n { font-family:var(--font-display); font-weight:700; color:var(--tinta-3); font-size:var(--step-0); flex-shrink:0; }
.bc__t { font-weight:600; line-height:1.3; }
/* El signo se dibuja con CSS y no con un carácter: así gira al abrir sin
   depender de una tipografía que traiga ese glifo. */
.bc__mas { margin-left:auto; flex-shrink:0; width:14px; height:14px; position:relative; }
.bc__mas::before, .bc__mas::after {
  content:""; position:absolute; inset:50% 0 auto 0; height:2px;
  background:var(--tinta-3); transition:transform .25s var(--ease-out);
}
.bc__mas::after { transform:rotate(90deg); }
.bc[open] .bc__mas::after { transform:rotate(0deg); }
.bc[open] > summary { background:var(--hueso); }

.bc__cuerpo { padding:0 1.1rem 1.2rem; border-top:1px solid var(--linea); }
.bc__desc { margin-top:1rem; color:var(--tinta-2); line-height:1.6; }
.bc__obj { margin-top:.9rem; font-size:var(--step--1); color:var(--tinta-2); line-height:1.55; }
.bc__obj b { display:block; font-size:var(--step--1); text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-3); margin-bottom:.25rem; }
.bc__cols { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem 1.6rem; margin-top:1.2rem; }
@media (max-width:640px){ .bc__cols{ grid-template-columns:1fr; } }
.bc__cols h5 { font-size:var(--step--1); text-transform:uppercase; letter-spacing:.1em; color:var(--tinta-3); margin-bottom:.5rem; }
.bc__cols ul { display:grid; gap:.35rem; }
.bc__cols li { display:flex; gap:.5rem; align-items:flex-start; font-size:var(--step--1); color:var(--tinta-2); line-height:1.45; }
.bc__cols li::before { content:""; flex-shrink:0; width:5px; height:5px; border-radius:50%; background:var(--accent); margin-top:.55em; }
/* Rejilla de dos columnas y no <dl> corrido: el dato queda alineado con su
   rótulo aunque el texto ocupe dos renglones. */
.bc__datos { display:grid; grid-template-columns:auto 1fr; gap:.4rem .8rem; font-size:var(--step--1); }
.bc__datos dt { color:var(--tinta-3); font-weight:600; }
.bc__datos dd { color:var(--tinta-2); line-height:1.45; }
.bc__cuerpo .btn { margin-top:1.2rem; }