/*
 * Guías: lo que añade la plantilla `single.php`.
 *
 * El texto se lee con lo que ya trae `pagina.css` (el cuerpo de la guía lleva la
 * clase `lpc-pagina-contenido`, la misma que las páginas legales: ancho de línea,
 * títulos, listas y tablas). Aquí va solo lo que una guía tiene y una página
 * legal no:
 *
 *   · la línea de fechas de debajo del título,
 *   · el índice del artículo (con sus anclas),
 *   · la caja del aviso de enlaces de afiliado,
 *   · las guías relacionadas del final.
 *
 * Los colores son los del plugin (--primary, --gray-*): en estas páginas también
 * se carga su hoja base, así que la guía se ve como el resto de la web.
 */

/* ---------- La guía: más ancha que una página legal ---------- */

/* Una página legal con 52rem de ancho está bien (son cuatro párrafos), pero una
   guía de 1.400 palabras salía como una tira estrecha en medio de la pantalla:
   medido en 1.440 px, 304 px vacíos a cada lado y el texto metido en una columna
   de 766 px. Ahora la tarjeta usa 68rem y reparte el ancho en dos columnas: el
   texto a la izquierda, a un ancho de línea cómodo (unos 70 caracteres), y el
   índice a la derecha, que acompaña mientras se lee. */
.lpc-guia {
    max-width: 68rem;
}

.lpc-guia-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
}

/* La columna lateral solo existe cuando hay índice o hueco de anuncio. En móvil
   el índice queda arriba del texto, que es donde se busca. */
@media (min-width: 1024px) {
    .lpc-guia-con-lateral {
        grid-template-columns: minmax(0, 1fr) 18rem;
        gap: 3rem;
    }

    .lpc-guia-con-lateral .lpc-guia-contenido {
        grid-column: 1;
        grid-row: 1;
    }

    .lpc-guia-con-lateral .lpc-guia-lateral {
        grid-column: 2;
        grid-row: 1;
    }
}

.lpc-guia-lateral .ad-slot {
    margin-top: 0;
}

/* ---------- Cabecera de la guía ---------- */

.lpc-guia-fechas {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--gray-500);
}

/* ---------- Índice del artículo ---------- */

/* Las anclas del índice no pueden quedar debajo de la cabecera, que va pegada
   arriba: sin esto, al pulsar un apartado el título se queda tapado. La cabecera
   mide unos 65 px. */
.lpc-guia-contenido h2,
.lpc-guia-contenido h3 {
    scroll-margin-top: 5.5rem;
}

.lpc-guia-indice {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.75rem;
}

/* En pantalla grande el índice se queda fijo mientras se lee el artículo: es lo
   que permite saltar de apartado sin volver arriba. Va en la columna lateral, que
   ocupa toda la altura de la fila, así que tiene sitio para moverse. */
@media (min-width: 1024px) {
    .lpc-guia-lateral .lpc-guia-indice {
        position: sticky;
        top: 5.5rem;
    }
}

.lpc-guia-indice-titulo {
    margin: 0 0 0.625rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.lpc-guia-indice ol {
    margin: 0;
    padding-left: 1.25rem;
    counter-reset: lpc-guia-apartado;
    list-style: none;
}

.lpc-guia-indice li {
    counter-increment: lpc-guia-apartado;
    margin-top: 0.375rem;
}

.lpc-guia-indice li::before {
    content: counter(lpc-guia-apartado) ".";
    display: inline-block;
    width: 1.5rem;
    margin-left: -1.5rem;
    color: var(--gray-400, #9ca3af);
    font-variant-numeric: tabular-nums;
}

.lpc-guia-indice a {
    color: var(--gray-700);
    text-decoration: none;
}

.lpc-guia-indice a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* ---------- Aviso de enlaces de afiliado ---------- */

/* Lo escribe el plugin al principio del texto de la guía cuando lleva algún
   {{af:…}}. Se saca de la tipografía normal del artículo para que se lea como lo
   que es: un aviso, no un párrafo más. */
.lpc-guia-contenido .lpc-aviso-afiliado {
    background: var(--gray-50);
    border-left: 3px solid var(--gray-300);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
}

.lpc-guia-contenido .lpc-aviso-afiliado em {
    color: var(--gray-500);
    font-style: normal;
}

/* ---------- Imágenes y citas dentro del texto ---------- */

.lpc-guia-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
    border: 1px solid var(--gray-200);
}

.lpc-guia-contenido blockquote {
    margin: 1.5rem 0;
    padding: 0.875rem 1.25rem;
    border-left: 3px solid var(--primary);
    background: var(--primary-light, #eff6ff);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--gray-700);
}

.lpc-guia-contenido blockquote > * + * {
    margin-top: 0.75rem;
}

.lpc-guia-contenido blockquote p:last-child {
    margin-bottom: 0;
}

.lpc-guia-contenido h2 + p,
.lpc-guia-contenido h3 + p {
    margin-top: 0.5rem;
}

/* ---------- Guías relacionadas ---------- */

/* La tarjeta en sí y la rejilla las pone el plugin (`.lpc-guias-grid` y
   `.lpc-guia-card`, en su style.css): son las mismas que usa el índice de guías,
   el bloque de la portada y las páginas de marca, y tenerlas cuatro veces era
   cuatro sitios donde arreglar lo mismo. Aquí solo va lo de esta página. */
.lpc-guia-relacionadas {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--gray-200);
}

.lpc-guia-relacionadas-titulo {
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}

/* Dentro del artículo la columna es estrecha (el artículo mide 52rem y va en una
   tarjeta con relleno): tres columnas aquí dejarían las tarjetas en 15rem y el
   resumen en cinco líneas. Una debajo de otra se lee mejor. */
.lpc-guia-relacionadas .lpc-guias-grid {
    grid-template-columns: minmax(0, 1fr);
}

/* ---------- Pie de la guía ---------- */

.lpc-guia-volver {
    margin: 2rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--gray-200);
    font-size: 0.9375rem;
}

.lpc-guia-volver a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.lpc-guia-volver a:hover {
    text-decoration: underline;
}

/* ---------- Móvil ---------- */

@media (max-width: 900px) {
    .lpc-guia-indice {
        padding: 1rem 1.25rem;
    }
}

@media (max-width: 640px) {
    .lpc-guia {
        /* La tarjeta pierde el borde en móvil (como en las páginas legales), y
           con él el relleno lateral: el texto va de borde a borde del container. */
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}