@charset "utf-8";

/* ==========================================================================
   LANDING ESTÁTICA BLACK FRIDAY (NWEB-15150)
   Estilos del HTML del cliente (alda-black-friday-2026-v3.html), encapsulados en #alda-black-friday.
   Sin la barra superior, el pie ni el buscador propios del HTML: se usan el header, el footer
   y la máscara de reservas comunes de la web.
   ========================================================================== */

/* Tipografías del diseño servidas desde el tema (el HTML las llevaba incrustadas en base64).
   Montserrat variable (300-900) en un solo fichero; nombre propio para no alterar otras plantillas */
@font-face {
    font-family: "bf-montserrat";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../../../fonts/montserrat/montserrat-variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "bf-montserrat";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../../../fonts/montserrat/montserrat-variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "bf-mynerve";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../../fonts/mynerve/mynerve-regular.woff2") format("woff2");
}

/* ==========================================================================
   INTEGRACIÓN CON EL HEADER DE LA WEB
   El header común va en absoluto sobre la cabecera de la landing. Se le reserva una franja negra
   (como la barra superior del diseño) y la foto empieza debajo. El hueco es fijo: no sigue al header
   cuando pasa a fijo al hacer scroll. Los cortes son los del propio header (menú de escritorio oculto
   en <=992px; cabecera más baja en <=959px). black-friday.js afina --bf-header-offset al alto real
   al cargar y al cambiar el ancho de la ventana.
   ========================================================================== */
body.black-friday {
    --bf-header-offset: 175px;
    --bf-sticky-offset: 120px;
}

@media (max-width: 992px) {
    body.black-friday {
        --bf-header-offset: 120px;
        --bf-sticky-offset: 102px;
    }
}

@media (max-width: 959px) {
    body.black-friday {
        --bf-header-offset: 110px;
        --bf-sticky-offset: 90px;
    }
}

/* ==========================================================================
   BASE
   ========================================================================== */
#alda-black-friday {
    /* Negro corporativo #222221 y arena #EFECE8 como protagonistas, azul #394C67 en elementos pequeños y un acento dorado */
    --bf-black: #222221;
    --bf-white: #FFFFFF;
    --bf-text: #222221;
    --bf-muted: #444443;
    --bf-line: #D6D1CA;
    --bf-paper: #EFECE8;
    --bf-gold: #EFB659;
    --bf-gold-deep: #B5761F;
    --bf-blue: #394C67;
    --bf-blue-deep: #46586E;
    --bf-photo-overlay: linear-gradient(90deg, rgba(34,34,33,.96) 0%, rgba(34,34,33,.92) 23%, rgba(34,34,33,.8) 34%, rgba(34,34,33,.55) 46%, rgba(34,34,33,.18) 67%, rgba(34,34,33,.04) 100%), linear-gradient(0deg, rgba(34,34,33,.68), rgba(34,34,33,.28) 32%, transparent 65%);
    --bf-photo-overlay-mobile: linear-gradient(90deg, rgba(34,34,33,.7), rgba(34,34,33,.42) 66%, rgba(34,34,33,.2)), linear-gradient(0deg, rgba(34,34,33,.62), transparent 70%);
    /* Sin contexto de apilamiento propio (ni isolation ni z-index): la máscara de reservas común que va dentro
       (barra fija, modal de móvil, botón de reservar) usa la escala de z-index de neobookings-mask.css frente
       al header y al footer, igual que en el resto de plantillas */
    position: relative;
    width: 100%;
    min-width: 0;
    font: 400 16px/1.65 "bf-montserrat", sans-serif;
    color: var(--bf-text);
    background: var(--bf-paper);
}

/* Las reglas genéricas con :not(:where(#bf-buscador *)) excluyen la máscara de reservas común, que mantiene
   los estilos de la web (box-sizing y el reset de main/header/section no le afectan). :where() mantiene
   la especificidad de cada regla */
