/* Hero: bajar el bloque de texto para ver más fondo, y "desplázate" en verde para que se vea */
/* El titular es más largo que el del resto de heros: baja el cuerpo para que entre en dos líneas. */
#hero h1 { font-size:clamp(2.4rem,5vw,4.5rem); }
/* Esta regla propia empata en especificidad con la de shared.css y va despues, asi
   que ganaba tambien en movil. Se repite aqui el escalon movil para que no la pise. */
@media(max-width:900px){ #hero h1 { font-size:40px; } }
@media(max-width:600px){ #hero h1 { font-size:32px; } }

/* Tipos TCA grid */
.tca-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin-top:2.5rem; }

/* Listas con bullet verde */
.check-list { list-style:none; display:flex; flex-direction:column; gap:.7rem; margin-top:1.25rem; }
.check-list li { display:flex; align-items:flex-start; gap:.9rem; font-size:1rem; color:var(--text-muted); line-height:1.75; }
.check-list li::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:.52rem; }

/* Factores de riesgo en dos columnas, conservando el formato de lista del sitio */
.factores-cols { display:grid; grid-template-columns:1fr 1fr; column-gap:3rem; align-items:start; }
.factores-cols .content-list { margin:0; }
@media(max-width:600px){ .factores-cols { grid-template-columns:1fr; } }

/* Dos columnas de lista */
.list-two-col { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
/* Señales: la imagen ocupa exactamente el alto del cuerpo de texto y su lista;
   el encabezado queda encima y la nota debajo, fuera de esa fila. */
.senales-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:4.25rem; }
.senales-head { grid-column:2; grid-row:1; }
.senales-img  { grid-column:1; grid-row:2; }
.senales-body { grid-column:2; grid-row:2; }
.senales-nota { grid-column:2; grid-row:3; }
@media(max-width:900px){ .senales-grid { grid-template-columns:1fr; }
  .senales-head, .senales-img, .senales-body, .senales-nota { grid-column:1; grid-row:auto; }
  .senales-img { margin:1.5rem 0; } }


/* Tarjetas de prevención */
.prev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
/* Portatiles: una tarjeta por fila, a la mitad del ancho de pantalla. */
@media(min-width:901px) and (max-width:1440px){ #content .prev-grid { grid-template-columns:50vw; justify-content:center; } }
.prev-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); border-radius:1.5rem; padding:2rem; 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); }
.prev-card:active { transform:scale(0.98); }
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  .prev-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); }
}
}

.prev-tag { font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:rgba(89,178,166,.1); padding:.3rem .75rem; border-radius:100px; display:inline-block; margin-bottom:1rem; }
.prev-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; }
.prev-icon svg { width:42px; height:42px; color:var(--green-dark); }
.prev-card h3 { font-family:var(--title); font-size:1.25rem; font-weight:400; color:var(--text); margin-bottom:1rem; }

/* Mitos */
.mitos-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:2.5rem; }
.mito-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,.65); border-left:3px solid var(--green); border-radius:0 1rem 1rem 0; padding:1.5rem 1.75rem; box-shadow:0 4px 18px rgba(0,0,0,0.06); }
.mito-q { font-family:var(--title); font-size:1.25rem; font-weight:400; color:var(--text); margin-bottom:.65rem; }
.mito-r { font-size:1rem; color:var(--text-muted); line-height:1.75; }
.mito-r strong { color:var(--green-dark); font-weight:600; }

/* Secciones de detalle TCA (Anorexia, Bulimia, Atracón) */
.tca-detail-intro { font-size:clamp(1rem,1.4vw,1.15rem); color:var(--text-muted); line-height:1.8; margin-bottom:2rem; }
.tca-cols { display:grid; grid-template-columns:1fr 1fr; gap:5.5rem; align-items:start; }
.tca-col-title { font-family:var(--title); font-size:1.25rem; font-weight:400; color:var(--text); margin-bottom:.75rem; display:block; }
.tca-detail-list { list-style:none; margin:0; }
.tca-detail-list li { display:flex; align-items:flex-start; gap:.85rem; font-size:1rem; color:var(--text-muted); line-height:1.75; padding:.6rem 0; border-bottom:1px solid rgba(255,255,255,.66); }
.tca-detail-list li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0; margin-top:.55rem; }

/* Tarjetas de tratamiento */
.treatment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.treatment-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,.65); border-radius:1.5rem; padding:2rem; 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); }
.treatment-card:active { transform:scale(0.98); }
@media (min-width:601px){
@media (hover:hover) and (pointer:fine) and (min-width:601px) {
  .treatment-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); }
}
}

.treatment-num { font-family:var(--title); font-size:3rem; font-weight:300; color:var(--green-dark); line-height:1; margin-bottom:1rem; }
.treatment-card h3 { font-family:var(--title); font-size:1.25rem; font-weight:400; color:var(--text); margin-bottom:.75rem; }
.treatment-card p { font-size:1rem; color:var(--text-muted); line-height:1.75; }

