:root{
  --granite:#23262B;
  --granite-2:#2d3138;
  --paper:#F7F5F0;
  --paper-2:#EFEBE2;
  --ink:#23262B;
  --ink-dim:#6b6a63;
  --rubric:#a8412a;
  --rubric-dark:#8a3521;
  --brass:#9c7a3f;
  --line:rgba(35,38,43,0.12);
  --line-dark:rgba(247,245,240,0.14);
  --sans:'Public Sans',sans-serif;
  --headline:'Oswald','Public Sans',sans-serif;
  --mono:'Space Mono',monospace;
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion:reduce){ *{transition-duration:0.001ms !important;} }

body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:1rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:var(--headline); font-weight:700; letter-spacing:0.01em; margin:0; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem); }
:focus-visible{ outline:2px solid var(--rubric); outline-offset:3px; }

/* ===== NAV ===== */
.nav{
  position:sticky; top:0; z-index:50; background:var(--granite); color:var(--paper);
  border-bottom:1px solid var(--line-dark);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding:0.9rem clamp(1.25rem,4vw,2.5rem); }
.brand{ display:flex; align-items:center; gap:0.6rem; text-decoration:none; color:var(--paper); }
.brand__crest{ width:2rem; height:2rem; flex:none; }
.brand__name{ font-family:var(--headline); font-weight:700; font-size:1.05rem; letter-spacing:0.02em; }
.nav__links{ display:flex; gap:1.75rem; list-style:none; margin:0; padding:0; }
.nav__links a{ font-size:0.92rem; text-decoration:none; color:rgba(247,245,240,0.78); transition:color .15s; }
.nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--paper); }
.nav__cta{
  font-size:0.86rem; font-weight:600; text-decoration:none; color:#fff;
  background:var(--rubric); padding:0.55rem 1.1rem; border-radius:4px; transition:background .15s;
}
.nav__cta:hover{ background:var(--rubric-dark); }

.nav__toggle-input{ position:absolute; opacity:0; pointer-events:none; }
.nav__toggle{ display:none; flex-direction:column; justify-content:center; gap:4px; width:2rem; height:2rem; cursor:pointer; }
.nav__toggle span{ display:block; width:100%; height:2px; background:var(--paper); border-radius:1px; }

@media (max-width:760px){
  .nav .wrap{ flex-wrap:wrap; }
  .nav__links{
    display:none; order:4; width:100%;
    flex-direction:column; gap:1rem;
    padding-top:1rem; margin-top:0.9rem; border-top:1px solid var(--line-dark);
  }
  .nav__toggle{ display:flex; order:3; }
  .nav__cta{ order:2; }
  .nav__toggle-input:checked ~ .nav__links{ display:flex; }
  .nav__toggle-input:checked ~ .nav__toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav__toggle-input:checked ~ .nav__toggle span:nth-child(2){ opacity:0; }
  .nav__toggle-input:checked ~ .nav__toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

/* ===== HERO (home) ===== */
.hero{ background:linear-gradient(160deg, var(--granite) 0%, var(--granite-2) 100%); color:var(--paper); padding:clamp(3.5rem,9vw,6rem) 0 clamp(3rem,7vw,5rem); }
.hero .wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; }
.hero__crest{ width:64px; height:64px; }
.hero h1{ font-size:clamp(2rem,5.5vw,3.4rem); line-height:1.1; letter-spacing:0.01em; max-width:18ch; }
.hero h1 span{ color:var(--rubric); }
.hero__tag{ font-size:clamp(1.05rem,2vw,1.2rem); color:rgba(247,245,240,0.75); max-width:48ch; }
.hero__ctas{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:0.5rem; }
.btn{ display:inline-block; font-weight:600; font-size:0.92rem; padding:0.75rem 1.4rem; border-radius:4px; text-decoration:none; transition:background .15s, border-color .15s, color .15s; }
.btn--solid{ background:var(--rubric); color:#fff; }
.btn--solid:hover{ background:var(--rubric-dark); }
.btn--ghost{ border:1.5px solid rgba(247,245,240,0.35); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--paper); }

