/* ============================================================
   Agenda Pública Consultores · hoja de estilo compartida
   Paleta de marca + tipografía EB Garamond / Courier Prime
   ============================================================ */

:root{
  --negro:#1A1814;
  --marfil:#F0EDE8;
  --carbon:#4A4540;
  --arena:#C8B89A;
  --arena-luz:#D9C9A6;
  --noche:#2A3D52;
  --noche-hondo:#1B2A39;
  --noche-mas:#13202C;
  --blanco:#FAF7F0;
  --linea:rgba(74,69,64,.16);
  --maxw:980px;
  --readw:680px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--marfil);
  color:var(--negro);
  font-family:"EB Garamond",Georgia,serif;
  font-size:clamp(17px,1.02rem + .2vw,20px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--arena);color:var(--negro)}
img,svg{max-width:100%}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.read{max-width:var(--readw)}

.eyebrow{
  font-family:"Courier Prime",monospace;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  margin:0 0 1.1rem;color:var(--carbon);
}
h1,h2,h3{font-weight:600;line-height:1.1;letter-spacing:-.01em;margin:0}
h2{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem)}
h3{font-size:1.2rem}
p{margin:0 0 1.05rem}
p:last-child{margin-bottom:0}
a{color:inherit}

/* ---------- NAV (banda azul noche con el emblema sobrepuesto) ---------- */
.nav{
  position:sticky;top:0;z-index:30;
  pointer-events:none;   /* los hijos reactivan sus propios eventos */
}
/* la banda se disuelve en degradé largo hacia el fondo: sin corte */
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:calc(100% + 48px);
  background:linear-gradient(180deg,
    var(--noche-mas) 0%,
    var(--noche-hondo) 46%,
    rgba(27,42,57,.55) 72%,
    rgba(27,42,57,0) 100%);
  transition:opacity .4s ease;
}
.nav .wrap{
  position:relative;z-index:1;pointer-events:auto;
  display:flex;align-items:center;justify-content:space-between;
  padding-top:13px;padding-bottom:13px;
}
/* el emblema desborda la banda y pisa el fondo claro del hero */
.nav .mark{display:flex;align-items:flex-start;text-decoration:none;color:var(--marfil)}
.nav .mark .badge-nav{
  height:118px;width:auto;display:block;
  align-self:flex-start;
  margin-bottom:-80px;   /* la banda conserva su altura; el emblema cuelga */
  filter:drop-shadow(0 10px 24px rgba(19,32,44,.32));
  transition:transform .4s ease,filter .4s ease;
  transform-origin:left top;
}
.nav menu{display:flex;gap:26px;margin:0;padding:0;list-style:none;transition:opacity .4s ease}
.nav menu a{
  font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:#c9d2db;
  padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav menu a:hover{color:var(--marfil);border-color:var(--arena)}
.nav .back{font-family:"Courier Prime",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#c9d2db;text-decoration:none;transition:opacity .4s ease}
.nav .back:hover{color:var(--marfil)}
@media (max-width:620px){
  .nav menu{display:none}
  .nav .mark .badge-nav{height:92px;margin-bottom:-56px}
}
/* al bajar: la banda y los enlaces se disuelven, queda el emblema solo */
.nav--fade::before,
.nav--fade menu,
.nav--fade .back{opacity:0}
.nav--fade menu,
.nav--fade .back{pointer-events:none}
.nav--fade .mark .badge-nav{
  transform:scale(.72);
  filter:drop-shadow(0 8px 22px rgba(26,24,20,.32));
}

/* ---------- HERO (cielo nocturno) ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--marfil);
  background:linear-gradient(180deg,var(--noche-mas) 0%,var(--noche-hondo) 55%,var(--noche) 100%);
  padding:clamp(104px,14vh,140px) 0 0;
}
#stars{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .wrap{position:relative;z-index:2;text-align:center;padding-bottom:clamp(40px,7vh,72px)}
.hero .eyebrow{color:var(--arena);opacity:.92}
.hero h1{font-weight:600;margin:.2rem 0 1.1rem}
.hero .lede{margin:0 auto;color:#e7e1d6}

.hero--home h1{font-size:clamp(2.5rem,1.5rem + 4vw,4.3rem);max-width:16ch;margin-left:auto;margin-right:auto}
.hero--home .lede{max-width:46ch;font-size:clamp(1.08rem,1rem + .5vw,1.35rem)}

.hero--page h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.4rem)}
.hero--page .lede{max-width:34ch;font-size:clamp(1.05rem,1rem + .4vw,1.3rem)}

.scope{display:block;margin:0 auto 1.5rem}
.scope [stroke]{stroke:var(--arena-luz)}
.hero--home .scope{width:120px;height:120px}
.hero--page .scope{width:104px;height:104px}

/* logos reales */
.badge{
  display:block;margin:0 auto 1.6rem;height:auto;
  width:clamp(180px,24vw,236px);
  filter:drop-shadow(0 14px 36px rgba(0,0,0,.45));
}
.badge--sm{width:clamp(140px,18vw,168px);margin-bottom:1.3rem}

/* hero de inicio: composición a la izquierda + fondo con relieve */
.hero--home .wrap{text-align:left;max-width:780px;padding-bottom:clamp(60px,9vh,104px)}
.hero--home .badge{margin:0 0 1.4rem;width:clamp(190px,20vw,250px)}
.hero--home h1{margin:0 0 1.1rem;max-width:17ch}
.hero--home .lede{margin:0;max-width:50ch}
.constellation{
  position:absolute;z-index:1;top:14%;right:7%;
  width:min(36%,400px);height:auto;opacity:.55;pointer-events:none;
}
/* halo suave para integrar el logo con el cielo */
.hero--home .badge-wrap{position:relative;display:inline-block;margin:0 0 1.4rem}
.hero--home .badge-wrap::before{
  content:"";position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  width:215%;height:170%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,
     rgba(222,211,185,.24), rgba(222,211,185,.07) 46%, transparent 72%);
  filter:blur(22px);
}
.hero--home .badge{margin:0;filter:drop-shadow(0 22px 52px rgba(0,0,0,.5))}
@media (max-width:680px){
  .constellation{top:6%;right:4%;width:46%;opacity:.4}
}

/* ---------- HERO CLARO (red celeste sobre blanco) ---------- */
.hero--light{
  color:var(--negro);
  background:linear-gradient(180deg,var(--blanco) 0%,var(--blanco) 62%,var(--marfil) 100%);
}
.hero--light .eyebrow{color:var(--carbon);opacity:1}
.hero--light .eyebrow::after{
  content:"";display:inline-block;width:52px;height:1px;
  background:var(--arena);vertical-align:middle;margin-left:.9rem;
}
.hero--light h1{color:var(--negro)}
.hero--light .lede{color:var(--carbon)}
.hero--light .badge-wrap::before{content:none}
.hero--light .badge{filter:drop-shadow(0 10px 24px rgba(26,24,20,.14))}
.emblem{
  display:block;margin:0 auto 1.4rem;height:auto;width:86px;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.4));
}

