/* ============================================================
   COMPLEJO SANTINO — Sistema de diseño
   Todo el color y el espaciado sale de las variables de :root.
   Si hay que cambiar la marca, se cambia acá y en ningún otro lado.
   ============================================================ */

:root {
    /* --- Marca ---
       El dorado se parte en dos: uno para ACCIONES (texto y botones,
       contraste >= 4.5:1) y uno DECORATIVO (superficies y filetes).
       El original (#B8860B) daba 3.25:1 y no se leía. */
    --oro-accion:      #8A6508;   /* 5.32:1 sobre blanco */
    --oro-accion-osc:  #6E5106;   /* 7.39:1 — hover */
    --oro-deco:        #C9A227;   /* solo superficies y filetes */
    --oro-sobre-verde: #E0C158;   /* 5.51:1 sobre --verde */
    --oro-tenue:       #F4E9CE;   /* fondos suaves */

    /* Verde profundo: el parque y la piscina son la identidad real
       del complejo, y da una superficie oscura que sí contrasta. */
    --verde:      #2F4A3C;   /* blanco encima: 9.70:1 */
    --verde-osc:  #22372C;   /* blanco encima: 12.72:1 */

    /* --- Neutros cálidos --- */
    --tinta:      #1C1814;   /* 16.64:1 sobre papel */
    --tinta-2:    #5A5248;   /*  7.24:1 — secundario */
    --tinta-3:    #726A5E;   /*  5.33:1 — terciario */
    --papel:      #FAF8F4;
    --superficie: #FFFFFF;
    --superficie-2: #F5F1EA;
    --linea:      #E4DDD1;
    --linea-suave: #EFEAE1;

    /* --- Estados --- */
    --exito: #1D6F42;
    --error: #B3261E;
    --aviso: #8A5A00;
    --exito-fondo: #EAF5EE;
    --error-fondo: #FBEDEC;
    --aviso-fondo: #FBF3E3;
    /* Verde de marca de WhatsApp con texto OSCURO: 8.9:1.
       Con texto blanco daba 3.09:1 y no pasaba. */
    --whatsapp: #25D366;
    --whatsapp-osc: #1FB855;
    --whatsapp-texto: #10271A;

    /* --- Tipografía --- */
    --fuente-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --fuente-texto: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* --- Espaciado --- */
    --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;
    --e-4: 1rem;     --e-5: 1.5rem;   --e-6: 2rem;
    --e-7: 3rem;     --e-8: 4rem;     --e-9: 6rem;

    /* --- Radios --- */
    --r-sm: 4px;  --r-md: 8px;  --r-lg: 14px;

    /* --- Sombras --- */
    --s-sm: 0 1px 3px rgba(28,24,20,.07);
    --s-md: 0 4px 14px rgba(28,24,20,.09);
    --s-lg: 0 12px 32px rgba(28,24,20,.13);

    --transicion: 180ms cubic-bezier(.4,0,.2,1);
    --alto-nav: 76px;
}

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

body, h1, h2, h3, h4, p, ul, ol, figure, blockquote {
    margin: 0;
    padding: 0;
}

ul { list-style: none; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--fuente-texto);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    line-height: 1.15;
    color: var(--tinta);
    text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5rem); font-weight: 500; letter-spacing: .01em; }
h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
h4 { font-size: 1.125rem; font-family: var(--fuente-texto); font-weight: 600; }

