/* ==========================================================================
   Reset + estilos base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
/* El navegador no aplica [hidden]{display:none} a elementos SVG por defecto;
   sin esta regla, un <svg hidden> (p.ej. el ícono de la "X" del menú móvil)
   seguía pintándose encima de su alterno. */
[hidden]{ display:none !important; }
body{
  margin:0;
  font-family: var(--font-base);
  color: var(--c-text);
  background: var(--c-bg);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
input, textarea, select, button{ font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4,h5,h6{ margin:0 0 var(--space-2); font-weight:900; letter-spacing:-.01em; }
h1{ font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2{ font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight:700; }
h4{ font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight:600; }
h5{ font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight:600; }
h6{ font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight:500; }
p{ margin:0 0 var(--space-2); }
.p-01{ font-size: var(--fs-p-01); }
.p-02{ font-size: var(--fs-p-02); }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: var(--space-3);
}
@media (max-width:640px){
  .container{ padding-inline: var(--space-2); }
}

.section{ padding-block: var(--space-6); }
.section--sm{ padding-block: var(--space-5); }
@media (max-width:768px){
  .section{ padding-block: var(--space-5); }
}

.bg-dark{ background: var(--c-black); color: var(--c-white); }
.bg-yellow{ background: var(--c-yellow); color: var(--c-black); }
.bg-light{ background: var(--c-gray-100); }
.text-yellow{ color: var(--c-yellow); }
.text-muted{ color: var(--c-text-muted); }
.text-center{ text-align:center; }
.eyebrow{
  display:inline-block;
  color: var(--c-yellow-dark);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size: .85rem;
  margin-bottom: var(--space-1);
}
.bg-dark .eyebrow{ color: var(--c-yellow); }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--c-yellow); color:var(--c-black);
  padding:.75rem 1rem; z-index:1000; font-weight:700;
}
.skip-link:focus{ left: var(--space-2); top: var(--space-2); }

:focus-visible{ outline: 3px solid var(--c-yellow); outline-offset: 2px; }