.wordmark{
  font-family:"EB Garamond",serif;font-weight:600;
  letter-spacing:.06em;line-height:1;margin:0 0 .9rem;
  font-size:clamp(1.5rem,1rem + 2vw,2.1rem);
}
.wordmark small{
  display:block;font-family:"Courier Prime",monospace;font-weight:400;
  font-size:.6rem;letter-spacing:.45em;color:var(--arena);margin-top:.55rem;
}

/* olas de transición */
.waves{display:block;width:100%;height:auto;position:relative;z-index:2;margin-top:-2px}

/* ---------- SECCIONES ---------- */
section.block{padding:clamp(54px,9vh,90px) 0}
.block + .block{border-top:1px solid var(--linea)}
.lead{font-size:1.08em;color:#26221d;margin-top:1.4rem}

/* ---------- ÁREAS (catálogo) ---------- */
.areas{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(74,69,64,.16);
  border:1px solid rgba(74,69,64,.16);
  margin-top:2.6rem;
}
.area{
  background:var(--marfil);
  padding:1.75rem 1.85rem;
  transition:background-color .4s ease,color .4s ease;
}
.area .glyph{width:20px;height:20px;margin-bottom:.7rem;display:block;transform-origin:50% 50%}
.area h3{margin:0 0 .3rem;font-size:1.16rem;transition:color .4s ease}
.area p{margin:0;color:#2c2823;font-size:.98em;transition:color .4s ease}
.area:hover{background:var(--noche)}
.area:hover h3{color:var(--marfil)}
.area:hover p{color:#d6cfc2}
.area:hover .glyph{animation:areaSpin 11s linear infinite}
@keyframes areaSpin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .areas{grid-template-columns:1fr}
}

/* ---------- ENFOQUE (banda nocturna) ---------- */
.noche-band{
  background:linear-gradient(165deg,var(--noche) 0%,var(--noche-hondo) 100%);
  color:var(--marfil);position:relative;overflow:hidden;
}
.noche-band .eyebrow{color:var(--arena)}
.noche-band h2{color:var(--marfil)}
.noche-band p{color:#e7e1d6}
.noche-band .lead{color:#f0ebe1}
.noche-band .corner{position:absolute;right:-26px;top:-26px;width:190px;height:190px;opacity:.16}
.noche-band .wrap{position:relative;z-index:2}

.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:2.6rem}
.principles .p h3{color:var(--marfil);font-size:1.12rem;margin-bottom:.4rem;display:flex;align-items:center;gap:9px}
.principles .p h3 svg{width:15px;height:15px;flex:none}
.principles .p p{margin:0;color:#d7d0c4;font-size:.96em}
@media (max-width:680px){ .principles{grid-template-columns:1fr;gap:24px} }

/* ---------- MERIDIANO (convocatoria) ---------- */
.log{margin:2.4rem 0 0;padding:0;list-style:none;position:relative}
.log::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--arena),transparent)}
.log li{position:relative;padding:0 0 1.9rem 44px}
.log li:last-child{padding-bottom:0}
.log .node{position:absolute;left:0;top:2px;width:20px;height:20px}
.log h3{margin:0 0 .25rem;font-size:1.22rem}
.log .tag{font-family:"Courier Prime",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--carbon);display:block;margin:0 0 .35rem}
.log p{margin:0;color:#2c2823}
.noche-band .log h3{color:var(--marfil)}
.noche-band .log .tag{color:var(--arena)}
.noche-band .log p{color:#e7e1d6}
.noche-band .log::before{background:linear-gradient(180deg,transparent,var(--arena),transparent)}

/* ---------- CTA / BOTÓN ---------- */
.cta{text-align:center}
.cta h2{margin-bottom:1rem}
.cta p{max-width:44ch;margin-left:auto;margin-right:auto}
.btn{
  display:inline-block;margin-top:1.8rem;
  font-family:"Courier Prime",monospace;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marfil);background:var(--noche);
  padding:16px 30px;border:1px solid var(--noche);border-radius:2px;text-decoration:none;
  transition:background .2s,transform .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--arena);color:var(--negro);border-color:var(--arena);transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--arena);outline-offset:3px}

