/* ==========================================================================
   EL TEMA OSCURO DEL MÓVIL
   Android Chrome trae una opción, «tema oscuro automático para el contenido
   web», que INVIERTE los colores de cualquier página que no declare los suyos.
   El resultado es lo que veía el cliente: la web entera apagada y desvaída,
   con los azules y verdes convertidos en grises sucios.

   `color-scheme: light` es la forma estándar de decirle al navegador «esta
   página ya tiene su diseño de color, no lo toques». No obliga a nadie a usar
   el modo claro en su móvil: solo evita que el navegador reinterprete ESTA
   página. Chrome respeta esta declaración y desactiva el oscurecido forzado.

   Va aquí y no en cada hoja porque afecta al documento entero. */
:root {
  color-scheme: light;
}

/* ===== Landing / Welcome Page ===== */

/* Cheri-ES.ttf es Cheri con los caracteres del español añadidos.
   La original solo trae los 95 ASCII imprimibles: ni una vocal acentuada, ni la
   ñ, ni ¿ ni ¡. Cada carácter que faltaba caía a otra tipografía, así que en
   español los títulos salían con las tildes de otra letra —y de una distinta en
   cada móvil, porque el repuesto era `cursive`, o sea «la cursiva del sistema».

   Los 16 caracteres nuevos NO están dibujados a mano: son glifos COMPUESTOS que
   referencian a los propios trazos de Cheri. La á es la a de Cheri con su
   apóstrofo encima; la ñ usa la virgulilla ~; la ü, las comillas "; y ¿ ¡ son
   ? ! girados 180°. Mismo trazo, mismo grosor, mismo diseño.
   La í va sobre una «i sin punto» fabricada quitándole el contorno del punto,
   para que el acento lo sustituya en vez de sumarse.

   Se conserva el nombre de familia 'Cheri': así el resto del CSS no cambia.
   La genera _docs/completar-cheri.py a partir de _docs/fuentes/Cheri.ttf. */
@font-face {
    font-family: 'Cheri';
    src: url('../assets/fonts/Cheri-ES.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.landing-page {
    margin: 0;
    padding: 0;

    /* 100svh = «small viewport height»: la altura visible CON la barra del
       navegador desplegada. Con 100vh a secas, el móvil reserva la altura SIN
       esa barra, o sea más de lo que se ve, y el final de la página queda
       debajo de ella. 100vh se deja antes como respaldo para navegadores
       viejos que no entiendan svh. */
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    /* `safe center` centra mientras quepa, pero si el contenido es MÁS ALTO que
       la pantalla deja de centrar y lo alinea arriba.
       Con `center` a secas, un contenido que no cabe se desborda por los DOS
       extremos a la vez, y la parte que sale por arriba no se puede alcanzar
       desplazando. Eso es lo que cortaba la tarjeta de Everett en móviles de
       pantalla corta: 803px de contenido en 660px de ventana. */
    align-items: safe center;
    justify-content: center;

    font-family: 'Nunito', 'Segoe UI', sans-serif;
    position: relative;

    /* Era `overflow: hidden`, y en el body eso se propaga a la ventana: mataba
       el desplazamiento vertical, así que lo que no cabía no se podía ver de
       ninguna manera. Se limita al eje horizontal, que es el que había que
       contener (el fondo desenfocado lleva `inset: -40px` y `scale(1.1)`). */
    overflow-x: hidden;

    background: #0a0a0a;
}

/* Fondo completo desenfocado */
.landing-bg {
    position: fixed;
    inset: -40px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(18px);
    -webkit-filter: blur(18px);
    transform: scale(1.1);
    z-index: 0;
}

/* Overlay oscuro para contraste */
.landing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.landing-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem 1rem;
    max-width: 900px;
    width: 100%;
}

