/* ============ TOKENS (guía de identidad: tinta, cobre, arena, papel) ============ */
:root{
  --bg:#F6F0E4;
  --sheet:#FFFDF8;
  --text:#14140F;
  --text-2:#6E6656;
  --text-3:#948A75;
  --rule:rgba(20,20,15,.16);
  --rule-strong:rgba(20,20,15,.45);
  --brand:#B5651D;
  --accent:#A35A18;
  --accent-wash:rgba(163,90,24,.07);
  --btn:#A35A18;
  --btn-text:#F6F0E4;
  --error:#A8321F;
  --card:#14140F;
  --card-text:#F6F0E4;
  --card-text-2:#C9B48C;
  --card-rule:rgba(246,240,228,.16);
  --img-filter:none;
  --img-blend:multiply;
  --shadow:0 1px 2px rgba(20,20,15,.06),0 12px 32px -16px rgba(20,20,15,.25);
  --ease:cubic-bezier(.16,1,.3,1);
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,52px);
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#14140F;
    --sheet:#1C1B16;
    --text:#F6F0E4;
    --text-2:#C9B48C;
    --text-3:#94886E;
    --rule:rgba(246,240,228,.16);
    --rule-strong:rgba(246,240,228,.45);
    --brand:#C87A33;
    --accent:#C87A33;
    --accent-wash:rgba(200,122,51,.09);
    --error:#E58A6F;
    --card:#1F1E18;
    --card-rule:rgba(246,240,228,.14);
    /* el papel de la muestra es blanco: invertirlo casi del todo deja la
       tinta clara sobre un papel que ya no deslumbra */
    --img-filter:invert(.9);
    --img-blend:lighten;
    --shadow:0 0 0 1px rgba(246,240,228,.06),0 14px 32px -16px rgba(0,0,0,.7);
  }
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
img{max-width:100%}
h1,h2,h3{text-wrap:balance}

.mono{
  font-family:var(--mono);
  text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; line-height:1.5;
}

/* la marca pequeña: por debajo de 48 px, tres barras (guía de identidad) */
.m3{display:inline-grid; gap:3px; width:20px; flex:none}
.m3 i{display:block; height:3px; background:var(--text); border-radius:1px}
.m3 i:nth-child(2){background:var(--brand)}

.page{max-width:1180px; margin-inline:auto; padding-inline:var(--gutter)}

/* ============ CABECERA ============ */
.top{display:flex; align-items:center; gap:10px 24px; flex-wrap:wrap; padding-block:14px}
.lock{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; text-transform:uppercase; letter-spacing:.01em; font-size:15px}
.nav{display:flex; flex-wrap:wrap; order:3; width:100%; gap:8px 18px; letter-spacing:.14em;
  padding-top:12px; border-top:1px solid var(--rule)}
.nav a{text-decoration:none; color:var(--text-2); transition:color .3s var(--ease)}
.nav a:hover{color:var(--accent)}
.pill{display:flex; border:1px solid var(--rule); border-radius:999px; overflow:hidden; margin-left:auto}
.pill a{padding:6px 11px; color:var(--text-2); text-decoration:none; transition:color .3s var(--ease), background .3s var(--ease)}
.pill a[aria-current="true"]{background:var(--text); color:var(--bg)}
@media (min-width:640px){
  .top{row-gap:16px; padding-block:18px}
  .nav{order:0; width:auto; margin-left:auto; gap:24px; letter-spacing:.2em; padding-top:0; border-top:0}
  .pill{margin-left:0}
}

/* ============ PIE ============ */
.foot{display:flex; align-items:flex-end; gap:14px 22px; flex-wrap:wrap; color:var(--text-2); margin-top:clamp(64px,10vw,110px); padding-block:22px 30px; border-top:1px solid var(--rule)}
.foot nav{display:flex; gap:10px 22px; flex-wrap:wrap}
.foot a,.linklike{text-decoration:none; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; transition:color .3s var(--ease)}
.foot a:hover,.linklike:hover{color:var(--accent)}
.foot .right{margin-left:auto}

