/*
 * Portada publica — Zonas Azules Facatativa.
 *
 * Este archivo es la razon de que en `site/index.php` y en `layouts/landing.php`
 * no haya un solo `style=""`: la regla del proyecto es que toda clase nueva
 * vive en un CSS, y la portada no es la excepcion.
 *
 * POR QUE NO ESTA EN `custom.css`:
 * `custom.css` existe para REPISAR el tema Mazer del panel, y se carga junto a
 * el desde `AppAsset`. La portada no carga Mazer —ver `LandingAsset`— asi que
 * meter aqui sus estilos obligaria al ciudadano a descargar el CSS del panel
 * para leer una tarifa. Son dos superficies distintas con dos hojas distintas.
 *
 * La escala de esquinas y la paleta son las MISMAS del panel y de la app movil
 * (`src/theme/colors.ts`): 20px las tarjetas, 12px botones y controles, pildora
 * las etiquetas. Un ciudadano que llega de la app tiene que reconocer el sitio.
 */

:root {
    --lp-brand: #891700;
    --lp-brand-dark: #6E1200;
    --lp-brand-soft: #F9F3F2;
    --lp-brand-border: #E7D1CC;
    --lp-canvas: #F4EDEB;
    --lp-ink: #241C1A;
    --lp-muted: #7A6B67;
    --lp-white: #FFFFFF;
    /* Verde de "cupo libre". El rojo de marca ya hace de "ocupado". */
    --lp-free: #1E7B45;

    --lp-radius-card: 20px;
    --lp-radius-box: 12px;

    --lp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.landing {
    margin: 0;
    background-color: var(--lp-white);
    color: var(--lp-ink);
    font-family: var(--lp-font);
}

/* El salto a las anclas del menu se configura en `html`, NO en `body`: quien
   hace scroll es el documento, y en `body` estas dos propiedades se ignoran
   (por eso los titulos quedaban tapados debajo de la cabecera fija). Esta hoja
   solo la cargan las paginas publicas, asi que no toca el panel.

   2.5rem y no la altura de la cabecera (76px): cada seccion ya trae 4.25rem de
   padding arriba, y sumarle la cabecera entera dejaria un hueco enorme. Con
   2.5rem el titulo queda unos 32px por debajo de la barra. Si cambia el padding
   de `.landing-section` o la altura de la cabecera, hay que revisarlo. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 2.5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Salto al contenido: visible solo cuando recibe el foco por teclado. */
.landing-skip {
    position: absolute;
    left: -999px;
    z-index: 1100;
    padding: .75rem 1.25rem;
    background-color: var(--lp-brand);
    color: var(--lp-white);
    border-radius: 0 0 var(--lp-radius-box) 0;
}

.landing-skip:focus {
    left: 0;
    top: 0;
}

/* ==========================================================================
 * Cabecera
 * ========================================================================== */

.landing-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.landing-nav {
    background-color: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--lp-brand-border);
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.landing-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.landing-brand-shield {
    height: 44px;
    width: auto;
}

.landing-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.landing-brand-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lp-brand);
    letter-spacing: -.01em;
}

.landing-brand-city {
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.landing-menu {
    gap: .25rem;
}

.landing-menu-link {
    font-size: .95rem;
    font-weight: 500;
    color: var(--lp-ink);
    border-radius: var(--lp-radius-box);
    padding: .45rem .85rem;
}

.landing-menu-link:hover,
.landing-menu-link:focus-visible {
    background-color: var(--lp-brand-soft);
    color: var(--lp-brand);
}

.landing-nav-cta {
    margin-left: .75rem;
}

.landing-toggler {
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-box);
    color: var(--lp-brand);
    font-size: 1.35rem;
    line-height: 1;
    padding: .3rem .6rem;
}

.landing-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(137, 23, 0, .18);
}

@media (max-width: 991.98px) {
    .landing-menu {
        margin-top: .75rem;
    }

    .landing-nav-cta {
        margin: .75rem 0 .25rem;
        display: block;
        text-align: center;
    }
}

/* ==========================================================================
 * Botones
 * ========================================================================== */

.landing-btn-brand,
.landing-btn-ghost,
.landing-btn-light {
    border-radius: var(--lp-radius-box);
    font-weight: 600;
    padding: .6rem 1.35rem;
    border: 1px solid transparent;
}