/* Welcome heading */
.landing-welcome {
    font-family: 'Cheri', 'Baloo 2', cursive;
    font-size: 4.5rem;
    font-weight: 400;
    color: #15548d;
    margin: 0 0 0.2rem;
    -webkit-text-stroke: 1.5px #ffffff;
    paint-order: stroke fill;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 3px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

/* Título y subtítulo */
.landing-title {
    font-family: 'Cheri', 'Baloo 2', cursive;
    font-size: 2.2rem;
    font-weight: 400;
    color: #15548d;
    margin: 0 0 0.3rem;
    -webkit-text-stroke: 1px #ffffff;
    paint-order: stroke fill;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 2px 16px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

.landing-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 2.5rem;
    font-weight: 400;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* Contenedor de los dos botones */
.landing-branches {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Cada tarjeta/botón */
.branch-card {
    position: relative;
    display: block;
    width: 340px;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.branch-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
    text-decoration: none;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

/* Fondo con imagen */
.branch-card-bg {
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    transition: transform 0.5s ease;
}

.branch-card:hover .branch-card-bg {
    transform: scale(1.08);
}

/* Overlay suave para legibilidad */
.branch-card-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

/* Contenido sobre la imagen */
.branch-card-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
    padding: 1.5rem 1.5rem 1.4rem;
    text-align: left;
}

.branch-card-content h2 {
    font-family: 'Cheri', 'Baloo 2', cursive;
    font-size: 1.35rem;
    font-weight: 400;
    margin: 0 0 0.3rem;
    line-height: 1.3;
    color: #5aa12c;
    -webkit-text-stroke: 2px #000000;
    paint-order: stroke fill;
    text-shadow: none;
}

.branch-enter {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.4rem 1.3rem;
    color: #5aa12c;
    border: 2px solid #000000;
    border-radius: 30px;
    width: fit-content;
    background: rgba(255, 255, 255, 0.85);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Colores de hover por sucursal */
.branch-revere:hover .branch-enter {
    background: #5aa12c;
    border-color: #000000;
    color: #fff;
}

.branch-everett:hover .branch-enter {
    background: #5aa12c;
    border-color: #000000;
    color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .landing-welcome {
        font-size: 3rem;
    }

    .landing-title {
        font-size: 1.7rem;
    }

    .landing-subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .landing-branches {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .branch-card {
        width: 90%;
        max-width: 340px;
        height: 320px;
    }
}

@media (max-width: 480px) {
    .landing-title {
        font-size: 1.6rem;
    }

    .branch-card {
        height: 280px;
    }

    /* EL LOGO, MÁS PEQUEÑO Y ARRIBA — solo en móvil.
       El logo se dibuja con `background-size: contain`, que lo escala hasta que
       quepa entero, y con `contain` manda SIEMPRE el lado más estrecho.

       En escritorio la tarjeta es más alta que ancha (336 x 376), así que manda
       el ancho: el logo sale 336 x 335 y quedan 20px libres abajo. Ahí es donde
       el diseño pone el nombre de la ciudad, sobre zona limpia.

       La regla de arriba baja la altura de 380 a 280 y la tarjeta pasa a ser
       APAISADA (318 x 276). Ahora manda la altura: el logo ocupa el 100% del
       alto, el margen inferior desaparece, y el nombre de la ciudad cae 95px
       DENTRO de la ilustración. Cada letra acababa con un fondo distinto —el
       fondo bajo el texto iba de 0,32 a 1,00 de luminancia— y por eso se veía
       mal solo en el móvil.

       Fijando la altura del dibujo al 58% se recupera la franja libre. No se
       toca ningún color: ni el verde del rótulo ni el velo blanco. */
    .branch-card-bg {
        background-size: auto 58%;
        background-position: center 4%;
    }

    .landing-welcome {
        font-size: 2.4rem;
    }

    .landing-title {
        font-size: 1.4rem;
    }
}

/* ===== Language Toggle — Landing Page ===== */
.lang-toggle-landing {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
    display: flex;
    gap: 4px;
}

.lang-toggle-landing .lang-btn {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.lang-toggle-landing .lang-btn.active,
.lang-toggle-landing .lang-btn:hover {
    background: #15548d;
    border-color: #15548d;
    color: #fff;
}