/**
 * Formulario de solicitud de Lekua.
 *
 * La paleta y las familias son las de lekua.es: Kalnia en las preguntas,
 * Alegreya en el texto, verde 4E6A52 y crema de fondo.
 *
 * La disposición es de una pregunta por pantalla: bloque de altura fija con el
 * contenido centrado, para que al pasar de paso no se mueva nada alrededor y la
 * página no dé saltos. Se navega con el teclado — letras para elegir, Enter para
 * seguir — y con los botones de abajo.
 *
 * Sin modo oscuro a propósito: esto va dentro de una web que no lo tiene.
 */

.lekua {
    --verde:        #4E6A52;
    --verde-oscuro: #384E3C;
    --verde-suave:  #E9ECE0;
    --coral:        #E57751;
    --tan:          #A07A5A;
    --tinta:        #2B2920;
    --tinta-suave:  #6B6B5F;
    --crema:        #FFFEFB;
    --crema-clara:  #FBF9F0;
    --linea:        #D8DBCC;

    position: relative;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 8px;
    color: var(--tinta);
    font-family: Alegreya, Georgia, serif;
    font-size: 18px;
    line-height: 1.6;
}

.lekua *,
.lekua *::before,
.lekua *::after {
    box-sizing: border-box;
}

/*
 * Cualquier display propio le gana al atributo hidden, que solo trae un
 * display:none de baja prioridad. Sin esto, los botones ocultos se ven.
 */
.lekua [hidden] {
    display: none !important;
}

/* ----------------------------------------------------------- Escenario */

/*
 * La caja de los pasos.
 *
 * El min-height evita que la página pegue un salto al pasar de una pregunta
 * corta a una larga. Pero puesto muy alto hace lo contrario de lo que se busca:
 * una pregunta de dos líneas se queda flotando en medio de media pantalla en
 * blanco y el formulario parece interminable. 380 px es el alto del paso más
 * corto con su botón, que es lo que hay que reservar.
 */
.lekua__escena {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 380px;
    padding: 34px 0 8px;
}

/*
 * Que el formulario nazca plegado.
 *
 * El HTML trae los cinco pasos visibles a propósito: sin JavaScript esto tiene
 * que seguir siendo un formulario largo de toda la vida que se pueda enviar.
 * Pero mientras el navegador ejecuta el script hay un instante —más largo
 * cuanto peor va la conexión— en el que se ven los cinco de golpe, y lo que
 * llega a la pantalla es un muro en vez de una pregunta.
 *
 * La clase la pone un script en línea que va justo detrás del formulario, así
 * que se aplica antes del primer pintado. Si ese script no corre, no hay clase
 * y se ve el formulario largo, que es el respaldo que se quiere.
 *
 * Cuando reserva.js arranca de verdad añade `lekua--listo` y a partir de ahí
 * manda él con el atributo hidden, como siempre.
 */
.lekua--js .lekua__paso[data-paso]:not([data-paso="1"]) {
    display: none;
}

.lekua--js.lekua--listo .lekua__paso[data-paso] {
    display: revert;
}

.lekua__paso {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
    animation: lekua-entra .42s cubic-bezier(.16, 1, .3, 1);
}

@keyframes lekua-entra {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

/*
 * El paso que se va. Se superpone al que entra durante un instante: por eso va
 * en position absolute, para que no empuje al siguiente hacia abajo mientras se
 * desvanece.
 */
.lekua__paso--sale {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-14px);
    transition: opacity .18s ease, transform .18s ease;
}

/* ------------------------------------------------------------ Pregunta */

.lekua__numero {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--tan);
}

.lekua__numero svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lekua__pregunta {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0 0 8px;
    font-family: Kalnia, Alegreya, serif;
    font-size: clamp(28px, 4.6vw, 40px);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -.005em;
    color: var(--verde-oscuro);
    text-wrap: balance;
}

.lekua__ayuda {
    margin: 10px 0 0;
    font-size: 16.5px;
    line-height: 1.5;
    color: var(--tinta-suave);
}

.lekua__ayuda--suelta {
    margin: 0 0 4px;
}

