/* Páginas de las fichas de tartamudez. Se generan con publicar_web.py
   desde el mismo archivo del que salen los PDF. No edites este archivo a mano:
   se reescribe entero en cada publicación.

   OJO CON EL TAMAÑO. La primera versión heredaba la maqueta de los artículos
   largos, con el titular a 44 px y mucho aire entre bloques, y una ficha
   quedaba en 2.500 px de alto cuando en papel cabe en una cara. Hector lo vio
   enseguida. Una ficha es densa y se lee de un vistazo, así que aquí todo va
   más apretado y más pequeño que en una lectura. */

/* ============================================================
   1. LA HOJA DENTRO DE LA PÁGINA DE CADA FICHA
   ============================================================ */
.ficha-web { max-width: 760px; margin: 0 auto; }
.ficha-web h1 { font-size: clamp(1.45rem, 3.6vw, 1.95rem); line-height: 1.18; }
.ficha-web__bajada { font-size: 1rem; color: #4a6260; margin: .5rem 0 0; }

/* migas de pan: dónde estoy y cómo salgo */
.ficha-migas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem;
  font-size: .82rem; color: #7d8f8e; margin: 0 0 1.1rem;
}
.ficha-migas a { color: #01807e; font-weight: 600; text-decoration: none; }
.ficha-migas a:hover, .ficha-migas a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ficha-migas span[aria-hidden] { color: #b6c8c7; }

/* cabecera: el titular a la izquierda y la hoja de verdad a la derecha */
.ficha-cabecera {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  gap: 1.6rem; align-items: center; margin: 0 0 1.6rem;
}
.ficha-cabecera__acciones {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .9rem; margin-top: 1.1rem;
}
.ficha-cabecera__nota { font-size: .84rem; color: #6b7f7e; }
.ficha-cabecera__arte a { display: block; border-radius: 6px; }
.ficha-hoja {
  display: block; width: 100%; border-radius: 6px; background: #fff;
  border: 1px solid #dde8e7; box-shadow: 0 14px 30px rgba(1, 80, 78, .16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.ficha-cabecera__arte a:hover .ficha-hoja,
.ficha-cabecera__arte a:focus-visible .ficha-hoja {
  transform: translateY(-2px); box-shadow: 0 18px 36px rgba(1, 80, 78, .22);
}
@media (max-width: 700px) {
  .ficha-cabecera { grid-template-columns: 1fr; gap: 1.1rem; }
  .ficha-cabecera__arte { order: -1; width: 150px; }
}

.ficha-web__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #01807e; color: #fff; text-decoration: none; font-size: .95rem;
  padding: .62rem 1.15rem; border-radius: 999px; font-weight: 700;
  transition: background-color .18s ease;
}
.ficha-web__btn:hover, .ficha-web__btn:focus-visible { background: #016c6a; color: #fff; }

.ficha-web__entrada { border-left: 3px solid #01aeab; padding: .1rem 0 .1rem 1rem; margin: 0 0 1.5rem; }
.ficha-web__entrada h2 { font-size: 1.05rem; color: #01807e; margin: 0 0 .35rem; }
.ficha-web__entrada p { margin: 0; font-size: .95rem; line-height: 1.5; }
.ficha-web__columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 0 0 1.5rem; }
@media (max-width: 700px) { .ficha-web__columnas { grid-template-columns: 1fr; } }
.ficha-web__col { border-radius: 10px; padding: 1rem 1.1rem; }
.ficha-web__col--si { background: #eef7f1; border: 1px solid #cbe6d6; }
.ficha-web__col--no { background: #fdf0ee; border: 1px solid #f4d5d0; }
.ficha-web__col h2 { font-size: 1rem; margin: 0 0 .8rem; }
.ficha-web__col--si h2 { color: #14764f; }
.ficha-web__col--no h2 { color: #b03a2b; }
.ficha-web__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ficha-web__col li { font-size: .9rem; line-height: 1.42; }
.ficha-web__col li strong { display: block; margin-bottom: .1rem; }
.ficha-web__col--si li strong { color: #14764f; }
.ficha-web__col--no li strong { color: #b03a2b; }
.ficha-web__col li span { color: #4d4d4d; }
.ficha-web__mensaje {
  background: #e9f7f7; border: 1px dashed #01aeab; border-radius: 10px;
  padding: 1rem 1.1rem; margin: 0 0 1.5rem;
}
.ficha-web__mensaje h2 { font-size: 1rem; color: #01807e; margin: 0 0 .45rem; }
.ficha-web__mensaje p { margin: 0; font-style: italic; font-size: .95rem; line-height: 1.5; }
.ficha-web h2 { font-size: 1.1rem; }
.ficha-web__lista { list-style: none; margin: .6rem 0 1.5rem; padding: 0; display: grid; gap: .45rem; }
.ficha-web__lista li { padding-left: 1.5rem; position: relative; font-size: .93rem; }
.ficha-web__lista li::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: .8rem; height: .8rem; border: 1.5px solid #01aeab; border-radius: 3px;
}
.ficha-web__cuando { list-style: none; margin: .6rem 0 1.5rem; padding: 0; display: grid; gap: .8rem; }
.ficha-web__cuando li { font-size: .93rem; line-height: 1.42; }
.ficha-web__cuando li strong { display: block; color: #01807e; margin-bottom: .1rem; }
.ficha-web__cuando li span { color: #4d4d4d; }
.ficha-web__finales { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin: 0 0 1.5rem; }
@media (max-width: 700px) { .ficha-web__finales { grid-template-columns: 1fr; } }
.ficha-web__final { border-radius: 10px; padding: 1rem 1.1rem; }
.ficha-web__final--fuerte { background: #01aeab; color: #fff; }
.ficha-web__final--claro { background: #e9f7f7; border: 1px solid #b9e3e2; color: #2b4a4a; }
.ficha-web__final h2 { font-size: 1rem; margin: 0 0 .4rem; }
.ficha-web__final--claro h2 { color: #01807e; }
.ficha-web__final p { margin: 0; font-size: .92rem; line-height: 1.45; }
.ficha-web__nota { font-size: .85rem; color: #5c6f6e; font-style: italic; margin: 0 0 1.5rem; }

/* la descarga repetida al final, para quien llegó leyendo hasta abajo */
.ficha-web__descarga {
  display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center;
  background: #f2fafa; border: 1px solid #cfe7e6; border-radius: 14px;
  padding: 1rem 1.15rem; margin: 1.8rem 0 0;
}
.ficha-web__descarga p { margin: 0; flex: 1 1 240px; font-size: .93rem; color: #2b4a4a; }

/* las otras fichas, para no dejar la página sin salida */
.ficha-otras { margin: 2rem 0 0; }
.ficha-otras h2 { font-size: 1.1rem; color: #111; margin: 0 0 .9rem; }
.ficha-otras__todas { margin-top: 1.1rem; }

/* ============================================================
   2. PORTADA DE LA SECCIÓN
   ============================================================ */
.fichas-portada {
  background: linear-gradient(180deg, #f1fbfb 0%, #ffffff 100%);
  border-bottom: 1px solid #e6f3f2;
  padding: clamp(1.5rem, 3.5vw, 2.6rem) 0 clamp(1.8rem, 4vw, 3rem);
}
.fichas-portada__inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr);
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
}
.fichas-portada__texto { min-width: 0; }
/* el enlace de volver es inline-flex en styles.css y se pegaba al rótulo */
.fichas-portada__texto .page-back-link { display: flex; margin-bottom: 14px; }
/* Hector quito el 29/08 el rotulo «Recursos gratuitos» de encima del titular,
   las pastillas de «7 fichas / PDF listo para imprimir» y la cuenta de fichas
   de cada grupo: «huele a IA». No volver a ponerlos. */
.fichas-portada h1 {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4.4vw, 3rem); line-height: 1.08;
  color: #111; margin: .2rem 0 .75rem;
}
.fichas-portada__bajada {
  color: #41605e; font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.6; max-width: 52ch; margin: 0;
}
.fichas-portada__arte { position: relative; }
.fichas-portada__arte::before {
  content: ""; position: absolute; inset: 9% -5% 5% 9%;
  background: #01aeab; opacity: .15; border-radius: 26px; transform: rotate(-2deg);
}
.fichas-portada__arte img {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 2; object-fit: cover; background: #01aeab;
  border-radius: 18px; box-shadow: 0 18px 40px rgba(1, 80, 78, .18);
}
@media (max-width: 900px) {
  .fichas-portada__inner { grid-template-columns: 1fr; }
  .fichas-portada__arte { max-width: 560px; }
}

.fichas-grupo { margin: 0 0 clamp(1.9rem, 4vw, 2.8rem); scroll-margin-top: 90px; }
.fichas-grupo__cabecera { display: flex; gap: .9rem; align-items: flex-start; margin: 0 0 1.1rem; }
.fichas-grupo__icono {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; background: #e3f5f5; color: #01807e; font-size: 1.1rem;
}
.fichas-grupo__cabecera h2 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: #111; margin: 0 0 .2rem; line-height: 1.2;
}
.fichas-grupo__cabecera p { color: #5c6f6e; margin: 0; font-size: .95rem; line-height: 1.5; max-width: 64ch; }

/* ============================================================
   3. LAS TARJETAS
   ============================================================ */
/* 238 px y no 255: con 255 solo entraban 3 columnas en los 1.060 px de la
   rejilla y el grupo del colegio, que son cuatro fichas, quedaba en 3+1. */
.fichas-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 1.1rem; }
.fichas-rejilla--compacta { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .85rem; }

.ficha-tarjeta {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid #dfe9e8; border-radius: 16px; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ficha-tarjeta:hover { transform: translateY(-3px); border-color: #a9dedd; box-shadow: 0 14px 30px rgba(1, 80, 78, .13); }
.ficha-tarjeta:focus-within { border-color: #01aeab; box-shadow: 0 0 0 3px rgba(1, 174, 171, .28); }

/* La hoja asomando: se ve lo que uno se lleva. La primera vez la hoja iba
   pegada abajo (align-self: flex-end) y la tarjeta enseñaba el PIE de la
   ficha, que es lo único que no distingue una de otra. Va pegada ARRIBA, que
   es donde están el titular y la ilustración de cada una. */
.ficha-tarjeta__hoja {
  background: linear-gradient(180deg, #d9f0ef 0%, #eef8f8 100%);
  padding: 15px 0 0; display: flex; justify-content: center; overflow: hidden;
  aspect-ratio: 16 / 10;
}
.ficha-tarjeta__hoja img {
  display: block; width: 62%; height: auto; align-self: flex-start;
  border-radius: 5px 5px 0 0; border: 1px solid #d3e2e1; border-bottom: 0;
  box-shadow: 0 8px 18px rgba(1, 80, 78, .18); background: #fff;
}
.fichas-rejilla--compacta .ficha-tarjeta__hoja { aspect-ratio: 16 / 9; padding-top: 12px; }
.fichas-rejilla--compacta .ficha-tarjeta__hoja img { width: 56%; }

.ficha-tarjeta__cuerpo { padding: .95rem 1.05rem 1rem; display: flex; flex-direction: column; flex: 1; }
.fichas-rejilla--compacta .ficha-tarjeta__cuerpo { padding: .75rem .85rem .85rem; }
.ficha-tarjeta__quien {
  font-size: .73rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #01807e; margin: 0 0 .35rem; line-height: 1.35;
  /* dos renglones fijos: «para docentes de universidad e institutos» ocupa dos
     y sin esto los titulares de la fila arrancaban a alturas distintas */
  min-height: 2.7em;
}
.ficha-tarjeta h3 { font-size: 1.02rem; line-height: 1.28; margin: 0 0 .4rem; color: #111; }
.fichas-rejilla--compacta .ficha-tarjeta h3 { font-size: .92rem; margin-bottom: 0; }
.ficha-tarjeta h3 a { color: inherit; text-decoration: none; }
/* el enlace cubre toda la tarjeta, pero el texto se sigue pudiendo seleccionar */
.ficha-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ficha-tarjeta__glosa { margin: 0 0 .95rem; font-size: .88rem; line-height: 1.45; color: #5c6f6e; }
.ficha-tarjeta__acciones {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding-top: .7rem; border-top: 1px solid #eef4f3;
}
.ficha-tarjeta__ver { font-size: .88rem; font-weight: 700; color: #01807e; }
.ficha-tarjeta:hover .ficha-tarjeta__ver { color: #015e5c; }
.ficha-tarjeta__pdf {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; font-weight: 700; color: #01807e; text-decoration: none;
  border: 1px solid #cfe7e6; background: #f4fbfb; border-radius: 999px; padding: .3rem .72rem;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ficha-tarjeta__pdf:hover, .ficha-tarjeta__pdf:focus-visible {
  background: #01807e; border-color: #01807e; color: #fff;
}

/* El compartir usa el componente `article-share` de styles.css, el mismo de
   las lecturas. Aqui solo se le da el aire que necesita dentro de la ficha. */
.ficha-web .article-share { margin: 1.6rem 0 0; }
.ficha-web .article-share__inner,
.resources-section .article-share__inner { max-width: none; }

/* ============================================================
   4. EL INFORME FIRMADO
   ============================================================ */
.fichas-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.1rem 1.8rem; background: linear-gradient(135deg, #01807e 0%, #01aeab 100%);
  color: #fff; border-radius: 18px;
  padding: clamp(1.2rem, 3vw, 1.75rem) clamp(1.2rem, 3vw, 2rem);
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}
.fichas-cta__texto { flex: 1 1 320px; min-width: 0; }
.fichas-cta h2 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: #fff; margin: 0 0 .35rem; line-height: 1.25; }
.fichas-cta p { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .93); max-width: 62ch; }
.fichas-cta__btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .55rem;
  background: #fff; color: #01706e; font-weight: 700; font-size: .95rem;
  padding: .72rem 1.3rem; border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15); transition: background-color .18s ease, color .18s ease;
}
.fichas-cta__btn:hover, .fichas-cta__btn:focus-visible { background: #eafafa; color: #015e5c; }
.fichas-cta__btn i { font-size: 1.15rem; }

/* el bloque de la portada de recursos */
.resources-fichas__intro { max-width: 62ch; margin: 0 0 1.25rem; color: #4a6260; }
/* ahí son siempre tres tarjetas: con auto-fill cabían cuatro carriles y la
   fila se quedaba coja por la derecha. auto-fit recoge el carril que sobra. */
.resources-fichas .fichas-rejilla { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }