/* Hero: el bloque de texto baja 60px para dejar ver más fondo. */
/* La entradilla es más larga que la del resto de heros: se ensancha para que entre en 4 líneas. */
.hero-sub { max-width:780px; }
/* Comparación: la tarjeta de la izquierda marca el hábito sano y la de la derecha, la señal de alarma. */
.senales-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:5.5rem; }
@media(min-width:901px) and (max-width:1440px){ #content .senales-grid { column-gap:.75rem; } }
/* Mismo recuadro destacado que las notas: fondo suave, línea lateral y reflejo. */
.senales-grid .card { -webkit-backdrop-filter:none; backdrop-filter:none; border:0; border-radius:0 .75rem .75rem 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.04); padding:1.75rem 2rem; }
@media (min-width:601px){
.senales-grid .card:hover { transform:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 14px rgba(0,0,0,.04); }
}

.senales-grid .senal-buena { background:rgba(89,178,166,.12); border-left:3px solid var(--green); }
.senales-grid .senal-alarma { background:rgba(179,38,30,.10); border-left:3px solid #b3261e; }
@media(max-width:900px){ .senales-grid { grid-template-columns:1fr; } }
.col-titulo { font-family:var(--title); font-size:1.5rem; font-weight:400; color:var(--text); margin-bottom:2rem; }
.col-titulo + .content-list { margin-top:0; }

/* Las descripciones que siguen a un título centrado van centradas. Se seleccionan solo
   los párrafos que cuelgan directamente del contenedor, así que las listas, las notas
   y el texto de las tarjetas se quedan alineados a la izquierda. */
.container > .body-text { text-align:center; max-width:780px; margin-left:auto; margin-right:auto; }

.related-tca { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2rem; }
/* La tarjeta entera sigue siendo clicable: el enlace "Saber más" se estira sobre ella. */
.related-tca .tca-card { position:relative; display:flex; flex-direction:column; }
.related-tca .tca-card .cta-link { margin-top:auto; padding-top:1.25rem; }
.related-tca .tca-card .cta-link::after { content:''; position:absolute; inset:0; }
@media(max-width:900px){ .related-tca { grid-template-columns:1fr; } }
/* 32px menos de padding superior en todas las secciones de la pagina */


/* ── Portátiles (≤1440px) ── */
@media(min-width:901px) and (max-width:1440px){
  #content .stat-num { font-size:clamp(2rem,3.5vw,4rem); }
  #content .col-titulo { font-size:clamp(1.15rem,1.7vw,1.5rem); margin-bottom:1.25rem; }
  #content .related-tca .tca-card { padding:14px; }
  #content .related-tca .tca-card p, #content .related-tca .tca-card h3 { font-size:clamp(.9rem,1.27vw,1rem); }
  #content .related-tca .tca-card h3 { font-size:clamp(1rem,1.06vw,1.15rem); }
}

@media(min-width:901px) and (max-width:1440px){
  #content .related-tca .tca-card { padding:28px; }   /* mismo que las de tratamiento */
  #content .senal-buena h3, #content .senal-alarma h3 { font-size:18px; }   /* como el resto de titulos de tarjeta */
  #content > section:not(#hero):not(.vista-fondo).seccion-que-es, #content > section:not(#hero):not(.vista-fondo).seccion-tratamiento { padding-top:20px !important; }
  #content .boton-contacto { margin-top:78px !important; }   /* la mitad */
  #content > section:not(#hero):not(.vista-fondo).seccion-tratamiento { padding-bottom:36px !important; }
}
