/* Bolutago — hoja de estilos común */

:root{
  --bg:#f7f2e2;
  --bg-alt:#ede5cd;
  --dark:#17191a;
  --ink:#1b1a16;
  --muted:#756f5c;
  --accent:#1f7d78;
  --accent-2:#a8721c;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --gap:28px;
}

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

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

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

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{text-decoration-thickness:2px;}

a:focus-visible,
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

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

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

/* ---------- ritmo vertical ---------- */
.band{padding:56px 0;}
.band--wide{padding:120px 0;}
.band--alt{background:var(--bg-alt);}
.band--dark{background:var(--dark);color:var(--bg);}
.band--dark h2,.band--dark h3{color:var(--bg);}
.band--dark .lead,.band--dark p{color:#e5decb;}
.band--dark .caption,.band--dark .kicker{color:#b4ab93;}
.band--dark a{color:#7ccdc7;}

/* ---------- tipografía ---------- */
h1,h2,h3,.sitename,.nav a,.steps li b,.footname{font-family:var(--sans);}

h1{
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:0.98;
  margin:0;
  font-size:clamp(2.5rem,7.4vw,5.8rem);
}

h2{
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.06;
  font-size:clamp(1.7rem,3.3vw,2.6rem);
  margin:0 0 22px;
}

h3{
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.2;
  font-size:1.18rem;
  margin:34px 0 10px;
}

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

.lead{font-size:1.22rem;line-height:1.6;}
.caption,.kicker{
  font-family:var(--sans);
  font-size:0.8rem;
  line-height:1.45;
  letter-spacing:0.04em;
  color:var(--muted);
}
.kicker{color:var(--accent-2);font-weight:700;margin:0 0 12px;}

/* ---------- cabecera ---------- */
.site-header{
  border-bottom:1px solid rgba(27,26,22,.16);
  padding:20px 0;
}
.site-header .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 26px;
}
.sitename{
  font-weight:800;
  font-size:1.28rem;
  letter-spacing:-0.02em;
  color:var(--ink);
  text-decoration:none;
}
.sitename:hover{color:var(--accent);}
.nav{display:flex;flex-wrap:wrap;gap:6px 24px;}
.nav a{
  font-size:0.95rem;
  font-weight:600;
  color:var(--ink);
  text-decoration:none;
  padding:4px 0;
  border-bottom:2px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent);}

/* ---------- hero escalonado ---------- */
.hero{padding:96px 0 0;}
.hero-title{
  border-left:3px solid var(--accent);
  padding-left:26px;
}
.hero-title span{display:block;}
.hero-title span:nth-child(2){margin-left:8.33%;}
.hero-title span:nth-child(3){margin-left:16.66%;}

.hero-intro{margin-top:46px;}
.hero-intro .col{grid-column:1 / span 5;}

.topicline{
  margin-top:30px;
  font-family:var(--sans);
  font-size:0.92rem;
  font-weight:600;
  color:var(--muted);
  grid-column:1 / span 9;
}
.topicline span{white-space:nowrap;}
.topicline span+span::before{
  content:"/";
  color:var(--accent);
  margin:0 12px;
  font-weight:700;
}

/* ---------- imagen principal ---------- */
.mainfig{
  margin:64px 0 0;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  align-items:end;
}
.mainfig .capcol{
  grid-column:4 / span 1;
  justify-self:end;
}
.mainfig .imgcol{grid-column:5 / span 8;}
.mainfig img{width:100%;}
.vcap{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--sans);
  font-size:0.76rem;
  letter-spacing:0.05em;
  color:var(--muted);
  margin:0;
  max-height:340px;
}

/* ---------- columnas de texto ---------- */
.c5{grid-column:1 / span 5;}
.c6{grid-column:1 / span 6;}
.c7{grid-column:1 / span 7;}
.c9{grid-column:1 / span 9;}
.c7-right{grid-column:6 / span 7;}
.c5-right{grid-column:8 / span 5;}
.c6-right{grid-column:7 / span 6;}

.secnum{
  font-family:var(--sans);
  font-weight:700;
  font-size:0.85rem;
  color:var(--accent-2);
  grid-column:1 / span 1;
  padding-top:8px;
}

/* ---------- separador ---------- */
.rule{
  height:3px;
  background:var(--accent);
  border:0;
  width:33.33%;
  margin:0;
}
.rule--center{margin-left:auto;margin-right:auto;}
.rule--right{margin-left:auto;}

