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

:root{
  --bg:#f2f0ea;
  --bg-alt:#e5e2d9;
  --ink:#1a1c22;
  --mute:#6e6b64;
  --red:#a82c26;
  --blue:#2a4a6b;
  --on-dark:#f2f0ea;
  --mute-dark:#c7c3ba;
  --bridge:5px;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:18px;
  line-height:1.9;
  overflow-x:hidden;
}

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

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

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

/* ---------- estructura de bandas y celdas ---------- */

.band{border-bottom:6px solid var(--ink)}

.inner{max-width:1260px;margin:0 auto;padding:0 24px}

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

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

.cell--alt{background:var(--bg-alt)}
.cell--red{background:var(--red);color:var(--on-dark)}
.cell--blue{background:var(--blue)}
.cell--dark{background:var(--ink);color:var(--on-dark)}
.cell--tight{padding:26px 44px}
.cell--flat{padding:0}

.cell--red a,.cell--dark a{color:var(--on-dark);text-decoration-color:var(--red)}
.cell--red :focus-visible,.cell--dark :focus-visible{outline-color:var(--on-dark)}

.c1-5{grid-column:1 / 5}
.c5-13{grid-column:5 / 13}
.c1-8{grid-column:1 / 8}
.c8-13{grid-column:8 / 13}
.c1-6{grid-column:1 / 6}
.c6-9{grid-column:6 / 9}
.c9-13{grid-column:9 / 13}
.c5-9{grid-column:5 / 9}
.full{grid-column:1 / 13}

.r1-3{grid-row:1 / 3}
.r1-2{grid-row:1 / 2}
.r2-3{grid-row:2 / 3}
.r3-4{grid-row:3 / 4}

.field{min-height:130px}

/* ---------- tipografía ---------- */

h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.3;
  margin:0 0 26px;
}

h1{font-size:clamp(29px,4vw,49px)}
h1 span{display:block}

h2{font-size:clamp(24px,2.4vw,31px)}
h3{font-size:20px;margin-bottom:16px}

p{margin:0 0 1.6em}
p:last-child{margin-bottom:0}

.lead{font-size:19px}

.num{
  display:block;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  letter-spacing:.16em;
  color:var(--blue);
  margin-bottom:18px;
}
.cell--dark .num{color:var(--mute-dark)}

.cap,figcaption{
  font-size:14px;
  line-height:1.7;
  color:var(--mute);
  margin:0;
}
.cell--dark .cap,.cell--dark figcaption{color:var(--mute-dark)}

.note{
  font-size:14px;
  line-height:1.8;
  color:var(--mute);
  border-top:2px solid var(--blue);
  padding-top:18px;
}

/* ---------- listas ---------- */

.list{list-style:none;margin:0;padding:0}
.list li{position:relative;padding-left:28px;margin-bottom:16px}
.list li:last-child{margin-bottom:0}
.list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.82em;
  width:14px;
  height:3px;
  background:var(--red);
}
.cell--dark .list li::before{background:var(--red)}

ol.list{counter-reset:paso}
ol.list li{counter-increment:paso;padding-left:38px}
ol.list li::before{
  content:counter(paso,decimal-leading-zero);
  background:none;
  width:auto;height:auto;
  top:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  color:var(--blue);
  letter-spacing:.08em;
}

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

.brand{
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  letter-spacing:.06em;
  margin:0;
}
.brand a{color:var(--ink);text-decoration:none}
.brand a:hover{text-decoration:underline;text-decoration-color:var(--red)}

.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;
}
.mainnav a{
  color:var(--ink);
  font-size:16px;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.mainnav a:hover{border-bottom-color:var(--red)}
.mainnav a[aria-current="page"]{border-bottom-color:var(--red);color:var(--red)}

/* navegación interna del hero */
.jump ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 28px;
}
.jump a{font-size:15px;color:var(--ink);text-decoration-color:var(--red)}

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

.figmain{margin:0;border:5px solid var(--ink);background:var(--bg-alt)}
.figmain img{width:100%}

.figdetail{margin:0}
.figdetail img{width:100%;border:5px solid var(--on-dark)}
.figdetail figcaption{margin-top:16px}

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

.sitefooter{border-top:6px solid var(--ink)}
.sitefooter .grid{gap:var(--bridge)}
.footnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}
.footnav a{font-size:16px;color:var(--ink);text-decoration-color:var(--red)}
.cell--dark .footnav a{color:var(--on-dark)}

/* ---------- adaptación ---------- */

@media (max-width:1000px){
  .cell{padding:52px 30px}
  .cell--tight{padding:22px 30px}
  .c1-5,.c1-8,.c1-6{grid-column:1 / 13}
  .c5-13,.c8-13,.c6-9,.c9-13,.c5-9{grid-column:1 / 13}
  .grid > *{grid-row:auto}
  .field{min-height:70px}
}

@media (max-width:620px){
  body{font-size:17px;line-height:1.85}
  .inner{padding:0 14px}
  .cell{padding:40px 22px}
  .cell--tight{padding:20px 22px}
  .mainnav ul{gap:8px 18px}
}

/* ---------- panel vertical de "Sobre el proyecto" ---------- */

.b7{max-width:735px}
.b7--right{margin-left:auto}
.panel{padding:88px 44px}

@media (max-width:1000px){
  .panel{padding:52px 30px}
  .b7--right{margin-left:0}
}

@media (max-width:620px){
  .panel{padding:40px 22px}
}