<style>
/* ── S2 VALIDACIÓN ── */
#validacion {
  padding:7.5rem 0;
  background: rgba(248,245,241,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align:center;
}
.validacion-title {
  font-family:var(--title);
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:400; color:var(--text); line-height:1.15;
  text-align:center; max-width:680px; margin:0 auto 2.5rem;
}
.validacion-text {
  font-family:var(--title);
  font-style:italic;
  font-size:1.475rem;   /* 2px más que el 1.35rem original */
  font-weight:300; line-height:1.65;
  color:var(--text-muted); max-width:680px; margin:0 auto;
}
.validacion-lema {
  font-family:var(--title);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  color:var(--green-dark);
  text-align:center;
  max-width:680px;
  margin:3.5rem auto 0;
}
.validacion-img {
  width:100%; height:540px; object-fit:cover; object-position:center top;
  border-radius:2.25rem; display:block; margin-top:calc(4rem + 40px);
  border:1px solid rgba(255,255,255,0.50);
  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);
}
/* Movil: el bloque de validacion bajaba de escritorio solo encogido por el clamp,
   con el cuerpo a 23,6px. Se reescala entero.
   El lema baja a 22px porque a 28,8px partia en dos lineas a 320px (necesita
   <=25,7px para caber, medido).
   La foto sale a sangre: rompe el padding del contenedor con margenes negativos y
   pierde el redondeo y los bordes laterales, que a ancho completo se leen como un
   fallo de maquetacion. */
/* La altura de esta abertura vivia en un style="" en linea, que gana a cualquier
   hoja de estilos: se saca aqui para poder ajustarla por media query sin !important. */
#abertura-validacion{ min-height:850px; }

@media(max-width:600px){
  .validacion-title{ font-size:24px; margin-bottom:1.75rem; }
  .validacion-text{ font-size:18px; line-height:1.6; }
  .validacion-lema{ font-size:22px; margin-top:2.5rem; }
  .validacion-img{ height:340px; }              /* 200px menos que en escritorio */
  #validacion{ padding-top:60px; }              /* la mitad de los 120 de escritorio */

  /* Estas dos secciones cierran con una imagen a sangre. Con padding inferior quedaba
     una franja del fondo glass entre la foto y la abertura; a cero, la imagen muere
     justo en el borde donde empieza la abertura al fondo.
     Los :not() replican la especificidad de la regla global de shared.css, que si no
     gana (ojo: cada :not() con un id suma un id). */
  #content > section#validacion:not(#hero):not(.vista-fondo),
  #content > section#quienes:not(#hero):not(.vista-fondo){
    padding-bottom:0;
  }


  /* Este llevaba 40px puestos a mano; la regla global de shared.css tiene mas
     especificidad, asi que hay que subirla aqui para conservarlos. */
  #content > section#puertas{ padding-top:40px; }

  /* La seccion que sigue a la abertura venia con 0 de padding superior. */
  #puertas{ padding-top:40px; }

  /* Tarjetas de #puertas: 1px menos en titulo y en cuerpo. */
  #puertas .puerta h3{ font-size:19.8px; }
  #puertas .puerta p{ font-size:15px; }

  .validacion-img{
    /* Se cancela el padding del contenedor (28px por lado) en vez de usar 100vw:
       vw incluye la barra de scroll y la imagen se iba 8px a la izquierda cuando
       la hay. Asi queda a ras del borde visible con barra y sin ella. */
    width:calc(100% + 56px); max-width:none;
    margin-left:-28px; margin-right:-28px;
    margin-top:3rem;
    border-radius:0; border-left:none; border-right:none;
  }
}

/* ── S3 PUERTAS ── */
#puertas {
  
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.puertas-header { text-align:center; margin-bottom:3.5rem; }
.puertas-header h2 {
  font-family:var(--title);
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:400; color:var(--text);
}
.puertas-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