.landing-btn-brand {
    background-color: var(--lp-brand);
    color: var(--lp-white);
}

.landing-btn-brand:hover,
.landing-btn-brand:focus-visible {
    background-color: var(--lp-brand-dark);
    color: var(--lp-white);
}

.landing-btn-ghost {
    background-color: transparent;
    color: var(--lp-brand);
    border-color: var(--lp-brand-border);
}

.landing-btn-ghost:hover,
.landing-btn-ghost:focus-visible {
    background-color: var(--lp-brand-soft);
    color: var(--lp-brand-dark);
    border-color: var(--lp-brand);
}

/* Sin uso ahora mismo: es la variante para fondo granate, pareja de las dos
   de arriba. Se conserva por eso, no por descuido. */
.landing-btn-light {
    background-color: var(--lp-white);
    color: var(--lp-brand);
}

.landing-btn-light:hover,
.landing-btn-light:focus-visible {
    background-color: var(--lp-brand-soft);
    color: var(--lp-brand-dark);
}

/* ==========================================================================
 * Portada
 * ========================================================================== */

.landing-hero {
    position: relative;
    background-color: var(--lp-brand-soft);
    padding: 4.5rem 0 3.5rem;
    overflow: hidden;
}

.landing-eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-brand);
    margin-bottom: .75rem;
}

.landing-hero-title {
    font-size: clamp(2rem, 4.6vw, 3.15rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.025em;
    text-wrap: balance;
    margin-bottom: 1.1rem;
}

.landing-hero-lead {
    font-size: 1.09rem;
    line-height: 1.65;
    color: var(--lp-muted);
    max-width: 60ch;
    margin-bottom: 1.75rem;
}

.landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.landing-hero-price {
    margin-top: 1.25rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--lp-muted);
}

.landing-hero-price strong {
    color: var(--lp-brand);
    font-size: 1.2rem;
}

/* Greca: el zigzag del pie del escudo municipal, reducido a un filete.
   Va ANCLADA al borde inferior de la portada y fuera del flujo: como bloque
   normal quedaba pegada al ultimo parrafo —la linea del precio— sin aire. */
.landing-greca {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12px;
    background:
        repeating-linear-gradient(135deg, var(--lp-brand) 0 3px, transparent 3px 11px),
        repeating-linear-gradient(45deg, var(--lp-brand) 0 3px, transparent 3px 11px);
    opacity: .5;
}

/* Cifras del servicio */
.landing-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: var(--lp-brand-border);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    overflow: hidden;
}

.landing-stat {
    background-color: var(--lp-white);
    padding: 1.6rem 1rem;
    text-align: center;
}

.landing-stat-num {
    display: block;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    color: var(--lp-brand);
    font-variant-numeric: tabular-nums;
}

.landing-stat-label {
    display: block;
    margin-top: .4rem;
    font-size: .82rem;
    color: var(--lp-muted);
    line-height: 1.3;
}

/* Ocupacion al cargar la pagina, debajo de las cifras de portada. */
.landing-occupancy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.5rem;
    margin-top: 1rem;
    padding: .9rem 1.25rem;
    background-color: var(--lp-brand-soft);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-box);
    font-size: .95rem;
    color: var(--lp-ink);
}

.landing-occupancy-item strong {
    font-variant-numeric: tabular-nums;
}

.landing-occupancy-dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .35rem;
    border-radius: 50%;
}

.landing-occupancy-dot-free {
    background-color: var(--lp-free);
}

.landing-occupancy-dot-busy {
    background-color: var(--lp-brand);
}

.landing-occupancy-at {
    margin: 0 0 0 auto;
    font-size: .8rem;
    color: var(--lp-muted);
}

/* ==========================================================================
 * Secciones
 * ========================================================================== */

.landing-section {
    padding: 4.25rem 0;
}

.landing-section-soft {
    background-color: var(--lp-brand-soft);
}

