.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; }
.niveles-prevencion { margin-top:40px; }
/* Cada nivel, en dos columnas: el rótulo a la izquierda y su descripción a la derecha. */
.niveles-prevencion li { display:grid; grid-template-columns:15rem 1fr; column-gap:40px; align-items:baseline; }
.niveles-prevencion li::before { display:none; }
@media(max-width:600px){ .niveles-prevencion li { grid-template-columns:1fr; row-gap:.35rem; } }
/* Tarjetas de "otras formas de ayudar": icono, etiqueta, texto y botón al pie. */
.ayuda-grid { grid-template-columns:repeat(3,1fr); }
.ayuda-card { display:flex; flex-direction:column; }
.ayuda-card .tag { align-self:flex-start; margin:.25rem 0 .85rem; }
.ayuda-card .bloque-icon { margin-bottom:2.75rem; }   /* 24px más de aire tras el icono */
.ayuda-card { padding-bottom:2.5rem; padding-left:1.5rem; padding-right:1.5rem; }
.ayuda-card:active { transform:scale(.98); }
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  .ayuda-card:hover { transform:scale(1.01) translateY(-6px); 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); }
}
}

.ayuda-card p { flex:1; }
.ayuda-card .btn-outline { align-self:center; margin-top:calc(1.5rem - 12px); }
@media(max-width:900px){ .ayuda-grid { grid-template-columns:1fr; } }
/* Difusion: mismo formato que las tarjetas de actividades del blog (.news-card),
   con foto arriba en lugar de icono y las fechas fijas como lista con punto verde. */
.difusion-grid { grid-template-columns:repeat(3,1fr); gap:1.5rem 1.25rem; }  /* filas 24px, columnas 8px menos que el resto */
.difusion-card .news-card-img { height:264px; }          /* 64px más que las del blog */
.difusion-card .news-card-cat { margin-top:20px; }       /* más aire entre la foto y la etiqueta */
.difusion-card .news-card-cat { margin-bottom:14px; }    /* 10px menos hasta el texto */
.difusion-card .content-list { margin:.725rem 0 0; }   /* 10px menos desde el texto */
/* Subgrid: foto, etiqueta, texto y lista comparten filas con las tarjetas vecinas,
   asi la lista arranca a la misma altura aunque el cuerpo de texto sea mas corto. */
.difusion-card { grid-row:span 4; display:grid; grid-template-rows:subgrid; }
.difusion-card .news-card-body { grid-row:span 3; display:grid; grid-template-rows:subgrid; }
.difusion-card .content-list li { border-bottom-color:rgba(89,178,166,.4); }  /* el blanco no se ve sobre el glass */
.difusion-card .content-list li:last-child { border-bottom:0; padding-bottom:0; }
/* Las fechas usan el mismo texto que la etiqueta de la foto, sin su fondo ni su píldora. */
#content .difusion-card .content-list li { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); line-height:1.55; }
@media(max-width:900px){ .difusion-grid { grid-template-columns:1fr; } }
/* La lista de metodología se centra como bloque, pero su texto sigue a la izquierda. */
.lista-metodologia { width:fit-content; max-width:100%; }
.bloque-icon { width:84px; height:84px; 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.25rem; }
.bloque-icon svg { width:42px; height:42px; color:var(--green-dark); }


.nivel-rotulo { font-family:var(--title); font-size:1.275rem; font-weight:400; color:var(--text); }
.titulo-interno { font-family:var(--title); font-size:1.5rem; font-weight:400; color:var(--text); }
/* ── Portátiles (≤1440px) ── */
@media(min-width:901px) and (max-width:1440px){
  #content .titulo-interno { font-size:clamp(1.15rem,1.7vw,1.5rem); }
  #content .nivel-rotulo { font-size:clamp(1rem,1.45vw,1.275rem); }
  #content .boton-talleres { margin-top:calc(7.5rem - 24px) !important; }
  #content .galeria-talleres { margin-top:calc(7.5rem - 24px) !important; }

  #content .taller-cards { grid-template-columns:repeat(3,1fr); }
  #content .taller-cards .card { padding-left:1.5rem; padding-right:1.5rem; }
  #content .difusion-grid { row-gap:21px; }
  #content .difusion-card .news-card-img { height:230px; }
  /* Bloque "Donde, cuando y como": subtitulo mas grande, cuerpo un punto menor
     y tarjetas un 20% mas anchas, saliendose del contenedor. */
  #content #difusion .titulo-interno { font-size:calc(clamp(1.15rem,1.7vw,1.5rem) + 4px); }
  #content .difusion-card .news-card-excerpt { font-size:15px !important; }
  #content .difusion-grid { column-gap:21px; width:120%; max-width:none; position:relative; left:50%; transform:translateX(-50%); }
  #content .difusion-card .news-card-body { padding-left:16px; padding-right:16px; }   /* 8px mas, solo el texto */
  #content .difusion-card .news-card-cat { justify-self:start; }                        /* el tag, solo lo que mide */
  /* La galeria acompana el ancho de las tarjetas y sube 20px. */
  #content .galeria-difusion { width:120%; max-width:none; position:relative; left:50%; transform:translateX(-50%); margin-top:60px !important; }
  #content .boton-difusion { margin-top:60px !important; }   /* la mitad del hueco con la galeria */
  #content .taller-cards .card h3 { font-size:18px; }        /* como el resto de titulos de tarjeta */
  #content .ayuda-card .bloque-icon { margin-bottom:20px; }  /* la mitad de hueco hasta el tag */
  #content > section:not(#hero):not(.vista-fondo):not(.cat-section):last-of-type { padding-bottom:224px !important; }
  /* Prevencion, la seccion siguiente: 60px mas de aire por abajo. */
  #content > section#difusion + section:not(.vista-fondo):not(.cat-section) { padding-bottom:120px !important; }
}