/* Placeholders de imagen */
.img-ph {
  background: rgba(89,178,166,0.05);
  border: 1.5px dashed rgba(89,178,166,0.25);
  border-radius: .75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  color: rgba(89,178,166,0.45);
  text-align: center;
  padding: 2rem;
}
.img-ph-label { font-size: .88rem; font-weight: 500; color: rgba(89,178,166,0.55); }
.img-ph-hint { font-size: .75rem; color: rgba(0,0,0,0.28); margin-top: .15rem; }

/* Intro TCA con imagen al lado */
.tca-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5.5rem;
  align-items: stretch;
  margin-bottom: 5rem;
}
.tca-intro-grid img { height:100%; }
/* 24px más de aire entre el título de cada trastorno y su bloque de introducción */
#anorexia .section-header, #bulimia .section-header, #atracon .section-header,
#vigorexia .section-header, #ortorexia .section-header, #tcane .section-header { margin-bottom:6rem; }

/* Tarjetas edad/duración (Qué son los TCA) */
.tca-info-cards .tca-card { padding:38px; }
.tca-info-cards .tca-card p { font-size:1rem; }

/* Tarjetas Tipos de TCA */
.tca-grid .tca-card { padding:38px; position:relative; display:flex; flex-direction:column; }
.tca-grid .tca-card .cta-link { margin-top:auto; padding-top:1.25rem; }
.tca-grid .tca-card .cta-link::after { content:''; position:absolute; inset:0; }
.tca-grid .tca-card p { font-size:1rem; }

/* Stats row */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:4.25rem; }
.stat-block { text-align:center; }
.stat-num { font-family:var(--title); font-size:clamp(2.5rem,5vw,3.8rem); font-weight:300; color:var(--green-dark); display:block; line-height:1; }
.stat-label { font-size:.85rem; color:var(--text-muted); margin-top:.5rem; display:block; line-height:1.5; }

@media(max-width:600px){
  .stats-row { grid-template-columns:1fr; gap:1.5rem; max-width:60%; margin-left:auto; margin-right:auto; }
  .tca-grid { grid-template-columns:1fr; }
  .prev-grid { grid-template-columns:1fr; }
  .mitos-grid { grid-template-columns:1fr; }
  .treatment-grid { grid-template-columns:1fr; }
  .list-two-col { grid-template-columns:1fr; gap:1.5rem; }
  .tca-intro-grid { grid-template-columns:1fr; gap:1.5rem; }
  .tca-cols { grid-template-columns:1fr; gap:1.5rem; }
}

/* Centrar todos los textos de la página, salvo el contenido de las tarjetas */
.container { text-align:center; }
.tca-card, .prev-card, .mito-card, .treatment-card,
.tca-card *, .prev-card *, .mito-card *, .treatment-card * { text-align:left; }

/* Todas las listas, alineadas a la izquierda */
.check-list, .tca-detail-list, .content-list,
.check-list li, .tca-detail-list li, .content-list li { text-align:left; justify-content:flex-start; }

/* Señales: bloque de texto completo a la izquierda */
.senales-head, .senales-head *, .senales-body, .senales-body *, .senales-nota, .senales-nota * { text-align:left; }
/* Preguntas frecuentes y recuadros destacados: se leen mejor a bandera izquierda. */
.faq-item, .faq-item *, .callout { text-align:left; }

/* Secciones de cada trastorno: solo el eyebrow+título centrados, el resto a la izquierda */
.tca-detail-intro, .tca-col-title { text-align:left; }

/* Lista de Factores de riesgo: mismo tamaño que el body-text anterior */
.factores-list .check-list li { font-size:clamp(1rem,1.4vw,1.15rem); }

