/* =====================================================
   Wireframe — Fundación Por Una Carrera
   Estética: escala de grises, sin imágenes (salvo logo en gris).
   ===================================================== */

:root {
  /* Esquinas redondeadas de los botones (estilo "Learn More" / "See More Topics").
     Cambiar acá ajusta todos los botones del sitio. */
  --btn-radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Radio de botón unificado. Cubre los .btn que no fijan su propio radio
   (.hero .btn, .cta-final .btn, .doc-actions .btn). Chips, tags e inputs
   conservan su forma de píldora (no son botones). */
.btn { border-radius: var(--btn-radius); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f4f4;
  color: #333;
  line-height: 1.5;
}

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

.wire {
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #bbb;
}

/* =====================================================
   HEADER
   ===================================================== */
.utility-bar {
  background: #555;
  padding: 10px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #fff;
}
.utility-bar .socials { display: flex; gap: 6px; }
.utility-bar .icon {
  width: 22px; height: 22px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  color: #fff;
}
.utility-bar .contacto {
  border: 1px dashed #fff;
  padding: 2px 10px;
  font-size: 11px;
}

/* Menú principal */
.nav-main {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 32px 0 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
  min-height: 96px;
}
.logo {
  display: flex;
  align-items: center;
  padding: 8px 24px;
}
.logo img {
  height: 80px;
  width: auto;
  display: block;
  filter: grayscale(100%) contrast(0.85) opacity(0.75);
}
.nav-main ul, .nav-main .cta-group { align-self: center; }
.nav-main-list {
  display: flex; gap: 40px;
  list-style: none;
  font-size: 17px;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.2px;
  align-items: center;
}
.nav-main-list > li {
  position: relative;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.nav-main-list > li.active { border-bottom-color: #222; }
.nav-main-list > li.has-submenu > a::after {
  content: " ▾";
  font-size: 11px;
  color: #888;
  margin-left: 2px;
}

/* Submenu (dropdown) */
.submenu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  min-width: 240px;
  background: #fff;
  border: 1px dashed #aaa;
  padding: 8px 0;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s, transform .15s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.nav-main-list > li.has-submenu:hover > .submenu,
.nav-main-list > li.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.submenu li { padding: 0; border: none; }
.submenu a {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #444;
  letter-spacing: 0;
  white-space: nowrap;
}
.submenu a:hover { background: #f4f4f4; color: #000; }
.submenu li.submenu-sep {
  border-top: 1px dashed #ddd;
  margin-top: 6px;
  padding-top: 6px;
}
.submenu li.submenu-sep > a { font-weight: 700; color: #222; }
.submenu li.submenu-heading {
  margin-bottom: 4px;
  border-bottom: 1px dashed #ddd;
}
.submenu li.submenu-heading > a,
.submenu li.submenu-heading > span {
  display: block;
  padding: 6px 18px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.submenu li.submenu-heading > a:hover { color: #000; background: #f4f4f4; }
.nav-main .cta-group { display: flex; gap: 8px; }
.nav-main .btn.primary {
  padding: 14px 32px;
  background: #222;
  color: #fff;
  border: 1px solid #222;
  border-radius: var(--btn-radius);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Menú secundario */
.nav-secondary {
  background: #f2f2f2;
  border-bottom: 1px solid #ddd;
  padding: 7px 32px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  font-size: 12px;
  color: #666;
}
.nav-secondary a {
  color: #666;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-secondary a::before {
  content: "";
  width: 10px; height: 10px;
  border: 1px dashed #aaa;
  background: #fafafa;
  display: inline-block;
}
.nav-secondary a.external .ext-mark {
  font-size: 10px;
  color: #999;
  margin-left: 2px;
}

/* =====================================================
   BREADCRUMB
   ===================================================== */
.breadcrumb {
  padding: 10px 32px;
  background: #fafafa;
  border-bottom: 1px dashed #ddd;
  font-size: 12px;
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.breadcrumb a { color: #666; }
.breadcrumb a:hover { color: #222; }
.breadcrumb .sep { color: #bbb; }
.breadcrumb .current { color: #222; font-weight: 600; }

/* =====================================================
   SECCIONES GENERALES
   ===================================================== */
section {
  padding: 48px 24px;
  border-bottom: 1px dashed #ccc;
}
.section-tag {
  display: inline-block;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
h1, h2 { color: #222; margin-bottom: 16px; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
p.placeholder {
  color: #888;
  max-width: 720px;
  margin-bottom: 16px;
}

/* Caja wireframe genérica */
.box {
  border: 1px dashed #999;
  background: #f0f0f0;
  display: grid; place-items: center;
  color: #888;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}
.box.x::before, .box.x::after {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.box.x::before {
  background: linear-gradient(to top right, transparent calc(50% - 1px), #bbb calc(50% - 1px), #bbb calc(50% + 1px), transparent calc(50% + 1px));
}
.box.x::after {
  background: linear-gradient(to top left, transparent calc(50% - 1px), #bbb calc(50% - 1px), #bbb calc(50% + 1px), transparent calc(50% + 1px));
}

/* =====================================================
   HERO (genérico, reutilizable)
   ===================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 64px 24px;
  background: #fafafa;
}
.hero .video { height: 320px; }
.hero .btn {
  padding: 12px 20px;
  border: 1px solid #333;
  background: #fff;
  font-weight: 600;
  font-size: 14px;
}
.hero .btn.primary { background: #333; color: #fff; }

/* =====================================================
   PROBLEMA (full-width stats)
   ===================================================== */
.problem-section { padding: 64px 0; }
.problem-section .intro {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.problem-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  width: 100%;
  border-top: 1px dashed #bbb;
  border-bottom: 1px dashed #bbb;
}
.problem-grid .stat {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px dashed #bbb;
}
.problem-grid .stat:last-child { border-right: none; }
.problem-grid .stat .num {
  font-size: 56px;
  font-weight: 800;
  color: #222;
  line-height: 1;
  letter-spacing: -1px;
}
.problem-grid .stat .lbl {
  margin-top: 12px;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* =====================================================
   MISIÓN / VISIÓN
   ===================================================== */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
.mv-grid .box { min-height: 180px; padding: 24px; }

/* =====================================================
   VALORES
   ===================================================== */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.valores-grid .box { min-height: 120px; }

/* =====================================================
   IMPACTO GENERAL
   ===================================================== */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.impact-grid .box {
  min-height: 100px;
  font-size: 14px;
  padding: 16px;
  text-align: center;
}

/* =====================================================
   IMPACTO POR PROGRAMA
   ===================================================== */
.programa-row {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px dashed #ddd;
  align-items: center;
}
.programa-row .ico { height: 80px; }
.programa-row .txt {
  min-height: 80px;
  padding: 12px;
  text-align: left;
  display: block;
  align-content: center;
}
.programa-row .kpi {
  min-height: 80px;
  padding: 12px;
  text-align: center;
  display: block;
  align-content: center;
}

/* =====================================================
   TESTIMONIOS — Carousel
   ===================================================== */
/* El encabezado (tag + h2) va a la izquierda; el carrusel se centra por sí mismo
   (.testimonio-cuerpo y .carousel-dots ya tienen su propio centrado). */
.testimonios-section .section-tag,
.testimonios-section h2 { text-align: left; }

.carousel {
  position: relative;
  margin: 32px auto 0;
  max-width: 980px;
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.carousel-viewport {
  flex: 1;
  overflow: hidden;
  border-radius: 16px;
  background: #f2f2f2;
}
.carousel-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}
.testimonio-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 48px;
  align-items: center;
  padding: 48px 56px;
  text-align: left;
}
.testimonio-foto {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
  filter: grayscale(1);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 10px;
  font-size: 11px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.testimonio-foto.is-placeholder {
  background: #e9e9e9;
  filter: none;
  color: #888;
  text-shadow: none;
  align-items: center;
}
.testimonio-cuerpo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.testimonio-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.5;
  color: #222;
  letter-spacing: -2px;
}
.testimonio-slide em {
  font-style: normal;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  max-width: 440px;
}
.testimonio-slide em::before,
.testimonio-slide em::after { content: none; }
.testimonio-attr strong { color: #222; font-size: 14px; display: block; }
.testimonio-attr span { font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.8px; }

/* Formato tipo "tarjeta de testimonio": sin flechas, solo puntos */
.testimonios-section .carousel-arrow { display: none; }

@media (max-width: 720px) {
  .testimonio-slide { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
  .testimonio-foto { height: 240px; }
}

.carousel-arrow {
  width: 40px;
  border: 1px dashed #999;
  background: #fff;
  font-size: 22px;
  color: #444;
  cursor: pointer;
  font-family: inherit;
}
.carousel-arrow:hover { background: #222; color: #fff; border-style: solid; border-color: #222; }

.carousel-dots {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.carousel-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid #999;
  background: #fff;
  cursor: pointer;
  padding: 0;
}
.carousel-dot.active { background: #222; border-color: #222; }

/* =====================================================
   CTA FINAL
   ===================================================== */
.cta-final {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 64px 24px;
}
.cta-final h2 { color: #fff; }
.cta-final .btn-row {
  display: flex; gap: 16px; justify-content: center; margin-top: 24px;
}
.cta-final .btn {
  padding: 14px 28px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-weight: 600;
}
.cta-final .btn.primary { background: #fff; color: #333; }

/* =====================================================
   TIMELINE (Nosotros)
   ===================================================== */
.timeline-section { padding: 48px 24px; }
.timeline {
  position: relative;
  margin-top: 32px;
  padding-left: 120px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 90px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-left: 1px dashed #999;
}
.tl-item {
  position: relative;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -36px;
  top: 6px;
  width: 14px; height: 14px;
  border: 1px dashed #666;
  background: #fff;
  border-radius: 50%;
}
.tl-year {
  position: absolute;
  left: -120px;
  top: 0;
  width: 70px;
  text-align: right;
  font-weight: 800;
  color: #222;
  font-size: 16px;
}
.tl-body {
  padding: 14px 16px;
  border: 1px dashed #bbb;
  background: #fafafa;
  color: #555;
  font-size: 13px;
}
.tl-body strong { color: #222; }

/* =====================================================
   EQUIPO / DIRECTORIO / CONSEJO (grids de personas)
   ===================================================== */
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.equipo-grid .persona {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px;
  border: 1px dashed #ccc;
  background: #fafafa;
  font-size: 13px;
}
.equipo-grid .persona .avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
}
.equipo-grid .persona strong { color: #222; }
.equipo-grid .persona .rol {
  font-size: 11px;
  color: #777;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* =====================================================
   DOCS (Transparencia)
   ===================================================== */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.doc-card {
  display: block;
  padding: 20px;
  border: 1px dashed #999;
  background: #fafafa;
  color: #555;
  font-size: 12px;
  border-radius: 16px;
}
.doc-card .doc-icon {
  width: 48px; height: 56px;
  margin-bottom: 14px;
}
.doc-card strong {
  display: block;
  color: #222;
  font-size: 15px;
  margin-bottom: 6px;
}
.doc-card span { display: block; margin-bottom: 10px; }
.doc-card .doc-link {
  color: #222;
  font-weight: 600;
  font-size: 12px;
}

/* =====================================================
   DOC READER (Memoria / FECU)
   ===================================================== */
.doc-reader-section { padding: 48px 24px; }
.doc-reader-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 24px;
}
.doc-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.doc-actions .btn {
  padding: 10px 16px;
  border: 1px solid #333;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.doc-actions .btn.primary { background: #333; color: #fff; }
.doc-reader {
  width: 100%;
  height: 720px;
  border: 1px dashed #999;
  background: #f0f0f0;
  overflow: hidden;
}
.doc-reader iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.doc-reader-foot {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666;
}
.back-link { color: #333; font-weight: 600; }
.doc-history a { color: #666; }

/* =====================================================
   DOCS LIST (Transparencia)
   ===================================================== */
.docs-list {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}
.doc-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  border: 1px dashed #bbb;
  background: #fafafa;
  color: #555;
  font-size: 13px;
}
.doc-row .doc-icon { width: 48px; height: 56px; margin: 0; }
.doc-row strong {
  display: block;
  color: #222;
  font-size: 15px;
  margin-bottom: 4px;
}
.doc-row .doc-link {
  color: #222;
  font-weight: 600;
  white-space: nowrap;
}
.related-docs { margin-top: 48px; }
.related-docs h3 {
  font-size: 15px;
  color: #444;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

/* =====================================================
   CONVENIOS
   ===================================================== */
.convenios-filters {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 24px 0 16px;
  flex-wrap: wrap;
}
.filter-label {
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 4px;
}
.filter-chip {
  padding: 6px 14px;
  border: 1px dashed #999;
  background: #fff;
  color: #555;
  font-size: 12px;
  cursor: pointer;
  border-radius: 999px;
}
.filter-chip.active {
  background: #333;
  color: #fff;
  border-style: solid;
  border-color: #333;
}
.convenios-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}
.convenios-table th,
.convenios-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px dashed #ddd;
}
.convenios-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #888;
  border-bottom: 1px dashed #aaa;
}
.convenios-table td a { color: #222; font-weight: 600; }
.convenios-note { margin-top: 12px; font-size: 11px; }

/* =====================================================
   ¿QUÉ HACEMOS? — Modelo (capas concéntricas)
   ===================================================== */
.modelo-section {
  padding: 64px 24px 48px;
  border-bottom: 1px dashed #ccc;
  background: #fff;
}
.modelo-intro {
  max-width: 720px;
  margin: 0 auto 32px;
  text-align: center;
}
.modelo-intro p { margin: 0 auto; }
.modelo-vis {
  display: flex;
  justify-content: center;
}
.modelo-svg {
  width: 100%;
  max-width: 800px;
  height: auto;
}

.modelo-legend {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.modelo-legend li {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 18px;
  font-size: 12px;
  color: #555;
}
.modelo-legend strong { display: block; color: #222; font-size: 14px; margin: 8px 0 4px; }
.modelo-num {
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1.5px;
}

@media (max-width: 720px) {
  .modelo-legend { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   ¿QUÉ HACEMOS? — Explorador 3 columnas
   ===================================================== */
.qh-explorer {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1.4fr;
  gap: 0;
  padding: 64px 0;
  border-bottom: 1px dashed #ccc;
  background: #fafafa;
}
.qh-col { padding: 0 32px; }
.qh-intro h2 { font-size: 26px; line-height: 1.25; }
.qh-intro p { color: #666; }

.qh-cats {
  border-right: 1px dashed #bbb;
}
.qh-cat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 0;
}
.qh-cat {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 18px;
  color: #888;
  cursor: pointer;
  text-align: left;
  font-weight: 500;
  font-family: inherit;
  transition: color .15s;
}
.qh-cat:hover { color: #444; }
.qh-cat.active {
  color: #222;
  font-weight: 700;
}

.qh-items {
  position: relative;
  border-left: 1px dashed #bbb;
  margin-left: -1px;
}
.qh-dot {
  position: absolute;
  left: -7px;
  width: 12px; height: 12px;
  background: #222;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: top .25s ease;
  pointer-events: none;
}
.qh-item-group {
  display: none;
  flex-direction: column;
  gap: 18px;
}
.qh-item-group.active { display: flex; }
.qh-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 4px;
}
.qh-item:hover { color: #000; }
.qh-item em {
  font-style: normal;
  font-size: 12px;
  color: #888;
  font-weight: 400;
}
.qh-item .ext {
  font-size: 11px;
  color: #999;
  margin-left: 4px;
}

@media (max-width: 900px) {
  .qh-explorer { grid-template-columns: 1fr; gap: 24px; }
  .qh-cats { border-right: none; border-bottom: 1px dashed #bbb; padding-bottom: 16px; }
  .qh-cat-list { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .qh-items { border-left: none; }
  .qh-items::before { display: none; }
}

/* Audiencias */
.audiencia-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.audiencia-card {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 20px;
  border-radius: 16px;
  text-align: center;
  color: #555;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.audiencia-card strong { color: #222; font-size: 14px; }
.icon-lg {
  width: 64px; height: 64px;
  margin-bottom: 8px;
}

/* Programas educativos */
.programas-detail {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}
.programa-detail-card {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 24px;
  border-radius: 16px;
}
.programa-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  align-items: flex-start;
}
.programa-img { height: 160px; }
.programa-head h3 { font-size: 22px; color: #222; margin: 8px 0; }
.programa-head p { color: #555; font-size: 14px; line-height: 1.6; }
.badge {
  display: inline-block;
  padding: 3px 10px;
  border: 1px dashed #888;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #555;
  background: #fff;
}
.programa-meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #ddd;
  font-size: 12px;
  color: #666;
}
.programa-meta strong { color: #222; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }

/* Programas para empresas (3 cards) */
.programa-corp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.programa-corp {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: #555;
}
.programa-corp strong { color: #222; font-size: 14px; }

/* Herramientas digitales */
.herramientas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.herramientas-grid.herramientas-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Plataforma Conócete - card destacada para colegios */
.plataforma-card {
  margin-top: 32px;
  background: #f7f7f7;
  border: 1px dashed #bbb;
  border-radius: 16px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: center;
}
.plataforma-info h3 {
  font-size: 22px;
  color: #222;
  margin: 8px 0 12px;
}
.plataforma-info > p {
  color: #555;
  line-height: 1.5;
  font-size: 13px;
  margin: 8px 0;
}
.plataforma-como {
  background: #fff;
  border-left: 3px solid #222;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  display: block;
}
.plataforma-como strong {
  display: block;
  color: #222;
  margin-bottom: 4px;
}
.plataforma-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.plataforma-actions .btn {
  padding: 10px 18px;
  border: 1px solid #222;
  border-radius: var(--btn-radius);
  font-size: 13px;
  font-weight: 600;
  color: #222;
  background: #fff;
}
.plataforma-actions .btn.primary {
  background: #222;
  color: #fff;
}
.plataforma-img {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 12px;
}
@media (max-width: 720px) {
  .plataforma-card { grid-template-columns: 1fr; }
}
.herramienta-card {
  border: 1px dashed #bbb;
  border-radius: 16px;
  background: #fafafa;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: #555;
}
.herramienta-card .badge { align-self: flex-start; }
.herramienta-card strong { color: #222; font-size: 15px; }
.herramienta-icon { width: 100%; height: 100px; margin-bottom: 4px; border-radius: 12px; }

/* Materiales */
.materiales-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.material-card {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  color: #555;
}
.material-card strong { color: #222; font-size: 15px; }
.material-card .material-icon { width: 56px; height: 56px; }
.material-card .material-link {
  margin-top: auto;
  color: #222;
  font-weight: 600;
  font-size: 13px;
}

/* Iniciativas y conocimiento — destacado */
#iniciativas {
  background: #f0f0f0;
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;
  padding: 64px 24px;
}
.iniciativas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.iniciativa-card {
  border: 1px dashed #999;
  background: #fff;
  padding: 28px;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 20px;
  align-items: flex-start;
  font-size: 13px;
  color: #555;
  min-height: 200px;
}
.iniciativa-card .iniciativa-icon { width: 88px; height: 88px; }
.iniciativa-body { display: flex; flex-direction: column; }
.iniciativa-card .badge { align-self: flex-start; margin-bottom: 6px; }
.iniciativa-card strong {
  display: block;
  color: #222;
  font-size: 22px;
  margin: 6px 0 10px;
  letter-spacing: -0.3px;
}
.iniciativa-card .material-link {
  display: inline-block;
  margin-top: 12px;
  color: #222;
  font-weight: 700;
  font-size: 13px;
  align-self: flex-start;
}

/* Alianzas */
.alianzas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.alianza-card {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: #555;
  min-height: 180px;
}
.alianza-card strong { color: #222; font-size: 16px; }
.alianza-card a {
  margin-top: auto;
  color: #222;
  font-weight: 600;
}

/* =====================================================
   HOME — Hero slider con capas
   ===================================================== */
.hero-slider {
  position: relative;
  height: 540px;
  background: #f0f0f0;
  border-bottom: 1px dashed #ccc;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.hero-slide.active { opacity: 1; visibility: visible; }

.layer { position: absolute; pointer-events: none; }

/* Capa de fondo (imagen real) con ken-burns sutil */
.layer-bg {
  inset: 0;
  background-color: #e8e8e8;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%) contrast(1.05) brightness(1.05);
  text-indent: -9999px;
  transform-origin: center;
}
/* Capa de overlay claro para asegurar contraste con el texto */
.layer-overlay {
  inset: 0;
  background: linear-gradient(to right, rgba(245,245,245,0.85) 0%, rgba(245,245,245,0.55) 45%, rgba(245,245,245,0.15) 80%, rgba(245,245,245,0) 100%);
  z-index: 1;
}
.hero-slide.active .layer-bg {
  animation: kenburns 14s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.2%, -0.8%); }
}

/* Formas decorativas con drift sutil */
.layer-shape { z-index: 2; opacity: 0.55; }
.shape-circle {
  width: 220px; height: 220px;
  border: 1px dashed #888;
  border-radius: 50%;
  top: 8%;
  right: 6%;
  background: rgba(255,255,255,0.4);
}
.hero-slide.active .shape-circle { animation: drift1 9s ease-in-out infinite alternate; }
@keyframes drift1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-14px, 12px); }
}
.shape-circle-alt {
  width: 320px; height: 320px;
  top: auto;
  bottom: -120px;
  right: -80px;
}
.shape-square {
  width: 180px; height: 180px;
  border: 1px dashed #888;
  bottom: 10%;
  right: 8%;
  background: rgba(255,255,255,0.4);
  transform: rotate(8deg);
}
.hero-slide.active .shape-square { animation: drift2 11s ease-in-out infinite alternate; }
@keyframes drift2 {
  from { transform: rotate(8deg) translate(0, 0); }
  to   { transform: rotate(4deg) translate(10px, -10px); }
}
.shape-line {
  width: 140px; height: 1px;
  border-top: 1px dashed #666;
  top: 60%; left: 6%;
}
.hero-slide.active .shape-line { animation: drift3 7s ease-in-out infinite alternate; }
@keyframes drift3 {
  from { transform: translateX(0); width: 140px; }
  to   { transform: translateX(20px); width: 180px; }
}
.shape-dot-grid {
  width: 120px; height: 120px;
  background-image: radial-gradient(#666 1px, transparent 1px);
  background-size: 14px 14px;
  top: 12%;
  left: 4%;
  opacity: 0.35;
}
.hero-slide.active .shape-dot-grid { animation: drift1 12s ease-in-out infinite alternate; }

/* Capa de contenido — fade+rise al activarse */
.layer-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 80px 64px 110px;
  max-width: 720px;
  pointer-events: auto;
}
.layer-content .section-tag,
.layer-content h1,
.layer-content p,
.layer-content .hero-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.hero-slide.active .layer-content > * { opacity: 1; transform: translateY(0); }
.hero-slide.active .layer-content .section-tag { transition-delay: .2s; }
.hero-slide.active .layer-content h1            { transition-delay: .35s; }
.hero-slide.active .layer-content p             { transition-delay: .5s; }
.hero-slide.active .layer-content .hero-cta     { transition-delay: .65s; }

.layer-content h1 {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  margin: 12px 0;
}
.layer-content p { color: #444; max-width: 540px; margin-bottom: 18px; }
.hero-cta {
  display: inline-block;
  align-self: flex-start;
  padding: 12px 24px;
  background: #222;
  color: #fff;
  border-radius: var(--btn-radius);
  font-weight: 700;
  font-size: 14px;
}

/* Controles */
.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 110px;
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dot {
  width: 28px;
  height: 4px;
  border: none;
  background: rgba(0,0,0,0.18);
  cursor: pointer;
  padding: 0;
  border-radius: 2px;
  transition: background .25s, width .25s;
}
.hero-dot.active { background: #222; width: 56px; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border: 1px dashed #888;
  background: rgba(255,255,255,0.7);
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}
.hero-arrow:hover { background: #222; color: #fff; border-style: solid; border-color: #222; }
.hero-prev { left: 16px; }
.hero-next { right: 16px; }

@media (max-width: 720px) {
  .hero-slider { height: 460px; }
  .layer-content { padding: 32px 24px 80px 70px; }
  .layer-content h1 { font-size: 28px; }
  .hero-dots { left: 70px; }
  .shape-circle, .shape-square, .shape-circle-alt, .shape-dot-grid { display: none; }
}

/* 3 rutas */
.home-rutas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px dashed #ccc;
}
.ruta-card {
  padding: 40px 32px;
  border-right: 1px dashed #ccc;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
}
.ruta-card:last-child { border-right: none; }
.ruta-num {
  font-size: 12px;
  letter-spacing: 2px;
  color: #999;
  text-transform: uppercase;
}
.ruta-card strong { color: #222; font-size: 22px; letter-spacing: -0.2px; }
.ruta-card span { color: #666; font-size: 13px; line-height: 1.55; }
.ruta-card .ruta-cta {
  margin-top: auto;
  font-weight: 700;
  color: #222;
  font-size: 14px;
  padding-top: 8px;
}

/* Impacto, herramientas, programas, noticias — padding común */
.home-impact, .home-herramientas, .home-programas, .home-aliados, .home-noticias {
  padding: 48px 32px;
  border-bottom: 1px dashed #ccc;
}
.home-link {
  display: inline-block;
  margin-top: 20px;
  font-weight: 700;
  color: #222;
  font-size: 14px;
}

/* Programas destacados */
.home-programas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.home-programa-card {
  position: relative;
  display: block;
  height: 320px;
  border: 1px dashed #bbb;
  border-radius: 16px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  font-size: 13px;
  filter: grayscale(1);
  transition: filter .3s ease;
}
.home-programa-card:hover { filter: grayscale(0.15); }
/* Velo para legibilidad del título sobre la foto */
.home-programa-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%);
  transition: background .3s ease;
}
.home-programa-card:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 100%);
}
.home-programa-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.home-programa-overlay strong { color: #fff; font-size: 18px; line-height: 1.25; }
.home-programa-overlay strong small { font-weight: 400; color: #ccc; }
.home-programa-card .badge {
  align-self: flex-start;
  color: #fff;
  border-color: rgba(255,255,255,.7);
  background: transparent;
}
.home-programa-overlay .home-programa-info { color: #e6e6e6; line-height: 1.45; }
.home-programa-overlay .home-programa-cta { color: #fff; font-weight: 600; }
/* Elementos ocultos hasta el hover */
.home-programa-card .badge,
.home-programa-overlay .home-programa-info,
.home-programa-overlay .home-programa-cta {
  opacity: 0;
  max-height: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, max-height .3s ease, transform .3s ease;
}
.home-programa-card:hover .badge,
.home-programa-card:hover .home-programa-info,
.home-programa-card:hover .home-programa-cta,
.home-programa-card:focus-visible .badge,
.home-programa-card:focus-visible .home-programa-info,
.home-programa-card:focus-visible .home-programa-cta {
  opacity: 1;
  max-height: 90px;
  transform: translateY(0);
}

/* Alianzas — slider único (sin categorías) */
.logos-slider {
  margin-top: 24px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: logos-scroll 28s linear infinite;
}
.logos-slider:hover .logos-track { animation-play-state: paused; }
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.logo-slot {
  width: 140px;
  height: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #555;
}
.logo-slot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* Noticias */
.noticias-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.noticia-card {
  border: 1px dashed #bbb;
  border-radius: 16px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #555;
  padding: 0 0 22px;
}
.noticia-card .noticia-img {
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 8px;
  filter: grayscale(1);
  transition: filter .3s ease;
}
/* Wireframe: la imagen se mantiene en grises también en hover */
.noticia-card:hover .noticia-img { filter: grayscale(1); }
/* Etiqueta de categoría sobre la imagen (arriba a la derecha) */
.noticia-card .noticia-cat {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 16px;
  background: rgba(255,255,255,.92);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #444;
}
.noticia-card strong { color: #222; font-size: 17px; padding: 4px 22px 0; line-height: 1.3; }
.noticia-card .noticia-date {
  font-size: 12px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0 22px;
}
/* Botón "Leer más" centrado y con borde (formato tarjeta) */
.noticia-card .noticia-leermas {
  align-self: center;
  margin-top: 14px;
  padding: 12px 36px;
  border: 1px solid #bbb;
  border-radius: var(--btn-radius);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #444;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.noticia-card:hover .noticia-leermas {
  background: #222;
  border-color: #222;
  color: #fff;
}

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; padding: 48px 24px; }
  .home-rutas { grid-template-columns: 1fr; }
  .ruta-card { border-right: none; border-bottom: 1px dashed #ccc; }
  .ruta-card:last-child { border-bottom: none; }
  .home-programas-grid, .noticias-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   DONA — formulario Payku + info lateral
   ===================================================== */

/* Hero estilo "imagen superpuesta": franja oscura con título + texto centrados
   arriba, y video centrado que se superpone sobre el borde inferior. */
.dona-hero {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 64px 24px 0;
}
.dona-hero .section-tag { color: #bbb; }
.dona-hero h1 { color: #fff; max-width: 760px; margin: 0 auto 14px; }
.dona-hero .placeholder { color: #ccc; max-width: 600px; margin: 0 auto; }
.dona-hero-media {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 44px auto -90px;
}
.dona-hero-media .video {
  height: 420px;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
/* La sección siguiente cede espacio para el video superpuesto. */
body[data-page="dona"] .dona-section { padding-top: 130px; }

@media (max-width: 900px) {
  .dona-hero-media { max-width: 100%; margin-bottom: -70px; }
  .dona-hero-media .video { height: 280px; }
  body[data-page="dona"] .dona-section { padding-top: 110px; }
}

.dona-section { padding: 48px 24px; }
.dona-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 32px;
  align-items: flex-start;
}
.dona-form { padding-right: 16px; }
.payku-wrap {
  border: 1px dashed #999;
  background: #fafafa;
  margin-top: 16px;
  overflow: hidden;
}
.payku-wrap iframe {
  display: block;
  border: none;
  width: 100%;
  min-height: 650px;
}

.dona-info {
  border: 1px dashed #bbb;
  background: #fafafa;
  padding: 24px;
  position: sticky;
  top: 16px;
}
.dona-info h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #222;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #ccc;
}
.dona-info-block {
  padding: 14px 0;
  border-bottom: 1px dashed #ddd;
  font-size: 13px;
  color: #555;
}
.dona-info-block:last-child { border-bottom: none; }
.dona-info-block strong {
  display: block;
  color: #222;
  font-size: 14px;
  margin-bottom: 8px;
}
.dona-info-block ul {
  list-style: none;
  font-size: 12px;
}
.dona-info-block ul li { margin-bottom: 6px; }
.dona-info-block ul li span {
  display: inline-block;
  min-width: 110px;
  color: #888;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.dona-info-link {
  display: inline-block;
  margin-top: 8px;
  color: #222;
  font-weight: 700;
  font-size: 13px;
}

.dona-impact { padding: 48px 24px; border-top: 1px dashed #ccc; }

@media (max-width: 900px) {
  .dona-grid { grid-template-columns: 1fr; }
  .dona-info { position: static; }
}

/* =====================================================
   COLEGIOS
   ===================================================== */
.col-section { padding: 48px 24px; border-bottom: 1px dashed #ccc; }
.col-section-alt { background: #fafafa; }

/* Servicios grid */
.servicios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

/* Filtro por categoría + cards con imagen */
.filtros-cat {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.filtro-chip {
  border: 1px solid #ccc;
  background: #fff;
  color: #555;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.filtro-chip:hover { border-color: #222; color: #222; }
.filtro-chip.active {
  background: #222;
  border-color: #222;
  color: #fff;
}

.servicios-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
.servicio-img-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 240px;
  border-radius: 20px;
  overflow: hidden;
  padding: 18px;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  filter: grayscale(1);
  transition: filter .3s ease, transform .3s ease;
}
.servicio-img-card.is-hidden { display: none; }
.servicio-img-card:hover { filter: grayscale(0); transform: translateY(-3px); }
.servicio-img-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,0) 78%);
}
.servicio-img-cat {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 999px;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.servicio-img-card:hover .servicio-img-cat,
.servicio-img-card:focus-visible .servicio-img-cat { opacity: 1; transform: translateY(0); }
.servicio-img-nombre {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.servicio-card {
  border: 1px dashed #bbb;
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: #555;
  min-height: 220px;
}
.servicio-card h3 { color: #222; font-size: 18px; margin: 6px 0 4px; }
.servicio-card .servicio-icon { width: 56px; height: 56px; margin-bottom: 4px; }
.servicio-card .material-link { margin-top: auto; color: #222; font-weight: 700; font-size: 13px; }
.servicio-card.servicio-destacado {
  background: #222;
  color: #ccc;
  border-style: solid;
  border-color: #222;
  grid-column: span 2;
}
.servicio-destacado h3 { color: #fff; font-size: 22px; }
.servicio-destacado .badge { color: #fff; border-color: #fff; background: transparent; }
.servicio-destacado .material-link { color: #fff; }
.servicio-destacado strong { color: #fff; }

/* Logos de instituciones dentro de un programa (según sea el caso) */
.servicio-logos { margin-top: 6px; }
.servicio-logos-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
  opacity: .8;
}
.logos-row-compact { gap: 8px; }
.logos-row-compact .logo-slot {
  width: 88px;
  height: 44px;
  font-size: 11px;
}

/* Instituciones tabs */
.instituciones-tabs {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  flex-wrap: wrap;
}

/* Casos */
/* Selector de público (modular: auto-fit, escala solo al agregar tarjetas) */
.publico-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.publico-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px;
  border: 1px dashed #bbb;
  border-radius: 16px;
  background: #fafafa;
  color: #555;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.publico-card:hover { border-color: #888; background: #f2f2f2; }
.publico-card strong { color: #222; font-size: 18px; }
.publico-card .publico-desc { font-size: 12px; color: #777; }
.publico-card .publico-ico {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: #555;
}
.publico-card.active {
  border-style: solid;
  border-color: #222;
  background: #222;
  color: #fff;
}
.publico-card.active strong { color: #fff; }
.publico-card.active .publico-desc { color: #ccc; }
.publico-card.active .publico-ico { background: #fff; color: #222; }

.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.caso-card {
  border: 1px dashed #bbb;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.caso-card[hidden] { display: none; }
.caso-card .caso-img { width: 100%; height: 160px; }
.caso-card .caso-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #555;
}
.caso-card h3 { color: #222; font-size: 16px; line-height: 1.3; margin: 6px 0 4px; }
.caso-card .badge { align-self: flex-start; }
.caso-card .material-link { margin-top: 6px; color: #222; font-weight: 700; }

/* Hover estilo overlay: el card es la imagen con el título encima; al pasar el
   mouse la imagen se oscurece y la info aparece en blanco sobre la imagen. */
.caso-card { position: relative; overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; }
.caso-card:hover { box-shadow: 0 16px 36px rgba(0,0,0,.18); transform: translateY(-4px); }
.caso-card .caso-img { height: 220px; }
.caso-card .caso-body {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: auto;
  gap: 0;
  color: #fff;
  background: linear-gradient(to top, rgba(15,15,15,.9), rgba(15,15,15,.45) 55%, transparent);
  transition: top .3s ease, background .3s ease;
}
.caso-card .caso-body h3 { color: #fff; }
.caso-card .caso-body .badge { border-color: rgba(255,255,255,.6); color: #fff; background: rgba(255,255,255,.15); }
.caso-card .caso-body .material-link { color: #fff; }
.caso-card p,
.caso-card .material-link {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: opacity .25s ease, max-height .3s ease, margin .25s ease;
}
.caso-card:hover .caso-body {
  top: 0;
  justify-content: center;
  background: rgba(15,15,15,.84);
}
.caso-card:hover p { opacity: 1; max-height: 100px; margin-top: 4px; }
.caso-card:hover .material-link { opacity: 1; max-height: 40px; margin-top: 10px; }

/* Estudios list (reusa doc-row) */
.estudios-list { display: grid; gap: 10px; margin-top: 24px; }

/* Formulario contacto */
.col-form {
  margin-top: 24px;
  max-width: 880px;
  border: 1px dashed #bbb;
  background: #fff;
  padding: 24px;
}
.col-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.col-form label, .col-form-full {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.col-form-full { margin-top: 14px; }
.col-form input,
.col-form select,
.col-form textarea {
  border: 1px dashed #999;
  background: #fafafa;
  padding: 10px 12px;
  font-size: 14px;
  color: #222;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.col-form textarea { resize: vertical; }
.col-form input:focus,
.col-form select:focus,
.col-form textarea:focus {
  outline: none;
  border-style: solid;
  border-color: #222;
}

@media (max-width: 900px) {
  .servicios-grid, .casos-grid { grid-template-columns: 1fr; }
  .servicios-cards { grid-template-columns: repeat(2, 1fr); }
  .servicio-card.servicio-destacado { grid-column: span 1; }
  .col-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .servicios-cards { grid-template-columns: 1fr; }
}

/* =====================================================
   ACOMPAÑAMIENTO PERSONALIZADO (lista de proceso numerada)
   ===================================================== */
.proceso-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.proceso-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 16px 16px;
  border: 1px dashed #ccc;
  border-radius: 12px;
  background: #fff;
}
.proceso-list .proceso-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #888;
  border: 1px solid #ddd;
  padding: 2px 8px;
  border-radius: 999px;
  width: fit-content;
}
.proceso-list strong { color: #222; font-size: 15px; }
.proceso-list span { font-size: 13px; color: #555; line-height: 1.4; }

/* =====================================================
   ODS — Objetivos de Desarrollo Sostenible
   ===================================================== */
.ods-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.ods-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px dashed #ccc;
  border-radius: 12px;
  background: #fff;
}
.ods-card .ods-icon {
  width: 56px;
  height: 56px;
  font-weight: 800;
  font-size: 13px;
}
.ods-card strong { color: #222; font-size: 14px; }
.ods-card span { font-size: 12px; color: #555; line-height: 1.4; }

@media (max-width: 900px) {
  .proceso-list { grid-template-columns: 1fr 1fr; }
  .ods-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   NOTICIAS — listado
   ===================================================== */
.noticias-header {
  padding: 48px 24px 24px;
  border-bottom: 1px dashed #ccc;
}
.noticias-header h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 8px 0 10px;
  letter-spacing: -0.4px;
}

.noticias-tools {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}
.noticias-search {
  width: 100%;
  max-width: 420px;
  padding: 10px 14px;
  border: 1px solid #bbb;
  border-radius: 999px;
  font-size: 14px;
  background: #fff;
}
.noticias-search:focus { outline: none; border-color: #222; }
.noticias-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Noticia destacada */
.noticia-destacada {
  padding: 32px 24px;
  background: #fafafa;
  border-bottom: 1px dashed #ccc;
}
.noticia-destacada-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.noticia-destacada-card:hover .material-link { text-decoration: underline; }
.noticia-destacada-img {
  width: 100%;
  height: 320px;
}
.noticia-destacada-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.noticia-destacada-body h2 {
  font-size: 26px;
  line-height: 1.2;
  margin: 4px 0 6px;
  letter-spacing: -0.3px;
  color: #222;
}
.noticia-destacada-body p { font-size: 14px; color: #444; line-height: 1.5; }
.noticia-destacada-body .material-link {
  color: #222;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
}

/* Grid de noticias */
.noticias-section {
  padding: 40px 24px;
  border-bottom: 1px dashed #ccc;
}
.noticias-section .noticias-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.noticias-section .noticia-card {
  border: 1px dashed #ccc;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.noticias-section .noticia-card a {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.noticias-section .noticia-card .noticia-img { height: 100%; min-height: 160px; border-radius: 0; }
.noticia-card .noticia-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.noticia-card h3 {
  font-size: 16px;
  line-height: 1.3;
  margin: 4px 0;
  color: #222;
}
.noticia-card p { font-size: 13px; color: #555; line-height: 1.45; }
.noticia-card .material-link {
  color: #222;
  font-weight: 700;
  font-size: 13px;
  margin-top: auto;
}
.noticia-card:hover .material-link { text-decoration: underline; }

.noticia-fecha {
  font-size: 12px;
  color: #777;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Paginación */
.paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.paginacion a {
  color: #222;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.paginacion .pag-prev[aria-disabled="true"] { color: #bbb; pointer-events: none; }
.pag-numeros {
  list-style: none;
  display: flex;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.pag-numeros a, .pag-numeros span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
}
.pag-numeros a.active {
  background: #222;
  color: #fff;
  border-color: #222;
}
.pag-numeros span { border: none; color: #888; }

/* Newsletter */
.noticias-suscripcion {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 48px 24px;
  background: #fafafa;
}
.noticias-suscripcion h2 {
  font-size: 24px;
  line-height: 1.2;
  margin: 8px 0 6px;
  letter-spacing: -0.3px;
}
.suscripcion-form {
  display: flex;
  gap: 8px;
}
.suscripcion-form input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #bbb;
  border-radius: 999px;
  font-size: 14px;
  background: #fff;
}
.suscripcion-form input:focus { outline: none; border-color: #222; }

@media (max-width: 900px) {
  .noticia-destacada-card { grid-template-columns: 1fr; }
  .noticia-destacada-img { height: 220px; }
  .noticias-section .noticias-grid { grid-template-columns: 1fr; }
  .noticias-section .noticia-card a { grid-template-columns: 1fr; }
  .noticias-section .noticia-card .noticia-img { min-height: 180px; }
  .noticias-suscripcion { grid-template-columns: 1fr; }
}

/* =====================================================
   CASO DE ÉXITO (detalle)
   ===================================================== */
.caso-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  align-items: center;
  padding: 64px 32px;
  background: #fafafa;
  border-bottom: 1px dashed #ccc;
}
.caso-hero-text .badge { margin-bottom: 14px; }
.caso-hero-text h1 { font-size: 36px; line-height: 1.15; margin: 8px 0 16px; letter-spacing: -0.4px; }
.caso-hero-img { height: 380px; }

/* En los single de programa, la cabecera es solo texto y la galería va debajo
   como visual del encabezado (imagen + thumbnails a la derecha). */
body[data-page="programas"] .caso-hero { grid-template-columns: 1fr; }
body[data-page="programas"] .caso-hero-text { max-width: 820px; }
.programa-galeria { padding-top: 28px; }
.programa-galeria .galeria-viewer { margin-top: 0; }

.caso-meta {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 0;
  margin-top: 24px;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
}
.caso-meta li {
  padding: 14px 18px;
  border-right: 1px dashed #ddd;
  font-size: 12px;
  color: #666;
}
.caso-meta li:last-child { border-right: none; }
.caso-meta li span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #999;
  margin-bottom: 4px;
}
.caso-meta li strong { color: #222; font-size: 14px; }

.caso-section {
  padding: 48px 32px;
  border-bottom: 1px dashed #ccc;
}
.caso-section-alt { background: #fafafa; }

/* Layout: desafío con sidebar de stats */
.caso-section:has(.caso-side) {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: flex-start;
}
.caso-section:has(.caso-side) .caso-content { padding-right: 16px; }
.caso-section .caso-content p { color: #555; margin-bottom: 14px; max-width: 720px; }

.caso-side { display: grid; gap: 12px; }
.caso-stat {
  border: 1px dashed #999;
  padding: 18px 20px;
  background: #fff;
  display: grid;
  gap: 4px;
}
.caso-stat strong { font-size: 28px; color: #222; font-weight: 800; line-height: 1; }
.caso-stat span { font-size: 12px; color: #666; }

/* Pasos numerados */
.caso-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.caso-steps li {
  border: 1px dashed #bbb;
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.caso-step-num {
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: 1.5px;
}
.caso-steps strong { color: #222; font-size: 16px; }
.caso-steps p { color: #555; font-size: 13px; line-height: 1.55; }

/* Galería */
.caso-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}
.caso-galeria > .box { height: 200px; }

/* Galería tipo visor: imagen principal grande + thumbnails al costado (con contador). */
.galeria-viewer {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 16px;
  margin-top: 24px;
}
.galeria-main { height: 460px; font-size: 14px; }
.galeria-count {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  background: rgba(0,0,0,.65);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.galeria-thumbs { display: flex; flex-direction: column; gap: 14px; }
.galeria-thumb { flex: 1; min-height: 0; cursor: pointer; }
.galeria-thumb.is-active { border-style: solid; border-color: #222; }

@media (max-width: 900px) {
  .galeria-viewer { grid-template-columns: 1fr; }
  .galeria-main { height: 300px; }
  .galeria-thumbs { flex-direction: row; }
  .galeria-thumb { height: 90px; }
}

/* Aprendizajes */
.caso-learnings {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 18px;
  max-width: 880px;
}
.caso-learnings li {
  padding: 16px 20px;
  border-left: 3px solid #222;
  background: #fff;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}
.caso-learnings li strong { color: #222; }

/* Objetivo — franja destacada (label a la izquierda, texto a la derecha).
   En grayscale usamos una banda oscura de alto contraste; en el diseño
   final esta banda lleva el amarillo de marca. */
.objetivo-band {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  background: #1f1f1f;
  color: #fff;
  border-radius: 16px;
  padding: 36px 40px;
  margin-top: 12px;
}
.objetivo-label { font-size: 26px; font-weight: 800; line-height: 1.1; }
.objetivo-band p { color: #ddd; font-size: 18px; margin: 0; max-width: none; }

/* Dónde implementamos — cifras de impacto + lista de regiones/comunas al lado.
   Reemplaza al mapa del diseño de referencia. */
.caso-donde-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}
.caso-donde-cifras {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.caso-donde-cifras .box { min-height: 110px; padding: 16px; text-align: center; }
.caso-donde-lugares h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: #888; margin-bottom: 12px; }
.caso-donde-lugares ul { list-style: none; display: grid; gap: 8px; }
.caso-donde-lugares li {
  padding: 12px 16px;
  border: 1px dashed #ccc;
  border-radius: 10px;
  font-size: 14px;
  color: #444;
}

@media (max-width: 900px) {
  .caso-hero { grid-template-columns: 1fr; padding: 40px 24px; }
  .caso-meta { grid-template-columns: repeat(2, 1fr); }
  .caso-steps, .caso-galeria { grid-template-columns: 1fr; }
  .caso-section:has(.caso-side) { grid-template-columns: 1fr; }
  .objetivo-band { grid-template-columns: 1fr; gap: 12px; padding: 28px; }
  .caso-donde-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   FOOTER
   ===================================================== */
footer.wf-footer {
  background: #222;
  color: #bbb;
  font-size: 13px;
  line-height: 1.6;
}
/* Pre-footer · Newsletter */
.footer-newsletter {
  padding: 32px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.footer-newsletter .newsletter-text h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
}
.footer-newsletter .newsletter-text p {
  color: #bbb;
  font-size: 13px;
  max-width: 420px;
}
.newsletter-form {
  display: flex;
  gap: 10px;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}
.newsletter-form input {
  flex: 1;
  padding: 12px 18px;
  border: 1px solid #555;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
}
.newsletter-form input::placeholder { color: #888; }
.newsletter-form input:focus { outline: none; border-color: #bbb; }
.newsletter-form .btn.primary {
  padding: 12px 24px;
  background: #fff;
  color: #222;
  border: 1px solid #fff;
  border-radius: var(--btn-radius);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.newsletter-form .btn.primary:hover { background: #ddd; border-color: #ddd; }

.footer-main {
  padding: 56px 32px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr 1.2fr;
  gap: 32px;
}
.footer-col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #444;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #bbb; }
.footer-col a:hover { color: #fff; }

.footer-brand .footer-logo img {
  height: 56px;
  width: auto;
  filter: grayscale(100%) brightness(2.5) opacity(0.8);
  margin-bottom: 16px;
}
.footer-lema {
  font-size: 13px;
  color: #ccc;
  margin-bottom: 20px;
  max-width: 240px;
}
.footer-socials {
  display: flex;
  gap: 8px;
}
.footer-socials .icon {
  width: 28px; height: 28px;
  border: 1px solid #666;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  color: #bbb;
}

.footer-contact .footer-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid #bbb;
  border-radius: var(--btn-radius);
  color: #fff;
  font-weight: 600;
  font-size: 12px;
}

.footer-bottom {
  padding: 16px 32px;
  border-top: 1px solid #333;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #888;
}
.footer-bottom a { color: #888; }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   GRAYSCALE GLOBAL para todas las fotos del wireframe.
   Las únicas imágenes en color permitidas son los logos
   (header / footer). Todo el resto se fuerza a gris para
   mantener la estética de wireframe y evitar que las
   fotos compitan con el contenido.
   ===================================================== */
.wire [style*="background-image"],
.wire img:not([src*="logo"]) {
  filter: grayscale(100%);
}


/* =====================================================
   TEST-GRID — testimonios reutilizables (3 columnas)
   ===================================================== */
.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.test-grid .box {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
}
.test-grid .box em { color: #222; }
.test-grid .box strong { color: #222; font-size: 13px; }

@media (max-width: 900px) {
  .test-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   FAQ — preguntas frecuentes con <details>
   ===================================================== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  max-width: 820px;
}
.faq-list details {
  border: 1px dashed #ccc;
  border-radius: 12px;
  background: #fff;
  padding: 14px 18px;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  color: #222;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: #888;
  margin-left: 12px;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] { background: #fafafa; }
.faq-list p {
  margin-top: 10px;
  font-size: 14px;
  color: #555;
  line-height: 1.5;
}

/* =====================================================
   NOTICIA — single (detalle)
   ===================================================== */
.noticia-single {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px;
}
.noticia-single-header h1 {
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.4px;
  margin: 12px 0 14px;
  color: #222;
}
.noticia-single-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  color: #666;
  margin-bottom: 24px;
}
.noticia-single-meta .sep-dot { color: #bbb; }
.noticia-single-hero-img {
  width: 100%;
  height: 380px;
  margin: 8px 0 28px;
}
.noticia-single-body p,
.noticia-single-body ul,
.noticia-single-body h2 {
  max-width: 100%;
}
.noticia-single-body .lead {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
  font-weight: 500;
  margin-bottom: 22px;
}
.noticia-single-body p {
  font-size: 16px;
  line-height: 1.65;
  color: #444;
  margin-bottom: 16px;
}
.noticia-single-body h2 {
  font-size: 22px;
  line-height: 1.25;
  color: #222;
  margin: 28px 0 12px;
  letter-spacing: -0.2px;
}
.noticia-single-body a { color: #222; text-decoration: underline; }
.noticia-quote {
  border-left: 3px solid #222;
  margin: 24px 0;
  padding: 6px 0 6px 20px;
  font-size: 18px;
  line-height: 1.45;
  color: #222;
  font-style: italic;
}
.noticia-quote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: #777;
  margin-top: 10px;
}
.noticia-single-img {
  width: 100%;
  height: 280px;
  margin: 20px 0 8px;
}
.noticia-foto-pie {
  font-size: 12px;
  color: #888;
  font-style: italic;
  margin-bottom: 20px;
}
.noticia-lista {
  padding-left: 20px;
  margin-bottom: 18px;
}
.noticia-lista li {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 6px;
}

.noticia-single-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px dashed #ccc;
}
.noticia-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.noticia-tags .tag {
  font-size: 12px;
  color: #555;
  border: 1px solid #ddd;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fafafa;
}
.noticia-share {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
}
.noticia-share .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  border-radius: 50%;
  text-decoration: none;
  color: #222;
  font-size: 13px;
  font-weight: 700;
  background: #fff;
}
.noticia-share .share-btn:hover { background: #222; color: #fff; border-color: #222; }

@media (max-width: 900px) {
  .noticia-single-header h1 { font-size: 28px; }
  .noticia-single-hero-img { height: 240px; }
}

/* =====================================================
   DONA · botones en gris
   ===================================================== */
body[data-page="dona"] .cta-final .btn {
  border-color: #888;
  color: #ccc;
}
body[data-page="dona"] .cta-final .btn.primary {
  background: #888;
  color: #fff;
  border-color: #888;
}

/* Mock Payku · grayscale */
.payku-mock {
  padding: 24px;
  background: #fff;
  border: 1px solid #ddd;
  font-family: inherit;
}
.payku-tabs {
  display: flex;
  border-bottom: 1px solid #ddd;
  margin-bottom: 20px;
}
.payku-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 18px;
  font-size: 15px;
  color: #888;
  cursor: pointer;
  font-family: inherit;
}
.payku-tab.active {
  color: #222;
  border-bottom-color: #222;
  font-weight: 600;
}
.payku-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 8px 0 24px;
}
.payku-amount {
  background: #666;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.payku-amount:hover { background: #444; }
.payku-field { margin-bottom: 14px; }
.payku-field label {
  display: block;
  font-size: 13px;
  color: #555;
  margin-bottom: 4px;
}
.payku-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #bbb;
  background: #fff;
  font-size: 14px;
  font-family: inherit;
  color: #222;
}
.payku-field input::placeholder { color: #aaa; font-weight: 600; }
.payku-phone {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.payku-phone-prefix {
  background: #eee;
  border: 1px solid #bbb;
  padding: 10px 12px;
  font-size: 14px;
  color: #555;
}
.payku-phone input { flex: 1; }
.payku-submit {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  background: #333;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.payku-submit:hover { background: #000; }
.payku-mock-note {
  margin-top: 14px;
  font-size: 11px;
  color: #999;
  text-align: center;
  font-style: italic;
}

/* =====================================================
   HOME redesign — hero full-bleed + header overlay/sticky
   ===================================================== */

/* Wrapper del header (utility + nav-main + nav-secondary) */
.site-header { position: relative; z-index: 100; }

/* En la HOME el header se monta sobre el hero, transparente */
body[data-page="index"] .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  transition: background-color .3s ease, box-shadow .3s ease;
}
body[data-page="index"] .site-header .utility-bar,
body[data-page="index"] .site-header .nav-main,
body[data-page="index"] .site-header .nav-secondary {
  background: transparent;
  border-color: transparent;
  color: #fff;
}
body[data-page="index"] .site-header .nav-main-list,
body[data-page="index"] .site-header .nav-secondary,
body[data-page="index"] .site-header .nav-secondary a,
body[data-page="index"] .site-header .utility-bar,
body[data-page="index"] .site-header .utility-bar a,
body[data-page="index"] .site-header .utility-bar .contacto {
  color: #fff;
}
body[data-page="index"] .site-header .utility-bar .icon {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
body[data-page="index"] .site-header .utility-bar .contacto {
  border-color: rgba(255,255,255,0.7);
}
body[data-page="index"] .site-header .nav-main-list > li.active {
  border-bottom-color: #fff;
}
body[data-page="index"] .site-header .nav-main-list > li.has-submenu > a::after {
  color: rgba(255,255,255,0.85);
}
body[data-page="index"] .site-header .logo img {
  filter: brightness(0) invert(1);
  transition: filter .3s ease;
}
body[data-page="index"] .site-header .nav-main .btn.primary {
  background: #fff;
  color: #1e3a5f;
  border-color: #fff;
}
body[data-page="index"] .site-header .nav-secondary a::before {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
}

/* HOME scrolled: fondo blanco, texto azul institucional */
body[data-page="index"] .site-header.scrolled {
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
body[data-page="index"] .site-header.scrolled .utility-bar { background: #fff; border-bottom: 1px solid #eee; }
body[data-page="index"] .site-header.scrolled .nav-main { background: #fff; border-bottom: 1px solid #ddd; }
body[data-page="index"] .site-header.scrolled .nav-secondary { background: #fff; border-bottom: 1px solid #ddd; }
body[data-page="index"] .site-header.scrolled .nav-main-list,
body[data-page="index"] .site-header.scrolled .nav-secondary,
body[data-page="index"] .site-header.scrolled .nav-secondary a,
body[data-page="index"] .site-header.scrolled .utility-bar,
body[data-page="index"] .site-header.scrolled .utility-bar a,
body[data-page="index"] .site-header.scrolled .utility-bar .contacto {
  color: #1e3a5f;
}
body[data-page="index"] .site-header.scrolled .utility-bar .icon {
  color: #1e3a5f;
  border-color: #1e3a5f;
}
body[data-page="index"] .site-header.scrolled .utility-bar .contacto {
  border-color: #1e3a5f;
}
body[data-page="index"] .site-header.scrolled .nav-main-list > li.active {
  border-bottom-color: #1e3a5f;
}
body[data-page="index"] .site-header.scrolled .nav-main-list > li.has-submenu > a::after {
  color: #1e3a5f;
}
body[data-page="index"] .site-header.scrolled .logo img {
  filter: grayscale(100%) contrast(0.85) opacity(0.75);
}
body[data-page="index"] .site-header.scrolled .nav-main .btn.primary {
  background: #333;
  color: #fff;
  border-color: #333;
}
body[data-page="index"] .site-header.scrolled .nav-secondary a::before {
  background: #fafafa;
  border-color: #aaa;
}

/* HERO en la HOME: full-bleed, 100vh, imagen grayscale + overlay oscuro, texto blanco centrado */
body[data-page="index"] .hero-slider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 100vh;
  min-height: 600px;
  background: #2a2a2a;
  border-bottom: none;
}
body[data-page="index"] .layer-bg {
  filter: grayscale(100%) contrast(1.05) brightness(0.85);
}
body[data-page="index"] .layer-overlay {
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
}
body[data-page="index"] .layer-shape { display: none; }
body[data-page="index"] .layer-content {
  inset: 0;
  max-width: 900px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
body[data-page="index"] .layer-content .section-tag {
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.4);
}
body[data-page="index"] .layer-content h1 {
  color: #fff;
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 16px 0 18px;
}
body[data-page="index"] .layer-content p,
body[data-page="index"] .layer-content p.placeholder {
  color: rgba(255,255,255,0.92);
  max-width: 680px;
  margin: 0 auto 28px;
  font-size: 18px;
}
body[data-page="index"] .hero-cta {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid #fff;
  padding: 14px 32px;
}
body[data-page="index"] .hero-cta:hover {
  background: #fff;
  color: #1e3a5f;
}
body[data-page="index"] .hero-dots {
  left: 50%;
  transform: translateX(-50%);
  bottom: 40px;
}
body[data-page="index"] .hero-dot { background: rgba(255,255,255,0.35); }
body[data-page="index"] .hero-dot.active { background: #fff; }
body[data-page="index"] .hero-arrow {
  color: #fff;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.3);
}
body[data-page="index"] .hero-arrow:hover {
  background: rgba(0,0,0,0.45);
}

/* =====================================================
   Top bar — herramientas + correo (reemplaza nav-secondary)
   ===================================================== */
.util-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.util-tools a {
  font-size: 12px;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.util-tools a:hover { text-decoration: underline; }
.util-tools a.external .ext-mark { font-size: 10px; opacity: 0.8; }

/* En la home transparente, las tools heredan color blanco (ya cubierto por
   las reglas existentes de .utility-bar). Lo siguiente solo refuerza. */
body[data-page="index"] .site-header .util-tools a { color: inherit; }
body[data-page="index"] .site-header.scrolled .util-tools a { color: inherit; }

/* =====================================================
   Redes sociales — barra vertical flotante a la derecha
   ===================================================== */
.socials-float {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 90;
}
.socials-float .icon {
  width: 34px; height: 34px;
  border: 1px solid #888;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #333;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(4px);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.socials-float .icon:hover {
  background: #1e3a5f;
  color: #fff;
  border-color: #1e3a5f;
  transform: translateY(-1px);
}

/* =====================================================
   HOME — Impacto rediseñado (píldoras agrupadas, grises)
   ===================================================== */
.home-impact-pills { text-align: center; }
.home-impact-pills .section-tag {
  display: block;
  margin-bottom: 6px;
}
.home-impact-pills h2 {
  text-align: center;
  margin: 0 auto 32px;
  font-size: 32px;
}
.impact-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
}
.impact-pill {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 24px;
  padding: 40px 32px;
  /* asimétrico: muy curvado en top-right y bottom-left, casi recto en las otras */
  border-radius: 12px 110px 12px 110px;
  background: #999;
  border: 1px dashed #777;
}
.impact-pill + .impact-pill { background: #b5b5b5; border-color: #888; }
.impact-stat {
  text-align: center;
  color: #fff;
  flex: 1;
}
.impact-stat strong {
  display: block;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.2px;
  color: #fff;
}
.impact-stat span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}
.home-impact-pills .home-link {
  display: inline-block;
  margin-top: 28px;
}
@media (max-width: 760px) {
  .impact-pills { grid-template-columns: 1fr; }
  .impact-pill { border-radius: 10px 70px 10px 70px; padding: 32px 20px; }
  .impact-stat strong { font-size: 44px; }
}