/* Secciones: cascarón compartido (header, footer, quicknav, CTA) y, más abajo, las secciones de página. */

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:70; width:100%;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled{ box-shadow:var(--shadow-2); border-bottom-color:transparent; }
.site-header__inner{ display:flex; align-items:center; gap:1.25rem; min-height:var(--header-h); }
.brand{ display:block; flex:none; }
.brand img{ width:168px; height:auto; }
.main-nav{ margin-left:auto; display:flex; align-items:center; }
.main-nav > ul{ display:flex; gap:2px; padding:4px; background:var(--paper); border-radius:var(--radius-pill); }
.main-nav a{
  display:block; padding:.6em 1.1em; border-radius:var(--radius-pill); text-decoration:none;
  color:var(--ink); font-weight:500; font-size:.95rem; line-height:1.2;
  transition:background-color .2s ease, color .2s ease;
}
.main-nav a:hover{ background:var(--white); }
.main-nav a[aria-current="page"]{ background:var(--navy); color:var(--white); }
.main-nav__cta{ display:none; }
/* Los botones dentro del nav conservan su color y padding propios (no los del link del menú) */
.main-nav a.btn{ display:inline-flex; padding:.85em 1.4em; border-radius:var(--btn-radius); font-size:1rem; }
.main-nav a.btn-call{ background:var(--acento); color:var(--acento-contraste); }
.main-nav a.btn-call:hover{ background:var(--acento-oscuro); }
.site-header__cta .btn{ min-height:44px; padding:.7em 1.15em; font-size:.92rem; }

