/* ============================================================
   A&H Wealth Group — COMPONENTS (base + UI reutilizable)
   Requiere tokens.css cargado antes. Mobile-first.
   ============================================================ */

/* ---------- Reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
/* <picture> transparente al layout: el <img> hereda el tamaño de su contenedor (necesario para fondos full-bleed) */
picture{display:contents}
h1,h2,h3,h4{font-family:var(--font-head); line-height:1.15; margin:0 0 .4em; color:var(--forest)}
h1{font-size:clamp(2rem,5vw,3.25rem); font-weight:800}
h2{font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:700}
h3{font-size:clamp(1.15rem,2.4vw,1.4rem); font-weight:700}
p{margin:0 0 1rem}
a{color:var(--gold-deep)}
.wrap{max-width:1080px; margin-inline:auto; padding:0 clamp(1rem,4vw,2.5rem)}

/* Accesibilidad: foco visible (WCAG 2.1) */
:focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:4px}
.skip-link{position:absolute; left:-999px; top:0; background:var(--gold); color:var(--forest-700); padding:.6rem 1rem; z-index:100; font-weight:600}
.skip-link:focus{left:0}

/* ---------- Kicker ---------- */
.kicker{
  font-family:var(--font-body); font-weight:600;
  text-transform:uppercase; letter-spacing:.18em;
  font-size:.78rem; color:var(--gold-deep); margin:0 0 .5rem;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--font-body); font-weight:600; font-size:1rem; line-height:1.2;
  padding:.85rem 1.5rem; border-radius:var(--radius-sm);
  border:2px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.15em; height:1.15em; flex:none}
.btn-primary{background:var(--wa-green); color:#fff}          /* WhatsApp EXCLUSIVO */
.btn-primary:hover{background:var(--wa-green-d)}
.btn-secondary{background:transparent; color:var(--forest); border-color:var(--forest)}
.btn-secondary:hover{background:var(--forest); color:var(--cream)}
/* Acción interna (navegación a landings): neutro de marca, NO verde WhatsApp */
.btn-forest{background:var(--forest); color:var(--cream)}
.btn-forest:hover{background:var(--forest-700)}
.btn-block{display:flex; width:100%}

/* ---------- Tarjetas ---------- */
.card{
  background:var(--bg); border:1px solid #e9e6db; border-radius:var(--radius);
  padding:1.6rem; box-shadow:var(--shadow);
}
.card h3{margin-top:.25rem}
.card.featured{border:2px solid var(--gold); position:relative; overflow:visible}
.badge{
  position:absolute; top:-14px; left:1.6rem;
  background:var(--gold); color:var(--forest-700);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.35rem .75rem; border-radius:999px; box-shadow:var(--shadow);
}

/* ---------- Círculo de icono (replica Instagram) ---------- */
.icon-circle{
  width:84px; height:84px; border-radius:50%;
  background:var(--forest); border:2px solid var(--gold);
  display:grid; place-items:center; flex:none;
}
.icon-circle img,.icon-circle svg{width:60%; height:60%}

/* ---------- Acordeón FAQ ---------- */
.faq{max-width:760px; margin-inline:auto}
.faq-item{border:1px solid #e9e6db; border-radius:var(--radius-sm); margin-bottom:.75rem; background:var(--bg); overflow:hidden}
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.25rem; font-family:var(--font-body); font-weight:600;
  font-size:1.02rem; color:var(--forest); text-align:left;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q .chev{transition:transform .25s ease; color:var(--gold-deep); flex:none}
.faq-item[open] .faq-q .chev{transform:rotate(180deg)}
.faq-a{padding:0 1.25rem; max-height:0; overflow:hidden; transition:max-height .28s ease, padding .28s ease; color:var(--muted)}
.faq-item[open] .faq-a{padding:0 1.25rem 1.2rem; max-height:400px}

/* ---------- Header sticky ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--forest); color:var(--cream);
  border-bottom:2px solid var(--gold); box-shadow:var(--shadow);
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.brand{font-family:var(--font-head); font-weight:700; color:var(--cream); font-size:1.15rem; text-decoration:none; letter-spacing:.3px}
.brand b{color:var(--gold)}
.nav{display:flex; gap:1.5rem; align-items:center}
.nav a{color:var(--cream); text-decoration:none; font-size:.95rem; font-weight:500}
.nav a:hover{color:var(--gold)}
.nav-toggle{display:none; background:none; border:0; color:var(--cream); cursor:pointer; padding:.4rem}
.nav-toggle svg{width:28px; height:28px}
@media(max-width:720px){
  .nav-toggle{display:block}
  .nav{
    position:absolute; top:68px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--forest-700); padding:.5rem 0;
    max-height:0; overflow:hidden; transition:max-height .28s ease;
  }
  .nav a{padding:.9rem clamp(1rem,4vw,2.5rem); width:100%; border-top:1px solid rgba(244,236,216,.12)}
  .site-header.open .nav{max-height:340px}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--forest); color:var(--cream); padding:2.5rem 0 1.5rem}
.site-footer a{color:var(--cream); text-decoration:none}
.site-footer a:hover{color:var(--gold)}
.foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.5rem; margin-bottom:1.75rem}
.foot-grid h4{color:var(--gold); font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em}
.foot-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem; font-size:.95rem}
.foot-legal{border-top:1px solid rgba(244,236,216,.18); padding-top:1.25rem; font-size:.82rem; color:#a9c0b4}

/* ---------- Botón flotante WhatsApp ---------- */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:.55rem;
  background:var(--wa-green); color:#fff; text-decoration:none; font-weight:600;
  padding:.8rem 1.1rem; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  transition:background .2s ease;
}
.wa-float:hover{background:var(--wa-green-d)}
.wa-float svg{width:1.4em; height:1.4em}
@media(max-width:520px){.wa-float span{display:none} .wa-float{padding:.9rem; border-radius:50%}}

/* ---------- Animación de entrada (IntersectionObserver) ---------- */
/* Solo se oculta si JS está activo (clase .js en <html>); sin JS, todo visible. */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .25s ease, transform .25s ease}
.js .reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none; transition:none}
  .btn,.faq-a,.faq-q .chev,.nav{transition:none}
}