:root{
    --forest:#173d2d;
    --deep:#102c21;
    --sage:#dce5d6;
    --cream:#f7f5ef;
    --text:#24352b;
    --muted:#68776b;
    --accent:#c6d7a5;
    --serif:"Playfair Display",Georgia,serif;
    --sans:"DM Sans",Arial,sans-serif
}
*{box-sizing:border-box}
/* Ajusta el tamaño de la imagen */
.logo-whatsapp {
    width: 24px;   /* Cambia el tamaño según prefieras */
    height: auto;
    vertical-align: middle; /* Alinea verticalmente el logo con el texto */
    margin-right: 8px;      /* Añade una pequeña separación con el texto */
}

/* Asegura que el botón mantenga el contenido alineado en una sola línea */
.floating-whatsapp {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* Botón de la galería */
.video-trigger {
    cursor: pointer;
    position: relative;
}

/* Fondo oscuro de la ventana emergente */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Contenedor del reproductor */
.lightbox-content {
    position: relative;
    width: 90%;
    max-width: 420px; /* Ancho ideal para videos verticales */
    max-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* El reproductor de video nativo */
#lightbox-player {
    width: 100%;
    height: auto;
    max-height: 80vh;
    border-radius: 12px;
    background: #000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* Botón de cerrar (X) encima del video */
.lightbox-close {
    position: absolute;
    top: -45px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    z-index: 10000;
}


.brand-logo {
    height: 40px;          /* Ajusta la altura para que encaje con tu diseño */
    width: auto;           /* Mantiene las proporciones correctas de la imagen */
    vertical-align: middle; /* Alinea el logo con el centro del texto */
    margin-right: 12px;     /* Separa el logo del texto de la marca */
}
html{scroll-behavior:smooth;scroll-padding-top:85px}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
.site-header{height:82px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;background:var(--cream);position:relative;z-index:10}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--forest)}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #9eae91;border-radius:50%;font-size:25px}
.brand strong,.brand small{display:block;letter-spacing:.12em}
.brand strong{font-size:12px}
.brand small{margin-top:4px;font-size:9px;letter-spacing:.19em}
.nav-links{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);font-size:12px;font-weight:600}
.nav-cta{background:var(--forest);color:#fff;padding:13px 19px}
.menu-toggle{display:none;border:0;background:none;font-size:26px;color:var(--forest)}
.hero{min-height:670px;height:min(78vw,780px);position:relative;display:flex;align-items:center;overflow:hidden;background:#536b4f;color:#fff}
.hero-photo{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,35,24,.8),rgba(11,35,24,.4) 55%,rgba(11,35,24,.1)),url("imagenes/imagen-01.jpg") center/cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,35,24,.3),transparent 50%)}
.hero-content{width:min(760px,78%);margin-left:10%;position:relative;z-index:1;padding:65px 0}
.eyebrow{font-size:10px;letter-spacing:.2em;line-height:1.7;font-weight:700;margin:0 0 22px}
.eyebrow span{display:inline-block;width:25px;height:1px;vertical-align:middle;background:var(--accent);margin-right:10px}
.hero h1,h2{font-family:var(--serif);font-weight:500;letter-spacing:-.035em}
.hero h1{font-size:clamp(43px,6.1vw,82px);line-height:1.08;margin:0}
.hero h1 em,h2 em{font-weight:500;color:var(--accent)}
.hero-copy{max-width:510px;font-size:15px;line-height:1.9;color:#eee;margin:25px 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.button{min-height:52px;padding:0 21px;display:inline-flex;align-items:center;justify-content:center;gap:14px;font-size:11px;font-weight:700;transition:transform .2s}
.button:hover{transform:translateY(-2px)}
.button-light{color:var(--forest);background:var(--cream)}
.button-whatsapp{color:#fff;border:1px solid #ffffffaa;background:#246b46}
.hero-note{margin-top:45px;color:#ffffffc9;font-size:10px}
.hero-note span{color:var(--accent);margin-right:8px}
.scroll-cue{position:absolute;bottom:24px;left:50%;font-size:23px}
.section-pad{padding:100px 9%}
.intro-label{font-size:10px;font-weight:700;letter-spacing:.18em;color:#6e806b}
.leaf{color:#9aaf82;font-size:19px;margin-right:10px}
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;margin-top:32px}
.intro-grid h2,.section-heading h2{font-size:clamp(37px,4.5vw,58px);line-height:1.12;margin:0}
.intro h2 em,.section-heading h2 em,.feature-copy h2 em{color:#849a6f}
.intro-text{max-width:490px}
.intro-text p,.feature-copy>p:not(.eyebrow),.section-heading>p,.room-info p,.pet-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.9}
.text-link{display:inline-block;margin-top:15px;padding-bottom:8px;border-bottom:1px solid #9aab8e;font-size:11px;font-weight:700}
.feature-band{display:grid;grid-template-columns:1fr 1fr;background:#e8eadf;min-height:610px}
.feature-image{min-height:600px;background-position:center;background-size:cover}
.feature-copy{padding:75px clamp(35px,7vw,100px);align-self:center}
.eyebrow-dark{color:#7b8d70}
.feature-copy h2{font-size:clamp(42px,4.5vw,62px);line-height:1.1;margin:0}
.feature-copy>p:not(.eyebrow){margin:23px 0 28px}
.amenities{display:grid;grid-template-columns:1fr 1fr;gap:22px 15px;margin-bottom:32px}
.amenities>div{display:flex;gap:12px;align-items:flex-start}
.amenity-icon{display:grid;place-items:center;width:35px;height:35px;border:1px solid #bac6ae;border-radius:50%;color:#617857;font-size:18px;flex-shrink:0}
.amenities strong,.amenities small{display:block}
.amenities strong{font-size:12px;margin:2px 0 5px}
.amenities small{font-size:10px;color:#748071;line-height:1.5}
.button-green{background:var(--forest);color:white}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:38px}
.section-heading .eyebrow{margin-bottom:16px}
.section-heading>p{max-width:310px;margin-bottom:5px}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.room-card{background:#eeeee6}
.room-image{height:250px;background-position:center;background-size:cover}
.room-info{padding:24px}
.room-number{font-size:9px;letter-spacing:.17em;color:#809071;font-weight:700}
.room-info h3{font-family:var(--serif);font-weight:500;font-size:26px;margin:10px 0}
.room-info p{font-size:12px;margin-bottom:0}
.gallery{background:#f0efe8}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery-card{border:0;padding:0;position:relative;min-height:210px;background:#c7d1bf center/cover;overflow:hidden;cursor:pointer;text-align:left}
.gallery-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#102c21a8,transparent 60%);transition:background .2s}
.gallery-card:hover:after{background:linear-gradient(0deg,#102c21c9,transparent 70%)}
.gallery-card span{position:absolute;left:16px;bottom:17px;z-index:1;color:#fff;font-family:var(--serif);font-size:19px}
.gallery-hint{font-size:10px;color:#8a9385;line-height:1.6;margin-top:15px}
.pet-section{background:var(--forest);color:white;padding:75px 9%;display:flex;align-items:center;justify-content:space-between;gap:35px}
.pet-art{width:95px;height:95px;flex:0 0 95px;border:1px solid #dce5d655;border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:45px;position:relative}
.pet-art span:last-child{position:absolute;font-size:20px;bottom:7px;right:7px}
.pet-copy{max-width:600px}
.pet-copy .eyebrow{color:var(--accent);margin-bottom:14px}
.pet-copy h2{font-size:clamp(34px,4vw,49px);line-height:1.13;margin:0}
.pet-copy>p:not(.eyebrow){color:#ffffffb8}
.pet-stamp{width:100px;height:100px;flex:0 0 100px;border:1px solid #dce5d677;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(9deg);color:var(--accent)}
.pet-stamp span{font-size:22px}
.pet-stamp strong{font-size:10px;text-align:center;letter-spacing:.12em;line-height:1.3}
.booking{padding-top:90px;padding-bottom:90px;background:#e8eadf}
.booking-card{padding:70px 25px;text-align:center;color:#fff;background:linear-gradient(90deg,#113022e8,#113022b8),url("imagenes/imagen-01.jpg") center/cover}
.booking-card .eyebrow{color:var(--accent);margin-bottom:17px}
.booking-card h2{font-size:clamp(42px,5vw,62px);line-height:1.1;margin:0}
.booking-card>p:not(.eyebrow){max-width:510px;margin:22px auto 27px;color:#ffffffcc;font-size:13px;line-height:1.8}
.booking-card .button{margin-bottom:17px}
.booking-card>small{display:block;color:#ffffff99;font-size:10px}
.footer{padding:35px 6%;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer p{font-family:var(--serif);font-style:italic;color:#7d8979;font-size:14px}
.footer>a:not(.brand){font-size:11px;font-weight:700}
.footer>small{width:100%;padding-top:17px;border-top:1px solid #e3e3d9;font-size:9px;color:#899185}
.floating-whatsapp{position:fixed;right:20px;bottom:20px;z-index:20;display:flex;align-items:center;gap:9px;background:#246b46;color:#fff;border-radius:30px;padding:14px 18px;box-shadow:0 8px 24px #0003;font-size:17px}
.floating-whatsapp span{font-size:11px;font-weight:700}
.lightbox{display:none;position:fixed;inset:0;background:#07140fee;z-index:100;align-items:center;justify-content:center;padding:5vw}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;box-shadow:0 12px 50px #0008}
.lightbox-close{position:absolute;right:25px;top:15px;color:white;background:transparent;border:0;font-size:42px;cursor:pointer}
@media(max-width:900px){
    .site-header{height:74px;padding:0 5%}
    .menu-toggle{display:block;cursor:pointer}
    .nav-links{display:none;position:absolute;top:74px;left:0;right:0;padding:20px 5% 26px;background:var(--cream);flex-direction:column;align-items:stretch;gap:0;box-shadow:0 15px 20px #0001}
    .nav-links.open{display:flex}
    .nav-links>a{padding:14px 0}
    .nav-links .nav-cta{padding:14px 18px;text-align:center;margin-top:8px}
    .hero{min-height:650px;height:auto}
    .hero-content{width:86%;margin-left:7%}
    .section-pad{padding:75px 7%}
    .feature-band{grid-template-columns:1fr}
    .feature-image{min-height:400px}
    .feature-copy{padding:60px 7%}
    .room-grid{grid-template-columns:1fr 1fr}
    .gallery-grid{grid-template-columns:repeat(3,1fr)}
    .pet-section{padding:60px 7%}
    .pet-art{display:none}
}
@media(max-width:580px){
    .brand-mark{width:34px;height:34px}
    .brand strong{font-size:10px}
    .brand small{font-size:8px}
    .hero{min-height:680px}
    .hero-photo{background-position:60% center}
    .hero-content{padding:60px 0 80px}
    .hero h1{font-size:clamp(39px,10.5vw,54px)}
    .hero-copy{font-size:13px}
    .hero-actions{flex-direction:column;align-items:stretch;max-width:340px}
    .hero-actions .button{justify-content:space-between}
    .hero-note{margin-top:30px;line-height:1.7;max-width:280px}
    .intro-grid{grid-template-columns:1fr;gap:20px;margin-top:25px}
    .intro-grid h2,.section-heading h2{font-size:40px}
    .feature-image{min-height:310px}
    .feature-copy h2{font-size:47px}
    .amenities{gap:18px 10px}
    .amenities small{font-size:9px}
    .section-heading{display:block}
    .section-heading>p{margin-top:18px}
    .room-grid{grid-template-columns:1fr}
    .room-image{height:270px}
    .gallery-grid{grid-template-columns:repeat(2,1fr);gap:9px}
    .gallery-card{min-height:170px}
    .gallery-card span{left:11px;bottom:12px;font-size:16px}
    .pet-section{padding:55px 7%}
    .pet-copy h2{font-size:35px}
    .pet-stamp{display:none}
    .booking{padding:50px 5%}
    .booking-card{padding:55px 20px}
    .booking-card h2{font-size:42px}
    .footer{flex-direction:column;align-items:flex-start;padding:30px 7%}
    .footer p{margin:0}.floating-whatsapp{right:12px;bottom:12px;padding:12px 15px}
}


/* Flechas para navegar por la galería ampliada */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1002;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(23, 61, 45, 0.8);
  color: white;
  font-size: 23px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-nav:hover {
  background: #173d2d;
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

@media (max-width: 600px) {
  .lightbox-nav {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }
}

/* Video integrado en el mismo visor de la galería */
.lightbox-video {
  display: none;
  width: min(85vw, 1000px);
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
  position: relative;
  z-index: 1001;
}

@media (max-width: 600px) {
  .lightbox-video {
    width: 100%;
    max-height: 70vh;
  }
}

.room-image,
.feature-image {
  cursor: zoom-in;
}