/* ===== PAGE BANNER (sub-pages) ===== */
.pagehead{ background:linear-gradient(160deg, var(--granite) 0%, var(--granite-2) 100%); color:var(--paper); padding:clamp(2.5rem,6vw,3.5rem) 0; }
.pagehead .eyebrow{ color:var(--rubric); }
.pagehead h1{ font-size:clamp(1.7rem,4vw,2.4rem); margin-top:0.4rem; }
.pagehead p{ color:rgba(247,245,240,0.72); margin:0.7rem 0 0; max-width:52ch; }

/* ===== STAT BAR ===== */
.stats{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.stats .wrap{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1.5rem; padding:1.5rem clamp(1.25rem,4vw,2.5rem); }
.stat dt{ font-family:var(--sans); font-weight:700; font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 0.3rem; }
.stat dd{ margin:0; font-family:var(--mono); font-weight:700; font-size:0.94rem; }

/* ===== SECTIONS ===== */
section{ padding:clamp(3.5rem,8vw,5.5rem) 0; }
.section--alt{ background:var(--paper-2); }
.section__head{ margin-bottom:2rem; max-width:60ch; }
.eyebrow{ font-family:var(--sans); font-weight:700; font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--rubric); display:block; margin-bottom:0.6rem; }
.section__head h2{ font-size:clamp(1.5rem,3vw,2rem); font-weight:700; }
.section__head p{ margin:0.8rem 0 0; color:var(--ink-dim); max-width:58ch; }

/* ===== HOME TEASERS (mix of the 3 sub-pages) ===== */
.teasers{ display:grid; grid-template-columns:1fr; gap:1.75rem; }
@media (min-width:760px){ .teasers{ grid-template-columns:repeat(3,1fr); } }
.teaser{ border-top:3px solid var(--rubric); padding-top:1.25rem; }
.teaser h3{ font-size:1.15rem; }
.teaser p{ color:var(--ink-dim); margin:0.6rem 0 0; }
.teaser__link{ display:inline-block; margin-top:1rem; font-weight:600; font-size:0.92rem; color:var(--rubric); text-decoration:none; }
.teaser__link:hover{ text-decoration:underline; }

/* nombre: two-col */
.nombre{ display:grid; grid-template-columns:1fr; gap:2.5rem; align-items:start; }
@media (min-width:800px){ .nombre{ grid-template-columns:1.3fr 0.7fr; } }
.nombre p{ margin:0 0 1rem; max-width:60ch; }
.nombre__crest{ background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:2rem; display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; }
.nombre__crest svg{ width:70px; }
.nombre__crest .stone{ fill:var(--paper-2); stroke:var(--ink-dim); stroke-width:1; }
.nombre__crest text{ font-family:'Cinzel',serif; fill:var(--ink); }
.nombre__crest text.num{ fill:var(--rubric); }
.nombre__crest span{ font-family:var(--sans); font-weight:600; font-size:0.78rem; letter-spacing:0.02em; color:var(--ink-dim); }

/* junta roster */
.roster{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); max-width:760px; }
.roster li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0.3rem 1rem; padding:0.9rem 0; border-bottom:1px solid var(--line); }
.roster .name{ font-weight:600; min-width:15ch; }
.roster .role{ font-family:var(--sans); font-weight:700; font-size:0.78rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--rubric); }
.roster .note{ font-size:0.88rem; color:var(--ink-dim); margin-left:auto; }

/* patrocina */
.sponsor-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin-top:2rem; max-width:760px; }
.sponsor-slot{
  aspect-ratio:16/9; border:1px solid var(--line); border-radius:6px; background:var(--paper);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--sans); font-weight:600; font-size:0.72rem; letter-spacing:0.02em; text-transform:uppercase; color:var(--ink-dim);
}

/* unete */
.unete{ background:var(--granite); color:var(--paper); }
.unete .wrap{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }
.unete h2{ font-size:clamp(1.4rem,2.8vw,1.9rem); max-width:22ch; }
.unete p{ color:rgba(247,245,240,0.7); margin:0.6rem 0 0; max-width:42ch; }

footer{ background:var(--granite); color:rgba(247,245,240,0.6); border-top:1px solid var(--line-dark); }
footer .wrap{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:0.8rem; padding:1.75rem clamp(1.25rem,4vw,2.5rem); font-size:0.82rem; }
footer .legend{ font-family:'Cinzel',serif; letter-spacing:0.1em; color:var(--brass); }

@media (max-width:600px){
  .roster .note{ margin-left:0; }
}