/* =========================
   HEADER
========================= */

.header{
  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:999;

  backdrop-filter:blur(18px);

  background:
    rgba(34,42,76,.72);

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.nav-wrap{
  height:84px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* =========================
   LOGO HEADER (NUEVO)
========================= */

.logo-wrap{
  display:flex;
  align-items:center;
  gap:12px;
}

/* imagen logo municipalidad */
.logo-img{
  width:52px;
  height:52px;
  object-fit:contain;
}

/* texto logo */
.logo-text{
  display:flex;
  flex-direction:column;
}

.logo-top{
  color:var(--blanco);
  font-size:.8rem;
  font-weight:900;
  letter-spacing:.18em;
}

.logo-bottom{
  color:var(--azul-soft);
  font-size:.88rem;
  font-weight:600;
}
/* NAV */

.nav{
  display:flex;
  align-items:center;
  gap:2rem;
}

.nav a{
  color:rgba(255,255,255,.9);

  font-size:.95rem;

  font-weight:500;

  transition:var(--transition);
}

.nav a:hover{
  color:var(--azul-soft);
}

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

.hero{
  min-height:100vh;

  display:flex;
  align-items:center;

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      rgba(10,15,30,.76),
      rgba(10,15,30,.82)
    ),
    url('../img/hero.jpg');

  background-size:cover;
  background-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(56,85,156,.35),
      transparent 45%
    );
}

.hero-grid{
  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  gap:5rem;

  align-items:center;

  position:relative;
  z-index:2;
}

/* CONTENT */

.hero-content h1{
  color:var(--blanco);

  font-size:5.2rem;

  line-height:.94;

  margin-bottom:2rem;

  max-width:850px;
}

.hero-content h1 span{
  color:var(--azul-main);
}

.hero-lead{

    text-align: justify;
  color:
    rgba(255,255,255,.82);

  font-size:1.15rem;

  line-height:1.9;

  max-width:720px;

  margin-bottom:2.5rem;
}

.hero-actions{
  display:flex;
  gap:1rem;
}

/* CARD */

.hero-card{
  background:
    rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.1);

  backdrop-filter:blur(20px);

  border-radius:
    var(--radius-xl);

  padding:2rem;

  box-shadow:
    var(--shadow-lg);
}

.hero-stat{
  padding:1.5rem 0;

  border-bottom:
    1px solid rgba(255,255,255,.08);
}

.hero-stat:last-child{
  border-bottom:none;
}

.hero-stat .num{
  display:block;

  color:var(--azul-soft);

  font-size:3rem;

  font-weight:900;

  margin-bottom:.4rem;
}

.hero-stat .label{
  color:var(--blanco);

  font-size:1rem;

  line-height:1.5;
}


/* SUBTEXT HERO STATS */

.hero-stat .sub{
  display:block;

  margin-top:.45rem;

  color:rgba(255,255,255,.6);

  font-size:.9rem;

  letter-spacing:.03em;
}

/* =========================
   INTRO SECCIÓN 2
========================= */

.intro{
  padding:8rem 0;
  background:var(--blanco);
}

/* GRID PRINCIPAL */
.intro-grid{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:4rem;
  align-items:start;
}

/* =========================
   TEXTO
========================= */

.intro-text h2{
  font-size:3rem;
  line-height:1.1;
  color:var(--azul-dark);
  margin-bottom:1.5rem;
}

.intro-text h2 span{
  color:var(--azul-main);
}

.intro-text p{
    text-align: justify;
  font-size:1.1rem;
  line-height:1.9;
  color:rgba(34,42,76,.75);
  margin-bottom:1.2rem;
}

/* EYEBROW */
.eyebrow-dark{
  display:inline-flex;
  padding:.5rem .9rem;
  border-radius:999px;
  background:var(--azul-soft);
  color:var(--azul-dark);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.12em;
  margin-bottom:1.5rem;
}

/* =========================
   MINI TABLA (3 COLUMNAS)
========================= */

.intro-stats{
  background: var(--azul-soft);
  border-radius: 18px;
  padding: 1.5rem;
  border: 1px solid rgba(34,42,76,.08);

  /* 🔥 CLAVE: 3 columnas */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* cada bloque ahora es columna */
.stat-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 1rem .5rem;

  border-right: 1px solid rgba(34,42,76,.12);
}

/* quitar borde del último */
.stat-row:last-child{
  border-right: none;
}

.stat-num{
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--azul-dark);
  line-height: 1;
}

.stat-label{
  font-size: .9rem;
  color: rgba(34,42,76,.7);
  margin-top: .3rem;
  text-align: center;
}

/* =========================
   TARJETAS LATERALES
========================= */

.intro-side{
  display:flex;
  flex-direction:column;
}

.intro-cards{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.info-card{
    text-align: justify;
  position: relative;

  background: var(--blanco);
  border: 1px solid rgba(34, 42, 76, 0.699);
  border-radius: 18px;

  padding: 1.5rem 1.5rem 1.5rem 1.8rem;

  box-shadow: 0 8px 20px rgba(34,42,76,.06);

  transition: .25s ease;

  overflow: hidden;
}

/* Borde lateral institucional */
.info-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background: var(--azul-dark);
}

/* Hover suave */
.info-card:hover{
  transform: translateY(-3px);
  background-color: rgba(0, 102, 255, 0.08);
  box-shadow: 0 14px 30px rgba(0, 102, 255, 0.25);
}
/* Título */
.info-card h4{
  font-size: 1rem;
  margin-bottom: .6rem;
  color: var(--azul-dark);
}

