/* ── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* ── Layout ─────────────────────────────────────────────────── */
  --design-w:       1728px;
  --navbar-h:       72px;
  --hero-split:     50%;
  --col-left-pad:   50px;
  --col-right-pad:  20px;
  --radius-sm:      8px;

  /* ── Colores base ───────────────────────────────────────────── */
  --color-dark:                    #000000;
  --color-white:                   #ffffff;
  --color-gris:                    #5C5C5C;
  --color-light-grey:              #d9d9d9;
  --color-background-salmon:       #ffeae4;
  --color-background-blue:         #d3ebff;

  /* ── Colores semitransparentes ──────────────────────────────── */
  --color-glass:                   rgba(200, 200, 200, 0.3);
  --color-shadow:                  rgba(0, 0, 0, 0.08);
  --color-nav-menu-mobile:         rgba(255, 255, 255, 0.97);

  /* ── Colores ODS ────────────────────────────────────────────── */
  --color-ods-red:                 #ff3a21;
  --color-ods-green:               #4c9f38;
  --color-ods-yellow:              #fcc30b;
  --color-ods-magenta:             #dd1367;
  --color-ods-blue:                #0a97d9;
  --color-ods-cyan:                #26bde2;
  --color-ods-crimson:             #e5243b;
  --color-ods-dark-red:            #c5192d;
  --color-ods-gold:                #dda63a;

  /* ── Colores de gradientes de fondo ─────────────────────────── */
  --color-gradient-yellow-1:       #f6ffdc;
  --color-gradient-yellow-2:       #fcf4cd;
  --color-gradient-cyan-1:         #ddfffd;
  --color-gradient-cyan-2:         #bbffff;

  /* ── Colores de territorios ─────────────────────────────────── */
  --color-ods-orange:              #fd9d24;

  /* ── Formularios / feedback ─────────────────────────────────── */
  --color-form-grey:    #e7e7e7;
  --color-success:      #2d6b21;
  --color-success-bg:   #f0fff4;
  --color-success-bd:   #4c9f38;
  --color-error:        #cc2e18;
  --color-error-bg:     #fff0ee;
  --color-error-bd:     #ff3a21;
  --font-mono:          'SF Mono', 'Fira Code', 'Fira Mono', monospace;
  --transition-fast:    .15s ease;
  --transition-opacity: opacity 0.2s ease;

  /* ── Variables CPT Talleres ─────────────────────────────────── */
  --color-bg-alt:       #f8fafc;
  --color-border:       #e2e8f0;
  --color-heading:      #0f172a;
  --color-text:         #334155;
  --color-text-muted:   #475569;
  --color-primary:      #4f46e5;

  /* ── Tipografías ────────────────────────────────────────────── */
  --font-main: 'Inter', sans-serif;

  /* Títulos principales de sección: ExtraBold 800, clamp 40-80px, lh 1 */
  --font-h1: 800 clamp(40px, 4.6vw, 80px)/1 'Inter', sans-serif;

  /* Subtítulos y títulos pequeños de apartados: Bold 700, 20px, lh 1.3 */
  --font-h2: 700 20px/1.3 'Inter', sans-serif;

  /* Texto de cuerpo/párrafos: Regular 400, 20px, lh 1.3 */
  --font-h3: 400 20px/1.3 'Inter', sans-serif;

  /* Etiquetas y enlaces del footer: SemiBold 600, 18px */
  --font-footer-label: 600 18px/1.3 'Inter', sans-serif;
}

body {
  font-family: var(--font-main);
  background-color: var(--color-white);
  color: var(--color-dark);
}

.page-content,
.wp-block-group__inner-container {
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(1rem, 5vw, 3rem);
  padding-left: clamp(1rem, 5vw, 3rem);
}

.page-content {
  margin-top: calc(var(--navbar-h) + 4rem);
  margin-bottom: 4rem;
}

/* Permite que los bloques "Ancho completo" de Gutenberg escapen
   del contenedor centrado .page-content (1280px) y lleguen al
   borde del viewport, p.ej. las secciones de la página Proyecto. */
.page-content .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Si la página termina en un bloque a ancho completo, quita el
   margen inferior de .page-content para que no deje una franja
   blanca entre la última sección y el footer. */
.page-content:has(.alignfull:last-child) {
  margin-bottom: 0;
}

/* Si la página empieza con un bloque a ancho completo (p.ej. un
   hero propio, como en la página Proyecto), oculta el título
   automático de la página y quita el margen superior de .page-content
   para que el hero llegue justo debajo de la navbar. */
.page-content:has(.page-body > .alignfull:first-child) {
  margin-top: 0;
}

.page-content:has(.page-body > .alignfull:first-child) .page-header {
  display: none;
}

/* ================================================================
   NAVBAR
   ================================================================ */

#header-principal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-h);
  z-index: 1000;
  /* Efecto glass */
  background: var(--color-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-principal {
  max-width: var(--design-w);
  height: 100%;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo img {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.menu-lista {
  list-style: none;
  display: flex;
  gap: 68px;
}

.menu-lista a {
  text-decoration: none;
  font: var(--font-h2);
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-dark);
  white-space: nowrap;
  transition: var(--transition-opacity);
}

.menu-lista a:hover {
  opacity: 0.6;
}

/* ── Dropdown ──────────────────────────────────────────────────── */

.menu-lista li {
  position: relative;
}

.menu-lista .sub-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  /* Toca el ítem sin dejar hueco (top: 100%): el "aire" visual de 14px
     se simula con padding-top, que sigue formando parte de la misma caja
     hoverable, así el ratón nunca pasa por una zona sin elemento. */
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px) scale(0.96);
  transform-origin: top center;
  min-width: 190px;
  padding: 24px 10px 10px;
  list-style: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 500;
}

/* Tarjeta visual (fondo, sombra, radio): empieza donde acaba el hueco
   invisible, detrás de los enlaces. */
.menu-lista .sub-menu::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  box-shadow: 0 16px 40px var(--color-shadow);
  z-index: 0;
}

/* Flecha que conecta el ítem con la tarjeta. */
.menu-lista .sub-menu::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 2px;
  transform: translateX(-50%) rotate(45deg);
  z-index: 0;
}

.menu-lista li:hover > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.menu-lista .sub-menu a {
  display: block;
  position: relative;
  z-index: 1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.menu-lista .sub-menu a:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.05);
}

/* ================================================================
   HERO
   ================================================================ */

