/* ==========================================================================
   LA COLECCIÓN — chapitas del mundo
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --bg:#f6f3ed;
  --bg-2:#fffdf9;
  --bg-3:#efeae1;
  --ink:#1b1815;
  --ink-2:#57504a;
  --ink-3:#8a8179;
  --line:#e0d9cd;
  --line-2:#cfc6b6;
  --accent:#b5342a;
  --accent-ink:#8d271f;
  --gold:#b8892b;
  --shadow-sm:0 1px 2px rgba(27,24,21,.06), 0 2px 6px rgba(27,24,21,.05);
  --shadow-md:0 2px 6px rgba(27,24,21,.07), 0 12px 28px rgba(27,24,21,.10);
  --shadow-lg:0 8px 24px rgba(27,24,21,.14), 0 32px 64px rgba(27,24,21,.18);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --head:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --wrap:1240px;
  --hdr:64px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161412; --bg-2:#201d1a; --bg-3:#2a2622;
    --ink:#f2ede4; --ink-2:#bdb4a8; --ink-3:#8e857a;
    --line:#332e29; --line-2:#463f38;
    --accent:#e2685c; --accent-ink:#f08b80; --gold:#d7a94a;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 2px 8px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
    --shadow-lg:0 12px 40px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --bg:#f6f3ed; --bg-2:#fffdf9; --bg-3:#efeae1;
  --ink:#1b1815; --ink-2:#57504a; --ink-3:#8a8179;
  --line:#e0d9cd; --line-2:#cfc6b6;
  --accent:#b5342a; --accent-ink:#8d271f; --gold:#b8892b;
  --shadow-sm:0 1px 2px rgba(27,24,21,.06), 0 2px 6px rgba(27,24,21,.05);
  --shadow-md:0 2px 6px rgba(27,24,21,.07), 0 12px 28px rgba(27,24,21,.10);
  --shadow-lg:0 8px 24px rgba(27,24,21,.14), 0 32px 64px rgba(27,24,21,.18);
}
:root[data-theme="dark"]{
  --bg:#161412; --bg-2:#201d1a; --bg-3:#2a2622;
  --ink:#f2ede4; --ink-2:#bdb4a8; --ink-3:#8e857a;
  --line:#332e29; --line-2:#463f38;
  --accent:#e2685c; --accent-ink:#f08b80; --gold:#d7a94a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 2px 8px rgba(0,0,0,.45), 0 12px 28px rgba(0,0,0,.4);
  --shadow-lg:0 12px 40px rgba(0,0,0,.6);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--head); font-weight:600; line-height:1.15; margin:0; letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60; height:var(--hdr);
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
@supports (backdrop-filter:blur(1px)){
  .hdr{background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(12px)}
}
.hdr__in{display:flex; align-items:center; gap:16px; height:var(--hdr); max-width:var(--wrap); margin:0 auto; padding:0 20px}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.brand__cap{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.7), transparent 46%),
    repeating-conic-gradient(from 0deg, var(--accent) 0 7.5deg, var(--accent-ink) 7.5deg 15deg);
  box-shadow:inset 0 0 0 3px var(--accent-ink), var(--shadow-sm);
}
.brand__txt{font-family:var(--head); font-size:1.05rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.nav{display:flex; gap:2px; margin-left:auto; align-items:center}
.nav a{
  padding:8px 11px; border-radius:999px; font-size:.875rem; font-weight:500; color:var(--ink-2);
  transition:background .15s, color .15s; white-space:nowrap;
}
.nav a:hover{background:var(--bg-3); color:var(--ink)}
.nav a.on{background:var(--ink); color:var(--bg-2)}
.hdr__search{position:relative; flex:0 1 210px; margin-left:6px}
.hdr__search input{
  width:100%; padding:8px 12px 8px 34px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--bg-2); font-size:.875rem;
}
.hdr__search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:15px; height:15px; opacity:.5}
.icon-btn{width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:var(--ink-2); flex:0 0 auto}
.icon-btn:hover{background:var(--bg-3); color:var(--ink)}
.burger{display:none}

@media (max-width:1120px){ .hdr__search{flex-basis:150px} .nav a{padding:8px 8px; font-size:.84rem} }
@media (max-width:900px){
  .nav{
    position:fixed; inset:var(--hdr) 0 auto 0; flex-direction:column; gap:0; align-items:stretch;
    background:var(--bg-2); border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    padding:8px; display:none; max-height:calc(100vh - var(--hdr)); overflow:auto;
  }
  .nav.open{display:flex}
  .nav a{padding:13px 14px; border-radius:var(--r-sm); font-size:1rem}
  .burger{display:grid; margin-left:auto}
  /* en celular el buscador vive en el menú, no en la barra (no cabe) */
  .hdr__search{display:none}
  .brand__txt{font-size:.95rem}
}
@media (max-width:380px){ .brand__txt{display:none} }