#alda-black-friday *,
#alda-black-friday *::before,
#alda-black-friday *::after { box-sizing: border-box; }
#alda-black-friday :where(main, header, section) { margin: 0; max-width: none; }
#alda-black-friday :where(h1, h2, h3, p, ol):not(:where(#bf-buscador *)) { margin: 0; padding: 0; }
#alda-black-friday :where(h1, h2, h3):not(:where(#bf-buscador *)) { font-family: "bf-montserrat", sans-serif; color: inherit; text-transform: none; }
#alda-black-friday a:not(:where(#bf-buscador *)),
#alda-black-friday a:not(:where(#bf-buscador *)):hover { color: inherit; }
#alda-black-friday :where(a, summary):not(:where(#bf-buscador *)):focus-visible { outline: 3px solid var(--bf-gold-deep); outline-offset: 5px; }
#alda-black-friday img:not(:where(#bf-buscador *)) { display: block; max-width: 100%; }
#alda-black-friday svg:not(:where(#bf-buscador *)) { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
#alda-black-friday .bf-container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
#alda-black-friday .bf-kicker { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
#alda-black-friday .bf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 50px; padding: 14px 25px; border: 1px solid var(--bf-black); border-radius: 12px; background: var(--bf-black); color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
#alda-black-friday .bf-btn svg { width: 19px; height: 19px; }
#alda-black-friday .bf-btn:hover { background: #000; border-color: #000; color: #fff; }
#alda-black-friday .bf-btn--white { background: #fff; color: var(--bf-black); border-color: #fff; }
#alda-black-friday .bf-btn--white:hover { background: #ECECEA; border-color: #ECECEA; color: var(--bf-black); }
/* CTA principal (Reservar mi escapada): dorado #EFB659 con texto #222221, contraste 8,7:1 */
#alda-black-friday .bf-btn--primary { background: var(--bf-gold); border-color: var(--bf-gold); color: var(--bf-black); }
#alda-black-friday .bf-btn--primary:hover { background: #F7D68F; border-color: #F7D68F; color: var(--bf-black); }
#alda-black-friday .bf-section { padding-block: 88px; }
#alda-black-friday .bf-section-heading { max-width: 850px; margin: 0 auto 42px; text-align: center; }
#alda-black-friday .bf-section-heading .bf-kicker { color: var(--bf-blue-deep); margin-bottom: 15px; }
#alda-black-friday .bf-section-heading h2 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; }
#alda-black-friday .bf-section-heading h2::after { content: ''; display: block; width: 68px; height: 3px; margin: 24px auto 0; background: var(--bf-black); }
/* Las anclas quedan por debajo del header fijo */
#alda-black-friday :where(#bf-buscador, #bf-escapadas, #bf-club, #bf-preguntas, #bf-condiciones) { scroll-margin-top: calc(var(--bf-sticky-offset) + 24px); }
#alda-black-friday .bf-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; }
#alda-black-friday .bf-asterisk { text-decoration: none; text-underline-offset: 4px; }
#alda-black-friday .bf-asterisk:hover { text-decoration: underline; }
#alda-black-friday .bf-nowrap { white-space: nowrap; }

/* ==========================================================================
   CABECERA
   ========================================================================== */
/* isolation: las capas de la cabecera (foto 0, degradado 1, contenido 2) quedan dentro de ella y no compiten
   con las de la máscara común, el header ni el footer */
