/* ============================================================
   Muévete — componentes de páginas interiores
   Se carga después de estilos.css
   ============================================================ */

/* ------------------------------------------------------------
   HERO DE PÁGINA — un patrón, seis personalidades
   ------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding-block:clamp(3.5rem,8vw,7rem)}
.hero__rejilla{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;
}
.hero__kicker{margin-bottom:1.1rem}
.hero h1{font-size:clamp(2.5rem,7.2vw,5.5rem)}
.hero__lead{
  margin-top:1.6rem;font-size:var(--lead);line-height:1.55;
  max-width:46ch;color:var(--tinta-suave);
}
.f-profundo .hero__lead{color:rgb(216 226 224 / .82)}   /* 5,74:1 sobre profundo */
/* sobre teal ese mismo color da 3,54:1, y ni opaco llega a 4,5 */
.f-teal .hero__lead{color:#EAF3F2}                      /* 5,22:1 */

/* onda de fondo, distinta posición según la página */
.hero__onda{position:absolute;pointer-events:none;opacity:.08;width:80%}
.hero__onda path{fill:var(--turquesa)}
.hero__onda--der{right:-14%;top:-18%}
.hero__onda--izq{left:-20%;bottom:-30%}
.hero__onda--centro{left:50%;translate:-50% 0;bottom:-42%;width:110%}

/* el ancla: el dato que le da peso a cada cabecera */
.ancla{
  border-top:2px solid currentColor;padding-top:1.1rem;
  display:grid;gap:.35rem;
}
.ancla__valor{font-size:clamp(2rem,3.6vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.ancla__etiqueta{font-size:var(--etiqueta);letter-spacing:.1em;text-transform:uppercase;font-weight:700;opacity:.75}
.ancla__nota{font-size:.9375rem;opacity:.75;margin-top:.4rem}

/* ------------------------------------------------------------
   ÍNDICE DE EJES — cabecera del Ideario
   ------------------------------------------------------------ */
.indice{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:1px;background:rgb(216 226 224 / .22);
  border:1px solid rgb(216 226 224 / .22);border-radius:var(--radio);overflow:hidden;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.indice a{
  background:var(--profundo);padding:1.25rem 1.1rem;text-decoration:none;
  display:grid;gap:.35rem;transition:background 200ms;
}
.indice a:hover{background:#0E464F}
.indice__n{font-size:1.75rem;font-weight:800;color:var(--turquesa);line-height:1;letter-spacing:-.04em}
.indice__t{font-size:.9375rem;font-weight:700;line-height:1.25;color:#fff}

/* ------------------------------------------------------------
   EJE EN DETALLE — página de Ideario
   ------------------------------------------------------------ */
.eje-detalle{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:0 clamp(1.5rem,3.5vw,3rem);
  padding-block:clamp(2.5rem,5vw,4rem);
  border-top:1px solid rgb(32 110 120 / .22);
  scroll-margin-top:6rem;
}
.eje-detalle:first-of-type{border-top:0;padding-top:0}
.eje-detalle__n{
  font-size:clamp(3rem,7vw,6rem);font-weight:800;line-height:.8;
  color:var(--turquesa-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;
}
.eje-detalle__t{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;letter-spacing:-.025em;margin-bottom:.9rem}
.eje-detalle__d{font-size:var(--lead);line-height:1.55;max-width:44ch;color:var(--tinta-suave)}
.eje-detalle__enlace{margin-top:1.2rem;font-size:.9375rem}

.publicado{
  margin-top:1.8rem;padding:1.3rem 1.5rem;
  background:rgb(20 184 166 / .08);border-radius:var(--radio);
  border-left:3px solid var(--turquesa);
}
.publicado__titulo{font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0A5F56;margin-bottom:.7rem}  /* 4,25 -> 5,84:1 sobre el fondo del bloque */
.publicado a{text-decoration:none;font-weight:700;line-height:1.3;display:block}
.publicado a:hover{color:var(--turquesa-texto)}

/* ------------------------------------------------------------
   CARGOS — organigrama con jerarquía
   ------------------------------------------------------------ */
.cargos{display:grid;gap:clamp(1rem,2vw,1.5rem);margin-top:clamp(2rem,4vw,3rem)}
.cargos__fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.cargo{
  border:1px solid rgb(32 110 120 / .22);border-radius:var(--radio);
  padding:clamp(1.5rem,3vw,2.2rem);background:var(--blanco);
  display:grid;align-content:start;gap:.5rem;
}
.cargo__puesto{font-size:var(--etiqueta);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--turquesa-texto)}
.cargo__nombre{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.cargo__nota{font-size:.875rem;color:var(--tinta-suave)}

/* el cargo que ostenta la representación legal pesa más */
.cargo--principal{
  grid-column:1 / -1;background:var(--profundo);border-color:transparent;color:var(--sobre-profundo);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.5rem;
}
.cargo--principal .cargo__puesto{color:var(--turquesa)}
.cargo--principal .cargo__nombre{font-size:clamp(1.75rem,3.2vw,2.5rem);color:#fff}
.cargo--principal .cargo__nota{color:rgb(216 226 224 / .75)}
.cargo__sello{
  font-size:var(--etiqueta);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgb(20 184 166 / .5);color:var(--turquesa);
  padding:.5rem .9rem;border-radius:100px;white-space:nowrap;
}

/* ------------------------------------------------------------
   OBLIGACIONES — transparencia
   ------------------------------------------------------------ */
.obligaciones{display:grid;gap:1px;background:rgb(32 110 120 / .2);border-block:1px solid rgb(32 110 120 / .2);margin-top:clamp(2rem,4vw,3rem)}
.obligacion{
  background:var(--crema);padding:clamp(1.5rem,3vw,2rem) 0;
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;
  gap:clamp(1rem,2.5vw,2.5rem);align-items:start;
}
.obligacion__base{font-size:var(--etiqueta);color:var(--tinta-suave);line-height:1.45;font-weight:600}
.obligacion__t{font-size:1.1875rem;font-weight:800;letter-spacing:-.015em;margin-bottom:.5rem}
.obligacion__d{font-size:.9375rem;color:var(--tinta-suave);max-width:52ch;line-height:1.6}
.obligacion__meta{font-size:.875rem;color:#14484F;margin-top:.5rem}  /* pasa en todos los fondos donde aparece */
.obligacion .enlace{margin-top:.9rem;font-size:.9375rem}

.estado{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:.42rem .85rem;border-radius:100px;white-space:nowrap;
}
.estado--publicado{background:rgb(20 184 166 / .16);color:#0A5F56}   /* 3,99 -> 5,48:1 */
.estado--pendiente{background:rgb(236 164 0 / .16);color:#6E4C00}   /* 4,12 -> 5,85:1 */
.estado--noprocede{background:rgb(32 110 120 / .1);color:var(--tinta-suave)}

/* ------------------------------------------------------------
   MÉTRICAS — «esta web»
   ------------------------------------------------------------ */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1px;background:rgb(216 226 224 / .2);margin-top:clamp(2rem,4vw,3rem);border-radius:var(--radio);overflow:hidden}
.metrica{background:var(--teal);padding:clamp(1.4rem,2.6vw,2rem);display:grid;gap:.4rem;align-content:start}
.metrica__valor{font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.metrica__etiqueta{font-size:var(--etiqueta);line-height:1.4;opacity:.85}

/* ------------------------------------------------------------
   FORMULARIO — contacto
   ------------------------------------------------------------ */
.formulario{display:grid;gap:1.3rem;max-width:34rem}
.campo{display:grid;gap:.5rem}
.campo label{font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.campo input,.campo textarea{
  font-family:inherit;font-size:1.0625rem;color:var(--tinta);
  background:var(--blanco);border:1px solid rgb(32 110 120 / .3);
  border-radius:var(--radio);padding:.9rem 1rem;width:100%;
  transition:border-color 180ms, box-shadow 180ms;
}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--turquesa-accion);
  box-shadow:0 0 0 3px rgb(14 131 119 / .18);
}
.campo textarea{min-height:9rem;resize:vertical}
.campo__ayuda{font-size:.875rem;color:var(--tinta-suave)}
.trampa{position:absolute;left:-9999px}
.aviso-datos{font-size:.875rem;color:var(--tinta-suave);max-width:40ch;margin-top:.4rem}

/* correos */
.correos{display:grid;gap:1px;background:rgb(32 110 120 / .2);border-block:1px solid rgb(32 110 120 / .2)}
.correo{background:var(--crema);display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:1.5rem;padding-block:1.05rem;align-items:baseline}
.correo dt{font-size:var(--etiqueta);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
.correo dd{margin:0;font-weight:700;word-break:break-word}
.correo dd a{text-decoration:none}
.correo dd a:hover{color:var(--turquesa-texto)}

/* ------------------------------------------------------------
   LISTADO DE NOTICIAS — actualidad
   ------------------------------------------------------------ */
.filtros{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(2rem,4vw,3rem)}
.filtro{
  font-size:.9375rem;font-weight:700;text-decoration:none;
  padding:.55rem 1.1rem;border-radius:100px;
  border:1px solid rgb(32 110 120 / .28);color:var(--tinta);
  transition:background 180ms,border-color 180ms,color 180ms;
}
.filtro:hover{border-color:var(--tinta)}
.filtro[aria-current="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}

.anyo{
  font-size:var(--etiqueta);font-weight:800;letter-spacing:.14em;
  color:var(--tinta-suave);margin-top:clamp(2.5rem,5vw,3.5rem);
  padding-bottom:.9rem;border-bottom:2px solid var(--tinta);
}
.lista{list-style:none;margin:0;padding:0}
.lista li{border-bottom:1px solid rgb(32 110 120 / .22)}
.lista a{
  display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);
  gap:clamp(1rem,2.5vw,2.5rem);padding-block:clamp(1.5rem,3vw,2.2rem);
  text-decoration:none;transition:padding-left 220ms cubic-bezier(.22,1,.36,1);
}
.lista a:hover{padding-left:.6rem}
.lista__t{font-size:clamp(1.1875rem,2.1vw,1.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.2}
.lista a:hover .lista__t{color:var(--turquesa-texto)}
.lista__d{font-size:.9375rem;color:var(--tinta-suave);margin-top:.5rem}

/* ------------------------------------------------------------
   TEXTO LARGO — quiénes somos
   ------------------------------------------------------------ */
.prosa{max-width:60ch;font-size:1.0625rem;line-height:1.72}
.prosa p+p{margin-top:1.3rem}
.prosa p:first-child{font-size:var(--lead);line-height:1.55;color:var(--tinta)}

.hueco{
  border:1.5px dashed rgb(32 110 120 / .38);border-radius:var(--radio);
  padding:clamp(2rem,4vw,3rem);display:grid;gap:.7rem;align-content:center;
  min-height:16rem;background:rgb(32 110 120 / .03);
}
.hueco__t{font-size:var(--etiqueta);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-suave)}
.hueco__d{font-size:.9375rem;color:var(--tinta-suave);max-width:34ch}

/* ------------------------------------------------------------
   MÓVIL
   ------------------------------------------------------------ */
@media(max-width:900px){
  .hero__rejilla{grid-template-columns:minmax(0,1fr);align-items:start}
  .cargos__fila{grid-template-columns:minmax(0,1fr)}
  .cargo--principal{grid-template-columns:minmax(0,1fr)}
  .obligacion{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .eje-detalle{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .lista a{grid-template-columns:minmax(0,1fr);gap:.6rem}
  .correo{grid-template-columns:minmax(0,1fr);gap:.3rem}
}

/* el hero ya cierra con su propio aire: la sección siguiente no necesita tanto arriba */
.hero + .seccion{padding-top:clamp(3rem,6vw,5rem)}

/* ============================================================
   NAVEGACIÓN — desplegable en móvil, sin JavaScript
   ============================================================ */
.nav{position:relative}
.nav__boton{list-style:none;cursor:pointer;display:none}
.nav__boton::-webkit-details-marker{display:none}
.nav__boton::marker{content:""}

/* escritorio: el menú siempre visible, el botón oculto */
.menu{display:flex}

@media(max-width:900px){
  .nav__boton{
    display:inline-flex;align-items:center;gap:.6rem;
    font-weight:800;font-size:.9375rem;color:var(--tinta);
    padding:.6rem .95rem;border:1px solid rgb(32 110 120 / .3);
    border-radius:var(--radio);background:transparent;
  }
  .nav__rayas{
    width:1.1rem;height:2px;background:currentColor;position:relative;display:block;
  }
  .nav__rayas::before,.nav__rayas::after{
    content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;
    transition:transform 200ms cubic-bezier(.22,1,.36,1),top 200ms;
  }
  .nav__rayas::before{top:-6px}
  .nav__rayas::after{top:6px}
  .nav[open] .nav__rayas{background:transparent}
  .nav[open] .nav__rayas::before{top:0;transform:rotate(45deg)}
  .nav[open] .nav__rayas::after{top:0;transform:rotate(-45deg)}

  .nav .menu{
    display:none;
    position:absolute;right:0;top:calc(100% + .75rem);z-index:60;
    background:var(--blanco);border:1px solid rgb(32 110 120 / .22);
    border-radius:var(--radio);box-shadow:0 18px 40px rgb(11 58 66 / .16);
    padding:.6rem;min-width:14rem;gap:0;
  }
  .nav[open] .menu{display:grid}
  .nav .menu li{display:block}
  .nav .menu a{
    display:block;padding:.85rem 1rem;border-radius:8px;font-size:1rem;
  }
  .nav .menu a:hover,.nav .menu a[aria-current="page"]{background:rgb(20 184 166 / .1)}
  .nav .menu a[aria-current="page"]{color:var(--turquesa-texto);font-weight:800}
  .nav .menu .boton{margin-top:.4rem;justify-content:center}
  .nav .menu .boton:hover{transform:none}
}

/* organigrama con los ocho cargos: malla y marca registral */
.cargos__malla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,1.8vw,1.3rem)}
.cargo__marca{
  font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--turquesa-texto);display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;
}
.cargo__marca::before{content:"";width:.5rem;height:.5rem;border-radius:2px;background:var(--turquesa)}
.nota-registro{
  margin-top:clamp(1.8rem,3.5vw,2.6rem);max-width:62ch;
  font-size:.9375rem;line-height:1.65;color:var(--tinta-suave);
}
@media(max-width:1100px){.cargos__malla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.cargos__malla{grid-template-columns:minmax(0,1fr)}}

/* ============================================================
   NAVEGACIÓN — dos menús, uno por tamaño, sin JavaScript
   ============================================================ */
.nav-movil{display:none}
.nav-escritorio .menu{display:flex}

@media(max-width:900px){
  .nav-escritorio{display:none}
  .nav-movil{display:block;position:relative}

  .nav__boton{
    list-style:none;cursor:pointer;
    display:inline-flex;align-items:center;gap:.65rem;
    font-weight:800;font-size:.9375rem;color:var(--tinta);
    padding:.62rem 1rem;border:1px solid rgb(32 110 120 / .3);
    border-radius:var(--radio);
  }
  .nav__boton::-webkit-details-marker{display:none}
  .nav__boton::marker{content:""}

  .nav__rayas{width:1.1rem;height:2px;background:currentColor;position:relative;display:block}
  .nav__rayas::before,.nav__rayas::after{
    content:"";position:absolute;left:0;width:100%;height:2px;background:currentColor;
    transition:transform 200ms cubic-bezier(.22,1,.36,1),top 200ms;
  }
  .nav__rayas::before{top:-6px}
  .nav__rayas::after{top:6px}
  .nav[open] .nav__rayas{background:transparent}
  .nav[open] .nav__rayas::before{top:0;transform:rotate(45deg)}
  .nav[open] .nav__rayas::after{top:0;transform:rotate(-45deg)}

  .menu--desplegado{
    display:grid;gap:0;
    position:absolute;right:0;top:calc(100% + .75rem);z-index:60;
    background:var(--blanco);border:1px solid rgb(32 110 120 / .22);
    border-radius:var(--radio);box-shadow:0 18px 40px rgb(11 58 66 / .16);
    padding:.6rem;min-width:15rem;list-style:none;margin:0;
  }
  .menu--desplegado li{display:block}
  .menu--desplegado a{display:block;padding:.85rem 1rem;border-radius:8px;font-size:1rem;text-decoration:none;font-weight:600;color:var(--tinta)}
  .menu--desplegado a:hover,.menu--desplegado a[aria-current="page"]{background:rgb(20 184 166 / .1)}
  .menu--desplegado a[aria-current="page"]{color:var(--turquesa-texto);font-weight:800}
  .menu--desplegado .boton{margin-top:.4rem;text-align:center;color:var(--profundo)}
  .menu--desplegado .boton:hover{transform:none;color:#fff}
}

/* ============================================================
   FICHA DE NOTICIA
   ============================================================ */
.ficha__cabecera{padding-block:clamp(2.5rem,5vw,4rem)}
.ficha__meta{margin-bottom:1.4rem;flex-wrap:wrap;gap:.7rem 1rem}
.ficha__meta .volver{
  font-weight:800;text-decoration:none;color:var(--turquesa-texto);
  border-bottom:2px solid rgb(13 118 107 / .3);padding-bottom:1px;
}
.ficha__meta .volver::before{content:"← "}
.ficha__meta .volver:hover{border-bottom-color:var(--turquesa-texto)}
.ficha__meta a.tema{text-decoration:none;border-bottom:1px solid rgb(17 59 65 / .3)}
.ficha__meta a.tema:hover{border-bottom-color:var(--tinta)}
.ficha__titular{
  font-size:clamp(2rem,5.2vw,4rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.04;max-width:20ch;
}
.ficha__cuerpo{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.ficha__lado{position:sticky;top:6rem}

@media(max-width:900px){
  .ficha__cuerpo{grid-template-columns:minmax(0,1fr)}
  .ficha__lado{position:static}
}

/* ============================================================
   VARIANTE DE TONO — más campaña, menos expediente
   ============================================================ */
.portada__lead--fuerte{
  font-size:clamp(1.5rem,3.4vw,2.5rem);font-weight:800;
  letter-spacing:-.025em;line-height:1.14;color:var(--tinta);max-width:20ch;
}
.portada__pie-texto{
  margin-top:1.4rem;font-size:1rem;line-height:1.6;
  color:var(--tinta-suave);max-width:42ch;
}
.tira-imagen{padding:0}
.tira-imagen__hueco{
  min-height:clamp(16rem,34vw,26rem);
  border-block:1.5px dashed rgb(32 110 120 / .35);
  background:rgb(32 110 120 / .04);
  display:grid;align-content:center;justify-items:center;text-align:center;
  gap:.7rem;padding:clamp(2rem,5vw,4rem) var(--canalon);
}