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

:root{
  --bg:#ffffff;
  --bg-alt:#eef0f3;
  --bg-contrast:#1b2ecc;
  --ink:#0b0c10;
  --ink-2:#565c66;
  --on-contrast:#ffffff;
  --accent:#ff4e36;
  --accent-2:#1b2ecc;
  --serif: Georgia, "Times New Roman", serif;
  --sans: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --step: 84px;
  --gap: 24px;
}

*{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.72;
  overflow-x:hidden;
}

img{max-width:100%}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent)}
a:hover{color:var(--ink)}

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

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

.wrap{
  max-width:1240px;
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
  align-items:start;
}

.label{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:0 0 14px;
  line-height:1.5;
}

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

.site-head{border-bottom:1px solid var(--ink);background:var(--bg)}

.site-head .wrap{
  padding-top:20px;
  padding-bottom:18px;
  align-items:baseline;
}

.brand{
  grid-column:1 / span 4;
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.01em;
  color:var(--ink);
  border-bottom:0;
}
.brand:hover{color:var(--accent)}

.site-nav{grid-column:6 / span 7}

.site-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px 26px;
  justify-content:flex-end;
}

.site-nav a{
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-2);
  border-bottom:1px solid transparent;
}
.site-nav a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent-2)}

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

.hero .wrap{padding-top:70px;padding-bottom:70px}

.hero-main{grid-column:1 / span 8}

h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:52px;
  line-height:1.12;
  letter-spacing:-.01em;
  margin:0 0 26px;
}

.lede{
  width:75%;
  margin:0;
  font-size:19px;
  line-height:1.66;
  color:var(--ink);
}

.lede + .lede{margin-top:16px;color:var(--ink-2);font-size:17px}

/* columna-indicador */

.pointer{grid-column:10 / span 3}

.pointer ol{
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--ink);
}

.pointer li{
  display:flex;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #d7dae0;
  font-size:14px;
  line-height:1.45;
}

.pointer .n{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--accent-2);
  padding-top:2px;
  min-width:20px;
}

.pointer a{color:var(--ink-2);border-bottom:0}
.pointer a:hover{color:var(--accent)}

/* ---------- secciones ---------- */

.sec{padding:var(--step) 0}
.sec--alt{background:var(--bg-alt)}

.sec-body{
  grid-column:1 / span 7;
  grid-row:1;
  border-top:1px solid var(--ink);
  padding-top:20px;
}

.sec-mark{
  grid-column:10 / span 3;
  grid-row:1;
  padding-top:20px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-2);
}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:32px;
  line-height:1.22;
  margin:0 0 18px;
}

h3{
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:22px;
  line-height:1.3;
  margin:34px 0 12px;
}

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

.sec-body ul,
.sec-body ol.plain{
  margin:0 0 18px;
  padding:0;
  list-style:none;
}

.sec-body ul li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}

.sec-body ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:9px;
  height:1px;
  background:var(--accent);
}

.note{
  color:var(--ink-2);
  font-size:15.5px;
  line-height:1.65;
}

/* ---------- figura principal ---------- */

.fig-main{
  grid-column:1 / span 8;
  grid-row:2;
  margin:44px 0 0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  column-gap:var(--gap);
}

.fig-main img{
  grid-column:1 / span 8;
  width:100%;
  height:auto;
  display:block;
}

.fig-main figcaption{
  grid-column:6 / span 3;
  margin-top:12px;
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink-2);
  border-top:1px solid #c9ccd3;
  padding-top:8px;
}

/* ---------- sección contrastada ---------- */

.sec--contrast{
  background:var(--bg-contrast);
  color:var(--on-contrast);
}

.sec--contrast .sec-body{
  grid-column:6 / span 5;
  border-top-color:rgba(255,255,255,.55);
  color:var(--on-contrast);
}

.sec--contrast .sec-mark{
  grid-column:11 / span 2;
  color:rgba(255,255,255,.72);
}

.sec--contrast .fig-detail{
  grid-column:1 / span 4;
  grid-row:1;
  margin:0;
}

.sec--contrast .fig-detail img{
  width:100%;
  height:auto;
  display:block;
}

.sec--contrast .fig-detail figcaption{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.55;
  color:rgba(255,255,255,.78);
}

