@media(max-width:900px){
  #parallax-bg { background-position: 65% 60% !important; }
  .recursos-img { order: 2; }
  .recursos-text { order: 1; }
}
.recursos-text .content-list li { border-bottom-color: rgba(255,255,255,.8); }
#content > section#grupos-familias:not(#hero):not(.vista-fondo):not(.cat-section) { padding-top:160px !important; }   /* 100px mas que el resto */
/* En movil, la mitad. Hay que repetir el !important para ganar a la regla de arriba. */
@media(max-width:600px){ #content > section#grupos-familias:not(#hero):not(.vista-fondo):not(.cat-section)
  { padding-top:80px !important; } }
/* En tablet pequeña tampoco tenia reduccion propia y se colaba el valor de
   escritorio (160px), muy por encima de los 62px que usa el resto de la web
   en esta franja. Se iguala. */
@media(min-width:601px) and (max-width:900px){
  #content > section#grupos-familias:not(#hero):not(.vista-fondo):not(.cat-section){ padding-top:3.875rem !important; }
}

/* La imagen se alinea solo con los parrafos: el titulo va en su propia fila
   arriba y el boton en otra abajo, ambos fuera de la altura de la foto. */
.bloque-familias { grid-template-rows:auto 1fr auto; column-gap:6rem; row-gap:0; }
.bloque-familias .bf-cabecera { grid-column:1; grid-row:1; margin-bottom:8px; }   /* 28px hasta el body, igual que en recursos */
.bloque-familias .bf-cuerpo   { grid-column:1; grid-row:2; }
.bloque-familias .bf-boton    { grid-column:1; grid-row:3; margin-top:40px; }
.bloque-familias .bf-img      { grid-column:2; grid-row:2; align-self:stretch; }
.bloque-familias .bf-img img  { width:100%; height:calc(100% - 24px); object-fit:cover; border-radius:1.25rem; display:block; }
/* Diagrama del trabajo en equipo. Tres laminas de cristal con los pasteles del
   propio fondo de la pagina: la de abajo es la mas oscura y densa, y las de
   encima van perdiendo opacidad y desenfoque para dejarla ver. Donde coinciden
   las tres se asienta el nucleo verde ADANER. */
.bloque-grupos { grid-template-columns:1fr; grid-template-rows:auto auto auto; }
.bloque-grupos .bf-cabecera, .bloque-grupos .bf-cuerpo, .bloque-grupos .bf-img { grid-column:1; grid-row:auto; }

/* Escuela de familias en dos filas: el texto ocupa todo el ancho de la seccion
   y debajo van las dos fotos a la par, con el boton centrado al pie. */
.bloque-grupos, .bloque-escuela { text-align:center; }
.bloque-grupos .bf-cabecera, .bloque-escuela .bf-cabecera { margin-bottom:48px; }   /* 40px mas que el resto */
.be-fotos { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:116px; }
/* El encuadre baja: las fotos tienen mucho techo y lo que interesa es la sala. */
.be-fotos img { width:100%; height:clamp(320px,26vw,420px); object-fit:cover; object-position:50% 78%; border-radius:1.25rem; display:block;
  border:1px solid rgba(255,255,255,.50);
  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); }
.be-boton { display:flex; justify-content:center; margin-top:108px; }

/* Escena a pantalla completa: mensaje de apertura pegado a la nav, el diagrama
   en medio y el mensaje de cierre al pie. Todo tiene que caber sin scroll. */
/* El carril es solo altura de sobra: mientras la tiene, la escena se queda
   pegada arriba y el scroll la va contando. Cuando la animacion termina el JS le
   quita esa altura y la escena vuelve a ser un bloque cualquiera. Se usa sticky
   nativo a proposito, para no meter espaciadores ni estilos en linea que luego
   se descuadren. */