/* Texto */
.info-card p{
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(34,42,76,.72);
}

/* =========================
   RESPONSIVE
========================= */

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

/* =========================
   SECCIÓN 3 - TERRITORIO
========================= */

.territorio{
  padding: 8rem 0 4rem;
  background: var(--azul-dark);
}

/* GRID SOLO TEXTO */
.territorio-grid{
  display: grid;
  grid-template-columns: 1fr;
}

/* TEXTO */

.territorio-text h2{
  font-size: 3rem;
  line-height: 1.1;
  color: var(--azul-soft);
  margin-bottom: 1.5rem;
}

.territorio-text h2 span{
  color: var(--azul-main);
}

.territorio-text p{
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  margin-bottom: 1rem;
}

/* MINI BLOQUES EN HORIZONTAL */
.territorio-mini{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.5rem;
  color: rgba(255,255,255,.85);
}

/* TARJETAS */
.mini-item{
  background: var(--azul);
  border: 3px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 1.2rem;
  text-align: center;
  transition: .25s ease;
}

.mini-item:hover{
  transform: translateY(-4px);
  background: #83cbe0;
}

.mini-item .num{
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--celeste);
}

.mini-item .label{
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  margin-top: .3rem;
}

/* MAPA FULL WIDTH */
.territorio-map-full{
  width: 100%;
  margin-top: 4rem;
}

#map{
  width: 70%;
  height: 500px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.2);
  overflow: hidden;
  margin: 0 auto;
}

.map-note{
  font-size: .85rem;
  color: rgba(255,255,255,.6);
  text-align: center;
  margin-top: .6rem;
}

/* =========================
   SECCIÓN 4 - IDENTIDAD
========================= */

.identidad{
  padding: 8rem 0;
  background: var(--blanco);
}

/* TEXTO */
.identidad-inner{
  margin-bottom: 3rem;
}