/* 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: mismo criterio que en las demas paginas para la seccion que sigue a una
   abertura al fondo -- 38 de base mas 40 de aire, como en Personas afectadas y
   Quienes somos. Los :not() replican la especificidad de la regla global de padding
   de secciones de shared.css, que si no gana. */
@media(max-width:600px){
  /* Las dos galerias de esta pagina, 100px mas altas que el resto del sitio. */
  #content .mini-gallery-track img{ height:340px; }

  /* Los iconos de seccion se quedan donde el HTML los pone, al final de cada seccion.
     Se conserva solo la reduccion de tamano. */
  #content .two-col .img-ph img{ width:75%; height:auto; margin:0 auto; display:block; }
  /* El contenedor medía 385px con el icono de 239 centrado dentro: 73px de espacio
     muerto arriba y otros tantos abajo. Se ajusta a la imagen para poder controlar la
     distancia real. */
  #content .two-col .img-ph{ height:auto !important; line-height:0; }
  /* El icono abre la seccion: va delante del bloque de texto para que se lea como una
     introduccion de lo que viene debajo. Las secciones alternan imagen y texto en
     escritorio, asi que sin order unas lo pondrian antes y otras despues.
     La separacion hasta el texto se mantiene en los 56px acordados (40 de row-gap
     mas 16 de margen). */
  #content .two-col > div:has(img[src*="icono"]){ order:-1; margin-bottom:16px; }

  /* El boton vuelve a su ancho natural. Sin display:contents por medio ya no es item de
     la rejilla, asi que basta con centrarlo desde su contenedor. */
  #content .two-col > div:has(> .btn-outline){ text-align:center; }

  /* Cuerpo de tarjeta a 15px en TODAS las de la pagina. Las de talleres y las de
     "otras formas de ayudar" ya lo tenian por la regla global; la de difusion iba en 16. */
  #content .news-card-excerpt{ font-size:15px; }
  /* Titulos de tarjeta un punto por debajo del resto del sitio, manteniendo la
     jerarquia sobre el cuerpo: 18 contra 15 sigue siendo 1,2x. */
  #content .cards-grid .card h3{ font-size:18px; }

  /* Tarjetas de "otras formas de ayudar": menos aire entre sus piezas para bajar el
     alto, e icono un 20% mas pequeno. */
  #content .cards-grid .bloque-icon{ width:67px; height:67px; margin-bottom:10px; }
  #content .cards-grid .card h3{ margin-bottom:6px; }
  #content .cards-grid .card p{ margin-bottom:0; }
  /* Un 25% menos, manteniendo proporcion y centrado. */
  #content .two-col .img-ph img{ width:75%; height:auto; margin:0 auto; display:block; }
  /* El contenedor medía 385px con el icono de 239 centrado dentro: 73px de espacio
     muerto arriba y otros tantos abajo. Se ajusta a la imagen para poder controlar la
     distancia real. */
  #content .two-col .img-ph{ height:auto !important; line-height:0; }
  /* El icono abre la seccion: va delante del bloque de texto para que se lea como una
     introduccion de lo que viene debajo. Las secciones alternan imagen y texto en
     escritorio, asi que sin order unas lo pondrian antes y otras despues.
     La separacion hasta el texto se mantiene en los 56px acordados (40 de row-gap
     mas 16 de margen). */
  #content .two-col > div:has(img[src*="icono"]){ order:-1; margin-bottom:16px; }

  #content > section#talleres-prevencion:not(#hero):not(.vista-fondo){ padding-top:78px; }
}