.etiqueta {
    font-family: var(--fuente-texto);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

a { color: var(--oro-accion); }
a:hover { color: var(--oro-accion-osc); }

/* ---------- Foco visible ---------- */
:focus-visible {
    outline: 3px solid var(--oro-accion);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Al cambiar de sección se le da foco al título para los lectores de
   pantalla. Ese foco NO debe dibujar recuadro: se veía como un borde roto
   pegado a la barra. Solo se oculta en elementos que no son navegables. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

.saltar-al-contenido {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: var(--tinta);
    color: #fff;
    padding: var(--e-3) var(--e-5);
    border-radius: 0 0 var(--r-md) 0;
}
.saltar-al-contenido:focus {
    left: 0;
    color: #fff;
}

/* ---------- Layout ---------- */
.contenedor {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Mejora progresiva: por defecto TODAS las secciones se ven, así la página
   funciona como scroll largo aunque el JavaScript falle o no cargue.
   El JS agrega .js en <html> y recién ahí pasa a mostrar una por vez. */
.seccion {
    display: block;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    border-bottom: 1px solid var(--linea-suave);
}
.js .seccion {
    display: none;
    border-bottom: 0;
}
.js .seccion.activa {
    display: block;
    animation: aparecer .35s ease-out;
}

/* [hidden] necesita ganarle al display:grid del hero */
.hero[hidden] { display: none; }

/* La barra de arriba es fija y tapa el comienzo de la sección: el título
   quedaba a 12 px de ella y se veía cortado. Se le suma el alto de la barra
   al relleno superior de la sección que está a la vista. */
.js .seccion.activa {
    padding-top: calc(var(--alto-nav) + clamp(1.5rem, 4vw, 2.5rem));
}

/* Para los saltos por ancla (y el modo sin JavaScript) */
.seccion { scroll-margin-top: calc(var(--alto-nav) + 1rem); }

@keyframes aparecer {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.cabecera-seccion {
    max-width: 60ch;
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.cabecera-seccion .etiqueta { display: block; margin-bottom: var(--e-3); }
.cabecera-seccion p {
    margin-top: var(--e-4);
    font-size: 1.0625rem;
    color: var(--tinta-2);
    max-width: 58ch;
}

.subtitulo-grupo {
    font-family: var(--fuente-texto);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tinta-3);
    padding-bottom: var(--e-3);
    border-bottom: 1px solid var(--linea);
    margin-block: var(--e-8) var(--e-5);
}
.subtitulo-grupo:first-of-type { margin-top: 0; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */
.barra-nav {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--alto-nav);
    background: rgba(250, 248, 244, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    z-index: 1000;
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.barra-nav.desplazada {
    border-bottom-color: var(--linea);
    box-shadow: var(--s-sm);
}

.nav-interior {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-5);
}

.marca {
    display: inline-flex;
    align-items: center;
    gap: var(--e-3);
    text-decoration: none;
    flex: none;
}
.marca img { height: 48px; width: 48px; }
.marca-texto {
    font-family: var(--fuente-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1.1;
}
.marca-texto small {
    display: block;
    font-family: var(--fuente-texto);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-3);
}

.menu { display: flex; align-items: center; gap: var(--e-1); }

.menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--e-2) var(--e-4);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--tinta-2);
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: color var(--transicion), background var(--transicion);
}
.menu a:hover { color: var(--tinta); background: var(--superficie-2); }
.menu a[aria-current="page"] {
    color: var(--oro-accion-osc);
    font-weight: 600;
    background: var(--oro-tenue);
}

.nav-acciones { display: flex; align-items: center; gap: var(--e-3); flex: none; }

.boton-menu {
    display: none;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    color: var(--tinta);
    font-size: 1.25rem;
    cursor: pointer;
}

/* ============================================================
   BOTONES
   ============================================================ */
.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 48px;
    padding: var(--e-3) var(--e-5);
    font-family: var(--fuente-texto);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--transicion), border-color var(--transicion),
                color var(--transicion), transform var(--transicion);
}
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton:not(:disabled):active { transform: translateY(1px); }