.identidad-text h2{
  font-size: 3rem;
  color: var(--azul-oscuro);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.identidad-text h2 span{
  color: var(--azul-main);
}

.identidad-text p{
    text-align: justify;
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(34,42,76,.75);
  margin-bottom: 1rem;
}

/* GRID 3x2 */
.identidad-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* CARD */
.id-card{
  background: var(--celeste);
  border: 2px solid var(--azul-dark);
  border-radius: 16px;
  padding: 1.3rem;
  transition: .25s ease;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.id-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(34, 42, 76, 0.726);
}

/* IMAGEN PLACEHOLDER */
.img-box{
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden; /* 🔥 clave: recorta la imagen */
  margin-bottom: .5rem;
  position: relative;
  background: linear-gradient(135deg, var(--azul-dark), #eef6fb);
}

.img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 🔥 hace que rellene sin deformarse */
  display: block;
}
/* TITULO */
.id-card h4{
  font-size: 1.05rem;
  color: var(--azul-oscuro);
}

/* TEXTO */
.id-card p{
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(34,42,76,.7);
}

/* TAG */
.tag{
  font-size: .75rem;
  font-weight: 600;
  color: var(--azul);
  margin-top: auto;
}

/* RESPONSIVE */
@media (max-width: 1000px){
  .identidad-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* =========================
   SECCIÓN 5 - VISIÓN SIMPLIFICADA
========================= */

.imagen-objetivo-simple{
  padding: 8rem 0;
  background: linear-gradient(135deg, var(--azul-main), #001a33);
  display: flex;
  align-items: center;
}

/* caja central */
.vision-box{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  color: var(--blanco);
}

/* título */
.vision-box h2{
  font-size: 2.8rem;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: var(--celeste);
}

.vision-box h2 span{
color: var(--azul-main);
}

/* texto principal */
.vision-text{
  font-size: 1.3rem;
  line-height: 1.9;
  font-weight: 500;
  color: rgba(255,255,255,.9);
  margin-bottom: 2rem;
}

/* firma */
.vision-foot{
  font-size: .95rem;
  color: rgba(217,232,243,.75);
  font-style: italic;
}

/* =========================
   SECCIÓN 6 - EJES
========================= */

.ejes{
  padding: 8rem 0;
  background: #ffffff;
  
}

/* HEADER */

.ejes-head{
  max-width: 800px;
  margin-bottom: 4rem;
}

.ejes-head h2{
  font-size: 3rem;
  line-height: 1.1;
  color: var(--azul-oscuro);
  margin-bottom: 1.5rem;
}

.ejes-head h2 span{
  color: var(--azul-main);
}

.ejes-head p{
  font-size: 1.1rem;
  line-height: 1.8;
  color: rgba(34,42,76,.75);
}

/* GRID */

/* GRID 2 COLUMNAS */
.ejes-grid{
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.2rem;
}
/* CARD */
.eje-card{
  display: flex;
  
  flex-direction: column;
  gap: .8rem;
  background: var(--blanco);
  border: 2px solid rgba(34, 42, 76, 0.507);
  
  border-radius: 18px;
  padding: 1.2rem;
  min-height: 260px;
  box-shadow: 0 8px 24px rgba(34,42,76,.05);
  transition: .25s ease;
}

.eje-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(101, 122, 216, 0.705);
}

/* NÚMERO */
.eje-num{
  flex-shrink: 0;
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  color: #c4c5c7;
  opacity: .9;
  min-width: 70px;
}

/* CONTENIDO */
.eje-card h3{
  margin: 0 0 .4rem;
  color: var(--azul-oscuro);
  font-size: 1.15rem;
}

.eje-card p{
  margin: 0;
  text-align: justify;
  line-height: 1.6;
  color: rgba(34,42,76,.72);
  font-size: .96rem;
}

/* TABLET */
@media (max-width: 992px){

  .ejes-grid{
    grid-template-columns: repeat(2, 1fr);
  }

}
.ejes-imagen{
  margin-top: 4rem;
  text-align: center;
}

.ejes-imagen img{
  width: 100%;
  max-width: 1500px;
  height: auto;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(34,42,76,.12);
  border: 1px solid rgba(34,42,76,.08);
}

/* MOBILE */
@media (max-width: 600px){

  .ejes-grid{
    grid-template-columns: 1fr;
  }

}
/* =========================================
   SECCIÓN 7 · CARTERA ESTRATÉGICA
========================================= */

.cartera{
  padding:8rem 0;
  background:var(--blanco);
}

.cartera h2{
  font-size:3rem;
  line-height:1.1;
  color:var(--azul-dark);
  margin-bottom:1.5rem;
}

.cartera h2 span{
  color:var(--azul-main);
}

.cartera-lead{
  max-width:850px;
  font-size:1.1rem;
  line-height:1.8;
  color:rgba(34,42,76,.75);
  margin-bottom:3rem;
}

/* FILTROS */

.cartera-filtros{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:3rem;
}

.filtro{
  border:none;
  padding:.9rem 1.3rem;
  border-radius:999px;
  background:var(--celeste);
  color:var(--azul-dark);
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}

.filtro:hover{
  background:var(--azul-main);
  color:var(--blanco);
}

.filtro.active{
  background:var(--azul-dark);
  color:var(--blanco);
}

/* LISTA */

.cartera-lista{
  display:flex;
  flex-direction:column;
  gap:1.2rem;
}

/* ITEM */

.cart-item{
  background:var(--blanco);
  border:1px solid rgba(34,42,76,.08);

  /* 🔥 BORDE IZQUIERDO */
  border-left:8px solid var(--azul-main);

  border-radius:18px;
  padding:0.5rem 1.5rem;

  transition:.25s ease;

  box-shadow:0 6px 18px rgba(34, 42, 76, 0.623);
}

.cart-item:hover{
  transform:translateY(-5px);

  box-shadow:0 14px 28px rgba(102, 117, 177, 0.781);
}

/* CONTENIDO */

.cart-top{
  display:grid;
  grid-template-columns:120px 1fr 160px;
  gap:1.5rem;
  align-items:center;

}

/* CÓDIGO */

.cart-codigo{
  font-size:1.4rem;
  font-weight:900;
  color:#c4c5c7;;
}

/* INFO */

.cart-info h3{
  font-size:1.15rem;
  color:var(--azul-dark);
  margin-bottom:.4rem;
}

.cart-info p{
  color:rgba(34,42,76,.72);
  line-height:1.6;
  font-size:.95rem;
}

/* EJE */

.cart-eje{


  background:var(--azul-soft);

  color:var(--azul-dark);

  padding:.7rem 1rem;

  border-radius:999px;

  font-size:.85rem;

  font-weight:700;
}
/* LATERAL */

.cart-side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.7rem;
}

/* MONTO */

.cart-monto{
  font-size:.85rem;
  color:rgba(34,42,76,.55);
  font-style:italic;
}

/* NOTA FINAL */

.cartera-nota{
  margin:3rem auto 0;

  max-width:auto;

  background:#c8cfdd;

  padding:1.5rem 2rem;

  border-radius:16px;

  font-size:.95rem;

  line-height:1.8;

  color:var(--azul-dark);

  font-style:italic;

  text-align:center;

  box-shadow:0 8px 22px rgba(34,42,76,.06);
}

/* RESPONSIVE */

@media(max-width:900px){

  .cart-top{
    grid-template-columns:1fr;
  }

  .cart-eje{
    justify-self:start;
  }

  .cart-side{
  align-items:flex-start;
}

}


/* =========================================================
   ETAPAS PLADECO
========================================================= */

.etapas{
  padding:8rem 0;
  background:#f7f7f7;
}

.etapas h2{
  font-size:3rem;
  line-height:1.1;
  color:var(--azul-dark);
  margin-bottom:1.5rem;
}

.etapas h2 span{
  color:var(--azul-main);
}
.plazos h2{
  font-size:3rem;
  line-height:1.1;
  color:var(--blanco);
  margin-bottom:1.5rem;
}

.plazos h2 span{
  color: var(--azul-main);
}
.etapas-lead{
  max-width:900px;
  font-size:1.08rem;
  line-height:1.9;
  color:var(--azul-dark);
  margin-bottom:4rem;
}

.plazos-lead{
  max-width:900px;
  font-size:1.08rem;
  line-height:1.9;
  color:var(--azul-soft);
  margin-bottom:4rem;
}

/* =========================================================
   ETAPA PREPARACIÓN
========================================================= */

.et-prep{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:2rem;

  background:white;

  border-radius:28px;

  padding:2rem;

  margin-bottom:4rem;

  border:2px solid rgba(0,0,0,.06);

  box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.et-prep-tag{
  background:linear-gradient(135deg,#0f172a,#1e293b);

  color:white;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;

  text-align:center;

  font-size:2rem;
  font-weight:800;

  min-height:180px;
}

.et-prep-tag small{
  margin-top:.5rem;

  font-size:.9rem;
  font-weight:600;

  opacity:.8;
}

.et-prep-content h4{
  font-size:1.4rem;
  margin-bottom:1rem;
  color:var(--azul-dark);
}

.et-prep-content p{
  line-height:1.9;
  color:#475569;
}

/* =========================================================
   TRACK
========================================================= */

.et-track{
  position:relative;

  display:flex;
  flex-direction:column;

  gap:2.5rem;

  padding-left:4rem;
}

.et-track::before{
  content:"";

  position:absolute;

  left:28px;
  top:0;
  bottom:0;

  width:3px;

  background:#cbd5e1;
}

/* =========================================================
   STEP
========================================================= */

.et-step{
  position:relative;

  display:grid;
  grid-template-columns:80px 1fr;
  gap:1rem;
}

.et-circle{
  width:80px;
  height:80px;

  border-radius:50%;

  background:linear-gradient(135deg,#1e3a8a,#2563eb);

  color:white;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:800;
  font-size:1.8rem;

  position:relative;

  z-index:2;

  box-shadow:0 10px 25px rgba(37,99,235,.25);
}

.et-body{
  background:white;

  border-radius:24px;

  padding:1rem 2rem;

  border:2px solid rgba(37,99,235,.08);

  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.et-q{
  display:inline-block;

  margin-bottom:1rem;

  background:#eff6ff;

  color:#2563eb;

  border-radius:999px;

  padding:.45rem .9rem;

  font-size:.82rem;
  font-weight:700;
}

.et-body h3{
  font-size:1.45rem;

  line-height:1.3;

  margin-bottom:1rem;

  color:var(--azul-dark);
}

.et-desc{
  color:#475569;

  line-height:1.9;

  margin-bottom:1.5rem;
}

/* =========================================================
   PILLS
========================================================= */

.et-pills{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;

  margin-bottom:1.8rem;
}

.et-pill{
  display:flex;
  align-items:center;
  gap:.55rem;

  padding:.7rem 1rem;

  background:#f8fafc;

  border-radius:999px;

  font-size:.9rem;
  font-weight:600;

  color:#334155;

  border:1px solid #e2e8f0;
}

.et-pill .dot{
  width:10px;
  height:10px;

  border-radius:50%;

  background:#2563eb;
}

/* =========================================================
   META
========================================================= */

.et-meta-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;

  padding-top:1.5rem;

  border-top:1px solid #e2e8f0;
}

.et-meta-row .k{
  font-size:.8rem;
  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.08em;

  color:#64748b;

  margin-bottom:.35rem;
}

.et-meta-row .v{
  font-size:1rem;
  font-weight:700;

  color:var(--azul-dark);
}

/* =========================================================
   GANTT
========================================================= */

.plazos{
  padding:8rem 0;
  background:var(--azul-dark);
}
/* =========================================
   IMAGEN PLAZOS
========================================= */
.plazos-image{
  margin-top:4rem;

  display:flex;
  gap:2rem;

  justify-content:center;
  align-items:stretch;

  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
}

/* IZQUIERDA: TEXTO */
.plazos-texto{
  flex: 1;
  max-width: 320px;

  color: var(--blanco);
}

.plazos-texto h2{
  font-size:1.6rem;
  font-weight:800;
  color: var(--blanco);
  margin-bottom:.5rem;
}

.plazos-texto h3{
  font-size:.9rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color: var(--azul-soft);
  margin-bottom:1.2rem;
}

.plazos-texto p{
  font-size:1rem;
  text-align: justify;
  line-height:1.6;
  color:var(--azul-soft);
  margin-bottom:1rem;
}

/* DERECHA: MAPA */
.plazos-mapa{
  flex: 2;
}

.plazos-mapa iframe{
  width:100%;
  height:600px;

  border:4px solid white;
  border-radius:26px;

  box-shadow:0 20px 50px rgba(0,0,0,.12);

  transition: transform .35s ease, box-shadow .35s ease;
}

.plazos-mapa iframe:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(17, 244, 252, 0.35);
}

/* RESPONSIVE */
@media(max-width:768px){

  .plazos-image{
    flex-direction:column;
  }

  .plazos-texto{
    max-width:100%;
  }

  .plazos-mapa iframe{
    height:360px;
    border-radius:18px;
  }
}


.gantt{
  margin-top:1rem;
}

.gantt-row{
  display:grid;
  grid-template-columns:260px 1fr 140px;
  gap:1.5rem;

  align-items:center;

  margin-bottom:1.2rem;
}

.gantt-label{
  font-weight:700;
  color:var(--blanco);
}

.gantt-label small{
  display:block;

  margin-bottom:.25rem;

  font-size:.75rem;

  text-transform:uppercase;

  color: var(--azul-soft);
}

.gantt-bar-track{
  height:42px;

  background:#fdfdfd;

  border-radius:999px;

  overflow:hidden;
}

.gantt-bar{
  height:100%;

  display:flex;
  align-items:center;

  padding:0 1.2rem;

  color:white;

  font-weight:700;

  border-radius:999px;
}

.b0{width:20%; background:#0f172a;}
.b1{width:50%; background:#2563eb;}
.b2{width:70%; background:#1d4ed8;}
.b3{width:30%; background:#3b82f6;}
.b4{width:50%; background:#60a5fa;}
.b5{width:35%; background:#93c5fd; color:#0f172a;}

.gantt-weeks{
  font-weight:700;
  color:#b5c8e4;
}

.gantt-total{
  margin-top:4rem;

  text-align:center;
}

.gantt-total .n{
  font-size:3rem;
  font-weight:900;

  color:var(--azul-soft);

  margin-bottom:.5rem;
}

.gantt-total .l{
  color:#e6e8eb;
  font-size:1rem;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

  .et-prep{
    grid-template-columns:1fr;
  }

  .et-track{
    padding-left:2rem;
  }

  .et-track::before{
    left:18px;
  }

  .et-step{
    grid-template-columns:50px 1fr;
  }

  .et-circle{
    width:42px;
    height:42px;

    font-size:.9rem;
  }

  .et-meta-row{
    grid-template-columns:1fr;
  }

  .gantt-row{
    grid-template-columns:1fr;
    gap:.8rem;
  }

  .etapas h2,
  .plazos h2{
    font-size:2.2rem;
  }

}
/* =========================================
   SECCIÓN 09 · PARTICIPACIÓN
========================================= */

.participacion{
  padding:8rem 0;
  background:var(--blanco);
}

.participacion h2{
  font-size:3rem;
  line-height:1.1;
  color:var(--azul-dark);
  margin-bottom:1.5rem;
}

.participacion h2 span{
  color:var(--azul-main);
}

.part-lead{
  max-width:850px;
  font-size:1.1rem;
  line-height:1.8;
  color:rgba(34,42,76,.75);
  margin-bottom:4rem;
}

/* GRID */

/* GRID HORIZONTAL */

.part-grid{
  display:flex;
  gap:1.5rem;

  width:100%;
  justify-content:space-between;
  flex-wrap:nowrap;
}

/* CARD */

/* CARD */

.part-card{
  flex:1;

  background:var(--azul-soft);
  border:2px solid var(--azul-dark);
  border-left:6px solid var(--azul-main);
 
  border-radius:16px;
  padding:1.4rem 1.5rem;

  transition:.25s ease;

  min-width:220px;
}

.part-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(34,42,76,.12);
}

/* NUMERO */

.part-num{
  font-size:2.2rem;
  font-weight:900;
  color:var(--azul-dark);
  margin-bottom:.5rem;
}

/* TITULO */

.part-card h3{
  font-size:1.1rem;
  margin-bottom:.5rem;
  color:var(--azul-dark);
}

/* TEXTO */

.part-card p{
  font-size:.95rem;
  line-height:1.6;
  color:rgba(34,42,76,.7);
}

/* RESPONSIVE */

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

  .participacion h2{
    font-size:2.3rem;
  }
}

/* =========================================
   SECCIÓN 10 · GALERÍA
========================================= */

.galeria{
  padding:8rem 0;
  background:var(--azul-dark);
  overflow:hidden;
}

/* HEADER */

.galeria-head{
  max-width:850px;
  margin-bottom:4rem;
}

.galeria-head h2{
  font-size:3rem;
  line-height:1.1;
  color:var(--azul-soft);
  margin-bottom:1.5rem;
}

.galeria-head h2 span{
  color:var(--azul-main);
}

.galeria-head p{
  font-size:1.1rem;
  line-height:1.8;
  color:rgba(243, 243, 243, 0.72);
}

/* =========================================
   GRID RECTANGULAR CREATIVO
========================================= */

.galeria-grid{

  display:grid;

  grid-template-columns:
    repeat(12, 1fr);

  grid-auto-rows:90px;

  gap:1rem;
}

/* =========================================
   CARDS
========================================= */

.gal-item{

  position:relative;

  overflow:hidden;

  border-radius:22px;

  background:#dbe7f3;

  box-shadow:
    0 10px 24px rgba(34,42,76,.10);

  transition:.35s ease;
}

/* IMAGEN */

.gal-item img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:1s ease;
}

.gal-item:hover img{
  transform:scale(1.06);
}

/* HOVER */

.gal-item:hover{

  transform:
    translateY(-5px);

  box-shadow:
    0 20px 40px rgba(34,42,76,.18);
}

/* OVERLAY */

.gal-overlay{

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(8,15,30,.82),
      transparent
    );

  display:flex;
  align-items:flex-end;

  padding:1.3rem;

  opacity:0;

  transition:.3s ease;
}

.gal-item:hover .gal-overlay{
  opacity:1;
}

/* TEXTO */

.gal-overlay span{

  color:white;

  font-size:.95rem;

  font-weight:600;
}

/* =========================================
   DISTRIBUCIÓN SIMÉTRICA
========================================= */

/*
   ESTRUCTURA TOTAL:

   ┌───────┬───────┬───────┐
   │   1   │   1   │   2   │
   │       │       │       │
   ├───────┼───────┼───────┤
   │   3   │   4   │   2   │
   ├───────┼───────┼───────┤
   │   5   │   6   │   7   │
   │       │       │       │
   ├───────┴───────┼───────┤
   │       8       │   7   │
   └───────────────┴───────┘
*/

/* FOTO 1 GRANDE */
.gal-item:nth-child(1){
  grid-column:1 / 7;
  grid-row:1 / 5;
}

/* FOTO 2 VERTICAL */
.gal-item:nth-child(2){
  grid-column:7 / 13;
  grid-row:1 / 7;
}

/* FOTO 3 */
.gal-item:nth-child(3){
  grid-column:1 / 4;
  grid-row:5 / 8;
}

/* FOTO 4 */
.gal-item:nth-child(4){
  grid-column:4 / 7;
  grid-row:5 / 8;
}

/* FOTO 5 */
.gal-item:nth-child(5){
  grid-column:1 / 5;
  grid-row:8 / 11;
}

/* FOTO 6 */
.gal-item:nth-child(6){
  grid-column:5 / 8;
  grid-row:8 / 11;
}

/* FOTO 7 VERTICAL */
.gal-item:nth-child(7){
  grid-column:8 / 13;
  grid-row:7 / 13;
}

/* FOTO 8 PANORÁMICA */
.gal-item:nth-child(8){
  grid-column:1 / 8;
  grid-row:11 / 13;
}

/* =========================================
   RESPONSIVE TABLET
========================================= */

@media(max-width:1100px){

  .galeria-grid{

    grid-template-columns:
      repeat(6,1fr);

    grid-auto-rows:90px;
  }

  .gal-item{

    grid-column:span 3 !important;
    grid-row:span 3 !important;
  }

  .gal-item:nth-child(1),
  .gal-item:nth-child(2){
    grid-column:span 6 !important;
  }
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

  .galeria{
    padding:6rem 0;
  }

  .galeria-head h2{
    font-size:2.3rem;
  }

  .galeria-grid{

    grid-template-columns:1fr;

    grid-auto-rows:240px;
  }

  .gal-item{

    grid-column:auto !important;
    grid-row:auto !important;

    border-radius:18px;
  }

  .gal-overlay{
    opacity:1;
  }
}

/* =========================================
   FAQ · PREGUNTAS FRECUENTES
========================================= */

.faq{
  padding:8rem 0;

  background:#f7f7f7;
}

/* TITULO */

.faq h2{
  font-size:3rem;

  line-height:1.1;

  color:var(--azul-dark);

  margin-bottom:1.5rem;
}

.faq h2 span{
  color:var(--azul-main);
}

/* LEAD */

.faq-lead{
  max-width:850px;

  font-size:1.08rem;

  line-height:1.8;

  color:var(--azul-main);

  margin-bottom:4rem;
}

/* WRAP */

.faq-wrap{
  display:flex;
  flex-direction:column;

  gap:1.3rem;
}

/* ITEM */

.faq-item{
  background:white;

  border-radius:22px;

  overflow:hidden;

  border:3px solid rgba(0, 46, 114, 0.76);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

/* HOVER */

.faq-item:hover{
  transform:translateY(-3px);

  border-color:rgba(13,71,161,.18);

  box-shadow:
    0 20px 45px rgba(0,0,0,.08);
}

/* SUMMARY */

.faq-item summary{
  list-style:none;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:2rem;

  padding:1rem 1.4rem;

  font-size:1.08rem;

  font-weight:700;

  color:var(--azul-dark);
}

/* REMOVE DEFAULT */

.faq-item summary::-webkit-details-marker{
  display:none;
}

/* ICON */

.faq-icon{
  width:38px;
  height:38px;

  min-width:38px;

  border-radius:50%;

  background:rgba(13,71,161,.08);

  color:var(--azul-main);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.3rem;

  font-weight:700;

  transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;
}

/* OPEN */

.faq-item[open]{
  border-color:rgba(59,130,246,.25);

  box-shadow:
    0 24px 55px rgba(0,0,0,.08);
}

.faq-item[open] .faq-icon{
  transform:rotate(45deg);

  background:var(--azul-main);

  color:white;
}

/* CONTENT */

.faq-content{
  padding:
    0 1.8rem 1.8rem 1.8rem;

  animation:faqFade .35s ease;
}

.faq-content p{
  color:var(--azul-main);

  line-height:1.8;

  font-size:1rem;

  max-width:900px;
}
.faq-content p span{
  color: var(--azul-dark);
  font-weight: 700;
  letter-spacing: 0.2px;
}
/* ANIMATION */

@keyframes faqFade{

  from{
    opacity:0;
    transform:translateY(-6px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }

}

/* RESPONSIVE */

@media(max-width:768px){

  .faq{
    padding:6rem 0;
  }

  .faq h2{
    font-size:2.2rem;
  }

  .faq-item summary{
    padding:1.3rem 1.2rem;

    font-size:1rem;
  }

  .faq-content{
    padding:
      0 1.2rem 1.4rem 1.2rem;
  }

}

/* =========================================
   SECCIÓN 11 · INDICADORES
========================================= */

.indicadores{

  padding:8rem 0;

  background:
    linear-gradient(
      180deg,
      #f4f7fb 0%,
      #eef3f9 100%
    );
}

/* HEADER */

.indicadores-head{

  max-width:850px;

  margin-bottom:4rem;
}

.indicadores-head h2{

  font-size:3rem;

  line-height:1.1;

  color:var(--azul-dark);

  margin-bottom:1.5rem;
}

.indicadores-head h2 span{
  color:var(--azul-main);
}

.indicadores-head p{

  font-size:1.1rem;

  line-height:1.8;

  color:rgba(34,42,76,.72);
}

/* =========================================
   GRID
========================================= */

.indicadores-grid{

  display:grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap:1.5rem;
}

/* =========================================
   CARD
========================================= */

.indicador-card{

  position:relative;

  background:var(--blanco);

  border:
    1px solid rgba(34,42,76,.08);

  border-top:
    6px solid var(--azul-main);

  border-radius:24px;

  padding:1.8rem;

  overflow:hidden;

  transition:.3s ease;

  box-shadow:
    0 10px 24px rgba(34,42,76,.06);
}

/* hover */

.indicador-card:hover{

  transform:
    translateY(-6px);

  box-shadow:
    0 20px 40px rgba(34,42,76,.14);
}

/* brillo suave */

.indicador-card::before{

  content:"";

  position:absolute;

  top:-60px;
  right:-60px;

  width:160px;
  height:160px;

  border-radius:50%;

  background:
    radial-gradient(
      rgba(56,85,156,.10),
      transparent 70%
    );
}

/* =========================================
   TOP
========================================= */

.indicador-top{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:1.4rem;
}

/* número */

.indicador-num{

  font-size:2.5rem;

  font-weight:900;

  line-height:1;

  color:#d5dce8;
}

/* icon */

.indicador-icon{

  width:54px;
  height:54px;

  border-radius:16px;

  background:var(--azul-soft);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.4rem;
}

/* =========================================
   TEXTO
========================================= */

.indicador-card h3{

  font-size:1.15rem;

  color:var(--azul-dark);

  margin-bottom:.8rem;
}

.indicador-card p{

  font-size:.95rem;

  line-height:1.7;

  color:rgba(34,42,76,.72);

  margin-bottom:1.6rem;
}

/* =========================================
   META
========================================= */

.indicador-meta{

  display:flex;

  gap:1rem;
}

/* item */

.meta-item{

  flex:1;

  background:#f4f7fb;

  border:
    1px solid rgba(34,42,76,.06);

  border-radius:14px;

  padding:.9rem 1rem;
}

/* label */

.meta-label{

  display:block;

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.04em;

  text-transform:uppercase;

  color:rgba(34,42,76,.5);

  margin-bottom:.35rem;
}

/* value */

.meta-value{

  font-size:1rem;

  font-weight:800;

  color:var(--azul-dark);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

  .indicadores-grid{

    grid-template-columns:
      repeat(2,1fr);
  }
}

@media(max-width:700px){

  .indicadores{

    padding:6rem 0;
  }

  .indicadores-head h2{

    font-size:2.3rem;
  }

  .indicadores-grid{

    grid-template-columns:1fr;
  }

  .indicador-meta{

    flex-direction:column;
  }
}

/* =========================================
   SECCIÓN 12 · DOCUMENTOS
========================================= */

.documentos{

  padding:8rem 0;

  background:var(--blanco);
}

/* =========================================
   HEADER
========================================= */

.documentos-head{

  max-width:850px;

  margin-bottom:4rem;
}

.documentos-head h2{

  font-size:3rem;

  line-height:1.1;

  color:var(--azul-dark);

  margin-bottom:1.5rem;
}

.documentos-head h2 span{
  color:var(--azul-main);
}

.documentos-head p{

  font-size:1.1rem;

  line-height:1.8;

  color:rgba(34,42,76,.72);
}

/* =========================================
   GRID
========================================= */

.docs-grid{

  display:grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:1.5rem;
}

/* =========================================
   CARD
========================================= */

.doc-card{

  position:relative;

  display:flex;

  align-items:flex-start;

  gap:1.4rem;

  background:#f7f9fc;

  border:
    1px solid rgba(34,42,76,.08);

  border-left:
    6px solid var(--azul-main);

  border-radius:22px;

  padding:1.6rem;

  transition:.3s ease;

  overflow:hidden;
}

/* hover */

.doc-card:hover{

  transform:
    translateY(-5px);

  box-shadow:
    0 16px 34px rgba(34,42,76,.12);

  background:white;
}

/* glow */

.doc-card::before{

  content:"";

  position:absolute;

  top:-80px;
  right:-80px;

  width:180px;
  height:180px;

  border-radius:50%;

  background:
    radial-gradient(
      rgba(56,85,156,.08),
      transparent 70%
    );
}

/* =========================================
   ICON
========================================= */

.doc-icon{

  width:70px;
  height:70px;

  flex-shrink:0;

  border-radius:18px;

  background:var(--azul-soft);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:2rem;
}

/* =========================================
   CONTENT
========================================= */

.doc-content{

  flex:1;
}

/* tipo */

.doc-type{

  display:inline-block;

  margin-bottom:.6rem;

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.08em;

  text-transform:uppercase;

  color:var(--azul-main);
}

/* titulo */

.doc-content h3{

  font-size:1.12rem;

  line-height:1.4;

  color:var(--azul-dark);

  margin-bottom:.7rem;
}

/* texto */

.doc-content p{

  font-size:.95rem;

  line-height:1.7;

  color:rgba(34,42,76,.72);
}

/* =========================================
   BOTÓN
========================================= */

.doc-btn{

  align-self:center;

  padding:.85rem 1.2rem;

  border-radius:999px;

  background:var(--azul-dark);

  color:white;

  font-size:.85rem;

  font-weight:700;

  white-space:nowrap;

  transition:.25s ease;
}

.doc-btn:hover{

  background:var(--azul-main);

  transform:translateY(-2px);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1000px){

  .docs-grid{

    grid-template-columns:1fr;
  }
}

@media(max-width:700px){

  .documentos{

    padding:6rem 0;
  }

  .documentos-head h2{

    font-size:2.3rem;
  }

  .doc-card{

    flex-direction:column;

    align-items:flex-start;
  }

  .doc-btn{

    width:100%;

    text-align:center;

    margin-top:.5rem;
  }
}

/* =========================================
   SECCIÓN · ENCUESTA CIUDADANA
========================================= */

.encuesta{
  padding:8rem 0;

  background:
    linear-gradient(
      135deg,
      var(--azul-dark) 0%,
      #0f2744 100%
    );

  overflow:hidden;
}

/* BOX */

.encuesta-box{
  display:grid;

  grid-template-columns:
    .9fr 1.9fr;

  gap:9rem;

  align-items:center;
}

/* CONTENT */

.encuesta-content h2{
  font-size:3rem;

  line-height:1.1;

  color:var(--azul-soft);

  margin:1.5rem 0;
}

.encuesta-content h2 span{
  color:var(--azul-main);
}

.encuesta-content p{
  font-size:1.05rem;

  line-height:1.9;

  color:rgba(255,255,255,.85);

  margin-bottom:2rem;

  max-width:650px;
}

/* LISTA */

.encuesta-list{
  list-style:none;

  padding:0;

  margin:0 0 2.5rem 0;
}

.encuesta-list li{
  color:white;

  margin-bottom:1rem;

  font-size:1rem;

  font-weight:500;
}

/* BOTÓN */

.btn-encuesta{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  padding:1rem 2rem;

  background:var(--azul-soft);

  color:var(--azul-dark);

  font-weight:700;

  text-decoration:none;

  border-radius:14px;

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;

  box-shadow:
    0 12px 30px rgba(0,0,0,.18);
}

.btn-encuesta:hover{
  transform:translateY(-4px);

  background:#ffb84d;
}

/* IMAGEN */

.encuesta-image{
  position:relative;
}

.encuesta-image img{
  width:150%;

  border-radius:28px;

  display:block;

  object-fit:cover;

  box-shadow:
    0 30px 60px rgba(0,0,0,.25);

  border:5px solid rgba(255,255,255,.08);
}

/* EFECTO DECORATIVO */

.encuesta-image::before{
  content:"";

  position:absolute;

  width:180px;
  height:180px;

  background:
    rgba(253,165,32,.15);

  border-radius:50%;

  top:-40px;
  right:-40px;

  z-index:0;
}

/* RESPONSIVE */

@media(max-width:992px){

  .encuesta-box{
    grid-template-columns:1fr;

    gap:3rem;
  }

  .encuesta-content h2{
    font-size:2.4rem;
  }

}

@media(max-width:768px){

  .encuesta{
    padding:6rem 0;
  }

  .encuesta-content h2{
    font-size:2rem;
  }

  .btn-encuesta{
    width:100%;
  }

}

/* =========================================
   FOOTER · PLADECO
========================================= */

.footer{

  position:relative;

  padding:7rem 0 2rem;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      #11182f 0%,
      #0b1020 100%
    );

  color:white;
}

/* =========================================
   GLOW DECORATIVO
========================================= */

.footer-glow{

  position:absolute;

  border-radius:50%;

  filter:blur(80px);

  opacity:.18;

  pointer-events:none;
}

.footer-glow-1{

  width:320px;
  height:320px;

  background:#38559c;

  top:-120px;
  left:-80px;
}

.footer-glow-2{

  width:260px;
  height:260px;

  background:#6ea8ff;

  bottom:-100px;
  right:-60px;
}

/* =========================================
   TOP
========================================= */

.footer-top{

  position:relative;
  z-index:2;

  display:grid;

  grid-template-columns:
    1.2fr .9fr .7fr;

  gap:4rem;

  margin-bottom:4rem;
}

/* =========================================
   BRAND
========================================= */

.footer-eyebrow{

  display:inline-flex;

  padding:.55rem 1rem;

  border-radius:999px;

  background:
    rgba(255,255,255,.08);

  border:
    1px solid rgba(255,255,255,.08);

  font-size:.78rem;

  font-weight:700;

  letter-spacing:.12em;

  margin-bottom:1.5rem;

  color:#d9e8f3;
}

/* titulo */

.footer-brand h2{

  font-size:3.2rem;

  line-height:1;

  margin-bottom:1.6rem;

  color:white;
}

.footer-brand h2 span{
  color:#7ca8ff;
}

/* texto */

.footer-brand p{

  max-width:520px;

  font-size:1.05rem;

  line-height:1.9;

  color:
    rgba(255,255,255,.72);
}

/* =========================================
   TITULOS
========================================= */

.footer-title{

  font-size:.85rem;

  font-weight:800;

  letter-spacing:.14em;

  text-transform:uppercase;

  color:#9fb7ea;

  margin-bottom:1.6rem;
}

/* =========================================
   CONTACTO
========================================= */

.footer-info{

  display:flex;

  flex-direction:column;

  gap:1.2rem;
}

.footer-item{

  display:flex;

  flex-direction:column;

  gap:.3rem;
}

/* label */

.footer-label{

  font-size:.75rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  color:
    rgba(255,255,255,.45);
}

/* value */

.footer-value{

  font-size:.98rem;

  line-height:1.6;

  color:
    rgba(255,255,255,.88);
}

/* =========================================
   LINKS
========================================= */

.footer-links nav{

  display:flex;

  flex-direction:column;

  gap:.9rem;
}

.footer-links a{

  color:
    rgba(255,255,255,.75);

  transition:.25s ease;

  width:fit-content;

  position:relative;
}

/* hover */

.footer-links a:hover{

  color:white;

  transform:translateX(4px);
}

/* =========================================
   LINEA
========================================= */

.footer-line{

  width:100%;
  height:1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255,255,255,.15),
      transparent
    );

  margin-bottom:2rem;
}

/* =========================================
   BOTTOM
========================================= */

.footer-bottom{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:2rem;

  flex-wrap:wrap;
}

/* copy */

.footer-copy{

  font-size:.9rem;

  color:
    rgba(255,255,255,.5);
}

/* links */

.footer-bottom-links{

  display:flex;

  align-items:center;

  gap:1.5rem;

  flex-wrap:wrap;
}

.footer-bottom-links a{

  font-size:.88rem;

  color:
    rgba(255,255,255,.58);

  transition:.25s ease;
}

.footer-bottom-links a:hover{

  color:white;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

  .footer-top{

    grid-template-columns:1fr;

    gap:3rem;
  }
}

@media(max-width:700px){

  .footer{

    padding:5rem 0 2rem;
  }

  .footer-brand h2{

    font-size:2.4rem;
  }

  .footer-bottom{

    flex-direction:column;

    align-items:flex-start;
  }

  .footer-bottom-links{

    gap:1rem;
  }
}