/* ---------- listas numeradas ---------- */
.steps{list-style:none;margin:26px 0 0;padding:0;counter-reset:step;}
.steps li{
  counter-increment:step;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:0 18px;
  padding:18px 0;
  border-top:1px solid rgba(117,111,92,.35);
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--sans);
  font-weight:800;
  font-size:1.9rem;
  line-height:1.1;
  letter-spacing:-0.03em;
  color:var(--accent-2);
}
.steps li b{font-weight:700;display:block;margin-bottom:2px;}
.band--dark .steps li{border-top-color:rgba(247,242,226,.22);}

.plain{margin:18px 0 0;padding-left:20px;}
.plain li{margin-bottom:10px;}
.plain li::marker{color:var(--accent);}

/* ---------- tabla de espesores ---------- */
.specs{margin:24px 0 0;}
.specs dt{
  font-family:var(--sans);
  font-weight:700;
  margin-top:18px;
}
.specs dd{margin:4px 0 0;color:var(--ink);}

/* ---------- sección oscura con detalle ---------- */
.detail-grid{align-items:start;row-gap:34px;}
.detail-grid .figcol{grid-column:1 / span 4;}
.detail-grid .txtcol{grid-column:6 / span 6;}
.detail-grid figure{margin:0;}
.detail-grid figcaption{margin-top:12px;}

/* ---------- About ---------- */
.about-lead{font-size:1.32rem;line-height:1.55;}
.about-block{margin-top:44px;row-gap:0;}
.about-block h2{
  grid-column:1 / span 3;
  margin:6px 0 0;
  padding-right:20px;
  font-size:1.22rem;
  line-height:1.25;
  letter-spacing:-0.01em;
}
.about-block .body{grid-column:4 / span 6;}

/* ---------- páginas legales ---------- */
.doc h2{margin-top:52px;font-size:clamp(1.4rem,2.4vw,1.85rem);}
.doc h2:first-of-type{margin-top:36px;}

/* ---------- contacto ---------- */
.contact-mail{
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(1.2rem,2.6vw,1.7rem);
  letter-spacing:-0.02em;
}

/* ---------- pie ---------- */
.site-footer{border-top:3px solid var(--accent);margin-top:0;padding:48px 0 64px;background:var(--bg-alt);}
.footname{
  font-weight:800;
  font-size:clamp(2.2rem,8vw,4.6rem);
  letter-spacing:-0.04em;
  line-height:1;
  margin:0 0 34px;
}
.footgrid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);row-gap:28px;}
.footgrid .fnav{grid-column:1 / span 5;}
.footgrid .fmeta{grid-column:7 / span 6;}
.footgrid ul{list-style:none;margin:0;padding:0;}
.footgrid li{margin-bottom:8px;font-family:var(--sans);font-size:0.98rem;}
.footgrid .fmeta p{font-size:0.98rem;color:var(--muted);}
.footgrid .fmeta a{font-family:var(--sans);font-weight:700;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .band{padding:40px 0;}
  .band--wide{padding:64px 0;}
  .hero{padding:56px 0 0;}
  body{font-size:17px;}
  .wrap{padding:0 20px;}

  .hero-title{padding-left:18px;}
  .hero-title span:nth-child(2){margin-left:6%;}
  .hero-title span:nth-child(3){margin-left:12%;}

  .grid,.footgrid,.mainfig{grid-template-columns:1fr;}
  .c5,.c6,.c7,.c9,.c7-right,.c5-right,.c6-right,
  .hero-intro .col,.topicline,.secnum,
  .detail-grid .figcol,.detail-grid .txtcol,
  .about-block h2,.about-block .body,
  .footgrid .fnav,.footgrid .fmeta{grid-column:1 / -1;}

  .secnum{padding-top:0;margin-bottom:6px;}
  .about-block h2{margin-top:28px;}

  .mainfig{margin-top:36px;row-gap:14px;}
  .mainfig .capcol{justify-self:start;}
  .vcap{writing-mode:horizontal-tb;transform:none;max-height:none;}

  .rule{width:60%;}
  .steps li{grid-template-columns:52px 1fr;gap:0 14px;}
  .steps li::before{font-size:1.4rem;}
  .detail-grid .figcol{max-width:420px;}
}

@media (max-width:520px){
  .nav{gap:6px 16px;}
  .nav a{font-size:0.9rem;}
}

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