/* Plegables y «lo esencial» del recorte de textos de la ola 1 (v4.1.0, encargo -rap, sí -rsi de Alejandro).
   Se carga después de estilos.css (y de metodo*.css en /metodo/) en /metodo/, /en/method/, /como-trabajamos/ y /en/.
   Solo variables del sistema de diseño; nada de style="" ni de recursos de otro servidor. */

/* El plegable: un <details> cerrado de serie. Se ve su título, con un galón de pelo que gira al abrirse;
   lo de dentro sigue en el HTML. El patrón es el de «Leer la nota entera», ahora a todos los anchos */
.plegable{margin:var(--space-5) 0 0}
.plegable > summary{list-style:none;display:inline-flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);
  font-family:var(--font-ui);font-weight:600;font-size:16px;line-height:1.4;font-style:normal;color:var(--text);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--border-ctrl);border-radius:var(--radius-md)}
.plegable > summary::-webkit-details-marker{display:none}
.plegable > summary::after{content:"";flex:none;width:7px;height:7px;margin-top:-3px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform var(--dur-2) var(--ease-out)}
.plegable[open] > summary::after{margin-top:3px;transform:rotate(-135deg)}
.plegable > summary:hover{text-decoration-color:currentColor}
.plegable > summary:focus-visible{outline:0;box-shadow:var(--foco)}
.plegable > .dentro{padding-top:var(--space-3)}
.plegable > .dentro > :first-child{margin-top:0}

/* /metodo/: lo esencial en la primera pantalla, entre la entradilla y el botón. Dos filas: rótulo corto y frase */
.esencial{margin:var(--space-5) 0 0;display:grid;gap:0;max-width:36em}
.esencial div{display:grid;gap:var(--space-1);padding:var(--space-3) 0;border-top:1px solid var(--line)}
.esencial div:last-child{border-bottom:1px solid var(--line)}
@media (min-width:700px){.esencial div{grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:var(--space-5);align-items:baseline}}
.esencial dt{font:600 var(--t-eyebrow-size)/var(--t-eyebrow-lh) var(--font-ui);font-variation-settings:normal;color:var(--text-2)}
.esencial dd{margin:0;font-size:17px;line-height:1.5;color:var(--text)}
.portada .esencial + .acciones{margin-top:var(--space-6)}
@media (max-width:979px){.esencial{margin-top:var(--space-4)}.esencial dd{font-size:16px}.portada .esencial + .acciones{margin-top:var(--space-5)}}
/* En escritorio la portada es una rejilla con áreas (estilos.css, 7): «lo esencial» entra en la columna del texto,
   entre la entradilla y el botón, con el panel de la ruta al lado */
@media (min-width:980px){
  .portada:has(.esencial) .wrap:first-child{grid-template-areas:"b b" "h h" "l p" "e p" "c p";grid-template-rows:auto auto min-content min-content 1fr}
  .portada .esencial{grid-area:e;margin-top:var(--space-5)}
}

/* El problema: la estadística oficial, plegada bajo la frase que dice que no hay cifra de fuera */
.de-fuera.v03 .plegable.oficial{margin:0}
.de-fuera.v03 .plegable.oficial > .dentro p + p{margin-top:var(--space-3)}

/* Cómo: de dónde salen las duraciones, justo debajo de los pasos (L7) */
.plegable.nota-pie{font-style:normal;max-width:46em}
.plegable.nota-pie > .dentro p{margin:0;font-size:14px;line-height:1.6;color:var(--text-2);font-style:italic}

/* El diagnóstico: «Qué abre y qué no», bajo la lista */
#diagnostico .plegable > .dentro p{margin:0;font-size:17px;line-height:1.55;color:var(--text)}

/* Preguntas, en acordeón: cada pregunta es el título de su plegable y la raya de pelo separa una de otra */
.preguntas{display:grid;gap:0 var(--space-9);align-items:start;max-width:46em}   /* una columna: al abrir una, no deja hueco al lado */
.preguntas .plegable.pregunta{margin:0;border-top:1px solid var(--line)}
.preguntas .plegable.pregunta > summary{display:flex;justify-content:space-between;width:100%;padding:var(--space-4) 0;
  font-family:var(--font-head);font-variation-settings:'wdth' 104,'wght' 600;font-weight:600;font-size:19px;line-height:1.35;text-decoration:none}
.preguntas .plegable.pregunta > summary:hover{color:var(--text-2)}
.preguntas .plegable.pregunta > .dentro{padding:0 0 var(--space-5)}
.preguntas .plegable.pregunta > .dentro p{margin:0;font-size:16px;line-height:1.6;color:var(--text-2)}

/* Verificar el diagnóstico: la sección entera en un plegable; su título es el h2. Se abre sola con #verificar */
.verificar .plegable.ver-mas{margin:0}
.verificar .plegable.ver-mas > summary{text-decoration:none;gap:var(--space-4)}
.verificar .plegable.ver-mas > summary h2{margin:0}
.verificar .plegable.ver-mas > summary::after{width:10px;height:10px;border-width:0 2px 2px 0}
.verificar .plegable.ver-mas > .cuerpo{padding-top:var(--space-5);max-width:46em}
/* cerrado, Verificar es una franja; abierto, vuelve a ser pantalla */
.metodo .sec.verificar:has(.ver-mas:not([open])){min-height:0}

/* /como-trabajamos/: la tabla de las cifras y GRADE, plegados entre la frase y la regla (L16) */
.plegable.cifras-mas > .dentro{display:grid;gap:var(--space-5)}
.plegable.cifras-mas + p{margin-top:var(--space-5)}

/* La nota de IA (/como-trabajamos/ y /en/): el primer párrafo a la vista y «Leer la nota entera», cerrada de serie (L15) */
.plegable.ia-mas > .dentro{display:grid;gap:var(--space-4)}
.plegable.ia-mas > .dentro p{margin:0}

/* Dentro de los plegables, el texto en bandera: en columnas estrechas la justificación abre calles y corta palabras */
.preguntas .plegable.pregunta > .dentro p,
#diagnostico .plegable > .dentro p,
.plegable.nota-pie > .dentro p{text-align:left;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty}