/* ==========================================================================
   Banner de Temporada — cabecera del Home
   Campaña: Fiestas Patrias 2026 (18 de septiembre)

   Línea gráfica tomada del arte de Motel Florida que entregó Giovanni:
   script dorado "Celebramos / Fiestas Patrias", cinta tricolor, cifra gigante
   dorada, y — lo que agrega la web — un BOTÓN al landing del cupón.

   Cada motel cambia solo tres cosas: --bt-foto, --bt-acento y el %.
   ========================================================================== */

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

/* Chrome en Android infla por su cuenta el texto de los bloques grandes
   ("font boosting"): agranda las letras pero resuelve los márgenes en em
   contra el tamaño SIN inflar, así que en el teléfono la cinta se separa del
   titular y en el escritorio no. Con esto el banner mide igual en los dos. */
.bt-banner { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.bt-banner {
  /* ---- lo que se cambia por marca ---- */
  --bt-foto: none;
  --bt-foto-pos: center 55%;
  --bt-foto-pos-movil: center 45%;
  --bt-acento: #e2b455;           /* color del botón */
  --bt-acento-texto: #17120a;
  --bt-fuente: "Arsenal", Georgia, serif;   /* la tipografía del propio sitio */
  --bt-peso-titular: 700;
  --bt-peso-cifra: 700;

  /* ---- constantes de la campaña ---- */
  --bt-oro-1: #fbeaa8;
  --bt-oro-2: #e0b452;
  --bt-oro-3: #a9762a;
  --bt-rojo: #d52b1e;
  --bt-azul: #0b3f9c;
  --bt-gutter: clamp(20px, 5vw, 92px);

  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  max-height: none;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: #08080a;
  color: #fff;
  font-family: var(--bt-fuente);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Foto ---------- */
.bt-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
/* La foto va en ::before para que el zoom no arrastre el degradado */
.bt-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bt-foto);
  background-size: cover;
  background-position: var(--bt-foto-pos);
  background-repeat: no-repeat;
  transform: scale(1.02);
  will-change: transform;
  animation: bt-zoom 26s ease-in-out infinite alternate;
}
@keyframes bt-zoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.09); }
}
.bt-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.10) 30%, rgba(0,0,0,.52) 100%),
    linear-gradient(97deg, rgba(3,3,6,.90) 0%, rgba(3,3,6,.70) 34%, rgba(3,3,6,.14) 66%, rgba(3,3,6,.40) 100%);
}

/* ---------- Rejilla ---------- */
.bt-contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1580px;
  margin-inline: auto;
  padding-inline: var(--bt-gutter);
  padding-block: clamp(104px, 13vh, 150px) clamp(34px, 6vh, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
}

.bt-mensaje { position: relative; min-width: 0; max-width: min(560px, 44vw); }

/* ---------- Oro ---------- */
.bt-oro {
  background: linear-gradient(178deg,
    var(--bt-oro-1) 6%,
    var(--bt-oro-2) 42%,
    var(--bt-oro-3) 62%,
    var(--bt-oro-2) 78%,
    var(--bt-oro-1) 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,.72));
}

/* ---------- Script: "Celebramos / Fiestas Patrias" ---------- */
.bt-celebramos {
  margin: 0 0 .04em .25em;
  font-family: var(--bt-fuente);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 26px);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.75);
}

.bt-titular {
  margin: 0;
  font-family: var(--bt-fuente);
  font-style: italic;
  font-size: clamp(44px, 5.3vw, 90px);
  line-height: 1.04;
  letter-spacing: .005em;
  font-weight: var(--bt-peso-titular);
  margin-bottom: -.07em;      /* la cinta va pegada a "Fiestas Patrias" */
  overflow: visible;
}

/* Cinta tricolor bajo el script */
.bt-cinta {
  display: block;
  width: min(100%, clamp(230px, 25vw, 430px));
  height: auto;
  margin: 0 0 0 -.02em;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.6));
}

/* ---------- La cifra ---------- */
.bt-con {
  margin: .42em 0 -.06em .5em;
  font-family: var(--bt-fuente);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 27px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.72);
}

.bt-precio { position: relative; display: inline-block; }

