/* ============================================================================
   TEMPLATE "SMALL ACCOMMODATION", site.css
   Complementa a default/layout/media-queries.css (portados del template Zoon
   con la paleta del logo: #17739b petroleo / #508abb medio / #bed7e2 celeste).
   TOC:
     1. Fuentes locales (@font-face, reemplazan al fonts.css original)
     2. Overrides sin FontAwesome/Fontello (burger, go-top)
     3. Selector de idiomas (códigos 2 letras)
     4. Galería del hero (grid de previews, portado del <style> inline viejo)
     5. Sección galerías completas (2 columnas)
     6. Sección reserva (CTA + formulario + honeypot + captcha)
     7. Ubicación / mapa
     8. Lightbox vanilla (reemplaza magnific-popup)
     9. Responsive extra
   ========================================================================== */

/* 1. FUENTES ------------------------------------------------------------- */
@font-face{font-family:'merriweather-light';src:url('../fonts/merriweather-light-webfont.woff') format('woff'),url('../fonts/merriweather-light-webfont.ttf') format('truetype');font-display:swap}
@font-face{font-family:'merriweather-regular';src:url('../fonts/merriweather-regular-webfont.woff') format('woff'),url('../fonts/merriweather-regular-webfont.ttf') format('truetype');font-display:swap}
@font-face{font-family:'merriweather-italic';src:url('../fonts/merriweather-italic-webfont.woff') format('woff'),url('../fonts/merriweather-italic-webfont.ttf') format('truetype');font-display:swap}
@font-face{font-family:'merriweather-bold';src:url('../fonts/merriweather-bold-webfont.woff') format('woff'),url('../fonts/merriweather-bold-webfont.ttf') format('truetype');font-display:swap}
@font-face{font-family:'montserrat-regular';src:url('../fonts/montserrat-regular-webfont.woff') format('woff'),url('../fonts/montserrat-regular-webfont.ttf') format('truetype');font-display:swap}
@font-face{font-family:'montserrat-bold';src:url('../fonts/montserrat-bold-webfont.woff') format('woff'),url('../fonts/montserrat-bold-webfont.ttf') format('truetype');font-display:swap}

html{scroll-behavior:smooth}

/* 2. SIN ICON-FONTS ------------------------------------------------------ */
/* burger: el layout.css original usaba FontAwesome \f0c9; acá va unicode  */
#nav-wrap > #toggle-btn:before{font-family:inherit;content:"\2630";font-size:26px}
#nav-wrap.open ul#nav{display:block}
#go-top a{font-size:22px;font-weight:bold}
#main .social li a svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
#main .social li a:hover svg{opacity:.8}