.boton-principal { background: var(--oro-accion); color: #fff; }
.boton-principal:hover:not(:disabled) { background: var(--oro-accion-osc); color: #fff; }

.boton-secundario {
    background: transparent;
    color: var(--tinta);
    border-color: var(--linea);
}
.boton-secundario:hover:not(:disabled) {
    background: var(--superficie-2);
    border-color: var(--tinta-3);
    color: var(--tinta);
}

.boton-claro {
    background: rgba(255,255,255,.14);
    color: #fff;
    border-color: rgba(255,255,255,.55);
    backdrop-filter: blur(6px);
}
.boton-claro:hover:not(:disabled) { background: rgba(255,255,255,.26); color: #fff; }

.boton-whatsapp { background: var(--whatsapp); color: var(--whatsapp-texto); }
.boton-whatsapp:hover:not(:disabled) { background: var(--whatsapp-osc); color: var(--whatsapp-texto); }

.boton-ancho { width: 100%; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    /* Llena la pantalla completa: antes se topaba a 780 px y en monitores
       grandes asomaba la sección crema de abajo.
       Solo vh: algunos motores parsean svh pero lo resuelven a 0. */
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: calc(var(--alto-nav) + var(--e-8)) 0 var(--e-9);
    background-image: url("../images/prueba1.jpeg");
    background-size: cover;
    background-position: center 62%;
    isolation: isolate;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Más oscuro que el original: el texto blanco no se leía sobre el pasto. */
    /* Con .55 el texto blanco caia a 4.16:1 sobre el pasto al sol.
       Con .62 el peor caso (pixel blanco) da 5.31:1. */
    background: linear-gradient(180deg,
        rgba(20,17,13,.66) 0%,
        rgba(20,17,13,.62) 45%,
        rgba(20,17,13,.78) 100%);
}

.hero-contenido {
    text-align: center;
    color: #fff;
    max-width: 44rem;
    padding-inline: var(--e-5);
}
/* El dorado sobre foto no llega a 4.5:1 porque el fondo es variable. */
.hero .etiqueta { color: rgba(255,255,255,.95); }
.hero h1 { color: #fff; margin-block: var(--e-4) var(--e-5); }
.hero p {
    font-size: clamp(1.0625rem, 2vw, 1.1875rem);
    color: rgba(255,255,255,.94);
    max-width: 38rem;
    margin-inline: auto;
}
.hero-botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
    justify-content: center;
    margin-top: var(--e-7);
}

.hero-datos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--e-3) var(--e-6);
    margin-top: var(--e-7);
    padding-top: var(--e-5);
    border-top: 1px solid rgba(255,255,255,.22);
    font-size: .875rem;
    color: rgba(255,255,255,.9);
}
.hero-datos span { display: inline-flex; align-items: center; gap: var(--e-2); }
.hero-datos i { color: var(--oro-sobre-verde); }

/* En notebooks de pantalla baja el hero completo no entraba: el título
   tomaba 3 líneas y el contenido se salía 94 px por abajo. Acá se achica
   el bloque para que entre entero sin dejar de llenar la pantalla. */
@media (min-width: 901px) and (max-height: 820px) {
    .hero {
        padding-block: calc(var(--alto-nav) + var(--e-4)) var(--e-5);
    }
    .hero h1 {
        font-size: clamp(2.25rem, 4vw, 3.5rem);
        margin-block: var(--e-3) var(--e-4);
    }
    .hero p { font-size: 1rem; }
    .hero-botones { margin-top: var(--e-5); }
    .hero-datos { margin-top: var(--e-5); padding-top: var(--e-4); }
}

/* ============================================================
   REJILLAS DE CONTENIDO
   ============================================================ */
.rejilla-ventajas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--e-4);
}
.ventaja {
    display: flex;
    gap: var(--e-4);
    padding: var(--e-5);
    background: var(--superficie);
    border: 1px solid var(--linea-suave);
    border-radius: var(--r-md);
}
.ventaja-icono {
    flex: none;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    background: var(--oro-tenue);
    color: var(--oro-accion-osc);
    border-radius: var(--r-sm);
    font-size: 1.0625rem;
}
.ventaja h4 { margin-bottom: var(--e-1); }
.ventaja p { font-size: .9375rem; color: var(--tinta-2); }

.panel-horarios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--e-5);
    margin-top: var(--e-7);
    padding: var(--e-6);
    background: var(--verde);
    color: #fff;
    border-radius: var(--r-lg);
}
.panel-horarios .etiqueta { color: var(--oro-sobre-verde); }
.horario strong {
    display: block;
    font-size: 1.0625rem;
    margin-top: var(--e-1);
}
.horario span { font-size: .9375rem; color: rgba(255,255,255,.85); }
.panel-nota {
    grid-column: 1 / -1;
    font-size: .8125rem;
    color: rgba(255,255,255,.75);
    border-top: 1px solid rgba(255,255,255,.18);
    padding-top: var(--e-4);
}

/* ============================================================
   HABITACIONES
   ============================================================ */
.rejilla-habitaciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--e-5);
}

