/* Panantu — hoja de estilos general */

:root{
  --bg:#eef0f2;
  --bg-alt:#dfe3e7;
  --bg-dark:#1b2733;
  --ink:#151a20;
  --muted:#636d78;
  --on-dark:#eef0f2;
  --accent:#2c4a7c;
  --accent2:#a35a2a;
  --maxw:1180px;
  --gap:24px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  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}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;text-decoration:none}

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0}
h1{font-size:52px;line-height:1.12;letter-spacing:-.01em}
h2{font-size:28px;line-height:1.25;margin-bottom:14px}
h3{font-size:19px;line-height:1.35;margin:32px 0 8px}

p{margin:0 0 18px}
p:last-child{margin-bottom:0}

.caption,figcaption{font-size:12px;line-height:1.6;color:var(--muted);font-family:var(--sans)}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

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

/* ---------- pespuntes ---------- */

.stitch-h{
  height:2px;
  border:0;
  margin:28px 0;
  background:repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 22px);
}
.stitch-h--copper{background:repeating-linear-gradient(90deg,var(--accent2) 0 10px,transparent 10px 20px)}

.edge{position:relative}
.edge--right::after,
.edge--left::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:repeating-linear-gradient(180deg,var(--accent) 0 12px,transparent 12px 22px);
}
.edge--right::after{right:calc(var(--gap) / -2 - 1px)}
.edge--left::after{left:calc(var(--gap) / -2 - 1px)}

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

.site-header{padding:26px 0 22px}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 34px}

.brand{
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:.04em;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--accent2);
  padding-bottom:2px;
}
.brand:hover{border-bottom-color:var(--accent)}

.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 26px;margin:0;padding:0}
.site-nav a{font-size:15px;color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:1px dashed var(--muted)}
.site-nav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--accent);border-bottom:2px solid var(--accent)}

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

.hero{padding:16px 0 72px}
.hero__frame{position:relative;padding:48px 34px 40px}
.hero__frame::before{
  content:"";
  position:absolute;
  inset:24px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--accent) 0 16px,transparent 16px 28px) top left/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--accent) 0 16px,transparent 16px 28px) bottom left/100% 2px no-repeat,
    repeating-linear-gradient(180deg,var(--accent) 0 16px,transparent 16px 28px) top left/2px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--accent) 0 16px,transparent 16px 28px) top right/2px 100% no-repeat;
}

.hero__title{grid-column:1 / span 8}
.hero__lead{grid-column:9 / span 4;align-self:end;font-size:16px;color:var(--ink)}
.hero__lead .kicker{display:block;font-size:12px;color:var(--accent2);letter-spacing:.08em;margin-bottom:10px}

.hero__index{grid-column:1 / span 5;margin-top:56px;align-self:start}
.hero__index h2{font-size:16px;font-family:var(--sans);color:var(--muted);font-weight:400;margin-bottom:12px}
.hero__index ol{margin:0;padding-left:0;list-style:none;counter-reset:idx}
.hero__index li{counter-increment:idx;font-size:15px;line-height:1.6;padding:5px 0;border-bottom:1px dashed rgba(99,109,120,.5)}
.hero__index li::before{content:counter(idx,decimal-leading-zero);color:var(--accent2);font-size:12px;margin-right:12px}
.hero__index a{color:var(--ink);text-decoration:none}
.hero__index a:hover{color:var(--accent);text-decoration:underline}

.hero__fig{grid-column:7 / span 6;margin:40px 0 0;position:relative;padding:12px}
.hero__fig::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--accent2) 0 12px,transparent 12px 22px) top left/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--accent2) 0 12px,transparent 12px 22px) bottom left/100% 2px no-repeat,
    repeating-linear-gradient(180deg,var(--accent2) 0 12px,transparent 12px 22px) top left/2px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--accent2) 0 12px,transparent 12px 22px) top right/2px 100% no-repeat;
}
.hero__fig figcaption{margin-top:12px;max-width:44ch}

/* ---------- bandas de contenido ---------- */

.band{padding:80px 0}
.band--alt{background:var(--bg-alt)}
.band__inner{position:relative}
.band__inner::before{
  content:"";
  position:absolute;
  top:-40px;
  left:0;
  right:0;
  height:7px;
  background:
    linear-gradient(var(--ink),var(--ink)) top left/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--accent2) 0 10px,transparent 10px 18px) bottom left/100% 1px no-repeat;
  opacity:.55;
}

.num{display:block;font-size:12px;color:var(--accent2);letter-spacing:.1em;margin-bottom:8px}

.block--wide{grid-column:1 / span 7}
.block--narrow{grid-column:8 / span 5;text-align:left}

.block ul,.block ol{margin:16px 0 18px;padding-left:0;list-style:none}
.block li{position:relative;padding-left:22px;margin-bottom:9px;line-height:1.7}
.block li::before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:12px;
  height:2px;
  background:var(--accent);
}
.block ol{counter-reset:step}
.block ol li{counter-increment:step}
.block ol li::before{
  content:counter(step) ".";
  background:none;
  width:auto;
  height:auto;
  top:0;
  color:var(--accent);
  font-size:14px;
}

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