/* Card — flexbox para alinear botón al fondo */
.puerta {
  position:relative;
  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.50);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  border-radius:1.5rem; padding:2.5rem 2rem;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  /* overshoot para dar rebote físico al escalar */
  transition: transform .45s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  .puerta:hover {
    transform: scale(1.01) translateY(-6px);
    z-index: 5;
    box-shadow: 0 20px 50px rgba(0,136,118,.14), inset 0 1px 0 rgba(255,255,255,0.8);
  }
}
}

.puerta-icon {
  width:77px; height:77px; border-radius:12px;
  background:rgba(89,178,166,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.5rem; flex-shrink:0;
}
.puerta-icon svg { width:38px; height:38px; color:var(--green-dark); }
.puerta h3 { font-family:var(--title); font-size:1.3rem; font-weight:400; color:var(--text); margin-bottom:1rem; }
.puerta p { font-size:1rem; color:var(--text-muted); line-height:1.75; flex:1; }

/* Botón en la parte inferior, alineado en las 3 tarjetas */
.puerta-btn {
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  margin-top:1.75rem;
  background:transparent; color:var(--green-dark);
  border:1.5px solid var(--green-dark);
  font-family:var(--body); font-weight:600; line-height:1; font-size:1rem;
  padding:1rem 2rem; height:52px; box-sizing:border-box; border-radius:100px; width:200px; align-self:center;
  text-decoration:none; cursor:pointer;
  transition: background .2s, color .2s;
}
@media (min-width:601px){
.puerta-btn:hover {
  background:var(--green-dark); color:#fff;
}
}

.puerta-btn:active { transform: scale(0.96); }

/* ── S4 QUIÉNES ── */
#quienes {
  padding:7.5rem 0;
  background: rgba(248,245,241,0.44);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.quienes-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:5rem; row-gap:0; align-items:center; }
/* Cabecera (tag+titulo+descripcion) y cuerpo (lista+cta) van en la misma columna
   (izquierda) y las cifras a la derecha centradas contra el conjunto: reproduce
   el bloque unico que habia antes. El ultimo parrafo de la cabecera pierde su
   margen inferior porque ahora es un item de grid aparte (los margenes no
   colapsan entre items): el hueco hasta la lista lo pone el margen superior de
   .q-list, igual que colapsaban antes al vivir en el mismo contenedor.
   En tablet grande la cabecera pasa a ocupar el ancho completo, centrada (ver
   mas abajo). */
.quienes-cabecera { grid-column:1; grid-row:1; }
.quienes-cabecera > .q-text:last-child { margin-bottom:0; }
.quienes-cuerpo { grid-column:1; grid-row:2; }
.quienes-grid .q-stats { grid-column:2; grid-row:1 / span 2; align-self:center; }
#quienes h2 { font-family:var(--title); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:400; color:var(--text); margin-bottom:1.5rem; line-height:1.2; }
.q-text { font-size:clamp(1rem,1.4vw,1.15rem); color:#3F5041; line-height:1.8; margin-bottom:1rem; }
.q-list { list-style:none; margin:2rem 0 1.75rem; }
.q-list li { display:flex; align-items:flex-start; gap:.75rem; font-size:1rem; color:var(--text-muted); padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.66); }
.q-list li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); margin-top:.55rem; flex-shrink:0; }
.q-cta { display:inline-flex; align-items:center; gap:8px; color:var(--green-hover); font-weight:600; font-size:.9rem; text-decoration:none; margin-top:2rem; transition:gap .2s; }
@media (min-width:601px){
.q-cta:hover { gap:14px; }
}

.q-stats { text-align:right; }
.q-stats .stat-num { font-size:clamp(2.8rem,5vw,4.5rem); text-shadow:0 2px 8px rgba(0,0,0,0.15); }
.q-stats .stat-label { font-size:.875rem; color:var(--text-muted); margin-bottom:2rem; display:block; }

