:root{
  --bg:#0f1113;
  --bg-2:#15181b;
  --text:#e8eaed;
  --muted:#b7bec7;
  --primary:#d93a3a;
  --accent:#1fae50;
  --card:#1b1f24;
  --border:#2a2f36;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:linear-gradient(90deg,#161a1d,#121417);border-bottom:1px solid var(--border);backdrop-filter:saturate(120%) blur(6px)}
.nav{display:flex;align-items:center;gap:16px;height:76px}
.nav .brand{display:flex;align-items:center;gap:16px;flex:1}
.brand img{height:54px;width:auto;display:block}
.brand .title{font-weight:800;letter-spacing:.3px}
.brand .subtitle{font-size:.82rem;color:var(--muted)}
.menu{display:flex;align-items:center;gap:16px}
.menu > a, .menu > button{background:transparent;border:0;color:var(--text);font-weight:600;padding:10px 12px;cursor:pointer;border-radius:10px}
.menu > a:hover, .menu > button:hover{background:var(--bg-2)}
.dropdown{position:relative}
.dropdown-content{position:absolute;top:64px;left:0;background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:280px;display:none;padding:8px}
.dropdown.open .dropdown-content{display:block}
.dropdown-content a{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-weight:500;color:var(--muted);border-radius:8px}
.dropdown-content a:hover{background:var(--bg-2);color:var(--text)}
.cta{display:flex;gap:10px}
.btn{padding:10px 14px;border-radius:12px;border:1px solid var(--border);font-weight:700;cursor:pointer}
.btn-primary{background:var(--primary);border-color:transparent}
.btn-primary:hover{filter:brightness(1.1)}
.btn-outline{background:transparent}
.btn-outline:hover{background:var(--bg-2)}
.btn-wa{background:var(--accent);color:#fff;border-color:transparent}
.hero{background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,.55)), url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;padding:80px 0;border-bottom:1px solid var(--border)}
.hero h1{font-size:2.2rem;margin:0 0 8px}
.hero p{color:var(--muted);max-width:760px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{padding:8px 10px;border:1px solid var(--border);border-radius:999px;font-size:.9rem;color:var(--muted)}
.section{padding:64px 0;border-bottom:1px solid var(--border)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px}
.card h3{margin-top:6px}
.grid-2{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea{width:100%;padding:12px 14px;background:#0f1215;color:var(--text);border:1px solid var(--border);border-radius:10px}
.form textarea{min-height:120px;grid-column:1/-1}
.form .submit{grid-column:1/-1;justify-self:start}
.footer{padding:28px 0;color:var(--muted)}

/* Botón flotante de WhatsApp */
.float-wa{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  width: 64px;           /* tamaño desktop */
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform .15s ease, box-shadow .15s ease;
  /* Opcional: sombra suave para destacar sobre fondos oscuros */
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.float-wa:hover { transform: scale(1.06); }
.float-wa img{
  width: 100%;
  height: auto;
  display: block;
}

/* Ajustes responsivos */
@media (max-width: 768px){
  .float-wa{ right: 14px; bottom: 14px; width: 56px; height: 56px; }
}
@media (max-width: 420px){
  .float-wa{ right: 12px; bottom: 12px; width: 52px; height: 52px; }
}

/* === Drawer (menú mobile) – asegurar que al estar cerrado no interfiera === */
@media (max-width: 768px){
  .menu{
    position: fixed;
    left: 0; right: 0;
    top: var(--drawer-top, 64px);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: calc(100vh - var(--drawer-top, 64px));
    overflow: auto;
    transform: translateY(-110%);
    transition: transform .25s ease, visibility 0s .25s; /* oculta tras animación */
    visibility: hidden;       /* <- cerrado: no visible */
    pointer-events: none;     /* <- cerrado: no capta clics */
    z-index: 46;
  }
  .menu.open{
    transform: translateY(0);
    transition: transform .25s ease, visibility 0s; /* muestra ya */
    visibility: visible;
    pointer-events: auto;
  }
  .menu-backdrop{ z-index: 45; }
}

/* === WhatsApp flotante (blindado) === */
a.float-wa{
  position: fixed !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 10000 !important;      /* por encima de todo */
  width: 52px !important;         /* tamaño mobile; ajusto más abajo para desktop */
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
a.float-wa img{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 50% !important;
}

/* Desktop: un poco más grande */
@media (min-width: 769px){
  a.float-wa{
    right: 16px !important;
    bottom: 16px !important;
    width: 64px !important;
    height: 64px !important;
  }
}
/* ====== Reset de ancho y box-sizing para evitar desbordes ====== */
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }

/* ====== Contenedor responsivo con padding fluido ====== */
.container{
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(12px, 4vw, 24px);
}

/* ====== Secciones / tipografía fluidas de títulos ====== */
.section h2{
  font-size: clamp(22px, 5.2vw, 32px);
  line-height: 1.2;
  margin-bottom: clamp(12px, 2.5vw, 16px);
}

/* ====== Grid de tarjetas sin cortes ni overflow ====== */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 2.4vw, 20px);
}
.card{ height: 100%; }

/* ====== Bloque “Nosotros” a una columna en mobile ====== */
.grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2.4vw, 20px);
}
@media (max-width: 768px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* ====== Galería: en grilla responsiva (sin scroll horizontal) ====== */
.gallery{
  display: grid;
  gap: clamp(8px, 2.2vw, 12px);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.gallery img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* ====== Contacto: mapa y separaciones ====== */
#contacto .map-wrap{
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  background:#0f1115;
}
#contacto .map-wrap iframe{
  display: block;
  width: 100%;
  height: clamp(240px, 48vw, 320px);
  border: 0;
}
#contacto .map-actions{
  margin: 12px 0 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ====== Botón flotante de WhatsApp “que acompaña” el scroll ======
   - Se mantiene visible al scrollear (position: fixed)
   - Respeta las zonas seguras (notch / barra) con env(safe-area-*)
   - Tamaño fluido con clamp()
*/
a.float-wa{
  position: fixed !important;
  right: calc(max(12px, env(safe-area-inset-right))) !important;
  bottom: calc(max(12px, env(safe-area-inset-bottom))) !important;
  z-index: 10000 !important;
  width: clamp(48px, 8.5vw, 64px) !important;
  height: clamp(48px, 8.5vw, 64px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
a.float-wa img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 50% !important;
}

/* ====== Header/Drawer: sin empujar contenido ni capturar clics cuando está cerrado ====== */
@media (max-width: 768px){
  .menu{
    position: fixed;
    left: 0; right: 0;
    top: var(--drawer-top, 64px);
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    max-height: calc(100vh - var(--drawer-top, 64px));
    overflow: auto;
    transform: translateY(-110%);
    transition: transform .25s ease, visibility 0s .25s;
    visibility: hidden;
    pointer-events: none;
    z-index: 46;
  }
  .menu.open{
    transform: translateY(0);
    transition: transform .25s ease, visibility 0s;
    visibility: visible;
    pointer-events: auto;
  }
  .menu-backdrop{ z-index: 45; }
}

/* ====== Salvaguarda extra contra cualquier desborde accidental ====== */
img, iframe, svg, video{ max-width: 100%; height: auto; }