/* Bromazu — hoja de estilo única */

:root{
  --paper:#f4f2ed;
  --paper-alt:#e6e3dc;
  --ink:#16151a;
  --muted:#6d6a63;
  --blue:#1f3fa8;
  --red:#c0452e;
  --step:84px;
  --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(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

/* --- retícula de 12 columnas --- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:24px;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 40px;
}

/* desplazamiento progresivo de las columnas de texto */
.c7-0{grid-column:1 / span 7}
.c7-1{grid-column:2 / span 7}
.c7-2{grid-column:3 / span 7}
.c7-3{grid-column:4 / span 7}

/* --- cruces de registro --- */
.reg{
  position:absolute;
  width:21px;
  height:21px;
  background:radial-gradient(circle at center,transparent 4.5px,var(--red) 4.5px,var(--red) 5.5px,transparent 5.6px);
}
.reg::before,
.reg::after{content:"";position:absolute;background:var(--blue)}
.reg::before{left:0;top:10px;width:21px;height:1px}
.reg::after{top:0;left:10px;width:1px;height:21px}
.reg--tl{top:-11px;left:-11px}
.reg--tr{top:-11px;right:-11px}
.reg--bl{bottom:-11px;left:-11px}
.reg--br{bottom:-11px;right:-11px}

/* --- cabecera y navegación --- */
.top{padding:26px 0 0}
.top .grid{align-items:baseline;row-gap:10px}
.brand{
  grid-column:1 / span 4;
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
}
.brand span{display:block;font-family:var(--sans);font-size:12px;color:var(--muted);line-height:1.5}
.nav{grid-column:6 / span 7;display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:flex-end}
.nav a{
  font-size:14px;
  color:var(--ink);
  text-decoration:none;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
}
.nav a:hover{border-bottom-color:var(--blue);color:var(--blue)}
.nav a[aria-current="page"]{border-bottom-color:var(--red)}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:8px;top:8px;z-index:5;background:var(--blue);color:var(--paper);padding:8px 14px}

a{color:var(--blue)}
a:focus-visible,
.nav a:focus-visible,
.brand:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.dark a:focus-visible{outline-color:var(--paper)}

/* --- portada --- */
.hero{padding:56px 0 0}
.hero .grid{position:relative;row-gap:0}
.hero-frame{grid-column:1 / -1;position:relative;padding:34px 0 30px}
.hero h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(33px,5vw,56px);
  line-height:1.1;
  margin:0 0 34px;
  width:75%;
}
.hero h1 .ln{display:block;position:relative}
.hero h1 .ln--2{}
.hero h1 .ln--2::after{
  content:"";
  position:absolute;
  left:-6px;
  right:-4%;
  top:62%;
  height:2px;
  background:var(--blue);
}
.hero-cols{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;row-gap:28px}
.hero-lead{grid-column:1 / span 5;margin:0}
.hero-lead p{margin:0 0 14px}
.hero-lead p:last-child{margin-bottom:0}
.topics{grid-column:9 / span 4;margin:0;padding:0;list-style:none;font-size:15px;line-height:1.65}
.topics li{position:relative;padding-left:18px;margin-bottom:9px}
.topics li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;background:var(--blue)}
.topics .topics-title{
  padding-left:0;
  font-size:12px;
  color:var(--red);
  margin-bottom:14px;
  letter-spacing:.04em;
}
.topics .topics-title::before{display:none}

/* --- imagen principal --- */
.plate{margin:var(--step) 0 0}
.plate .grid{row-gap:0}
.figure-main{grid-column:3 / span 8;position:relative;margin:0}
.figure-main img{display:block;width:100%;height:auto}
figcaption{
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin-top:14px;
  max-width:52ch;
}
figcaption b{color:var(--red);font-weight:400;font-style:normal}

/* --- secciones de texto --- */
.band{padding-top:var(--step)}
.band .grid{row-gap:0}
.tx{position:relative;padding-top:30px}
.tx::before,
.tx::after{content:"";position:absolute;top:0;height:2px}
.tx::before{left:0;right:0;background:var(--blue)}
.tx::after{left:24px;right:-24px;top:7px;background:var(--red)}
.tx h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:28px;
  line-height:1.25;
  margin:0 0 18px;
}
.tx h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:19px;
  line-height:1.4;
  margin:30px 0 8px;
}
.num{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  color:var(--red);
  margin-bottom:10px;
  letter-spacing:.06em;
}
.tx p{margin:0 0 16px;max-width:68ch}
.tx p:last-child{margin-bottom:0}
.tx ul,.tx ol{margin:0 0 18px;padding-left:0;list-style:none;max-width:66ch}
.tx ol{counter-reset:paso}
.tx li{position:relative;padding-left:22px;margin-bottom:10px}
.tx ul li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:7px;background:var(--blue)}
.tx ol li{padding-left:30px}
.tx ol li::before{
  counter-increment:paso;
  content:counter(paso);
  position:absolute;
  left:0;
  top:0;
  font-size:13px;
  color:var(--red);
}
.tx .aside{font-size:15px;color:var(--muted);max-width:60ch}