.landing-title {
    font-size: clamp(1.6rem, 3vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
    margin-bottom: .75rem;
}

.landing-title-light {
    color: var(--lp-white);
}

.landing-subtitle {
    font-size: 1.03rem;
    color: var(--lp-muted);
    max-width: 62ch;
    margin-bottom: 2.25rem;
}

/* Enlace dentro de texto corrido. Bootstrap lo pinta con su azul de fabrica,
   que en esta pagina no aparece en ningun otro sitio. */
.landing-link {
    color: var(--lp-brand);
    font-weight: 600;
    text-decoration: underline;
}

.landing-link:hover,
.landing-link:focus-visible {
    color: var(--lp-brand-dark);
}

.landing-note {
    margin-top: 1.75rem;
    margin-bottom: 0;
    font-size: .92rem;
    color: var(--lp-muted);
}

.landing-empty {
    color: var(--lp-muted);
    background-color: var(--lp-white);
    border: 1px dashed var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: 2rem;
    text-align: center;
    margin-bottom: 0;
}

/* ==========================================================================
 * Cómo funciona
 * ========================================================================== */

.landing-step {
    position: relative;
    height: 100%;
    background-color: var(--lp-white);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: 1.6rem 1.4rem 1.4rem;
}

.landing-step-num {
    position: absolute;
    top: -14px;
    left: 1.4rem;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background-color: var(--lp-brand);
    color: var(--lp-white);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.landing-step-icon {
    display: block;
    font-size: 1.75rem;
    color: var(--lp-brand);
    margin: .6rem 0 .9rem;
}

.landing-step-title {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: .4rem;
}

.landing-step-text {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--lp-muted);
    margin-bottom: 0;
}

/* ==========================================================================
 * Tarifas
 * ========================================================================== */

.landing-tabs {
    gap: .5rem;
    border: 0;
    margin-bottom: 1.75rem;
}

.landing-tab {
    background-color: var(--lp-white);
    border: 1px solid var(--lp-brand-border);
    border-radius: 999px;
    padding: .5rem 1.15rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--lp-muted);
}

.landing-tab:hover {
    color: var(--lp-brand);
    border-color: var(--lp-brand);
}

.landing-tab.active {
    background-color: var(--lp-brand);
    border-color: var(--lp-brand);
    color: var(--lp-white);
}

.landing-rate {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    background-color: var(--lp-white);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: 1.4rem;
}

.landing-rate-time {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.landing-rate-amount {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--lp-brand);
    font-variant-numeric: tabular-nums;
}

.landing-rate-scope {
    font-size: .85rem;
    color: var(--lp-muted);
    margin-top: .3rem;
}

/* Bloques que siguen a la tarifa general: preferencial y costo de no pagar. */
.landing-rate-group {
    margin-top: 3rem;
}

.landing-rate-group-title {
    margin-bottom: .4rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--lp-ink);
}

/* ==========================================================================
 * Horarios
 * ========================================================================== */

.landing-schedule {
    height: 100%;
    background-color: var(--lp-white);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: 1.5rem;
}

.landing-schedule-free {
    background-color: var(--lp-brand-soft);
}

.landing-section-soft .landing-schedule-free {
    background-color: var(--lp-canvas);
}

.landing-schedule-head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.landing-schedule-icon {
    font-size: 1.9rem;
    color: var(--lp-brand);
}

.landing-schedule-days {
    margin-bottom: .1rem;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lp-muted);
}

.landing-schedule-hours {
    margin-bottom: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--lp-ink);
    font-variant-numeric: tabular-nums;
}

.landing-schedule-scope {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--lp-brand-border);
    font-size: .9rem;
    color: var(--lp-muted);
}

/* ==========================================================================
 * Zonas
 * ========================================================================== */

.landing-map {
    height: 400px;
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    /* Leaflet apila sus controles en indices altos; sin bajar el contenedor se
       montan sobre el menu fijo al hacer scroll. */
    z-index: 0;
    overflow: hidden;
}

/* Globo del mapa */
.landing-popup-name {
    font-weight: 700;
    color: var(--lp-brand);
    display: block;
}

.landing-popup-meta {
    color: var(--lp-muted);
    font-size: .85rem;
}

/* ==========================================================================
 * Pagar sin la app
 * ========================================================================== */

.landing-qr {
    background-color: var(--lp-brand-soft);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: 2.5rem;
    margin-bottom: 1.75rem;
}

.landing-qr-text {
    font-size: 1.02rem;
    line-height: 1.6;
    color: var(--lp-muted);
    max-width: 60ch;
}

.landing-qr-list {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .95rem;
}