.escena-carril { position:relative; }
.escena-equipo { position:sticky; top:0; min-height:100vh; box-sizing:border-box; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between; padding:124px 2rem 40px; }
.escena-intro { font-family:var(--title); font-style:italic; font-weight:700; text-align:center;
  font-size:clamp(1.3rem,2.4vw,2rem); color:var(--green-dark); margin:0; }
.escena-cierre { font-family:var(--title); font-style:italic; font-weight:300; text-align:center;
  font-size:26px; line-height:1.6; color:var(--text);
  max-width:820px; margin:60px auto 0; }
.diagrama-equipo { position:relative; height:min(738px, calc(100vh - 400px)); aspect-ratio:1/.9;
  width:auto; max-width:100%; margin:0 auto; container-type:inline-size; }
.diag-circulo { position:absolute; width:58%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.55); }
/* Brillo especular: un reflejo arriba a la izquierda y un rebote suave abajo,
   como el de una pieza de cristal real. */
.diag-circulo::after, .diag-nucleo::after { content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(115% 85% at 30% 12%, rgba(255,255,255,.78) 0%, rgba(255,255,255,.26) 24%, rgba(255,255,255,0) 54%),
             radial-gradient(85% 65% at 72% 104%, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 62%); }
/* Cada lamina proyecta su sombra sobre las de abajo: cuanto mas arriba en la
   pila, mas separada y marcada, para que se lean como piezas apiladas. */
.diag-profesionales { box-shadow:inset 0 2px 1px rgba(255,255,255,.7), inset 0 -18px 30px rgba(255,255,255,.14),
  0 6px 14px rgba(86,54,116,.14); }
.diag-familia { box-shadow:inset 0 2px 1px rgba(255,255,255,.8), inset 0 -18px 30px rgba(255,255,255,.16),
  0 14px 26px rgba(120,70,60,.18), 0 4px 8px rgba(120,70,60,.10); }
.diag-paciente { box-shadow:inset 0 2px 1px rgba(255,255,255,.9), inset 0 -18px 30px rgba(255,255,255,.18),
  0 26px 44px rgba(60,90,120,.22), 0 8px 16px rgba(60,90,120,.12); }
/* abajo del todo: malva, la mas oscura y la que mas difumina */
.diag-profesionales { left:4%;  bottom:0; background:rgba(123,79,176,.50);
  -webkit-backdrop-filter:blur(20px) saturate(250%); backdrop-filter:blur(20px) saturate(250%); }
/* intermedia: peach del fondo */
.diag-familia { right:4%; bottom:0; background:rgba(206,116,74,.40);
  -webkit-backdrop-filter:blur(45px) saturate(220%); backdrop-filter:blur(45px) saturate(220%); }
/* encima: la mas clara, apenas velada, para no tapar a las de abajo */
.diag-paciente { left:21%; top:0; background:rgba(103,195,219,.40);
  -webkit-backdrop-filter:blur(10px) saturate(300%); backdrop-filter:blur(10px) saturate(300%); }
/* nucleo: donde coinciden las tres, el verde de la casa */
.diag-nucleo { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%);
  width:31%; aspect-ratio:1; border-radius:50%; background:rgba(0,136,118,.60);
  -webkit-backdrop-filter:blur(20px) saturate(240%); backdrop-filter:blur(20px) saturate(240%);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.75), inset 0 -20px 34px rgba(255,255,255,.14),
  0 30px 50px rgba(0,90,78,.30), 0 10px 20px rgba(0,90,78,.18); }
/* Los rotulos van en cqw: el tamano lo manda el ancho del diagrama, de modo que
   al encogerse la escena en pantallas bajas el texto encoge en la misma
   proporcion que los circulos. A 820px de diagrama (escritorio) dan los mismos
   valores de siempre: 16,4 / 30,4 / 24 / 24,4. */
.diag-etq { position:absolute; transform:translate(-50%,-50%); text-align:center; pointer-events:none;
  font-family:var(--body); font-size:max(11px,2cqw); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text); line-height:1.4; }