.habitacion {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: box-shadow var(--transicion), transform var(--transicion);
}
.habitacion:hover { box-shadow: var(--s-lg); transform: translateY(-3px); }

.habitacion-foto {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--superficie-2);
    overflow: hidden;
}
.habitacion-foto img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.habitacion:hover .habitacion-foto img { transform: scale(1.04); }

.insignia {
    position: absolute;
    top: var(--e-4); left: var(--e-4);
    padding: var(--e-1) var(--e-3);
    background: rgba(255,255,255,.94);
    color: var(--tinta);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: var(--r-sm);
}

.habitacion-cuerpo {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--e-4);
    padding: var(--e-5);
}

.habitacion-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--e-4);
    flex-wrap: wrap;
}
.habitacion-capacidad { font-size: .875rem; color: var(--tinta-3); white-space: nowrap; }

.precio { display: flex; align-items: baseline; gap: var(--e-2); flex-wrap: wrap; }
.precio-monto {
    font-family: var(--fuente-texto);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.precio-desde { font-size: .8125rem; color: var(--tinta-3); }
.precio[data-estado="cargando"] .precio-monto {
    color: var(--tinta-3);
    font-size: 1rem;
    font-weight: 500;
}

.amenities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--e-2) var(--e-4);
    font-size: .9375rem;
    color: var(--tinta-2);
}
.amenities li { display: flex; gap: var(--e-2); align-items: baseline; }
.amenities i { color: var(--oro-accion); font-size: .75rem; flex: none; }
.amenities li.destacado { color: var(--tinta); font-weight: 500; }

.habitacion-cuerpo .boton { margin-top: auto; }

.aviso-mascotas {
    margin-top: var(--e-7);
    padding: var(--e-6);
    background: var(--oro-tenue);
    border-radius: var(--r-lg);
}
.aviso-mascotas ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--e-2) var(--e-5);
    margin-top: var(--e-4);
}
.aviso-mascotas li { display: flex; gap: var(--e-2); font-size: .9375rem; }
.aviso-mascotas i { color: var(--oro-accion-osc); flex: none; margin-top: .35em; font-size: .7rem; }
.aviso-mascotas .nota { margin-top: var(--e-4); font-size: .8125rem; color: var(--tinta-2); }

/* ============================================================
   GALERÍA
   ============================================================ */
.rejilla-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--e-3);
}
.galeria-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    background: var(--superficie-2);
    border-radius: var(--r-md);
    overflow: hidden;
    cursor: zoom-in;
    display: block;
    width: 100%;
}
.galeria-item img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 400ms ease;
}
.galeria-item:hover img { transform: scale(1.05); }
.galeria-pie {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--e-5) var(--e-4) var(--e-3);
    text-align: left;
    background: linear-gradient(transparent, rgba(20,17,13,.82));
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity var(--transicion);
}
.galeria-item:hover .galeria-pie,
.galeria-item:focus-visible .galeria-pie { opacity: 1; }

/* Visor de imagen */
.visor {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    place-items: center;
    padding: var(--e-5);
    background: rgba(20,17,13,.92);
}
.visor[open], .visor.abierto { display: grid; }
.visor img {
    max-width: min(100%, 1100px);
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--r-md);
}
.visor-cerrar {
    position: absolute;
    top: var(--e-5); right: var(--e-5);
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}
.visor-pie {
    position: absolute;
    inset: auto 0 var(--e-5) 0;
    text-align: center;
    color: rgba(255,255,255,.85);
    font-size: .875rem;
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.rejilla-servicios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--e-4);
}
.servicio {
    padding: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--linea-suave);
    border-radius: var(--r-md);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.servicio:hover { border-color: var(--linea); box-shadow: var(--s-md); }
.servicio-icono {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--verde);
    color: var(--oro-sobre-verde);
    border-radius: var(--r-sm);
    font-size: 1.125rem;
    margin-bottom: var(--e-4);
}
.servicio h3 { font-size: 1.25rem; margin-bottom: var(--e-2); }
.servicio p { font-size: .9375rem; color: var(--tinta-2); }

/* ============================================================
   RESERVAS
   ============================================================ */
.reserva { max-width: 46rem; }