.lekua__nota {
    margin: 26px 0 0;
    padding-left: 16px;
    border-left: 2px solid var(--verde-suave);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--tinta-suave);
}

.lekua__opcional {
    font-size: 15px;
    font-style: italic;
    color: var(--tinta-suave);
}

/* ------------------------------------------------------------- Opciones */

.lekua__opciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.lekua__opciones--fila {
    flex-direction: row;
    flex-wrap: wrap;
}

/*
 * Las cuatro opciones del primer paso, en dos columnas.
 *
 * En una sola columna el paso mide 600 px y no cabe en pantalla, con lo que el
 * formulario de «una pregunta por pantalla» obliga a hacer scroll dentro de la
 * primera pregunta. En dos columnas cabe entero, que es de lo que iba.
 */
.lekua__opciones--rejilla {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (max-width: 560px) {
    .lekua__opciones--rejilla {
        grid-template-columns: 1fr;
    }
}

.lekua__opciones--fila .lekua__tarjeta {
    flex: 1 1 210px;
}

.lekua__tarjeta {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--crema);
    border: 1.5px solid var(--linea);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    transition: border-color .16s, background-color .16s, transform .16s;
}

.lekua__tarjeta:hover {
    border-color: var(--verde);
    background: var(--crema-clara);
}

.lekua__tarjeta input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.lekua .lekua__tarjeta:has(input:checked) {
    border-color: var(--verde) !important;
    background-color: var(--verde-suave) !important;
}

.lekua__tarjeta:has(input:focus-visible) {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}

/* La letra de atajo, a la izquierda. En móvil no se pulsa, pero ordena la lista. */
.lekua__letra {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--linea);
    border-radius: 5px;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--tinta-suave);
    background: var(--crema);
    transition: border-color .16s, background-color .16s, color .16s;
}

.lekua .lekua__tarjeta:has(input:checked) .lekua__letra {
    border-color: var(--verde) !important;
    background-color: var(--verde) !important;
    color: var(--crema-clara) !important;
}

.lekua__tarjeta-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lekua__tarjeta-titulo {
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 18.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--verde-oscuro);
}

.lekua__tarjeta-datos {
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 15px;
    color: var(--verde);
}

.lekua__tarjeta-texto {
    margin-top: 5px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--tinta-suave);
}

.lekua__tarjeta--pequena {
    padding: 13px 16px;
}

/* Franja cogida o que ya no llega a tiempo. */
.lekua__tarjeta--no {
    opacity: .45;
    cursor: default;
    background: var(--crema-clara);
}

.lekua__tarjeta--no:hover {
    border-color: var(--linea);
    background: var(--crema-clara);
}

/* --------------------------------------------------------------- Campos */

.lekua__campo {
    margin-top: 26px;
}

.lekua__campo label,
.lekua__etiqueta {
    display: block;
    margin-bottom: 8px;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--verde-oscuro);
}

/*
 * Los campos van sin caja, con una línea debajo: es lo que evita que esto
 * parezca un impreso de la administración.
 */
.lekua input[type="text"],
.lekua input[type="tel"],
.lekua input[type="email"],
.lekua input[type="date"],
.lekua textarea {
    width: 100%;
    padding: 8px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1.5px solid var(--linea);
    border-radius: 0;
    font-family: Alegreya, Georgia, serif;
    font-size: 22px;
    color: var(--tinta);
    transition: border-color .18s;
    -webkit-appearance: none;
    appearance: none;
}

.lekua input::placeholder,
.lekua textarea::placeholder {
    color: #B7B9AC;
}

.lekua textarea {
    resize: vertical;
    min-height: 80px;
    font-size: 19px;
    line-height: 1.5;
}

.lekua input:focus,
.lekua textarea:focus {
    outline: none;
    border-bottom-color: var(--verde);
}

.lekua input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: .5;
}

/* ------------------------------------------------------------ Calendario */

.lekua__cal {
    margin-top: 26px;
    padding: 18px 16px 20px;
    background: var(--crema);
    border: 1.5px solid var(--linea);
    border-radius: 14px;
}