.bt-cifra {
  display: block;
  margin: 0;
  font-family: var(--bt-fuente);
  font-style: italic;
  font-weight: var(--bt-peso-cifra);
  font-size: clamp(76px, 9.2vw, 160px);
  line-height: .88;
  letter-spacing: -.02em;
}
.bt-cifra span { font-size: .74em; }

/* Cinta tricolor cruzando por detrás de la cifra */
.bt-cinta-cifra {
  position: absolute;
  left: -4%;
  bottom: .04em;
  width: 108%;
  opacity: .88;
  height: auto;
  z-index: -1;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,.55));
}

.bt-dcto {
  margin: .1em 0 0 .6em;
  font-family: var(--bt-fuente);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.8vw, 32px);
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.72);
}

/* Moteles sin cupón (Plaza Cordillera): el gancho toma el lugar de la cifra */
.bt-banner--reserva .bt-dcto {
  max-width: 15ch;
  margin: .5em 0 0 .1em;
  font-size: clamp(36px, 3.8vw, 60px);
  line-height: 1.08;
}
.bt-banner--reserva .bt-acciones { margin-top: 30px; }
@media (max-width: 760px) {
  .bt-banner--reserva .bt-dcto { max-width: 12ch; font-size: clamp(29px, 8.5vw, 36px); }
}

/* ---------- Botón ---------- */
.bt-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: clamp(20px, 3.4vh, 36px);
}
.bt-cta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: clamp(14px, 1.6vh, 19px) clamp(26px, 2.6vw, 42px);
  border: 0;
  border-radius: 999px;
  background: var(--bt-acento);
  color: var(--bt-acento-texto);
  font-family: var(--bt-fuente);
  font-style: normal;
  font-size: clamp(15px, 1.12vw, 19px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  max-width: 100%;
  box-shadow: 0 14px 36px rgba(0,0,0,.46);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.bt-cta:hover, .bt-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 20px 44px rgba(0,0,0,.54);
  color: var(--bt-acento-texto);
}
.bt-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bt-cta svg { width: 18px; height: 18px; flex: none; }

.bt-letra {
  margin: clamp(12px, 1.8vh, 18px) 0 0;
  max-width: 46ch;
  font-style: normal;
  font-size: clamp(12px, .85vw, 14px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

/* ---------- Lateral: solo la dirección (el logo ya está en el header del sitio) ---------- */
.bt-lateral {
  justify-self: end;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(12px, 2vh, 22px);
  text-align: right;
}
.bt-direccion {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: clamp(13px, .95vw, 17px);
  line-height: 1.32;
  color: rgba(255,255,255,.9);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}
.bt-direccion svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: var(--bt-oro-2); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1024px) {
  .bt-banner { min-height: 620px; }
  .bt-mensaje { max-width: min(440px, 52vw); }
  }

/* ==========================================================================
   Móvil — una columna, el botón ocupa el ancho, el logo arriba
   ========================================================================== */
@media (max-width: 760px) {
  .bt-banner {
    height: auto;
    max-height: none;
    min-height: 100svh;
    align-items: stretch;
  }
  .bt-foto::before { background-position: var(--bt-foto-pos-movil); }
  .bt-foto::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.38) 26%, rgba(0,0,0,.68) 55%, rgba(3,3,6,.96) 100%),
      linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.08));
  }

  .bt-contenido {
    grid-template-columns: 1fr;
    align-content: end;
    gap: 16px;
    padding-block: clamp(72px, 13vh, 116px) clamp(30px, 6vh, 54px);
  }
  .bt-mensaje { max-width: none; min-width: 0; }

  .bt-celebramos { font-size: 19px; margin-left: .15em; }
  .bt-titular { font-size: clamp(44px, 13.5vw, 68px); }
  .bt-cinta { width: 66%; max-width: 300px; }
  .bt-con { font-size: 20px; }
  .bt-cifra { font-size: clamp(96px, 30vw, 150px); }
  .bt-dcto { font-size: 23px; }

  .bt-acciones { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 24px; }
  .bt-cta { justify-content: center; width: 100%; padding-block: 17px; font-size: 17px; }
  .bt-letra {
    max-width: 38ch;
    text-align: left;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: .015em;
    text-transform: none;
    color: rgba(255,255,255,.9);
  }
  .bt-direccion { font-size: 14px; line-height: 1.4; }

  .bt-lateral {
    order: 1;                /* la dirección va al pie */
    justify-self: start;
    align-self: start;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }
    .bt-direccion { font-size: 14px; }
}