.landing-qr-list i {
    color: var(--lp-brand);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .landing-qr {
        padding: 1.75rem;
    }
}

/* Rejilla de pago por zona. `auto-fill` con un minimo y no un numero fijo de
   columnas: las zonas las da la base de datos y manana pueden ser tres o diez.
   El QR tiene que conservar su tamano para que la camara lo lea, asi que lo que
   cede es el numero de columnas, nunca el codigo. */
.landing-pay-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 1rem;
}

.landing-pay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    background-color: var(--lp-white);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: 1.25rem;
    text-decoration: none;
    text-align: center;
}

.landing-pay-card:hover,
.landing-pay-card:focus-visible {
    border-color: var(--lp-brand);
}

.landing-pay-zone {
    font-size: 1rem;
    font-weight: 700;
    color: var(--lp-ink);
    line-height: 1.25;
    text-wrap: balance;
}

/* Cupos de la zona: dos pildoras, libres y ocupados. */
.landing-pay-spots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
}

.landing-pay-spot {
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.landing-pay-spot-free {
    background-color: #E6F3EC;
    color: var(--lp-free);
}

.landing-pay-spot-busy {
    background-color: var(--lp-brand-soft);
    color: var(--lp-brand);
}

/* Tipo de vehiculo y sus cupos, en las tarjetas del listado de zonas. */
.landing-zone-type {
    font-size: .9rem;
    color: var(--lp-muted);
}

/* `margin-top: auto` empuja el codigo y el boton hacia abajo para que queden
   alineados entre tarjetas, tenga el nombre una linea o dos. */
.landing-pay-qr {
    margin-top: auto;
    width: 150px;
    height: 150px;
    /* El PNG trae su propio margen blanco. Se encuadra, no se recorta: sin ese
       margen la camara deja de reconocer el codigo. */
    background-color: var(--lp-white);
    border-radius: var(--lp-radius-box);
}

/* Hueco de la zona que aun no tiene codigo generado. Ocupa lo mismo que el QR
   para que la fila no se descuadre, y en punteado para que se lea como algo que
   falta y no como un codigo ilegible. */
.landing-pay-qr-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: 1px dashed var(--lp-brand-border);
    color: var(--lp-muted);
    font-size: .75rem;
    line-height: 1.3;
    padding: .75rem;
}

.landing-pay-qr-none i {
    font-size: 1.9rem;
    opacity: .55;
}

/* ==========================================================================
 * Descarga
 * ========================================================================== */

.landing-download {
    background-color: var(--lp-brand);
    color: var(--lp-white);
}

.landing-download-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, .86);
    max-width: 55ch;
    margin-bottom: 0;
}

.landing-stores {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.landing-store {
    display: flex;
    align-items: center;
    gap: .75rem;
    background-color: var(--lp-white);
    color: var(--lp-brand-dark);
    border-radius: var(--lp-radius-box);
    padding: .7rem 1.25rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.15;
}

.landing-store:hover,
.landing-store:focus-visible {
    background-color: var(--lp-brand-soft);
    color: var(--lp-brand-dark);
}

.landing-store i {
    font-size: 1.85rem;
}

.landing-store small {
    display: block;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .75;
}

/* Insignia sin enlace: se ve igual que la de al lado pero no es pulsable.
   El cursor por defecto —y no `pointer`— es la otra mitad del aviso: la mano
   invitaria a hacer clic en algo que no lleva a ningun sitio. */
.landing-store-off {
    cursor: default;
    opacity: .92;
}

.landing-download-alt {
    margin: 1.1rem 0 0;
    font-size: .92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .84);
}

.landing-download-alt a {
    color: var(--lp-white);
    text-decoration: underline;
}

/* ==========================================================================
 * Hoja blanca centrada
 *
 * Para los documentos legales, que se leen de corrido: tarjeta blanca sobre
 * el fondo rosado de la seccion
 * (`landing-section-soft`). El ancho limita la linea a una longitud comoda de
 * leer; el padding se encoge en el celular para no robarle ancho al texto.
 * ========================================================================== */

.landing-paper {
    max-width: 56rem;
    margin: 0 auto;
    background-color: var(--lp-white);
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-card);
    padding: clamp(1.5rem, 4vw, 3rem);
}

/* ==========================================================================
 * Preguntas frecuentes
 * ========================================================================== */

