/* /assets/css/layout.css */
:root{
  --paper:#ffffff;
  --ink:#0b0b0b;
  --muted:#6b7280;
  --gold:#D8B880;
  --gold-strong:#caa760;
  --navy:#142b4a;
  --line:rgba(0,0,0,.10);

  --topbar-h:0px;
  --header-h:64px;
  --offset-total:64px;

  /* ✅ Drawer (solo mobile) */
  --drawerW: min(46vw, 320px); /* menos de la mitad */
  --drawerOverlay: rgba(0,0,0,.55);
}

body{
  padding-top:var(--offset-total);
}

/* ===== MENÚ / HEADER ===== */
.site-header{
  position:fixed;
  top:var(--topbar-h,0);
  left:0; right:0;
  z-index:9999;
  background:white;
  height:var(--header-h);
  color:black;
  border: 1px solid #eaeaea
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-around;
  gap:8rem;
  padding:.5rem 0;
  height:100%;
}
.brand{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo{
  height:45px;
}
.nav{
  margin-left:0;
}

.nav-toggle, .nav-toggle.m{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .55rem;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  font-size:.95rem;
  cursor:pointer;
  color:gray;
}

.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  gap:.6rem;
  align-items:center;
}
.nav-list a{
  color:black;
  text-decoration:none;
  padding:.7rem .6rem;
  border-radius:5px;
  font-weight:500;
}
.nav-list a.is-active{
  font-weight:700;
  text-decoration: underline var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.nav-list a:hover{ color:rgb(78, 78, 78); font-weight:600; }

.lang-switch{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-left:4.5rem;
  border-radius:5px;
}
.lang, .m-lang .lang{
  border:1px solid var(--line);
  background:#fff;
  padding:.28rem 12px;
  font-size:.9rem;
  border-radius:7px;
  border:1px solid black;
  color:black;
}
.lang:hover{ border:1px solid var(--gold); color:var(--gold-strong); }
.lang.is-active{
  background:black;
  font-weight:600;
  color:white;
  border:1px solid gray;
}

@media (min-width:980px){
  .nav-toggle{ display:none; }
  .nav-list{ display:flex; }
}

.header-mobile{ display:none; }

@media (max-width:979px){
  .header-inner{ display:none; }

  .header-mobile{
    display:grid;
    grid-template-columns:48px 1fr 100px;
    align-items:center;
    padding:.2rem .6rem;
    gap:.25rem;
    height:100%;
    border-top:1px solid rgb(207, 207, 207);
  }

  .m-center{ justify-self:center; display:flex; align-items:center; justify-content:center; }
  .m-logo{ height:40px; width:auto; object-fit:contain; }
  .m-lang{ display:flex; justify-self:end; gap:.35rem; padding-right:.25rem; }
  .m-lang .lang{ padding:.25rem .6rem; font-size:.8rem; text-align:center; }

  /* ✅ Overlay real (div creado por JS) */
  .nav-overlay{
    position:fixed;
    inset:0;
    z-index:10040;              /* debajo del drawer, encima del contenido */
    background:var(--drawerOverlay);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  .nav-overlay.is-on{
    opacity:1;
    pointer-events:auto;        /* ahora sí captura click */
  }

  /* ✅ Drawer real (el UL) */
  #site-nav{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:var(--drawerW);
    z-index:10050;

    /* look */
    background:rgba(0,0,0,.78);
    backdrop-filter: blur(6px);

    /* reset del estilo anterior */
    border:0;
    border-radius:0;
    box-shadow:none;
    margin:0;
    padding: .6rem 0;

    display:flex;               /* siempre flex, pero “cerrado” por transform */
    flex-direction:column;
    gap:0;
    overflow:auto;

    /* estado cerrado */
    transform:translateX(-105%);
    transition:transform .22s ease;
  }
  #site-nav.open{
    transform:translateX(0);
  }

  /* items */
  #site-nav > li{ width:100%; }

  #site-nav a{
    display:block;
    padding:.95rem 1rem;
    color:#fff !important;
    font-weight:600;
    letter-spacing:.2px;
    text-decoration:none;
  }

  #site-nav > li + li a{
    border-top:1px solid rgba(255,255,255,.10);
  }

  #site-nav a:hover{
    background:rgba(255,255,255,.10);
    color:#fff !important;
    font-weight:700;
  }

  /* activo: barra dorada */
  #site-nav a.is-active{
    text-decoration:none;
    font-weight:800;
    position:relative;
  }
  #site-nav a.is-active::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
    background:var(--gold);
  }
}

