:root{
  --green:#1f5c3d; --green-d:#143d29; --sand:#f4efe6; --gold:#c9a35b;
  --ink:#1c231e; --muted:#6b7a70; --white:#fff; --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,Arial,sans-serif;color:var(--ink);background:var(--sand);line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Georgia,'Times New Roman',serif;color:var(--green-d);line-height:1.2}

/* ANIMACIONES
   Todo lo de aquí se apaga solo si el visitante pidió menos movimiento en su
   sistema (ver la regla prefers-reduced-motion al final del archivo). */

/* Aparecer al hacer scroll. El JS agrega .visible cuando el bloque entra en pantalla. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
/* Retrasos escalonados, para que las tarjetas no aparezcan todas de golpe. */
.reveal-1{transition-delay:.08s}.reveal-2{transition-delay:.16s}
.reveal-3{transition-delay:.24s}.reveal-4{transition-delay:.32s}
.reveal-5{transition-delay:.4s}.reveal-6{transition-delay:.48s}

/* NAV */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:16px 6vw;background:rgba(255,255,255,.95);backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:padding .25s ease,box-shadow .25s ease}
/* Al bajar, la barra se compacta y marca más sombra. */
.nav.compacta{padding:9px 6vw;box-shadow:0 4px 18px rgba(0,0,0,.13)}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:44px;width:auto;display:block;transition:height .25s ease}
.nav.compacta .brand img{height:34px}
.nav nav{display:flex;gap:1.5rem}
.nav nav a{font-weight:600;color:var(--ink);padding-bottom:2px}
.nav nav a.active,.nav nav a:hover{color:var(--green);border-bottom:2px solid var(--gold)}

/* BUTTONS */
.btn{display:inline-block;padding:.7rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
  font-weight:700;font-size:.95rem;transition:.2s;text-align:center}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-d)}
.btn-block{width:100%}

/* HERO */
/* Sin `overflow:hidden`: recortaba el calendario emergente del buscador. El video no
   se sale igual, porque va posicionado a los bordes del hero y con `object-fit:cover`. */