/* ---------- hero ---------- */
.hero{padding:56px 0 34px; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:-45% -12% auto 38%; height:540px; z-index:0;
  background:radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 62%);
  pointer-events:none;
}
.hero__in{position:relative; z-index:1; max-width:760px}
.kicker{
  display:inline-flex; align-items:center; gap:8px; font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.kicker::before{content:""; width:26px; height:1px; background:currentColor}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.2rem); letter-spacing:-.03em}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero p{color:var(--ink-2); font-size:1.08rem; max-width:58ch; margin:18px 0 0}
.stats{display:flex; flex-wrap:wrap; gap:34px; margin:32px 0 0}
.stat b{display:block; font-family:var(--head); font-size:2.05rem; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.stat span{font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}

.bigsearch{margin:32px 0 0; position:relative; max-width:540px}
.bigsearch input{
  width:100%; padding:15px 18px 15px 50px; font-size:1.02rem;
  border:1px solid var(--line-2); border-radius:999px; background:var(--bg-2); box-shadow:var(--shadow-sm);
}
.bigsearch input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent)}
.bigsearch svg{position:absolute; left:18px; top:50%; transform:translateY(-50%); width:19px; height:19px; opacity:.45}

/* ---------- secciones ---------- */
section{padding:30px 0}
.shead{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.shead h2{font-size:1.5rem}
.shead .count{font-size:.78rem; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; padding-bottom:4px; font-variant-numeric:tabular-nums}
.shead .spacer{flex:1}

/* ---------- grilla de países ---------- */
.countries{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}
.cty{
  display:flex; align-items:center; gap:12px; padding:11px 13px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-sm);
  transition:transform .16s, box-shadow .16s, border-color .16s;
}
.cty:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.cty__flag{
  width:38px; height:26px; flex:0 0 auto; border-radius:3px; object-fit:cover;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  background:var(--bg-3);
}
.cty__flag--ph{display:grid; place-items:center; font-size:.62rem; font-weight:700; color:var(--ink-3)}
.cty > span{min-width:0}
.cty__n{display:block; font-weight:550; font-size:.94rem; line-height:1.25; letter-spacing:-.005em}
.cty__t{display:block; font-size:.78rem; color:var(--ink-3); font-variant-numeric:tabular-nums; line-height:1.3}
.cty--0{opacity:.7}
.cty--0 .cty__t{color:var(--accent)}

/* ---------- grilla de chapitas ---------- */
.caps{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(134px,1fr))}
.cap{
  display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 8px 14px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md);
  text-align:center; transition:transform .16s, box-shadow .16s, border-color .16s;
}
.cap:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-2)}
.cap__img{
  width:100%; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--bg-3);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.cap__img img{width:100%; height:100%; object-fit:cover}
.cap__marca{font-weight:600; font-size:.845rem; line-height:1.25; overflow-wrap:anywhere}
.cap__meta{font-size:.72rem; color:var(--ink-3); line-height:1.3; overflow-wrap:anywhere}
.cap__flag{width:17px; height:11px; border-radius:2px; object-fit:cover; display:inline-block; vertical-align:0; margin-right:5px}

/* ---------- toolbar / filtros ---------- */
.tools{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 0 18px;
  position:sticky; top:var(--hdr); z-index:40; background:var(--bg);
}
@supports (backdrop-filter:blur(1px)){
  .tools{background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(8px)}
}
.tools__f{position:relative; flex:1 1 210px; min-width:160px}
.tools__f input{
  width:100%; padding:9px 13px 9px 32px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--bg-2); font-size:.875rem;
}
.tools__f svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:14px; height:14px; opacity:.45}
select.sel{
  padding:9px 32px 9px 13px; border-radius:999px; border:1px solid var(--line-2);
  background-color:var(--bg-2);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center;
  font-size:.85rem; appearance:none; max-width:220px; text-overflow:ellipsis;
}
.chip{
  padding:7px 13px; border-radius:999px; border:1px solid var(--line-2);
  background:var(--bg-2); font-size:.8rem; font-weight:500; color:var(--ink-2);
}
.chip:hover{border-color:var(--ink-3); color:var(--ink)}
.chip.on{background:var(--ink); border-color:var(--ink); color:var(--bg-2)}
.res{font-size:.85rem; color:var(--ink-3); margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums}

/* ---------- ficha de país ---------- */
.phead{display:flex; align-items:center; gap:18px; padding:30px 0 4px; flex-wrap:wrap}
.phead__flag{width:76px; height:52px; border-radius:5px; object-fit:cover; box-shadow:var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent)}
.phead h1{font-size:clamp(1.9rem,5vw,2.9rem); letter-spacing:-.025em}
.phead__sub{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3)}
.back{display:inline-flex; align-items:center; gap:6px; font-size:.83rem; color:var(--ink-3); margin:24px 0 0}
.back:hover{color:var(--accent)}
.grp{margin:26px 0 10px; display:flex; align-items:center; gap:12px}
.grp h3{font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-2); font-family:var(--body); font-weight:650}
.grp::after{content:""; flex:1; border-top:1px solid var(--line)}