/* Teléfonos angostos */
@media (max-width: 380px) {
  .bt-banner { --bt-gutter: 18px; }
  .bt-titular { font-size: 42px; }
  .bt-cifra { font-size: 100px; }
  .bt-celebramos { font-size: 17px; }
    .bt-letra { font-size: 12px; }
}


@media (prefers-reduced-motion: reduce) {
  .bt-cta { transition: none; }
  .bt-foto::before { animation: none; transform: scale(1.02); }
}

/* ==========================================================================
   Correcciones de la auditoría de Codex sobre las portadas en vivo (09-09-2026)
   Todo aquí va acotado con .bt-banner--<marca> o body:has(), así que
   desaparece solo cuando se apaga la campaña.
   ========================================================================== */

/* 1 · Cordillera usa el header transparente de Astra (ast-theme-transparent-header):
        va ABSOLUTO sobre el contenido, igual que Lujo y Florida. No hay que
        descontarle alto al banner; lo único que necesita es despejar el header
        con el padding de arriba, porque su barra es más alta que la de los otros. */
.bt-banner--cordillera .bt-contenido {
  padding-top: clamp(132px, 16vh, 176px);
}

/* 2 · Entre 761 y 1200 px los menús se parten en dos líneas y rompen el
        header. Se aprietan para que quepan en una sola. */
@media (min-width: 761px) and (max-width: 1200px) {
  body:has(.bt-banner--lujo) .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu,
  body:has(.bt-banner--florida) .elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu {
    flex-wrap: nowrap !important;
  }
  body:has(.bt-banner--lujo) .elementor-location-header .elementor-nav-menu--main .elementor-item,
  body:has(.bt-banner--florida) .elementor-location-header .elementor-nav-menu--main .elementor-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap;
    font-size: 14px;
  }

  body:has(.bt-banner--cordillera) #masthead .site-header-primary-section-right { flex-wrap: nowrap; }
  body:has(.bt-banner--cordillera) #masthead .main-header-menu > .menu-item > .menu-link {
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
  }
}

/* 3 · El header de Lujo es transparente y las banderas de la foto le pasan
        por detrás. Se le da superficie propia.
        ⚠️ El fondo va en la barra interna, NO en <header>: poner backdrop-filter
        o filter en el <header> lo vuelve bloque contenedor y rompe el
        position:fixed de su barra, que es lo que hizo desaparecer el menú. */
body:has(.bt-banner--lujo) .elementor-location-header > .e-con.e-parent {
  background-color: rgba(3, 3, 4, .92) !important;
}

/* 4 · A 1100 px el mensaje perdía presencia respecto de 1920. */
@media (min-width: 761px) and (max-width: 1200px) {
  .bt-titular { font-size: 64px; }
  .bt-cifra   { font-size: 112px; }
  .bt-cta     { font-size: 16px; }
  .bt-banner--cordillera .bt-dcto { font-size: 42px; }
}

/* 5 · Condiciones y dirección: estaban al límite de legibilidad. */
.bt-letra {
  font-size: max(13px, .85vw);
  line-height: 1.4;
  color: rgba(255, 255, 255, .90);
}
.bt-direccion {
  font-size: max(14px, .95vw);
  color: #fff;
}
.bt-banner--cordillera .bt-letra { max-width: 34ch; }

/* 8 · Cordillera: la sección "Valores" tiene min-height:60vh con el contenido
        centrado, lo que deja una zona blanca que parece el final de la página.
        Se le quita la caja y se le deja aire editorial, solo con la campaña puesta. */
body:has(.bt-banner--cordillera) .elementor-element.elementor-element-523165c {
  --min-height: 0px;
  --justify-content: flex-start;
  min-height: 0;
  padding-block: clamp(48px, 6vw, 88px);
}

/* 9 · `safe center` evita que el contenido se recorte por arriba en pantallas bajas. */
.bt-banner { align-items: safe center; }



