/* ---------- Base ---------- */
:root{
  --bg:#0b0f14;
  --fg:#f7f8fa;
  --muted:#9aa4af;
  --primary:#2dd4bf; /* teal-ish accent */
  --card:#111722;
  --glass: rgba(11,15,20,.6);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%;display:block}

/* ---------- Layout ---------- */
.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}
.section{padding:64px 0}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size: clamp(2rem, 6vw, 4rem); font-weight:800}
h2{font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight:800}
h3{font-size:1.1rem; font-weight:700}
.lead{color:var(--muted); max-width:60ch}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,0));
  backdrop-filter:saturate(150%) blur(6px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;          /* ya no forzamos un ancho fijo */
  height: auto;
  background: none;     /* quitamos fondo de color */
  border-radius: 0;
  text-decoration: none;
}

.logo img {
  height: 96px;         /* controla aquí el tamaño del logo */
  width: auto;          /* mantiene proporción */
  display: block;
}

.brand-name {
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.1rem;
}
.nav a {
  color: var(--fg);       /* texto blanco normal */
  text-decoration: none;
  font-weight: 600;
  opacity: 1;
}

.nav a:hover {
  color: #2dd4bf;       /* cambia a verde/teal al pasar el mouse */
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:72vh; display:grid; place-items:center;
  background-image:
    linear-gradient(rgba(3,10,16,.6), rgba(3,10,16,.6)),
    url('assets/img/Entrada.jpg');
  background-size:cover; background-position:center;
}
.overlay{position:absolute; inset:0;}
.hero-content{
  position:relative; text-align:center; padding:40px 0;
}
.cta-row{display:flex; gap:1rem; justify-content:center; margin-top:1rem; flex-wrap:wrap}
.btn{
  padding:.85rem 1.2rem; border-radius:999px;
  text-decoration:none; font-weight:700; border:1px solid transparent;
  transition:transform .1s ease, background .2s ease, border-color .2s ease;
}
.btn.primary{background:var(--primary); color:#031016}
.btn.ghost{background:transparent; border-color:rgba(255,255,255,.4); color:var(--fg)}
.btn:hover{transform:translateY(-1px)}

/* ---------- Services ---------- */
.services .services-grid{
  display:grid; gap:14px;
  grid-template-columns: repeat(3, 1fr);
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card p{color:var(--muted); margin:.5rem 0 0}

/* ---------- Gallery ---------- */
.gallery .carousel{
  position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.08);
}
.gallery .track{
  display:flex; transition:transform .5s ease;
  will-change: transform;
}
.gallery img{
  width:100%; height:500px; object-fit:cover; flex: 0 0 100%;
  user-select:none; -webkit-user-drag:none;
}
.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:none; background:rgba(0,0,0,.45); color:var(--fg: ##ffffff);
  width:42px; height:42px; border-radius:999px; cursor:pointer;
  display:grid; place-items:center; font-size:22px;
}
.nav-btn:hover{background:rgba(0,0,0,.65)}
.prev{left:10px} .next{right:10px}

/* ---------- Contact ---------- */
.contact-inner{
  display:grid; gap:24px; grid-template-columns: 1.1fr .9fr;
}
.contact-list{list-style:none; padding:0; margin:1rem 0; color:var(--muted)}
.contact-list a{color:var(--fg)}

.contact-form{
  background:var(--card); padding:18px; border-radius:18px;
  border:1px solid rgba(255,255,255,.08)
}
.contact-form label{display:grid; gap:.4rem; margin-bottom:12px; font-weight:600}
.contact-form input, .contact-form textarea{
  background:#0b1220; color:var(--fg); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:.8rem;
}

/* ---------- Footer ---------- */
.site-footer{padding:28px 0; border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.social a{color:var(--muted); text-decoration:none; margin-left:.75rem}
.social a:hover{color:var(--fg)}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .services .services-grid{grid-template-columns: repeat(2, 1fr)}
  .contact-inner{grid-template-columns: 1fr}
  .nav{display:none}
  .hamburger{display:block}
}
@media (max-width: 560px){
  .services .services-grid{grid-template-columns: 1fr}
  .hero{min-height:64vh}
}

/* ---------- Footer ---------- */
.site-footer{padding:28px 0; border-top:1px solid rgba(255,255,255,.08)}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.social a{
  color:var(--muted); text-decoration:none; margin-left:.75rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.4rem;
}
.social a:hover{color:var(--fg)}
.social svg{width:20px; height:20px; fill:currentColor}


/* ---------- Social Header ---------- */
.social-header{display:flex; align-items:center; gap:.6rem; margin-right:.75rem}
.social-header .ico{color:var(--fg); opacity:.9; display:grid; place-items:center; width:34px; height:34px; border-radius:999px; text-decoration:none; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06)}
.social-header .ico:hover{opacity:1; border-color:rgba(255,255,255,.28)}

/* ---------- Icons baseline ---------- */
.ico{display:inline-flex; align-items:center; gap:.5rem}

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab{
  position:fixed; right:16px; bottom:18px; z-index:60;
  width:56px; height:56px; border-radius:999px;
  display:grid; place-items:center; color:#052016;
  background:linear-gradient(135deg, #25D366, #22c55e);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  text-decoration:none; border:1px solid rgba(0,0,0,.15);
}
.whatsapp-fab:hover{transform:translateY(-2px); transition:transform .15s ease}

/* ---------- Footer Social ---------- */
.footer-inner .social .ico{margin-left:.75rem}



/* --- Pointer cursor on interactive elements --- */
a[href], button, .btn, [role="button"], .ico, .nav a {
  cursor: pointer;
}



/* --- Map embed responsive --- */
.map-embed{
  margin-top: 14px;
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}
.map-embed iframe{
  width: 100%;
  height: 320px;
  border: 0;
}
@media (max-width: 560px){
  .map-embed iframe{ height: 260px; }
}

/* --- Address logo --- */
.address-logo{height:100px;width:auto;margin-left:12px;vertical-align:middle;}


/* --- Map CTA button --- */

.map-cta{ padding:10px; display:flex; justify-content:flex-end }
.map-cta .btn.primary{
  background:#2dd4bf; color:#031016; font-weight:700; text-decoration:none;
  padding:.8rem 1.2rem; border-radius:12px; transition:transform .2s ease;
}
.map-cta .btn.primary:hover{ transform: translateY(-2px) }


/* --- Map zoom + mobile CTA adjustments --- */

/* --- Mobile centering for CTA --- */
@media (max-width: 560px){
  .map-cta{ justify-content: center; }
}
.map-open{
  display:inline-block; margin:8px 10px 4px 10px; color: var(--muted); text-decoration: none;
}
.map-open:hover{ text-decoration: underline; }

/* Sección de videos (debajo de la galería) */
.video-grid .gallery-video {
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  margin-bottom:20px;
}

/* Limitar altura de los videos */
.video-grid .gallery-video {
  max-height: 600px; /* altura máxima ajustada */
  object-fit: cover;
}