.diag-etq-paciente { left:50%; top:27%; width:auto;
  /* letras de cristal: relleno blanco translucido y halo difuso alrededor */
  font-size:max(18px,3.71cqw);
  color:rgba(255,255,255,.92);
  text-shadow:0 -1px 1px rgba(26,84,108,.85), 0 1px 0 rgba(255,255,255,1), 0 2px 1px rgba(255,255,255,.55); }
.diag-etq-profesionales { left:23%; top:72%; width:28%;
  font-size:max(15px,2.93cqw);
  color:rgba(255,255,255,.92);
  text-shadow:0 -1px 1px rgba(66,38,104,.70), 0 1px 0 rgba(255,255,255,1), 0 2px 1px rgba(255,255,255,.55); }
.diag-etq-familia { left:76%; top:72%; width:28%;
  font-size:max(15px,2.98cqw);
  color:rgba(255,255,255,.92);
  text-shadow:0 -1px 1px rgba(126,52,18,.80), 0 1px 0 rgba(255,255,255,1), 0 2px 1px rgba(255,255,255,.55); }
.diag-centro { left:50%; top:56%;
  color:rgba(255,255,255,.92);
  text-shadow:0 -1px 1px rgba(0,62,54,.85), 0 1px 0 rgba(255,255,255,1), 0 2px 1px rgba(255,255,255,.55); }

/* Laptop: la escena tiene que seguir cabiendo en el viewport, asi que se le
   quita aire arriba y abajo para devolverselo al diagrama. Los rotulos van en
   cqw y encogen solos con el, de modo que la proporcion se mantiene. */
@media(min-width:901px) and (max-width:1440px){
  .escena-equipo { padding:92px 2rem 32px; }
  .escena-intro { font-size:26px; }
  .escena-cierre { font-size:20px !important; margin-top:40px; }
  .diagrama-equipo { height:min(738px, calc(100vh - 310px)); }
}

@media(max-width:900px){
  .bloque-familias { grid-template-rows:none; row-gap:2.5rem; }
  .bloque-familias .bf-cabecera, .bloque-familias .bf-cuerpo,
  .bloque-familias .bf-boton, .bloque-familias .bf-img { grid-column:1; grid-row:auto; }
  .bloque-familias .bf-img img { height:440px; }
}
@media(max-width:700px){
  .be-fotos { grid-template-columns:1fr; margin-top:40px; }
}

/* 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: la escena del trabajo en equipo es un grafico estatico, no una pieza a
   pantalla completa. Se le quita el alto de 100vh y el padding pensado para que la
   animacion respirara, y el diagrama pasa a ocupar el ancho disponible derivando su
   alto del aspect-ratio. Los rotulos van en cqw, asi que escalan solos con el. */
@media(max-width:600px){
  /* Los dos parrafos de la hero van separados por <br><br> dentro de un mismo <p>.
     Ocultando los saltos, el texto fluye como un solo parrafo y el bloque entero,
     al ser mas corto y estar anclado abajo, arranca mas abajo. En escritorio se
     mantienen los dos parrafos. */
  #hero .hero-sub br{ display:none; }

  .escena-equipo{
    min-height:0;
    padding:38px 2rem;
    justify-content:flex-start;
  }
  .diagrama-equipo{ height:auto; width:100%; margin-top:60px; }
  .escena-intro{ font-size:20px; }
  /* Mismo cuerpo que los textos equivalentes del resto del sitio. */
  .escena-cierre{ font-size:18px !important; line-height:1.6; margin-top:40px; }

  /* Rotulos del diagrama. Los tamanos de base llevan un max() con suelo en px pensado
     para el diagrama grande de escritorio; a 311px de ancho ese suelo manda sobre el
     valor en cqw y los textos se salen de su circulo. Aqui se fijan al tamano que
     corresponde a esta escala. */
  .diag-etq-paciente{ font-size:13px; }
  .diag-etq-profesionales,
  .diag-etq-familia{ font-size:11px; }
  .diag-centro{ font-size:8px; }
}