#alda-black-friday .bf-hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--bf-black); padding: 0; }
#alda-black-friday .bf-hero-picture { position: absolute; inset: var(--bf-header-offset) 0 0; z-index: 0; overflow: hidden; pointer-events: none; }
#alda-black-friday .bf-hero-image { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 55%; filter: saturate(.9) brightness(.96); }
#alda-black-friday .bf-hero::after { content: ''; position: absolute; inset: var(--bf-header-offset) 0 0; z-index: 1; pointer-events: none; background: var(--bf-photo-overlay); }
#alda-black-friday .bf-hero .bf-container { position: relative; z-index: 2; width: min(1320px, calc(100% - 96px)); }
#alda-black-friday .bf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-areas: 'copy offer' 'actions offer'; align-items: start; column-gap: 56px; row-gap: 30px; padding: calc(var(--bf-header-offset) + 54px) 0 100px; }
#alda-black-friday .bf-hero-copy { grid-area: copy; min-width: 0; }
#alda-black-friday .bf-hero h1 { color: #fff; font-size: clamp(38px, 5vw, 84px); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; text-align: left; }
#alda-black-friday .bf-hero-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 27px; color: #d9d7cf; font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
#alda-black-friday .bf-hero-eyebrow::before { content: ''; display: block; flex: 0 0 auto; width: 31px; height: 1px; background: var(--bf-gold); }
#alda-black-friday .bf-hero-line { display: block; }
#alda-black-friday .bf-hero-line--lead { max-width: 11.5em; text-wrap: balance; }
#alda-black-friday .bf-hero-line--closing { margin-top: 9px; color: var(--bf-gold); font-family: "bf-mynerve", cursive; font-weight: 400; font-size: clamp(63px, 6.8vw, 110px); line-height: 1; letter-spacing: -.02em; word-spacing: .08em; }
#alda-black-friday .bf-hero-tagline { max-width: 470px; margin: 27px 0 0; color: #d1d1cd; font-size: 16px; font-weight: 400; line-height: 1.6; }
#alda-black-friday .bf-hero-actions { grid-area: actions; min-width: 0; max-width: 590px; }
#alda-black-friday .bf-date { display: flex; align-items: flex-start; gap: 11px; color: #eeeee9; font-size: 14px; font-weight: 500; line-height: 1.7; }
#alda-black-friday .bf-date svg { width: 20px; height: 20px; margin-top: 2px; }
#alda-black-friday .bf-hero-ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 27px; margin-top: 25px; }
#alda-black-friday .bf-hero-ctas .bf-btn { gap: 32px; min-height: 56px; padding: 17px 25px; border-radius: 10px; font-size: 14px; }
#alda-black-friday .bf-explore { display: inline-flex; align-items: center; gap: 9px; padding-block: 11px; color: #fff; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 5px; }
#alda-black-friday .bf-explore:hover { color: #fff; text-decoration: underline; }
#alda-black-friday .bf-explore svg { width: 17px; height: 17px; transform: rotate(90deg); }
#alda-black-friday .bf-campaign-note { max-width: 480px; margin-top: 18px; color: #d1d1cb; font-size: 12px; line-height: 1.65; }
#alda-black-friday .bf-offer { grid-area: offer; align-self: end; justify-self: end; min-width: 0; max-width: 100%; margin: 0 0 35px; }
#alda-black-friday .bf-offer-badge-link { display: block; line-height: 0; }
#alda-black-friday .bf-offer-badge { width: clamp(265px, 27.6vw, 380px); height: auto; }
#alda-black-friday .bf-hero-copy,
#alda-black-friday .bf-hero-actions,
#alda-black-friday .bf-offer { animation: bf-reveal .7s cubic-bezier(.2, .65, .3, 1) both; }
#alda-black-friday .bf-offer { animation-delay: .12s; }
#alda-black-friday .bf-hero-actions { animation-delay: .2s; }
@keyframes bf-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   MÁSCARA DE RESERVAS COMÚN
   Se pinta con la tipografía y los estilos del resto de la web, no con los de la landing.
   En esta landing no se ve sobre la cabecera: solo aparece fija abajo al hacer scroll (barra .sticky-mask
   en escritorio, botón #searchFormBtn.sticky en tablet/móvil)
   ========================================================================== */
#alda-black-friday .bf-booking-wrap {
    /* Contiene la máscara en su sitio (absoluta y oculta en escritorio). Sin z-index: no debe crear
       contexto de apilamiento (ver #alda-black-friday) */
    position: relative;
    width: min(1320px, calc(100% - 40px));
    margin: 0 auto;
    font-family: var(--font-text-family);
    font-size: 16px;
    /* Igual que el body de la web (neobookings.css) */
    line-height: 1.8em;
}

