@import url("../fonts/fonts.css");
:root{
  --bg:#050a07; --bg2:#0a130d; --lima:#B5F23D; --verde:#1E951D; --verde-osc:#17801A; --rojo:#D42C2C;
  --papel:#F4F3EE; --tinta:#0b1410; --texto:#E9F0EA; --dim:rgba(233,240,234,.66);
  --sans:'Bricolage Grotesque',system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --gut:clamp(16px,4vw,48px); --max:1200px; --r:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--texto);font:400 clamp(16px,1.05vw + 12px,19px)/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - 2*var(--gut),var(--max));margin-inline:auto}
.sec .wrap{grid-template-columns:minmax(0,1fr)}
.sec{position:relative;padding:clamp(72px,10vw,140px) 0}
.sec.oscuro{background:radial-gradient(90% 60% at 50% 0%,#0e2414 0%,var(--bg) 62%)}
.sec.claro{background:var(--papel);color:var(--tinta)}
.kicker{font:500 .78rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lima)}
.claro .kicker{color:#3d7a0a}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1}
h2{font-size:clamp(2.1rem,5.4vw,4.2rem)}
.lima{color:var(--lima)}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.7em;border-radius:999px;font-weight:700;font-size:1rem;border:2px solid transparent;transition:transform .2s,box-shadow .2s,background .2s}
.btn--wa{background:var(--verde-osc);color:#fff;box-shadow:0 12px 34px rgba(30,149,29,.45)}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(30,149,29,.6)}
.btn--ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
/* aparición al bajar: solo si hay JavaScript (html.js) */
.js .rev{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms)}
.js .rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .rev{opacity:1;transform:none;transition:none}}

/* en celular, los botones que van solos o en grupo quedan centrados (Leo, 2026-10-13: «muchos botones no están centrados») */
@media (max-width:699px){
  p:has(> .btn:only-child),div:has(> .btn:only-child){text-align:center}
  .ag__btns,.sol__btns,.asist__btns,.otro__btns,.res__btns{justify-content:center}
  .herr__carta > .btn,.diag > .btn{display:flex;width:fit-content;max-width:100%;margin-inline:auto;justify-self:center}
}

/* enlace «Saltar al contenido»: solo se ve al navegar con teclado */
.salto{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lima);color:var(--tinta);font-weight:700;padding:12px 18px;border-radius:12px;transition:top .15s}
.salto:focus{top:12px;outline:3px solid #fff;outline-offset:2px}
/* los resplandores y sombras de cada sección pueden asomar a los costados en tabletas: se recortan en lugar de crear barra horizontal */
.sec{overflow-x:clip}