/* ── S5 ACTIVIDADES ── */
#actividades {
  padding:7.5rem 0;
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.act-container { max-width:1600px; }
.actividades-sub1 { text-align:center; margin-bottom:6rem; }
.actividades-sub-title { font-family:var(--title); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:400; color:var(--text); margin-bottom:2rem; }
.iconos-grid { display:grid; grid-template-columns:repeat(3,1fr); row-gap:3.5rem; column-gap:2rem; margin-top:96px; margin-bottom:240px; }
.icono-item { display:flex; flex-direction:column; align-items:center; text-align:center; }
.icono-item img { width:100%; max-width:331px; height:auto; display:block; margin:0 auto 1.25rem; }
.icono-item .icono-tag { margin-bottom:0; align-self:center; text-align:center; max-width:100%;
  background:rgba(89,178,166,.123); backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid rgba(89,178,166,.28); box-shadow:none; }
@media(min-width:1441px){ #content .icono-item .icono-tag { font-size:.7rem !important; padding:.4rem 1.4rem; } }.actividades-header { text-align:center; margin-bottom:6rem; }
.actividades-header h2 { font-family:var(--title); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:400; color:var(--text); }
.act-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.act-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:16px;
  border-radius:1.5rem;
  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);
  transition: transform .45s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}
.act-card:active { transform: scale(0.98); }
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  .act-card:hover {
    transform: scale(1.01) translateY(-6px);
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 16px 24px rgba(0,136,118,.09), 0 40px 60px rgba(0,136,118,.12);
  }
}
}

.act-img {
  height:230px; flex-shrink:0;
  background: linear-gradient(135deg, rgba(89,178,166,.22), rgba(0,136,118,.15));
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:rgba(255,255,255,.5);
  border-radius:1.25rem;
  border:1px solid rgba(255,255,255,0.85);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.85);
  overflow:hidden;
}
.act-img img { width:100%; height:100%; object-fit:cover; display:block; }
.act-body {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:0 .75rem .75rem;
}
.act-tag { align-self:flex-start; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:rgba(89,178,166,.1); padding:.375rem .75rem; border-radius:100px; display:inline-block; margin-bottom:.75rem; }
.act-card h3 { font-family:var(--title); font-size:1.25rem; font-weight:400; color:var(--text); line-height:1.45; margin-bottom:.75rem; }
.act-card p { font-size:1rem; color:var(--text-muted); line-height:1.65; margin-bottom:2.5rem; }
.act-card a {
  margin-top:auto;
  margin-bottom:16px;
  align-self:center;
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-size:1rem; font-weight:600; line-height:1;
  color:var(--green-dark);
  background:transparent;
  border:1.5px solid var(--green-dark);
  border-radius:100px;
  padding:1rem 2rem;
  height:52px; box-sizing:border-box;
  width:200px;
  text-decoration:none;
  transition: background .2s, color .2s, transform .15s var(--ease-out-strong);
}
@media (min-width:601px){
.act-card a:hover { background:var(--green-dark); color:#fff; }
}

.act-card a:active { transform:scale(0.97); }

/* ── S6 COLABORADORES ── */
#colaboradores {
  padding:7.5rem 0;
  background: rgba(248,245,241,0.42);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* ── CONTACTO (home) ── */
.contacto-home-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.contacto-home-inner { text-align:left; }
.contacto-home-text { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text-muted); line-height:1.8; margin:1.5rem 0 2.25rem; }
.contacto-home-details { display:flex; flex-direction:column; gap:.6rem; margin-bottom:40px; font-size:1rem; color:var(--text); }
.contacto-home-details span { display:flex; align-items:center; justify-content:flex-start; gap:.6rem; }
.contacto-home-details svg { width:27px; height:27px; color:var(--green-dark); flex-shrink:0; }
.contacto-home-details a { color:var(--green-dark); text-decoration:none; transition:color .2s; }
@media (min-width:601px){
.contacto-home-details a:hover { color:var(--green); text-decoration:underline; }
}

