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

:root{
  --bg:#f4ece0;
  --bg-alt:#e8dbc7;
  --bg-dark:#33231a;
  --ink:#2a2119;
  --ink-soft:#7d6f5c;
  --ink-invert:#f4ece0;
  --accent:#b0512c;
  --accent-2:#37596b;
  --step:84px;
  --gutter:22px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(176,81,44,.45);}
a:hover{border-bottom-color:var(--accent);}
a:focus-visible,
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- rejilla de 12 columnas ---------- */

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

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

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

h1,h2,h3{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  color:var(--ink);
  margin:0;
}

h1{
  font-size:clamp(38px,6.2vw,72px);
  line-height:1.06;
  letter-spacing:-.01em;
}

h2{
  font-size:clamp(23px,2.5vw,30px);
  line-height:1.25;
  margin-bottom:18px;
}

h3{
  font-size:18px;
  line-height:1.4;
  margin:30px 0 10px;
}

p{margin:0 0 18px;}

.lead{font-size:19px;line-height:1.75;}

.caption{
  font-size:12px;
  line-height:1.55;
  color:var(--ink-soft);
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:10px 0 0;
}

.num{
  font-family:Georgia,'Times New Roman',serif;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--accent-2);
  display:block;
  margin-bottom:12px;
  text-transform:uppercase;
}

/* ---------- cruces de registro ---------- */

.mark{
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 18px;
}
.mark::before,
.mark::after{
  content:"";
  position:absolute;
  background:var(--accent-2);
}
.mark::before{left:8px;top:0;width:1px;height:18px;}
.mark::after{top:8px;left:0;height:1px;width:18px;}
.mark.hot::before,
.mark.hot::after{background:var(--accent);}

/* ---------- cabecera y navegación ---------- */

.site-header{
  border-bottom:1px solid rgba(125,111,92,.35);
  padding:20px 0;
}
.header-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 26px;
}
.brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
  border-bottom:none;
}
.brand:hover{color:var(--accent);}

.site-nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:0;
  padding:0;
}
.site-nav a{
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent);}

/* ---------- hero ---------- */

.hero{
  position:relative;
  padding:calc(var(--step) - 24px) 0 var(--step);
}
.hero-frame{position:relative;}
.hero-frame .corner{position:absolute;}
.hero-frame .c-tl{left:-26px;top:-30px;}
.hero-frame .c-tr{right:-26px;top:-30px;}
.hero-frame .c-bl{left:-26px;bottom:-30px;}
.hero-frame .c-br{right:-26px;bottom:-30px;}

.hero h1{
  grid-column:1 / span 9;
  position:relative;
}
.hero h1 .misprint{
  display:block;
  position:relative;
}
.hero h1 .misprint::after{
  content:"";
  position:absolute;
  left:-4px;
  right:12%;
  bottom:.18em;
  height:2px;
  background:var(--accent);
}

.hero-body{
  grid-column:1 / span 5;
  margin-top:42px;
}
.hero-index{
  grid-column:8 / span 4;
  margin-top:46px;
}
.hero-index ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
}
.hero-index li{
  position:relative;
  padding-left:20px;
  margin-bottom:11px;
}
.hero-index li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  background:var(--accent);
}

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

.rule{
  border:0;
  margin:0 0 var(--step);
  height:10px;
  position:relative;
  max-width:640px;
}
.rule::before,
.rule::after{
  content:"";
  position:absolute;
  height:2px;
  width:100%;
  left:0;
}
.rule::before{top:0;background:var(--accent);}
.rule::after{top:8px;left:24px;background:var(--accent-2);}

/* ---------- secciones de texto ---------- */

.band{padding:var(--step) 0;}
.band--alt{background:var(--bg-alt);}

.col{grid-column:1 / span 7;}
.col--1{grid-column:1 / span 7;}
.col--2{grid-column:2 / span 7;}
.col--3{grid-column:3 / span 7;}
.col--4{grid-column:4 / span 7;}

.block + .block{margin-top:var(--step);}

