/* ── Storytelling pull-quote ── */
.pull-quote {
  font-family: var(--title);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.35;
  border-left: 3px solid var(--green);
  padding-left: 1.75rem;
  margin: 2.5rem 0;
}

/* ── Milestone fecha ── */
.milestone {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
  margin: 3rem 0;
}
.milestone-year {
  font-family: var(--title);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight: 300;
  color: var(--green-dark);
  line-height: 1;
  flex-shrink: 0;
  min-width: 7rem;
  padding-top: .25rem;
}
.milestone-body { flex: 1; }
.milestone-body h3 {
  font-family: var(--title);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: .75rem;
}
.milestone-body p { font-size: clamp(1rem,1.4vw,1.15rem); color: var(--text-muted); line-height: 1.75; margin: 0; }
.stats-row .stat-num { color: var(--green-dark); }
.hoy-quote { font-family:var(--title); font-style:italic; font-size:clamp(1.15rem,2.2vw,1.5rem); font-weight:300; color:var(--green-dark); line-height:1.65; border-left:3px solid var(--green); padding-left:1.75rem; margin:4rem 0 1.5rem; }
.img-ph-icon { background:none; border:none; }
.img-ph-icon::before { content:none; }
.img-ph-icon img { width:100%; height:100%; object-fit:contain; display:block; }
#mision .mision-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:stretch; }
#mision .mision-grid > .card:nth-child(3) { grid-column:1 / -1; }
@media(min-width:901px) and (max-width:1440px){
  #mision .mision-grid { grid-template-columns:repeat(3,1fr); gap:1rem; }
  #content #mision .card { padding:34px; }   /* 10px mas */
  #mision .mision-grid > .card:nth-child(3) { grid-column:auto; }
  #content .valores-grid { column-gap:2rem; }
}
/* Movil: las tres tarjetas en columna. La rejilla base son dos columnas y la
   tercera ocupa las dos; a 390px eso se salia 42px por la derecha. */
@media(max-width:900px){
  #mision .mision-grid { grid-template-columns:1fr; gap:1.25rem; }
  #mision .mision-grid > .card:nth-child(3) { grid-column:auto; }
}
#mision .card { padding:3rem; }
@media(max-width:600px){ #mision .card { padding:2rem; } }   /* 48px de padding comen media pantalla */
#mision .card h3 { font-size:1.25rem; font-weight:700; color:var(--text); }
#mision .card p { font-size:1rem; }
@media(max-width:600px){
  .milestone { flex-direction: column; gap: .75rem; }
  .milestone-year { font-size: 2.5rem; min-width: auto; }
}

/* ── Valores grid ── */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1rem;
  margin-top: 3.75rem;
}
@media(max-width:900px){ .valores-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .valores-grid { grid-template-columns: 1fr; } }

#valores .card { padding:2rem; padding-top:2.5rem; text-align:center; }
#valores .valor-card p { font-size:1rem; color:var(--text-muted); line-height:1.75; margin-bottom:1.25rem; }
.cierre-card p { font-size:1rem; }
.cierre-card { display:flex; flex-direction:column; }
.cierre-card .cta-link { margin-top:auto; white-space:nowrap; }   /* el enlace, siempre en una línea */
/* Cuatro tarjetas en una sola fila; en pantallas medias van de dos en dos. */
.cierre-grid { grid-template-columns:repeat(4,1fr); gap:1.25rem; }   /* 8px menos que el resto */
@media(max-width:1100px){ .cierre-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .cierre-grid { grid-template-columns:1fr; } }
#valores .valor-card strong {
  display: block;
  font-family: var(--title);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: .75rem;
}

/* ── Objetivos numerados ── */
.obj-list { list-style: none; counter-reset: obj; margin-top: 2rem; display: flex; flex-direction: column; gap: .85rem; }
.obj-list li {
  counter-increment: obj;
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.obj-list li::before {
  content: counter(obj, decimal-leading-zero);
  font-family: var(--title);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--green-dark);
  flex-shrink: 0;
  line-height: 1;
  padding-top: .1rem;
}