.contacto-home-img { width:100%; height:100%; min-height:460px; object-fit:cover; object-position:center; border-radius:1.25rem; border:1px solid rgba(255,255,255,0.50); 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); display:block; }
@media(max-width:900px) {
  .contacto-home-grid { grid-template-columns:1fr; gap:2.5rem; }
  .contacto-home-img { min-height:280px; order:-1; }
}
/* ── S7 NOTICIAS ── */
#noticias {
  
  background: rgba(255,255,255,0.45);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.noticias-head { position:relative; text-align:center; margin-bottom:6rem; }
.noticias-footer { position:absolute; right:0; bottom:.4rem; }
.noticias-head h2 { font-family:var(--title); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:400; color:var(--text); }
.noticias-sub { max-width:680px; margin:1.25rem auto 0; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text-muted); line-height:1.75; }
.noticias-footer { display:flex; justify-content:flex-end; }
.noticias-footer a { font-size:.875rem; font-weight:600; color:var(--green-dark); text-decoration:none; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; transition:gap .2s; }
@media (min-width:601px){
.noticias-footer a:hover { gap:14px; }
}

.noticias-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.noticia {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:32px;
  padding:16px;
  border-radius:1.5rem;
  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);
  transition: transform .45s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow .35s cubic-bezier(0.16,1,0.3,1);
}
.noticia:active { transform: scale(0.98); }
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  .noticia:hover {
    transform: scale(1.01) translateY(-6px);
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 16px 24px rgba(0,136,118,.09), 0 40px 60px rgba(0,136,118,.12);
  }
}
}

.noticia-img {
  height:230px;
  flex-shrink:0;
  background: linear-gradient(135deg, rgba(89,178,166,.22), rgba(0,136,118,.15));
  display:flex; align-items:center; justify-content:center;
  font-size:2.5rem; color:rgba(255,255,255,.5);
  border-radius: 1.25rem;
  border:1px solid rgba(255,255,255,0.85);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.85);
  overflow:hidden;
}
.noticia-img img { width:100%; height:100%; object-fit:cover; display:block; }
.noticia-img-logo { background:rgba(255,255,255,0.55); }
.noticia-img-logo img { width:60%; height:60%; object-fit:contain; }
.noticia-body {
  flex:1;
  display:flex;
  flex-direction:column;
  padding:0 .75rem .75rem;
}
.noticia-cat { align-self:flex-start; font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:rgba(89,178,166,.1); padding:.375rem .75rem; border-radius:100px; display:inline-block; margin-bottom:.75rem; }
.noticia h3 { font-family:var(--title); font-size:1rem; font-weight:400; color:var(--text); line-height:1.45; margin-bottom:.75rem; }
.noticia-fecha { font-size:.8rem; color:var(--text-muted); }

/* ── S8 HAZTE SOCIO ── */
#hazte-socio {
  padding:7.5rem 0;
  background: rgba(248,245,241,0.44);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border-top: 1px solid rgba(255,255,255,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.socio-inner { max-width:820px; margin:0 auto; text-align:center; padding:0 2rem; }
#hazte-socio blockquote { font-family:var(--title); font-style:italic; font-size:clamp(1.275rem,2.2vw,1.625rem); font-weight:300; color:var(--green-dark); line-height:1.65; margin-bottom:1.5rem; }
.socio-text { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text-muted); line-height:1.75; margin-bottom:2.5rem; }
.socio-ctas { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ── RESPONSIVE HOME ── */
@media(max-width:900px) {
  .puertas-grid, .act-grid, .noticias-grid { grid-template-columns:1fr; }
  .iconos-grid { grid-template-columns:repeat(2,1fr); }
  .quienes-grid { grid-template-columns:1fr; column-gap:0; row-gap:3rem; }
  .quienes-cabecera, .quienes-cuerpo, .quienes-grid .q-stats { grid-column:1; grid-row:auto; }
  .q-stats { text-align:left; }
}
/* Tablet pequena (601-900): estas siete secciones llevan su propio
   "#id{padding:7.5rem 0}" (120px) sin reduccion propia en esta franja -solo
   se reducia para portatil (901-1440) y para movil (<=600), aqui se colaba
   el valor de escritorio-. El resto de la web ya usa 3.875rem (62px) en esta
   misma franja (.section-light/.section-warm): se igualan a ese valor. La
   hero no se toca. */
@media(min-width:601px) and (max-width:900px){
  #content > section#validacion,
  #content > section#puertas,
  #content > section#quienes,
  #content > section#actividades,
  #content > section#colaboradores,
  #content > section#noticias,
  #content > section#hazte-socio{
    padding-top:3.875rem;
    padding-bottom:3.875rem;
  }
}
@media(max-width:600px) {
  .noticias-head { flex-direction:column; align-items:flex-start; gap:1rem; }
  .socio-ctas { flex-direction:column; }
  .q-stats { max-width:60%; margin-left:auto; margin-right:auto; text-align:center; }
}