ul.list,
ol.list{
  margin:18px 0 0;
  padding-left:0;
  list-style:none;
}
ul.list li,
ol.list li{
  position:relative;
  padding-left:24px;
  margin-bottom:12px;
}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.66em;
  width:8px;
  height:8px;
  background:var(--accent);
}
ol.list{counter-reset:paso;}
ol.list li{padding-left:34px;}
ol.list li::before{
  counter-increment:paso;
  content:counter(paso,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.05em;
  font-family:Georgia,'Times New Roman',serif;
  font-size:13px;
  letter-spacing:.1em;
  color:var(--accent-2);
}

.tight li{margin-bottom:8px;}

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

.figure-main{
  grid-column:3 / span 8;
  position:relative;
  margin:0;
}
.figure-main .corner{position:absolute;}
.figure-main .c-tl{left:-22px;top:-22px;}
.figure-main .c-tr{right:-22px;top:-22px;}
.figure-main .c-bl{left:-22px;bottom:26px;}
.figure-main .c-br{right:-22px;bottom:26px;}
.figure-main figcaption{max-width:60%;}

/* ---------- sección oscura ---------- */

.band--dark{
  background:var(--bg-dark);
  color:var(--ink-invert);
}
.band--dark h2,
.band--dark h3{color:var(--ink-invert);}
.band--dark .caption{color:#c4b39a;}
.band--dark .num{color:#8fb0c0;}
.band--dark a{color:#e0a184;border-bottom-color:rgba(224,161,132,.5);}
.band--dark a:focus-visible{outline-color:#e0a184;}
.band--dark ul.list li::before{background:#e0a184;}
.band--dark .rule::before{background:#e0a184;}
.band--dark .rule::after{background:#8fb0c0;}

.figure-detail{
  grid-column:1 / span 4;
  margin:0;
}
.dark-text{grid-column:6 / span 6;}

/* ---------- página interior ---------- */

.page-head{padding:calc(var(--step) - 28px) 0 34px;}
.page-head h1{
  grid-column:1 / span 9;
  font-size:clamp(32px,4.6vw,52px);
}
.page-head .page-sub{
  grid-column:1 / span 6;
  margin-top:26px;
  color:var(--ink-soft);
}

.about-body{position:relative;}
.about-marks{
  grid-column:1 / span 1;
  display:flex;
  flex-direction:column;
  gap:118px;
  padding-top:10px;
}
.about-text{grid-column:3 / span 7;}

.legal-text{grid-column:2 / span 8;}

.contact-box{
  margin-top:26px;
  border-left:2px solid var(--accent);
  padding:4px 0 4px 20px;
}
.contact-box p{margin-bottom:6px;}

/* ---------- pie ---------- */

.site-footer{
  background:var(--bg-dark);
  color:var(--ink-invert);
  padding:calc(var(--step) - 20px) 0 46px;
  margin-top:var(--step);
}
.site-footer .rule{margin-bottom:40px;}
.site-footer .rule::before{background:#e0a184;}
.site-footer .rule::after{background:#8fb0c0;}
.footer-main{grid-column:1 / span 7;}
.footer-side{grid-column:8 / span 5;}
.footer-brand{
  font-family:Georgia,'Times New Roman',serif;
  font-size:20px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.site-footer p{color:#d6c7b0;font-size:15px;}
.site-footer a{color:#e0a184;border-bottom-color:rgba(224,161,132,.5);}
.site-footer a:focus-visible{outline-color:#e0a184;}
.footer-nav ul{list-style:none;margin:0 0 18px;padding:0;}
.footer-nav li{margin-bottom:9px;}
.footer-nav a{
  font-size:14px;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.footer-note{
  grid-column:1 / span 12;
  margin-top:44px;
  padding-top:18px;
  border-top:1px solid rgba(244,236,224,.22);
  font-size:12px;
  letter-spacing:.05em;
  color:#b6a68f;
}

/* ---------- responsive ---------- */

@media (max-width:900px){
  :root{--step:60px;}
  .hero h1{grid-column:1 / span 12;}
  .hero-body,
  .hero-index{grid-column:1 / span 12;margin-top:30px;}
  .col,.col--1,.col--2,.col--3,.col--4{grid-column:1 / span 12;}
  .figure-main{grid-column:1 / span 12;}
  .figure-detail{grid-column:1 / span 7;}
  .dark-text{grid-column:1 / span 12;margin-top:34px;}
  .page-head h1,.page-head .page-sub{grid-column:1 / span 12;}
  .about-marks{display:none;}
  .about-text,.legal-text{grid-column:1 / span 12;}
  .footer-main,.footer-side{grid-column:1 / span 12;}
  .footer-side{margin-top:34px;}
}

@media (max-width:640px){
  :root{--step:50px;--gutter:14px;}
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  .hero-frame .corner{display:none;}
  .figure-main .corner{display:none;}
  .figure-detail{grid-column:1 / span 12;}
  .header-inner{display:block;}
  .site-nav{margin-top:14px;}
  .site-nav ul{gap:8px 18px;}
  .hero h1 .misprint::after{right:0;}
  .rule{max-width:100%;}
  .figure-main figcaption{max-width:100%;}
}