/* Sistema de diseno de las guias. Una sola estructura para las tres webs; lo
   que cambia son los tokens, que define cada sitio en su propio mu-plugin.
   Asi una guia escrita para una web se puede mover a otra sin tocar el marcado.

   El elemento con el que se recuerda la seccion es .guia-dato: la cifra del
   articulo, sola, con su unidad y su procedencia. Es lo que se cita y lo que se
   captura de pantalla, y es lo unico que se permite gritar. */

.guia{color:var(--g-txt);font-family:var(--g-texto);}
.guia > *:first-child{margin-top:0;}

/* --- titulares --- */
.guia h2{font-family:var(--g-display);font-weight:var(--g-display-peso);
  font-size:var(--g-h2);line-height:1.18;letter-spacing:var(--g-display-track);
  text-transform:var(--g-display-caja);color:var(--g-titulo);
  margin:var(--g-gap) 0 .85rem;max-width:38ch;text-wrap:balance;}
.guia h3{font-family:var(--g-display);font-weight:var(--g-display-peso);
  font-size:calc(var(--g-h2) * .74);line-height:1.25;color:var(--g-titulo);
  margin:2rem 0 .6rem;max-width:44ch;}
.guia p,.guia li,.guia dd{max-width:62ch;line-height:1.62;margin:0 0 1.1rem;text-wrap:pretty;}
/* La clase va repetida (.guia.guia) a proposito: sube la especificidad lo justo
   para ganarle al color de enlace por defecto del tema, que en Astra es un azul
   (#0058BF) que no pertenece a ninguna de estas marcas. Sin esto los enlaces del
   cuerpo salen azules por mucho que el sistema diga otra cosa. */
.guia.guia a{color:var(--g-txt);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--g-acento) 55%,transparent);
  padding-bottom:.08em;transition:color .18s,border-color .18s;}
.guia.guia a:hover,.guia.guia a:focus-visible{color:var(--g-acento);border-bottom-color:var(--g-acento);}
/* Un titular que ademas es enlace NO se pinta como enlace: el filete debajo de
   un H2 de 28px lo convierte en un tachon. Solo cambia de color al pasar. */
.guia.guia h2 a,.guia.guia h3 a{border-bottom:0;color:var(--g-titulo);padding-bottom:0;}
.guia.guia h2 a:hover,.guia.guia h3 a:hover,
.guia.guia h2 a:focus-visible,.guia.guia h3 a:focus-visible{color:var(--g-acento);}

/* --- rotulo y procedencia --- */
.guia-lbl,.guia-fuente,.guia-dato-f,.guia-fig figcaption{
  font-family:var(--g-micro);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--g-suave);opacity:1;}
.guia-lbl{margin:0 0 1.2rem;}
.guia-fuente{margin:var(--g-gap) 0 0;padding-top:.9rem;border-top:1px solid var(--g-linea);}

/* --- EL DATO: la cifra que se cita --- */
.guia-dato{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:0 1.05rem;
  margin:var(--g-gap) 0;padding:1.5rem 0 1.2rem;max-width:62ch;
  border-top:2px solid var(--g-titulo);border-bottom:1px solid var(--g-linea);}
.guia-dato-n{font-family:var(--g-display);font-weight:var(--g-dato-peso);
  font-size:clamp(3.2rem,8.5vw,6rem);line-height:.85;letter-spacing:var(--g-dato-track);
  font-variant-numeric:tabular-nums;color:var(--g-acento);}
.guia-dato-u{font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.22;padding-bottom:.45rem;
  color:var(--g-txt);opacity:1;}
.guia-dato-f{grid-column:1/-1;margin-top:.85rem;}

/* --- tabla --- */
.guia-tabla{overflow-x:auto;margin:1.4rem 0 var(--g-gap);-webkit-overflow-scrolling:touch;}
.guia-tabla table{border-collapse:collapse;min-width:34rem;font-family:var(--g-micro);
  font-size:.79rem;font-variant-numeric:tabular-nums;}
.guia-tabla th,.guia-tabla td{padding:.5rem .9rem;text-align:left;white-space:nowrap;
  border-bottom:1px solid var(--g-linea);}
.guia-tabla thead th{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--g-suave);font-weight:400;}
.guia-tabla tbody th{font-family:var(--g-texto);font-weight:400;letter-spacing:0;
  text-transform:none;font-size:.9rem;}
.guia-tabla tbody tr:hover td{background:color-mix(in srgb,var(--g-acento) 12%,transparent);}

/* --- foto: nunca ampliada; el tope lo pone el propio articulo --- */
.guia-fig{margin:var(--g-gap) 0;text-align:left;}
.guia-fig img{width:100%;height:auto;display:block;}
.guia-fig figcaption{margin-top:.75rem;max-width:52ch;line-height:1.6;text-transform:none;
  letter-spacing:.02em;font-size:.8rem;}

/* --- preguntas --- */
.guia-faq{margin:0;}
.guia-faq dt{font-family:var(--g-display);font-weight:var(--g-display-peso);
  font-size:calc(var(--g-h2) * .66);color:var(--g-titulo);margin:1.7rem 0 .45rem;max-width:52ch;}
.guia-faq dd{color:var(--g-txt);}

/* --- cierre --- */
.guia-cta{margin:var(--g-gap) 0 0;padding-top:1.4rem;border-top:1px solid var(--g-linea);max-width:62ch;}

/* --- pagina hub: cada guia separada por un filete, para que la lista se pueda
       recorrer con la vista en vez de leerse entera. Se aplica con
       <div class="guia guia-hub">. --- */
.guia-hub h2{border-top:1px solid var(--g-linea);padding-top:1.5rem;margin-top:var(--g-gap);}
.guia-hub > h2:first-of-type{margin-top:calc(var(--g-gap) * .7);}
.guia-hub .guia-dato + h2{border-top:0;padding-top:0;}

/* --- listado del hub --- */
.guia-e{display:block;padding:1.7rem 0;border-top:1px solid var(--g-linea);
  text-decoration:none;color:inherit;border-bottom:0;}
.guia-e:last-of-type{border-bottom:1px solid var(--g-linea);}
.guia-e h2{margin:0 0 .4rem;max-width:34ch;transition:color .18s;}
.guia-e p{margin:0;color:var(--g-suave);}
.guia-e:hover h2,.guia-e:focus-visible h2{color:var(--g-acento);}

/* --- entrada en escena: CSS puro. `both` garantiza que el bloque SIEMPRE
       termina visible, corra o no el JS. Con prefers-reduced-motion no se
       declara nada y el articulo sale ya montado. --- */
@keyframes guia-sube{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:no-preference){
  .guia > *{animation:guia-sube var(--g-anim) cubic-bezier(.22,.61,.36,1) both;}
  .guia > *:nth-child(1){animation-delay:.04s}
  .guia > *:nth-child(2){animation-delay:.1s}
  .guia > *:nth-child(3){animation-delay:.16s}
  .guia > *:nth-child(4){animation-delay:.22s}
  .guia > *:nth-child(n+5){animation-delay:.28s}
}
@media (max-width:600px){
  .guia-dato{grid-template-columns:1fr;}
  .guia-dato-u{padding-bottom:0;margin-top:.35rem;}
}