@media (min-width: 993px) {
    /* neobookings-mask.js la oculta al pasarla a la barra sticky y la vuelve a mostrar (display en línea)
       al subir; con visibility se queda oculta en su sitio sin pelear con ese estilo en línea */
    #alda-black-friday #bf-buscador .booking-wrapper {
        visibility: hidden;
    }
}

@media (min-width: 993px) and (max-width: 1100px) {
    /* La máscara común mide unos 1056px (campos de 181px): en este tramo desbordaba la página.
       Se estrechan los campos para que quepa en el ancho disponible */
    #alda-black-friday #bf-buscador .booking-wrapper {
        max-width: 100%;
    }

    #alda-black-friday #bf-buscador .neobookings-mask .form-control {
        width: 155px;
    }

    #alda-black-friday #bf-buscador .neobookings-mask .field--promo {
        width: 160px;
    }
}

@media (max-width: 992px) {
    /* En tablet/móvil la máscara es un modal a pantalla completa. Su botón de reservar no se pinta sobre la
       cabecera: solo aparece cuando black-friday.js lo fija abajo (#searchFormBtn.sticky) */
    #alda-black-friday #bf-buscador #searchFormBtn:not(.sticky) {
        display: none;
    }
}

/* ==========================================================================
   VENTAJAS
   ========================================================================== */
#alda-black-friday .bf-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 43px; padding-bottom: 49px; border-bottom: 1px solid var(--bf-line); }
#alda-black-friday .bf-benefit { display: flex; align-items: center; justify-content: center; gap: 19px; padding: 0 28px; }
#alda-black-friday .bf-benefit + .bf-benefit { border-left: 1px solid #d8d8d8; }
#alda-black-friday .bf-doodle { width: 58px; height: 58px; padding: 3px; object-fit: contain; }
#alda-black-friday .bf-doodle--coupon { width: 70px; height: 70px; transform: rotate(-8deg); }
#alda-black-friday .bf-benefit strong { display: block; color: var(--bf-black); font-size: 16px; line-height: 1.4; font-weight: 700; }
#alda-black-friday .bf-benefit p { margin-top: 4px; color: var(--bf-muted); font-size: 14px; line-height: 1.5; }

/* ==========================================================================
   INTRO
   ========================================================================== */
#alda-black-friday .bf-intro { padding-bottom: 69px; }
#alda-black-friday .bf-intro .bf-section-heading { max-width: 800px; margin-bottom: 28px; }
#alda-black-friday .bf-intro-copy { max-width: 730px; margin: 0 auto; text-align: center; }
#alda-black-friday .bf-intro-copy h3 { margin-bottom: 19px; font-size: 18px; line-height: 1.45; font-weight: 600; }
#alda-black-friday .bf-intro-copy p { color: var(--bf-muted); font-size: 15px; }
#alda-black-friday .bf-intro-copy p + p { margin-top: 14px; }

/* ==========================================================================
   HOTELES DESTACADOS
   ========================================================================== */