#hero {
  position: relative;
  padding-top: var(--navbar-h);
  width: 100%;
  background-color: var(--color-white);
  overflow: hidden;
}

.hero__headline {
  padding-top: 5px;
  padding-left: 45px;
  position: relative;
  z-index: 1;
}

.hero__title {
  font: var(--font-h1);
  font-size: clamp(40px, 5.5vw, 95px);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  max-width: 1004px;
}

/* Colores de cada letra de "ODSERVA 3.0" */
.hero__title span:nth-child(1) { color: var(--color-ods-crimson);  } /* O */
.hero__title span:nth-child(2) { color: var(--color-ods-gold);     } /* D */
.hero__title span:nth-child(3) { color: var(--color-ods-green);    } /* S */
.hero__title span:nth-child(4) { color: var(--color-ods-dark-red); } /* E */
.hero__title span:nth-child(5) { color: var(--color-ods-red);      } /* R */
.hero__title span:nth-child(6) { color: var(--color-ods-cyan);     } /* V */
.hero__title span:nth-child(7) { color: var(--color-ods-yellow);   } /* A */
.hero__title span:nth-child(8) { color: var(--color-gris);         } /* 3.0 */

.hero__visual {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: 420px;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  padding: 0 20px;
  z-index: 0;
  pointer-events: none;
}

.hero__personaje--1,
.hero__personaje--2,
.hero__personaje--3,
.hero__personaje--4,
.hero__personaje--5 {
  object-fit: contain;
  flex-shrink: 0;
  width: auto;
}

.hero__personaje--1 {
  max-width: 16%;
  height: auto;
}

.hero__personaje--2 {
  max-width: 16%;
  height: auto;
}

.hero__personaje--3 {
  max-width: 19%;
  height: auto;
}

.hero__personaje--4 {
  max-width: 16%;
  height: auto;
}

.hero__personaje--5 {
  max-width: 17%;
  margin-bottom: 10px;
  height: auto;

}

.hero__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  padding-top: 480px;
  padding-bottom: 80px;
}

.hero__col {
  flex: 0 0 50%;
  width: 50%;
}

.hero__col--left {
  padding-left: 50px;
  padding-right: 24px;
}

.hero__col--right {
  padding-left: 20px;
  padding-right: 74px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 364px;
  height: 54px;
  padding: 0 20px;
  border: 2px solid var(--color-dark);
  border-radius: var(--radius-sm);
  font: var(--font-h2);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dark);
  white-space: nowrap;
}

.hero__description {
  margin-top: 40px;
  max-width: 578px;
  font: var(--font-h3);
  color: var(--color-gris);
}

.hero__tagline {
  max-width: 654px;
  font: var(--font-h2);
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1.10;
  color: var(--color-gris);
}

.hero__socials {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.hero__social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 63px;
  height: 63px;
  transition: var(--transition-opacity);
}

.hero__social-icon img {
  width: 63px;
  height: 63px;
  object-fit: contain;
}

.hero__social-icon:hover {
  opacity: 0.75;
}

/* ================================================================
   SECCIÓN ¿POR QUÉ ODSERVA 3.0?
   ================================================================ */

.por-que-odserva {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gradient-yellow-1) 50%, var(--color-gradient-yellow-2) 100%);
  padding-bottom: 80px;
  overflow: hidden;
}

.por-que__titulo {
  text-align: center;
  padding-top: 80px;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0;
}

.por-que__subtitulo {
  display: block;
  margin: 40px auto 0;
  max-width: 650px;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

.por-que__graficos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  margin-top: 60px;
  padding: 0 50px;
}

.por-que__graficos .grafico {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 480px;
}

.por-que__graficos .grafico img {
  width: 100%;
  height: auto;
  background: var(--color-glass);
  border-radius: 12px;
  box-shadow: -3px 5px 9px 5px var(--color-shadow);
  padding: 20px;
}

.grafico__leyenda {
  margin-top: 24px;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

/* Separador multicolor reutilizable */
.separador-ods {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22px;
  background: linear-gradient(
    90deg,
    var(--color-ods-red)     0%,
    var(--color-ods-green)   25%,
    var(--color-ods-yellow)  50%,
    var(--color-ods-magenta) 75%,
    var(--color-ods-blue)    100%
  );
}

.por-que__separador { /* alias → ver .separador-ods */ }

/* Separadores generados por CSS para las secciones principales */
.por-que-odserva::after,
.mision-vision::after,
.como-hacemos::after,
.triple-impacto::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22px;
  background: linear-gradient(
    90deg,
    var(--color-ods-red)     0%,
    var(--color-ods-green)   25%,
    var(--color-ods-yellow)  50%,
    var(--color-ods-magenta) 75%,
    var(--color-ods-blue)    100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ================================================================
   SECCIÓN MISIÓN Y VISIÓN
   ================================================================ */

.mision-vision {
  position: relative;
  width: 100%;
  min-height: 900px;
  overflow: hidden;
  padding-bottom: 80px;
  background: var(--color-background-blue);
  /*background-color: #e1f1ff;*/
}

.mv__titulo {
  text-align: center;
  padding-top: 80px;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0;
}

.mv__bloque {
  display: block;
  margin: 0 auto;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

.mv__bloque--descripcion {
  max-width: 700px;
  margin-top: 50px;
}

.mv__bloque--mision {
  max-width: 592px;
  margin-top: 0;
}

.mv__bloque--mision p {
  margin: 0;
}

.mv__bloque--mision p + p {
  margin-top: 24px;
}

.mv__bloque--publico {
  max-width: 592px;
  margin-top: 0;
}

.mv__bloque--publico ul {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
}

.mv__bloque--publico ul li {
  font: var(--font-h2);
  color: var(--color-gris);
  text-transform: uppercase;
  text-align: center;
}

/* Líneas decorativas */
.mv__linea {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 40px auto;
  height: 120px;
  width: 4px;
}

.mv__linea-top {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-ods-red);
  flex-shrink: 0;
}

.mv__linea-bottom {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-ods-blue);
  flex-shrink: 0;
}

.mv__linea-dot {
  display: block;
  width: 2px;
  flex: 1;
  background: linear-gradient(
    180deg,
    var(--color-ods-red)     0%,
    var(--color-ods-green)   25%,
    var(--color-ods-yellow)  50%,
    var(--color-ods-magenta) 75%,
    var(--color-ods-blue)    100%
  );
}

.mv__separador { /* alias → ver .separador-ods */ }

/* ================================================================
   SECCIÓN 5 OBJETIVOS
   ================================================================ */

.cinco-objetivos {
  width: 100%;
  background: var(--color-white);
  padding: 80px 0 40px 0;
}

.co__titulo {
  text-align: center;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0 0 60px 0;
}

.co__lista {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 50px;
}

.co__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.co__foto {
  flex: 0 0 46%;
  width: 46%;
  max-width: 797px;
  height: 324px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

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

.co__barra {
  flex: 0 0 12px;
  width: 12px;
  height: 324px;
  align-self: flex-start;
}

.co__barra--der {
  margin-left: auto;
}

.co__texto {
  flex: 1;
  padding: 0 30px;
  position: relative;
  z-index: 1;
}

.co__nombre {
  font: var(--font-h2);
  color: var(--color-gris);
  text-transform: uppercase;
  margin: 0 0 24px 0;
}

.co__descripcion {
  font: var(--font-h3);
  color: var(--color-gris);
}

.co__descripcion p {
  margin: 0 0 16px 0;
}

.co__descripcion ul {
  margin: 0;
  padding: 0;
  list-style: disc;
}

.co__descripcion ul li {
  margin-left: 24px;
  margin-bottom: 16px;
   max-width: 720px;
  font: var(--font-h3);
  color: var(--color-gris);
}

.co__descripcion ul li:last-child {
  margin-bottom: 0;
}

.co__descripcion strong {
  font-weight: 700;
  color: var(--color-gris);
}

/* ================================================================
   SECCIÓN ¿CÓMO LO HACEMOS?
   ================================================================ */

.como-hacemos {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gradient-cyan-1) 50%, var(--color-gradient-cyan-2) 100%);
  padding: 80px 0 22px 0;
}

