.glass-card { -webkit-backdrop-filter: blur(22px) saturate(200%); backdrop-filter: blur(22px) saturate(200%); }
.colab-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
}
.colab-logo-item {
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(22px) saturate(200%);
  backdrop-filter: blur(22px) saturate(200%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 1rem;
  padding: 1.25rem 2rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  min-width: 140px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.colab-logo-item img {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}
.colab-ticker {
  overflow: hidden;
  width: 100%;
  margin-top: 3rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.colab-ticker-track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: colab-scroll-right 40s linear infinite;
}
@media (min-width:601px){
.colab-ticker:hover .colab-ticker-track { animation-play-state: paused; }
}

@keyframes colab-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0%); }
}
@media (prefers-reduced-motion: reduce) {
  .colab-ticker-track { animation: none; }
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1.5rem;
  margin-top: 2.5rem;
}
.impact-card {
  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,.05), 0 10px 15px rgba(0,0,0,.06), 0 30px 45px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.6);
  border-radius: 1.25rem;
  padding: 2rem;
}
.impact-icon {
  width: 72px;
  height: 72px;
  background: rgba(89,178,166,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.impact-icon svg { width: 36px; height: 36px; color: var(--green-dark); }
.mini-icon {
  width: 60px;
  height: 60px;
  background: rgba(0,136,118,0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-icon svg { width: 30px; height: 30px; color: var(--green-dark); }
.impact-card h3 {
  font-family: var(--title);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: .6rem;
}
.impact-card p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.colab-quote {
  background: rgba(89,178,166,.12);
  border-left: 3px solid var(--green);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.04);
  border-radius: 0 1rem 1rem 0;
  padding: 2rem 2.5rem;
  margin: 2.5rem 0 0;
}
.colab-quote blockquote {
  font-family: var(--title);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: .75rem;
}
.colab-quote cite {
  font-size: .85rem;
  color: var(--green-dark);
  font-weight: 600;
  font-style: normal;
}
@media(max-width:600px){
  .impact-grid { grid-template-columns:1fr; }
  .practicums-grid { grid-template-columns:1fr !important; }
  .voluntariado-grid { grid-template-columns:1fr !important; }
}

.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; }

.titulo-actividades { font-family:var(--title); font-size:1.5rem; font-weight:400; color:var(--text); margin:3.5rem 0 0; text-align:center; }
.voluntariado-grid { grid-template-columns:repeat(3,1fr); }
/* El bloque "que ofrece ADANER" respira respecto a las tarjetas. */
.bloque-que-ofrece { margin-top:160px; }
.bloque-que-ofrece .section-tag { display:block; margin-bottom:.85rem; }
/* En portatiles esta pagina mantiene su propio ritmo. */
@media(min-width:901px) and (max-width:1440px){
  #content > section:not(#hero):not(.vista-fondo) { padding-top:80px !important; padding-bottom:80px !important; }
  #content > section:not(#hero):not(.vista-fondo)#cta-socio { padding-top:40px !important; }
  #content > section:not(#hero):not(.vista-fondo)#faq { padding-bottom:180px !important; }
}


/* La ultima seccion cierra con 100px mas de aire. */

/* El boton de voluntariado, centrado en el hueco entre bloque y galeria. */
.boton-voluntariado { margin-top:100px !important; margin-bottom:0 !important; }
.cabecera-galeria { margin-top:100px !important; }

/* ── Portátiles (≤1440px) ── */
@media(min-width:901px) and (max-width:1440px){
  #content .boton-voluntariado { margin-top:100px !important; margin-bottom:0; }
  #content .cabecera-galeria { margin-top:100px !important; }
  #content #cta-socio .section-title { font-size:clamp(1.2rem,2.1vw,2.1rem); font-weight:400; }
  #content #cta-socio blockquote { font-size:clamp(1rem,1.6vw,1.45rem); }
  #content #gracias-colab .section-header { margin-bottom:20px; }
  #content #gracias-colab > .container > .body-text { text-align:center; max-width:46rem; margin-left:auto; margin-right:auto; }
  #content .impact-grid { column-gap:20px; row-gap:20px; }   /* 8px mas */
  #content .section-header + .body-text, #content #gracias-colab .body-text { margin-left:auto; margin-right:auto; }
  #content #voluntariado .img-ph-icon { height:clamp(360px,40vw,504px) !important; }

  #content .impact-card { padding:2rem 1.5rem; }
  #content .impact-card h3 { font-size:clamp(1rem,1.06vw,1.15rem); }
  #content .impact-card p { font-size:clamp(.9rem,1.27vw,1rem); }
  #content .impact-icon { width:58px; height:58px; }
  #content .impact-icon svg { width:29px; height:29px; }
  #content .colab-quote blockquote { font-size:clamp(1rem,1.5vw,1.25rem); }
  /* Todos los titulos de tarjeta de la pagina, al mismo tamano. */
  #content .card h3, #content .impact-card h3, #content .tca-card h3 { font-size:18px; }
  /* Un solo tamano para todos los titulos de seccion (la hero y el subtitulo
     de actividades del voluntariado se quedan como estan). */
  #content #cta-socio .section-title,
  #content #colaboradores h2 { font-size:clamp(1.5rem,2.9vw,2.4rem); }
}

/* Tablet pequena (601-900): el titulo de las tarjetas de impacto (y las de
   voluntariado, que comparten .impact-card) crecia de vuelta a su tamano de
   escritorio por debajo de 901px. Mismo valor que ya usa tablet grande. */
@media(min-width:601px) and (max-width:900px){
  #content .impact-card h3 { font-size:18px; }
}

/* Escritorio: el icono de voluntariado, un 30% mayor. */
@media(min-width:1441px){
  #content #voluntariado .img-ph-icon { height:clamp(390px,42.9vw,546px) !important; }
}

/* Escritorio: el bloque de actividades del voluntariado baja 40px. */
@media(min-width:1441px){
  #content .titulo-actividades { margin-top:calc(3.5rem + 40px); }
  #content .titulo-actividades { font-size:clamp(1.15rem,1.7vw,1.5rem); }
  #content .voluntariado-grid { margin-top:calc(1.75rem + 24px) !important; }
}

/* Cita destacada de hazte socio: regular y en cursiva. */
#content #cta-socio blockquote { font-weight:300; font-style:italic; }

/* Escritorio: el boton respira 40px mas respecto del texto anterior. */
@media(min-width:1441px){
  #content #cta-socio .cta-socio-text { margin-bottom:5rem; }
}

/* Escritorio: descripcion centrada bajo el titulo y ticker igual que en la home. */
@media(min-width:1441px){
  #content #gracias-colab > .container > .body-text { text-align:center; max-width:1000px; margin-left:auto; margin-right:auto; }
  #content > section#colaboradores:not(#hero):not(.vista-fondo) { padding-top:140px !important; padding-bottom:140px !important; }
  #content #colaboradores .colab-track { gap:6.5rem; }
  #content #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; }
}

/* Movil: mismos criterios que en las paginas anteriores. */
@media(max-width:600px){
  /* Seccion tras la abertura al fondo: 38 de base mas 40 de aire, como en Personas
     afectadas, Quienes somos y Sociedad. */
  #content > section#voluntariado:not(#hero):not(.vista-fondo){ padding-top:78px; }

  /* Icono de seccion, igual que en Sociedad: abre el bloque, un 25% mas pequeno y a
     56px del texto. El contenedor traia su altura en un style="" del HTML y dejaba
     espacio muerto alrededor del icono, de ahi el !important. */
  #content .two-col > div:has(img[src*="icono"]){ order:-1; margin-bottom:16px; }
  #content .two-col .img-ph{ height:auto !important; line-height:0; }
  #content .two-col .img-ph img{ width:75%; height:auto; margin:0 auto; display:block; }
  #content .two-col .btn-outline{ justify-self:center; }

  /* Tarjetas de impacto: los tamanos del resto de la web. El titulo baja a 18 y el
     cuerpo a 15, manteniendo la jerarquia. Los .impact-card no entraban en las reglas
     globales de shared.css porque no llevan la clase .card. */
  #content .impact-card h3{ font-size:18px; }
  #content .impact-card p,
  #content .impact-card li{ font-size:15px; }
  #content .impact-card svg{ width:28.8px; height:28.8px; }
  #content .impact-grid{ gap:10px; }

  /* El boton no debe estirarse al ancho de la columna como un elemento de rejilla. */
  #content #cta-socio .btn-primary{
    justify-self:center; align-self:center; width:max-content; max-width:100%;
  }

  /* Cita destacada sobre el recuadro verde. */
  #content .colab-quote blockquote{ font-size:16px; }

  /* Foto de voluntariado a sangre, misma altura y sin esquinas redondeadas.
     Se cancelan los 28px de padding del contenedor en lugar de usar 100vw, que
     incluiria la barra de scroll y dejaria la imagen descuadrada. */
  #content #voluntariado img[src*="voluntarios.webp"]:not([src*="icono"]){
    width:calc(100% + 56px) !important; max-width:none !important;
    margin-left:-28px; margin-right:-28px;
    border-radius:0 !important;
  }
  #content #voluntariado .boton-voluntariado{ margin-top:60px !important; }

  /* Aire alrededor de la foto de voluntariado: la mitad por arriba (los 160px venian
     en un style= del HTML) y 60px mas por abajo, que es el row-gap de la rejilla. */
  #content #voluntariado .bloque-que-ofrece{ margin-top:80px !important; }
  #content #voluntariado .bloque-que-ofrece .two-col{ row-gap:100px; }
}