/*
 * Páginas de contenido fijo: quiénes somos, guía de compra, garantías,
 * privacidad, términos.
 *
 * El contenido lo escribe la suite, así que esta hoja no maquetá el texto
 * —de eso se ocupa contenido.css— sino el marco: el aire alrededor, las
 * bandas de color de las secciones y la galería.
 */

.pagina {
    padding: 26px 0 70px;
    color: var(--texto);
}

.pagina__titulo {
    margin-bottom: 22px;
}

/* Columna medida para las páginas que solo llevan texto: un párrafo de
   condiciones a mil doscientos píxeles de ancho no hay quien lo lea. */
.pagina__contenido {
    max-width: 78ch;
}

.pagina__vacia {
    color: var(--texto-suave);
}

/* ── Páginas cuyo contenido trae sus propias secciones ──────────────── */

/* El título se separa del contenido con aire, no con una línea: la primera
   sección casi siempre llega con su propio fondo de color y una línea encima
   quedaba flotando. */
.pagina--ancha .pagina__titulo {
    margin-bottom: 30px;
}

.pagina__secciones > section {
    padding: 46px 0;
}

/* Bandas alternas: la sección con `grey-bg` la marca quien redacta, y las que
   no la llevan quedan sobre blanco. Es lo que da el ritmo de la página. */
.pagina__secciones .grey-bg {
    background: #f8f9fa;
}

.pagina__secciones .tpsection__title,
.pagina__secciones .tpform__title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--texto);
    margin: 0 0 16px;
}

/* Las bandas de texto e imagen se centran en vertical. El contenido guardado
   trae `align-items-center` en unas filas y en otras no, así que el texto
   quedaba arriba y la imagen dejaba medio metro de blanco debajo. */
.pagina__secciones .row {
    align-items: center;
}

.pagina__secciones img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Las imágenes que el contenido estira a 370 px de alto con `object-fit` se
   respetan; el redondeo es lo único que se añade. */
.pagina__secciones .tpmap__box img {
    border-radius: 12px;
}

.pagina__secciones .tpform__wrapper {
    padding: 0;
    margin: 0;
}

/* ── Video y galería ────────────────────────────────────────────────── */

.pagina__video {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 900px;
    margin: 34px 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.pagina__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pagina__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin-top: 34px;
}

.pagina__galeria img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

@media (max-width: 767px) {
    .pagina__secciones > section {
        padding: 32px 0;
    }

    .pagina__secciones .tpsection__title,
    .pagina__secciones .tpform__title {
        font-size: 19px;
    }
}

/* ============================================================
   Páginas de texto con lateral
   ============================================================

   Las legales y las de ayuda eran una columna de texto pegada al margen
   izquierdo con media pantalla vacía al lado, y diez pantallas de scroll sin
   forma de saltar a un apartado. Con el lateral, el ancho de la página se
   aprovecha y el documento se puede recorrer.

   El lateral va a la izquierda a propósito, igual que en el blog y en el
   catálogo: que las tres secciones con navegación lateral la tengan en el mismo
   sitio es lo que evita tener que aprenderse dos interfaces. */

.pagina__columnas {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

/* Se queda a la vista al bajar: un índice que se pierde en el primer scroll no
   sirve para nada en un documento de diez pantallas. */
.pagina__lateral {
    position: sticky;
    top: 20px;
}

/* Con lateral, la columna de texto ya viene medida por la retícula: el tope de
   caracteres sobraría y dejaría un hueco a la derecha. */
.pagina__columnas .pagina__contenido {
    max-width: none;
}

/* El título encabeza la columna del texto y no la página entera. Sube un poco
   para alinearse con el primer bloque del lateral, y deja aire por debajo para
   que se lea como el encabezado del documento y no como su primera línea. */
.pagina__principal .pagina__titulo {
    margin-top: -6px;
    margin-bottom: 30px;
}

/* ── Salida al final del lateral ────────────────────────────────────── */

.lateral-ayuda {
    text-align: center;
    padding: 4px 0 0;
}

.lateral-ayuda__texto {
    font-size: .88rem;
    color: var(--texto-suave);
    margin: 0 0 10px;
}

.lateral-ayuda__boton {
    width: 100%;
    padding: 9px 14px;
    font-size: .9rem;
}

/* ── Pantallas medianas y pequeñas ──────────────────────────────────── */

@media (max-width: 991px) {
    /*
     * El lateral pasa arriba y deja de ser pegajoso. Con el índice fijo en una
     * pantalla de móvil se comería la mitad del alto disponible.
     */
    .pagina__columnas {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }

    .pagina__lateral {
        position: static;
    }

    .pagina__columnas .pagina__contenido {
        max-width: 78ch;
    }
}

/*
 * Partición de palabras en los textos justificados.
 *
 * El texto de estas páginas viene justificado —del editor, que además lo marca
 * párrafo a párrafo con estilos propios—. Justificado sin partir palabras, un
 * párrafo largo se llena de huecos blancos entre palabras: se ven bien en los
 * párrafos de arriba de cualquiera de las dos páginas legales.
 *
 * Con `hyphens` el navegador parte por sílabas usando el diccionario del idioma
 * de la página, que está declarado como castellano. Los huecos desaparecen y no
 * cambia nada más del diseño.
 *
 * Va aquí y no en contenido.css a propósito: esa hoja la comparte el blog, y
 * cambiar de golpe cómo se ve todo lo escrito en el sitio es otra conversación.
 */
.pagina__contenido {
    hyphens: auto;
    -webkit-hyphens: auto;
    hyphenate-limit-chars: 8 4 4;
}