.hero{position:relative;min-height:82vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(135deg,#2c7a52,#143d29);background-size:cover;background-position:center;
  color:#fff;padding:6vw 6vw 8vw}
/* Video de fondo del hero. Va detrás de todo y el overlay le baja el brillo para que
   el texto blanco se lea siempre, incluso en los fotogramas más claros. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-overlay{position:absolute;inset:0;z-index:1;
  background:linear-gradient(rgba(10,40,25,.45),rgba(10,40,25,.62)),
             radial-gradient(circle at 30% 20%,rgba(201,163,91,.22),transparent 60%)}
/* z-index alto porque el bloque de amenidades usa 5 y, al crear este un contexto de
   apilamiento propio, el calendario emergente que cuelga del buscador quedaba tapado
   por ellas sin importar su propio z-index. */
.hero-content{position:relative;z-index:10;max-width:760px}
/* Entrada en cascada del texto del hero al cargar la página. */
.hero-content>*{animation:subir .9s ease both}
.hero-content>*:nth-child(1){animation-delay:.1s}
.hero-content>*:nth-child(2){animation-delay:.25s}
.hero-content>*:nth-child(3){animation-delay:.4s}
.hero-content>*:nth-child(4){animation-delay:.55s}
@keyframes subir{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-kicker{letter-spacing:.3em;text-transform:uppercase;font-size:.8rem;opacity:.85}
.hero h1{color:#fff;font-size:clamp(2.4rem,6vw,4.2rem);margin:.4rem 0}
.hero h1 span{color:var(--gold);font-style:italic}
.hero-sub{opacity:.9;margin-bottom:2rem}
/* `position:relative` es lo que ancla el calendario emergente al buscador. */
.booking{position:relative;max-width:520px;margin:0 auto;text-align:left;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  padding:1.1rem;border-radius:var(--radius);backdrop-filter:blur(6px)}
.booking-field{display:flex;flex-direction:column;text-align:left;gap:.3rem}
.booking-field label{font-size:.8rem;font-weight:600}
.booking-field input{padding:.6rem .8rem;border-radius:8px;border:0;min-width:180px}

/* AMENITIES */
/* Columnas fijas en 3 (no auto-fit) para que las 6 amenidades queden 3 y 3 exactas.
   Con auto-fit entraban 5 arriba y dejaban una suelta abajo. */
.amenities{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#dcd3c2;
  margin:-3rem 6vw 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;z-index:5}
.amenity{background:#fff;padding:1.6rem;transition:transform .25s ease,background .25s ease}
.amenity:hover{transform:translateY(-4px);background:#fffdf8}
.amenity h3{color:var(--green);font-size:1.05rem;margin-bottom:.2rem}
.amenity p{color:var(--muted);font-size:.88rem}
/* El icono va en un círculo dorado suave, para que resalte sin gritar. */
.amenity-ico{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:50%;background:linear-gradient(135deg,rgba(201,163,91,.22),rgba(31,92,61,.14));
  color:var(--green);margin-bottom:.8rem;transition:transform .3s ease}
.amenity:hover .amenity-ico{transform:scale(1.12) rotate(-6deg)}
.ico-sm{width:18px;height:18px;vertical-align:-3px}

/* LISTAS DE LO INCLUIDO */
.incluye{list-style:none;display:grid;gap:.5rem;margin:.6rem 0}
.incluye li{display:flex;gap:.55rem;align-items:flex-start;font-size:.92rem;color:var(--ink)}
.incluye.compacta li{font-size:.88rem}
.ico-check{width:17px;height:17px;flex-shrink:0;margin-top:.28rem;color:var(--green);stroke-width:2.4}
.incluye-titulo{color:var(--green);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  margin:1.4rem 0 .5rem;font-family:'Segoe UI',system-ui,sans-serif}
.mas-items{color:var(--gold);font-weight:700;font-size:.85rem;margin-top:.2rem}

/* ---------- CALENDARIO ---------- */
.calendario-nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-bottom:1rem}
.cal-rango{font-weight:700;color:var(--green-d);min-width:230px;text-align:center}
.cal-flecha{background:#fff;border:1px solid #ddd4c3;color:var(--green-d);width:38px;height:38px;
  border-radius:50%;cursor:pointer;font-size:1rem;line-height:1;transition:.2s}
.cal-flecha:hover:not(:disabled){background:var(--green);color:#fff;border-color:var(--green)}
.cal-flecha:disabled{opacity:.35;cursor:default}

.calendario-meses{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.cal-mes h3{font-size:1.1rem;text-align:center;margin-bottom:.7rem}
.cal-semana,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}
.cal-semana span{text-align:center;font-size:.72rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;padding-bottom:.3rem}

/* Cada día es cuadrado: el padding-top del 100% mantiene la proporción sin alturas fijas. */
.cal-dia{position:relative;border:0;background:#fff;border-radius:8px;padding:.35rem .2rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;
  font-family:inherit;min-height:46px;transition:transform .15s ease,box-shadow .15s ease}
.cal-dia.vacio{background:transparent}
.cal-num{font-weight:700;font-size:.9rem;line-height:1}
.cal-precio{font-size:.62rem;font-weight:600;opacity:.75;line-height:1}

.cal-dia.libre{cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.cal-dia.libre.baja{background:#e7f5ec;color:#1f7a44}
.cal-dia.libre.alta{background:#fdf4e2;color:#a9781a}
.cal-dia.libre:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.16)}
.cal-dia.libre.elegido{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(31,92,61,.4)}

/* El día en sí está libre, pero no sirve como ENTRADA de un pernocte porque el
   siguiente ya está ocupado (se retiran a las 4:30 p.m. de ese día). Mismo aspecto
   que un día ocupado, pero sigue siendo un <button>: si cambian a Full Day, donde
   el día siguiente no importa, vuelve a verse y funcionar como libre al instante. */
.cal-dia.libre.bloqueado-noche{background:#f3ecec;color:#b99a9a;text-decoration:line-through;
  cursor:not-allowed;box-shadow:none}
.cal-dia.libre.bloqueado-noche:hover{transform:none;box-shadow:none}

/* PAR ENTRADA–SALIDA (pernocte)
   Los dos días se ven como un solo bloque y el precio de la noche va al medio. */
/* Lleva `.libre` en el selector para igualar la especificidad de `.libre.alta`,
   que si no le gana y el par se queda del color de fin de semana. */
.cal-dia.libre.par-inicio,.cal-dia.libre.par-fin{background:var(--green);color:#fff}
.cal-dia.libre.par-inicio{border-radius:8px 0 0 8px}
.cal-dia.libre.par-fin{border-radius:0 8px 8px 0}
/* Rellena el hueco de la rejilla entre las dos celdas para que se vean unidas. */
.cal-dia.libre.par-inicio::after{content:'';position:absolute;left:100%;top:0;bottom:0;width:.3rem;
  background:var(--green)}
/* Los precios individuales se ocultan: en el par manda el precio del medio. */
.cal-dia.par-inicio .cal-precio,.cal-dia.par-fin .cal-precio{opacity:0}
.cal-par-precio{position:absolute;left:calc(100% + .15rem);bottom:.28rem;transform:translateX(-50%);
  z-index:3;font-size:.66rem;font-weight:800;color:#fff;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.45)}

/* Ocupado y pasado: sin color de precio, para que la lectura sea inmediata. */
.cal-dia.ocupado{background:#f3ecec;color:#b99a9a;text-decoration:line-through}
.cal-dia.pasado{background:transparent;color:#cfc7b8}
.cal-dia.hoy .cal-num{text-decoration:underline;text-underline-offset:2px}

.cal-leyenda{display:flex;flex-wrap:wrap;gap:1.2rem;justify-content:center;margin:1.6rem 0 .4rem;
  font-size:.85rem;color:var(--muted)}
.cal-leyenda .pt{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.35rem;
  vertical-align:-1px}
.cal-leyenda .pt.baja{background:#c6e6d4}
.cal-leyenda .pt.alta{background:#f6e3bd}
.cal-leyenda .pt.ocupado{background:#e4d5d5}

/* ---------- BARRA FIJA DE CELULAR ---------- */
/* Solo aparece en pantallas chicas: en escritorio la caja de reserva ya va fija al costado. */
.barra-movil{display:none}
@media(max-width:980px){
  .barra-movil{position:fixed;left:0;right:0;bottom:0;z-index:850;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    background:#fff;border-top:1px solid #e4dccb;padding:.7rem 1rem;
    padding-bottom:calc(.7rem + env(safe-area-inset-bottom)); /* respeta la barra del iPhone */
    box-shadow:0 -6px 20px rgba(0,0,0,.14);
    transform:translateY(0);transition:transform .25s ease}
  .barra-movil[hidden]{display:flex;transform:translateY(120%)}  /* se desliza, no desaparece de golpe */
  .barra-movil-precio span{display:block;font-size:.7rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--muted);line-height:1}
  .barra-movil-precio strong{font-family:Georgia,serif;font-size:1.25rem;color:var(--green-d)}
  .barra-movil .btn{padding:.7rem 1.5rem;white-space:nowrap}

  /* El botón flotante de WhatsApp sube para no quedar encima de la barra. */
  body.con-barra-movil .wa-flotante{bottom:calc(4.6rem + env(safe-area-inset-bottom))}
  /* Espacio al final de la página para que la barra no tape el pie. */
  body.con-barra-movil .footer{padding-bottom:5.5rem}
}

/* ---------- BUSCADOR DEL INICIO ---------- */
/* Selector de paquete: dos pastillas que se marcan al elegir. El radio real queda
   oculto pero sigue existiendo, así el formulario funciona sin JavaScript. */
.booking-paquete{display:flex;gap:.4rem;background:rgba(255,255,255,.15);padding:.3rem;
  border-radius:999px;margin-bottom:.9rem}
.pq-opcion{flex:1;position:relative;cursor:pointer}
.pq-opcion input{position:absolute;opacity:0;width:0;height:0}
.pq-opcion span{display:block;text-align:center;padding:.55rem .8rem;border-radius:999px;
  font-weight:700;font-size:.88rem;color:#fff;transition:.2s;white-space:nowrap}
.pq-opcion input:checked + span{background:#fff;color:var(--green-d)}
.pq-opcion input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}

.booking-fila{display:flex;gap:.8rem;align-items:flex-end}
.booking-fila .booking-field{flex:1}
.booking-fila .btn{flex-shrink:0}
.booking-aviso{margin-top:.7rem;font-size:.85rem;background:rgba(0,0,0,.3);padding:.6rem .9rem;
  border-radius:8px}
.booking-aviso a{text-decoration:underline;font-weight:700}

/* Calendario emergente: cuelga del buscador, por encima de todo lo demás. */
.cal-pop{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + .6rem);z-index:60;
  background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.32);
  padding:1.1rem;width:min(360px,92vw);text-align:center}
.cal-pop[hidden]{display:none}
.cal-pop .calendario-meses{display:block}   /* en el emergente va un mes a la vez */
.cal-pop .cal-rango{min-width:0;flex:1}
.cal-pop .cal-leyenda{margin:.9rem 0 0;gap:.7rem;font-size:.72rem}

@media(max-width:600px){
  .booking-paquete{flex-direction:column;border-radius:14px}
  .pq-opcion span{white-space:normal}
  .booking-fila{flex-direction:column;align-items:stretch}
  .booking-fila .btn{width:100%}
  .booking-fila .booking-field{align-items:center;text-align:center}
  .booking-fila .booking-field input{width:200px;max-width:100%;text-align:center}
}

/* CAJAS DE TARIFA */
.tarifa-cajas{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1rem 0}
.tarifa-caja{background:var(--sand);border:1px solid #e4dccb;border-radius:10px;padding:.7rem .8rem;text-align:center}
.tarifa-caja.alta{background:linear-gradient(160deg,#fdf6e7,#f7ecd4);border-color:var(--gold)}
.tarifa-dias{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin-bottom:.15rem}
.tarifa-caja strong{font-family:Georgia,serif;font-size:1.15rem;color:var(--green-d);white-space:nowrap}

/* SECTIONS */
.section{padding:4.5rem 6vw;text-align:center}
.section h2{font-size:clamp(1.8rem,4vw,2.6rem)}
.section-sub{color:var(--muted);margin-bottom:2.5rem}
/* CARRUSEL DE INSTALACIONES
   3 fotos visibles, avanzando solas. El ancho de cada una es 1/3 del contenedor menos
   el hueco, así entran exactamente tres. */
.carrusel{overflow:hidden;position:relative;border-radius:var(--radius)}
/* Difuminado en los bordes: insinúa que hay más fotos a los lados. */
.carrusel::before,.carrusel::after{content:'';position:absolute;top:0;bottom:0;width:5%;z-index:2;pointer-events:none}
.carrusel::before{left:0;background:linear-gradient(90deg,var(--sand),transparent)}
.carrusel::after{right:0;background:linear-gradient(270deg,var(--sand),transparent)}
.carrusel-tira{display:flex;gap:1rem;width:max-content;will-change:transform}
.carrusel-item{flex:0 0 auto;width:calc((100vw - 12vw - 2rem) / 3);margin:0}
.carrusel-item img{width:100%;height:340px;object-fit:cover;border-radius:var(--radius);
  cursor:zoom-in;display:block;transition:transform .35s ease,box-shadow .35s ease}
.carrusel-item img:hover{transform:scale(1.02);box-shadow:0 14px 34px rgba(0,0,0,.22)}
/* Al pasar el mouse se detiene, para poder mirar o hacer clic con calma. */
@keyframes correr{from{transform:translateX(0)}to{transform:translateX(var(--desplazamiento))}}

@media(max-width:900px){
  .carrusel-item{width:calc((100vw - 12vw - 1rem) / 2)}
  .carrusel-item img{height:260px}
}
@media(max-width:600px){
  .carrusel-item{width:calc(100vw - 12vw - 3rem)}
  .carrusel-item img{height:230px}
}

/* RESEÑAS — mismo carrusel continuo que el de instalaciones (más lento, para dar
   tiempo a leer). Tarjetas compactas y de ancho fijo, con el texto recortado a 5
   líneas con puntos suspensivos: así todas quedan de la misma altura sin importar
   si la reseña real es una frase corta o un párrafo largo. */
.estrellas{display:inline-flex;gap:1px;color:#d8d0c0}
.estrella.llena{color:var(--gold)}
.resenas-carrusel .resena-card{width:280px}
.resena-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.2rem;
  flex:0 0 auto;display:flex;flex-direction:column;gap:.5rem;transition:transform .3s ease,box-shadow .3s ease}
.resena-card:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(0,0,0,.14)}
.resena-card .estrellas{font-size:.82rem}
.resena-card blockquote{margin:0;color:var(--ink);font-size:.86rem;line-height:1.5;flex:1;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.resena-card figcaption{display:flex;flex-direction:column;gap:.05rem;padding-top:.5rem;
  border-top:1px solid #eee2cf}
.resena-card figcaption strong{color:var(--green-d);font-size:.82rem}

/* PACKAGES */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;text-align:left}
.package-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease}
.package-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.package-media{position:relative;overflow:hidden}
.package-media img{height:230px;object-fit:cover;width:100%;transition:transform .5s ease}
.package-card:hover .package-media img{transform:scale(1.06)}
.package-media{display:block}
/* Degradado al pie de la foto: hace que la etiqueta blanca se lea siempre. */
.package-media::after{content:'';position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(transparent,rgba(0,0,0,.55))}
.package-badge{position:absolute;bottom:.9rem;left:1rem;z-index:2;color:#fff;font-weight:700;font-size:.85rem;
  display:inline-flex;align-items:center;gap:.35rem;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.package-body{padding:1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.package-body h3{font-size:1.5rem}
.package-intro{color:var(--muted);font-size:.88rem;display:flex;gap:.4rem;align-items:flex-start}
.package-intro svg{flex-shrink:0;margin-top:.15rem;color:var(--green)}
.package-card .btn-block{margin-top:auto}
.cap{color:var(--green);font-weight:700;font-size:.9rem}
/* WHATSAPP */
.btn-wa{background:#25d366;color:#fff;border:none}
.btn-wa:hover{background:#1eb455}
.btn-outline{background:transparent;color:var(--green-d);border:2px solid var(--green)}
.btn-outline:hover{background:var(--green);color:#fff}
.mapa-acciones{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.4rem}
/* Pasos de la ruta, numerados en círculos verdes */
.ruta{list-style:none;counter-reset:paso;margin:.6rem 0 1rem}
.ruta li{counter-increment:paso;position:relative;padding-left:2.2rem;margin-bottom:.7rem;font-size:.94rem}
.ruta li::before{content:counter(paso);position:absolute;left:0;top:.05rem;width:1.6rem;height:1.6rem;
  border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center}
.btn-sm{padding:.45rem .9rem;font-size:.85rem;margin-top:.6rem;display:inline-block}
.wa-flotante{position:fixed;right:1.1rem;bottom:1.1rem;z-index:900;display:inline-flex;align-items:center;
  gap:.5rem;background:#25d366;color:#fff;padding:.75rem 1.1rem;border-radius:999px;font-weight:700;
  text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.28);transition:transform .15s,background .15s}
.wa-flotante:hover{background:#1eb455;transform:translateY(-2px)}
.wa-flotante svg{flex-shrink:0}
@media(max-width:600px){
  /* En celular solo el ícono, para no tapar el contenido. */
  .wa-flotante span{display:none}
  .wa-flotante{padding:.85rem;right:.9rem;bottom:.9rem}
}
@media print{.wa-flotante{display:none}}

/* VISOR DE GALERIA */
.visor{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.9);display:flex;align-items:center;
  justify-content:center;gap:1rem;padding:4vh 2vw;animation:aparecer .25s ease}
@keyframes aparecer{from{opacity:0}to{opacity:1}}
.visor img{max-width:88%;max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.visor-cerrar{position:absolute;top:1rem;right:1.4rem;background:none;border:0;color:#fff;font-size:2.4rem;
  line-height:1;cursor:pointer;padding:.2rem .6rem;border-radius:8px}
.visor-cerrar:hover,.visor-nav:hover{background:rgba(255,255,255,.15)}
.visor-nav{background:rgba(0,0,0,.35);border:0;color:#fff;font-size:1.6rem;cursor:pointer;
  padding:1rem .9rem;border-radius:10px;flex-shrink:0}
.visor-contador{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:#fff;
  font-size:.9rem;opacity:.8;letter-spacing:.05em}
@media(max-width:600px){
  .visor-nav{padding:.7rem .5rem;font-size:1.2rem}
  .visor img{max-width:78%}
}

.sync-box{margin-bottom:1.2rem}
.sync-box p{margin:.4rem 0 .6rem}

/* ---------- PAGINA DE DETALLE ---------- */
/* Portada: foto a lo ancho con el nombre y los datos clave encima. */
.detalle-portada{position:relative;min-height:46vh;display:flex;align-items:flex-end;overflow:hidden}
.detalle-portada img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:acercar 18s ease-out both}
/* Acercamiento apenas perceptible: da profundidad sin que se note el movimiento. */
@keyframes acercar{from{transform:scale(1.06)}to{transform:scale(1)}}
.detalle-portada-velo{position:absolute;inset:0;background:linear-gradient(transparent 20%,rgba(8,32,20,.82))}
.detalle-portada-texto{position:relative;z-index:2;padding:3rem 6vw 2.2rem;color:#fff;width:100%}
.detalle-portada-texto h1{color:#fff;font-size:clamp(2rem,5vw,3.2rem);margin:.2rem 0 1rem}
.kicker{letter-spacing:.22em;text-transform:uppercase;font-size:.72rem;opacity:.85}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);padding:.4rem .85rem;border-radius:999px;font-size:.85rem;
  font-weight:600;backdrop-filter:blur(4px)}
.chip.destacado{background:var(--gold);border-color:var(--gold);color:#1c231e}

/* Dos columnas: contenido a la izquierda, caja de reserva a la derecha. */
.detalle-cuerpo{display:grid;grid-template-columns:1fr 380px;gap:3rem;padding:3.5rem 6vw;align-items:start}
.detalle-info{text-align:left}
.bloque{margin-bottom:2.8rem}
.bloque h2{font-size:1.6rem;margin-bottom:.3rem}
.bloque .section-sub{margin-bottom:1.2rem}
.detalle-descripcion p{color:var(--muted);margin-bottom:.5rem}

/* Mini galería del paquete */
.mini-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.mini-galeria figure{margin:0;overflow:hidden;border-radius:10px}
.mini-galeria img{width:100%;height:150px;object-fit:cover;cursor:zoom-in;display:block;
  transition:transform .4s ease}
.mini-galeria img:hover{transform:scale(1.07)}

/* Caja de reserva, fija al hacer scroll en escritorio */
.detalle-reserva{position:sticky;top:90px}
.reserva-caja{background:#fff;border-radius:var(--radius);box-shadow:0 12px 34px rgba(0,0,0,.13);
  padding:1.4rem;text-align:left}
.total-caja{background:#e7f5ec;border-radius:10px;padding:.9rem 1rem;margin:1rem 0}
.total-caja>span{font-size:.8rem;color:#1f7a44;display:block}
.total-caja>strong{font-family:Georgia,serif;font-size:1.5rem;color:var(--green-d)}
.desglose{list-style:none;margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.desglose li{display:flex;justify-content:space-between;padding:.15rem 0}
.centro{text-align:center;display:block}
.reserve-form{margin-top:1rem;display:flex;flex-direction:column;gap:.9rem}
.reserve-form label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem;min-width:0}
.reserve-form input{padding:.7rem;border:1px solid #d7cfc0;border-radius:8px;width:100%;box-sizing:border-box}
/* Ancla el calendario emergente al campo de fecha, no a todo el formulario — si no,
   `.cal-pop` (position:absolute) cuelga del primer ancestro posicionado que encuentre,
   que sería `.detalle-reserva` (position:sticky también cuenta como "posicionado"), y
   aparecería debajo de la tarjeta entera en vez de justo debajo del campo. */
.cal-campo{position:relative}
/* Casilla de términos: fila (no columna como el resto de .reserve-form label),
   checkbox nativo del tamaño del texto, sin negrita para que no compita con las
   etiquetas de los campos de arriba. */
.check-terminos{flex-direction:row!important;align-items:flex-start;gap:.5rem!important;
  font-weight:400!important;font-size:.85rem!important;line-height:1.3}
.check-terminos input{width:1.1rem;height:1.1rem;flex-shrink:0;margin-top:.15rem;accent-color:var(--green)}
.check-terminos a{text-decoration:underline;font-weight:600}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

/* Las dos formas de reservar, como dos tarjetas separadas — antes eran solo dos
   botones seguidos con letra chica debajo, y no quedaba claro que son dos caminos
   distintos con condiciones distintas (50% de adelanto vs. 100% + recargo). */
.metodos-titulo{font-weight:700;color:var(--green-d);font-size:.9rem;margin:0}
.metodos-pago{display:flex;flex-direction:column}
.metodo-pago{background:var(--sand);border:1px solid #e4dccb;border-radius:12px;padding:1rem;
  display:flex;flex-direction:column;gap:.7rem}
.metodo-pago h4{font-family:Georgia,serif;font-size:1rem;color:var(--green-d);margin:0}
.metodo-detalle{list-style:none;display:grid;gap:.4rem;margin:0}
.metodo-detalle li{display:flex;gap:.5rem;align-items:flex-start;font-size:.82rem;color:var(--ink)}
.metodo-detalle .ico-check{width:15px;height:15px;margin-top:.2rem}
.metodos-o{display:flex;align-items:center;gap:.6rem;margin:.8rem 0;color:var(--muted);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.metodos-o::before,.metodos-o::after{content:'';flex:1;height:1px;background:#e4dccb}

/* ALERTS / CONFIRM */
.alert{padding:.9rem 1.1rem;border-radius:8px;font-weight:600}
.alert-error{background:#fdecea;color:#b3261e}
.alert-ok{background:#e7f5ec;color:#1f7a44}
.confirm{display:flex;justify-content:center}
.confirm-card{background:#fff;max-width:520px;padding:2.5rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.confirm-check{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;font-size:2rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.confirm-detail{list-style:none;text-align:left;margin:1.5rem 0}
.confirm-detail li{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed #e0d8c8}
.confirm-detail span{color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:.85rem} .muted.small{display:inline-block;margin-top:.5rem}

/* LOCATION / LEGAL */
.location{display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;text-align:left}
.map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.location-info h3{margin-bottom:.6rem}
.legal{max-width:820px;margin:0 auto;text-align:left}
.legal h3{margin:1.4rem 0 .4rem}

/* FOOTER */
.footer{background:var(--green-d);color:#e9e2d3;padding:3rem 6vw 1.5rem;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;margin-bottom:2rem}
.footer h4{color:#fff;margin-bottom:.6rem}
.footer a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15);padding-top:1.2rem;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:.5rem;font-size:.85rem;opacity:.85}

/* ---------- ADMIN ---------- */
.login-body{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2c7a52,#143d29)}
.login-card{background:#fff;padding:2.5rem;border-radius:var(--radius);width:340px;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow)}
.login-card label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem}
.login-card input{padding:.7rem;border:1px solid #d7cfc0;border-radius:8px}
.admin-body{display:flex;background:#eef1ee;min-height:100vh}
.admin-side{width:230px;background:var(--green-d);color:#dfe7e0;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.admin-brand{font-weight:700;margin-bottom:1.5rem;color:#fff}
.admin-side nav{display:flex;flex-direction:column;gap:.2rem}
.admin-side a{padding:.6rem .8rem;border-radius:8px;font-weight:600}
.admin-side a:hover,.admin-side a.active{background:rgba(255,255,255,.12)}
.admin-side a.danger{color:#ffb4a8;margin-top:1rem}
.admin-main{flex:1;padding:2rem 2.5rem}
.admin-main h1{margin-bottom:1.5rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat{background:#fff;border-radius:var(--radius);padding:1.2rem;text-align:center;box-shadow:var(--shadow);font-weight:600;color:var(--muted)}
.stat span{display:block;font-size:2rem;color:var(--green-d);font-weight:800}
.stat-confirmada span{color:#1f7a44}.stat-cancelada span{color:#b3261e}.stat-pendiente span{color:#c9902b}
.stat-pendiente_pago span{color:#1a56b0}
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.table th,.table td{padding:.8rem;border-bottom:1px solid #eee;text-align:left;vertical-align:top}
.table th{background:#f3f6f3;font-size:.8rem;text-transform:uppercase;color:var(--muted)}
.table .empty{text-align:center;color:var(--muted);padding:2rem}
.badge{padding:.25rem .6rem;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:capitalize}
.badge-pendiente{background:#fdf0d5;color:#a9781a}
.badge-pendiente_pago{background:#e3edfb;color:#1a56b0}
.badge-confirmada{background:#e7f5ec;color:#1f7a44}
.badge-cancelada{background:#fdecea;color:#b3261e}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.actions form{display:inline}
.mini{padding:.35rem .7rem;border:1px solid #d7cfc0;border-radius:6px;background:#fff;cursor:pointer;font-size:.8rem;font-weight:600}
.mini.ok{border-color:#1f7a44;color:#1f7a44}.mini.bad{border-color:#b3261e;color:#b3261e}
.admin-split{display:grid;grid-template-columns:340px 1fr;gap:2rem;align-items:start}
.box{background:#fff;padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.9rem}
.box label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.85rem}
.box input,.box textarea{padding:.6rem;border:1px solid #d7cfc0;border-radius:8px;font-family:inherit}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.7rem}
/* Tablas del admin con más columnas (como Reseñas): scroll horizontal propio,
   sin tocar `.table` para no afectar la de Paquetes que sí entra bien. */
.table-scroll{overflow-x:auto}
.table-scroll .table{min-width:640px}

@media(max-width:980px){
  /* La caja de reserva deja de ir al costado y pasa arriba del contenido. */
  .detalle-cuerpo{grid-template-columns:1fr;gap:2rem}
  .detalle-reserva{position:static;order:-1}
}
@media(max-width:820px){
  .amenities{grid-template-columns:repeat(2,1fr)}  /* 3 filas de 2, también parejo */
  .location{grid-template-columns:1fr}
  .admin-split{grid-template-columns:1fr}
  .admin-body{flex-direction:column}.admin-side{width:100%;flex-direction:row;flex-wrap:wrap}
  .grid2,.grid3{grid-template-columns:1fr}
}

@media(max-width:600px){
  /* En celular el nombre se partía en tres líneas ("Oasis / de / Juancho") y
     dejaba el menú apretado. La mayoría del tráfico llega de TikTok en celular. */
  .nav{padding:.6rem 4vw;gap:.5rem}
  .brand img{height:32px}
  .nav.compacta .brand img{height:28px}
  .nav nav{gap:.9rem;font-size:.9rem}
}

/* ACCESIBILIDAD
   Si el visitante configuró su sistema para reducir el movimiento (común en personas
   con mareos o migrañas), se apagan todas las animaciones. El contenido igual se ve:
   nada queda invisible esperando una animación que no va a ocurrir. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero-content>*{animation:none!important;opacity:1!important;transform:none!important}
  .hero-overlay{animation:none!important}
}