/* ==========================================================================
   Auditoría de Codex sobre el render móvil REAL (Samsung / Chrome Android,
   412 x 705 px) — 09-09-2026. Render antes: 68/100.
   Todo va dentro del @media o acotado por marca, así que se apaga junto con
   la campaña.
   ========================================================================== */
@media (max-width: 760px) {

  /* 10 · El CTA se veía gigante: ocupaba el ancho completo, se partía en dos
          líneas y se comía ~105px de alto. Vuelve a ancho intrínseco, en una
          sola línea, con 52px de alto (sobre el mínimo tocable de 44px). */
  .bt-acciones {
    align-items: flex-start;
    margin-top: 20px;
  }
  .bt-banner--reserva .bt-acciones { margin-top: 20px; }

  .bt-cta {
    width: auto;
    max-width: 100%;
    min-height: 52px;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    font-size: clamp(13px, 3.55vw, 15px);
    line-height: 1.1;
    letter-spacing: .06em;
    white-space: nowrap;
  }

  /* 11 · En móvil se sacan las condiciones y la dirección (decisión de
          Giovanni, 09-09): se comían el tercio inferior, chocaban con el botón
          flotante de WhatsApp y obligaban a apretar todo lo de arriba. La
          pantalla queda para el mensaje y el botón. En escritorio siguen.
          El dato no se pierde: la dirección está en el pie y en el mapa, y las
          condiciones van en el cupón que descarga. */
  .bt-letra,
  .bt-lateral { display: none; }

  /* 12 · Lujo: su header es position:fixed y va ENCIMA del banner (93px de
          alto en móvil). El padding-top general es clamp(72px, 13vh, 116px),
          que en un viewport de 705px da 92px — el texto arrancaba justo donde
          termina el header y "Este 18 de septiembre" quedaba tapado.
          align-content:start evita que el contenido vuelva a subirse según su
          propia altura. */
  .bt-banner--lujo .bt-contenido {
    padding-top: calc(93px + 18px);
  }

  /* 13 · Lujo escribe en Merriweather, que deja mucho aire bajo la caja del
          titular: con el -.07em compartido la cinta quedaba a ~50px de
          "Fiestas Patrias" (lo que reclamó Giovanni). Valor ajustado MIRANDO
          el render real a 412px, no por métricas de la fuente — que aquí no
          predicen la posición: -.55em y -.34em CORTAN la palabra, -.20em la
          deja pegada. Es propio de Lujo; el resto de las marcas usa otras
          tipografías y ya calzan con el -.07em general. */

  /* 14 · Al sacar condiciones y dirección quedaron ~80px libres. No se dejan
          como hueco al pie: el mensaje se centra en la pantalla y se le
          devuelve aire y algo de presencia. */
  .bt-contenido {
    align-content: center;
    padding-block: clamp(96px, 14vh, 124px) clamp(40px, 7vh, 72px);
  }
  .bt-celebramos { font-size: 20px; margin-bottom: .10em; }
  .bt-titular    { font-size: clamp(46px, 14vw, 72px); }
  .bt-con        { font-size: 21px; }
  .bt-cifra      { font-size: clamp(104px, 32vw, 158px); }
  .bt-dcto       { font-size: 25px; }
  .bt-cinta      { width: 70%; max-width: 318px; }
  .bt-acciones   { margin-top: 28px; }
  .bt-banner--reserva .bt-acciones { margin-top: 28px; }
  .bt-banner--reserva .bt-dcto { font-size: clamp(31px, 9vw, 39px); }
}

/* ==========================================================================
   15 · El texto del botón salía BLANCO en producción, no negro: el tema pinta
        los enlaces con `.elementor-kit-N a` (especificidad 0,1,1) y le gana a
        `.bt-cta` (0,1,0). Se blinda con el color de la marca en todos los
        estados del enlace. Giovanni, 09-09: "la letra del botón que sea negra"
        — en Florida y Lujo el acento es claro y el negro es lo correcto; en
        Cordillera, Express y Saint Valentine el acento es rojo/morado oscuro y
        el negro no pasa el contraste AA, así que ahí sigue en blanco (es lo
        que ya corrigió la auditoría de Codex).
   ========================================================================== */
