/* Pandestebro — hoja de estilo común */

:root{
  --paper:#fcfbf9;
  --paper-2:#efeeea;
  --ink:#141414;
  --muted:#6a6a66;
  --red:#c22a22;
  --green:#3c5a4a;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}

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

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

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

a{color:var(--red);text-decoration:underline;text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible{outline:3px solid var(--red);outline-offset:3px;}

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

h1,h2,h3{font-family:var(--serif);font-weight:700;}

h1{
  font-size:clamp(2.1rem,5.4vw,4rem);
  line-height:1.08;
  letter-spacing:-0.01em;
  margin:0;
}
h1 .line{display:block;}
h1 .line--red{color:var(--red);}

h2{
  font-size:clamp(1.45rem,2.5vw,2.05rem);
  line-height:1.2;
  margin:0 0 1.1rem;
}

h3{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:1.18rem;
  line-height:1.3;
  margin:1.9rem 0 .6rem;
}

/* ---------- utilidades tipográficas ---------- */

.caption,
.tag{
  font-family:var(--sans);
  font-size:12px;
  line-height:1.5;
  letter-spacing:.03em;
  color:var(--muted);
}

.tag{
  display:block;
  color:var(--green);
  margin-bottom:1.4rem;
}

.lead{font-size:1.12rem;line-height:1.55;}

.prose{max-width:62ch;}

ul.checks,
ul.plain{margin:1.2rem 0 1.4rem;padding-left:1.1rem;}
ul.checks li,
ul.plain li{margin-bottom:.6rem;}
ul.checks li::marker{color:var(--red);}
ul.plain li::marker{color:var(--green);}

ol.steps{margin:1.2rem 0 1.4rem;padding-left:1.4rem;}
ol.steps li{margin-bottom:.7rem;}
ol.steps li::marker{color:var(--green);font-family:var(--sans);font-size:13px;}

dl.terms{margin:1.2rem 0 0;}
dl.terms dt{font-style:italic;margin-top:1rem;}
dl.terms dd{margin:.2rem 0 0;color:inherit;}

/* ---------- cabecera ---------- */

.masthead{
  background:var(--paper);
  border-bottom:var(--rule,6px) solid var(--ink);
  border-bottom-width:6px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px 32px;
  padding:18px 44px;
}

.masthead .site{
  font-family:var(--serif);
  font-size:20px;
  font-weight:700;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
}
.masthead .site:hover{color:var(--red);}

.mainnav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.02em;
}
.mainnav a{color:var(--ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.mainnav a:hover{color:var(--red);border-bottom-color:var(--red);}
.mainnav a[aria-current="page"]{border-bottom-color:var(--green);}

/* ---------- rejilla de secciones ---------- */

.band{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--ink);
  border-bottom:6px solid var(--ink);
}

.band .cell{
  background:var(--paper);
  padding:72px 44px;
  min-width:0;
}

.band--alt .cell{background:var(--paper-2);}

.band--dark{background:var(--paper);}
.band--dark .cell{background:var(--ink);color:var(--paper);}
.band--dark h2,
.band--dark h3{color:var(--paper);}
.band--dark .caption{color:#b3b2ac;}
.band--dark .tag{color:#9fb2a8;}
.band--dark a{color:var(--paper);}
.band--dark a:focus-visible{outline-color:var(--paper);}
.band--dark ul.checks li::marker{color:#e0645c;}

.c3{grid-column:span 3;}
.c4{grid-column:span 4;}
.c5{grid-column:span 5;}
.c7{grid-column:span 7;}
.c8{grid-column:span 8;}
.c12{grid-column:1 / -1;}

/* ---------- portada: hero ---------- */

.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--ink);
  border-bottom:6px solid var(--ink);
}

.hero-title{
  grid-column:span 7;
  grid-row:span 2;
  background:var(--paper);
  padding:76px 44px 64px;
  display:flex;
  align-items:center;
}

.hero-lead{
  grid-column:span 5;
  background:var(--red);
  color:var(--paper);
  padding:56px 40px;
}
.hero-lead p{font-size:1.06rem;line-height:1.55;}

.hero-field{
  grid-column:span 5;
  background:var(--green);
  min-height:130px;
}

.hero-index{
  grid-column:1 / -1;
  background:var(--paper-2);
  padding:22px 44px;
  font-family:var(--sans);
  font-size:13px;
}
.hero-index ul{
  list-style:none;
  margin:.5rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
}
.hero-index .tag{margin:0;}
.hero-index a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:2px;}
.hero-index a:hover{color:var(--red);}

/* ---------- imágenes ---------- */

figure{margin:0;}

.figure-main img{
  border:5px solid var(--ink);
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
}

.figure-detail img{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border:5px solid var(--paper);
}
.figure-detail figcaption{margin-top:14px;}

/* ---------- página About: panel vertical ---------- */

.panel{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--ink);
  border-bottom:6px solid var(--ink);
}
.panel .field{
  grid-column:1 / -1;
  padding:74px 44px;
  background:var(--paper);
}
.panel .field > *{max-width:62ch;}
.panel .field--tall{padding:96px 44px;}
.panel .field--alt{background:var(--paper-2);}
.panel .field--dark{background:var(--ink);color:var(--paper);}
.panel .field--dark h2{color:var(--paper);}
.panel .field--dark .tag{color:#9fb2a8;}
.panel .field--dark a{color:var(--paper);}
.panel .field--dark a:focus-visible{outline-color:var(--paper);}
.panel .field--inner{padding:56px 44px;}

/* columna de texto de 7 de 12 en pantallas anchas */
@media (min-width:901px){
  .panel .field > .col7{max-width:none;width:58.33%;}
  .panel .field > .col7 > *{max-width:62ch;}
}

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

.pagefoot{
  border-top:6px solid var(--ink);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:6px;
  background:var(--ink);
}
.pagefoot > div{padding:42px 44px;min-width:0;}
.foot-name{grid-column:span 4;background:var(--paper-2);}
.foot-nav{grid-column:span 4;background:var(--paper);}
.foot-mail{grid-column:span 4;background:var(--green);color:var(--paper);}

.foot-name .name{font-family:var(--serif);font-size:22px;font-weight:700;margin:0 0 .5rem;}
.foot-name p{font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted);}

.foot-nav ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:13px;display:grid;gap:8px;}
.foot-nav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:2px;}
.foot-nav a:hover{color:var(--red);}

