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

:root{
  --lienzo:#faf7f0;
  --lienzo-alt:#dde2e4;
  --oscuro:#1f4a4a;
  --tinta:#14120f;
  --tinta-suave:#6c6659;
  --cadmio:#d2402f;
  --ocre:#a97f18;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --paso:80px;
}

*{box-sizing:border-box;}

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

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

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

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

a:focus-visible,
:focus-visible{
  outline:2px dashed var(--cadmio);
  outline-offset:3px;
}

/* ---------- rejilla ---------- */

.env{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.rejilla{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:0 28px;
}

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

h1,h2,h3{font-family:var(--serif);font-weight:normal;line-height:1.05;margin:0;}

h1{font-size:clamp(2.3rem,5.6vw,4.05rem);letter-spacing:-0.015em;}
h2{font-size:clamp(1.55rem,2.9vw,2.15rem);letter-spacing:-0.01em;}
h3{font-size:1.24rem;line-height:1.25;}

p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

.pie-txt{
  font-size:13px;
  line-height:1.55;
  color:var(--tinta-suave);
  font-family:var(--sans);
}

.num{
  font-family:var(--serif);
  font-size:13px;
  letter-spacing:0.14em;
  color:var(--ocre);
  display:block;
  margin-bottom:14px;
}

.entradilla{font-size:1.06rem;}

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

.cabecera{
  padding:22px 0 18px;
  border-bottom:1px dashed var(--tinta-suave);
}

.cabecera .env{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 28px;
}

.marca{
  font-family:var(--serif);
  font-size:1.32rem;
  letter-spacing:0.02em;
  color:var(--tinta);
  text-decoration:none;
}
.marca:hover{text-decoration:none;color:var(--cadmio);}

.nav-lista{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-size:15px;
}

.nav-lista a{
  color:var(--tinta);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px dashed transparent;
}
.nav-lista a:hover{color:var(--cadmio);border-bottom-color:var(--cadmio);}
.nav-lista a[aria-current="page"]{border-bottom-color:var(--cadmio);color:var(--cadmio);}

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

.hero{padding:56px 0 var(--paso);}

.hero-marco{
  border:2px dashed var(--cadmio);
  padding:40px 24px 34px;
}

.hero-texto{align-items:start;}

.hero-titulo{grid-column:1 / span 8;}

.hero-entrada{
  grid-column:9 / span 4;
  border-left:2px dashed var(--ocre);
  padding-left:24px;
  font-size:1.02rem;
}

.hero-figura{
  grid-column:7 / span 6;
  margin:52px 0 0;
  align-self:end;
}

.hero-figura img,
.marco-img img{width:100%;}

.marco-img{
  border:2px dashed var(--tinta-suave);
  padding:12px;
}

.hero-figura figcaption,
figure figcaption{
  margin-top:10px;
  font-size:13px;
  line-height:1.5;
  color:var(--tinta-suave);
  max-width:42ch;
}

.hero-lateral{
  grid-column:1 / span 5;
  margin-top:52px;
  align-self:end;
  border-top:1px solid var(--tinta-suave);
  padding-top:18px;
}

/* ---------- secciones ---------- */

.seccion{padding:var(--paso) 0;}
.seccion-alt{background:var(--lienzo-alt);}

.costura-doble{
  border-top:1px solid var(--tinta-suave);
  position:relative;
}
.costura-doble::before{
  content:"";
  position:absolute;
  left:0;right:0;top:5px;
  border-top:1px dashed var(--tinta-suave);
}

.bloque-7{
  grid-column:1 / span 7;
  border-right:1px dashed var(--tinta-suave);
  padding-right:32px;
}

.bloque-5-d{
  grid-column:8 / span 5;
  padding-left:0;
}

.bloque-5-i{
  grid-column:1 / span 5;
  border-left:1px dashed var(--tinta-suave);
  padding-left:28px;
}

.bloque-7-d{
  grid-column:6 / span 7;
  text-align:left;
  padding-left:32px;
  border-left:1px dashed var(--tinta-suave);
}

.bloque-8{grid-column:1 / span 8;}

.sep{
  border:0;
  border-top:1px dashed var(--tinta-suave);
  margin:34px 0;
}

/* listas prácticas */

.lista{
  list-style:none;
  margin:0;
  padding:0;
}
.lista li{
  position:relative;
  padding-left:26px;
  margin-bottom:12px;
}
.lista li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--cadmio);
}

.lista-num{
  list-style:none;
  counter-reset:paso;
  margin:0;
  padding:0;
}
.lista-num li{
  counter-increment:paso;
  position:relative;
  padding-left:44px;
  margin-bottom:18px;
}
.lista-num li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;
  left:0;top:2px;
  font-family:var(--serif);
  font-size:14px;
  letter-spacing:.08em;
  color:var(--ocre);
}

.ficha{
  border:1px dashed var(--tinta-suave);
  padding:22px 24px;
  margin-top:28px;
}
.ficha h3{margin-bottom:10px;}

/* ---------- sección contrastada ---------- */