/* ============ PORTADA ============ */
.cover{
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(20px,3.5vh,40px);
  padding:clamp(24px,4.5vw,52px);
  max-width:1180px;
  margin-inline:auto;
}
.cover .top{padding:0}
.cover .foot{margin:0; padding:0; border-top:0}

.middle{display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; --word:clamp(2.6rem,9vw,5.6rem)}

/* la marca: cinco líneas del pentagrama, la tercera en cobre */
.mark{display:flex; flex-direction:column; gap:calc(var(--bh) * .72); width:var(--mw); --bh:6px; --mw:64px}
.mark i{display:block; height:var(--bh); background:var(--text); border-radius:1px; transform-origin:left center}
.mark i:nth-child(odd){width:100%}
.mark i:nth-child(even){width:64%}
.mark i:nth-child(3){background:var(--brand)}

.middle h1{
  margin:clamp(16px,2.4vh,26px) 0 0;
  font-size:var(--word);
  font-weight:600; line-height:.86; letter-spacing:-.02em; text-transform:uppercase;
}
/* la línea mide lo mismo que la palabra OSTINARA (unas 5 veces su tamaño de letra) */
.rule{height:1px; background:var(--rule-strong); transform-origin:center; margin:clamp(14px,2vh,22px) 0 0; width:calc(var(--word) * 5); max-width:100%}

/* el lema: grande y corto; debajo, en gris, qué es la web */
.tagline{margin:clamp(14px,2.2vh,22px) 0 0; display:grid; gap:8px; justify-items:center}
.tagline b{font-weight:600; font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.1; letter-spacing:-.02em}
.tagline span{color:var(--text-2); font-size:clamp(1rem,1.6vw,1.15rem); max-width:40ch}

.works{margin:clamp(28px,4.5vh,48px) auto 0; width:100%; max-width:860px; text-align:left}
.works-h{margin:0 0 10px; font-weight:400; color:var(--text-2)}
/* filas más juntas en la portada: tres canciones enteras en una ventana de portátil */
.works .work{padding-block:clamp(12px,2vh,20px)}

/* ============ LISTA DE OBRAS (portada y «más partituras») ============ */
.list{border-top:1px solid var(--rule)}
.work{
  display:flex; align-items:baseline; gap:18px;
  padding:clamp(18px,3vh,26px) 4px;
  border-bottom:1px solid var(--rule);
  text-decoration:none;
  transition:background .35s var(--ease);
}
.work:hover{background:var(--accent-wash)}
.work .t{display:block; font-size:clamp(1.3rem,3.4vw,1.85rem); font-weight:800; line-height:1.05; letter-spacing:-.015em; text-transform:uppercase}
.work .a{display:block; margin-top:5px; color:var(--text-2); font-size:.95rem; line-height:1.3}
.work-r{margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--text-2); flex:none}
.work-r .m{display:none}
.work .new{color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:1px 8px}
/* el nivel (versión fácil) en tinta, para no confundirse con «Nueva» */
.work .lvl{color:var(--text); border:1px solid var(--rule-strong); border-radius:999px; padding:1px 8px}
.work .arrow{color:var(--accent); transition:transform .4s var(--ease)}
.work:hover .arrow{transform:translateX(4px)}
@media (min-width:600px){.work-r .m{display:inline}}

/* ============ PÁGINA DE OBRA: LA HOJA ============ */
.crumb{display:flex; flex-wrap:wrap; gap:4px 8px; color:var(--text-2); padding-top:4px}
.crumb a{text-decoration:none; transition:color .3s var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal; color:var(--text-3)}