.foot-mail p{font-family:var(--sans);font-size:12px;line-height:1.6;}
.foot-mail .mail{font-family:var(--serif);font-size:19px;margin:0 0 .6rem;}
.foot-mail a{color:var(--paper);}
.foot-mail a:focus-visible{outline-color:var(--paper);}

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

@media (max-width:900px){
  body{font-size:17px;}
  .masthead{padding:16px 22px;}
  .band .cell{padding:52px 22px;}
  .c3,.c4,.c5,.c7,.c8{grid-column:1 / -1;}
  .hero-title{grid-column:1 / -1;grid-row:auto;padding:52px 22px 44px;}
  .hero-lead{grid-column:1 / -1;padding:40px 22px;}
  .hero-field{grid-column:1 / -1;min-height:76px;}
  .hero-index{padding:20px 22px;}
  .panel .field,
  .panel .field--tall,
  .panel .field--inner{padding:52px 22px;}
  .pagefoot > div{padding:36px 22px;}
  .foot-name,.foot-nav,.foot-mail{grid-column:1 / -1;}
}

@media (max-width:520px){
  .masthead{padding:14px 18px;}
  .band .cell{padding:42px 18px;}
  .hero-title{padding:44px 18px 36px;}
  .hero-lead{padding:32px 18px;}
  .hero-index{padding:18px 18px;}
  .panel .field,
  .panel .field--tall,
  .panel .field--inner{padding:42px 18px;}
  .pagefoot > div{padding:30px 18px;}
}