@media (prefers-reduced-motion: reduce) {
  .act-card:hover, .puerta:hover, .noticia:hover, .noticia:active,
  .puerta-btn:active, .act-card a:active {
    transform: none;
  }
}

/* Pista de parallax: aparece en la abertura de fondo, se retira al primer movimiento */
.orbit-hint {
  position:absolute; left:50%; bottom:3rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:1.05rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.3);
  pointer-events:none; opacity:0; transition:opacity 1.4s ease;
}
.orbit-hint.visible { opacity:.7; }
.orbit-hint.done { opacity:0; }
.orbit-hint-row {
  display:flex; align-items:center; gap:.85rem;
  animation:orbit-sway 3.4s ease-in-out infinite;
}
.orbit-hint-line {
  width:150px; height:1px;
  background:linear-gradient(to right,transparent,#fff,transparent);
}
.orbit-hint-arrow { width:34px; height:34px; flex-shrink:0; }
.orbit-hint-arrow.flip { transform:scaleX(-1); }
@keyframes orbit-sway {
  0%,100% { transform:translateX(-16px); opacity:.35; }
  50%     { transform:translateX(16px);  opacity:1;   }
}
/* Sin ratón no hay efecto que anunciar; con reduced-motion el parallax está desactivado */
@media (hover:none), (pointer:coarse) { .orbit-hint { display:none; } }
@media (prefers-reduced-motion:reduce) { .orbit-hint { display:none; } }
/* En movil y en las dos tablets tampoco: el mensaje dice "Mueve el raton" y ahi no
   hay raton ni hover que aplique el parallax. Las dos reglas de arriba ya lo ocultan
   en un tactil real, pero no en una ventana de escritorio estrecha, que es donde se
   revisan movil y tablet. Va aqui y no en los bloques de mas arriba porque
   .orbit-hint se define despues y, a igual especificidad, gana la ultima. */
@media(max-width:1100px) { .orbit-hint { display:none; } }



/* Contacto: la imagen se alinea solo con el cuerpo; titulo arriba y boton abajo quedan fuera. */
.contacto-home-grid { grid-template-rows:auto auto auto; align-items:start; row-gap:2rem; }
.contacto-home-cabecera { grid-column:1; grid-row:1; }
.contacto-home-inner { grid-column:1; grid-row:2; }
.contacto-home-btn { grid-column:1; grid-row:3; justify-self:start; }
.contacto-home-img { grid-column:2; grid-row:2; min-height:0; height:100%; }
@media(max-width:900px){
  .contacto-home-grid { grid-template-rows:none; }
  .contacto-home-cabecera, .contacto-home-inner, .contacto-home-btn, .contacto-home-img { grid-column:1; grid-row:auto; }
  .contacto-home-img { min-height:280px; }
}

/* ── Ajustes para portátiles (≤1440px) ── */
@media(min-width:1441px){ .noticias-footer-abajo { display:none; } }
@media(min-width:901px) and (max-width:1440px){
  #content .act-container { max-width:75vw; }
  /* 40px mas de aire a cada lado de la abertura que sigue a la validacion. */
  #content > section#validacion:not(#hero):not(.vista-fondo):not(.cat-section) { padding-bottom:100px !important; }
  #content > section#puertas:not(#hero):not(.vista-fondo):not(.cat-section) { padding-top:100px !important; }
  /* Mismo aire en la segunda abertura, entre "Mas de 20 anos" y "Que podemos hacer por ti". */
  #content > section#quienes:not(#hero):not(.vista-fondo):not(.cat-section) { padding-bottom:100px !important; }
  #content > section#actividades:not(#hero):not(.vista-fondo):not(.cat-section) { padding-top:100px !important; }

  .puerta { padding:2.5rem 28px; align-items:flex-start; text-align:left; }   /* 12px mas a los lados */
  /* Icono y boton centrados; el texto sigue a la izquierda. */
  #content .puerta .puerta-icon, #content .puerta .puerta-btn { align-self:center; }
  #content .puerta h3 { font-size:18px; }
  #content .puertas-grid { column-gap:20px; row-gap:32px; }   /* 8px mas */
  #content .puerta .puerta-icon { width:93px; height:93px; }        /* 50% mas */
  #content .puerta .puerta-icon svg { width:45px; height:45px; }
  #content .puerta h3 { font-size:17px; }
  #content .puerta p { font-size:15px !important; }
  /* "Como acompanamos": iconos un 25% menores y su etiqueta 2px mas pequena. */
  #content .icono-item img { max-width:clamp(157px,17.25vw,248px) !important; }
  #content .icono-item .icono-tag { font-size:11px !important; }
  .puerta-icon { width:62px; height:62px; }
  .puerta-icon svg { width:30px; height:30px; }
  .puerta h3 { font-size:1.05rem; }
  .puerta p { font-size:.9rem; }
  .puerta-btn { font-size:.85rem; padding:.75rem 1.25rem; height:44px; width:170px; align-self:flex-start; margin-top:1.25rem; }

  .iconos-grid { margin-top:64px; margin-bottom:120px; }

  #content .act-grid { grid-template-columns:repeat(2,1fr); column-gap:1.5rem; row-gap:1.5rem; }
  /* Noticias: las cuatro en una fila, mas pegadas al texto, y el enlace debajo. */
  /* La fila de noticias ocupa el 80% de la pantalla; el enlace de abajo la acompana
     para terminar justo donde termina la ultima tarjeta. */
  #content .noticias-grid { grid-template-columns:repeat(4,1fr); column-gap:16px; row-gap:16px; margin-top:-20px;
    width:114.3%; max-width:none; position:relative; left:50%; transform:translateX(-50%); }
  #content .noticias-footer-abajo { width:114.3%; max-width:none; position:relative; left:50%; transform:translateX(-50%); }
  #content > section#noticias:not(#hero):not(.vista-fondo):not(.cat-section) { padding-bottom:120px !important; }   /* 60px mas hasta colabora */
  #content > section#hazte-socio:not(#hero):not(.vista-fondo):not(.cat-section) { padding-top:40px !important; }   /* la seccion sube 20px */
  #content .noticias-head .noticias-footer { display:none; }
  #content .noticias-footer-abajo { display:flex; justify-content:flex-end; margin-top:2rem; }
  /* Acciones ADANER: titulo mayor y mas aire lateral solo en el texto. */
  #content .act-card h3 { font-size:18px; }
  /* Contacto: titulo y cuerpo con el mismo aire que el resto de secciones (24px). */
  #content .contacto-home-grid { row-gap:0; }
  #content .contacto-home-text { margin-top:4px; }
  #content .contacto-home-btn { margin-top:2rem; }
  #content .act-body { padding-left:24px; padding-right:24px; }
  .act-card, .noticia { gap:20px; padding:12px; }
  .act-card h3 { font-size:1.05rem; }
  .act-card p { font-size:.9rem; margin-bottom:1.5rem; }
  .act-card a { font-size:.85rem; padding:.75rem 1.25rem; height:44px; width:170px; }
  .noticia h3 { font-size:.95rem; }
  .noticia-img { height:180px; }

}

