:root{
      --brand:#37A9E1;
      --brand-dark:#1A94B8;
      --ink:#1F2A2E;
      --muted:#6B7A80;
      --soft:#E6F8FC;
      --stroke:#DDE6E8;
      --radius:16px;
    }
    *{box-sizing:border-box}
    html,body{margin:0}
    body{font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);line-height:1.5}

    .container{width:min(1200px,92%);margin:0 auto}
    a{color:inherit}

    /* -------- Header (tu estructura) -------- */
    .site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eef2f2}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
    .menu{display:flex;gap:24px}
    .menu a{color:#223035;text-decoration:none;font-weight:700}
    .lang-phone{display:flex;align-items:center;gap:10px;}
    .langs{padding:20px;}
    .langs button{background:#fff;border:1px solid #e6ecec;border-radius:8px;}
    .phone{color:var(--brand);font-weight:800;text-decoration:none}
    .btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight:800;text-decoration:none;cursor:pointer}
    .btn.primary{background:var(--brand-dark);color:#fff}
    .btn.primary:hover{background:var(--brand)}
    .btn.sm{padding:.6rem .9rem}
    .btn.block{display:block;width:100%;text-align:center}
    .btn.pill{border-radius:28px}
    .burger{width:42px;height:42px;border:1px solid #e6ecec;border-radius:12px;background:#fff;display:none;align-items:center;justify-content:center}
    .burger span,.burger span::before,.burger span::after{content:"";display:block;width:18px;height:2px;background:#1b2a2e;position:relative;transition:.2s}
    .burger span::before{position:absolute;top:-6px}
    .burger span::after{position:absolute;top:6px}
    .burger.open span{background:transparent}
    .burger.open span::before{top:0;transform:rotate(45deg)}
    .burger.open span::after{top:0;transform:rotate(-45deg)}

    /* Drawer móvil tipo “inmobity” */
    .drawer{position:fixed;inset:0;z-index:999;pointer-events:none;display:block}
    .drawer-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.35);opacity:0;transition:opacity .25s}
    .drawer-panel{position:absolute;top:0;right:0;bottom:0;width:92vw;max-width:520px;background:#fff;border-left:1px solid #E7ECEE;box-shadow:-30px 0 60px rgba(17,24,39,.15);transform:translateX(100%);transition:transform .25s;border-top-left-radius:16px;border-bottom-left-radius:16px;padding:20px 18px 24px}
    .drawer.open{pointer-events:auto}
    .drawer.open .drawer-backdrop{opacity:1}
    .drawer.open .drawer-panel{transform:translateX(0)}
    .drawer-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:14px;border:1px solid #E6ECEC;background:#fff;display:grid;place-items:center;font-size:22px}
    .nav-links{list-style:none;margin:64px 0 16px;padding:0;display:flex;flex-direction:column;gap:14px}
    .nav-links a{display:block;padding:12px 0;font-weight:800;color:#2B3335;text-decoration:none;border-bottom:1px solid #EEF2F3}
    .nav-links a:last-child{border-bottom:none}
    .menu-extras{display:grid;gap:16px}
    .menu-extras .langs{display:flex;gap:10px}
    .menu-extras .langs button{background:#fff;border:1px solid #E6ECEC;border-radius:14px;padding:.5rem .8rem;box-shadow:0 2px 6px rgba(16,24,40,.05)}
    .menu-extras .phones a{color:var(--brand);text-decoration:none;font-weight:800}
    @media (max-width:767px){
      .menu{display:none !important;}
      .lang-phone>.langs,.lang-phone>.phone,.lang-phone>.btn{display:none !important;}
      .burger{display:flex}
      html.no-scroll, body.no-scroll{overflow:hidden}
    }

    /* -------- Hero -------- */
    .page-hero{padding:28px 0 8px}
    .page-hero .container{display:grid;gap:16px}
    .hero-copy h1{font-size:clamp(28px,5vw,48px);line-height:1.05;margin:0 0 10px;font-weight:900}
    .brand{color:var(--brand)}
    .lead{color:var(--muted);max-width:65ch}
    .cta-card{background:#0F3E37;color:#fff;border-radius:16px;padding:18px}
    .cta-card h3{margin:0 0 6px;font-size:1.2rem}
    .cta-card p{margin:0 0 12px;opacity:.9}
    @media (min-width:1024px){
      .page-hero .container{grid-template-columns:2fr 1fr;align-items:start}
      .cta-card{position:sticky;top:16px}
    }

    /* -------- Banda de categorías (chips) -------- */
    .faqs.section{padding:24px 0 40px;background:var(--soft)}
    .tabs{display:flex;flex-wrap:wrap;gap:10px;padding:12px;margin:0 0 18px;background:var(--soft);border-radius:14px;border:1px solid var(--stroke)}
    .tab{appearance:none;background:#fff;color:#1f2a2e;border:1px solid var(--stroke);padding:.55rem 1rem;border-radius:999px;font-weight:800;cursor:pointer;box-shadow:0 2px 6px rgba(16,24,40,.05);transition:background .15s,border-color .15s,color .15s,transform .05s}
    .tab:hover{border-color:#B9EAF7}
    .tab:active{transform:translateY(1px)}
    .tab.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 10px rgba(34,184,230,.25)}

    /* -------- Layout de FAQs -------- */
    .layout{display:grid;grid-template-columns:1fr;gap:24px}
    .left .block{background:#fff;border-radius:14px;padding:16px;border:1px solid var(--stroke);box-shadow:0 4px 14px rgba(16,24,40,.04)}
    .left .block h3{margin:.2rem 0 .3rem;font-size:1.05rem}
    .right .cat-title{font-size:clamp(18px,2.2vw,22px);font-weight:900;margin:0 0 10px;letter-spacing:.1px}

    /* Grupos con separación (como mockup) */
    .faq-group{margin-top:28px}
    .faq-group:first-of-type{margin-top:0}
    .faq-group + .faq-group{border-top:1px solid #E7EEF1;padding-top:22px}

    /* Acordeones */
    .faq{background:#fff;border:1px solid var(--stroke);border-radius:14px;margin-bottom:12px;overflow:hidden}
    .faq summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:800;position:relative}
    .faq summary::-webkit-details-marker{display:none}
    .faq[open] summary{border-bottom:1px solid var(--stroke)}
    .faq-body{padding:12px 16px;color:var(--muted)}
    .faq-body ul{margin:.4rem 0 .2rem 1.2rem}

    /* Mostrar/ocultar categorías (si las separas en el futuro) */
    .faq-cat{display:block} /* ahora mostramos “Todos”; puedes usar .show si creas más contenedores */
 

    /* Footer pequeño */
    footer{padding:24px 0}
    .small{font-size:.9rem}
    .muted{color:var(--muted)}

    /* Compensa el header sticky para anclas internas (por si usas <a href="#id">) */
.faq-group{ scroll-margin-top: 80px; }

/* Efecto de “resalte” breve cuando navegas a una categoría */
@keyframes flashBg {
  0%   { box-shadow: 0 0 0 0 rgba(34,184,230,0.0), inset 0 0 0 0 rgba(34,184,230,0.0); }
  35%  { box-shadow: 0 0 0 6px rgba(34,184,230,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(34,184,230,0.0); }
}
.faq-group.flash{
  animation: flashBg 1200ms ease-out 1;
  border-radius: 12px;
}

.site-footer {
  background: #0077B6; /* azul fuerte */
  color: #fff;
  padding: 40px 20px 20px;
  font-size: 15px;
  line-height: 1.6;
}

.site-footer a {
  color: #BBE9FF; /* azul claro para enlaces */
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

.footer-col h4 {
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: 15px;
  text-align: center;
  font-size: 14px;
  color: #eee;
}

.langs {
  display: flex;
  gap: 8px;                /* espacio entre banderas */
  align-items: center;     /* centra verticalmente */
}

.langs a {
  background:#fff;
  border:1px solid #e6ecec;
  border-radius:8px;
  padding:.35rem .5rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  text-decoration:none;
  font-size:18px;
}

.langs a img {
  width:20px;
  height:14px;
  border-radius:2px;
}