@font-face{
  font-family:"Frijole";
  src:url("assets/frijole.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#0B0B0B;
  --gold:#c9a84c;
  --cream:#F5E6C8;
  --ink:#141414;
  --line:#c9a84c55;
  --muted:#cbb991;
  --jade:#1B5E3A;
  --chrome:linear-gradient(135deg,#5a4210 0%,#c9a84c 14%,#FFF6DC 24%,#fff 28%,#c9a84c 36%,#7a5a1c 48%,#a8822e 58%,#FFF6DC 68%,#fff 71%,#c9a84c 78%,#7a5a1c 90%,#5a4210 100%);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--cream);
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
a:hover,a:focus-visible{color:var(--cream)}
.skip{
  position:absolute;left:-999px;top:0;
  background:var(--gold);color:var(--bg);padding:.5rem 1rem;z-index:20;
}
.skip:focus{left:12px;top:12px}

/* Header */
header{
  position:sticky;top:0;z-index:10;
  background:rgba(11,11,11,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.bar{
  max-width:1120px;margin:0 auto;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.2rem;
}
.brand{
  display:flex;align-items:center;gap:.7rem;
  color:inherit;text-decoration:none;min-width:0;
}
.brand img{width:52px;height:auto;flex:none}
.brand-name{
  font-family:"Frijole",cursive;
  font-weight:400;
  font-size:clamp(.72rem,1.8vw,.95rem);
  line-height:1.2;
  color:var(--gold);
  letter-spacing:.02em;
}
.brand-name small{
  display:block;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:.68rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.15rem;
}
nav{margin-left:auto;display:none;gap:1.25rem;align-items:center}
nav a{color:var(--cream);text-decoration:none;font-size:.92rem;font-weight:600;opacity:.88}
nav a:hover,nav a:focus-visible{color:var(--gold);opacity:1}

.lang{
  display:flex;
  border:1px solid var(--gold);
  border-radius:999px;
  overflow:hidden;
  flex:none;
  margin-left:.25rem;
}
.lang button{
  background:transparent;
  color:var(--gold);
  border:0;
  padding:6px 12px;
  font:600 .85rem ui-sans-serif,system-ui,sans-serif;
  cursor:pointer;
}
.lang button[aria-pressed="true"]{background:var(--gold);color:var(--bg)}
.lang button:focus-visible{outline:2px solid var(--cream);outline-offset:-3px}

/* Hero */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 70% 40%,#1a1408 0%,transparent 55%),
    radial-gradient(ellipse at 20% 10%,#15100a 0%,transparent 40%),
    var(--bg);
  pointer-events:none;
}
.hero-bg img{
  position:absolute;
  right:-8%;top:10%;
  width:min(820px,70vw);
  opacity:.28;
  filter:saturate(.85);
  pointer-events:none;
  user-select:none;
}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.2rem}
.hero-grid{
  position:relative;
  display:grid;
  gap:2rem;
  padding:3.2rem 0 3.6rem;
  align-items:center;
}
@media(min-width:860px){
  nav{display:flex}
  .hero-grid{grid-template-columns:1.05fr .95fr;padding:4.2rem 0 4.6rem;gap:3rem}
}
.kicker{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold);
  border-radius:999px;
  padding:.28rem .8rem;
  margin:0 0 1.1rem;
}
h1{
  font-family:"Frijole",cursive;
  font-weight:400;
  font-size:clamp(1.7rem,5.4vw,3.15rem);
  line-height:1.15;
  margin:0 0 .7rem;
  background:var(--chrome);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 0 8px #c9a84c44);
}
.descriptor{
  font-size:clamp(1.02rem,2vw,1.2rem);
  color:var(--gold);
  margin:0 0 1rem;
  font-weight:600;
}
.lead{margin:0 0 1.4rem;max-width:38rem;color:var(--cream);opacity:.92}
.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem}
.btn{
  display:inline-block;
  padding:.7rem 1.2rem;
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
  font-size:.98rem;
  border:1px solid transparent;
}
.btn.primary{background:var(--gold);color:var(--bg)}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--cream);color:var(--bg)}
.btn.ghost{
  background:transparent;
  color:var(--gold);
  border-color:var(--gold);
}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--cream);border-color:var(--cream)}
.fine{margin:0;font-size:.88rem;color:var(--muted);max-width:36rem}
.hero-mark{display:flex;justify-content:center;align-items:center}
.hero-mark img{
  width:min(520px,100%);
  filter:drop-shadow(0 0 28px #c9a84c33);
}

/* Notice */
.notice{
  background:#100e0b;
  border-bottom:1px solid var(--line);
}
.notice-inner{
  padding:1.35rem 0;
  border-left:3px solid var(--gold);
  padding-left:1rem;
  margin-left:0;
}
.notice h2{
  font-family:"Frijole",cursive;
  font-weight:400;
  font-size:1rem;
  color:var(--gold);
  margin:0 0 .45rem;
  letter-spacing:.02em;
}
.notice .banner-title{font-weight:700;color:var(--gold);margin:0 0 .4rem;font-size:1rem}
.notice p{margin:0;font-size:.92rem;color:var(--cream);opacity:.92;max-width:70rem}

/* Sections */
section{padding:3.4rem 0;border-bottom:1px solid #c9a84c22}
section h2{
  font-family:"Frijole",cursive;
  font-weight:400;
  font-size:clamp(1.35rem,3.4vw,2rem);
  color:var(--gold);
  line-height:1.25;
  margin:0 0 .8rem;
}
.intro{margin:0 0 1.6rem;max-width:42rem;color:var(--cream);opacity:.92}
.grid{display:grid;gap:1.1rem}
@media(min-width:760px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:1fr 1fr;align-items:start;gap:2rem}
}
.card{
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.35rem 1.25rem 1.4rem;
}
.card h3{
  margin:0 0 .45rem;
  color:var(--gold);
  font-size:1.08rem;
}
.card p{margin:0;font-size:.95rem;opacity:.9}
.step{
  display:inline-block;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.45rem;
}

/* Bilingual differentiator */
.bilingual{
  background:
    url("assets/fret-tile.svg") 0 0/14px 14px repeat,
    linear-gradient(#0d0c0a,#0d0c0a);
  background-blend-mode:soft-light,normal;
}
.bilingual .panel{
  background:rgba(11,11,11,.88);
  border:1px solid var(--line);
  border-radius:12px;
  padding:1.6rem 1.4rem 1.7rem;
}
.split-flag{
  display:flex;gap:1rem;align-items:flex-start;
}
.house-flag{
  width:120px;flex:none;
  border:1px solid var(--gold);
  border-radius:4px;
}

/* Name / boundaries */
.callout{
  border:1px solid var(--line);
  border-radius:10px;
  padding:1.2rem 1.2rem 1.25rem;
  background:#120f0c;
}
.callout p{margin:0 0 .7rem}
.callout p:last-child{margin:0}
.now-label{font-weight:700;color:var(--gold)}
.list{margin:0;padding-left:1.15rem}
.list li{margin:.35rem 0}

/* Next step */
.next{
  text-align:left;
}
.next .actions{margin-top:1.2rem;margin-bottom:0}

/* Footer */
footer{
  padding:2.2rem 1.2rem 2.6rem;
  text-align:center;
  font-size:.86rem;
  color:var(--muted);
}
.motto{
  font-family:"Frijole",cursive;
  color:var(--gold);
  letter-spacing:.08em;
  font-size:.78rem;
  margin:0 0 .6rem;
}
footer p{margin:.35rem auto;max-width:46rem}
footer nav{display:flex;justify-content:center;gap:1rem;margin:.8rem 0;flex-wrap:wrap}
.legal-note{font-size:.78rem;opacity:.85;max-width:50rem;margin:.8rem auto 0}

@media(max-width:859px){
  .bar{padding:.65rem 1rem}
  .brand-name{font-size:.78rem}
  .hero-bg img{width:120%;right:-20%;top:30%;opacity:.18}
  .hero-grid{padding:2.2rem 0 2.6rem}
}