/* Tablet pequena (601-900): las tarjetas de "puertas" y "acciones ADANER"
   crecian de vuelta a su tamano de escritorio en cuanto se bajaba de 901px
   (el bloque de arriba solo llega hasta 901). Mismos valores que ya usa
   tablet grande, para que titulo, cuerpo y boton no den un salto al pasar de
   una tablet a la otra. */
@media(min-width:601px) and (max-width:900px){
  #content .puerta h3 { font-size:17px; }
  #content .puerta p { font-size:15px !important; }
  #content .puerta-btn { font-size:.85rem; padding:.75rem 1.25rem; height:44px; width:170px; }
  #content .act-card h3 { font-size:18px; }
  #content .act-card a { font-size:.85rem; padding:.75rem 1.25rem; height:44px; width:170px; }
}

/* Tablet grande (901-1100): "Quienes somos" y "Contacto" separan su cabecera
   (tag + titulo, y en quienes tambien la descripcion) en una sola columna
   centrada y con el mismo ancho que el resto de secciones. Debajo, cada una
   mantiene sus dos columnas: en quienes, la lista pasa a compartir fila con
   las cifras; en contacto, el cuerpo de texto sigue con la imagen como ya
   estaba. */
@media(min-width:901px) and (max-width:1100px){
  /* row-gap a 3.5rem (56px): mismo hueco cabecera->contenido que el resto de
     secciones de la web (ver regla equivalente en shared.css). */
  #content .quienes-grid { align-items:start; row-gap:3.5rem; }
  #content .quienes-cabecera { grid-column:1 / -1; grid-row:1; text-align:center; }
  #content .quienes-cabecera > .q-text:last-child { margin-bottom:0; }
  #content .quienes-cuerpo { grid-column:1; grid-row:2; }
  #content .quienes-cuerpo .q-list { margin-top:0; }
  #content .quienes-grid .q-stats { grid-column:2; grid-row:2; align-self:start; }

  /* .contacto-home-cabecera no llevaba margen propio (en desktop su hueco lo
     ponia el row-gap:0 de .contacto-home-grid junto al resto de la rejilla);
     al pasar a fila propia hace falta el mismo hueco que las demas cabeceras. */
  #content .contacto-home-cabecera { grid-column:1 / -1; grid-row:1; text-align:center; margin-bottom:3.5rem; }
}