/* ---------- FOOTER ---------- */
footer.site{
  position:relative;overflow:hidden;
  background:var(--noche-mas);color:#cdd6df;
  font-family:"Courier Prime",monospace;font-size:.74rem;letter-spacing:.08em;
  padding:46px 0;line-height:2;
}
footer.site .foot-stars{position:absolute;inset:0;display:block}
footer.site .foot-row{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:26px;
}
footer.site .foot-logo{
  flex:none;display:block;
  width:96px;height:96px;border-radius:18px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));
}
footer.site .foot-sep{
  flex:none;width:1px;align-self:stretch;
  background:linear-gradient(180deg,transparent,rgba(200,184,154,.5),transparent);
}
footer.site .foot-text{margin-left:auto;text-align:right}
footer.site .brand{color:var(--arena);letter-spacing:.22em;text-transform:uppercase;display:block;margin-bottom:.35rem;font-size:.8rem}
footer.site a{color:#cdd6df;text-decoration:none;border-bottom:1px solid rgba(200,184,154,.4)}
footer.site a:hover{color:var(--arena)}
footer.site .fine{display:block;margin-top:.8rem;color:#8a97a4;letter-spacing:.06em}
@media (max-width:560px){
  footer.site .foot-row{flex-direction:column;gap:18px}
  footer.site .foot-sep{width:64px;height:1px;align-self:center;background:linear-gradient(90deg,transparent,rgba(200,184,154,.5),transparent)}
  footer.site .foot-text{margin-left:0;text-align:center}
  footer.site .foot-logo{width:76px;height:76px}
}

/* ---------- REVEAL ---------- */
.rise{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.rise.seen{opacity:1;transform:none}

@media (max-width:520px){ .wrap{padding:0 22px} .log li{padding-left:40px} }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .btn{transition:none}
  .area:hover .glyph{animation:none}
}