#alda-black-friday .bf-hotels-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
#alda-black-friday .bf-hotel { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e6e6e4; border-radius: 20px; transition: box-shadow .2s; }
#alda-black-friday .bf-hotel:hover { box-shadow: 0 10px 30px rgba(34,34,33,.08); }
#alda-black-friday .bf-hotel-photo { position: relative; overflow: hidden; aspect-ratio: 1.6; background: #dededc; }
#alda-black-friday .bf-hotel-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
#alda-black-friday .bf-hotel:hover .bf-hotel-photo img { transform: scale(1.035); }
#alda-black-friday .bf-place { position: absolute; left: 17px; bottom: 16px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 34px); padding: 5px 10px; background: #fff; border-radius: 8px; color: var(--bf-black); font-size: 12px; font-weight: 600; line-height: 1.5; }
#alda-black-friday .bf-place svg { width: 13px; height: 13px; }
#alda-black-friday .bf-hotel-info { display: flex; flex-direction: column; flex-grow: 1; padding: 25px; }
#alda-black-friday .bf-hotel-info .bf-kicker { margin-bottom: 8px; font-size: 11px; color: var(--bf-blue-deep); letter-spacing: .12em; }
#alda-black-friday .bf-hotel h3 { margin-bottom: 12px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; }
#alda-black-friday .bf-hotel h3 a { display: inline-block; padding-block: 4px; text-decoration: none; text-underline-offset: 4px; }
#alda-black-friday .bf-hotel h3 a:hover { color: var(--bf-black); text-decoration: underline; }
#alda-black-friday .bf-hotel p { margin-bottom: 23px; font-size: 14px; color: var(--bf-muted); line-height: 1.65; }
#alda-black-friday .bf-hotel .bf-btn { width: 100%; min-height: 45px; margin-top: auto; padding: 12px 16px; justify-content: space-between; background: #fff; color: var(--bf-black); border-color: var(--bf-black); border-radius: 12px; font-size: 14px; }
#alda-black-friday .bf-hotel .bf-btn:hover { background: var(--bf-black); color: #fff; border-color: var(--bf-black); }
#alda-black-friday .bf-hotels-note { margin-top: 27px; color: var(--bf-muted); font-size: 13px; text-align: center; }
#alda-black-friday .bf-hotels-note a { font-weight: 600; color: var(--bf-black); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   TRES PASOS
   ========================================================================== */
#alda-black-friday .bf-steps { padding-block: 50px; border-bottom: 1px solid var(--bf-line); }
#alda-black-friday .bf-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
#alda-black-friday .bf-steps li { display: flex; align-items: flex-start; gap: 21px; padding: 0 34px; }
#alda-black-friday .bf-steps li:first-child { padding-left: 0; }
#alda-black-friday .bf-step-number { padding-right: 20px; border-right: 1px solid rgba(34,34,33,.25); font-size: 52px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--bf-black); }
#alda-black-friday .bf-steps strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 700; }
#alda-black-friday .bf-steps p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--bf-muted); }

/* ==========================================================================
   ALDA & CO
   ========================================================================== */
#alda-black-friday .bf-club { display: grid; grid-template-columns: .9fr 1.4fr; align-items: center; gap: 48px; overflow: hidden; min-height: 280px; padding: 49px 54px; border-radius: 20px; background: var(--bf-black); color: #fff; }
#alda-black-friday .bf-club-brand { padding-right: 38px; border-right: 1px solid rgba(255,255,255,.2); }
#alda-black-friday .bf-club-name { font-size: 34.4px; font-weight: 500; line-height: 1.2; letter-spacing: -.05em; }
#alda-black-friday .bf-club-brand p + p { margin-top: 11px; font-size: 15px; color: rgba(255,255,255,.75); }
#alda-black-friday .bf-club .bf-btn { margin-top: 24px; min-height: 43px; padding: 11px 20px; font-size: 14px; }
#alda-black-friday .bf-club-offer .bf-kicker { margin-bottom: 12px; color: var(--bf-gold); font-size: 12px; }
#alda-black-friday .bf-club h3 { max-width: 540px; font-size: clamp(22.4px, 2.4vw, 32px); font-weight: 500; line-height: 1.3; letter-spacing: -.04em; }
#alda-black-friday .bf-club h3 strong { font-weight: 700; color: var(--bf-gold); }
#alda-black-friday .bf-club-offer > p { margin-top: 14px; color: rgba(255,255,255,.75); font-size: 14px; }
#alda-black-friday .bf-club-more { display: inline-block; margin-top: 14px; font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
#alda-black-friday .bf-club-more:hover { color: var(--bf-gold); }

/* ==========================================================================
   PREGUNTAS FRECUENTES
   ========================================================================== */
