/* Las paginas de contenido: la planta, los cannabinoid, el canamo y los mitos.
 *
 * Va en css/styles.css y no en una hoja aparte por una razon de peso: estas cuatro
 * paginas se abren desde la portada, que es la que mas se visita, y meter una hoja
 * mas significa una peticion mas en cada visita a la portada. El contenido de las
 * cuatro paginas es una fraccion del total del sitio, asi que piggyback en la hoja
 * que ya se carga no cuesta nada.
 *
 * LOS ESTILOS SON DE ESCRITORIO, NO LOS MISMOS
 *
 * Todo lo del sitio esta hecho con el color de la marca y sus clases. Estas paginas
 * son de texto largo, y el texto largo con color de marca sobre fondo oscuro cansa
 * mucho. Por eso usan una tinta mas apagada y un ancho de lectura limitado: una linea
 * de mil caracteres no se lee, se atraviesa.
 */

.article-page {
    /* 68 caracteres es el rango que mas se cita como comodo de leer en pantalla. */
    max-width: 72ch;
    margin: clamp(28px, 5vw, 56px) auto;
    padding: 0 clamp(18px, 4vw, 32px);
}

.article-header { margin-bottom: clamp(28px, 4vw, 44px); }

.article-header h1 {
    font-size: clamp(1.9rem, 5vw, 2.9rem);
    line-height: 1.15;
    margin: .3em 0 .5em;
}

.article-lead {
    font-size: clamp(1.02rem, 2.2vw, 1.16rem);
    line-height: 1.65;
    color: #b9cebf;
    max-width: 60ch;
    margin: 0;
}

/* EL INDICE
 *
 * Es lo primero que ve quien llega desde la portada buscando un tema concreto, y
 * por eso va arriba del todo y no al final. En movil es una lista simple; a partir
 * de tablet se convierte en barra lateral para que el texto no tenga que empezar
 * debajo de una pantalla entera de enlaces.
 */
.article-toc {
    margin: clamp(20px, 3vw, 32px) 0;
    padding: 18px 20px;
    border: 1px solid #24463a;
    border-radius: 14px;
    background: #0b1a14;
}

.article-toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.article-toc a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #2f5748;
    border-radius: 999px;
    color: #d7e6dc;
    font-size: .88rem;
    text-decoration: none;
}

.article-toc a:hover,
.article-toc a:focus-visible {
    border-color: #58c98a;
    color: #8ff0b5;
}

/* LOS APARTADOS */

.article-page section { margin-bottom: clamp(30px, 4.5vw, 48px); }

.article-page section h2 {
    font-size: clamp(1.25rem, 3.2vw, 1.6rem);
    line-height: 1.3;
    margin: 0 0 .6em;
    padding-bottom: .35em;
    border-bottom: 1px solid #1e3d32;
}

.article-page p {
    /* 1.72 es la medida de linea que mas se ha usado en estudios de legibilidad en
       pantalla. Mas apretada cansa y mas suelta cuesta a donde va la vista. */
    line-height: 1.72;
    margin: 0 0 1.05em;
    /* Tinta apagada sobre fondo oscuro: el blanco puro vibre. */
    color: #cfe0d6;
}

.article-page strong { color: #eef7f1; }

.article-page a:not(.knowledge-explore-button) {
    color: #8ff0b5;
    text-underline-offset: 3px;
}

.article-page ul { margin: 0 0 1.05em; padding-left: 1.3em; }
.article-page li { line-height: 1.7; margin-bottom: .5em; color: #cfe0d6; }

.article-page em { font-style: italic; color: #bcd4c6; }

/* LAS TABLAS
 *
 * En movil una tabla de cuatro columnas es ilegible. Por eso cada celda lleva su
 * propio encabezado visible solo en movil, con data-label: quien va con el dedo ve
 * "Fibra: larga y rigida" en vez de una celda suelta. En pantalla ancha la tabla
 * vuelve a ser tabla, con la primera columna alineada a la izquierda como titulo.
 */
.article-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.4em;
    font-size: .95rem;
}

.article-table th,
.article-table td {
    text-align: left;
    vertical-align: top;
    padding: 11px 13px;
    border-bottom: 1px solid #1e3d32;
    line-height: 1.6;
}

.article-table thead th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #7fc79c;
    border-bottom: 1px solid #2f5748;
}

.article-table tbody th { color: #eef7f1; font-weight: 600; }
.article-table tbody tr:hover { background: #0d1f18; }

@media (max-width: 640px) {
    .article-table thead { display: none; }
    .article-table tbody tr {
        display: block;
        margin-bottom: 14px;
        border: 1px solid #1e3d32;
        border-radius: 10px;
        overflow: hidden;
    }
    .article-table tbody th,
    .article-table tbody td {
        display: grid;
        grid-template-columns: 8.5em minmax(0, 1fr);
        gap: 10px;
        border-bottom: 0;
        padding: 8px 12px;
    }
    .article-table tbody th { background: #0d1f18; }
    .article-table tbody td::before {
        content: attr(data-label);
        color: #7fc79c;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }
}

/* EL PIE DE CADA PAGINA */

.article-footer {
    margin-top: clamp(34px, 5vw, 52px);
    padding-top: 22px;
    border-top: 1px solid #1e3d32;
}

.article-note {
    font-size: .92rem;
    color: #93ab9d;
    max-width: 62ch;
}

.article-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 14px;
}

.article-footer nav a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #2f5748;
    border-radius: 999px;
    font-size: .88rem;
    text-decoration: none;
}

.article-footer nav a:hover,
.article-footer nav a:focus-visible { border-color: #58c98a; }

/* LA TARJETA DE LA PORTADA, CUANDO YA ES UN ENLACE
 *
 * .knowledge-topic era un <article> que no llevaba a ninguna parte. Al volver un
 * <a> hay que quitar el subrayado del texto y dejar el foco visible: si no, el
 * enlace se ve como texto normal y no se sabe que se puede pulsar.
 */
a.knowledge-topic {
    text-decoration: none;
    color: inherit;
}

a.knowledge-topic:focus-visible {
    outline: 2px solid #58c98a;
    outline-offset: 3px;
    border-radius: 12px;
}

/* La flechita que dice que la tarjeta lleva a alguna parte.
 *
 * Va al final del texto y no en una fila aparte: si ocupa su propia fila empuja el
 * contenido hacia abajo y la tarjeta queda con la flecha hu&eacute;fana al pie, que
 * parece un enlace a medio camino. Adem&aacute;s, al ser un ::after del <a>, el
 *Explorer lo lee como parte del enlace, que es justo lo que tiene que ser.
 *
 * En el texto se alinea con el <p>, no con el <h4>: si fuera con el h4, la flecha
 * subir&iacute;a hasta la altura del t&iacute;tulo y romp&iacute;a la l&iacute;nea de base.
 */
a.knowledge-topic > div { position: relative; }

a.knowledge-topic > div > p::after {
    content: "\2192";
    display: inline-block;
    margin-left: .55em;
    color: #58c98a;
    font-size: 1.05rem;
    line-height: 1;
    transition: transform .18s ease;
}

a.knowledge-topic:hover > div > p::after,
a.knowledge-topic:focus-visible > div > p::after { transform: translateX(4px); }

/* Con el dedo no hay hover, as&iacute; que en tactil la flecha se ve siempre y ya
   esta: no hace falta que aparezca al tocar. */
@media (hover: none) {
    a.knowledge-topic > div > p::after { transition: none; }
}