/* =====================================================================================
   Layout global: cabecera (escritorio y móvil), menú móvil, panel de contacto,
   panel de reservas móvil y pie. Medidas de la original a 1920 y 375 px.
   Punto de corte de Divi: 980 px (tableta y móvil comparten cabecera).
   ===================================================================================== */

/* ---------- Franja del código promocional ---------- */
.franja {
    margin: 0;
    padding: 0.875rem 0.5rem;
    background: var(--color-arena);
    font-family: var(--fuente-franja);
    font-size: 1.05rem;           /* 16.8px */
    font-weight: 300;
    line-height: 1.4875rem;       /* 23.8px */
    color: var(--color-blanco);
    text-align: center;
}

/* ---------- Cabecera de escritorio ---------- */
.cabecera { position: relative; z-index: 50; }

.cabecera__barra {
    display: grid;
    grid-template-columns: 20% 60% 20%;
    height: var(--alto-cabecera);
    background: var(--color-blanco);
    box-shadow: 0 4px 12px 0 var(--color-sombra-cabecera);
    position: relative;
    z-index: 2;
}

.cabecera__logo {
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid var(--color-oro);
}
.cabecera__logo img { width: 16.6875rem; height: auto; }

.cabecera__centro { display: flex; flex-direction: column; min-width: 0; }

.cabecera__telefono {
    display: flex; align-items: center; justify-content: center;
    border-left: 1px solid var(--color-oro);
}
.cabecera__telefono a {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 700; line-height: 1.25rem;
    color: var(--color-marron);
}
.cabecera__telefono svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }

/* Menú principal: fila de 65 px con borde inferior, elementos repartidos (space-evenly) */
.menu { height: 4.0625rem; border-bottom: 1px solid var(--color-oro); display: flex; align-items: center; }
.menu__lista { display: flex; justify-content: space-evenly; align-items: center; width: 100%; }
.menu__item { position: relative; display: flex; padding: 0 0.6875rem; }
.menu__enlace {
    display: block;
    margin-top: 0.625rem;
    padding-bottom: 0.5rem;
    font-family: var(--fuente-titulos); font-size: var(--texto-menu); font-weight: 400; line-height: 1.0625rem;
    text-transform: uppercase; color: var(--color-marron);
    transition: opacity var(--transicion);
}
.menu__enlace:hover { opacity: 0.7; }
.menu__item--activo .menu__enlace { font-weight: 600; }
.menu__item--ofertas { background: var(--color-negro); }
.menu__item--ofertas .menu__enlace { color: var(--color-blanco); }

