/* =============================================================================
 * Plantilla ads-landing (landings de campañas de ADS).
 *
 * Markup: xsl/themes/default/content/ads-landing.xsl
 *         xsl/themes/default/_common/slider/slider-ads-landing.xsl
 *         xsl/themes/default/_common/forms/ads-landing-form.xsl
 * Lógica: js/global/modules/forms/ads-landing-form.js
 *
 * Va en preload: el hero se ve en el primer pintado y .sr-only / .skip-link
 * tienen que estar aplicados antes de que se pinte la página.
 * El amarillo de Los Felices llega por var(--main-color) (paleta del hotel).
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * UTILIDADES DE ACCESIBILIDAD
 * --------------------------------------------------------------------------- */

/* Texto solo para lectores de pantalla */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Saltar al contenido: fuera de pantalla hasta que recibe el foco */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 100000;
    padding: 0.5rem 1rem;
    background: #000;
    color: #fff;
    font-size: 1rem;
    text-decoration: underline;
}

.skip-link:focus,
.skip-link:focus-visible {
    position: fixed;
    top: 0;
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -0.25rem;
}

body.ads-landing .main:focus {
    outline: none;
}

/* -----------------------------------------------------------------------------
 * BLOQUE 1: HERO
 * --------------------------------------------------------------------------- */

body.ads-landing .ads-landing-hero {
    background-color: var(--main-color);
}

body.ads-landing .ads-landing-hero .section-bg picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* Sin logo ni texto visibles, el botón queda centrado igual que en Bambola */
body.ads-landing .ads-landing-hero .section-heading {
    align-items: center;
    justify-content: center;
}

body.ads-landing .ads-landing-hero .reservation-cta {
    margin-top: 0;
}

body.ads-landing .ads-landing-hero .btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}

/* -----------------------------------------------------------------------------
 * BLOQUE 2: FORMULARIO
 * --------------------------------------------------------------------------- */

body.ads-landing .ads-landing-form {
    background-color: var(--main-color);
    box-sizing: border-box;
}

/* fullPage.js envuelve el contenido en .fp-overflow: el centrado va ahí */
body.ads-landing .ads-landing-form,
body.ads-landing .ads-landing-form > .fp-overflow {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Abajo se reserva el alto de la máscara de reservas sticky para que no tape
   el botón de envío ni los mensajes cuando reciben el foco */
body.ads-landing .ads-landing-form > .fp-overflow {
    padding: 6rem 1.25rem 6rem;
    box-sizing: border-box;
}

/* En hotel-contact el bloque blanco va posicionado en absoluto; aquí fluye */
body.ads-landing .ads-landing-form .hotel-contact-section {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    box-sizing: border-box;
}

body.ads-landing .ads-landing-form .contact-form__title:focus {
    outline: none;
}

/* Nota de campos obligatorios y formato del email (no existe en el formulario
   de contacto original; mismo cuerpo de letra que el texto legal) */
body.ads-landing .ads-landing-form .contact-form__form-description {
    width: 100%;
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Checkbox real oculto a la vista pero accesible por teclado: gana a la regla
   genérica ".form-css .form-group input", que le daba caja, borde y padding */
body.ads-landing .ads-landing-form .form-group input.newsletter-sec__check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* La casilla visual es un <span> (un <div> no puede ir dentro de <label>):
   se protege de la regla ".newsletter-sec__check--terms label span", pensada
   para el texto, que le daba todo el ancho */
body.ads-landing .ads-landing-form .newsletter-sec__check--terms label .newsletter-sec__fake-check {
    width: 1.25rem;
}

/* Foco visible en todos los controles (el reset global quita el outline) */
body.ads-landing .ads-landing-form input:focus-visible,
body.ads-landing .ads-landing-form textarea:focus-visible,
body.ads-landing .ads-landing-form button:focus-visible,
body.ads-landing .ads-landing-form a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

body.ads-landing .ads-landing-form .newsletter-sec__check-input:focus-visible + .newsletter-sec__fake-check {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* Botón de envío: <button> con el aspecto de .btn--white */
body.ads-landing .ads-landing-form button.btn {
    border: 0;
    background-color: transparent;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}

body.ads-landing .ads-landing-form button.btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Mensaje de error de cada campo */
body.ads-landing .ads-landing-form__field-error {
    display: block;
    margin: -0.5rem 0 0.75rem;
    color: #b00020;
    font-size: 0.8125rem;
    line-height: 1.3;
}

body.ads-landing .ads-landing-form__field-error::before {
    content: "✗ ";
}

body.ads-landing .newsletter-sec__check .ads-landing-form__field-error {
    margin: 0.5rem 0 0;
}

@media (max-width: 992px) {
    body.ads-landing .ads-landing-form > .fp-overflow {
        padding: 5rem 1rem 2rem;
    }

    body.ads-landing .ads-landing-form .hotel-contact-section {
        padding: 1.5rem 0;
    }
}

/* En móvil los campos solo dejan 5px por debajo: el error no puede subir */
@media (max-width: 576px) {
    body.ads-landing .ads-landing-form__field-error {
        margin: 0 0 0.5rem;
    }
}