/* --- secciones alternas --- */
.band--alt{background:var(--paper-alt);padding-top:var(--step);padding-bottom:var(--step)}
.band--alt + .band,
.dark + .band{padding-top:0}
.band--alt + .dark{margin-top:0}

/* --- sección contrastada --- */
.dark{
  background:var(--ink);
  color:var(--paper);
  margin-top:var(--step);
  padding:var(--step) 0;
}
.dark .grid{row-gap:34px;align-items:start}
.dark .tx::before{background:var(--red)}
.dark .tx::after{background:var(--blue)}
.dark .num{color:#e08a76}
.dark figcaption{color:#a7a29a}
.dark figcaption b{color:#e08a76}
.dark a{color:#a9bdf2}
.figure-detail{grid-column:1 / span 4;margin:0}
.figure-detail img{display:block;width:100%;height:auto}
.dark .tx{grid-column:6 / span 6}
.dark .tx p{max-width:60ch}
.dark .tx ul li::before{background:var(--red)}

/* --- contacto --- */
.mailbox{
  font-family:var(--serif);
  font-size:22px;
  margin:6px 0 0;
}

/* --- páginas interiores --- */
.page-head{padding:52px 0 0}
.page-head .grid{row-gap:0}
.page-head .head-in{grid-column:2 / span 8;position:relative;padding:26px 0 0}
.page-head h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,4.4vw,48px);
  line-height:1.12;
  margin:0 0 16px;
}
.page-head .kicker{font-size:12px;color:var(--red);margin:0 0 12px;letter-spacing:.05em}
.page-head .sub{font-size:16px;color:var(--muted);margin:0;max-width:58ch}

/* composición de "Sobre el proyecto": texto desplazado y cruces en el margen */
.about-block{position:relative}
.about-block .tx{grid-column:3 / span 7}
.about-block .mark{
  grid-column:1;
  position:relative;
  align-self:start;
  height:100%;
  min-height:40px;
}
.about-block .mark .reg{top:30px;left:0}

/* --- pie --- */
.foot{background:var(--ink);color:var(--paper);padding:0 0 46px}
.foot-rules{padding-top:var(--step)}
.foot-rules .grid{row-gap:0}
.foot-rules .lines{grid-column:1 / -1;position:relative;height:9px}
.foot-rules .lines::before,
.foot-rules .lines::after{content:"";position:absolute;left:0;right:0;height:2px}
.foot-rules .lines::before{top:0;background:var(--blue)}
.foot-rules .lines::after{top:7px;left:24px;right:0;background:var(--red)}
.foot .grid{row-gap:30px}
.foot-main{padding-top:38px}
.foot-a{grid-column:1 / span 7}
.foot-a .name{font-family:var(--serif);font-size:24px;margin:0 0 10px}
.foot-a p{margin:0;font-size:15px;color:#a7a29a;max-width:52ch}
.foot-b{grid-column:8 / span 5}
.foot-nav{list-style:none;margin:0 0 20px;padding:0;font-size:15px}
.foot-nav li{margin-bottom:7px}
.foot-nav a{color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(244,242,237,.3)}
.foot-nav a:hover{border-bottom-color:#e08a76;color:#f0c8bd}
.foot-mail{font-family:var(--serif);font-size:18px;margin:0}
.foot-mail a{color:#a9bdf2}
.foot-note{grid-column:1 / -1;font-size:12px;color:#83807a;margin:22px 0 0}

/* --- responsive --- */
@media (max-width:1000px){
  .grid{padding:0 28px;column-gap:18px}
  .figure-main{grid-column:2 / span 10}
  .hero h1{width:90%}
}

@media (max-width:820px){
  :root{--step:50px}
  body{font-size:16px;line-height:1.75}
  .grid{padding:0 20px;column-gap:0}
  .brand,.nav,
  .c7-0,.c7-1,.c7-2,.c7-3,
  .figure-main,.figure-detail,
  .dark .tx,.about-block .tx,
  .page-head .head-in,
  .foot-a,.foot-b,.foot-note{grid-column:1 / -1}
  .nav{justify-content:flex-start;gap:6px 18px;margin-top:6px}
  .hero{padding-top:34px}
  .hero h1{width:100%}
  .hero h1 .ln--2::after{right:0;left:0}
  .hero-cols{grid-template-columns:1fr;row-gap:26px}
  .hero-lead,.topics{grid-column:1 / -1}
  .tx::after{right:0;left:18px}
  .tx h2{font-size:24px}
  .about-block .mark{display:none}
  .figure-detail{margin-bottom:6px}
  .foot-rules .lines::after{left:18px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}