#alda-black-friday .bf-faq-layout { display: grid; grid-template-columns: .85fr 1.4fr; gap: 80px; align-items: start; }
#alda-black-friday .bf-faq-layout .bf-section-heading { margin: 0; text-align: left; }
#alda-black-friday .bf-faq-layout h2 { font-size: clamp(24px, 2.5vw, 32px); }
#alda-black-friday .bf-faq-layout h2::after { margin-left: 0; }
#alda-black-friday .bf-faq-intro { margin-top: 23px; color: var(--bf-muted); font-size: 15px; }
#alda-black-friday .bf-faq { border-bottom: 1px solid #C9C3BA; }
#alda-black-friday .bf-faq:first-child { border-top: 1px solid #C9C3BA; }
#alda-black-friday .bf-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 23px 2px; list-style: none; cursor: pointer; }
#alda-black-friday .bf-faq summary::-webkit-details-marker { display: none; }
#alda-black-friday .bf-faq summary::after { content: '+'; flex: 0 0 18px; font: 400 24px/1 "bf-montserrat", sans-serif; text-align: center; color: var(--bf-blue-deep); }
#alda-black-friday .bf-faq[open] summary::after { content: '−'; }
#alda-black-friday .bf-faq h3 { font-size: 15px; font-weight: 600; line-height: 1.6; }
#alda-black-friday .bf-faq-answer { padding: 0 28px 24px 2px; color: var(--bf-muted); font-size: 14px; }
#alda-black-friday .bf-faq-answer p + p { margin-top: 13px; }
#alda-black-friday .bf-legal { margin-top: 49px; padding-top: 24px; border-top: 1px solid #C9C3BA; font-size: 12px; color: var(--bf-muted); }
#alda-black-friday .bf-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 1600px) {
    #alda-black-friday .bf-hero-grid { padding-top: calc(var(--bf-header-offset) + 68px); padding-bottom: 112px; }
}

@media (max-width: 1100px) {
    #alda-black-friday .bf-hero .bf-container { width: calc(100% - 64px); }
    #alda-black-friday .bf-hero-grid { column-gap: 32px; padding-top: calc(var(--bf-header-offset) + 44px); padding-bottom: 90px; }
    #alda-black-friday .bf-offer-badge { width: 288px; }
    #alda-black-friday .bf-hotels-grid { gap: 20px; }
    #alda-black-friday .bf-hotel-info { padding: 22px; }
    #alda-black-friday .bf-benefit { padding-inline: 19px; gap: 14px; }
    #alda-black-friday .bf-benefit strong { font-size: 15px; }
    #alda-black-friday .bf-faq-layout { gap: 45px; }
    #alda-black-friday .bf-steps li { padding-inline: 23px; gap: 15px; }
    #alda-black-friday .bf-step-number { padding-right: 15px; }
}

@media (max-width: 900px) {
    #alda-black-friday .bf-container { width: calc(100% - 40px); }
    #alda-black-friday .bf-section { padding-block: 65px; }
    #alda-black-friday .bf-benefits { margin-top: 35px; padding-bottom: 35px; }
    #alda-black-friday .bf-benefit { flex-direction: column; text-align: center; gap: 12px; padding-inline: 14px; }
    #alda-black-friday .bf-doodle { width: 46px; height: 46px; padding: 2px; }
    #alda-black-friday .bf-doodle--coupon { width: 54px; height: 54px; }
    #alda-black-friday .bf-hotels-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #alda-black-friday .bf-steps ol { gap: 23px; }
    #alda-black-friday .bf-steps li { display: block; padding-inline: 0; }
    #alda-black-friday .bf-step-number { display: block; width: fit-content; margin-bottom: 14px; padding: 0; border: 0; font-size: 44px; }
    #alda-black-friday .bf-steps strong { font-size: 15px; }
    #alda-black-friday .bf-club { grid-template-columns: .85fr 1.2fr; gap: 28px; padding: 35px 30px; }
    #alda-black-friday .bf-club-brand { padding-right: 25px; }
    #alda-black-friday .bf-club-name { font-size: 30.4px; }
    #alda-black-friday .bf-faq-layout { grid-template-columns: 1fr; gap: 35px; }
    #alda-black-friday .bf-faq-layout .bf-section-heading { max-width: 620px; }
}

