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

:root{
  --paper:#ffffff;
  --paper-alt:#eef0f3;
  --ink:#0b0c10;
  --ink-soft:#565c66;
  --coral:#ff4e36;
  --ultramar:#1b2ecc;
  --step:80px;
  --gap:24px;
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.7;
  overflow-x:hidden;
}

h1,h2,h3,nav,.sans,.rail,.tag,.num,figcaption,.foot__links,.brand{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

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

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

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

/* ---------- rejilla de 12 columnas ---------- */

.wrap{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding-inline:28px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.sec{padding-block:var(--step);}
.sec--alt{background:var(--paper-alt);}
.sec--blue{background:var(--ultramar);color:#ffffff;}
.sec--blue h2,.sec--blue h3{color:#ffffff;}
.sec--blue a{color:#ffffff;text-decoration-color:var(--coral);}
.sec--blue a:hover{color:var(--coral);}
.sec--blue .rail__num{color:#ffffff;}
.sec--blue .rail__scale{background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.55) 0 1px,transparent 1px 14px);}
.sec--blue .rail__tag{color:rgba(255,255,255,.78);}

/* ---------- columna de servicio (escala) ---------- */

.rail{grid-column:1 / 3;}
.rail__num{
  display:block;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--ultramar);
  margin:0 0 10px;
}
.rail__scale{
  width:22px;
  height:180px;
  background-image:repeating-linear-gradient(to bottom,var(--ink-soft) 0 1px,transparent 1px 14px);
  margin-bottom:10px;
}
.rail__tag{
  display:block;
  font-size:12px;
  line-height:1.45;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rail--sticky{position:sticky;top:32px;align-self:start;}

/* ---------- bloques de contenido ---------- */

.col-text{grid-column:3 / 10;}
.col-wide{grid-column:3 / 12;}
.col-narrow{grid-column:3 / 9;}

.sec h2{
  font-size:clamp(28px,3.4vw,42px);
  line-height:1.06;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 22px;
}
.sec h3{
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:700;
  margin:34px 0 12px;
}
p{margin:0 0 20px;}
p.lead{font-size:21px;line-height:1.6;}
.muted{color:var(--ink-soft);}

/* trazos separadores: rayas verticales de 24px */
.ticks{
  height:24px;
  background-image:repeating-linear-gradient(to right,var(--ultramar) 0 1px,transparent 1px 12px);
  margin:34px 0;
}
.ticks--coral{background-image:repeating-linear-gradient(to right,var(--coral) 0 1px,transparent 1px 12px);}
.ticks--light{background-image:repeating-linear-gradient(to right,rgba(255,255,255,.6) 0 1px,transparent 1px 12px);}
.ticks--short{max-width:120px;}

/* listas */
.list{
  grid-column:3 / 12;
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  column-gap:var(--gap);
  row-gap:14px;
}
.list li{
  position:relative;
  padding-left:22px;
  font-size:17px;
  line-height:1.6;
}
.list li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:11px;height:2px;
  background:var(--coral);
}
.list--single{grid-template-columns:1fr;}
.sec--blue .list li::before{background:var(--coral);}

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

.site-head{border-bottom:1px solid rgba(11,12,16,.14);}
.site-head .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px 28px;
  padding-block:20px;
}
.brand{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
  text-decoration:none;
}
.brand span{color:var(--coral);}
.brand:hover{color:var(--ink);}
.site-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;
  list-style:none;
  margin:0;padding:0;
}
.site-nav a{
  font-size:14px;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--ink-soft);
  padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{
  color:var(--ink);
  border-bottom-color:var(--coral);
}

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

.hero{padding-block:72px 64px;}
.hero__rail{grid-column:1 / 3;}
.hero__scale{
  width:100%;
  height:260px;
  background-image:repeating-linear-gradient(to bottom,var(--ink) 0 1px,transparent 1px 16px);
  background-size:26px 100%;
  background-repeat:no-repeat;
  margin-bottom:14px;
}
.hero__meta{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  display:block;
}
.hero__meta b{display:block;color:var(--ultramar);font-size:13px;letter-spacing:.14em;}
h1{
  grid-column:3 / 12;
  font-size:clamp(38px,6.4vw,80px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0 0 26px;
  max-width:16ch;
}
.hero__sub{grid-column:3 / 9;font-size:20px;line-height:1.62;margin:0;}
.hero__note{grid-column:9 / 13;font-size:15px;line-height:1.6;color:var(--ink-soft);margin:0;}

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

.figmain{margin:0;padding-bottom:var(--step);}
.figmain img{grid-column:4 / 13;width:100%;}
.figmain figcaption{
  grid-column:1 / 4;
  align-self:end;
  font-size:13px;
  line-height:1.5;
  color:var(--ink-soft);
  padding-bottom:4px;
}
.figmain figcaption b{display:block;color:var(--ultramar);letter-spacing:.12em;font-size:12px;margin-bottom:6px;}

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

.detail__text{grid-column:3 / 8;}
.detail__fig{grid-column:9 / 13;margin:0;}
.detail__fig img{width:100%;}
.detail__fig figcaption{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.8);
  margin-top:10px;
}

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

.site-foot{border-top:1px solid rgba(11,12,16,.14);padding-block:34px 40px;}
.foot__bay{
  grid-column:1 / 13;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px 28px;
}
.foot__name{font-weight:800;letter-spacing:-.02em;font-size:18px;font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0;padding:0;justify-content:center;font-size:14px;}
.foot__links a{text-decoration:none;color:var(--ink-soft);border-bottom:2px solid transparent;}
.foot__links a:hover{color:var(--ink);border-bottom-color:var(--coral);}
.foot__mail{justify-self:end;font-size:15px;}
.foot__rule{grid-column:1 / 13;height:1px;background:rgba(11,12,16,.14);margin:22px 0 12px;}
.foot__fine{grid-column:1 / 13;font-size:13px;line-height:1.6;color:var(--ink-soft);margin:0;}

/* ---------- páginas de texto ---------- */

.page-head{padding-block:64px 34px;}
.page-head h1{grid-column:3 / 12;font-size:clamp(32px,5vw,58px);margin-bottom:18px;}
.page-head .page-head__sub{grid-column:3 / 9;color:var(--ink-soft);font-size:18px;margin:0;}
.prose{grid-column:3 / 10;}
.prose h2{
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 16px;
}
.prose h2+p{margin-top:0;}
.prose h3{font-size:19px;font-weight:700;margin:30px 0 10px;}
.prose ul{margin:0 0 22px;padding-left:20px;}
.prose li{margin-bottom:10px;}
.prose .ticks{max-width:160px;margin:30px 0;}

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

@media (max-width:1020px){
  .col-text,.col-wide,.col-narrow,.prose{grid-column:3 / 13;}
  h1,.page-head h1{grid-column:3 / 13;}
  .hero__sub{grid-column:3 / 13;}
  .hero__note{grid-column:3 / 13;margin-top:22px;}
  .page-head .page-head__sub{grid-column:3 / 13;}
  .list{grid-column:3 / 13;}
  .figmain img{grid-column:3 / 13;}
  .figmain figcaption{grid-column:3 / 13;margin-top:12px;padding-bottom:0;}
  .detail__text{grid-column:3 / 13;}
  .detail__fig{grid-column:3 / 11;margin-top:36px;}
}

@media (max-width:720px){
  :root{--step:48px;--gap:16px;}
  body{font-size:17px;}
  .wrap{padding-inline:20px;}
  .rail,.hero__rail{grid-column:1 / 13;display:flex;align-items:center;gap:12px;margin-bottom:16px;}
  .rail--sticky{position:static;}
  .rail__scale,.hero__scale{
    width:64px;height:14px;margin:0;
    background-image:repeating-linear-gradient(to right,var(--ink-soft) 0 1px,transparent 1px 10px);
    background-size:auto;
  }
  .sec--blue .rail__scale{background-image:repeating-linear-gradient(to right,rgba(255,255,255,.6) 0 1px,transparent 1px 10px);}
  .rail__num{margin:0;}
  .rail__tag{font-size:11px;}
  .hero__meta b{display:inline;}
  .hero{padding-block:40px 44px;}
  .col-text,.col-wide,.col-narrow,.prose,h1,.page-head h1,.hero__sub,.hero__note,
  .list,.figmain img,.figmain figcaption,.detail__text,.detail__fig,.page-head .page-head__sub{grid-column:1 / 13;}
  h1{max-width:none;}
  .list{grid-template-columns:1fr;}
  .foot__bay{grid-template-columns:1fr;text-align:left;}
  .foot__links{justify-content:flex-start;}
  .foot__mail{justify-self:start;}
  .figmain{padding-bottom:var(--step);}
}