.contraste{
  background:var(--oscuro);
  color:var(--lienzo);
  padding:var(--paso) 0;
}
.contraste h2,.contraste h3{color:var(--lienzo);}
.contraste .num{color:#e2c268;}
.contraste a{color:#f0b8ae;}
.contraste .lista li::before{color:#f0b8ae;}
.contraste figcaption,.contraste .pie-txt{color:#c3d0cf;}
.contraste .sep{border-top-color:#4d7373;}

.contraste-fig{
  grid-column:1 / span 5;
  margin:0;
}
.contraste-fig .marco-img{border-color:#4d7373;}

.contraste-txt{
  grid-column:7 / span 6;
}

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

.pagina{padding:52px 0 var(--paso);}

.pagina-cab{
  border:2px dashed var(--cadmio);
  padding:32px 24px 28px;
  margin-bottom:56px;
}
.pagina-cab h1{max-width:20ch;}
.pagina-cab p{margin-top:18px;max-width:62ch;color:var(--tinta-suave);}

.texto-largo h2{margin-top:0;}
.texto-largo h3{margin:28px 0 10px;}

.bloque-sobre{margin-bottom:64px;}
.bloque-sobre:last-child{margin-bottom:0;}

.sobre-8{
  grid-column:1 / span 8;
  border-left:1px dashed var(--tinta-suave);
  border-bottom:1px dashed var(--tinta-suave);
  padding:0 0 30px 28px;
}
.sobre-6{
  grid-column:7 / span 6;
  border-right:1px dashed var(--tinta-suave);
  padding:0 28px 0 0;
}
.sobre-7{
  grid-column:1 / span 7;
  border-top:1px dashed var(--tinta-suave);
  border-right:1px dashed var(--tinta-suave);
  padding:30px 28px 0 0;
}

.legal-cuerpo{grid-column:1 / span 8;}
.legal-lateral{
  grid-column:10 / span 3;
  border-left:1px dashed var(--tinta-suave);
  padding-left:22px;
  font-size:14px;
  line-height:1.7;
  color:var(--tinta-suave);
}
.legal-cuerpo h2{margin:44px 0 12px;}
.legal-cuerpo h2:first-of-type{margin-top:0;}

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

.pie{
  background:var(--lienzo-alt);
  border-top:1px solid var(--tinta-suave);
  position:relative;
  padding:16px 0 32px;
  margin-top:var(--paso);
}
.pie::before{
  content:"";
  position:absolute;
  left:0;right:0;top:5px;
  border-top:1px dashed var(--tinta-suave);
}

.pie-marco{
  border:1px dashed var(--tinta-suave);
  padding:32px 24px;
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:28px;
}

.pie-izq{grid-column:1 / span 6;}
.pie-der{grid-column:8 / span 5;}

.pie-izq .marca{display:inline-block;margin-bottom:10px;}
.pie-nav{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  font-size:15px;
}
.pie-nav a{color:var(--tinta);text-decoration:none;border-bottom:1px dashed var(--tinta-suave);}
.pie-nav a:hover{color:var(--cadmio);border-bottom-color:var(--cadmio);}

.pie-correo{font-size:15px;}

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

@media (max-width:900px){
  :root{--paso:56px;}
  .hero-titulo{grid-column:1 / span 12;}
  .hero-entrada{
    grid-column:1 / span 12;
    border-left:0;
    border-top:2px dashed var(--ocre);
    padding-left:0;
    padding-top:22px;
    margin-top:26px;
  }
  .hero-figura{grid-column:1 / span 12;margin-top:36px;}
  .hero-lateral{grid-column:1 / span 12;margin-top:32px;}
  .bloque-7,.bloque-5-d,.bloque-5-i,.bloque-7-d,.bloque-8,
  .contraste-fig,.contraste-txt,
  .sobre-8,.sobre-6,.sobre-7,
  .legal-cuerpo,.legal-lateral,
  .pie-izq,.pie-der{
    grid-column:1 / span 12;
  }
  .bloque-7{border-right:0;padding-right:0;}
  .bloque-5-d{margin-top:30px;}
  .bloque-5-i,.bloque-7-d{border-left:0;padding-left:0;}
  .bloque-5-i{margin-top:30px;}
  .sobre-8,.sobre-6,.sobre-7{
    border:0;
    border-left:1px dashed var(--tinta-suave);
    padding:0 0 0 20px;
  }
  .bloque-sobre{margin-bottom:44px;}
  .contraste-txt{margin-top:32px;}
  .legal-lateral{
    border-left:0;
    border-top:1px dashed var(--tinta-suave);
    padding:22px 0 0;
    margin-top:36px;
  }
  .pie-der{margin-top:26px;}
}

@media (max-width:640px){
  :root{--paso:48px;}
  body{font-size:16px;}
  .env{padding:0 18px;}
  .hero{padding:34px 0 var(--paso);}
  .hero-marco{padding:26px 16px;}
  .pagina-cab{padding:24px 16px;}
  .pie-marco{padding:24px 18px;}
  .nav-lista{gap:6px 16px;font-size:14px;}
}