@media (max-width: 760px) {
    #alda-black-friday .bf-hero .bf-container { width: calc(100% - 40px); }
    #alda-black-friday .bf-hero-image { object-position: 62% center; filter: saturate(.8) brightness(.94); }
    #alda-black-friday .bf-hero::after { background: var(--bf-photo-overlay-mobile); }
    #alda-black-friday .bf-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'copy' 'offer' 'actions'; row-gap: 28px; padding-top: calc(var(--bf-header-offset) + 36px); }
    #alda-black-friday .bf-hero h1 { font-size: clamp(36px, 8.8vw, 58px); line-height: 1.04; letter-spacing: -.06em; }
    #alda-black-friday .bf-hero-eyebrow { gap: 10px; margin-bottom: 21px; font-size: 11px; letter-spacing: .1em; }
    #alda-black-friday .bf-hero-eyebrow::before { width: 22px; }
    #alda-black-friday .bf-hero-line--closing { margin-top: 7px; font-size: 48px; }
    #alda-black-friday .bf-hero-tagline { max-width: 370px; margin-top: 20px; font-size: 15px; }
    #alda-black-friday .bf-offer { align-self: start; justify-self: start; margin: 0; }
    #alda-black-friday .bf-offer-badge { width: 230px; }
    #alda-black-friday .bf-hero-actions { max-width: 100%; }
    #alda-black-friday .bf-hero-ctas { margin-top: 23px; gap: 14px 24px; }
    #alda-black-friday .bf-campaign-note { max-width: 430px; margin-top: 15px; font-size: 12px; }
}

@media (max-width: 520px) {
    #alda-black-friday .bf-container { width: calc(100% - 32px); }
    #alda-black-friday .bf-benefits { grid-template-columns: 1fr; margin-top: 31px; padding-bottom: 31px; }
    #alda-black-friday .bf-benefit { display: grid; grid-template-columns: 54px 1fr; gap: 18px; padding: 19px 14px; text-align: left; }
    #alda-black-friday .bf-doodle--coupon { width: 54px; height: 54px; justify-self: center; align-self: center; }
    #alda-black-friday .bf-benefit + .bf-benefit { border-left: 0; border-top: 1px solid var(--bf-line); }
    #alda-black-friday .bf-section { padding-block: 54px; }
    #alda-black-friday .bf-section-heading { margin-bottom: 31px; }
    #alda-black-friday .bf-section-heading h2 { font-size: 23.2px; }
    #alda-black-friday .bf-intro-copy h3 { font-size: 16.48px; }
    #alda-black-friday .bf-hotels-grid { grid-template-columns: 1fr; gap: 24px; }
    #alda-black-friday .bf-hotel-info { padding: 24px; }
    #alda-black-friday .bf-hotel h3 { font-size: 18.88px; }
    #alda-black-friday .bf-steps { padding-block: 36px; }
    #alda-black-friday .bf-steps ol { grid-template-columns: 1fr; gap: 25px; }
    #alda-black-friday .bf-steps li { display: grid; grid-template-columns: 42px 1fr; gap: 20px; }
    #alda-black-friday .bf-step-number { margin: 0; padding-top: 6px; font-size: 40px; }
    #alda-black-friday .bf-club { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
    #alda-black-friday .bf-club-brand { padding: 0 0 28px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
    #alda-black-friday .bf-club h3 { font-size: 24px; }
    #alda-black-friday .bf-faq-answer { padding-right: 9px; }
}

@media (max-width: 420px) {
    #alda-black-friday .bf-hero h1 { font-size: 36px; }
    #alda-black-friday .bf-offer-badge { width: 202px; }
    #alda-black-friday .bf-hero-ctas .bf-btn { width: 100%; justify-content: space-between; }
    #alda-black-friday .bf-explore { padding-block: 6px; }
}

@media (max-width: 360px) {
    #alda-black-friday .bf-hero h1 { font-size: 32px; }
}

/* Movimiento reducido: !important para anular cualquier animación o transición de la landing,
   sea cual sea la especificidad de la regla que la declara */
@media (prefers-reduced-motion: reduce) {
    #alda-black-friday *,
    #alda-black-friday *::before,
    #alda-black-friday *::after { animation: none !important; transition: none !important; }
}