.sheet{
  background:var(--sheet);
  box-shadow:var(--shadow);
  border-radius:2px;
  padding:clamp(20px,5.5vw,64px);
  max-width:920px;
  margin:18px auto 0;
}
/* en el móvil el menú ya está a la vista: sin migas, la partitura no baja (siguen en el JSON-LD) */
@media (max-width:639px){
  .crumb{display:none}
  .sheet{margin-top:4px}
}
.sheet-top{display:flex; align-items:center; justify-content:space-between; gap:12px}
.lock-s{display:flex; align-items:center; gap:9px; font-weight:600; text-transform:uppercase; font-size:13px}
.sheet-kind{color:var(--text-2); text-align:right}
.sheet-title{
  margin:clamp(22px,4.5vw,44px) 0 0;
  text-align:center;
  font-weight:600; text-transform:uppercase; letter-spacing:-.02em; line-height:.94;
  font-size:clamp(2.2rem,7.4vw,5rem);
}
.sheet-level{margin:16px 0 0; text-align:center}
.sheet-level span{display:inline-block; border:1px solid var(--rule-strong); border-radius:999px; padding:3px 12px 3px 14px}
.sheet-credits{display:flex; justify-content:space-between; align-items:flex-end; gap:14px; margin-top:18px}
.sheet-credits .l{color:var(--text-2)}
.sheet-credits .r{font-weight:600; font-size:clamp(.98rem,2vw,1.15rem); line-height:1.25; text-align:right}