/* ── Portátiles (≤1440px): tarjetas más compactas ── */
@media(min-width:901px) and (max-width:1440px){
  /* mismo hueco entre el titulo de seccion y lo que viene debajo */
  #content .section-header { margin-bottom:40px; }
  #content .tca-detail-header { margin-bottom:40px !important; }
  /* Cada trastorno: 24px mas de aire entre su titulo y el bloque de introduccion. */
  #content #anorexia .section-header, #content #bulimia .section-header,
  #content #atracon .section-header, #content #vigorexia .section-header,
  #content #ortorexia .section-header, #content #tcane .section-header { margin-bottom:64px; }
  #content .tca-grid .tca-card { padding:19px; }
  #content .tca-info-cards .tca-card { padding:35px; }              /* 16px mas */
  #content .tca-info-cards { column-gap:40px; row-gap:40px; }        /* 24px menos */
  #content #hero h1 { font-size:clamp(2.4rem,4.55vw,4.5rem); }       /* cabe en 2 lineas */
  /* Factores de riesgo y senales: las listas se leian mas pequenas que el cuerpo
     de texto de su lado. Se igualan las tres al mismo tamano. */
  #content .factores-cols { column-gap:32px; }
  /* Un solo tamano de lectura: descripciones de seccion, listas y tarjetas.
     Las descripciones se quedaban 0,5px por debajo del resto y se notaba. */
  #content .body-text,
  #content .factores-cols li, #content .senales-grid li { font-size:clamp(.9rem,1.27vw,1rem); }
  #content .treatment-card { padding:28px; }                 /* 12px mas */
  #content .treatment-card h3 { font-size:18px; }            /* 2px menos */
  #content .mito-card { padding:20px; }
  /* Un solo tamano de cuerpo dentro de estas tarjetas, preguntas incluidas. */
  #content .treatment-card p, #content .mito-r { font-size:15px !important; }
  #content .mito-q { font-size:18px !important; }            /* la pregunta, por encima de la respuesta */
  #content .prev-card { padding:36px 28px; }               /* 8px menos a los lados */
  #content .prev-grid { column-gap:20px; row-gap:20px; }   /* 8px mas entre tarjetas */
  /* Mas aire alrededor de la abertura que separa prevencion de los trastornos. */
  #content > section:not(#hero):not(.vista-fondo):has(.prev-grid) { padding-bottom:160px !important; }
  #content > section#tipos-tca:not(.vista-fondo):not(.cat-section) { padding-top:140px !important; }
  /* Mitos: mismo hueco en las dos direcciones (el mayor de los dos). */
  #content .mitos-grid { column-gap:20px; row-gap:20px; }
  /* Senales: la foto sobraba por abajo respecto al texto de al lado. */
  #content .senales-grid img { height:calc(100% - 30px) !important; }
  /* Las dos tarjetas de "que son los TCA", con su titulo destacado. */
  #content .tca-info-cards .tca-card h3 { font-size:18px; }
  /* Prevencion: las tres tarjetas en una fila. Necesitan mas ancho del que da
     el contenedor de 75vw, asi que esta seccion se sale a lo ancho de la pagina. */
  #content .prev-grid { grid-template-columns:repeat(3,1fr); width:123%; max-width:none;
    position:relative; left:50%; transform:translateX(-50%); }
  /* Tipos de TCA: mismo hueco en las dos direcciones (el mayor de los dos). */
  #content .tca-grid { column-gap:20px; row-gap:20px; }
  #content .tca-grid .tca-card { padding:35px; }           /* 16px mas */
  /* El titulo recupera su jerarquia: en portatil los clamp lo aplastaban
     contra el mismo tamano que el cuerpo. */
  #content .tca-grid .tca-card h3 { font-size:1.25rem; }
  #content .tca-grid .tca-card .cta-link { font-size:clamp(.9rem,1.27vw,1rem); }   /* igual que el cuerpo */
  #content .tca-info-cards .tca-card p, #content .tca-grid .tca-card p,
  #content .mito-r, #content .treatment-card p, #content .prev-card p,
  #content .tca-detail-list li { font-size:clamp(.9rem,1.27vw,1rem); }
  #content .treatment-num { font-size:clamp(1.9rem,2.6vw,3rem); }
  #content .mito-q { font-size:clamp(1rem,1.06vw,1.15rem); }
}

/* Tablet pequena (601-900): los titulos y citas de estas tarjetas 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. */
@media(min-width:601px) and (max-width:900px){
  #content .tca-info-cards .tca-card h3,
  #content .treatment-card h3 { font-size:18px; }
  #content .tca-grid .tca-card h3 { font-size:1.25rem; }
  #content .mito-r, #content .treatment-card p { font-size:15px !important; }
  #content .mito-q { font-size:18px !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; }
}

/* Escritorio: las listas de las tarjetas de prevencion, algo mas pequenas. */
@media(min-width:1441px){
  #content .prev-card .check-list li { font-size:1rem; }
}

/* Movil: coherencia con el resto del sitio. */
@media(max-width:600px){
  /* Las cabeceras de las fichas de cada TCA abrian 96px hasta su contenido; el resto
     del sitio usa 56 cuando debajo hay bloques y no texto. */
  #content .section-header{ margin-bottom:56px; }
  /* Tarjetas de mitos y de prevencion, al cuerpo de tarjeta establecido. */
  #content .mito-q{ font-size:19.8px; }
  #content .mito-r{ font-size:15px; }
  #content .prev-card .check-list li{ font-size:15px; }
}

/* La abertura extra solo existe en movil. */
.abertura-movil{ display:none; }
@media(max-width:600px){
  .abertura-movil{ display:block; }
  /* La abertura que precede a las FAQ se retira en movil: con la que se ha anadido
     antes de factores de riesgo, tres huecos de 425px en una pagina larga eran
     demasiado. En escritorio sigue tal cual. */
  .abertura-faq{ display:none; }
}