.has-sub{ position:relative; display:flex; align-items:center; }
.sub-toggle{
  width:28px; height:44px; margin-left:-10px; border:0; background:none; cursor:pointer; color:var(--ink);
  display:grid; place-items:center;
}
.sub-toggle::after{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:translateY(-2px) rotate(45deg); }
.sub{
  position:absolute; top:100%; left:0; min-width:220px; padding:8px; margin-top:8px;
  background:var(--white); border-radius:20px; box-shadow:var(--shadow-3); border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-sub::after{ content:""; position:absolute; left:0; right:0; top:100%; height:10px; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.is-open > .sub{ opacity:1; visibility:visible; transform:none; }
.sub a{ border-radius:14px; }

.nav-toggle{
  display:none; margin-left:auto; width:48px; height:48px; border:0; border-radius:50%;
  background:var(--paper); cursor:pointer; place-items:center;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after{
  display:block; width:20px; height:2px; background:var(--navy); border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars{ position:relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after{ content:""; position:absolute; left:0; }
.nav-toggle__bars::before{ top:-6px; } .nav-toggle__bars::after{ top:6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:960px){
  .site-header__cta{ display:none; }              /* el botón flotante ya cubre WhatsApp en mobile */
  .nav-toggle{ display:grid; }
  .brand img{ width:150px; }
  .main-nav{
    position:absolute; top:100%; left:0; right:0; margin:0; padding:12px var(--gutter) 20px;
    flex-direction:column; align-items:stretch; gap:14px;
    background:var(--white); border-bottom:1px solid var(--line); box-shadow:var(--shadow-3);
    display:none; max-height:calc(100vh - var(--header-h)); overflow-y:auto; color:var(--ink);
  }
  .main-nav.is-open{ display:flex; }
  .main-nav > ul{ flex-direction:column; background:none; padding:0; gap:2px; }
  .main-nav a{ padding:.85em 1em; font-size:1.05rem; }
  .has-sub{ flex-wrap:wrap; }
  .has-sub > a{ flex:1; }
  .sub-toggle{ margin:0; width:48px; }
  .sub{ position:static; flex-basis:100%; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; margin:0; padding:0 0 0 12px; display:none; background:none; }
  .has-sub.is-open > .sub{ display:block; }
  .has-sub:hover > .sub:not(.x){ transform:none; }
  .main-nav__cta{ display:block; }
  .main-nav__cta .btn{ width:100%; }
}
/* Sin JS el menú de mobile se muestra siempre abierto debajo del header para que sea accesible */
html:not(.js) .nav-toggle{ display:none; }
@media (max-width:960px){
  html:not(.js) .main-nav{ position:static; display:flex; box-shadow:none; }
  html:not(.js) .sub{ display:block; }
}

/* ---------- CTA band ---------- */
.cta-band__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem 3rem; }
.cta-band h2{ margin-bottom:.3em; }
.cta-band p{ margin:0; max-width:46ch; }

/* ---------- Footer ---------- */
.site-footer{ padding-block:clamp(2.5rem, 2rem + 2vw, 4.5rem) 2rem; }
.site-footer__grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .site-footer__grid{ grid-template-columns:1.2fr .6fr 1.3fr; gap:3rem; } }
.site-footer__logo{ width:260px; height:auto; margin-bottom:1.25rem; }
.site-footer__brand p{ max-width:40ch; margin-bottom:1.25rem; }
.site-footer__h{ font:600 .8rem/1 var(--font-text); letter-spacing:.12em; text-transform:uppercase; color:var(--on-navy-muted); margin:0 0 1.1rem; }
.site-footer ul{ display:grid; gap:.7rem; }
.site-footer .cedulas{ display:flex; gap:.5rem; }
.site-footer a{ color:var(--on-navy); }
.site-footer .contact-link{ align-items:flex-start; line-height:1.45; }
.site-footer .contact-link .icon{ margin-top:.2em; }
.site-footer__legal{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.18); display:grid; gap:.9rem; }
.site-footer__name{ margin:0; color:var(--on-navy); font-weight:600; }
.site-footer__copy{ margin:0; font-size:.85rem; }

/* ---------- Página 404 ---------- */
.page-404{ min-height:60vh; display:grid; align-items:center; }
.page-404 .tile{ max-width:640px; }

/* Objetivos táctiles >=44px en navegación secundaria y footer */
.sub-toggle{ width:44px; margin-left:-16px; }
.site-footer ul a, .site-footer .contact-link{ display:inline-flex; align-items:center; min-height:44px; }
.site-footer .contact-link{ align-items:flex-start; padding-block:.35rem; }
.site-footer__brand .socials{ margin-top:.25rem; }

/* ---------- Rediseño abierto: header más ligero (nav con puntos, sin cápsula) y CTA grande ---------- */
.site-header{ background:rgba(255,255,255,.88); border-bottom-color:transparent; }
.main-nav > ul{ background:none; padding:0; gap:.2rem; }
.main-nav > ul > li > a, .main-nav .sub a{ display:inline-flex; align-items:center; gap:.5em; padding:.55em .8em; border-radius:var(--radius-pill); font-size:.92rem; background:none; }
.main-nav > ul > li > a[aria-current="page"]{ background:none; color:var(--navy); font-weight:600; }
.main-nav a.btn::before{ display:none; }
.main-nav a:hover{ background:var(--paper); }
.cta-band{ padding-block:clamp(3.5rem, 2rem + 6vw, 7rem); }
.cta-band h2{ font-size:clamp(2.4rem, 1rem + 5vw, 5rem); }
.cta-band p{ font-size:1.1rem; }

/* ---------- Accesos rápidos: barra delgada, del ancho del header, que se fija justo debajo de él ---------- */
.quicknav{
  position:sticky; top:calc(var(--header-h) + 1px); z-index:60; width:100%;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.quicknav .wrap{ display:block; }
.quicknav ul{ display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; width:max-content; max-width:100%; margin-inline:auto; }
.quicknav ul::-webkit-scrollbar{ display:none; }
.quicknav a{
  display:flex; align-items:center; min-height:40px; padding:0 .85rem; white-space:nowrap; text-decoration:none;
  font-size:.85rem; font-weight:500; color:var(--ink-muted); border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s ease, border-color .2s ease;
}
.quicknav a:hover{ color:var(--navy); }
.quicknav a[aria-current="true"]{ color:var(--navy); font-weight:600; border-bottom-color:var(--navy); }

/* Submenú de Servicios: pegado al header, filas completas y más aire */
@media (min-width:861px){
  .sub{ margin-top:0; top:calc(100% + 4px); min-width:240px; padding:10px; border-radius:18px; box-shadow:0 18px 40px rgba(0,40,80,.16); }
  .sub::before{ content:""; position:absolute; left:28px; top:-6px; width:12px; height:12px; background:var(--white); border-left:1px solid var(--line); border-top:1px solid var(--line); transform:rotate(45deg); }
  .has-sub::after{ height:14px; }
  .main-nav .sub li{ display:block; }
  .main-nav .sub a{ display:flex; width:100%; padding:.7em 1em; border-radius:12px; font-size:.95rem; }
  .main-nav .sub a:hover{ background:var(--paper); color:var(--navy); }
  .has-sub:hover > .sub-toggle::after, .has-sub.is-open > .sub-toggle::after{ transform:translateY(1px) rotate(-135deg); }
}

/* Todos los ítems del menú alineados en la misma línea (Servicios llevaba 5px más abajo) */
@media (min-width:861px){ .main-nav > ul > li{ display:flex; align-items:center; min-height:44px; } }

/* Página activa dentro del submenú de Servicios: se ve en el submenú y en el ítem padre */
.main-nav .sub a[aria-current="page"]{ background:var(--paper); color:var(--navy); font-weight:600; }
.main-nav .has-sub.is-current > a{ color:var(--navy); font-weight:600; }