/* Enjambre Folclórico — hoja de estilo única
   Paleta de archivo: papel envejecido, tinta sepia, ocre y añil. */

:root{
  --ground:#E6E0D2; --paper:#F1ECE0; --paper-2:#DBD4C2;
  --ink:#1F1A15; --ink-soft:#57503F; --ink-faint:#8A8170;
  --rule:#C7BEAA; --rule-soft:#D7D0BE;
  --indigo:#2B4152; --ochre:#95651A;
  --deep:#15120E; --deep-2:#1E1A14; --deep-ink:#EDE7D9;
  --deep-soft:#A69D89; --deep-rule:#3A3228; --deep-ochre:#D9A63F;

  --display:"Young Serif","Hoefler Text",Georgia,serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  color-scheme:light dark;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#15120E; --paper:#1E1A15; --paper-2:#262019;
    --ink:#EDE7D9; --ink-soft:#A69D89; --ink-faint:#7B7361;
    --rule:#362F26; --rule-soft:#2A241D;
    --indigo:#8FB0C4; --ochre:#D9A63F;
  }
}
:root[data-theme="dark"]{
  --ground:#15120E; --paper:#1E1A15; --paper-2:#262019;
  --ink:#EDE7D9; --ink-soft:#A69D89; --ink-faint:#7B7361;
  --rule:#362F26; --rule-soft:#2A241D;
  --indigo:#8FB0C4; --ochre:#D9A63F;
}

*{box-sizing:border-box}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.62;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; margin:0;
}
::selection{background:var(--ochre); color:var(--deep)}
a{color:inherit}
h1,h2,h3{font-family:var(--display); font-weight:400; line-height:1.03; text-wrap:balance; margin:0}
p{margin:0}
img{display:block; max-width:100%}
[hidden]{display:none!important}

.wrap{max-width:1160px; margin-inline:auto; padding-inline:clamp(16px,4.5vw,56px)}
.lbl{font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--ink); color:var(--ground); padding:10px 14px}

/* ── cabecera ─────────────────────────────── */
.mast{position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:color-mix(in oklab, var(--ground) 92%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule)}
.mast-in{display:flex; align-items:center; gap:clamp(12px,3vw,32px); padding-block:13px; min-height:56px}
.brand{font-family:var(--display); font-size:1.0625rem; letter-spacing:-.01em; text-decoration:none; white-space:nowrap}
.brand span{color:var(--ochre)}
.nav{display:flex; gap:clamp(10px,2vw,24px); margin-left:auto; flex-wrap:wrap}
.nav a{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft); padding-block:4px; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink); border-bottom-color:var(--ochre)}
@media (max-width:900px){ .nav{display:none} }
.mast-act{display:flex; align-items:center; gap:10px; margin-left:auto}
@media (min-width:901px){ .mast-act{margin-left:clamp(12px,3vw,32px)} }

.langsw{display:inline-flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden}
.langsw button{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; color:var(--ink-faint); border:0; padding:6px 9px; cursor:pointer}
.langsw button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
.langsw button:focus-visible{outline:2px solid var(--ochre); outline-offset:-2px}

.btn{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  text-transform:uppercase; text-decoration:none; padding:11px 18px; border-radius:2px;
  border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .16s ease}
.btn-solid{background:var(--ochre); color:#1A1509; border-color:var(--ochre)}
.btn-solid:hover{transform:translateY(-1px)}
.btn-line{border-color:currentColor; color:var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn-ghost{border-color:var(--deep-soft); color:var(--deep-ink)}
.btn-ghost:hover{background:var(--deep-ink); color:var(--deep); border-color:var(--deep-ink)}
.btn:focus-visible{outline:2px solid var(--ochre); outline-offset:2px}
.mast .btn{padding:9px 14px}
@media (max-width:540px){ .mast .btn-solid{display:none} }

/* ── portada ──────────────────────────────── */
.hero{background:var(--deep); color:var(--deep-ink); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.78fr);
  gap:clamp(24px,4vw,56px); align-items:end; padding-block:clamp(40px,7vw,84px) clamp(28px,4vw,44px)}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr; align-items:start} }
.eyebrow{font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--deep-ochre); margin-bottom:clamp(16px,2.4vw,26px)}
.hero h1{font-size:clamp(2.9rem,9.4vw,6.4rem); letter-spacing:-.025em; color:var(--deep-ink)}
.hero h1 em{font-style:normal; display:block; color:var(--deep-ochre)}
.lede{font-size:clamp(1.0625rem,1.55vw,1.3rem); line-height:1.52; color:var(--deep-soft);
  max-width:31em; margin-top:clamp(18px,2.6vw,28px)}
.lede strong{color:var(--deep-ink); font-weight:400}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(22px,3vw,32px)}