.sec--contrast a{color:#ffd9d2;border-bottom-color:#ffd9d2}
.sec--contrast a:hover{color:#ffffff}

.sec--contrast ul li::before{background:#ff9c8c}
.sec--contrast .note{color:rgba(255,255,255,.82)}

.sec--contrast :focus-visible{outline-color:#ffffff}

/* ---------- contacto ---------- */

.contact-line{
  font-family:var(--serif);
  font-size:24px;
  line-height:1.4;
  margin:0 0 10px;
}

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

.site-foot{padding:70px 0 56px;background:var(--bg)}

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

.foot-name{
  grid-column:1 / span 5;
  font-family:var(--serif);
  font-size:28px;
  line-height:1.25;
  margin:0;
}

.foot-index{grid-column:8 / span 5}

.foot-index ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 24px;
  font-size:14px;
}

.foot-index a{color:var(--ink-2);border-bottom:0}
.foot-index a:hover{color:var(--accent)}

.foot-rule{
  grid-column:1 / span 12;
  height:1px;
  background:var(--ink);
  margin:28px 0 22px;
}

.foot-mail{
  grid-column:1 / span 5;
  font-family:var(--serif);
  font-size:19px;
  margin:0;
}

.foot-note{
  grid-column:8 / span 5;
  margin:0;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-2);
}

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

.page .wrap{padding-top:64px;padding-bottom:0}

.page-head{grid-column:1 / span 8}
.page-head h1{font-size:44px;margin-bottom:20px}

.doc{padding:var(--step) 0 var(--step)}
.doc .wrap{padding-top:0}

.doc-body{
  grid-column:1 / span 7;
  border-top:1px solid var(--ink);
  padding-top:22px;
}

.doc-side{
  grid-column:10 / span 3;
  padding-top:22px;
}

.doc-side ul{list-style:none;margin:0;padding:0;border-top:1px solid #d7dae0}
.doc-side li{
  padding:9px 0;
  border-bottom:1px solid #d7dae0;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.doc-side li:last-child{text-transform:none;letter-spacing:0;font-size:14px}

.doc-body h2{font-size:27px;margin-top:40px}
.doc-body h2:first-child{margin-top:0}

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

@media (max-width:1080px){
  h1{font-size:44px}
  .lede{width:85%}
  .sec-body,.doc-body{grid-column:1 / span 8}
  .fig-main{grid-column:1 / span 9;grid-template-columns:repeat(9,1fr)}
  .fig-main img{grid-column:1 / span 9}
  .fig-main figcaption{grid-column:6 / span 4}
  .sec--contrast .sec-body{grid-column:6 / span 6}
  .sec--contrast .sec-mark{grid-column:12 / span 1}
}

@media (max-width:860px){
  :root{--step:50px;--gap:16px}

  body{font-size:16.5px}

  .wrap{
    grid-template-columns:1fr;
    padding:0 20px;
  }

  .wrap > *{grid-column:1 / -1 !important;grid-row:auto !important}

  .brand{font-size:20px}
  .site-head .wrap{gap:10px}
  .site-nav ul{justify-content:flex-start;gap:6px 18px}

  .hero .wrap{padding-top:34px;padding-bottom:40px}

  .pointer{order:-1;margin-bottom:30px}
  .pointer ol{
    display:flex;
    flex-wrap:wrap;
    gap:0 18px;
    border-top:1px solid var(--ink);
    border-bottom:1px solid #d7dae0;
    padding:8px 0;
  }
  .pointer li{border-bottom:0;padding:4px 0;font-size:13.5px}

  h1{font-size:32px}
  .lede{width:100%;font-size:17.5px}
  h2{font-size:25px}
  h3{font-size:20px}

  .fig-main{display:block;margin-top:28px}
  .fig-main figcaption{margin-top:10px}

  .sec--contrast .fig-detail{margin-bottom:26px}
  .sec--contrast .fig-detail img{max-width:420px}

  .foot-top{display:block}
  .foot-name{font-size:24px;margin-bottom:18px}
  .foot-index ul{grid-template-columns:1fr;gap:5px}
  .foot-rule{margin:22px 0 18px}
  .foot-mail{margin-bottom:14px}

  .page-head h1{font-size:32px}
  .doc-side{margin-top:34px}
  .contact-line{font-size:20px}
}