/* Prudape — hoja de estilo única para todas las páginas */

:root{
  --bg:#ffffff;
  --bg-alt:#eef0f3;
  --blue:#1b2ecc;
  --ink:#0b0c10;
  --muted:#565c66;
  --accent:#ff4e36;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --step: 84px;
  --gutter: 24px;
  --pad: 32px;
}

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

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

body{
  margin:0;
  background:var(--bg);
  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(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
a:hover{color:var(--accent)}

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

.skip{
  position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;
  font-family:var(--sans);font-size:13px;z-index:20;
}
.skip:focus{left:12px;top:12px}

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

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

.band{padding:var(--step) 0}
.band--alt{background:var(--bg-alt)}
.band--blue{background:var(--blue);color:#fff}
.band--tight{padding-top:calc(var(--step) * .55)}

/* columnas de texto: 7 columnas, cada bloque una columna más a la derecha */
.col7{grid-column:1 / span 7}
.col7.o1{grid-column:2 / span 7}
.col7.o2{grid-column:3 / span 7}
.col7.o3{grid-column:4 / span 7}

/* ---------- cruces de registro ---------- */

.rm{
  position:absolute;
  width:22px;height:22px;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 5px, var(--accent) 5px, var(--accent) 6px, transparent 6.5px);
}
.rm::before,.rm::after{content:"";position:absolute;background:var(--blue)}
.rm::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.rm::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.band--blue .rm::before,.band--blue .rm::after{background:#fff}

.rm--tl{left:-11px;top:-11px}
.rm--tr{right:-11px;top:-11px}
.rm--bl{left:-11px;bottom:-11px}
.rm--br{right:-11px;bottom:-11px}

/* cruces alineadas al borde del área de contenido (sin desbordamiento lateral) */
.hero .grid > .rm--tl,.page-head .grid > .rm--tl{left:calc(var(--pad) - 11px)}
.hero .grid > .rm--tr,.page-head .grid > .rm--tr{right:calc(var(--pad) - 11px)}
.hero .grid > .rm--bl{left:calc(var(--pad) - 11px)}
.hero .grid > .rm--br{right:calc(var(--pad) - 11px)}

/* ---------- separadores ---------- */

.sep{grid-column:1 / span 7;margin:calc(var(--step) * .5) 0}
.sep span{display:block;height:2px;background:var(--accent);width:100%}
.sep span + span{background:var(--blue);margin-top:6px;margin-left:24px;width:calc(100% - 24px)}

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

.site-head{border-bottom:1px solid #d7dae0}
.site-head .grid{align-items:baseline;padding-top:18px;padding-bottom:18px}

.brand{
  grid-column:1 / span 3;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.02em;
  border:0;
}
.brand b{font-weight:700}
.brand .brand-sub{
  display:block;font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);
}

.site-nav{grid-column:5 / span 8;display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:flex-end}
.site-nav a{
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

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

.hero{position:relative;padding:calc(var(--step) * .95) 0 calc(var(--step) * .6)}
.hero .grid{position:relative}

.hero .kicker{
  grid-column:1 / span 12;
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 22px;
}

h1{
  grid-column:1 / span 9;
  font-size:clamp(2.35rem,5.4vw,4.15rem);
  line-height:1.06;
  font-weight:400;
  letter-spacing:-.015em;
  margin:0;
  position:relative;
}
h1 .line2{position:relative;display:inline-block}
h1 .line2::after{
  content:"";position:absolute;left:-6px;right:-10px;bottom:.22em;height:3px;
  background:var(--accent);
}

.hero-lead{grid-column:1 / span 5;margin-top:44px;color:var(--ink)}
.hero-lead p{margin:0 0 1.1em}

.hero-topics{grid-column:8 / span 4;margin-top:48px}
.hero-topics h2{
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin:0 0 14px;font-weight:600;
}
.hero-topics ul{list-style:none;margin:0;padding:0;font-size:16px;color:var(--muted)}
.hero-topics li{position:relative;padding-left:20px;margin-bottom:10px;line-height:1.45}
.hero-topics li::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--accent);
}

/* ---------- tipografía de contenido ---------- */

h2{
  font-size:clamp(1.5rem,2.6vw,2.05rem);
  line-height:1.2;font-weight:400;letter-spacing:-.01em;margin:0 0 20px;
}
h3{
  font-style:italic;font-weight:400;font-size:1.2rem;line-height:1.35;
  margin:2em 0 .5em;
}
p{margin:0 0 1.15em}
article p + p,.hero-lead p + p{text-indent:1.6em}
article p.note,.about-block p.note{text-indent:0}

.num{
  display:block;font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  color:var(--blue);margin-bottom:10px;text-transform:uppercase;
}
.band--blue .num{color:#fff;opacity:.75}

.lead{font-size:1.06rem}

ul.marks,ol.marks{margin:1.4em 0 1.6em;padding:0;list-style:none}
ul.marks li{position:relative;padding-left:22px;margin-bottom:12px}
ul.marks li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:2px;background:var(--accent)}
ol.marks{counter-reset:m}
ol.marks li{position:relative;padding-left:34px;margin-bottom:12px;counter-increment:m}
ol.marks li::before{
  content:counter(m,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--sans);font-size:11px;letter-spacing:.1em;color:var(--blue);
}

.note{color:var(--muted);font-size:16px}

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

.figure-main{grid-column:3 / span 8;margin:0;position:relative}
.figure-main .frame{position:relative}
.figure-main img{width:100%}
figcaption{
  font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);
  margin-top:16px;max-width:34em;
}
.band--blue figcaption{color:rgba(255,255,255,.72)}

/* ---------- sección de contraste con imagen de detalle ---------- */

.band--blue h2,.band--blue h3{color:#fff}
.band--blue a{color:#fff;border-bottom-color:var(--accent)}
.band--blue a:hover{color:var(--accent)}
.band--blue ul.marks li::before{background:#fff}

.figure-detail{grid-column:1 / span 4;margin:0;position:relative}
.figure-detail .frame{position:relative}
.detail-text{grid-column:7 / span 6}

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

.page-head{padding:calc(var(--step) * .8) 0 0;position:relative}
.page-head .grid{position:relative}
.page-head h1{
  grid-column:1 / span 9;
  font-size:clamp(2rem,4.2vw,3.2rem);
}
.page-head .kicker{
  grid-column:1 / span 12;
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue);margin:0 0 18px;
}
.page-head .standfirst{grid-column:1 / span 6;margin-top:32px;color:var(--muted)}

/* About: texto en 7 columnas desplazado 2 a la derecha, cruces en el margen izquierdo */
.about-block{grid-column:3 / span 7;position:relative}
.about-block .rm-side{position:absolute;left:-56px;top:6px}

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

.site-foot{background:var(--blue);color:#fff;padding:calc(var(--step) * .7) 0 calc(var(--step) * .5)}
.foot-rules{grid-column:1 / span 12;margin-bottom:40px}
.foot-rules span{display:block;height:2px;background:var(--accent);width:100%}
.foot-rules span + span{background:#fff;opacity:.55;margin-top:6px;margin-left:24px;width:calc(100% - 24px)}

.foot-a{grid-column:1 / span 7}
.foot-b{grid-column:9 / span 4}

.foot-a .foot-name{font-size:26px;margin:0 0 12px}
.foot-a p{color:rgba(255,255,255,.82);max-width:34em;margin:0}
.foot-b h2{
  font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 14px;color:rgba(255,255,255,.7);font-weight:600;
}
.foot-nav{list-style:none;margin:0 0 22px;padding:0;font-family:var(--sans);font-size:13px;line-height:2}
.foot-nav a{color:#fff;border-bottom:1px solid transparent}
.foot-nav a:hover{border-bottom-color:var(--accent);color:#fff}
.foot-mail{font-size:17px}
.foot-legal{
  grid-column:1 / span 12;margin-top:46px;font-family:var(--sans);font-size:12px;
  color:rgba(255,255,255,.65);border-top:1px solid rgba(255,255,255,.25);padding-top:16px;
}

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

@media (max-width:1000px){
  .figure-main{grid-column:2 / span 10}
  .hero-topics{grid-column:8 / span 5}
  .detail-text{grid-column:6 / span 7}
  .figure-detail{grid-column:1 / span 5}
  .about-block{grid-column:2 / span 10}
  .about-block .rm-side{left:-34px}
}

@media (max-width:860px){
  :root{--step:56px;--gutter:18px;--pad:24px}
  .brand{grid-column:1 / span 12}
  .site-nav{grid-column:1 / span 12;justify-content:flex-start;margin-top:12px;gap:10px 20px}
  h1,.page-head h1,.hero .kicker,.page-head .kicker,
  .hero-lead,.hero-topics,.page-head .standfirst,
  .col7,.col7.o1,.col7.o2,.col7.o3,.sep,
  .figure-main,.figure-detail,.detail-text,
  .about-block,.foot-a,.foot-b,.foot-rules,.foot-legal{grid-column:1 / span 12}
  .hero-topics{margin-top:34px}
  .hero-lead{margin-top:32px}
  .figure-detail{margin-bottom:34px;max-width:420px}
  .about-block .rm-side{display:none}
  .foot-b{margin-top:38px}
}

@media (max-width:520px){
  :root{--step:50px;--pad:20px}
  body{font-size:17px}
  h1{font-size:2rem;line-height:1.12}
  h1 .line2::after{height:2px}
  .rm{width:16px;height:16px}
  .rm--tl{left:-8px;top:-8px}
  .rm--tr{right:-8px;top:-8px}
  .rm--bl{left:-8px;bottom:-8px}
  .rm--br{right:-8px;bottom:-8px}
}