.spec{border-top:1px solid var(--deep-rule); margin-top:clamp(30px,5vw,54px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.spec div{padding:16px 18px 18px 0; border-right:1px solid var(--deep-rule)}
.spec div:last-child{border-right:0}
.spec dt{font-family:var(--mono); font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--deep-soft); margin-bottom:7px}
.spec dd{margin:0; font-size:.95rem; color:var(--deep-ink); line-height:1.35}

/* ── recuadros de imagen pendiente ────────── */
.slot{position:relative; border:1px dashed var(--rule); border-radius:2px;
  background:repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in oklab,var(--rule) 40%, transparent) 11px 12px);
  display:flex; flex-direction:column; justify-content:flex-end; gap:5px; padding:14px; min-height:120px}
.hero .slot{border-color:var(--deep-rule); aspect-ratio:4/5;
  background:repeating-linear-gradient(135deg, transparent 0 11px, #241F18 11px 12px)}
.slot .slot-k{font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ochre)}
.hero .slot .slot-k{color:var(--deep-ochre)}
.slot .slot-d{font-family:var(--mono); font-size:.6875rem; line-height:1.45; color:var(--ink-faint)}
.hero .slot .slot-d{color:var(--deep-soft)}

/* ── secciones ────────────────────────────── */
section{padding-block:clamp(48px,7vw,96px)}
section + section{border-top:1px solid var(--rule)}
.sec{display:grid; grid-template-columns:minmax(0,150px) minmax(0,1fr); gap:clamp(18px,3.6vw,52px)}
@media (max-width:800px){ .sec{grid-template-columns:1fr; gap:20px} }
.rail{position:relative}
@media (min-width:801px){ .rail{position:sticky; top:calc(env(safe-area-inset-top,0px) + 82px); align-self:start} }
.rail .n{font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); display:block; padding-top:5px; border-top:2px solid var(--ochre)}
h2{font-size:clamp(1.65rem,3.6vw,2.55rem); letter-spacing:-.018em; max-width:22em}
h3{font-size:1.32rem; letter-spacing:-.01em}
.prose{max-width:37em; display:flex; flex-direction:column; gap:1.05em; margin-top:clamp(18px,2.4vw,26px)}
.prose p{font-size:1.09rem}
.prose h3{margin-top:.5em}
.prose .first::first-letter{font-family:var(--display); font-size:3.1em; float:left;
  line-height:.82; padding:.06em .1em 0 0; color:var(--ochre)}
.prose em{color:var(--ink-soft)}
.quote{font-family:var(--display); font-size:clamp(1.2rem,2.3vw,1.6rem); line-height:1.3;
  border-left:2px solid var(--ochre); padding-left:clamp(14px,2vw,22px); margin-block:.4em; max-width:24em}
.quote cite{display:block; font-family:var(--mono); font-size:.6875rem; font-style:normal;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-top:12px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); gap:clamp(22px,3.5vw,44px); align-items:start}
@media (max-width:800px){ .split{grid-template-columns:1fr} }

/* ── fichas de repertorio ─────────────────── */
.fichas{display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr));
  gap:1px; background:var(--rule); border:1px solid var(--rule); margin-top:clamp(22px,3vw,34px)}
.ficha{background:var(--paper); padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column}
.ficha > .region{font-family:var(--mono); font-size:.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ochre); margin-bottom:11px}
.ficha h3 a{text-decoration:none; border-bottom:1px solid transparent}
.ficha h3 a:hover{border-bottom-color:var(--ochre)}
.ficha > p{font-size:.975rem; color:var(--ink-soft); margin-top:9px; line-height:1.5}
.fields{margin:15px 0 0; padding-top:13px; border-top:1px solid var(--rule-soft);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px}
.fields dt{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); padding-top:3px}
.fields dd{margin:0; font-size:.9rem; line-height:1.4; color:var(--ink)}
.unesco{align-self:flex-start; display:inline-block; font-family:var(--mono); font-size:.5625rem;
  letter-spacing:.12em; text-transform:uppercase; border:1px solid var(--indigo); color:var(--indigo);
  padding:3px 6px; border-radius:2px; margin-top:12px}
.more{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ochre); text-decoration:none; border-bottom:1px solid var(--ochre);
  align-self:flex-start; margin-top:15px}

/* ── formatos ─────────────────────────────── */
.formats{display:flex; flex-direction:column; margin-top:clamp(22px,3vw,34px); border-top:1px solid var(--rule)}
.fmt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,260px);
  gap:clamp(14px,3vw,40px); padding-block:clamp(22px,2.8vw,30px); border-bottom:1px solid var(--rule)}
@media (max-width:760px){ .fmt{grid-template-columns:1fr; gap:16px} }
.fmt h3{font-size:1.4rem}
.fmt > div > p{font-size:1rem; color:var(--ink-soft); margin-top:9px; max-width:38em}
.fmt-spec{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; align-content:start}
.fmt-spec dt{font-family:var(--mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); padding-top:3px}
.fmt-spec dd{margin:0; font-size:.9rem; line-height:1.4; font-variant-numeric:tabular-nums}
.pick{background:none; border:0; padding:0; margin-top:14px; cursor:pointer; text-align:left;
  font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ochre); border-bottom:1px solid var(--ochre)}
.pick:focus-visible{outline:2px solid var(--ochre); outline-offset:3px}