.lekua__cal-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.lekua__cal-mes {
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 17.5px;
    font-weight: 600;
    color: var(--verde-oscuro);
}

.lekua .lekua__cal-flecha {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid var(--linea);
    border-radius: 999px !important;
    font-size: 20px;
    line-height: 1;
    color: var(--verde) !important;
    background-color: transparent !important;
    background-image: none !important;
    cursor: pointer;
    transition: border-color .16s, background-color .16s;
}

.lekua__cal-flecha:hover:not(:disabled) {
    border-color: var(--verde);
    background: var(--verde-suave);
}

.lekua__cal-flecha:disabled {
    opacity: .28;
    cursor: default;
}

.lekua__cal-flecha:focus-visible,
.lekua__cal-dia:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 2px;
}

.lekua__cal-semana,
.lekua__cal-rejilla {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.lekua__cal-semana {
    margin-bottom: 8px;
}

.lekua__cal-semana span {
    text-align: center;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--tinta-suave);
}

.lekua .lekua__cal-dia {
    /*
     * Alto fijo en vez de cuadrado: con celdas cuadradas el calendario mide
     * más de 500 px y echa los botones fuera de la pantalla.
     */
    height: 46px;
    background-color: transparent !important;
    background-image: none !important;
    text-decoration: none !important;
    color: var(--tinta);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 16.5px;
    color: var(--tinta);
    cursor: pointer;
    transition: background-color .14s, border-color .14s, color .14s;
}

/*
 * El color va con !important porque el tema de WordPress pinta el texto de los
 * botones al pasar por encima y, sin forzarlo, el número del día se volvía del
 * color del fondo y desaparecía.
 */
.lekua .lekua__cal-dia:hover:not(:disabled) {
    border-color: var(--verde) !important;
    background-color: var(--verde-suave) !important;
    background-image: none !important;
    color: var(--verde-oscuro) !important;
}

/*
 * De aquí en adelante hay bastante !important, y no es por vicio: esto vive
 * embebido en un tema de WordPress cuyos selectores son más específicos que
 * estos, y sin forzar se pierden los fondos, los colores y el tachado. Es la
 * servidumbre de meter un bloque propio dentro de una plantilla ajena.
 */

/* Cerrado: mismo gris que el cuadradito de la leyenda, para que se relacionen. */
.lekua .lekua__cal-dia--no {
    color: #A9AC9E !important;
    background: #EDEEE7 !important;
    background-image: none !important;
    cursor: default;
}

/* Fuera de plazo o pasado: ni fondo ni nada, solo apagado. */
.lekua .lekua__cal-dia--no[aria-label*="plazo"],
.lekua .lekua__cal-dia--no[aria-label*="tiempo"] {
    background: transparent !important;
    background-image: none !important;
    color: #C7C9BE !important;
}

/*
 * Un día cogido se distingue de uno cerrado por tres cosas a la vez: el número
 * tachado, la trama y el color. Con el color solo, quien no distingue bien los
 * grises no ve la diferencia.
 */
.lekua .lekua__cal-dia--lleno {
    color: var(--tinta-suave) !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px;
    background-color: transparent !important;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        var(--linea) 3px, var(--linea) 4px
    ) !important;
}

.lekua .lekua__cal-dia--elegido,
.lekua .lekua__cal-dia--elegido:hover {
    background-color: var(--verde) !important;
    background-image: none !important;
    border-color: var(--verde) !important;
    color: var(--crema-clara) !important;
    font-weight: 700;
    text-decoration: none !important;
}

.lekua__cal-leyenda {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 13.5px;
    color: var(--tinta-suave);
}

.lekua__cal-marca {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #EDEEE7;
    vertical-align: -2px;
}

.lekua .lekua__cal-marca--lleno {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent, transparent 3px,
        var(--linea) 3px, var(--linea) 4px
    ) !important;
    border: 1px solid var(--linea);
}

/* ------------------------------------------------------------ Condiciones */

.lekua__condiciones {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 28px;
    padding: 16px 18px;
    background: var(--crema-clara);
    border: 1.5px solid var(--linea);
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
    transition: border-color .16s, background-color .16s;
}