.bt-banner .bt-cta,
.bt-banner .bt-cta:link,
.bt-banner .bt-cta:visited,
.bt-banner .bt-cta:hover,
.bt-banner .bt-cta:focus,
.bt-banner .bt-cta:active {
  color: var(--bt-acento-texto) !important;
}

/* ==========================================================================
   Auditoría de medidas de Codex (09-09-2026) — ronda 1
   Móvil vertical 97/100 · Escritorio 96/100 · Tablet y acostado 82/100.
   ========================================================================== */

/* 16 · Lujo escribe en Merriweather, que deja mucho aire bajo la caja del
        titular. La compensación estaba encerrada en el @media móvil, así que
        en tablet y escritorio la cinta quedaba suelta de "Fiestas Patrias"
        (Codex se lo bajó a 93-94/100 en las cuatro medidas de escritorio).
        Va sin media query: el problema es de la tipografía, no del ancho. */
.bt-banner--lujo .bt-titular { margin-bottom: -.20em; }

/* 17 · Móvil ACOSTADO y cualquier pantalla baja (844x390, 740x360...).
        Era el peor caso: sobre 760px de ancho se usaba la maqueta de
        escritorio dentro de 390px de alto, así que la promoción salía
        incompleta y el header se comía el antetítulo.
        Va al FINAL del archivo a propósito: el bloque anterior estaba antes de
        las reglas móviles y perdía la cascada.

        Cómo está resuelto: el contenido se ANCLA ABAJO (align-content:end) y
        el padding-top actúa de piso de despeje del header. Así, mida lo que
        mida el contenido, nunca sube por debajo del menú. Nada en vh para el
        despeje — los padding en vh ya nos habían fallado dos veces. */
@media (max-height: 540px) and (orientation: landscape) {
  .bt-banner {
    height: 100svh;
    min-height: 0;
    align-items: stretch;
  }
  .bt-contenido {
    grid-template-columns: 1fr;
    align-content: end;
    padding-block: 96px 14px;
    gap: 0;
  }
  .bt-mensaje { max-width: min(560px, 62vw); }

  /* Igual que en móvil vertical: en 390px de alto no hay lugar para la letra
     chica ni la dirección, y encogerlas sería ilegible. */
  .bt-letra,
  .bt-lateral { display: none; }

  .bt-celebramos { font-size: 15px; margin-bottom: .02em; }
  .bt-titular    { font-size: clamp(32px, 10vh, 42px); line-height: 1; }
  .bt-cinta      { width: min(100%, 224px); }
  .bt-con        { font-size: 14px; margin: .14em 0 -.04em .4em; }
  .bt-cifra      { font-size: clamp(46px, 14vh, 64px); }
  .bt-dcto       { font-size: 15px; }

  .bt-acciones,
  .bt-banner--reserva .bt-acciones { margin-top: 10px; }
  .bt-cta        { min-height: 38px; padding: 9px 20px; font-size: 13px; gap: 8px; }
  .bt-cta svg    { width: 15px; height: 15px; }
  .bt-banner--reserva .bt-dcto {
    max-width: 20ch;
    margin-top: .34em;
    font-size: clamp(24px, 8vh, 32px);
    line-height: 1.06;
  }

  /* Piso de despeje: los headers de Lujo y Cordillera son más altos que el de
     Florida y van encima del banner. */
  .bt-banner--lujo .bt-contenido       { padding-top: 116px; }
  .bt-banner--cordillera .bt-contenido { padding-top: 112px; }
}

/* 18 · Ronda 2 de la auditoría de medidas: en Florida a 740x360 el antetítulo
        quedaba al mismo nivel que "RENOVÁNDOSE" del logo. Con el contenido
        anclado abajo, subir el padding-top no despeja nada — el bloque ya ocupa
        casi todo el alto disponible. Se compacta el conjunto para recuperar
        ~14px. Solo por debajo de 370px de alto, que es donde aprieta. */
@media (max-width: 760px) and (max-height: 370px) and (orientation: landscape) {
  .bt-celebramos { font-size: 14px; }
  .bt-titular    { font-size: 34px; }
  .bt-cifra      { font-size: 48px; }
  .bt-acciones,
  .bt-banner--reserva .bt-acciones { margin-top: 6px; }
  .bt-cta        { min-height: 36px; padding-block: 8px; }
}