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

:root{
  --bg:#14161a;
  --bg-alt:#1d2026;
  --bg-invert:#e4e4e1;
  --text:#d8dbdf;
  --text-dim:#8a9098;
  --text-invert:#14161a;
  --amber:#e8a33d;
  --green:#4fb79a;
  --step:80px;
  --gutter:24px;
}

*{box-sizing:border-box;}

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

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

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

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

.rail{grid-column:1 / 3;}
.col-main{grid-column:3 / 10;}
.col-wide{grid-column:3 / 12;}
.col-full{grid-column:3 / 13;}

/* ---------- columna de servicio / escala ---------- */

.rail__tag{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.4;
  color:var(--green);
  margin:6px 0 10px;
}

.rail__scale{
  width:14px;
  min-height:120px;
  height:100%;
  background-image:
    repeating-linear-gradient(to bottom,var(--text-dim) 0 1px,transparent 1px 14px),
    linear-gradient(to bottom,rgba(138,144,152,.45),rgba(138,144,152,.45));
  background-size:14px 100%,1px 100%;
  background-position:left top,left top;
  background-repeat:repeat-y;
  opacity:.55;
}

.section--invert .rail__tag{color:#2f6f61;}
.section--invert .rail__scale{
  background-image:
    repeating-linear-gradient(to bottom,#14161a 0 1px,transparent 1px 14px),
    linear-gradient(to bottom,rgba(20,22,26,.5),rgba(20,22,26,.5));
  opacity:.5;
}

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

h1,h2,h3,.nav,.rail__tag,.meta,.mark{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

h1{
  font-size:clamp(38px,6.2vw,74px);
  line-height:.98;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0 0 28px;
}

h2{
  font-size:clamp(24px,3vw,34px);
  line-height:1.08;
  letter-spacing:-.02em;
  font-weight:800;
  margin:0 0 20px;
}

h3{
  font-size:19px;
  line-height:1.25;
  letter-spacing:-.01em;
  font-weight:700;
  margin:32px 0 10px;
}

p{margin:0 0 20px;max-width:66ch;}

.lead{
  font-size:21px;
  line-height:1.6;
  color:var(--text);
}

.meta{
  font-size:13px;
  line-height:1.5;
  color:var(--text-dim);
  letter-spacing:.02em;
}

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

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

.section--invert a:focus-visible{outline-color:#a86c11;}

/* ---------- separador de escala ---------- */

.rule{
  height:24px;
  margin:0 0 34px;
  background-image:repeating-linear-gradient(to right,var(--text-dim) 0 1px,transparent 1px 11px);
  opacity:.5;
}

.rule--tight{margin:26px 0 26px;max-width:220px;}
.section--invert .rule{background-image:repeating-linear-gradient(to right,#14161a 0 1px,transparent 1px 11px);opacity:.45;}

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

.site-header{border-bottom:1px solid rgba(138,144,152,.25);}

.site-header .wrap{
  padding-top:20px;
  padding-bottom:20px;
  row-gap:12px;
  align-items:baseline;
}

.brand{
  grid-column:1 / 4;
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--text);
  text-decoration:none;
}

.brand:hover{color:var(--amber);}

.nav{
  grid-column:4 / 13;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  justify-content:flex-end;
  font-size:15px;
  letter-spacing:.01em;
}

.nav a{color:var(--text-dim);text-decoration:none;}
.nav a:hover{color:var(--amber);}
.nav a[aria-current="page"]{color:var(--text);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:5px;}

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

section{padding-block:var(--step);}
.section--alt{background:var(--bg-alt);}
.section--invert{background:var(--bg-invert);color:var(--text-invert);}
.section--invert .meta{color:#5a6068;}
.section--invert a{color:#a2680c;}

.hero{padding-top:calc(var(--step) - 8px);padding-bottom:calc(var(--step) - 16px);}
.hero h1{grid-column:3 / 11;}
.hero .rail{grid-column:1 / 3;}
.hero .hero__body{grid-column:3 / 9;}

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

.figband{padding-block:0 var(--step);}
.figband figure{grid-column:4 / 13;margin:0;}
.figband img{width:100%;height:auto;display:block;}
.figband figcaption{margin-top:12px;}
.figband .figband__note{grid-column:1 / 4;align-self:end;padding-bottom:6px;}

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

.list-wide{grid-column:3 / 12;}

ul.checks,ol.steps{
  margin:0 0 8px;
  padding:0;
  list-style:none;
  columns:2;
  column-gap:40px;
}

ul.checks li,ol.steps li{
  break-inside:avoid;
  margin:0 0 16px;
  padding-left:20px;
  position:relative;
  font-size:17px;
  line-height:1.6;
  max-width:44ch;
}

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

ol.steps{counter-reset:st;}
ol.steps li{padding-left:32px;counter-increment:st;}
ol.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;
  left:0;
  top:.1em;
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--green);
}

.one-col{columns:1;}

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

.detail__fig{grid-column:3 / 7;margin:0;}
.detail__fig img{width:100%;height:auto;display:block;}
.detail__fig figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:#5a6068;
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
.detail__text{grid-column:8 / 13;}
.detail__text p{max-width:52ch;}

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

.contact__body{grid-column:3 / 10;}
.contact__body p{max-width:58ch;}

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

.page-head{padding-bottom:calc(var(--step) - 24px);}
.page-head h1{font-size:clamp(32px,4.6vw,54px);grid-column:3 / 11;}
.page-head .lead{grid-column:3 / 10;}
.prose{grid-column:3 / 10;}
.prose h2{margin-top:0;}
.prose section{padding-block:0 0;}

.stack > * + *{margin-top:0;}

.rail--sticky{position:sticky;top:24px;align-self:start;}

/* ---------- pie de página ---------- */

.site-footer{border-top:1px solid rgba(138,144,152,.25);padding-block:36px 44px;}
.footer-bay{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 32px;
  grid-column:1 / 13;
}
.footer-bay .fname{
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:800;
  font-size:17px;
  letter-spacing:-.02em;
}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;}
.footer-links a{color:var(--text-dim);text-decoration:none;}
.footer-links a:hover{color:var(--amber);}
.footer-mail{font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;}
.footer-line{grid-column:1 / 13;height:1px;background:rgba(138,144,152,.25);margin:26px 0 14px;}
.footer-note{grid-column:1 / 13;font-size:13px;line-height:1.6;color:var(--text-dim);max-width:70ch;
  font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

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

@media (max-width:1000px){
  .col-main,.col-wide,.col-full,.hero h1,.hero__body,.list-wide,.page-head h1,.page-head .lead,.prose,.contact__body{
    grid-column:3 / 13;
  }
  .detail__fig{grid-column:3 / 8;}
  .detail__text{grid-column:8 / 13;}
  .figband figure{grid-column:3 / 13;}
  .figband .figband__note{grid-column:1 / 3;}
}

@media (max-width:820px){
  :root{--step:48px;--gutter:16px;}
  body{font-size:17px;}
  .wrap{grid-template-columns:1fr;}
  .rail,.col-main,.col-wide,.col-full,.list-wide,.brand,.nav,.hero h1,.hero .rail,.hero__body,
  .figband figure,.figband .figband__note,.detail__fig,.detail__text,.page-head h1,.page-head .lead,
  .prose,.contact__body,.footer-bay,.footer-line,.footer-note{grid-column:1;}
  .rail{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
  .rail__tag{margin:0;}
  .rail__scale{
    width:100%;
    min-height:0;
    height:10px;
    background-image:repeating-linear-gradient(to right,var(--text-dim) 0 1px,transparent 1px 11px);
    background-size:auto;
  }
  .section--invert .rail__scale{background-image:repeating-linear-gradient(to right,#14161a 0 1px,transparent 1px 11px);}
  .rail--sticky{position:static;}
  .nav{justify-content:flex-start;gap:8px 18px;}
  ul.checks,ol.steps{columns:1;}
  .figband .figband__note{margin-top:12px;}
  .site-header .wrap{row-gap:10px;}
  .footer-bay{flex-direction:column;align-items:flex-start;}
  .lead{font-size:19px;}
}