/* 3. SELECTOR DE IDIOMAS ------------------------------------------------- */
.lang-switch{position:absolute;top:14px;right:76px;white-space:nowrap}
.lang-switch a{display:inline-block !important;padding:6px 7px;color:#fff;font:11px 'montserrat-bold',sans-serif;letter-spacing:1px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.lang-switch a:hover{color:#bed7e2}
.lang-switch a.active{color:#bed7e2;border-bottom:2px solid #bed7e2}

/* 4. GALERÍA DEL HERO (portado del estilo inline del template) ----------- */
.popup-gallery{overflow:hidden;margin:10px auto;max-width:960px}
.box{float:left;position:relative;width:12%;padding-bottom:12%}
.boxInner{position:absolute;left:10px;right:10px;top:10px;bottom:10px;overflow:hidden;border-radius:2px}
.boxInner img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.boxInner:hover img{transform:scale(1.08)}
@media only screen and (max-width:480px){.box{width:25%;padding-bottom:25%}}
@media only screen and (max-width:650px) and (min-width:481px){.box{width:23%;padding-bottom:23%}}
@media only screen and (max-width:1050px) and (min-width:651px){.box{width:16%;padding-bottom:16%}}
@media only screen and (max-width:1290px) and (min-width:1051px){.box{width:16%;padding-bottom:16%}}

/* 5. GALERÍAS COMPLETAS -------------------------------------------------- */
#galerias{background:#f4f8f9;padding:48px 0 42px;overflow:hidden}
#galerias .galerias-title{font:30px/36px 'montserrat-bold',sans-serif;color:#0b3446;margin-bottom:24px}
.gal-cols{display:flex;gap:24px;max-width:1100px;margin:0 auto;padding:0 20px}
.gal-col{flex:1 1 0;min-width:0}
.gal-col h3{font:15px/24px 'montserrat-bold',sans-serif;color:#17739b;text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;text-align:center}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal-grid a{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:2px}
.gal-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.gal-grid a:hover img{transform:scale(1.06)}

/* 6. RESERVA ------------------------------------------------------------- */
#reservar{background:#17739b;color:#fff;padding-bottom:48px;overflow:hidden}
#reservar #call-to-action h2{color:#fff}
#reservar #call-to-action p{color:#eaf4f8}
.booking-form{max-width:640px;margin:12px auto 0;background:rgba(255,255,255,.96);border-radius:6px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.booking-form label{display:block;margin:0 0 5px;color:#356;font:12px 'montserrat-bold',sans-serif;text-transform:uppercase;letter-spacing:1px}
.booking-form input,.booking-form textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid #c8d6dd;border-radius:4px;background:#fff;color:#123;font:14px 'montserrat-regular',sans-serif;outline:none}
.booking-form input:focus,.booking-form textarea:focus{border-color:#17739b;box-shadow:0 0 0 3px rgba(23,115,155,.15)}
.booking-form textarea{min-height:110px;resize:vertical}
.frow{margin-bottom:14px}
.frow.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.captcha{margin:14px 0}
altcha-widget{display:block;min-height:86px}
.button-book{display:block;width:100%;background:#12607f;color:#fff !important;border:0;border-radius:4px;padding:15px;font:15px 'montserrat-bold',sans-serif;text-transform:uppercase;letter-spacing:2px;cursor:pointer}
.button-book:hover{background:#0b3446}
.button-book[disabled]{opacity:.7;cursor:not-allowed}
.alert{border-radius:4px;padding:12px 14px;margin:0 0 16px;font:14px 'montserrat-bold',sans-serif}
.alert.ok{background:#e5f6ec;border:1px solid #57b877;color:#14532d}
.alert.err{background:#fdecec;border:1px solid #e08a8a;color:#7f1d1d}
/* honeypot: fuera de pantalla (los bots lo completan, los humanos no lo ven) */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* 7. UBICACIÓN / MAPA ---------------------------------------------------- */
#ubicacion .contacts{padding:30px 0 18px}
#ubicacion .contacts p a{color:#8fb9cc}
#ubicacion .contacts p a:hover{color:#fff}
#map{height:auto}
.map-link{text-align:center;background:#0f0f0f;margin:0;padding:14px 0 0}
.map-link a{color:#508abb;font:13px 'montserrat-regular',sans-serif}
.map-link a:hover{color:#bed7e2}

/* 8. LIGHTBOX VANILLA ---------------------------------------------------- */
.lb-overlay{position:fixed;inset:0;background:rgba(6,14,20,.94);z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column}
.lb-overlay img{max-width:92vw;max-height:84vh;box-shadow:0 12px 50px rgba(0,0,0,.6);border-radius:3px}
.lb-caption{color:#bed7e2;font:13px 'montserrat-regular',sans-serif;margin-top:12px}
.lb-btn{position:fixed;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:44px;cursor:pointer;padding:20px;opacity:.8;line-height:1}
.lb-btn:hover{opacity:1}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-close{position:fixed;top:10px;right:16px;transform:none;font-size:34px}

/* 9. RESPONSIVE EXTRA ---------------------------------------------------- */
@media only screen and (max-width:767px){
  .gal-cols{flex-direction:column}          /* social (primera) queda ARRIBA */
  .frow.f2,.frow.f3{grid-template-columns:1fr}
  .lang-switch{position:static;text-align:center;padding-top:6px}
  #nav-wrap{right:12px}
  .booking-form{margin-left:12px;margin-right:12px;padding:20px}
  header #logo{width:200px;margin-left:-100px;top:64px}
  header #logo img{max-width:160px}
}

/* 10. FIXES RONDA 1 (feedback de German con capturas) --------------------
   a) hero: el logo Base Camp es cuadrado (no apaisado como el del template
      viejo) -> más aire entre logo y título para que no se encimen.
   b) reservar: las .columns del CTA flotan (grid Skeleton viejo) y el card
      del form se montaba encima del texto -> clear/overflow.
   c) ubicación: strip de contacto compacto con flex (los floats la
      desproporcionaban) y mapa a lo ancho sin encogerse.                  */
header #logo img{max-width:150px;height:auto}
#main{margin-top:160px}
/* velo oscuro degradado sobre hero.jpg para que el texto blanco contraste */
#intro::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(5,18,28,.38) 0%,rgba(5,18,28,.18) 35%,rgba(5,18,28,.58) 100%);pointer-events:none;z-index:1}
#intro header,#intro #main{position:relative;z-index:2}
/* "GALERÍA DE FOTOS": blanco limpio con aire, sin la sombra verdosa vieja */
#main h5{color:#fff;letter-spacing:5px;text-shadow:0 2px 8px rgba(0,0,0,.7)}
#main h1,#main p{text-shadow:0 2px 10px rgba(0,0,0,.75)}
#reservar #call-to-action{overflow:hidden;text-align:center}
/* el CTA no tiene .row padre, la .twelve.columns flotaba sin ancho y quedaba
   corrida a la izquierda: se centra como bloque normal */
#reservar #call-to-action .twelve.columns{float:none !important;width:auto !important;display:block;max-width:880px;margin:0 auto}
#reservar .row{clear:both;float:none}
.booking-form{clear:both;float:none;overflow:hidden}
/* inputs: default.css les mete min-width:225px, margin 24px y fondo oscuro
   al focus -> se neutraliza TODO acá con especificidad mayor (#reservar).  */
#reservar .booking-form label{display:block;margin:0 0 5px;font:12px 'montserrat-bold',sans-serif;color:#335566;text-transform:uppercase;letter-spacing:1px}
#reservar .booking-form input,#reservar .booking-form textarea{display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:0;padding:11px 12px;border:1px solid #c8d6dd;border-radius:4px;background:#fff;color:#112233;font:14px 'montserrat-regular',sans-serif;outline:none}
#reservar .booking-form input:focus,#reservar .booking-form textarea:focus{background:#fff;color:#112233;border-color:#17739b;box-shadow:0 0 0 3px rgba(23,115,155,.15)}
#reservar .booking-form textarea{min-height:110px;resize:vertical}
#reservar .frow{margin-bottom:14px}
#ubicacion .contacts{padding:24px 0 18px}
#ubicacion .contact-details{display:flex;justify-content:center;align-items:flex-start;gap:24px;max-width:900px;margin:0 auto;overflow:hidden}
#ubicacion .contact-details .columns{float:none !important;width:auto !important;flex:1 1 0;padding:0 10px}
#ubicacion .contacts h3{margin-bottom:4px}
#ubicacion .contacts p{margin-bottom:0}
#map{clear:both;width:100%;height:auto}
#map iframe{width:100%;height:486px;border:0;display:block}
@media only screen and (max-width:767px){
  #main{margin-top:135px}
  header #logo img{max-width:120px}
  #ubicacion .contact-details{flex-direction:column;gap:16px;text-align:center}
  #map iframe{height:360px}
}