/* Stavoldo — hoja de estilo común */

:root{
  --bg:#f4eee1;
  --bg-alt:#e8dfcc;
  --bg-dark:#141414;
  --ink:#1a1814;
  --ink-soft:#736c5b;
  --ink-inv:#f4eee1;
  --acc:#2b4a8c;
  --acc2:#8a6a1e;
  --gap:24px;
  --step:84px;
  --mono:ui-monospace,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

/* --- tipografía --- */

h1,h2,h3,.mono{
  font-family:var(--mono);
  text-transform:uppercase;
  font-weight:600;
}

h1{
  font-size:clamp(1.75rem,4.4vw,3rem);
  line-height:1.2;
  letter-spacing:.035em;
  margin:0;
}

h2{
  font-size:clamp(1.05rem,2vw,1.35rem);
  line-height:1.35;
  letter-spacing:.12em;
  margin:0 0 22px;
}

h3{
  font-size:.92rem;
  line-height:1.5;
  letter-spacing:.11em;
  margin:34px 0 12px;
  color:var(--ink);
}

p{margin:0 0 20px}
p:last-child{margin-bottom:0}

.num{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.22em;
  color:var(--acc2);
  display:block;
  margin-bottom:14px;
  text-transform:uppercase;
}

.lead{font-size:1.06rem}

.small{font-size:.85rem;color:var(--ink-soft);line-height:1.65}

/* --- marcas de registro --- */

.reg{
  position:absolute;
  width:14px;
  height:14px;
  border:1px solid var(--acc);
  border-radius:50%;
  pointer-events:none;
}
.reg::before,.reg::after{content:"";position:absolute;background:var(--acc)}
.reg::before{top:6px;left:-7px;width:28px;height:1px}
.reg::after{left:6px;top:-7px;height:28px;width:1px}
.reg.gold{border-color:var(--acc2)}
.reg.gold::before,.reg.gold::after{background:var(--acc2)}
.reg.tl{top:-8px;left:-8px}
.reg.tr{top:-8px;right:-8px}
.reg.bl{bottom:-8px;left:-8px}
.reg.br{bottom:-8px;right:-8px}

/* --- separadores dobles --- */

.sep{position:relative;height:12px;margin:0 0 38px}
.sep::before,.sep::after{content:"";position:absolute;height:2px;left:0}
.sep::before{top:0;width:100%;background:var(--acc)}
.sep::after{top:8px;left:24px;width:calc(100% - 24px);background:var(--acc2)}
.sep.short::before{width:min(100%,320px)}
.sep.short::after{width:min(calc(100% - 24px),320px)}

/* --- cabecera --- */

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--bg);
  padding:10px 16px;
  font-family:var(--mono);
  font-size:.8rem;
}
.skip:focus{left:12px;top:12px;z-index:5}

.site-header{padding:26px 0 0}
.head-in{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
  padding-bottom:18px;
}
.brand{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.95rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{color:var(--acc)}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
}
.site-nav a{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink-soft);
  padding-bottom:3px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--acc2)}

.head-rule{position:relative;height:10px;margin-bottom:8px}
.head-rule::before,.head-rule::after{content:"";position:absolute;left:0;height:2px}
.head-rule::before{top:0;width:100%;background:var(--acc)}
.head-rule::after{top:6px;left:24px;width:calc(100% - 24px);background:var(--acc2)}

/* --- secciones --- */

section{padding:var(--step) 0}
.band-alt{background:var(--bg-alt)}
.band-dark{background:var(--bg-dark);color:var(--ink-inv)}

.tcol{grid-column:1 / span 7}
.off1{grid-column:2 / span 7}
.off2{grid-column:3 / span 7}
.off3{grid-column:4 / span 7}

/* --- hero --- */

.hero{padding:70px 0 var(--step)}
.hero-frame{position:relative;padding:34px 0 40px}
.h1-block{grid-column:1 / span 9}
.h1-line2{position:relative;display:block}
.h1-line2::after{
  content:"";
  position:absolute;
  left:-14px;
  right:14%;
  top:64%;
  height:2px;
  background:var(--acc);
}
.hero-body{margin-top:46px;row-gap:34px}
.hero-intro{grid-column:1 / span 5}
.hero-index{grid-column:8 / span 4}
.hero-index h2{font-size:.72rem;letter-spacing:.2em;color:var(--acc2);margin-bottom:16px}

/* --- listas --- */

.marks{list-style:none;margin:0 0 20px;padding:0}
.marks li{position:relative;padding-left:20px;margin-bottom:12px;line-height:1.6}
.marks li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--acc);
}
.marks.gold li::before{background:var(--acc2)}
.marks a{text-decoration:none;border-bottom:1px solid var(--acc)}
.marks li:last-child{margin-bottom:0}

ol.steps{margin:0 0 20px;padding-left:22px}
ol.steps li{margin-bottom:12px}
ol.steps li::marker{font-family:var(--mono);color:var(--acc2);font-size:.9em}

/* --- imagen principal --- */