/* ── Redes / membresías ── */
.redes-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  row-gap: .95rem;
  column-gap: .95rem;
  margin-top: 2rem;
}
@media(max-width:600px){ .redes-grid { grid-template-columns: 1fr; } }
.red-item {
  background: rgba(255,255,255,0.5);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 10px 15px rgba(0,0,0,0.06), 0 30px 45px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius: .85rem;
  padding: .9rem 2.1rem .9rem 2.1rem;
  font-size: 1rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.red-item::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── Cierre storytelling ── */
.cierre {
  text-align: center;
  padding: 1rem 0;
}
.cierre .section-title { text-align: center; }
.cierre .body-text { text-align: center; }

/* La imagen se alinea solo con la lista; el titulo va en su propia fila. */
.objetivos-grid { grid-template-rows:auto auto; align-items:start; row-gap:40px !important; }
.objetivos-cabecera { grid-column:2; grid-row:1; }
.objetivos-cabecera .section-title { margin-bottom:0; }
.objetivos-grid .obj-list { grid-column:2; grid-row:2; margin-top:0; }
.objetivos-img { grid-column:1; grid-row:2; }
@media(max-width:900px){ .objetivos-grid { grid-template-rows:none; }
  .objetivos-cabecera, .objetivos-grid .obj-list, .objetivos-img { grid-column:1; grid-row:auto; } }
@media(min-width:901px) and (max-width:1440px){
}
@media(min-width:901px) and (max-width:1440px){ .cierre-grid { grid-template-columns:repeat(2,1fr); }
  #content .cierre-grid { column-gap:1.25rem; row-gap:1.25rem; }
  #content .valores-grid { grid-template-columns:repeat(3,1fr); column-gap:1rem; row-gap:1rem; }
  #content .redes-grid { grid-template-columns:1fr 1fr; justify-content:center; max-width:none; margin-left:auto; margin-right:auto; }
  #content .redes-grid .red-item { font-size:15px; }
  #content > section:has(.redes-grid) .section-header { margin-bottom:24px; }   /* menos aire hasta la descripcion */
  #content #valores .card { padding-left:28px; padding-right:28px; }   /* 12px mas */
  #content .cierre-card { padding-left:44px; padding-right:44px; }    /* 12px mas */
  /* Los tres datos, mas juntos: asi el rotulo de la ultima columna cabe en una linea. */
  #content .stats-row { column-gap:16px; }
  #content .stats-row .stat-block { padding-left:12px; padding-right:12px; }
  /* 40px mas de aire a cada lado de las dos aberturas al fondo. */
  #content > section:not(#hero):not(.vista-fondo):not(.cat-section):has(+ .vista-fondo) { padding-bottom:100px !important; }
  #content > .vista-fondo + section:not(#hero):not(.vista-fondo):not(.cat-section) { padding-top:100px !important; }
  /* Titulos de tarjeta y subtitulos de la cronologia, al mismo tamano. */
  #content .card h3, #content #mision .card h3 { font-size:18px; }
  #content .milestone-body h3 { font-size:18px; }
  /* Valores y "Aqui seguimos": cuatro por fila, saliendose al 80% de pantalla. */
  #content #valores .valor-card strong { font-size:18px; }
  #content .valores-grid, #content .cierre-grid { grid-template-columns:repeat(4,1fr);
    width:114.3%; max-width:none; position:relative; left:50%; transform:translateX(-50%); }
  #content #valores .valor-card { padding:50px 26px 42px; }   /* 10px mas a todo alrededor */
  #content .cierre-card { padding:32px 32px; }
  #content > section#mision, #content > section#valores { padding-top: calc(7.5rem - 40px); } }

/* Tablet pequena (601-900): el titulo de las tarjetas de mision y de la
   cronologia (milestone) crecian de vuelta a su tamano de escritorio por
   debajo de 901px. Mismos valores que ya usa tablet grande. */
@media(min-width:601px) and (max-width:900px){
  #content .card h3, #content #mision .card h3 { font-size:18px; }
  #content .milestone-body h3 { font-size:18px; }
}

/* Escritorio: la ultima seccion de esta pagina madre cierra con 240px. */
@media(min-width:1441px){
  #content > section:not(#hero):not(.vista-fondo):has(+ section.vista-fondo) { padding-bottom:120px !important; }
  #content > section:not(#hero):not(.vista-fondo):last-of-type { padding-bottom:240px !important; }
}

/* Escritorio: tarjetas de valores y de cierre. */
@media(min-width:1441px){
  #content #valores .valor-card { padding:32px 24px 24px; display:flex; flex-direction:column; justify-content:center; }
  #content #valores .valor-card p { margin-bottom:0; }
  #content .cierre-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #content .cierre-card { padding-left:24px; padding-right:24px; }
  #content .cierre-card .cta-link { font-size:20px; }
}

/* Movil: las ocho tarjetas de valores, en dos columnas.

   El ancho util por tarjeta baja de 319 a 154px, asi que hay que recortar el relleno
   interno y el cuerpo para que el texto siga entrando sin quedar en columnas de dos
   palabras. Los tamanos son los minimos que mantienen la lectura decente. */
@media(max-width:600px){
  /* La seccion HOY va tras una abertura al fondo; se le da el mismo aire superior que
     a las demas secciones en esa posicion (38 de base + 40). */
  #content > section:not(#hero):not(.vista-fondo):has(.hoy-quote){ padding-top:78px; }

  /* Valores: una columna, titulo en su propia linea manteniendo jerarquia sobre el
     cuerpo, texto centrado, y el mismo redondeo que las tarjetas de "Donde estamos"
     para que no parezcan capsulas. */
  #valores .valores-grid{ grid-template-columns:1fr; gap:10px; }
  #valores .card{ padding:16px 22px; text-align:center; border-radius:13.6px; }
  #content #valores .valor-card strong{
    display:block; font-size:19.8px; margin-bottom:.35rem;
  }
  #content #valores .valor-card p{ display:block; font-size:15px; line-height:1.6; }

  /* "Donde estamos": el listado de redes y registros es informacion de respaldo, no
     contenido principal, y a 16px se comia mas de mil pixeles de alto. */
  /* Mismos parametros de caja que las tarjetas de valores: relleno 16/22, separacion
     10px y el redondeo, que ya coincidia. El cuerpo se queda en 14px porque es
     informacion de respaldo. */
  #content .red-item{ font-size:14px; padding:16px 22px; border-radius:13.6px; }
  #content .redes-grid{ gap:10px; }
}