/* Base común de las cinco portadas: la misma paleta, el mismo grano y los mismos botones de cápsula.
   Lo que cambia entre ellas es la composición y el movimiento. */
:root{
  --bg:#1c1f24;--fg:#f2eee5;--mute:#9aa2af;--dim:rgba(242,238,229,.36);--line:rgba(242,238,229,.15);--bg-rgb:28,31,36;--ov-rgb:14,15,18;
  --gold:#c49c5f;--caps:"Cormorant SC",Georgia,serif;--sans:"Instrument Sans",system-ui,sans-serif;--titulo:"Punto redondo","Instrument Sans",system-ui,sans-serif;
  --ease:cubic-bezier(.16,.84,.24,1);--pad:clamp(18px,3.2vw,48px);
  --c-mza:#d9a62a;--c-mzl:#b58640;--c-caba:#d5873f;--c-csjn:#c95836;--c-saij:#b03b42;--c-dial:#8a3853;--c-idh:#5f7f9a;--c-scba:#c06a2c
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--gold);color:var(--bg)}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
.grano{position:fixed;inset:0;z-index:60;pointer-events:none;background:url("../grano.png") 0 0/256px 256px repeat;animation:grano .9s steps(1,end) infinite}
@keyframes grano{0%{background-position:0 0}12.5%{background-position:-61px 37px}25%{background-position:43px -88px}37.5%{background-position:-97px -19px}50%{background-position:18px 71px}62.5%{background-position:79px 14px}75%{background-position:-28px -63px}87.5%{background-position:57px 96px}100%{background-position:0 0}}
@media (max-width:760px){.grano{background-image:url("../grano-m.png");background-size:128px 128px;opacity:.7}}

/* botones: siempre cápsula */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px 13px;border:1px solid var(--gold);border-radius:999px;background:var(--gold);color:#14110a;font:500 15px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--fg);border-color:var(--fg)}
.btn.sec{background:none;border-color:var(--line);color:var(--fg)}
.btn.sec:hover{border-color:var(--gold);color:var(--gold);background:none}

/* la marca: V, punto y X en oro */
.marca{font-family:"Cinzel","Trajan Pro",var(--caps);font-weight:500;letter-spacing:.26em;white-space:nowrap}
.marca .v{background:linear-gradient(170deg,#f0c75a 8%,#d9a31b 46%,#a77a0c 92%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.marca .d{display:inline-block;width:.17em;height:.17em;margin:0 calc(.26em + .005em) 0 0;border-radius:50%;background:var(--gold);vertical-align:.265em}
.marca-g{font:300 1em/.86 var(--caps);letter-spacing:.02em;white-space:nowrap}
.marca-g .v{background:linear-gradient(170deg,#f0c75a 8%,#d9a31b 46%,#a77a0c 92%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.marca-g .d{display:inline-block;width:.17em;height:.17em;margin:0 .091em 0 .066em;border-radius:50%;background:linear-gradient(170deg,#f0c75a,#d9a31b 50%,#a77a0c);vertical-align:.24em}

/* cabecera mínima */
.cab{display:flex;align-items:center;gap:24px;padding:22px clamp(18px,3vw,44px)}   /* el mismo margen que la barra de la aplicación: el nombre no se corre al entrar */
.cab .lock{display:inline-flex;align-items:center;gap:10px}
.cab .sello{display:block;width:32px;height:32px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(241,238,230,.24)}
.marca2{display:inline-flex;align-items:center;gap:.32em;font:600 16px/1 var(--sans);letter-spacing:-.02em;color:var(--fg);white-space:nowrap}
.marca2 span{font-weight:400;color:var(--mute)}
.marca2 .m-pt{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--gold);flex:none}
@media (max-width:760px){.cab .sello{width:28px;height:28px}.marca2{font-size:15px}}
.cab .marca{font-size:15.5px;position:relative;top:.4px}   /* las mayúsculas miden lo mismo que las del menú (0,72 em de Instrument Sans = 0,70 em de Cinzel a 15,5 px) y comparten su línea de base */
.cab nav{display:flex;gap:clamp(16px,2vw,30px);font-size:15px;color:var(--mute);margin-left:clamp(20px,4vw,72px)}
.cab nav a:hover{color:var(--gold)}
.cab .btn{margin-left:auto;padding:10px 18px 9px;font-size:13.5px}
@media (max-width:760px){.cab nav{display:none}}

/* aviso de muestra */
.nota-muestra{position:fixed;left:var(--pad);bottom:14px;z-index:70;font-size:11.5px;color:var(--dim);max-width:60ch}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* El punto de los títulos es un círculo (un solo carácter, «.»; mide como el de Instrument Sans). */
@font-face{font-family:"Punto redondo";src:url(../punto-redondo.woff) format("woff");font-weight:400;font-style:normal;unicode-range:U+002E;font-display:block}