.band--dark{background:var(--bg-dark);color:var(--on-dark)}
.band--dark h2,.band--dark h3{color:var(--on-dark)}
.band--dark .num{color:#c8834f}
.band--dark figcaption{color:#a9b4c0}
.band--dark .band__inner::before{
  background:
    linear-gradient(#8d99a6,#8d99a6) top left/100% 1px no-repeat,
    repeating-linear-gradient(90deg,#c8834f 0 10px,transparent 10px 18px) bottom left/100% 1px no-repeat;
  opacity:.8;
}
.band--dark .block li::before{background:#c8834f}
.band--dark .edge--left::after{background:repeating-linear-gradient(180deg,#5c6c7c 0 12px,transparent 12px 22px)}

.dark-fig{grid-column:1 / span 5;margin:0;position:relative;padding:10px}
.dark-fig::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,#c8834f 0 12px,transparent 12px 22px) top left/100% 2px no-repeat,
    repeating-linear-gradient(90deg,#c8834f 0 12px,transparent 12px 22px) bottom left/100% 2px no-repeat,
    repeating-linear-gradient(180deg,#c8834f 0 12px,transparent 12px 22px) top left/2px 100% no-repeat,
    repeating-linear-gradient(180deg,#c8834f 0 12px,transparent 12px 22px) top right/2px 100% no-repeat;
}
.dark-fig figcaption{margin-top:12px}
.dark-text{grid-column:7 / span 6}

/* ---------- páginas interiores ---------- */

.page-head{padding:20px 0 8px}
.page-head h1{font-size:42px;grid-column:1 / span 8}
.page-head .page-lead{grid-column:1 / span 7;margin-top:20px;color:var(--muted);font-size:16px}

.doc{padding:24px 0 72px}
.doc__body{grid-column:1 / span 7}
.doc__body h2{margin-top:44px;font-size:25px}
.doc__body h2:first-of-type{margin-top:12px}
.doc__aside{grid-column:9 / span 4;align-self:start;font-size:14px;color:var(--muted);margin-top:12px}

.doc__body ul{margin:16px 0 18px;padding-left:0;list-style:none}
.doc__body li{position:relative;padding-left:22px;margin-bottom:8px}
.doc__body li::before{content:"";position:absolute;left:0;top:.75em;width:12px;height:2px;background:var(--accent)}

/* About: tres bloques de anchura distinta */
.about-block{margin-bottom:64px;position:relative}
.about-block:last-child{margin-bottom:0}
.about-block h2{margin-bottom:12px}
.about-1{grid-column:1 / span 8}
.about-2{grid-column:6 / span 6}
.about-3{grid-column:3 / span 7}
.about-1::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  right:calc(var(--gap) / -2 - 1px);
  width:2px;
  background:repeating-linear-gradient(180deg,var(--accent) 0 12px,transparent 12px 22px);
}
.about-2::before,.about-3::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--gap) / -2 - 1px);
  width:2px;
  background:repeating-linear-gradient(180deg,var(--accent2) 0 12px,transparent 12px 22px);
}

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

.site-footer{background:var(--bg-alt);padding:0 0 40px;margin-top:0}
.site-footer .foot-rule{
  height:7px;
  background:
    linear-gradient(var(--ink),var(--ink)) top left/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--accent2) 0 10px,transparent 10px 18px) bottom left/100% 1px no-repeat;
  opacity:.55;
  margin-bottom:40px;
}
.foot-frame{position:relative;padding:36px 30px}
.foot-frame::before{
  content:"";
  position:absolute;
  inset:16px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 22px) top left/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--accent) 0 12px,transparent 12px 22px) bottom left/100% 2px no-repeat,
    repeating-linear-gradient(180deg,var(--accent) 0 12px,transparent 12px 22px) top left/2px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--accent) 0 12px,transparent 12px 22px) top right/2px 100% no-repeat;
}
.foot-left{grid-column:1 / span 6}
.foot-right{grid-column:8 / span 5}
.foot-name{font-family:var(--serif);font-size:22px;margin:0 0 10px}
.foot-left p{font-size:15px;color:var(--muted);max-width:46ch}
.foot-right ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-right a{font-size:15px}
.foot-mail{font-size:15px}
.foot-note{grid-column:1 / span 12;margin-top:28px;font-size:12px;color:var(--muted)}

/* ---------- adaptación a pantallas medianas y pequeñas ---------- */

@media (max-width:960px){
  h1{font-size:40px}
  .page-head h1{font-size:34px}
  h2{font-size:25px}
  .hero__title,.hero__lead,.hero__index,.hero__fig,
  .block--wide,.block--narrow,.dark-fig,.dark-text,
  .doc__body,.doc__aside,.page-head h1,.page-head .page-lead,
  .about-1,.about-2,.about-3,
  .foot-left,.foot-right{grid-column:1 / -1}
  .edge--right::after,.edge--left::after,
  .about-2::before,.about-3::before,.about-1::after{display:none}
  .hero__index{margin-top:36px}
  .hero__fig{margin-top:32px}
  .dark-text{margin-top:32px}
  .doc__aside{margin-top:36px;padding-top:20px;border-top:1px dashed var(--muted)}
  .about-block{margin-bottom:48px}
  .band{padding:48px 0}
  .band__inner::before{top:-24px}
  .hero{padding:8px 0 40px}
  .hero__frame{padding:36px 24px 30px}
  .hero__frame::before{inset:14px}
  .foot-right{margin-top:28px}
}

@media (max-width:560px){
  body{font-size:16px}
  h1{font-size:31px}
  .page-head h1{font-size:28px}
  h2{font-size:22px}
  .wrap{padding:0 18px}
  .hero__frame{padding:28px 16px 24px}
  .hero__frame::before{inset:8px}
  .foot-frame{padding:28px 18px}
  .foot-frame::before{inset:8px}
  .site-header .wrap{gap:12px}
  .site-nav ul{gap:6px 18px}
}