/* ==========================================================================
   Paraíso Escondido — capa visual moderna (2026)
   Se carga después de skeleton.css y sólo pisa lo necesario.
   Prioridad del diseño: que RESERVAR sea siempre la acción más visible.
   ========================================================================== */

:root {
  --pe-verde: #1f3d2b;        /* verde bosque: marca, títulos */
  --pe-verde-2: #2f5a40;
  --pe-arena: #f6f1e7;        /* fondo cálido de secciones */
  --pe-arena-2: #ece4d3;
  --pe-texto: #26302a;
  --pe-texto-suave: #5d6a61;
  --pe-cta: #e8590c;          /* naranja atardecer: sólo para RESERVAR */
  --pe-cta-hover: #c94a07;
  --pe-cta-sombra: rgba(232, 89, 12, .35);
  --pe-blanco: #ffffff;
  --pe-radio: 14px;
  --pe-sombra: 0 10px 30px rgba(20, 35, 25, .12);
  --pe-fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pe-fuente-titulos: 'Fraunces', Georgia, 'Times New Roman', serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--pe-fuente);
  color: var(--pe-texto);
  background: var(--pe-blanco);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pe-fuente-titulos);
  text-transform: none;
  letter-spacing: -.01em;
  color: var(--pe-verde);
  font-weight: 600;
}
h3, h3 a { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--pe-verde); }
a { color: var(--pe-verde-2); }

/* ---------- Botón RESERVAR (componente único en todo el sitio) ---------- */
.btn-reservar,
.megacontainer.menu ul li a.agenda01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: var(--pe-cta);
  color: var(--pe-blanco) !important;
  font-family: var(--pe-fuente);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  padding: .85em 1.7em;
  line-height: 1;
  height: auto;
  cursor: pointer;
  box-shadow: 0 8px 22px var(--pe-cta-sombra);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-reservar:hover, .btn-reservar:focus,
.megacontainer.menu ul li a.agenda01:hover, .megacontainer.menu ul li a.agenda01:focus {
  background: var(--pe-cta-hover);
  color: var(--pe-blanco) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px var(--pe-cta-sombra);
  border-bottom: 0;
  outline: none;
}
.btn-reservar:focus-visible { outline: 3px solid #ffd0b0; outline-offset: 3px; }
.btn-reservar--lg { font-size: 1.1rem; padding: 1.05em 2.2em; }
.btn-reservar--block { width: 100%; box-sizing: border-box; }
.btn-reservar .flecha { transition: transform .2s ease; }
.btn-reservar:hover .flecha { transform: translateX(3px); }

/* ---------- Menú superior ---------- */
.megacontainer.menu {
  background: rgba(20, 38, 27, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}
.megacontainer.menu ul li a {
  font-family: var(--pe-fuente);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .82rem;
}
.megacontainer.menu ul li a.agenda01 { font-size: .9rem; padding: .8em 1.6em; }

/* El preloader se va solo a los 2 s aunque falle todo el JavaScript */
#preloader { animation: pe-ocultar-preloader .3s ease 2s forwards; }
@keyframes pe-ocultar-preloader { to { opacity: 0; visibility: hidden; } }

/* ---------- Hero con buscador ---------- */
.megacontainer.slider { position: relative; }
.megacontainer.slider::after {
  /* degradado para que el texto y el buscador se lean sobre cualquier foto */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12, 24, 16, .72) 0%, rgba(12, 24, 16, .35) 45%, rgba(12, 24, 16, 0) 75%),
              linear-gradient(0deg, rgba(12, 24, 16, .45) 0%, rgba(12, 24, 16, 0) 35%);
  pointer-events: none;
  z-index: 1;
}
.megacontainer.slider .innerslide { display: none; } /* el mensaje ahora lo da el buscador */

