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

:root{
  --bg:#ffffff;
  --bg-alt:#eef0f3;
  --blue:#1b2ecc;
  --ink:#0b0c10;
  --ink-2:#565c66;
  --accent:#ff4e36;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{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: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;}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.3;color:var(--ink);}
h1{font-size:2.35rem;margin:0 0 .6em;letter-spacing:-.005em;}
h2{font-size:1.7rem;margin:0 0 .7em;}
h3{font-size:1.18rem;margin:2.2em 0 .5em;}

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

/* ---------- estructura ---------- */

.wrap{max-width:1140px;margin:0 auto;padding:0 26px;}

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

.axis{position:relative;}
.axis::before{
  content:"";
  position:absolute;
  left:50%;top:0;bottom:0;
  width:1px;
  background:var(--accent);
  opacity:.45;
}

.r-a{padding:64px 0;}
.r-b{padding:80px 0;}
.r-c{padding:96px 0;}

.tone{background:var(--bg-alt);}
.contrast{background:var(--blue);color:#ffffff;}
.contrast h2,.contrast h3{color:#ffffff;}
.contrast .num{color:#ffffff;opacity:.75;}
.contrast .cap{color:#ffffff;opacity:.8;}
.contrast a{color:#ffffff;}
.contrast a:focus-visible{outline-color:#ffffff;}
.contrast ul li::marker{color:#ffffff;}

/* etiquetas, números de sección, pies de foto */
.num{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin:0 0 1.1em;
}
.cap{font-size:14px;line-height:1.6;color:var(--ink-2);margin:14px 0 0;}
.lead{font-size:1.12rem;}

/* arco separador */
.arc-row{display:grid;grid-template-columns:repeat(12,1fr);column-gap:28px;}
.arc{
  grid-column:5 / 9;
  height:46px;
  border:1px solid rgba(27,46,204,.4);
  border-bottom:0;
  border-radius:170px 170px 0 0;
}
.contrast .arc{border-color:rgba(255,255,255,.45);}

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

.site-header{border-bottom:1px solid #dfe2e7;background:var(--bg);}
.site-header .wrap{padding-top:20px;padding-bottom:20px;}
.brand{
  display:block;
  text-align:center;
  font-family:var(--serif);
  font-size:1.25rem;
  letter-spacing:.03em;
  color:var(--ink);
  text-decoration:none;
}
.brand:hover{text-decoration:none;}
.mainnav{margin-top:14px;}
.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:6px 0;
}
.mainnav li{display:flex;align-items:center;}
.mainnav li + li::before{
  content:"";
  width:1px;height:13px;
  background:#c6cad2;
  margin:0 16px;
}
.mainnav a{
  font-size:15px;
  color:var(--ink-2);
  text-decoration:none;
  padding:2px 0;
}
.mainnav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px;}
.mainnav a[aria-current="page"]{color:var(--ink);border-bottom:2px solid var(--accent);}

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

.hero{padding:66px 0 0;}
.hero h1{grid-column:3 / 11;text-align:center;}
.hero .num{grid-column:1 / 13;text-align:center;}
.hero-lead{grid-column:4 / 10;text-align:center;color:var(--ink-2);font-size:1.12rem;}
.hero-side{margin-top:44px;font-size:15px;line-height:1.8;color:var(--ink-2);}
.hero-side-l{grid-column:2 / 5;}
.hero-side-r{grid-column:9 / 12;}
.hero-side b{display:block;font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--ink);margin-bottom:.35em;}

/* imagen principal centrada */
.fig-main{grid-column:1 / 13;margin:52px 0 0;display:flex;flex-direction:column;align-items:center;}
.fig-main img{width:100%;max-width:680px;}
.fig-main .cap{max-width:560px;text-align:center;}

/* ---------- composiciones de contenido ---------- */

.col-center{grid-column:4 / 10;}
.col-wide{grid-column:3 / 11;}
.col-left7{grid-column:1 / 8;}
.col-left7-in{grid-column:2 / 9;}
.pair-l{grid-column:2 / 6;}
.pair-r{grid-column:8 / 12;}
.head-center{grid-column:2 / 12;text-align:center;}

ul.plain,ol.plain{margin:0 0 1.5em;padding:0 0 0 1.1em;}
ul.plain li,ol.plain li{margin:0 0 .75em;padding-left:.35em;}
ul.plain li::marker{color:var(--accent);}
ol.plain li::marker{color:var(--blue);font-family:var(--serif);}

.checklist{list-style:none;margin:0 0 1.5em;padding:0;}
.checklist li{position:relative;padding-left:26px;margin:0 0 .8em;}
.checklist li::before{
  content:"";
  position:absolute;left:0;top:.85em;
  width:10px;height:1px;
  background:var(--accent);
}

dl.terms{margin:0;}
dl.terms dt{font-family:var(--serif);font-size:1.1rem;margin:1.6em 0 .25em;}
dl.terms dt:first-child{margin-top:0;}
dl.terms dd{margin:0;color:var(--ink-2);}

/* sección contrastada con imagen de detalle */
.fig-detail{grid-column:2 / 7;margin:0;}
.detail-text{grid-column:8 / 13;}
.contrast .lead{color:rgba(255,255,255,.9);}

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

.site-footer{padding:56px 0 64px;border-top:0;}
.site-footer .arc-row{margin-bottom:38px;}
.footer-inner{text-align:center;}
.footer-brand{font-family:var(--serif);font-size:1.2rem;letter-spacing:.03em;margin:0 0 16px;}
.footer-nav ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;}
.footer-nav li{display:flex;align-items:center;}
.footer-nav li + li::before{content:"";width:1px;height:13px;background:#c6cad2;margin:0 14px;}
.footer-nav a{font-size:15px;color:var(--ink-2);text-decoration:none;}
.footer-nav a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px;}
.footer-mail{margin:0 0 10px;font-size:16px;}
.footer-note{margin:0;font-size:14px;line-height:1.7;color:var(--ink-2);max-width:620px;margin-left:auto;margin-right:auto;}

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

@media (max-width:900px){
  body{font-size:17px;line-height:1.85;}
  h1{font-size:1.95rem;}
  h2{font-size:1.45rem;}
  .grid,.arc-row{grid-template-columns:1fr;column-gap:0;}
  .axis::before{display:none;}
  .hero{padding-top:44px;}
  .hero h1,.hero .num,.hero-lead,.hero-side,
  .col-center,.col-wide,.col-left7,.col-left7-in,
  .pair-l,.pair-r,.head-center,
  .fig-main,.fig-detail,.detail-text{grid-column:1 / -1;}
  .hero-side{margin-top:30px;}
  .hero-side-r{margin-top:26px;}
  .fig-main{margin-top:36px;}
  .detail-text{margin-top:30px;}
  .r-a{padding:44px 0;}
  .r-b{padding:52px 0;}
  .r-c{padding:56px 0;}
  .arc{grid-column:1 / -1;max-width:230px;margin:0 auto;height:38px;}
  .mainnav li + li::before{margin:0 11px;}
  .site-footer{padding:44px 0 52px;}
}

@media (max-width:560px){
  .wrap{padding:0 18px;}
  h1{font-size:1.72rem;}
  .mainnav ul,.footer-nav ul{gap:4px 0;}
}