/* Tablet pequena (601-900): mismo criterio que tablet grande para "Quienes
   somos" -la regla de <=900px de mas arriba lo dejaba todo apilado en una
   columna-. Cabecera (tag+titulo+descripcion) centrada a ancho completo;
   debajo, la lista+enlace en una columna y las cifras en la otra. El enlace
   con flecha no se centra: se queda pegado a la izquierda, dentro de su
   columna, como ya estaba. */
@media(min-width:601px) and (max-width:900px){
  #content .quienes-grid { grid-template-columns:1fr 1fr; align-items:start; row-gap:3.5rem; }
  #content .quienes-cabecera { grid-column:1 / -1; grid-row:1; text-align:center; }
  #content .quienes-cabecera > .q-text:last-child { margin-bottom:0; }
  #content .quienes-cuerpo { grid-column:1; grid-row:2; }
  #content .quienes-cuerpo .q-list { margin-top:0; }
  #content .quienes-grid .q-stats { grid-column:2; grid-row:2; align-self:start; text-align:right; }
  /* La lista, al mismo tamano que la etiqueta de las cifras de al lado
     (.stat-label, .875rem = 14px): la regla general de lectura de shared.css
     la dejaba en 16px. */
  #content .quienes-cuerpo .q-list li{ font-size:.875rem; }
}