.landing-faq {
    max-width: 820px;
}

.landing-faq-item {
    border: 1px solid var(--lp-brand-border);
    border-radius: var(--lp-radius-box) !important;
    margin-bottom: .65rem;
    overflow: hidden;

    /* El chevron lo pinta Bootstrap con un SVG incrustado en estas variables.
       No se puede recolorear con `filter` —el original es casi neutro y girar
       el tono de un gris no da color—, asi que se sustituye el SVG entero por
       el mismo trazo en granate. */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23891700' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236E1200' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.landing-faq-button {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--lp-ink);
    background-color: var(--lp-white);
    padding: 1.05rem 1.25rem;
}

.landing-faq-button:not(.collapsed) {
    background-color: var(--lp-brand-soft);
    color: var(--lp-brand-dark);
    box-shadow: none;
}

.landing-faq-button:focus {
    box-shadow: 0 0 0 .2rem rgba(137, 23, 0, .18);
}


.landing-faq-body {
    font-size: .96rem;
    line-height: 1.6;
    color: var(--lp-muted);
    padding: 0 1.25rem 1.2rem;
}

/* ==========================================================================
 * Pie
 * ========================================================================== */

.landing-footer {
    background-color: var(--lp-ink);
    color: rgba(255, 255, 255, .78);
    padding: 3rem 0 1.75rem;
}

.landing-footer-logo {
    /* El logo institucional es granate; sobre fondo oscuro se invierte a blanco
       en vez de mantener una version aparte del archivo. */
    height: 74px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: .92;
    margin-bottom: 1rem;
}

.landing-footer-note {
    font-size: .92rem;
    line-height: 1.6;
    max-width: 44ch;
    margin-bottom: 0;
}

.landing-footer-title {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lp-white);
    margin-bottom: .9rem;
}

.landing-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    font-size: .93rem;
}

.landing-footer-list a {
    color: rgba(255, 255, 255, .78);
    text-decoration: none;
    /* Un correo es una sola "palabra": sin esto no se parte y en un celular
       angosto empuja la pagina hacia la derecha. */
    overflow-wrap: anywhere;
}

.landing-footer-list a:hover,
.landing-footer-list a:focus-visible {
    color: var(--lp-white);
    text-decoration: underline;
}

.landing-footer-legal {
    margin: 2.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .84rem;
    color: rgba(255, 255, 255, .55);
}

/* ==========================================================================
 * Páginas legales — términos y condiciones, política de tratamiento de datos
 *
 * El cuerpo llega como HTML del editor del panel, así que los estilos se
 * aplican por etiqueta: quien redacta no puede poner clases.
 * ========================================================================== */

.legal-body {
    max-width: 46rem;
    color: var(--bs-body-color);
    line-height: 1.75;
}

/* Cada encabezado con su propia regla y sin agrupar: la verificación de
   selectores duplicados del proyecto es por línea, y un grupo que termina en
   `.legal-body h3 {` choca con la regla suelta de ese mismo selector. */
.legal-body h1 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-weight: 700;
    font-size: 1.5rem;
}

.legal-body h2 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-weight: 700;
    font-size: 1.25rem;
}

.legal-body h3 {
    margin-top: 2rem;
    margin-bottom: .75rem;
    font-weight: 700;
    font-size: 1.1rem;
}

.legal-body p {
    margin-bottom: 1rem;
}

.legal-body ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-body ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal-body li {
    margin-bottom: .35rem;
}

/* Los enlaces del documento se subrayan siempre: dentro de un texto largo el
   color solo no basta para distinguirlos, y quien no percibe bien el color no
   los vería. */
.legal-body a {
    color: var(--bs-primary);
    text-decoration: underline;
}

.legal-meta {
    margin-bottom: 1.5rem;
    font-size: .9rem;
    color: var(--bs-secondary-color);
}

.legal-empty {
    max-width: 46rem;
    color: var(--bs-secondary-color);
}

/* Enlaces legales del pie. En fila y separados por puntos en pantallas
   anchas; apilados en móvil, donde una fila de tres se parte mal. */
.landing-footer-legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .9rem;
}

.landing-footer-legal-links a {
    color: inherit;
    opacity: .85;
    text-decoration: underline;
}

.landing-footer-legal-links a:hover {
    opacity: 1;
}