.lekua__condiciones:hover {
    border-color: var(--verde);
}

.lekua__condiciones:has(input:checked) {
    border-color: var(--verde);
    background: var(--verde-suave);
}

.lekua__condiciones input {
    flex: none;
    width: 21px;
    height: 21px;
    margin-top: 2px;
    accent-color: var(--verde);
    cursor: pointer;
}

.lekua__condiciones a {
    color: var(--verde);
    text-underline-offset: 2px;
}

.lekua__trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------------------------------------------------------------- Barra */

/*
 * Pie del formulario: progreso y cuenta de pasos. Va abajo y no se mueve, así
 * el ojo siempre sabe por dónde va.
 */
.lekua__barra {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0 0;
    border-top: 1px solid var(--linea);
}

.lekua__progreso {
    flex: 1;
    height: 3px;
    background: var(--verde-suave);
    border-radius: 999px;
    overflow: hidden;
}

.lekua__progreso-barra {
    height: 100%;
    width: 20%;
    background: var(--verde);
    border-radius: 999px;
    transition: width .38s cubic-bezier(.4, 0, .2, 1);
}

.lekua__cuenta {
    flex: none;
    margin: 0;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-suave);
}

.lekua__botones {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.lekua .lekua__boton {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 17px;
    font-weight: 600;
    padding: 14px 30px;
    border-radius: 999px !important;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    transition: background-color .16s, color .16s, transform .12s, box-shadow .16s;
}

.lekua__boton svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lekua__boton:active {
    transform: translateY(1px);
}

.lekua__boton:focus-visible {
    outline: 2px solid var(--verde);
    outline-offset: 3px;
}

.lekua .lekua__boton--seguir,
.lekua .lekua__boton--enviar {
    background-color: var(--verde) !important;
    background-image: none !important;
    color: var(--crema-clara) !important;
    box-shadow: 0 10px 24px -12px rgba(78, 106, 82, .6);
}

.lekua .lekua__boton--seguir:hover,
.lekua .lekua__boton--enviar:hover {
    background-color: var(--verde-oscuro) !important;
    box-shadow: 0 14px 28px -12px rgba(78, 106, 82, .7);
}

.lekua__boton--enviar:disabled {
    opacity: .55;
    cursor: default;
    box-shadow: none;
}

.lekua .lekua__boton--atras {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--linea) !important;
    color: var(--tinta-suave) !important;
    padding: 14px 22px;
}

.lekua .lekua__boton--atras:hover {
    border-color: var(--verde) !important;
    color: var(--verde) !important;
}

/* La pista del teclado, que en móvil sobra porque no hay teclado a la vista. */
.lekua__pista {
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 13.5px;
    color: var(--tinta-suave);
}

.lekua__tecla {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 1px;
    border: 1px solid var(--linea);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--crema);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta-suave);
}

/* --------------------------------------------------------------- Estados */

.lekua__error {
    margin: 22px 0 0;
    padding: 13px 16px;
    background: rgba(229, 119, 81, .1);
    border-left: 2px solid var(--coral);
    border-radius: 0 8px 8px 0;
    font-size: 16px;
    color: #A6462A;
}

.lekua__hecho {
    padding: 20px 0;
    text-align: center;
    animation: lekua-entra .5s cubic-bezier(.16, 1, .3, 1);
}

.lekua__hecho-marca {
    width: 62px;
    height: 62px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--verde-suave);
    display: grid;
    place-items: center;
}

.lekua__hecho-marca svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--verde);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lekua__hecho h2 {
    margin: 0 0 14px;
    font-family: Kalnia, Alegreya, serif;
    font-size: clamp(28px, 4.4vw, 38px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--verde-oscuro);
}

.lekua__hecho p {
    margin: 0 auto 14px;
    max-width: 44ch;
}

#lekua-hecho-resumen {
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--verde);
}

.lekua__aviso {
    margin-top: 24px !important;
    padding: 15px 20px;
    background: var(--verde-suave);
    border-radius: 12px;
    font-size: 16px;
    color: var(--verde-oscuro);
}

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