/* Escritorio: ticker de colaboradores con mas aire y logos un 20% mayores. */
@media(min-width:1441px){
  .noticias-sub { max-width:1040px; }
  #content > section#colaboradores:not(#hero):not(.vista-fondo) { padding-top:140px !important; padding-bottom:140px !important; }
  #colaboradores .colab-track { gap:6.5rem; }
  #colaboradores .colab-track img { height:106px; }
}

/* 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; }
}
/* Iconos en movil. Va al final del <style> a proposito: .iconos-grid y .icono-tag se
   definen mas arriba en este mismo archivo y, a igual especificidad, gana la ultima. */
@media(max-width:600px){
  .iconos-grid{
    row-gap:1.75rem;        /* la mitad de 3,5rem */
    margin-bottom:60px;     /* traia 240px, que era el hueco enorme hasta "Acciones ADANER" */
  }
  /* Solo el texto verde: fuera el fondo verdoso, el borde, la sombra y el desenfoque
     que hereda de .hero-tag. */
  .icono-item .icono-tag{
    background:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    border:none;
    box-shadow:none;
    padding:0;
  }

  /* Noticias en carrusel horizontal.

     Se usa scroll nativo, no JavaScript: el arrastre con el dedo, la inercia y el
     teclado ya vienen dados por el navegador, y no hay nada que se rompa si falla un
     script. scroll-snap hace que cada tarjeta quede encajada al soltar.

     El carril sale a sangre (cancelando los 28px del contenedor) y recupera ese padding
     por dentro: asi la siguiente tarjeta asoma por el borde derecho e invita a arrastrar
     en vez de parecer que la lista se corta. */
  .noticias-grid{
    display:flex;
    overflow-x:auto;
    gap:16px;
    scroll-snap-type:x mandatory;
    /* Sin esto el snap alinea la primera tarjeta con el borde del carril y se come
       los 16px de padding: arrancaba con scrollLeft=16 y la tarjeta pegada al borde. */
    scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Sale a sangre cancelando los 28px del contenedor y se pone su propio padding:
       16px a los lados para separar la primera tarjeta del borde, y aire arriba y
       abajo para que la sombra y el borde de las tarjetas no queden recortados por
       el overflow del carril. */
    margin-left:-28px; margin-right:-28px;
    padding:14px 16px 34px;
  }
  .noticias-grid::-webkit-scrollbar{ display:none; }
  .noticias-grid > .noticia{
    /* El asomo de la segunda tarjeta debe ser el 10% de su ancho. Con 16px de
       margen y 16px de hueco: V - 32 = 1,10 * W, o sea W = 90,9% del ancho
       interior del carril. */
    flex:0 0 90.9%;
    scroll-snap-align:start;
  }
  /* "Ver todas" existe en la cabecera y en el pie; en movil solo debajo, alineado a
     la derecha y a 16px del borde de pantalla, igual que el carril del carrusel: se
     cancelan los 28px del contenedor y se reponen 16 por dentro. */
  .noticias-head .noticias-footer{ display:none; }
  .noticias-footer-abajo{
    /* Hereda position:absolute de .noticias-footer, que lo anclaba al fondo de la
       seccion; en movil tiene que fluir justo debajo del carrusel. */
    position:static;
    display:flex;
    justify-content:flex-end;
    margin-top:1.75rem;
    margin-right:-28px;
    padding-right:16px;
  }

  /* La mariposa va detras del boton en el HTML, pero un order:-1 la adelantaba y
     salia la primera de la seccion. Se devuelve al orden del documento. */
  .contacto-home-img{
    order:0;
    /* La rejilla ya separa 32px por row-gap; estos 8 completan los 40 pedidos entre
       el boton y la mariposa, sin tocar el hueco de las otras filas. */
    margin-top:8px;
  }
}
</style>