/* ── tarjetas y listas ────────────────────── */
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(18px,2.6vw,32px); margin-top:clamp(20px,2.8vw,30px)}
.card{background:var(--paper); border:1px solid var(--rule); border-radius:2px; padding:clamp(18px,2.2vw,24px)}
.card h3{font-size:1.15rem; margin-bottom:11px}
.ticks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ticks li{font-size:.94rem; line-height:1.45; color:var(--ink-soft); padding-left:17px; position:relative}
.ticks li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--ochre)}
.note{font-family:var(--mono); font-size:.6875rem; line-height:1.55; color:var(--ink-faint);
  border-left:1px solid var(--rule); padding-left:13px; margin-top:clamp(20px,2.6vw,28px); max-width:44em}

.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px; margin-top:clamp(20px,2.8vw,32px)}
.gallery .slot{aspect-ratio:4/3}
.gallery .slot:nth-child(1){grid-column:span 2; aspect-ratio:16/9}
@media (max-width:640px){ .gallery .slot:nth-child(1){grid-column:span 1} }

/* ── páginas de tradición ─────────────────── */
.crumb{font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--deep-soft); margin-bottom:clamp(14px,2vw,22px)}
.crumb a{color:var(--deep-soft); text-decoration:none; border-bottom:1px solid var(--deep-rule)}
.crumb a:hover{color:var(--deep-ochre); border-bottom-color:var(--deep-ochre)}
.trad-hero{background:var(--deep); color:var(--deep-ink); padding-block:clamp(34px,5.5vw,64px) clamp(30px,4.5vw,52px)}
.trad-hero h1{font-family:var(--display); font-size:clamp(2.2rem,6.4vw,4.2rem); letter-spacing:-.022em; color:var(--deep-ink)}
.trad-hero .sub{font-family:var(--body); font-size:.5em; color:var(--deep-ochre); display:block; margin-top:.35em; letter-spacing:0}
.datos{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px;
  background:var(--rule); border:1px solid var(--rule); margin-top:clamp(22px,3vw,32px)}
.datos > div{background:var(--paper); padding:15px 17px}
.datos dt{font-family:var(--mono); font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:7px}
.datos dd{margin:0; font-size:.94rem; line-height:1.4}
.vecinas{display:flex; flex-wrap:wrap; gap:9px; margin-top:clamp(18px,2.4vw,26px)}
.vecinas a{font-family:var(--mono); font-size:.6875rem; letter-spacing:.08em; text-decoration:none;
  border:1px solid var(--rule); border-radius:2px; padding:8px 12px; color:var(--ink-soft)}
.vecinas a:hover{border-color:var(--ochre); color:var(--ink)}
.cta-band{background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.cta-in{display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between; padding-block:clamp(26px,3.6vw,40px)}
.cta-in h2{font-size:clamp(1.3rem,2.6vw,1.9rem); max-width:26em}

/* ── contacto ─────────────────────────────── */
.contact{background:var(--deep); color:var(--deep-ink)}
.contact .rail .n{color:var(--deep-soft); border-top-color:var(--deep-ochre)}
.contact h2{color:var(--deep-ink)}
.contact .lede{margin-top:16px}
form{margin-top:clamp(22px,3vw,32px); display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px 18px; max-width:44em}
.f{display:flex; flex-direction:column; gap:7px}
.f.wide{grid-column:1/-1}
.f label{font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--deep-soft)}
.f input,.f select,.f textarea{font-family:var(--body); font-size:1rem; color:var(--deep-ink);
  background:var(--deep-2); border:1px solid var(--deep-rule); border-radius:2px; padding:10px 12px; width:100%}
.f textarea{min-height:104px; resize:vertical; line-height:1.5}
.f select{font-family:var(--mono); font-size:.85rem}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--deep-ochre); outline-offset:-1px; border-color:var(--deep-ochre)}
.f-act{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:4px}
.said{font-family:var(--mono); font-size:.6875rem; letter-spacing:.06em; color:var(--deep-ochre)}
.direct{grid-column:1/-1; border-top:1px solid var(--deep-rule); padding-top:clamp(18px,2.4vw,24px);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px}
.direct dt{font-family:var(--mono); font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--deep-soft); margin-bottom:6px}
.direct dd{margin:0; font-size:.98rem}
.direct a{color:var(--deep-ochre); text-decoration:none; border-bottom:1px solid transparent}
.direct a:hover{border-bottom-color:var(--deep-ochre)}

/* ── pie ──────────────────────────────────── */
footer{background:var(--deep); color:var(--deep-soft); border-top:1px solid var(--deep-rule)}
.foot{display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:flex-end; padding-block:clamp(30px,4vw,44px)}
.foot .brand{color:var(--deep-ink); font-size:1.25rem}
.foot .lbl{color:var(--deep-soft)}
.foot-soc{display:flex; gap:16px; flex-wrap:wrap}
.foot-soc a{font-family:var(--mono); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--deep-soft); text-decoration:none; border-bottom:1px solid var(--deep-rule)}
.foot-soc a:hover{color:var(--deep-ochre); border-bottom-color:var(--deep-ochre)}
.foot small{font-family:var(--mono); font-size:.625rem; letter-spacing:.06em; color:#6A6152}

@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }