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

:root{
  --bg:#f2e8df;
  --bg-alt:#e6d6c8;
  --dark:#3d2b22;
  --text:#2a1e18;
  --muted:#7a6a5d;
  --accent:#a8502f;
  --accent-soft:#e0a07c;
  --olive:#6b7a4e;
  --olive-soft:#a9b487;
  --line:#3d2b22;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --max:1500px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  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(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.band--dark :focus-visible,.foot-cell--dark :focus-visible{outline-color:var(--accent-soft)}

h1,h2,h3{font-family:var(--serif);font-weight:400}
h1{font-size:clamp(32px,5vw,60px);line-height:1.05;letter-spacing:-.01em;margin:0}
h1 span{display:block}
h2{font-size:clamp(24px,2.9vw,34px);line-height:1.1;margin:0 0 22px}
h3{font-size:20px;line-height:1.2;margin:34px 0 8px}
p{margin:0 0 20px;max-width:64ch}
p:last-child{margin-bottom:0}
strong{font-weight:600}

.lead{font-size:19px;line-height:1.7}
.caption{font-size:13px;line-height:1.6;color:var(--muted);max-width:44ch;margin:0}
.num{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--olive);display:block;margin:0 0 14px}
.band--dark .num{color:var(--olive-soft)}

/* Enlace de salto */
.skip{position:absolute;left:-9999px;top:0;background:var(--dark);color:var(--bg);padding:12px 18px;z-index:10}
.skip:focus{left:0}

/* Cabecera */
.site-head{border-bottom:6px solid var(--line);background:var(--bg-alt)}
.head-in{max-width:var(--max);margin:0 auto;background:var(--line);display:flex;flex-wrap:wrap;gap:5px;align-items:stretch}
.brand{
  background:var(--bg);color:var(--text);text-decoration:none;
  font-family:var(--serif);font-size:22px;letter-spacing:.02em;
  padding:16px 26px;display:flex;align-items:center;
}
.brand:hover{color:var(--accent)}
.site-nav{flex:1 1 auto;display:flex}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:5px;background:var(--line);width:100%}
.site-nav a{
  display:flex;align-items:center;height:100%;
  background:var(--bg-alt);color:var(--text);text-decoration:none;
  font-size:15px;padding:14px 18px;
}
.site-nav a:hover{background:var(--accent);color:#fbf1ea}
.site-nav a[aria-current="page"]{background:var(--bg);box-shadow:inset 0 -5px 0 var(--accent)}

/* Bandas y rejilla */
.band{border-bottom:6px solid var(--line)}
.band--light{background:var(--bg)}
.band--alt{background:var(--bg-alt)}
.band--dark{background:var(--dark);color:var(--bg)}
.band--dark a{color:var(--accent-soft)}
.band--dark .caption{color:#c9b7a8}

.grid{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:5px;
  background:var(--line);
}
.cell{padding:72px 44px}
.cell--tight{padding:44px}
.cell--slim{padding:34px 44px}
.s3{grid-column:span 3}
.s4{grid-column:span 4}
.s5{grid-column:span 5}
.s7{grid-column:span 7}
.s8{grid-column:span 8}
.s12{grid-column:1 / -1}
.place-left8{grid-column:1 / span 8;grid-row:1}
.place-right4{grid-column:9 / span 4;grid-row:1}
.mt0{margin-top:0}
.c-light{background:var(--bg)}
.c-alt{background:var(--bg-alt)}
.c-dark{background:var(--dark);color:var(--bg)}
.c-accent{background:var(--accent);color:#fbf1ea}
.c-olive{background:var(--olive);color:#f2e8df}
.c-dark a{color:var(--accent-soft)}

/* Hero */
.hero{
  max-width:var(--max);margin:0 auto;
  display:grid;grid-template-columns:repeat(12,1fr);gap:5px;background:var(--line);
}
.hero-title{
  grid-column:span 7;grid-row:1 / 3;background:var(--bg);
  padding:76px 44px;display:flex;flex-direction:column;justify-content:flex-end;gap:26px;
}
.hero-kicker{font-size:13px;color:var(--muted);margin:0}
.hero-intro{grid-column:span 5;grid-row:1;background:var(--accent);color:#fbf1ea;padding:56px 44px}
.hero-intro p{max-width:38ch;margin-bottom:16px}
.hero-field{grid-column:span 5;grid-row:2;background:var(--olive);min-height:110px}
.hero-nav{grid-column:1 / -1;background:var(--bg-alt);padding:30px 44px}
.hero-nav h2{font-size:15px;font-family:var(--sans);margin:0 0 14px;color:var(--muted);font-weight:400}
.hero-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
.hero-nav a{color:var(--text);text-decoration:none;border-bottom:2px solid var(--accent);padding-bottom:2px;font-size:16px}
.hero-nav a:hover{color:var(--accent)}

/* Figuras */
.figure-cell{padding:0;background:var(--bg)}
.figure-cell figure{margin:0}
.figure-cell img{width:100%}
.fig-side{display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.detail-cell{padding:0;background:var(--dark)}
.detail-cell figure{margin:0}
.detail-cell figcaption{padding:22px 30px 30px}

/* Listas */
.marks{list-style:none;margin:0 0 20px;padding:0}
.marks li{position:relative;padding-left:26px;margin-bottom:12px;max-width:62ch}
.marks li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:9px;height:9px;background:var(--accent);
}
.band--dark .marks li::before,.c-dark .marks li::before{background:var(--accent-soft)}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{counter-increment:step;position:relative;padding-left:46px;margin-bottom:22px;max-width:62ch}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:0;
  font-family:var(--serif);font-size:20px;font-weight:700;color:var(--olive);
}
.steps h3{margin:0 0 4px;font-size:19px}
.steps p{margin:0}
.plain{margin:0;padding-left:22px}
.plain li{margin-bottom:10px;max-width:62ch}

.divider{border:0;border-top:2px solid var(--olive);margin:30px 0;max-width:120px}
.band--dark .divider{border-top-color:var(--olive-soft)}

/* Panel vertical de páginas interiores */
.panel{max-width:var(--max);margin:0 auto;background:var(--line);display:grid;gap:6px}
.panel-field{padding:72px 44px}
.panel-field--tall{padding:96px 44px}
.panel-field--short{padding:52px 44px}
.panel-inner{max-width:760px}
.panel-field h2{margin-top:0}

/* Pie */
.site-foot{border-top:6px solid var(--line);background:var(--bg-alt)}
.foot-grid{max-width:var(--max);margin:0 auto;background:var(--line);display:grid;grid-template-columns:4fr 4fr 4fr;gap:5px}
.foot-cell{padding:44px}
.foot-cell--name{background:var(--bg)}
.foot-cell--nav{background:var(--bg-alt)}
.foot-cell--mail{background:var(--dark);color:var(--bg)}
.foot-cell--mail a{color:var(--accent-soft)}
.foot-name{font-family:var(--serif);font-size:26px;margin:0 0 10px}
.foot-cell h2{font-size:15px;font-family:var(--sans);font-weight:400;color:var(--muted);margin:0 0 14px}
.foot-cell--mail h2{color:#c9b7a8}
.foot-cell ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-cell--nav a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:1px}
.foot-cell--nav a:hover{color:var(--accent)}
.foot-cell p{font-size:15px;max-width:40ch}
.foot-note{font-size:13px;color:var(--muted);margin:16px 0 0}

/* Adaptación */
@media (max-width:1080px){
  .cell{padding:56px 34px}
  .cell--tight,.cell--slim{padding:34px}
  .panel-field,.panel-field--tall,.panel-field--short{padding:56px 34px}
  .hero-title,.hero-intro{padding:48px 34px}
  .hero-nav{padding:26px 34px}
  .foot-cell{padding:34px}
}

@media (max-width:860px){
  body{font-size:16px}
  .grid{grid-template-columns:1fr}
  .grid > *{grid-column:1 / -1 !important;grid-row:auto !important}
  .hero{grid-template-columns:1fr}
  .hero-title,.hero-intro,.hero-field,.hero-nav{grid-column:1 / -1;grid-row:auto}
  .hero-field{min-height:64px}
  .cell{padding:44px 22px}
  .cell--tight,.cell--slim{padding:30px 22px}
  .panel-field,.panel-field--tall,.panel-field--short{padding:44px 22px}
  .hero-title{padding:52px 22px}
  .hero-intro{padding:38px 22px}
  .hero-nav{padding:24px 22px}
  .detail-cell figcaption{padding:20px 22px 26px}
  .foot-grid{grid-template-columns:1fr}
  .foot-cell{padding:30px 22px}
  .brand{padding:14px 22px;font-size:20px}
  .site-nav a{padding:12px 14px;font-size:14px}
  .fig-side{padding-top:28px}
}