@media (max-width: 620px) {
    .lekua {
        font-size: 17px;
        padding: 0;
    }

    .lekua__escena {
        min-height: 0;
        padding: 24px 0 4px;
    }

    .lekua__pregunta {
        font-size: clamp(25px, 7vw, 31px);
    }

    .lekua input[type="text"],
    .lekua input[type="tel"],
    .lekua input[type="email"],
    .lekua input[type="date"] {
        font-size: 19px;
    }

    /* La pista del teclado no pinta nada sin teclado físico. */
    .lekua__pista {
        display: none;
    }

    .lekua__opciones--fila .lekua__tarjeta {
        flex-basis: 100%;
    }

    .lekua__botones {
        margin-top: 20px;
    }

    .lekua__boton {
        padding: 14px 24px;
        font-size: 16px;
    }

    .lekua__cal {
        padding: 14px 10px 16px;
    }

    .lekua__cal-dia {
        height: 42px;
        font-size: 15.5px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lekua__paso,
    .lekua__hecho {
        animation: none;
    }

    .lekua__progreso-barra,
    .lekua__tarjeta,
    .lekua__letra,
    .lekua__boton,
    .lekua__cal-dia,
    .lekua__cal-flecha,
    .lekua input,
    .lekua textarea {
        transition: none;
    }
}

/* ---------------------------------------------------- Condiciones a la vista */

/*
 * Las condiciones van dentro del formulario, plegadas. Sin página aparte: lo que
 * se acepta con la casilla está ahí mismo, a un clic, y no hay que salir del
 * formulario para leerlo.
 */
.lekua .lekua__condiciones-texto {
    margin-top: 26px;
    border-top: 1px solid var(--linea);
    border-bottom: 1px solid var(--linea);
}

.lekua .lekua__condiciones-texto summary {
    padding: 14px 2px;
    font-family: "Alegreya Sans", Alegreya, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--verde-oscuro);
    cursor: pointer;
    list-style: none;
}

.lekua .lekua__condiciones-texto summary::-webkit-details-marker {
    display: none;
}

.lekua .lekua__condiciones-texto summary::after {
    content: "+";
    float: right;
    font-size: 19px;
    line-height: 1;
    color: var(--tinta-suave);
}

.lekua .lekua__condiciones-texto[open] summary::after {
    content: "−";
}

.lekua .lekua__condiciones-texto summary:hover {
    color: var(--verde);
}

.lekua .lekua__condiciones-texto ul {
    margin: 0 0 18px;
    padding-left: 20px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--tinta-suave);
}

.lekua .lekua__condiciones-texto li {
    margin-bottom: 9px;
}

.lekua .lekua__condiciones-texto strong {
    color: var(--tinta);
    font-weight: 600;
}

/* -------------------------------------------------- Grupo grande y avisos */

.lekua .lekua__condiciones--grupo {
    margin-top: 22px;
}

/* Aviso siempre visible, sin caja: es una regla, no una alerta. */
.lekua .lekua__aviso-fijo {
    margin: 16px 0 0;
    padding-left: 16px;
    border-left: 2px solid var(--tan);
    font-size: 15px;
    font-style: italic;
    color: var(--tinta-suave);
}


/* ============================================================== Las horas
 *
 * La rejilla de horas concretas del formulario de cita. Botones pequeños y
 * muchos: lo que se mira aquí es un número, no un rótulo, así que no llevan
 * tarjeta ni descripción.
 * ================================================================== */

.lekua__horas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.lekua__hora {
  position: relative;
  display: block;
  cursor: pointer;
}

.lekua__hora input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.lekua__hora span {
  display: block;
  padding: 12px 6px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--crema);
  color: var(--tinta);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: border-color .18s, background .18s;
}

.lekua__hora input:hover + span { border-color: var(--verde); }

.lekua__hora input:focus-visible + span {
  outline: 2px solid var(--verde);
  outline-offset: 2px;
}

.lekua__hora input:checked + span {
  border-color: var(--verde);
  background: var(--verde-suave);
  font-weight: 500;
}

@media (max-width: 480px) {
  .lekua__horas { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .lekua__hora span { padding: 11px 4px; font-size: 15px; }
}