/* ---------- modal ---------- */
.mask{
  position:fixed; inset:0; z-index:100; display:none; padding:20px;
  background:rgba(16,14,12,.72);
  align-items:center; justify-content:center;
}
.mask.open{display:flex; animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg-2); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  width:min(880px,100%); max-height:min(92vh,780px); overflow:auto; position:relative;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
}
.modal__img{background:var(--bg-3); display:grid; place-items:center; padding:34px; min-height:280px}
.modal__img img{width:100%; max-width:330px; aspect-ratio:1; object-fit:cover; border-radius:50%; box-shadow:var(--shadow-md)}
.modal__body{padding:30px 32px 32px}
.modal__body h3{font-size:1.7rem; letter-spacing:-.02em; margin-bottom:4px}
.modal__cty{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--ink-2); margin-bottom:14px}
.modal__cty img{width:22px; height:15px; border-radius:2px; object-fit:cover}
dl.fields{display:grid; grid-template-columns:auto 1fr; gap:9px 16px; margin:0; font-size:.9rem}
dl.fields dt{color:var(--ink-3); font-size:.7rem; text-transform:uppercase; letter-spacing:.09em; padding-top:4px; white-space:nowrap}
dl.fields dd{margin:0; overflow-wrap:anywhere}
.modal__close{position:absolute; top:12px; right:12px; z-index:2; background:var(--bg-2); box-shadow:var(--shadow-sm)}
.modal__nav{display:flex; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); flex-wrap:wrap}
.btn{
  padding:9px 15px; border-radius:999px; border:1px solid var(--line-2); font-size:.85rem;
  font-weight:500; background:var(--bg-2); transition:background .15s, border-color .15s;
  display:inline-block;
}
.btn:hover{background:var(--bg-3)}
.btn--p{background:var(--ink); border-color:var(--ink); color:var(--bg-2)}
.btn--p:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn[disabled]{opacity:.4; cursor:default}
@media (max-width:720px){
  .modal{grid-template-columns:1fr}
  .modal__img{padding:24px; min-height:0}
  .modal__img img{max-width:190px}
  .modal__body{padding:22px 22px 26px}
}

/* ---------- texto / páginas simples ---------- */
.prose{max-width:66ch; padding:32px 0 10px}
.prose h1{font-size:clamp(1.9rem,5vw,2.7rem); margin-bottom:16px; letter-spacing:-.025em}
.prose h2{font-size:1.22rem; margin:30px 0 10px}
.prose p{color:var(--ink-2); margin:0 0 14px}
.prose .lead{font-size:1.1rem; color:var(--ink)}
.prose hr{border:0; border-top:1px solid var(--line); margin:26px 0}
.prose a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.field{display:block; margin:0 0 14px}
.field span{display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--ink-3); margin-bottom:6px}
.field input,.field textarea{
  width:100%; padding:11px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg-2); font-size:.95rem;
}
.field textarea{min-height:130px; resize:vertical}
.note{font-size:.83rem; color:var(--ink-3)}

/* ---------- utilidades ---------- */
.empty{padding:60px 0; text-align:center; color:var(--ink-3)}
.more{display:block; margin:28px auto 0; padding:12px 26px; border-radius:999px; border:1px solid var(--line-2); background:var(--bg-2); font-weight:550}
.more:hover{background:var(--bg-3)}
.footer{border-top:1px solid var(--line); margin-top:46px; padding:28px 0 44px; color:var(--ink-3); font-size:.85rem}
.footer__in{display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.footer a{color:var(--ink-2)} .footer a:hover{color:var(--accent)}
.tag{display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid currentColor; padding:2px 8px; border-radius:999px}
.loading{padding:80px 0; text-align:center; color:var(--ink-3)}

/* ---------- mosaico de chapitas del hero ---------- */
.hero__txt{max-width:660px}
.cluster{display:none}
@media (min-width:1020px){
  .hero{padding:44px 0 34px}
  .hero__in{max-width:none; display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:48px; align-items:center}
  .cluster{
    display:grid; grid-template-columns:repeat(5,1fr); gap:11px;
    transform:rotate(-7deg) scale(.94); transform-origin:center;
    -webkit-mask-image:radial-gradient(circle farthest-side at 50% 50%, #000 62%, transparent 100%);
    mask-image:radial-gradient(circle farthest-side at 50% 50%, #000 62%, transparent 100%);
  }
  .cluster img{
    width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover;
    box-shadow:0 2px 8px rgba(27,24,21,.16);
  }
  .cluster img:nth-child(2n){transform:translateY(20px)}
  .stats{margin-top:8px}
}
@media (min-width:1240px){ .hero__in{grid-template-columns:minmax(0,1fr) 420px} }

/* ---------- historia investigada de una chapita ---------- */
.cap__hist{color:var(--gold); font-size:.8rem; letter-spacing:.1em}
.ficha__hist{
  margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.ficha__hist h4{
  font-family:var(--body); font-size:.7rem; font-weight:650; text-transform:uppercase;
  letter-spacing:.11em; color:var(--gold); margin:0 0 8px;
}
.ficha__hist p{margin:0; font-size:.89rem; line-height:1.6; color:var(--ink-2)}
.ficha__fuentes{margin-top:10px !important; font-size:.76rem !important; color:var(--ink-3) !important}
.ficha__fuentes a{color:var(--ink-2); text-decoration:underline; text-underline-offset:2px}
.ficha__fuentes a:hover{color:var(--accent)}