.pasos {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    margin-bottom: var(--e-7);
}
.paso {
    display: flex;
    align-items: center;
    gap: var(--e-2);
    font-size: .875rem;
    font-weight: 500;
    color: var(--tinta-3);
}
.paso-num {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--superficie-2);
    border: 1px solid var(--linea);
    font-size: .8125rem;
    font-weight: 700;
    flex: none;
}
.paso[aria-current="step"] { color: var(--tinta); font-weight: 600; }
.paso[aria-current="step"] .paso-num {
    background: var(--oro-accion);
    border-color: var(--oro-accion);
    color: #fff;
}
.paso[data-completo="si"] .paso-num {
    background: var(--exito);
    border-color: var(--exito);
    color: #fff;
}
.paso-linea {
    flex: 1;
    height: 1px;
    background: var(--linea);
    min-width: var(--e-3);
}

.panel-paso { display: none; }
.panel-paso.activo { display: block; animation: aparecer .25s ease-out; }

.campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--e-5);
}
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo-ancho { grid-column: 1 / -1; }

.campo label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--tinta);
}
.campo .ayuda { font-size: .8125rem; color: var(--tinta-3); }
.requerido { color: var(--error); }

.campo input,
.campo select,
.campo textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--e-3) var(--e-4);
    font-family: var(--fuente-texto);
    font-size: 1rem;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-sm);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.campo textarea { min-height: 7rem; resize: vertical; padding-block: var(--e-3); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--tinta-3); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--oro-accion);
    box-shadow: 0 0 0 3px rgba(138,101,8,.15);
}
.campo[data-error="si"] input,
.campo[data-error="si"] select { border-color: var(--error); }
.campo .mensaje-error {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--error);
    display: none;
}
.campo[data-error="si"] .mensaje-error { display: block; }

/* Casilla grande: el área táctil es toda la tarjeta, no el cuadradito */
.casilla {
    display: flex;
    gap: var(--e-4);
    align-items: flex-start;
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--transicion), background var(--transicion);
}
.casilla:hover { border-color: var(--tinta-3); }
.casilla:has(input:checked) { border-color: var(--oro-accion); background: var(--oro-tenue); }
.casilla input {
    width: 22px; height: 22px;
    flex: none;
    margin-top: .15rem;
    accent-color: var(--oro-accion);
    cursor: pointer;
}
.casilla-texto strong { display: block; font-size: .9375rem; }
.casilla-texto span { font-size: .875rem; color: var(--tinta-2); }

.acciones-paso {
    display: flex;
    gap: var(--e-3);
    flex-wrap: wrap;
    margin-top: var(--e-6);
    padding-top: var(--e-5);
    border-top: 1px solid var(--linea-suave);
}
.acciones-paso .boton-principal { flex: 1; min-width: 12rem; }

/* Mensajes de disponibilidad */
.aviso {
    display: none;
    gap: var(--e-4);
    padding: var(--e-5);
    border-radius: var(--r-md);
    border-left: 4px solid var(--tinta-3);
    background: var(--superficie-2);
    margin-top: var(--e-5);
}
.aviso.visible { display: flex; }
.aviso-icono { flex: none; font-size: 1.125rem; margin-top: .1em; }
.aviso h3 { font-family: var(--fuente-texto); font-size: 1rem; font-weight: 700; margin-bottom: var(--e-2); }
.aviso p { font-size: .9375rem; color: var(--tinta-2); }
.aviso[data-tipo="exito"] { background: var(--exito-fondo); border-left-color: var(--exito); }
.aviso[data-tipo="exito"] .aviso-icono { color: var(--exito); }
.aviso[data-tipo="error"] { background: var(--error-fondo); border-left-color: var(--error); }
.aviso[data-tipo="error"] .aviso-icono { color: var(--error); }
.aviso[data-tipo="cargando"] { background: var(--aviso-fondo); border-left-color: var(--aviso); }
.aviso[data-tipo="cargando"] .aviso-icono { color: var(--aviso); }