/* ===== FOOTER ===== */
.site-footer{
  margin-top:15px;
  border-top:1px solid #111;
  background:#000;
  color:#fff;
  padding: 22px 0px 0px;
}
.footer-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:150px;
  align-items:start;
  justify-items:center;
  text-align:left;
  width:100%;
  margin-bottom: 15px;
}
@media (max-width:979px){
  .footer-grid{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:28px; }
}
.f-col{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.8rem;
}

.f-invert{ filter:brightness(0) invert(1); }
.f-brand .isotipo{ display:none; }
.f-brand .logo{ margin-top:10px; margin-bottom:10px; height:45px; }

.f-social{ display:flex; gap:.7rem; justify-content:flex-start; align-items:center; }
@media (max-width:979px){ .f-social{ justify-content:center; } }

.sbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 .6rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  color:#1f2937;
  text-decoration:none;
  background:#fff;
}
.f-social .sbtn:hover{ color:gray; transform: translateY(-1px); }

.f-links h5,.f-cta h5,.f-info h5{ margin:.2rem 0 .4rem; font-size:1rem; color:#fff; }
.f-links ul{ list-style:none; margin:0; padding:0; }
.f-links ul.cols-2{ columns:2; column-gap:28px; }
.f-links ul.left{ text-align:left; }
.f-links li{ break-inside:avoid; margin-bottom:.35rem; font-weight:500; }
.f-links a{ color:#eee; text-decoration:none; opacity:.9; }
.f-links a:hover{ font-weight:700; }

.f-info-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  font-weight:500;
}
.fi-item{ display:flex; align-items:flex-start; gap:.6rem; }
@media (max-width:979px){
  .fi-item{ justify-content:left; padding:0 35px; text-align:justify; }
}
.fi-icon{
  display:inline-grid;
  place-items:center;
  width:28px; height:28px;
  border-radius:8px;
  background:rgba(216,184,128,.12);
  border:1px solid rgba(216,184,128,.35);
}
.fi-icon.ubi{ padding:0 6px 0 4px; }
.svg-gold{ fill:var(--gold); }
.fi-value{ color:#e7e7e7; text-decoration:none; }
.fi-value:hover{ font-weight:600; }

.btn-footer{
  background:#fff;
  color:#111;
  border:1px solid #111;
  padding:.55rem 1rem;
  border-radius:12px;
  font-weight:800;
}
.btn-footer:hover{ color:black; background:var(--gold); }

.copy{
  display:flex;
  justify-content:center;
  align-items:center;
  border-top:1px solid rgba(255,255,255,.12);
  padding:12px;
  background:var(--gold);
  color:black;
  font-weight:600;
  letter-spacing:.3px;
}
@media (max-width:979px){
  .f-brand .logo{ display:none; }
  .f-brand .isotipo{ display:block; height:40px; }
  .copy{ font-size:.85rem; text-align:center; }
}

/* ===== WhatsApp flotante ===== */
.whatsapp-float{
  position:fixed;
  right:16px;
  bottom:16px;
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  text-decoration:none;
  z-index:10050;
  background:white;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.whatsapp-float:hover{ background-color:black; }

.copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; }
.copy a { color: inherit; opacity: .6; text-decoration: none; }
.copy a:hover { opacity: 1; color: var(--navy); }
.copy-sep { opacity: .3; }