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

:root{
  --paper:#f2ebe0;
  --paper-2:#e7d9c6;
  --paper-3:#dcc9b0;
  --dark:#4a2c1e;
  --ink:#241a14;
  --ink-soft:#6e5b4c;
  --accent:#c05a2b;
  --accent-2:#6b7a5a;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.9;
  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;}

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

/* ---------- retícula de 12 columnas ---------- */

.wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.band{padding:88px 52px;}
.band.paper{background:var(--paper);}
.band.paper-2{background:var(--paper-2);}
.band.dark{background:var(--dark);color:var(--paper);}

.band.dark h2,.band.dark h3{color:var(--paper);}
.band.dark .lead,.band.dark .caption{color:#d8c6b3;}
.band.dark a{color:#e9a67c;}
.band.dark a:focus-visible{outline-color:var(--paper);}

/* ritmo escalonado: cada banda entra una columna más que la anterior */
.text{grid-column:1 / span 6;}
.step-1 .text{grid-column:2 / span 6;}
.step-2 .text{grid-column:3 / span 6;}
.step-3 .text{grid-column:4 / span 6;}

.wide{grid-column:1 / span 9;}
.step-1 .wide{grid-column:2 / span 9;}
.step-2 .wide{grid-column:3 / span 9;}
.step-3 .wide{grid-column:4 / span 10;}

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

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

h1{font-size:clamp(31px,4.4vw,52px);letter-spacing:-.01em;}
h2{font-size:clamp(25px,2.7vw,33px);margin-bottom:14px;}
h3{font-size:21px;margin:36px 0 8px;}

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

.snum{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
  display:block;
  margin-bottom:10px;
}
.band.dark .snum{color:#a8b394;}

.caption{
  font-size:14px;
  line-height:1.6;
  color:var(--ink-soft);
  margin:14px 0 0;
}

.lead{font-size:19px;color:var(--ink);}

ul,ol{margin:0 0 28px;padding:0;list-style:none;}
li{padding-left:22px;position:relative;margin-bottom:10px;}
ul>li::before{
  content:"";
  position:absolute;
  left:0;top:15px;
  width:8px;height:1px;
  background:var(--accent);
}
ol{counter-reset:pasos;}
ol>li{counter-increment:pasos;}
ol>li::before{
  content:counter(pasos,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-size:14px;color:var(--accent-2);
  letter-spacing:.05em;
}
ol>li{padding-left:38px;}

/* ---------- cabecera en capas (mampostería) ---------- */

.layer-nav{background:var(--paper);padding:20px 52px;}
.layer-title{background:var(--paper-2);padding:104px 52px 56px;}
.layer-intro{background:var(--paper-3);padding:64px 52px;}

.nav-inner{
  max-width:1200px;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:10px 28px;
}
.brand{
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  margin-right:auto;
}
.brand:hover{text-decoration:underline;}
nav ul{display:flex;flex-wrap:wrap;gap:6px 24px;margin:0;}
nav li{padding:0;margin:0;}
nav li::before{display:none;}
nav a{
  font-size:15px;
  color:var(--ink-soft);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
}
nav a:hover,nav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent);}

.layer-title .wrap>*{grid-column:1 / span 10;}
.layer-title .kicker{
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);margin-bottom:22px;line-height:1.6;
}

.layer-intro .intro{grid-column:1 / span 6;}
.layer-intro .topics{grid-column:8 / span 5;}
.layer-intro .topics h2{font-size:19px;margin-bottom:12px;}
.layer-intro .topics li{font-size:16px;line-height:1.7;}

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

.figure-main{grid-column:4 / span 9;margin:0;}
.figure-main img{width:100%;}

/* ---------- imagen de detalle en la banda oscura ---------- */

.figure-detail{grid-column:1 / span 4;margin:0;}
.figure-detail img{width:100%;}
.detail-text{grid-column:6 / span 6;}

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

.site-footer{background:var(--dark);color:var(--paper);padding:72px 52px 56px;margin-top:0;}
.footer-name{
  font-family:var(--serif);
  font-size:clamp(42px,10vw,118px);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:0 0 56px;
  color:var(--paper);
}
.footer-cols{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:var(--gap);row-gap:40px;
}
.footer-name-wrap{max-width:1200px;margin:0 auto;}
.footer-cols h2{font-size:15px;font-family:var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#a8b394;margin:0 0 14px;line-height:1.6;}
.footer-cols>div{padding-top:18px;border-top:1px solid #6b7a5a;}
.footer-cols ul{margin:0;}
.footer-cols li{font-size:16px;margin-bottom:8px;padding-left:0;}
.footer-cols li::before{display:none;}
.footer-cols a{color:#e9a67c;}
.footer-cols p{font-size:16px;line-height:1.7;color:#d8c6b3;margin:0;}
.site-footer a:focus-visible{outline-color:var(--paper);}

/* ---------- composición de About ---------- */

.about-block .text{max-width:none;}

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

@media (max-width:960px){
  .band{padding:64px 32px;}
  .layer-nav{padding:18px 32px;}
  .layer-title{padding:72px 32px 44px;}
  .layer-intro{padding:52px 32px;}
  .site-footer{padding:56px 32px 44px;}
  .text,.step-1 .text,.step-2 .text,.step-3 .text,
  .wide,.step-1 .wide,.step-2 .wide,.step-3 .wide,
  .figure-main,.figure-detail,.detail-text,
  .layer-intro .intro,.layer-intro .topics,
  .layer-title .wrap>*{grid-column:1 / -1;}
  .layer-intro .topics{margin-top:36px;}
  .figure-detail{margin-bottom:32px;}
  .figure-main{margin-bottom:0;}
}

@media (max-width:760px){
  .footer-cols{grid-template-columns:1fr;}
}

@media (max-width:560px){
  body{font-size:17px;line-height:1.85;}
  .band{padding:52px 20px;}
  .layer-nav{padding:16px 20px;}
  .layer-title{padding:52px 20px 36px;}
  .layer-intro{padding:44px 20px;}
  .site-footer{padding:48px 20px 40px;}
  .footer-name{margin-bottom:40px;}
  nav ul{gap:4px 18px;}
}