.hero-reserva {
  position: absolute;
  z-index: 10000; /* por encima del slider (sus captions usan 9999) */
  left: 6%;
  top: 50%;
  transform: translateY(-45%);
  width: min(560px, 88%);
  color: var(--pe-blanco);
}
.hero-kicker {
  display: inline-block;
  margin: 0 0 .8rem;
  padding: .35em .9em;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
}
.hero-titulo {
  margin: 0 0 1.4rem;
  font-family: var(--pe-fuente-titulos);
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.08;
  font-weight: 600;
  color: var(--pe-blanco);
  text-align: left;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero-titulo::after, .cta-banda h2::after { display: none; } /* skeleton dibuja una línea bajo los h2 */
.hero-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .75rem;
  padding: 1.1rem;
  background: var(--pe-blanco);
  border-radius: calc(var(--pe-radio) + 4px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  color: var(--pe-texto);
}
.hero-form label {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pe-texto-suave);
}
.hero-form input {
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 .8rem;
  font: 600 1rem var(--pe-fuente);
  color: var(--pe-texto);
  background: var(--pe-arena);
  border: 1px solid var(--pe-arena-2);
  border-radius: 10px;
  box-shadow: none;
  box-sizing: border-box;
}
.hero-form input:focus { border-color: var(--pe-verde-2); outline: none; background: #fff; }
.hero-form .btn-reservar { grid-column: 1 / -1; margin-top: .25rem; }
.hero-confianza {
  margin: 1rem 0 0;
  font-size: .95rem;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
.hero-confianza .estrellas { color: #ffc94a; letter-spacing: .1em; }
.hero-confianza a { color: #fff; text-decoration: underline; cursor: pointer; }

/* ---------- Secciones del home ---------- */
.padding80 {
  background: var(--pe-verde);
  color: #fff;
  letter-spacing: .02em;
  padding: 1.6rem 1rem;
}
.destacado.padding80 { color: #fff; } /* el título va sobre la banda verde */
.verde { color: var(--pe-verde-2) !important; }
.banner_overlay span a, .video_overlay span a { color: var(--pe-verde-2); }
.destacado {
  font-family: var(--pe-fuente-titulos);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  color: var(--pe-verde);
  text-transform: none;
}
.habitaciones, .ubicaciontxt { background: var(--pe-arena); }
.megacontainer.habitaciones .container { max-width: 1040px; }

/* Lista de servicios convertida en grilla de tarjetas */
.casas .col_der { padding: 28px 24px; }
.casas .col_der .servicios-intro {
  font-family: var(--pe-fuente-titulos);
  font-size: 1.35rem;
  color: var(--pe-verde);
  margin-bottom: 1.2rem !important;
}
.casas .col_der p:not(.servicios-intro) {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .55rem;
  padding: .55rem .8rem;
  background: var(--pe-arena);
  border-radius: 10px;
  font-size: .95rem;
}
.casas .col_der p i {
  flex: 0 0 auto;
  margin: 0;
  width: 2rem; height: 2rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--pe-verde);
  color: #fff;
  font-size: .85rem;
}
.casas .col_der .btn-reservar { margin-top: 1rem; }

/* En escritorio, slider y servicios con la misma altura y proporción pareja */
@media (min-width: 1000px) {
  .casas { --pe-alto-casas: 720px; }
  .casas .slider_casa { width: 57%; }
  .slider_casa .bx-wrapper ul li,
  .slider_casa .bx-wrapper ul li div.back { height: var(--pe-alto-casas); min-height: 0; }
  .casas .four.columns.col_der {
    width: 43%;
    min-height: var(--pe-alto-casas);
    box-sizing: border-box;
    padding: 36px clamp(28px, 3.5vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .casas .col_der p:not(.servicios-intro) { padding: .35rem .8rem; margin-bottom: .4rem; line-height: 1.3; letter-spacing: normal; }
  .casas .col_der p i { width: 1.75rem; height: 1.75rem; }
}

/* Banda de CTA reutilizable entre secciones */
.cta-banda {
  background: linear-gradient(120deg, var(--pe-verde) 0%, var(--pe-verde-2) 100%);
  color: #fff;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem;
  text-align: center;
}
.cta-banda h2 {
  margin: 0 auto .6rem;
  color: #fff;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  text-align: center;
  max-width: 760px;
}
.cta-banda p { margin: 0 auto 1.6rem; max-width: 620px; color: rgba(255, 255, 255, .85); font-size: 1.05rem; }
.cta-banda .cta-secundario { display: block; margin-top: 1rem; color: #fff; font-size: .95rem; }

.cta-inline { text-align: center; padding: 1.5rem 0 .5rem; }

/* ---------- Footer ---------- */
footer { background: #13251a; color: rgba(255, 255, 255, .8); padding: 3rem 0 2rem; }
footer h5 { color: #fff; font-family: var(--pe-fuente-titulos); text-transform: none; font-size: 1.3rem; }
footer a { color: #fff; }

/* ---------- Barra fija de reserva en celular ---------- */
.barra-reservar { display: none; }

@media (max-width: 749px) {
  /* foto más baja y el buscador debajo, para que RESERVAR entre en la primera pantalla */
  .megacontainer.slider { height: auto; }
  .megacontainer.slider .bx-viewport,
  .megacontainer.slider .bx-wrapper ul li,
  .megacontainer.slider .bx-wrapper ul li div.back { height: 42vh !important; min-height: 0; }
  .megacontainer.slider::after { bottom: auto; height: 42vh; }
  .hero-reserva {
    position: relative;
    left: auto; top: auto; transform: none;
    width: auto;
    margin: 20px 16px 0;
    color: var(--pe-texto);
  }
  .hero-kicker { background: var(--pe-verde); border-color: var(--pe-verde); color: #fff; font-size: .7rem; }
  .hero-titulo { color: var(--pe-verde); text-shadow: none; font-size: 1.75rem; margin-bottom: 1rem; }
  .hero-form { box-shadow: var(--pe-sombra); border: 1px solid var(--pe-arena-2); }
  .megacontainer.slider .bx-controls-direction { display: none; } /* en celular se desliza con el dedo */
  .hero-confianza { color: var(--pe-texto-suave); text-shadow: none; text-align: center; }
  .hero-confianza a { color: var(--pe-verde-2); }
  .megacontainer.slider::after {
    background: linear-gradient(0deg, rgba(12, 24, 16, .35) 0%, rgba(12, 24, 16, 0) 50%);
  }

  .barra-reservar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 10001;
    padding: .65rem 16px calc(.65rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
    transform: translateY(110%);
    transition: transform .25s ease;
  }
  .barra-reservar.visible { transform: translateY(0); }
  .barra-reservar .texto { font-size: .85rem; line-height: 1.25; color: var(--pe-texto-suave); }
  .barra-reservar .texto b { display: block; color: var(--pe-verde); font-size: .95rem; }
  body { padding-bottom: 76px; }
  /* que el botón flotante de WhatsApp no tape la barra */
  #WAButton, .floating-wpp { bottom: 84px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-reservar, .barra-reservar { transition: none; }
}