.opciones-habitacion {
    display: grid;
    gap: var(--e-3);
    margin-top: var(--e-5);
}
.opcion {
    display: flex;
    align-items: center;
    gap: var(--e-4);
    padding: var(--e-4);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color var(--transicion), background var(--transicion);
}
.opcion:hover { border-color: var(--tinta-3); }
.opcion:has(input:checked) {
    border-color: var(--oro-accion);
    background: var(--oro-tenue);
}
.opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--oro-accion); cursor: pointer; }
.opcion-datos { flex: 1; min-width: 0; }
.opcion-datos strong { display: block; font-size: .9375rem; }
.opcion-datos span { font-size: .8125rem; color: var(--tinta-2); }
.opcion-precio {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}
.opcion-precio small { display: block; font-weight: 400; font-size: .75rem; color: var(--tinta-3); }

/* Resumen */
.resumen {
    display: none;
    margin-top: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.resumen.visible { display: block; }
.resumen-cabecera {
    padding: var(--e-4) var(--e-5);
    background: var(--superficie-2);
    border-bottom: 1px solid var(--linea);
}
.resumen-cabecera h3 { font-family: var(--fuente-texto); font-size: 1rem; font-weight: 700; }
.resumen-lista { padding: var(--e-4) var(--e-5); }
.resumen-fila {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding-block: var(--e-2);
    font-size: .9375rem;
}
.resumen-fila dt { color: var(--tinta-2); }
.resumen-fila dd { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.resumen-total {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    align-items: baseline;
    margin-top: var(--e-3);
    padding-top: var(--e-4);
    border-top: 1px solid var(--linea);
}
.resumen-total dt { font-weight: 700; }
.resumen-total dd {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.resumen-sena {
    padding: var(--e-4) var(--e-5);
    background: var(--oro-tenue);
    font-size: .9375rem;
}
.resumen-sena strong { font-variant-numeric: tabular-nums; }

/* ============================================================
   CONTACTO
   ============================================================ */
.rejilla-contacto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: var(--e-5);
    align-items: start;
}
.tarjeta-contacto {
    padding: var(--e-6);
    background: var(--verde);
    color: #fff;
    border-radius: var(--r-lg);
}
.tarjeta-contacto h3 { color: #fff; margin-bottom: var(--e-5); }
.dato-contacto {
    display: flex;
    gap: var(--e-4);
    padding-block: var(--e-3);
    border-top: 1px solid rgba(255,255,255,.14);
}
.dato-contacto:first-of-type { border-top: 0; padding-top: 0; }
.dato-contacto i { flex: none; color: var(--oro-sobre-verde); margin-top: .3em; }
.dato-contacto dt {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}
.dato-contacto dd { font-size: 1rem; }
.dato-contacto a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dato-contacto a:hover { color: var(--oro-sobre-verde); }

.mapa {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--linea);
    background: var(--superficie-2);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

.bloque-form {
    margin-top: var(--e-7);
    padding: var(--e-6);
    background: var(--superficie);
    border: 1px solid var(--linea);
    border-radius: var(--r-lg);
}
.bloque-form > p { margin-bottom: var(--e-5); color: var(--tinta-2); font-size: .9375rem; }

/* ============================================================
   MODAL
   ============================================================ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    padding: var(--e-4);
    background: rgba(20,17,13,.7);
    backdrop-filter: blur(4px);
    overflow-y: auto;
}
.modal.abierto { display: grid; place-items: start center; }
.modal-caja {
    width: min(100%, 34rem);
    margin-block: var(--e-6);
    background: var(--superficie);
    border-radius: var(--r-lg);
    box-shadow: var(--s-lg);
    overflow: hidden;
}
.modal-cabecera {
    position: relative;
    padding: var(--e-6) var(--e-6) var(--e-5);
    background: var(--verde);
    color: #fff;
    text-align: center;
}
.modal-cabecera h2 { color: #fff; font-size: 1.75rem; }
.modal-cabecera p { color: rgba(255,255,255,.85); font-size: .9375rem; margin-top: var(--e-2); }
.modal-cerrar {
    position: absolute;
    top: var(--e-3); right: var(--e-3);
    width: 44px; height: 44px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.12);
    border: 0;
    border-radius: var(--r-sm);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}
.modal-cerrar:hover { background: rgba(255,255,255,.24); }
.modal-cuerpo { padding: var(--e-6); display: grid; gap: var(--e-5); }

.confirmacion {
    text-align: center;
    padding: var(--e-4);
    background: var(--superficie-2);
    border-radius: var(--r-md);
}
.confirmacion .etiqueta { display: block; margin-bottom: var(--e-1); }
.confirmacion strong {
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.monto-sena {
    text-align: center;
    padding: var(--e-5);
    background: var(--oro-tenue);
    border-radius: var(--r-md);
}
.monto-sena .etiqueta { display: block; margin-bottom: var(--e-2); color: var(--oro-accion-osc); }
.monto-sena strong {
    display: block;
    font-size: clamp(2rem, 7vw, 2.75rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.monto-sena span { font-size: .875rem; color: var(--tinta-2); }

.datos-pago { border: 1px solid var(--linea); border-radius: var(--r-md); overflow: hidden; }
.datos-pago-fila {
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    padding: var(--e-3) var(--e-4);
    border-top: 1px solid var(--linea-suave);
    font-size: .9375rem;
}
.datos-pago-fila:first-child { border-top: 0; }
.datos-pago-fila dt { color: var(--tinta-2); }
.datos-pago-fila dd { font-weight: 600; text-align: right; word-break: break-all; }

.alerta-verificacion {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    background: var(--aviso-fondo);
    border-left: 4px solid var(--aviso);
    border-radius: var(--r-sm);
    font-size: .875rem;
    color: var(--tinta-2);
}
.alerta-verificacion i { color: var(--aviso); flex: none; margin-top: .2em; }

.pasos-siguientes { display: grid; gap: var(--e-3); }
.pasos-siguientes li { display: flex; gap: var(--e-3); font-size: .9375rem; color: var(--tinta-2); }
.pasos-siguientes .num {
    flex: none;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    background: var(--verde);
    color: #fff;
    border-radius: 50%;
    font-size: .75rem;
    font-weight: 700;
}

/* ============================================================
   TOASTS — reemplazan los alert() del navegador
   ============================================================ */
.toasts {
    position: fixed;
    inset: auto var(--e-4) var(--e-4) auto;
    z-index: 2500;
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    max-width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    display: flex;
    gap: var(--e-3);
    padding: var(--e-4);
    background: var(--tinta);
    color: #fff;
    border-radius: var(--r-md);
    box-shadow: var(--s-lg);
    font-size: .9375rem;
    pointer-events: auto;
    animation: entrar-toast .25s ease-out;
}
.toast i { flex: none; margin-top: .15em; }
.toast[data-tipo="exito"] i { color: #6FD79A; }
.toast[data-tipo="error"] i { color: #FF9E97; }

@keyframes entrar-toast {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   FLOTANTES Y PIE
   ============================================================ */
.whatsapp-flotante {
    position: fixed;
    right: var(--e-5); bottom: var(--e-5);
    width: 56px; height: 56px;
    display: grid; place-items: center;
    background: var(--whatsapp);
    color: var(--whatsapp-texto);
    border-radius: 50%;
    font-size: 1.5rem;
    box-shadow: var(--s-lg);
    z-index: 900;
    transition: transform var(--transicion), background var(--transicion);
}
.whatsapp-flotante:hover { background: var(--whatsapp-osc); color: var(--whatsapp-texto); transform: scale(1.06); }
/* En Reservas tapaba los campos del formulario */
body[data-seccion="reservas"] .whatsapp-flotante { display: none; }

.cta-movil {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 950;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
    background: rgba(250,248,244,.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--linea);
}
.cta-movil .boton { flex: 1; }

.pie {
    background: var(--verde-osc);
    color: rgba(255,255,255,.8);
    padding-block: var(--e-8) var(--e-6);
    font-size: .9375rem;
}
.pie-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--e-6);
    padding-bottom: var(--e-6);
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.pie h3 {
    font-family: var(--fuente-texto);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--oro-sobre-verde);
    margin-bottom: var(--e-4);
}
.pie ul { display: grid; gap: var(--e-1); }
.pie li { min-height: 32px; display: flex; align-items: center; }
.pie a {
    color: rgba(255,255,255,.86);
    text-decoration: none;
    display: flex;
    align-items: center;
    min-height: 32px;
}
.pie a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pie-marca img { height: 52px; width: 52px; margin-bottom: var(--e-4); }
.pie-marca p { max-width: 24rem; color: rgba(255,255,255,.7); font-size: .875rem; }
.pie-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-2) var(--e-5);
    justify-content: space-between;
    padding-top: var(--e-5);
    font-size: .8125rem;
    color: rgba(255,255,255,.6);
}
.pie-legal-enlaces { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pie-legal a { min-height: 32px; }

/* Contenido legal desplegable */
.legal { max-width: 60ch; }
.legal summary {
    cursor: pointer;
    padding: var(--e-4) 0;
    font-weight: 600;
    border-bottom: 1px solid var(--linea);
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: var(--e-4);
    align-items: center;
}
.legal summary::-webkit-details-marker { display: none; }
.legal summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .75rem; color: var(--tinta-3); }
.legal[open] summary::after { content: "\f077"; }
.legal .contenido-legal { padding-block: var(--e-4); color: var(--tinta-2); font-size: .9375rem; }
.legal .contenido-legal p + p { margin-top: var(--e-3); }
.legal .contenido-legal ul { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
.legal .contenido-legal li { display: flex; gap: var(--e-2); }
.legal .contenido-legal li::before { content: "•"; color: var(--oro-accion); flex: none; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.oculto { display: none !important; }
.solo-lectores {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.girando { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .menu {
        position: fixed;
        inset: var(--alto-nav) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--e-3) clamp(1rem, 4vw, 2.5rem) var(--e-5);
        background: var(--papel);
        border-bottom: 1px solid var(--linea);
        box-shadow: var(--s-md);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
    }
    .menu.abierto { transform: none; opacity: 1; visibility: visible; }
    .menu a { padding: var(--e-4); font-size: 1rem; border-radius: var(--r-sm); }

    .boton-menu { display: inline-flex; }
    .nav-acciones .boton-principal { display: none; }
    .marca-texto { display: none; }

    /* La barra fija de abajo es el CTA principal en celular */
    .cta-movil { display: flex; }
    body { padding-bottom: 5.5rem; }
    /* El globo duplicaba el botón de WhatsApp de la barra */
    .whatsapp-flotante { display: none; }

    /* El contenido del hero quedaba tapado por la barra fija de abajo.
       Se achica el bloque y se reserva el alto de esa barra. */
    .hero {
        min-height: 78vh;
        background-attachment: scroll;
        padding-block: calc(var(--alto-nav) + var(--e-4)) calc(var(--e-6) + 5.5rem);
    }
    .hero h1 { font-size: clamp(2rem, 8vw, 2.75rem); margin-block: var(--e-3) var(--e-4); }
    .hero-botones { margin-top: var(--e-5); }
    .hero-datos { margin-top: var(--e-5); padding-top: var(--e-4); gap: var(--e-2) var(--e-4); }
}

/* Celulares de pantalla baja (iPhone SE, Android chicos): el bloque
   todavía se metía debajo de la barra fija. */
@media (max-width: 900px) and (max-height: 700px) {
    .hero {
        min-height: auto;
        padding-block: calc(var(--alto-nav) + var(--e-3)) calc(var(--e-4) + 5.5rem);
    }
    .hero h1 { font-size: clamp(1.75rem, 7vw, 2.25rem); }
    .hero p { font-size: .9375rem; }
    .hero-datos { display: none; }
    .pasos { flex-wrap: wrap; row-gap: var(--e-3); }
    .paso-linea { display: none; }
}

@media (max-width: 560px) {
    .rejilla-galeria { grid-template-columns: 1fr 1fr; gap: var(--e-2); }
    .galeria-pie { opacity: 1; font-size: .75rem; padding: var(--e-4) var(--e-2) var(--e-2); }
    .campos { grid-template-columns: 1fr; }
    .acciones-paso { flex-direction: column-reverse; }
    .acciones-paso .boton { width: 100%; }
    .resumen-total dd { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    .barra-nav, .cta-movil, .whatsapp-flotante, .toasts, .hero-botones { display: none !important; }
    .seccion { display: block !important; }
}