/* Selector de idioma con submenú desplegable */
.menu__item--idioma > .menu__enlace { padding-right: 1.25rem; position: relative; }
.menu__item--idioma > .menu__enlace::after {
    content: ""; position: absolute; right: 0.25rem; top: 0.3rem;
    width: 0.4rem; height: 0.4rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.menu__submenu {
    position: absolute; top: 100%; left: 0; z-index: 10;
    width: 15rem; padding: 1.25rem 0;
    background: var(--color-blanco); border-top: 3px solid var(--color-oro);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s;
}
.menu__item--idioma:hover .menu__submenu,
.menu__item--idioma:focus-within .menu__submenu { opacity: 1; visibility: visible; }
.menu__submenu a {
    display: block; padding: 0.375rem 1.25rem;
    font-family: var(--fuente-titulos); font-size: var(--texto-menu); line-height: 1.0625rem;
    text-transform: uppercase; color: var(--color-marron);
    transition: background-color 0.2s ease-in-out;
}
.menu__submenu a:hover { background: rgba(0, 0, 0, 0.03); }

/* ---------- Motor de reservas (paquete Softme.MotorReservas: <motor-softme class="motor ...">) ---------- */
.motor { width: 100%; }
.motor .motorsoftme__form { display: flex; align-items: stretch; width: 100%; }
.motor--cabecera .motorsoftme__form { height: 4.0625rem; align-items: center; }
.motor .motorsoftme__field { flex: 0 0 37.5%; display: flex; align-items: center; padding: 0 3px; }
.motor .motorsoftme__actions { flex: 0 0 25%; display: flex; padding: 0 3px; }
.motor .motorsoftme__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.motor .motorsoftme__input {
    flex: 1; min-width: 0; height: 2.5625rem; padding: 0.625rem;
    border: 1px solid var(--color-oro); border-radius: 0; background: transparent;
    font-family: var(--fuente-base); font-size: 0.875rem; font-weight: 400;
    text-transform: uppercase; color: var(--color-oro);
}
.motor .motorsoftme__input--fechas { cursor: pointer; }
.motor .motorsoftme__input::placeholder { color: var(--color-oro); opacity: 1; }
.motor .motorsoftme__icon { flex: 0 0 2.55rem; height: 1.25rem; color: var(--color-oro); fill: currentColor; }
.motor .motorsoftme__submit {
    width: 100%; height: 2.6875rem; padding: 1px 6px;
    border: 1px solid var(--color-oro); border-radius: 0; background: var(--color-blanco);
    font-family: var(--fuente-base); font-size: 0.875rem; font-weight: 400;
    text-transform: uppercase; color: var(--color-oro); cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.motor .motorsoftme__submit:hover { background: #d1c1a0; border-color: #d1c1a0; color: var(--color-blanco); }

/* Calendario del motor (DOM de Flatpickr, montado en <body>): tema de la web original */
.flatpickr-calendar .flatpickr-day { height: 50px; max-width: none; line-height: normal; color: #404848; }
.flatpickr-calendar .flatpickr-day.today { border-color: #d1c1a0; }
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange { background: #d1c1a0; border-color: #d1c1a0; color: var(--color-blanco); }
.flatpickr-calendar .flatpickr-day.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 #d1c1a0; }
.dia-con-precio, .dia-con-x {
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    width: 100%; height: 100%; padding: 2px 0;
}
.dia-con-precio .numero-dia, .dia-con-x .numero-dia { font-size: 0.7em; font-weight: 800; }
.dia-con-precio .precio, .dia-con-x .x { font-size: 1em; color: #707070; }
.dia-con-precio .noches { display: flex; align-items: center; font-size: 0.7em; color: #707070; }
.dia-con-precio .imageLuna2 {
    width: 10px; height: 10px; margin-left: 4px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23707070' d='M12.3 22A10 10 0 0 1 9.4 2.4a1 1 0 0 1 1.2 1.3 8 8 0 0 0 9.7 9.7 1 1 0 0 1 1.3 1.2A10 10 0 0 1 12.3 22Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.flatpickr-day.selected .precio, .flatpickr-day.startRange .precio, .flatpickr-day.endRange .precio,
.flatpickr-day.selected .noches, .flatpickr-day.startRange .noches, .flatpickr-day.endRange .noches { color: var(--color-blanco); }
.flatpickr-calendar.cargando .dayContainer { opacity: 0.6; }

/* ---------- Cabecera móvil (oculta en escritorio) ---------- */
.cabecera-movil, .motor-movil { display: none; }

/* ---------- Panel de contacto (entra desde la derecha, 0,5 s) ---------- */
.panel-contacto {
    position: fixed; inset: 0 auto 0 100%; z-index: 9999999;
    width: 100%; height: 100%; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
    padding: 3.375rem 0;
    background: var(--color-crema) url("../img/shared/Fondo-footer.webp") center / cover no-repeat;
    transition: left 0.5s ease-in-out;
}
.panel-contacto.is-abierto, .panel-contacto:target { left: 0; }
.panel-contacto__logo { display: flex; justify-content: center; padding: 1.6875rem 0; margin: 3.5rem auto; }
.panel-contacto__logo img { width: 14.3125rem; }
.panel-contacto__cerrar {
    position: absolute; top: 5.0625rem; right: 6rem;
    display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem;
    font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 300; line-height: 2.125rem;
    color: var(--color-marron);
}
.panel-contacto__cerrar svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.panel-contacto__cerrar-corto { display: none; }
.panel-contacto__cuerpo {
    display: grid; grid-template-columns: 1fr 1fr; gap: 5.28rem;
    width: 80%; margin: 3.5rem 6rem 3.5rem auto; padding: 1.6875rem 0;
}
.panel-contacto__form { max-width: 26.2rem; }
.panel-contacto__datos { position: relative; }
.panel-contacto__datos .datos-contacto { margin-bottom: 3.125rem; }
.panel-contacto__maps { position: absolute; top: 3rem; left: 50%; transform: translateX(-50%); }

/* Datos de contacto (pie y panel) */
.datos-contacto p {
    padding: 0;
    font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 300; line-height: 1.875rem;
    color: var(--color-marron);
}
.datos-contacto a { font-weight: 500; }

/* Redes sociales */
.redes { display: flex; justify-content: space-between; }
.redes a { transition: opacity 300ms ease-in-out; }
.redes a:hover { opacity: 0.5; }
.redes img { width: 2.9375rem; height: 2.9375rem; }
.redes--contacto { width: 60%; }

/* ---------- Formulario "Enviar mail" (Divi: líneas inferiores, mayúsculas) ---------- */
.form__titulo {
    margin: 0 0 0.625rem; padding: 0;
    font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 700; line-height: 1.25rem;
    color: var(--color-marron);
}
.form__campo { padding: 0 0 0.9375rem; }
.form__campo input, .form__campo textarea {
    display: block; width: 100%;
    padding: 0.5rem 0;
    border: 0; border-bottom: 1px solid var(--color-marron); border-radius: 0;
    background: transparent;
    font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 300;
    text-transform: uppercase; color: var(--color-marron);
}
.form__campo textarea { height: 5.625rem; resize: vertical; }
.form--pie .form__campo textarea { height: 5rem; }
.form__campo input::placeholder, .form__campo textarea::placeholder { color: var(--color-marron); opacity: 1; }
.form__campo input:focus, .form__campo textarea:focus { outline: none; border-bottom-width: 2px; }
.form__pie { padding-top: 2.25rem; }
.form__nota { padding-top: 0.75rem !important; font-family: var(--fuente-titulos); font-size: 0.75rem; font-weight: 300; line-height: 1.4; color: var(--color-marron); }
.form__nota a { text-decoration: underline; }
.form__aviso { margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; font-family: var(--fuente-titulos); font-size: 0.875rem; }
.form__aviso--ok { background: rgba(111, 84, 35, 0.1); color: var(--color-marron); }
.form__aviso--error { background: #fbeaea; color: #8a1f11; }
.form__trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .is-invalido { border-bottom-color: #b3261e; }

/* Botón blanco con borde marrón (Enviar mail, Ver en Maps) */
.boton {
    display: inline-block; cursor: pointer;
    font-family: var(--fuente-titulos); font-size: var(--texto-boton); font-weight: 500; line-height: 1.4875rem;
    text-transform: uppercase; color: var(--color-marron);
    transition: all 300ms ease;
}
.boton--blanco { padding: 0.2625rem 0.875rem; background: var(--color-blanco); border: 1px solid var(--color-marron); }
.boton--blanco:hover { background: var(--color-marron); color: var(--color-blanco); }

/* ---------- Pie ---------- */
.pie__logos {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 5.28rem; align-items: start;
    width: 80%; max-width: 160rem; margin: 0 auto; padding: 1.6875rem 0;
}
.pie__rotulo {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3.7rem; align-items: center;
    width: 80%; max-width: var(--ancho-contenido); margin: 6rem auto 0; padding: 1.6875rem 0 3.6rem;
}
.pie__linea { display: block; height: 1px; background: var(--color-oro); }
.pie__linea:last-child { margin-left: 2rem; }
.pie__titulo {
    padding: 0; font-family: var(--fuente-titulos); font-size: 2rem; font-weight: 300; line-height: 2rem;
    color: var(--color-oro-claro); text-align: center;
}

.pie__marmol {
    padding-bottom: 3.375rem;
    background: var(--color-crema) url("../img/shared/Fondo-footer.webp") center / cover no-repeat;
}
.pie__marco {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4.29rem;
    width: 65%; margin: 0 18% 3.6rem 20%;
}
.pie__vertical { display: block; width: 1px; height: 10.25rem; background: var(--color-oro); }
.pie__vertical:last-child { justify-self: end; }
.pie__logo { display: flex; justify-content: center; margin-top: 4.628rem; }
.pie__logo img { width: 10.8125rem; }

.pie__columnas {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4.29rem;
    width: 65%; margin: 0 18% 3.6rem 20%; padding: 1.6875rem 0;
}
.pie__enlaces { justify-self: center; }
.pie__enlaces p { padding: 0; font-family: var(--fuente-titulos); font-size: 1.25rem; font-weight: 300; line-height: 2.75rem; color: var(--color-marron); }
.pie__enlaces .pie__enlaces-titulo { font-weight: 700; }
.pie__enlaces a { transition: opacity var(--transicion); }
.pie__enlaces a:hover { opacity: 0.7; }
.pie__datos .datos-contacto { margin-bottom: 3.125rem; }

.pie__creditos {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5.28rem; align-items: start;
    width: 80%; margin: 0 auto;
    font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 300; line-height: 1.4875rem; color: var(--color-marron);
}
.pie__creditos p { padding: 0; }
.pie__creditos strong { font-weight: 500; }
.pie__legales { text-align: center; }
.pie__copy { text-align: right; }

/* =====================================================================================
   Tableta y móvil (≤ 980 px)
   ===================================================================================== */
@media (max-width: 980px) {
    /* Como en la original, la cabecera fija tapa la parte superior del hero (que ocupa 100vh);
       las páginas sin hero dejan el hueco de la cabecera */
    main > :first-child:not(.hero):not(.landing-hero) { margin-top: var(--alto-cabecera-movil); }
    .cabecera { display: none; }

    .cabecera-movil {
        display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
        background: var(--color-fondo-movil);
    }
    .cabecera-movil__barra {
        display: flex; align-items: center; justify-content: space-between;
        height: 3.75rem; padding: 0 5%; position: relative; z-index: 3; background: var(--color-fondo-movil);
    }
    .cabecera-movil__logo img { width: 5.5625rem; height: auto; }
    .hamburguesa { padding: 0; border: 0; background: none; width: 1.5rem; height: 1.5rem; color: var(--color-marron); }
    .hamburguesa svg { width: 100%; height: 100%; fill: currentColor; }

    .boton-reservar {
        display: block; width: 100%; height: 3.125rem; border: 0; position: relative; z-index: 2;
        background: var(--color-fondo-movil); box-shadow: 0 4px 12px 0 var(--color-sombra-cabecera);
        font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 300; color: var(--color-marron); text-transform: uppercase;
    }
    .franja--movil { position: relative; z-index: 2; }

    /* Menú móvil a pantalla completa: se despliega hacia abajo bajo la barra */
    .menu-movil {
        position: fixed; top: 3.75rem; left: 0; right: 0; height: calc(100dvh - 3.75rem); z-index: 9999;
        padding: 1.171875rem;
        border-top: 1px solid var(--color-oro);
        background: rgba(241, 239, 227, 0.5) url("../img/shared/Fondo-menu-movil.png") center / cover no-repeat;
        clip-path: inset(0 0 100% 0); visibility: hidden;
        transition: clip-path 0.5s ease-in-out, visibility 0s linear 0.5s;
        overflow-y: auto;
    }
    .menu-movil.is-abierto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.5s ease-in-out, visibility 0s; }
    .menu-movil__cerrar {
        position: absolute; top: 2.35rem; right: 1.2275rem; padding: 0; border: 0; background: none;
        font-family: var(--fuente-titulos); font-size: 1rem; font-weight: 300; line-height: 1.625rem; color: var(--color-marron);
    }
    .menu-movil__lista { margin-top: 3.3154rem; text-align: center; }
    .menu-movil__lista a {
        display: block; padding: 0.625rem 1.1rem;
        font-family: var(--fuente-titulos); font-size: 1.125rem; font-weight: 300; line-height: 1.625rem;
        text-transform: uppercase; color: var(--color-texto);
    }
    .menu-movil__item--activo > a { font-weight: 500; }
    .menu-movil__idiomas ul { display: flex; justify-content: space-evenly; }
    .menu-movil__idiomas a { padding: 0.625rem 0.07rem; }

    /* Panel de reservas móvil: baja desde arriba hasta debajo de RESERVAR */
    .motor-movil {
        display: block; position: fixed; left: 0; right: 0; top: -100%; z-index: 1;
        height: 44.5rem; padding: 3.125rem 5%;
        background: var(--color-crema) url("../img/shared/Fondo-footer.webp") center / cover no-repeat;
        transition: top 0.5s ease-in-out;
    }
    .motor-movil.is-abierto { top: 6.25rem; z-index: 999; }
    .motor--movil .motorsoftme__form { flex-direction: column; gap: 0.9375rem; margin-top: 1.25rem; }
    .motor--movil .motorsoftme__field, .motor--movil .motorsoftme__actions { flex: none; width: 100%; }
    .motor--movil .motorsoftme__input, .motor--movil .motorsoftme__submit { height: 1.8125rem; font-size: 0.7rem; padding: 0.25rem 0.625rem; }

    /* Panel de contacto en móvil: columna de 300 px */
    .panel-contacto { justify-content: flex-start; padding: 3.125rem 0; }
    .panel-contacto__logo { width: 18.75rem; margin: 0 auto; padding: 1.875rem 0; }
    .panel-contacto__logo img { width: 18.75rem; height: 12.5rem; object-fit: contain; }
    .panel-contacto__cerrar { top: 1.875rem; right: 50%; transform: translateX(50%); text-transform: uppercase; }
    .panel-contacto__cerrar-texto { display: none; }
    .panel-contacto__cerrar-corto { display: inline; }
    .panel-contacto__cuerpo { grid-template-columns: 1fr; gap: 1.875rem; width: 18.75rem; margin: 0 auto; }
    .panel-contacto__maps { position: static; transform: none; margin: 0 0 1.875rem; }
    .redes--contacto { width: 100%; justify-content: space-around; }

    /* Pie apilado */
    /* Pie apilado (medidas de la original a 375 px: columnas de 300 px, separación 30 px, textos centrados) */
    .pie__logos { grid-template-columns: 1fr; gap: 1.875rem; width: 80%; padding: 1.875rem 0; }
    .pie__logos img { width: 100%; height: auto; }
    .pie__rotulo { grid-template-columns: 27.7% 1fr 27.7%; width: 100%; gap: 0; margin-top: 1.17rem; padding: 1.875rem 0 0; }
    .pie__linea:first-child { margin-right: 50%; }
    .pie__linea:last-child { margin-left: 50%; }
    .pie__titulo { font-size: 1.375rem; line-height: 1.375rem; }
    .pie__marco { display: block; width: 65%; margin: 0 auto; padding-bottom: 1.875rem; }
    .pie__vertical { display: none; }
    .pie__logo { margin-top: 2.285rem; }
    .pie__columnas { grid-template-columns: 1fr; gap: 1.875rem; width: 80%; margin: 0 auto 1.17rem; padding: 1.875rem 0; }
    .pie__columnas .form__titulo { font-size: 1rem; line-height: 1rem; }
    .pie__enlaces { justify-self: center; text-align: center; margin: 1.875rem 0 0.9375rem; }
    .pie__enlaces p { font-size: 1rem; line-height: 1.4875rem; padding-bottom: 1.25rem; }
    .pie__datos { text-align: center; }
    .pie__datos .datos-contacto p { font-size: 1rem; line-height: 1.5rem; }
    .redes { justify-content: space-around; }
    .pie__creditos { grid-template-columns: 1fr; gap: 1.875rem; width: 80%; text-align: center; }
    .pie__copy { text-align: center; }
}

/* ---------- Banner de cookies (medidas de #cookie-consent-banner de la original) ---------- */
.cookies { position: fixed; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 40000; }
.cookies[hidden] { display: none; }
.cookies__panel {
    display: flex; flex-direction: column; align-items: center; padding: 1.25rem;
    background: var(--color-blanco); box-shadow: 0 3px 30px rgba(0, 0, 0, 0.16);
    font-family: system-ui, sans-serif; color: var(--color-negro);
}
.cookies__titulo { margin: 0 0 1.25rem; padding-bottom: 0.625rem; font-size: 1.875rem; font-weight: 700; line-height: 2.3125rem; color: var(--color-gris-oscuro); text-align: center; }
.cookies__texto { margin: 0 0 1.25rem; font-size: 1.125rem; line-height: 1.625rem; text-align: center; }
.cookies__opciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.cookies__opciones label { font-size: 1.125rem; line-height: 1.625rem; cursor: pointer; }
.cookies__botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin-bottom: 1.25rem; }
.cookies__btn {
    width: 12.5rem; height: 3.125rem; padding: 1px 6px; border: 0;
    background: #a7a7a7; color: var(--color-blanco); font-family: system-ui, sans-serif; font-size: 1.125rem; font-weight: 700;
    transition: opacity 0.2s;
}
.cookies__btn:hover { opacity: 0.85; }
.cookies__btn--todo { background: var(--color-oro-claro); }
.cookies-abrir {
    position: fixed; right: 1.25rem; bottom: 0; z-index: 39999;
    width: 3.125rem; height: 3.5625rem; padding: 0.9375rem; border: 0; border-radius: 5px 5px 0 0;
    background: var(--color-oro-claro);
}
.cookies-abrir[hidden] { display: none; }
.cookies-abrir img { width: 1.25rem; height: 1.25rem; }

@media (max-width: 767px) {
    .cookies { left: 0.625rem; right: 0.625rem; bottom: 0.625rem; }
    .cookies__titulo { font-size: 1.375rem; line-height: 1.75rem; margin-bottom: 0.625rem; }
    .cookies__texto { font-size: 0.875rem; line-height: 1.25rem; max-height: 30vh; overflow-y: auto; }
    .cookies__opciones { gap: 0.625rem; }
    .cookies__opciones label { font-size: 0.9375rem; }
    .cookies__btn { width: 100%; height: 2.75rem; font-size: 1rem; }
    .cookies__botones { width: 100%; gap: 0.625rem; }
}