.fig-main{grid-column:3 / span 8;position:relative;margin:0}
.fig-main .frame{position:relative}
.fig-main figcaption{
  margin-top:16px;
  max-width:34em;
  font-size:.82rem;
  color:var(--ink-soft);
  line-height:1.6;
}

/* --- sección oscura con imagen de detalle --- */

.band-dark h2,.band-dark h3{color:var(--ink-inv)}
.band-dark .num{color:var(--acc2)}
.band-dark .marks li::before{background:var(--acc2)}
.band-dark .sep::before{background:var(--acc2)}
.band-dark .sep::after{background:#4d6ba8}
.band-dark a{color:#f4eee1}
.band-dark a:focus-visible{outline-color:var(--ink-inv)}
.fig-detail{grid-column:2 / span 4;margin:0;position:relative}
.fig-detail .reg{border-color:var(--acc2)}
.fig-detail .reg::before,.fig-detail .reg::after{background:var(--acc2)}
.fig-detail figcaption{
  margin-top:14px;
  font-size:.78rem;
  line-height:1.6;
  color:rgba(244,238,225,.72);
}
.dark-text{grid-column:7 / span 6}
.dark-note{color:rgba(244,238,225,.72);font-size:.9rem}

/* --- about --- */

.about-col{grid-column:3 / span 7;position:relative}
.about-marks{
  grid-column:1 / span 1;
  position:relative;
  min-height:100%;
}
.about-marks span{position:absolute;left:6px}
.about-marks span:nth-child(1){top:14px}
.about-marks span:nth-child(2){top:33%}
.about-marks span:nth-child(3){top:62%}
.about-marks span:nth-child(4){top:88%}

/* --- páginas de texto (privacidad, condiciones) --- */

.doc-head{padding:64px 0 0}
.doc-head h1{font-size:clamp(1.5rem,3.2vw,2.15rem);max-width:16em}
.doc-head .num{margin-bottom:18px}
.doc-body{padding-top:50px}
.doc-col{grid-column:1 / span 8}
.doc-col h2{margin-top:52px}
.doc-col h2:first-of-type{margin-top:0}

/* --- pie --- */

.site-footer{background:var(--bg-dark);color:var(--ink-inv);padding:56px 0 60px}
.foot-rule{position:relative;height:12px;margin-bottom:46px}
.foot-rule::before,.foot-rule::after{content:"";position:absolute;left:0;height:2px}
.foot-rule::before{top:0;width:100%;background:var(--acc2)}
.foot-rule::after{top:8px;left:24px;width:calc(100% - 24px);background:#4d6ba8}
.foot-grid{row-gap:38px}
.foot-a{grid-column:1 / span 7}
.foot-b{grid-column:8 / span 5}
.foot-name{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.95rem;
  margin:0 0 16px;
}
.foot-a p{color:rgba(244,238,225,.76);font-size:.9rem;max-width:38em}
.foot-b h2{font-size:.72rem;letter-spacing:.2em;color:var(--acc2);margin-bottom:14px}
.foot-nav ul{list-style:none;margin:0 0 24px;padding:0}
.foot-nav li{margin-bottom:9px}
.foot-nav a{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-inv);
  text-decoration:none;
  border-bottom:1px solid rgba(244,238,225,.35);
  padding-bottom:2px;
}
.foot-nav a:hover{border-bottom-color:var(--ink-inv)}
.foot-mail a{color:var(--ink-inv);text-decoration:underline;text-underline-offset:3px}
.foot-mail{font-size:.9rem}
.foot-legal{
  margin-top:44px;
  font-size:.76rem;
  color:rgba(244,238,225,.6);
  font-family:var(--mono);
  letter-spacing:.08em;
}

/* --- adaptación --- */

@media (max-width:1000px){
  .tcol,.off1,.off2,.off3{grid-column:1 / span 9}
  .fig-main{grid-column:1 / span 10}
  .fig-detail{grid-column:1 / span 5}
  .dark-text{grid-column:7 / span 6}
  .about-col{grid-column:2 / span 10}
  .doc-col{grid-column:1 / span 10}
  .hero-intro{grid-column:1 / span 6}
  .hero-index{grid-column:8 / span 5}
  .h1-block{grid-column:1 / span 11}
}

@media (max-width:760px){
  :root{--step:50px;--gap:16px}
  body{font-size:16px}
  .wrap{padding:0 20px}
  .tcol,.off1,.off2,.off3,
  .fig-main,.fig-detail,.dark-text,
  .about-col,.doc-col,
  .h1-block,.hero-intro,.hero-index,
  .foot-a,.foot-b{grid-column:1 / -1}
  .about-marks{display:none}
  .hero{padding:44px 0 var(--step)}
  .hero-body{margin-top:34px}
  .fig-detail{margin-bottom:34px}
  .doc-head{padding:40px 0 0}
  .doc-body{padding-top:34px}
  .site-nav ul{gap:8px 16px}
  .brand{letter-spacing:.2em}
  h2{letter-spacing:.09em}
  .h1-line2::after{right:6%}
}