.sample{margin:18px 0 0}
.sample img,.ghost img{display:block; width:100%; height:auto; filter:var(--img-filter); mix-blend-mode:var(--img-blend)}
/* el sistema siguiente se intuye y se funde: el resto está tras el formulario */
.ghost{height:clamp(36px,8vw,96px); overflow:hidden; -webkit-mask-image:linear-gradient(#000,transparent 90%); mask-image:linear-gradient(#000,transparent 90%); opacity:.45; margin-top:8px}

.gate{display:grid; gap:12px; justify-items:center; text-align:center; max-width:620px; margin:clamp(10px,2vw,18px) auto 0}
.hook{margin:0; font-weight:600; font-size:clamp(1.35rem,3.2vw,1.9rem); letter-spacing:-.015em; line-height:1.1}
.hook-sub{margin:0; color:var(--text-2)}
.kit{width:100%; min-height:98px; margin-top:6px; text-align:left}
.kit-note{margin:0; font-size:12.5px; line-height:1.5; color:var(--text-2)}
.kit-note a{color:inherit}
.kit-sent{margin:0; font-weight:600}

.watch{display:flex; justify-content:center; margin:30px 0 0}
.video-link{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--accent); text-decoration:none;
  border:1px solid var(--rule-strong); border-radius:999px;
  padding:9px 18px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.video-link:hover{border-color:var(--accent); background:var(--accent-wash)}
.video-link svg{width:15px; height:15px; fill:currentColor; flex:none}

.more{max-width:920px; margin:clamp(48px,8vw,80px) auto 0}
.more-h{margin:0 0 10px; font-size:1.05rem; font-weight:600}
.more .work{padding-block:15px}
.more .work .t{font-size:clamp(1.05rem,2.4vw,1.25rem)}

/* ============ FORMULARIO DE KIT, VESTIDO ============
   Kit mete su formulario dentro de la página, no en un iframe, así que estos
   estilos le llegan sin tocar nada en Kit. Sus colores van en línea y hace
   falta !important. Si un día Kit cambia su marcado, lo peor que pasa es que
   vuelve a verse como en Kit: el formulario sigue funcionando. */
.kit .formkit-form{
  background:transparent !important; border:0 !important; border-radius:0 !important;
  max-width:none !important; width:100% !important; margin:0 !important;
  overflow:visible !important; box-shadow:none !important;
  font-family:inherit !important; color:var(--text) !important;
}
.kit .formkit-background{display:none !important}
.kit .formkit-form [data-style]{padding:0 !important}
/* título, subtítulo y garantía de Kit fuera: la página ya dice todo eso en su idioma */
.kit .formkit-header,.kit .formkit-subheader,.kit .formkit-guarantee{display:none !important}
.kit .formkit-fields{display:flex !important; flex-wrap:wrap !important; gap:8px; margin:0 !important}
.kit .formkit-field{flex:1 1 220px !important; min-width:0 !important; margin:0 !important}
.kit .formkit-input{
  width:100% !important;
  background:var(--bg) !important; color:var(--text) !important;
  border:1px solid var(--rule-strong) !important; border-radius:4px !important;
  font-family:inherit !important; font-size:16px !important; font-weight:400 !important; line-height:1.4 !important;
  padding:12px 14px !important;
}
.kit .formkit-input::placeholder{color:var(--text-3) !important; opacity:1 !important}
.kit .formkit-input:focus{border-color:var(--accent) !important; outline:3px solid var(--accent-wash) !important}
.kit .formkit-submit{
  flex:0 0 auto !important; margin:0 !important;
  background:var(--btn) !important; color:var(--btn-text) !important;
  border-radius:4px !important;
  font-family:inherit !important; font-size:15px !important; font-weight:600 !important;
}
.kit .formkit-submit > span{padding:12px 22px !important}
.kit .formkit-submit:hover > span{background-color:rgba(0,0,0,.1) !important}
.kit .formkit-submit:focus-visible{outline:2px solid var(--accent) !important; outline-offset:3px !important}
.kit .formkit-alert-error{
  background:transparent !important; border:0 !important; padding:0 !important;
  margin:0 0 8px !important; text-align:left !important;
  color:var(--error) !important; font-size:13px;
}
.kit .formkit-alert-error:empty{display:none !important}
/* el aviso de éxito de Kit sale en inglés: en su lugar va .kit-sent y la página de gracias */
.kit .formkit-alert-success{display:none !important}
.kit .formkit-powered-by-convertkit-container{justify-content:flex-start !important; margin:10px 0 0 !important}
.kit .formkit-powered-by-convertkit{margin:0 !important; height:28px !important; width:110px !important; background-size:contain !important; background-position:left center !important; opacity:.55 !important}
@media (prefers-color-scheme: dark){
  .kit .formkit-powered-by-convertkit{filter:invert(1)}
}
@media (max-width:480px){
  .kit{min-height:150px}
  .kit .formkit-submit{flex:1 1 100% !important}
}

/* ============ PÁGINAS DE TEXTO: LEYENDA, PRIVACIDAD, GRACIAS ============ */
.prose-page{max-width:860px; padding-top:clamp(20px,4vw,44px)}
.page-title{margin:0; font-weight:600; text-transform:uppercase; letter-spacing:-.02em; line-height:.95; font-size:clamp(2rem,6vw,3.6rem)}
.lead{margin:18px 0 0; max-width:62ch; color:var(--text-2); font-size:1.05rem}
.section-h{margin:clamp(36px,6vw,56px) 0 12px; font-size:1.05rem; font-weight:600}
.btn-ink{display:inline-flex; align-items:center; gap:8px; background:var(--text); color:var(--bg); text-decoration:none; padding:11px 18px; border-radius:4px; font-weight:600; font-size:14.5px}
.btn-line{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--rule-strong); text-decoration:none; padding:10px 18px; border-radius:4px; font-size:14.5px; transition:border-color .3s var(--ease), color .3s var(--ease)}
.btn-line:hover{border-color:var(--accent); color:var(--accent)}
.back{margin:clamp(36px,6vw,56px) 0 0}

/* leyenda */
.staff{margin-top:clamp(24px,4vw,40px); overflow-x:auto; background:var(--sheet); border:1px solid var(--rule); border-radius:6px; padding:14px 12px}
.staff svg{display:block; width:100%; min-width:540px; height:auto; color:var(--text)}
.staff .ln{stroke:currentColor; stroke-width:1; opacity:.55}
.staff .st{stroke:currentColor; stroke-width:1.3}
.staff .xh{stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}
.staff .xh.thin{stroke-width:1.45}
.staff .nh{fill:currentColor}
.staff .num{fill:var(--accent); font-family:var(--mono); font-size:11px}
.voices{margin:22px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:0 28px; border-top:1px solid var(--rule)}
.voices li{display:grid; grid-template-columns:2.1em 1fr; gap:2px 8px; padding:10px 0; border-bottom:1px solid var(--rule)}
.voices .n{color:var(--accent); grid-row:span 2}
.voices b{font-weight:600; line-height:1.3}
.voices span:last-child{color:var(--text-2); font-size:.88rem; line-height:1.35}
.marks{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px}
.marks div{border:1px solid var(--rule); border-radius:4px; padding:12px 14px; display:grid; gap:2px}
.marks b{font-weight:800; font-size:1.15rem; line-height:1.2}
.marks span{color:var(--text-2); font-size:.88rem; line-height:1.35}

/* privacidad */
.prose{max-width:700px}
.prose h2{font-size:1rem; font-weight:600; margin:34px 0 8px}
.prose p,.prose li{color:var(--text-2)}
.prose b{color:var(--text); font-weight:600}
.prose ul{padding-left:18px}
.prose li{margin-bottom:6px}
.prose a{color:var(--accent)}
.table{overflow-x:auto}
.table table{width:100%; border-collapse:collapse; min-width:480px; font-size:.92rem}
.table th{text-align:left; font-family:var(--mono); font-weight:400; text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; color:var(--text-2); padding:10px 12px 8px 0; border-bottom:1px solid var(--rule-strong)}
.table td{padding:10px 12px 10px 0; border-bottom:1px solid var(--rule); color:var(--text-2); vertical-align:top}
.table code{font-family:var(--mono); font-size:.82rem; color:var(--text)}

/* gracias */
.narrow{max-width:640px; padding-top:clamp(28px,6vw,72px); display:grid; gap:18px}
.narrow .lead{margin:0}
.eyebrow{margin:0; color:var(--accent)}
.steps{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.steps li{display:grid; grid-template-columns:2em 1fr; gap:10px; padding:13px 0; border-bottom:1px solid var(--rule)}
.steps .n{font-weight:800; color:var(--accent)}
.label{margin:10px 0 0; color:var(--text-2)}
.acts{display:flex; flex-wrap:wrap; gap:10px}

/* 404 */
.notfound{max-width:560px; text-align:center; display:grid; gap:14px; justify-items:center; padding-top:clamp(40px,9vw,96px)}
.notfound svg{width:min(340px,100%); height:auto; color:var(--text)}
.notfound .ln{stroke:currentColor; stroke-width:1; opacity:.55}
.notfound rect{fill:currentColor}
.notfound text{fill:currentColor; font-family:var(--sans); font-weight:800; font-size:28px; letter-spacing:-.02em}
.notfound p{margin:0; color:var(--text-2)}
.notfound > div{display:grid; gap:14px; justify-items:center}

/* ============ AVISO DE COOKIES ============ */
.consent{
  position:fixed; z-index:50;
  left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  max-width:440px;
  background:var(--card); color:var(--card-text);
  border:1px solid var(--card-rule); border-radius:6px;
  padding:16px; display:grid; gap:12px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.45);
}
.consent[hidden]{display:none}
.consent p{margin:0; font-size:14px; line-height:1.5}
.consent a{color:var(--card-text-2)}
/* rechazar y aceptar pesan lo mismo, como pide la AEPD */
.consent-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.consent-acts button{padding:11px 12px; border:1px solid var(--card-text); border-radius:4px; color:var(--card-text); font-weight:600; font-size:14px; transition:background .3s var(--ease)}
.consent-acts button:hover{background:rgba(246,240,228,.1)}
@media (max-width:639px){
  .consent{
    left:0; right:0; bottom:0; max-width:none;
    border-radius:0; border-width:1px 0 0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    gap:10px;
  }
  .consent p{font-size:13px; line-height:1.45}
  .consent-acts button{padding:8px 12px; font-size:13px}
}
@media (min-width:640px){.consent{left:auto; right:24px; bottom:24px}}

/* ============ MOVIMIENTO ============ */
.mark i{transform:scaleX(0); animation:draw .6s var(--ease) forwards; animation-delay:calc(var(--i) * 50ms)}
@keyframes draw{to{transform:scaleX(1)}}
.middle .rule{transform:scaleX(0); animation:draw .7s var(--ease) .2s forwards}
.load{opacity:0; transform:translateY(16px); animation:rise .6s var(--ease) forwards; animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1; transform:none}}

@media (prefers-reduced-motion: reduce){
  .mark i,.middle .rule,.load,.work .arrow{opacity:1 !important; transform:none !important; animation:none !important; transition:none !important}
}

@media (max-width:560px){
  .cover{gap:clamp(24px,4vh,40px)}
  .work{gap:12px}
}