/* Tarjetas de historia: un solo sistema para toda la web (0.9.6). Lo usan la portada, las recomendadas, el listado,
   los tipos y el «Sigue leyendo». Dos piezas:
   - .rejilla-ecm: tarjetas iguales, 3 por fila (2 en tableta, 1 en el móvil);
   - .seleccion-ecm: una destacada a lo ancho y, debajo, las demás en una fila de tarjetas iguales.
   Todas las tarjetas de una fila miden lo mismo: imagen 3:2, texto cortado a tres líneas y el pie siempre abajo. */

/* La tarjeta */
.tarjeta{display:flex;flex-direction:column;min-width:0;background:var(--hoja);border-radius:var(--radio-grande);overflow:hidden;color:var(--tinta);text-decoration:none}
.gris .tarjeta{background:var(--papel)}
.tarjeta-imagen{position:relative;flex:none;margin:0;background:var(--filete)}
.tarjeta-imagen img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.tarjeta-texto{display:flex;flex-direction:column;gap:.5rem;flex:1;padding:1.1rem 1.25rem 1.25rem}
.tarjeta-sobre{font-size:1rem;line-height:1.35;font-weight:700;color:var(--suave)}
.tarjeta h3{font-size:1.25rem;line-height:1.2;letter-spacing:-.01em}
.tarjeta-texto>p:not(.tarjeta-sobre){font-size:1.0625rem;line-height:1.5;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--filete)}
.tarjeta-texto>*:nth-last-child(2){margin-bottom:.5rem}
.tarjeta .bola{display:inline-block;flex:none;width:1.25rem;height:1.25rem;border-radius:50%;border:2.5px solid var(--tinta);margin-top:0}
.tarjeta .bola.no-aplica{border-style:dashed} /* El «border» de arriba, más específico, pisaría el de base.css */
.cinco{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;font-weight:700}
.cinco-bolas{display:flex;gap:.3rem}
@media (hover:hover) and (pointer:fine){
  a.tarjeta{transition:box-shadow .2s ease,transform .2s ease}
  a.tarjeta:hover{box-shadow:0 0 0 2px var(--enlace);transform:translateY(-2px)}
  a.tarjeta:hover h3{color:var(--enlace)}
}
a.tarjeta:active{transform:scale(.995)}
@media (prefers-reduced-motion:reduce){ a.tarjeta,a.tarjeta:hover,a.tarjeta:active{transition:none;transform:none} }

/* La rejilla: tarjetas iguales */
.rejilla-ecm{display:grid;gap:1.25rem;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:63.99rem){ .rejilla-ecm{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:39.99rem){ .rejilla-ecm{grid-template-columns:minmax(0,1fr)} }

/* La selección: una destacada y una fila de iguales. La fila reparte el ancho entre las que haya (dos o tres). */
.seleccion-ecm{display:grid;gap:1.25rem}
.seleccion-resto{display:grid;gap:1.25rem;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.tarjeta--destacada h3{font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.02em}
.tarjeta--destacada .tarjeta-texto>p:not(.tarjeta-sobre){font-size:1.125rem;-webkit-line-clamp:6}
@media (max-width:63.99rem){ .tarjeta--destacada .tarjeta-imagen img{aspect-ratio:16/9} }
@media (min-width:64rem){
  /* Escritorio: la destacada, con la imagen a la izquierda y el texto a la derecha */
  .tarjeta--destacada{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  .tarjeta--destacada .tarjeta-imagen{min-width:0;min-height:24rem}
  .tarjeta--destacada .tarjeta-imagen img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
  .tarjeta--destacada .tarjeta-texto{justify-content:center;gap:.75rem;padding:2rem 2.25rem}
  .tarjeta--destacada .tarjeta-pie{margin-top:.75rem}
}
@media (min-width:40rem) and (max-width:63.99rem){
  /* Tableta: la destacada arriba, entera; las demás, una debajo de otra, con la imagen a la izquierda */
  .seleccion-resto{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr)}
  .seleccion-resto .tarjeta{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
  .seleccion-resto .tarjeta-imagen{min-width:0;min-height:13rem}
  .seleccion-resto .tarjeta-imagen img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}
@media (max-width:39.99rem){
  /* Móvil (0.12.17, como en 0.12.12): todas las historias iguales, Pam incluida, en una fila que se pasa con el dedo;
     la siguiente asoma siempre. Miguel prefirió esto a Pam grande y sola (0.12.16). Lo mismo en «Sigue leyendo». El
     listado de todas las ECM, en columna: ahí se busca, no se hojea. */
  .seleccion-ecm,.sigue-ecm .rejilla-ecm,.sigue-ecm .temas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(84%,20rem);gap:.875rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--canal));padding:0 var(--canal) .25rem;scroll-padding-inline:var(--canal);scrollbar-width:none}
  .seleccion-ecm::-webkit-scrollbar,.sigue-ecm .rejilla-ecm::-webkit-scrollbar,.sigue-ecm .temas::-webkit-scrollbar{display:none}
  .seleccion-resto{display:contents}
  .seleccion-ecm .tarjeta,.sigue-ecm .tarjeta,.sigue-ecm .tema{scroll-snap-align:start}
  .tarjeta--destacada .tarjeta-imagen img{aspect-ratio:3/2}
  .tarjeta--destacada h3{font-size:1.25rem;letter-spacing:-.01em}
  .tarjeta--destacada .tarjeta-texto>p:not(.tarjeta-sobre){font-size:1.0625rem;-webkit-line-clamp:3}
}

/* «Sigue leyendo» al final de cada historia */
.sigue-ecm{margin-block:clamp(3rem,7vw,5rem) clamp(2rem,5vw,3rem)}
.sigue-ecm h2{font-size:1.5rem;line-height:1.2;margin-bottom:1.25rem}
.sigue-todas{margin-top:1.5rem;font-weight:700}

/* «Más estudios» al final de cada estudio (0.12.0): las tarjetas de «Para entender» sin cargar portada.css, que choca
   con el bloque de comprobación. Las mismas reglas que portada.css, solo dentro de .sigue-ecm. */
.sigue-ecm .temas{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.sigue-ecm .tema{display:grid;align-content:start;background:var(--hoja);border-radius:var(--radio-grande);overflow:hidden;padding-bottom:1.25rem;position:relative}
.sigue-ecm .tema-imagen img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--hoja)}
.sigue-ecm .tema h3{padding:1.1rem 1.25rem 0;font-size:1.25rem;line-height:1.25}
.sigue-ecm .tema p{padding:.4rem 1.25rem 0;color:var(--suave);font-size:1.0625rem;line-height:1.45;text-wrap:pretty}
.sigue-ecm .tema--listo h3 a{color:var(--tinta);text-decoration:none}
.sigue-ecm .tema--listo h3 a::after{content:"";position:absolute;inset:0}
.sigue-ecm .tema-accion{justify-self:start;margin:1rem 1.25rem 0;font-weight:700;color:var(--enlace)}
@media (hover:hover){.sigue-ecm .tema--listo:hover{box-shadow:0 0 0 2px var(--enlace)} .sigue-ecm .tema--listo:hover h3 a{color:var(--enlace)}}
@media (max-width:60rem){.sigue-ecm .temas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:40rem){.sigue-ecm .temas{grid-template-columns:minmax(0,1fr)}}