.clh__titulo {
  text-align: center;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0 0 30px 0;
}

.clh__subtitulo {
  display: block;
  max-width: 756px;
  margin: 0 auto 60px auto;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

.clh__bloques {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 50px 80px 50px;
}

.clh__bloque {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

.clh__foto {
  flex: 0 0 46%;
  width: 46%;
  max-width: 797px;
  height: 324px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.clh__texto {
  flex: 1;
  padding: 0 30px;
}

.clh__bloque-titulo {
  font: var(--font-h2);
  color: var(--color-gris);
  text-transform: uppercase;
  margin: 0 0 20px 0;
  text-align: left;
}

.clh__bloque-desc {
  font: var(--font-h3);
  color: var(--color-gris);
  text-align: left;
}

.clh__bloque-desc p {
  margin: 0 0 16px 0;
}

.clh__bloque-desc p:last-child {
  margin-bottom: 0;
}

.clh__barra {
  flex: 0 0 12px;
  width: 12px;
  height: 324px;
  align-self: flex-start;
  flex-shrink: 0;
}

.clh__barra--der {
  margin-left: auto;
}

.clh__separador { /* alias → ver .separador-ods */ }

/* ================================================================
   SECCIÓN TRIPLE IMPACTO
   ================================================================ */

.triple-impacto {
  position: relative;
  width: 100%;
  background-color: var(--color-background-salmon);
  padding: 0px 0 80px 0;
  overflow: hidden;
}

.ti__titulo {
  text-align: center;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0 0 30px 0;
  padding-top: 80px;
}

.ti__subtitulo {
  display: block;
  max-width: 592px;
  margin: 0 auto 60px auto;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

.ti__bloque {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 40px;
  padding-left: 50px;
}

.ti__foto {
  flex-shrink: 0;
  width: 46%;
  max-width: 797px;
  overflow: hidden;
}

.ti__foto--economico {
  max-width: 797px;
  width: 46%;
}

.ti__foto--medioambiental {
  max-width: 797px;
  width: 46%;
  min-height: 300px;
}

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

.ti__barra-lateral {
  flex-shrink: 0;
  width: 12px;
  align-self: stretch;
}

.ti__barra-der {
  flex-shrink: 0;
  width: 12px;
  align-self: stretch;
  margin-left: auto;
  margin-right: 50px;
}

.ti__texto {
  flex: 1;
  padding: 10px 30px;
}

.ti__bloque-titulo {
  font: var(--font-h2);
  color: var(--color-gris);
  line-height: 1.4;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}

.ti__lista {
  list-style: disc;
  margin: 0;
  padding: 0;
}

.ti__lista li {
  margin-left: 24px;
  margin-bottom: 16px;
  max-width: 750px;
  font: var(--font-h3);
  color: var(--color-gris);
}

.ti__lista li:last-child {
  margin-bottom: 0;
}

.ti__lista strong {
  font-weight: 700;
  color: var(--color-gris);
}

.ti__separador { /* alias → ver .separador-ods */ }

/* ============================================================
   SECCIÓN COMPROMISO TERRITORIAL — node 202:23
   Dimensiones: 1729 × 1304 px
   Posición en Página principal: y = 8304
   Fondo: #ffffff
   ============================================================ */

.compromiso-territorial {
  position: relative;
  width: 100%;
  background: var(--color-white);
  min-height: 1250px;
}

/* ── Título principal — node 99:6727
   x=289 (centrado) · y=126 · w=1151 · h=74
   Inter ExtraBold 800 · 80px · lh:73px · #000000 · centrado
   ────────────────────────────────────────────────────────── */
.ct__titulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 126px;
  width: 1151px;
  height: 74px;
  margin: 0;
  font: var(--font-h1);
  font-size: 80px;
  line-height: 73px;
  color: var(--color-dark);
  text-align: center;
  text-transform: uppercase;
}

/* ── Subtítulo — node 99:6845
   x=566 (centrado) · y=251 · w=596
   Inter Bold 700 · 25px · lh:30px · #5c5c5c · centrado · mayúsculas
   ────────────────────────────────────────────────────────── */
.ct__subtitulo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 251px;
  width: 596px;
  margin: 0;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

/* ── Contenedor del mapa de territorios
   Zona de referencia: y=396 (inicio de cards)
   ────────────────────────────────────────────────────────── */
.ct__mapa {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1728px;
  height: 100%;
}

/* ============================================================
   LÍNEAS HORIZONTALES DE CONEXIÓN
   y=528 (centro del card: 396 + 264/2 = 528)
   Dibujadas con un borde inferior de 1px
   ============================================================ */
.ct__linea {
  position: absolute;
  top: 528px;
  height: 1px;
  background-color: var(--color-gris);
}

/* Izquierda: Canarias → Valencia — node 99:6873
   x=478 (borde der. Canarias: 214+264) · w=254 */
.ct__linea--izq {
  left: 478px;
  width: 254px;
}

/* Derecha: Valencia → Nacional — node 99:6874
   x=996 (borde der. Valencia: 733+264-1) · w=254 */
.ct__linea--der {
  left: 996px;
  width: 254px;
}

/* ============================================================
   CARDS DE TERRITORIO
   Tamaño fijo: 264 × 264 px
   Posición vertical: y=396 (todas a la misma altura)
   ============================================================ */
.ct__territorio {
  position: absolute;
  top: 396px;
  width: 264px;
  height: 264px;
}

/* ── Canarias — node 208:14
   x=214 · color fondo: #fd9d24 (naranja)
   ────────────────────────────────────────────────────────── */
.ct__territorio--canarias {
  left: 214px;
  background-color: var(--color-ods-orange);
}

/* ── Comunitat Valenciana — node 208:15
   x=733 · color fondo: #56c02b (verde)
   ────────────────────────────────────────────────────────── */
.ct__territorio--valencia {
  left: 733px;
  background-color: var(--color-ods-green);
}

/* ── Impacto Nacional — node 208:16
   x=1251 · color fondo: #dd1367 (magenta)
   ────────────────────────────────────────────────────────── */
.ct__territorio--nacional {
  left: 1251px;
  background-color: var(--color-ods-magenta);
}

/* ── Círculo interior — nodes 99:6720 / 202:10 / 202:12
   x=33 y=33 · size=198×198
   Color: gris claro semitransparente (fill decorativo del diseño)
   ────────────────────────────────────────────────────────── */
.ct__circulo {
  position: absolute;
  top: 33px;
  left: 33px;
  width: 198px;
  height: 198px;
  border-radius: 50%;
  background-color: var(--color-light-grey);
  border: 1px solid var(--color-dark);
}

/* ── Nombres de territorio — nodes 99:6855 / 99:6856 / 99:6857
   Centrados horizontalmente dentro del card
   Inter Bold 700 · 25px · lh:30px · #5c5c5c · mayúsculas
   ────────────────────────────────────────────────────────── */
.ct__nombre {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 220px;
  margin: 0;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Canarias: y=117 dentro del card — node 99:6855 */
.ct__territorio--canarias  .ct__nombre { top: 117px; }

/* Valencia: y=102 dentro del card — node 99:6856 */
.ct__territorio--valencia  .ct__nombre { top: 102px; white-space: normal; }

/* Nacional: y=102 dentro del card — node 99:6857 */
.ct__territorio--nacional  .ct__nombre { top: 102px; white-space: normal; }

/* ============================================================
   DESCRIPCIONES DE TERRITORIO
   Se posicionan por debajo de cada card (y > 264px relativo al card)
   En coordenadas de sección: y_seccion = y_card + y_relativo
   ============================================================ */
.ct__descripcion {
  position: absolute;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
  margin: 0;
}

/* ── Canarias — node 99:6852
   x_relativo=-66 · y_relativo=348 → x_seccion=148 · y_seccion=744
   w=396 · h=150
   ────────────────────────────────────────────────────────── */
.ct__descripcion--canarias {
  left: 148px;   /* 214 - 66 */
  top: 744px;    /* 396 + 348 */
  width: 396px;
}

/* ── Valencia — node 99:6853
   x_relativo=-71 · y_relativo=326 → x_seccion=662 · y_seccion=722
   w=404 · h=180
   ────────────────────────────────────────────────────────── */
.ct__descripcion--valencia {
  left: 662px;   /* 733 - 71 */
  top: 722px;    /* 396 + 326 */
  width: 404px;
}

/* ── Nacional — node 99:6854
   x_relativo=-71 · y_relativo=337 → x_seccion=1180 · y_seccion=733
   w=404 · h=180
   ────────────────────────────────────────────────────────── */
.ct__descripcion--nacional {
  left: 1180px;  /* 1251 - 71 */
  top: 733px;    /* 396 + 337 */
  width: 404px;
}

/* ============================================================
   BLOQUE META FINAL — node 99:6846
   x=395 (centrado) · y=1036 · w=939 · h=190
   Inter Bold 700 · 32px · lh:38px · #5c5c5c · centrado · mayúsculas
   ============================================================ */
.ct__meta {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 980px;
  width: 939px;
  height: 190px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.ct__meta-texto {
  margin: 0;
  font: var(--font-h2);
  font-size: 30px;
  line-height: 38px;
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

/* "Nuestra Meta:" aparece en línea separada — primera línea del texto */
.ct__meta-label {
  display: block;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin-bottom: 20px; /* línea en blanco (lh=38px) entre label y texto */
}

/* ================================================================
   SECCIÓN NUESTRA HISTORIA
   ================================================================ */

.nuestra-historia {
  width: 100%;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gradient-yellow-1) 50%, var(--color-gradient-yellow-2) 100%);
  padding: 80px 0 80px 0;
}

.nh__titulo {
  text-align: center;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0 0 30px 0;
}

.nh__subtitulo {
  display: block;
  max-width: 602px;
  margin: 0 auto 60px auto;
  font: var(--font-h2);
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

.nh__timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 50px;
  margin-top: 40px;
}

.nh__hito {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 10px;
  position: relative;
  z-index: 1;
}

.nh__anio {
  font: var(--font-h2);
  font-size: 18px;
  color: var(--color-gris);
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  min-height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nh__marcador {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 20px solid;
  flex-shrink: 0;
  margin-top: 12px;
  margin-bottom: 8px;
}

.nh__bolita {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-gris);
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Línea que conecta las bolitas */
.nh__hito:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 126px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--color-gris);
  z-index: 0;
}

.nh__descripcion {
  font: var(--font-h3);
  color: var(--color-gris);
  text-align: left;
  margin-top: 20px;
  max-width: 390px;
  align-self: center;
}

/* ================================================================
   FOOTER
   ================================================================ */

.footer-principal {
  width: 100%;
  background-color: var(--color-gris);
  padding: 60px 150px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
}

.footer-logo-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.footer-logo-col > img {
  width: 160px;
  height: auto;
  display: block;
}

.footer-logos-entidades {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-logos-entidades img {
  height: 40px;
  width: auto;
  display: block;
}

.footer-logos-entidades img[alt="Ministerio"],
.footer-logos-entidades img[alt="Agenda 2030"] {
  height: 50px;
}

.footer-logos-entidades img[alt="Plataforma del Voluntariado de España"] {
  height: 55px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav a {
  font: var(--font-footer-label);
  color: var(--color-light-grey);
  text-decoration: none;
  transition: var(--transition-opacity);
}

.footer-nav a:hover {
  opacity: 0.7;
}

.footer-contacto {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-redes-label {
  font: var(--font-footer-label);
  color: var(--color-light-grey);
}

.footer-redes {
  display: flex;
  gap: 16px;
}

.footer-red-social {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-opacity);
}

.footer-red-social:hover {
  opacity: 0.7;
}

.footer-red-social img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* ================================================================
   RUEDA ODS
   ================================================================ */

.rueda-ods {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 80px;
  height: 80px;
  z-index: 999;
  pointer-events: none;
}

.rueda-ods img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ================================================================
   ANIMACIÓN FADE IN CON SCROLL
   ================================================================ */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================================================
   RESPONSIVE MÓVIL
   ================================================================ */

.nav-hamburguesa {
  display: none;
}

html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 768px) {

  /* NAVBAR */
  .nav-principal {
    padding: 0 16px;
    width: 100%;
    overflow: hidden;
  }

  /* HERO */
  .hero__headline {
    padding-left: 16px;
    padding-top: 10px;
  }

  .hero__personaje--2,
  .hero__personaje--3,
  .hero__personaje--4,
  .hero__personaje--5 {
    display: none;
  }

  .hero__personaje--1 {
    max-width: 80%;
    margin-top: 200px;
  }

  .hero__visual {
    top: 120px;
    height: 320px;
    justify-content: center;
  }

  .hero__body {
    flex-direction: column;
    padding-top: 320px;
    padding-bottom: 20px;
  }

  .hero__col {
    flex: 0 0 100%;
    width: 100%;
  }

  .hero__col--left {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero__col--right {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 30px;
  }

  .hero__badge {
    width: 100%;
  }

  .hero__tagline {
    font-size: 20px;
  }

  .hero__social-icon,
  .hero__social-icon img {
    width: 40px;
    height: 40px;
  }

  /* RUEDA ODS */
  .rueda-ods {
    display: none;
  }

  /* POR QUÉ ODSERVA */
  .por-que-odserva {
    margin-top: -10px;
  }

  .por-que__subtitulo {
    padding: 0 16px;
  }

  .por-que__graficos {
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
  }

  .por-que__graficos .grafico {
    max-width: 100%;
    width: 100%;
  }

  /* MISIÓN Y VISIÓN */
  .mv__titulo {
    padding-top: 40px;
  }

  .mv__bloque--descripcion,
  .mv__bloque--mision,
  .mv__bloque--publico {
    padding: 0 16px;
  }

  /* 5 OBJETIVOS */
  .cinco-objetivos {
    padding-top: 40px;
  }

  .co__lista {
    padding: 0 16px;
  }

  .co__item {
    flex-direction: column;
  }

  .co__foto {
    flex: 0 0 auto;
    width: 100%;
    height: 200px;
  }

  .co__barra {
    width: 100%;
    height: 12px;
  }

  .co__barra--der {
    display: none;
  }

  .co__texto {
    padding: 16px 0;
  }

  /* CÓMO LO HACEMOS */
  .como-hacemos {
    padding-top: 40px;
  }

  .clh__bloques {
    flex-direction: column;
    gap: 40px;
    padding: 0 16px 40px 16px;
  }

  .clh__bloque {
    flex-direction: column;
    max-width: 100%;
  }

  .clh__foto {
    width: 100%;
    flex: none;
  }

  .clh__barra {
    width: 100%;
    flex: none;
    height: 12px;
  }

  .clh__bloque-titulo {
    min-height: auto;
    margin-bottom: 15px;
  }

  /* TRIPLE IMPACTO */
  .ti__bloque {
    flex-direction: column;
    padding-left: 16px;
  }

  .ti__foto,
  .ti__foto--economico,
  .ti__foto--medioambiental {
    width: 100%;
    max-width: 100%;
    height: 200px;
  }

  .ti__barra-der {
    display: none;
  }

  /* COMPROMISO TERRITORIAL */
  .compromiso-territorial {
    min-height: auto;
    padding: 40px 0;
    overflow: hidden;
  }

  .ct__titulo {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    font-size: clamp(24px, 6vw, 40px);
    top: auto;
    padding: 0 16px 20px 16px;
    text-align: center;
  }

  .ct__subtitulo {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    top: auto;
    padding: 0 16px 30px 16px;
    text-align: center;
  }

  .ct__mapa {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 16px;
  }

  .ct__grupo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
  }

  .ct__territorio {
    position: relative;
    top: auto;
    left: auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .ct__circulo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: transparent;
    border: none;
  }

  .ct__nombre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    white-space: normal;
    color: var(--color-white);
    font-size: 16px;
  }

  .ct__territorio--canarias .ct__nombre {
    top: 50%;
    white-space: normal;
    text-align: center;
  }

  .ct__linea--izq,
  .ct__linea--der {
    display: none;
  }

  .ct__descripcion {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    text-align: center;
    font-size: 16px;
  }

  .ct__descripcion--canarias,
  .ct__descripcion--valencia,
  .ct__descripcion--nacional {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }

  .ct__meta {
    position: relative;
    left: auto;
    transform: none;
    width: 100%;
    top: auto;
    padding: 50px 16px 0 16px;
    height: auto;
  }

  .ct__meta-texto {
    font-size: 18px;
    line-height: 1.4;
  }

  /* NUESTRA HISTORIA */
  .nh__timeline {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 16px;
  }

  .nh__hito {
    width: 100%;
    max-width: 320px;
    align-items: center;
  }

  .nh__hito:not(:last-child) .nh__bolita::after {
    display: none;
  }

  .nh__descripcion {
    max-width: 100%;
    text-align: center;
  }

  .nh__anio {
    text-align: center;
    min-height: auto;
  }

  /* FOOTER */
  .footer-principal {
    flex-direction: column;
    padding: 40px 16px;
    gap: 40px;
  }

  /* MENÚ HAMBURGUESA */
  .nav-hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  .nav-hamburguesa span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-dark);
    transition: all 0.3s ease;
  }

  .nav-hamburguesa.abierto span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }

  .nav-hamburguesa.abierto span:nth-child(2) {
    opacity: 0;
  }

  .nav-hamburguesa.abierto span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .nav-menu {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    width: 100vw;
    background: var(--color-nav-menu-mobile);
    backdrop-filter: blur(10px);
    padding: 20px 0;
    z-index: 1000;
  }

  .nav-menu.abierto {
    display: block;
  }

  .nav-menu .menu-lista {
    flex-direction: column;
    gap: 0;
    align-items: center;
  }

  .nav-menu .menu-lista li a {
    display: block;
    padding: 16px 0;
    font-size: 16px;
    text-align: center;
  }

  .nav-menu .menu-lista .sub-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0;
    transition: none;
  }

  .nav-menu .menu-lista .sub-menu::before,
  .nav-menu .menu-lista .sub-menu::after {
    display: none;
  }

  .nav-menu .menu-lista .sub-menu a {
    font-size: 14px;
    padding: 10px 0;
    opacity: 0.65;
    border-radius: 0;
  }

  .nav-menu .menu-lista .sub-menu a:hover {
    background-color: transparent;
    opacity: 1;
  }

  /* TIPOGRAFÍAS MÓVIL */
  body {
    font-size: 14px;
    line-height: 1.4;
  }

  .por-que-odserva h2,
  .mision-vision h2,
  .cinco-objetivos h2,
  .como-hacemos h2,
  .triple-impacto h2,
  .compromiso-territorial h2,
  .nuestra-historia h2 {
    font-size: clamp(24px, 6vw, 36px);
  }

  .por-que-odserva h3,
  .mision-vision h3,
  .cinco-objetivos h3,
  .como-hacemos h3,
  .triple-impacto h3 {
    font-size: 16px;
  }

  .hero__tagline {
    font-size: 16px;
  }

  .hero__description {
    font-size: 14px;
  }

  .mv__bloque,
  .mv__bloque--publico ul li {
    font-size: 14px;
  }

  .co__nombre {
    font-size: 16px;
  }

  .co__descripcion,
  .co__descripcion ul li {
    font-size: 14px;
  }

  .ti__bloque-titulo,
  .ti__lista li {
    font-size: 14px;
  }

  .ct__descripcion {
    font-size: 14px;
  }

  .ct__meta-texto {
    font-size: 16px;
  }

  .nh__anio {
    font-size: 14px;
  }

  .nh__descripcion {
    font-size: 14px;
  }

  .footer-nav a,
  .footer-redes-label {
    font-size: 14px;
  }

} /* cierre del @media */

/* ═══════════════════════════════════════════════════════════════
   CPT Taller – single y archive
   ═══════════════════════════════════════════════════════════════ */

/* ODS badges */
.taller-ods-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.taller-ods-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border-radius: 6px;
  padding: .25rem .6rem .25rem .4rem;
  color: #fff;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}

.taller-ods-badge__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: rgba(0,0,0,.2);
  font-size: .72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.taller-ods-badge__nombre {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hero */
.taller-hero {
  background: var(--color-bg-alt, #f8fafc);
  border-bottom: 1px solid var(--color-border, #e2e8f0);
  padding: 3rem 0 2.5rem;
}

.taller-hero__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 1.5rem;
  color: var(--color-heading, #0f172a);
}

/* Ficha rápida */
.taller-ficha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}

.taller-ficha__item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .9rem;
  color: var(--color-text-muted, #475569);
}

.taller-ficha__item i {
  color: var(--color-primary, #4f46e5);
  font-size: .85rem;
}

.taller-ficha__item--dificultad.is-easy   { color: #16a34a; }
.taller-ficha__item--dificultad.is-easy i { color: #16a34a; }
.taller-ficha__item--dificultad.is-medium   { color: #d97706; }
.taller-ficha__item--dificultad.is-medium i { color: #d97706; }
.taller-ficha__item--dificultad.is-hard   { color: #dc2626; }
.taller-ficha__item--dificultad.is-hard i { color: #dc2626; }
.taller-ficha__item--dificultad.is-expert   { color: #7c3aed; }
.taller-ficha__item--dificultad.is-expert i { color: #7c3aed; }

.taller-ficha--small .taller-ficha__item { font-size: .82rem; }

/* Body */
.taller-body {
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

.taller-section {
  margin-bottom: 2.5rem;
}

.taller-section__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-heading, #0f172a);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--color-primary, #4f46e5);
  display: flex;
  align-items: center;
  gap: .6rem;
}

.taller-text {
  color: var(--color-text, #334155);
  line-height: 1.7;
  font-size: 1rem;
}

/* Metas */
.taller-metas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.taller-metas .taller-section__title {
  grid-column: 1 / -1;
}

.taller-meta-block {
  background: var(--color-bg-alt, #f8fafc);
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

.taller-meta-block h3 {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-primary, #4f46e5);
  margin: 0 0 .5rem;
}

.taller-meta-block p {
  margin: 0;
  font-size: .95rem;
  color: var(--color-text, #334155);
  line-height: 1.65;
}

@media (min-width: 768px) {
  .taller-metas {
    grid-template-columns: 1fr 1fr;
  }
}

/* Materiales */
.taller-materiales .taller-section__title i {
  color: var(--color-primary, #4f46e5);
}

/* ─── Archive ─────────────────────────────────────────────────── */

.taller-archive__header {
  margin-bottom: 2.5rem;
}

.taller-archive__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin: 0 0 .75rem;
}

.taller-archive__empty {
  color: var(--color-text-muted, #64748b);
  font-size: 1.05rem;
  text-align: center;
  padding: 3rem 0;
}

.taller-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-bottom: 3rem;
}

.taller-card {
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.taller-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.taller-card__thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.taller-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.taller-card:hover .taller-card__thumb img {
  transform: scale(1.04);
}

.taller-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.taller-card__title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  margin: .5rem 0 .75rem;
}

.taller-card__title a {
  color: var(--color-heading, #0f172a);
  text-decoration: none;
}

.taller-card__title a:hover {
  color: var(--color-primary, #4f46e5);
}

.taller-card__excerpt {
  font-size: .9rem;
  color: var(--color-text-muted, #475569);
  line-height: 1.6;
  margin: 0 0 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.taller-card .taller-ficha {
  margin-bottom: 1.25rem;
}

.taller-card__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
}

/* ================================================================
   PÁGINA NOTICIAS (home.php)
   ================================================================ */

.noticias {
  padding-top: calc(var(--navbar-h) + 4rem);
  padding-bottom: 6rem;
  background: var(--color-white);
}

.noticias__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.noticias__titulo {
  font: var(--font-h1);
  font-size: clamp(36px, 4vw, 64px);
  text-transform: uppercase;
  margin-bottom: 3rem;
  position: relative;
  padding-bottom: 1rem;
}

.noticias__titulo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--color-ods-red)    0%,
    var(--color-ods-yellow) 50%,
    var(--color-ods-blue)   100%
  );
  border-radius: 3px;
}

.noticias__lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2.5rem;
}

.noticias__item {
  display: flex;
  flex-direction: column;
  border-radius: 12px;

  overflow: hidden;
}

.noticias__imagen {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.noticias__imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noticias__contenido {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.75rem;
  background: var(--color-glass);
  padding: 20px;
}

.noticias__fecha {
  font: var(--font-h3);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gris);
}

.noticias__nombre {
  font: var(--font-h2);
  color: var(--color-dark);
}

.noticias__nombre a {
  text-decoration: none;
  color: var(--color-dark);
  transition: var(--transition-opacity);
}

.noticias__nombre a:hover {
  opacity: 0.65;
}

.noticias__extracto {
  font: var(--font-h3);
  font-size: 17px;
  color: var(--color-gris);
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticias__leer-mas {
  font: var(--font-h2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 0.5rem;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ods-blue);
  transition: var(--transition-opacity);
}

.noticias__leer-mas::after {
  content: '→';
}

.noticias__leer-mas:hover {
  opacity: 0.7;
}

.noticias__vacio {
  font: var(--font-h3);
  color: var(--color-gris);
  padding: 3rem 0;
}

/* Paginación */
.noticias .nav-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 4rem;
}

.noticias .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-dark);
  background: transparent;
  border: 2px solid var(--color-light-grey);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.noticias .page-numbers.current,
.noticias .page-numbers:hover {
  background: var(--color-ods-blue);
  border-color: var(--color-ods-blue);
  color: var(--color-white);
}

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

/* ================================================================
   NOTICIA INDIVIDUAL (single.php)
   ================================================================ */

.noticia-single {
  padding-bottom: 6rem;
}

.noticia-single__container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

/* ── Cabecera con imagen destacada (mismo patrón que el hero de
   Proyecto y Sobre nosotros) ─────────────────────────────────── */

.noticia-single__header {
  position: relative;
  width: 100%;
  min-height: 500px;
  padding-top: var(--navbar-h);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.noticia-single__header--sin-imagen {
  display: block;
  min-height: 0;
  padding: 3rem 0 2rem;
}

.noticia-single__header--sin-imagen .noticia-single__fecha {
  color: var(--color-gris);
}

.noticia-single__header--sin-imagen .noticia-single__titulo {
  color: var(--color-dark);
}

.noticia-single__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(0, 0, 0, 0) 80%
  );
}

.noticia-single__header-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px clamp(1rem, 5vw, 3rem) 80px 80px;
}

.noticia-single__fecha {
  font: var(--font-h3);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.noticia-single__titulo {
  font: var(--font-h1);
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--color-white);
  max-width: 750px;
  padding-bottom: 1rem;
  position: relative;
}

.noticia-single__titulo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--color-ods-red)    0%,
    var(--color-ods-yellow) 50%,
    var(--color-ods-blue)   100%
  );
  border-radius: 3px;
}

.noticia-single__contenido {
  font: var(--font-h3);
  line-height: 1.5;
  color: var(--color-dark);
  padding-top: 2rem;
}

.noticia-single__contenido p {
  margin-bottom: 1.25rem;
}

.noticia-single__contenido h2 {
  font: var(--font-h2);
  font-size: clamp(20px, 2vw, 28px);
  margin: 2rem 0 1rem;
}

.noticia-single__contenido h3 {
  font: var(--font-h2);
  font-size: clamp(18px, 1.5vw, 22px);
  margin: 2rem 0 1rem;
}

.noticia-single__contenido a {
  color: var(--color-ods-blue);
  text-decoration: underline;
}

.noticia-single__contenido img {
  max-width: 100%;
  border-radius: 8px;
  margin: 0 0 1.5rem 0;
  box-shadow: -3px 5px 9px 5px var(--color-shadow);
}

.noticia-single__footer {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--color-light-grey);
}

.noticia-single__volver {
  font: var(--font-h2);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-ods-blue);
  transition: var(--transition-opacity);
}

.noticia-single__volver:hover {
  opacity: 0.7;
}

/* ================================================================
   PÁGINA PROYECTO
   ================================================================ */

/* Gutenberg envuelve cada wp:group en un .wp-block-group__inner-container,
   que hereda max-width:1280px + margin:auto del selector global de
   .page-content. Dentro de las secciones de Proyecto el espaciado ya
   lo controlan nuestras propias clases (proyecto-hero__contenido, etc.),
   así que anulamos esa constricción para evitar el doble centrado. */
section[id^="proyecto-"] .wp-block-group__inner-container,
section[id^="sobre-"] .wp-block-group__inner-container {
  max-width: none;
  margin: 0;
  padding: 0;
}

.proyecto__titulo {
  text-align: center;
  padding-top: 80px;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0;
}

.proyecto__subtitulo {
  display: block;
  margin: 40px auto 0;
  max-width: 800px;
  font: var(--font-h2);
  font-size: 18px;
  color: var(--color-gris);
  text-align: center;
  text-transform: uppercase;
}

/* ── Hero ──────────────────────────────────────────────────────── */

.proyecto-hero {
  position: relative;
  width: 100%;
  min-height: 760px;
  padding-top: var(--navbar-h);
  display: flex;
  align-items: flex-end;
  background-image: url('../images/hero-proyecto.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.proyecto-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(0, 0, 0, 0) 80%
  );
}

.proyecto-hero__contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px clamp(1rem, 5vw, 3rem) 80px 80px;
}

.proyecto-hero__titulo {
  font: var(--font-h1);
  color: var(--color-white);
  text-transform: uppercase;
  max-width: 700px;
}

.proyecto-hero__subtitulo {
  margin-top: 32px;
  max-width: 502px;
  font: var(--font-h2);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-white);
  text-transform: uppercase;
}

/* ── ¿Cómo funciona el juego? ─────────────────────────────────── */

.proyecto-como-funciona {
  position: relative;
  width: 100%;
  background: var(--color-white);
  padding-bottom: 80px;
}

.proyecto-como-funciona__cuerpo {
  display: flex;
  align-items: flex-start;
  gap: 50px;
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.proyecto-como-funciona__foto {
  flex: 0 0 46%;
  max-width: 797px;
  height: 435px;
  background: var(--color-light-grey);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.proyecto-como-funciona__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.proyecto-como-funciona__texto {
  flex: 1;
  font: var(--font-h3);
  color: var(--color-gris);
}

.proyecto-como-funciona__texto p {
  margin: 0 0 24px 0;
}

.proyecto-como-funciona__texto p:last-child {
  margin-bottom: 0;
}

/* ── El equipo ─────────────────────────────────────────────────── */

.proyecto-equipo {
  position: relative;
  width: 100%;
  background: var(--color-background-salmon);
  padding-bottom: 80px;
}

.proyecto-equipo__lista {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.proyecto-equipo__item {
  flex: 1;
  max-width: 420px;
  text-align: center;
}

.proyecto-equipo__foto {
  height: 300px;
  background: var(--color-light-grey);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

.proyecto-equipo__nombre {
  margin-bottom: 24px;
  font: var(--font-h2);
  font-size: 25px;
  color: var(--color-gris);
  text-transform: uppercase;
}

.proyecto-equipo__descripcion {
  margin-top: 24px;
  font: var(--font-h3);
  color: var(--color-gris);
  text-align: left;
}

.proyecto-equipo__separador {
  margin-top: 80px;
}

/* ── Colaboradores ─────────────────────────────────────────────── */

.proyecto-colaboradores {
  width: 100%;
  background: var(--color-white);
  padding-bottom: 80px;
}

.proyecto-colaboradores__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px 40px;
  max-width: 920px;
  margin: 60px auto 0;
  padding: 0 50px;
}

.proyecto-colaboradores__foto {
  height: 288px;
  background: var(--color-light-grey);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

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

.proyecto-colaboradores__categoria {
  margin-top: 16px;
  font: var(--font-h2);
  color: var(--color-gris);
  text-transform: uppercase;
}

.proyecto-colaboradores__entidades {
  margin-top: 8px;
  font: var(--font-h3);
  color: var(--color-gris);
}

/* ── Resultados esperados ─────────────────────────────────────── */

.proyecto-resultados {
  width: 100%;
  background: var(--color-white);
  padding-bottom: 80px;
}

.proyecto-resultados__grid {
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.proyecto-resultados__item {
  flex: 1;
  max-width: 303px;
  text-align: center;
}

.proyecto-resultados__cifra {
  font: var(--font-h2);
  font-weight: 600;
  font-size: 50px;
  color: var(--color-gris);
}

.proyecto-resultados__etiqueta {
  margin-top: 16px;
  font: var(--font-h2);
  font-size: 18px;
  color: var(--color-gris);
  text-transform: uppercase;
}

/* ── ¿Te apuntas? ──────────────────────────────────────────────── */

.proyecto-cta {
  width: 100%;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gradient-cyan-1) 50%, var(--color-gradient-cyan-2) 100%);
  padding-top: 20px;
  padding-bottom: 100px;
  text-align: center;
}

.proyecto-cta__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  padding: 0 40px;
  height: 71px;
  border: 1px solid var(--color-dark);
  border-radius: 20px;
  background: var(--color-light-grey);
  font: var(--font-h2);
  font-size: 18px;
  text-transform: uppercase;
  color: var(--color-dark);
  text-decoration: none;
  transition: var(--transition-opacity);
}

.proyecto-cta__boton:hover {
  opacity: 0.75;
}

/* ================================================================
   PÁGINA SOBRE NOSOTROS
   ================================================================ */

.sobre__titulo {
  text-align: center;
  padding-top: 80px;
  font: var(--font-h1);
  color: var(--color-dark);
  text-transform: uppercase;
  margin: 0;
}

/* ── Hero ──────────────────────────────────────────────────────── */

.sobre-hero {
  position: relative;
  width: 100%;
  min-height: 760px;
  padding-top: var(--navbar-h);
  display: flex;
  align-items: flex-end;
  background-image: url('../images/sobre-nosotros-hero.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.sobre-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.55) 25%,
    rgba(0, 0, 0, 0.2) 55%,
    rgba(0, 0, 0, 0) 80%
  );
}

.sobre-hero__contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px clamp(1rem, 5vw, 3rem) 80px 80px;
}

.sobre-hero__titulo {
  font: var(--font-h1);
  color: var(--color-white);
  text-transform: uppercase;
  max-width: 700px;
}

.sobre-hero__subtitulo {
  margin-top: 32px;
  max-width: 502px;
  font: var(--font-h2);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-white);
  text-transform: uppercase;
}

/* ── Las universidades (mismo patrón que 5 Objetivos) ────────────── */

.sobre-universidades {
  position: relative;
  width: 100%;
  background: var(--color-white);
  padding: 0 0 80px 0;
}

.su__lista {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 1280px;
  margin: 60px auto 0;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.su__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
  position: relative;
}

.su__nombre {
  font: var(--font-h2);
  color: var(--color-gris);
  text-transform: uppercase;
  margin: 0 0 24px 0;
}

.su__foto {
  flex: 0 0 46%;
  max-width: 589px;
  height: 350px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

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

.su__barra {
  flex: 0 0 12px;
  width: 12px;
  height: 350px;
  align-self: flex-start;
}

.su__barra--der {
  margin-left: auto;
}

.su__texto {
  flex: 1;
  padding: 0 30px;
  font: var(--font-h3);
  color: var(--color-gris);
  position: relative;
  z-index: 1;
}

.su__texto p {
  margin: 0 0 16px 0;
}

.su__texto p:last-child {
  margin-bottom: 0;
}

/* ── Equipo ────────────────────────────────────────────────────── */

.sobre-equipo {
  width: 100%;
  background: linear-gradient(180deg, var(--color-white) 0%, var(--color-gradient-cyan-1) 50%, var(--color-gradient-cyan-2) 100%);
  padding-bottom: 80px;
}

.sobre-equipo__lista {
  max-width: 962px;
  margin: 60px auto 0;
  padding: 0 clamp(1rem, 5vw, 3rem);
}

.sobre-equipo__lista ul {
  list-style: disc;
  margin: 0;
  padding-left: 30px;
}

.sobre-equipo__lista li {
  font: var(--font-h3);
  color: var(--color-gris);
  line-height: 1.5;
  margin-bottom: 16px;
}

.sobre-equipo__lista li:last-child {
  margin-bottom: 0;
}

.sobre-equipo__lista li strong {
  text-transform: uppercase;
}