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

:root{
  --bg:#eceff1;
  --bg-alt:#dde3e7;
  --bg-base:#ccd5da;
  --dark:#1f2a33;
  --ink:#151c22;
  --muted:#606d78;
  --on-dark:#eceff1;
  --accent:#a2472c;
  --accent-2:#3f6b86;
  --maxw:1280px;
  --gap:24px;
  --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(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;margin:0}
h1{font-size:clamp(32px,5.6vw,64px);letter-spacing:-.015em}
h2{font-size:clamp(24px,3.1vw,34px);margin-bottom:20px}
h3{font-size:clamp(19px,2vw,22px);line-height:1.2;margin:32px 0 12px}

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

a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

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

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

.grid{
  max-width:var(--maxw);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

.band{padding:88px 52px;--step:1}
.band--a{background:var(--bg)}
.band--b{background:var(--bg-alt)}
.band--base{background:var(--bg-base)}
.band--dark{background:var(--dark);color:var(--on-dark)}
.band--dark h2,.band--dark h3{color:var(--on-dark)}
.band--dark a{color:var(--on-dark);text-decoration-color:#8fa6b5}

.s0{--step:1}
.s1{--step:2}
.s2{--step:3}
.s3{--step:4}

.col{grid-column:var(--step) / span 6}

.eyebrow{
  font-size:13px;
  line-height:1.5;
  color:var(--accent-2);
  margin:0 0 14px;
}
.band--dark .eyebrow{color:#8fa6b5}

.lead{font-size:19px}

/* ---------- cabecera de portada: tres hiladas ---------- */

.course-nav{background:var(--bg-alt);padding:18px 52px}
.course-title{background:var(--bg);padding:104px 52px 52px;display:flex;align-items:flex-end;min-height:44vh}
.course-title .grid{width:100%}
.course-title h1{grid-column:1 / span 9}
.course-base{background:var(--bg-base);padding:56px 52px 72px}
.course-base .intro{grid-column:1 / span 6}
.course-base .topics{grid-column:8 / span 5;margin:0;padding:0;list-style:none;font-size:15px;color:var(--ink)}
.course-base .topics li{padding:9px 0;border-top:1px solid rgba(21,28,34,.18)}
.course-base .topics li:last-child{border-bottom:1px solid rgba(21,28,34,.18)}

/* cabecera de páginas interiores */
.course-title--inner{min-height:0;padding:88px 52px 48px}
.course-title--inner h1{grid-column:1 / span 8}

/* ---------- navegación ---------- */

.nav .grid{align-items:center}
.nav ul{
  grid-column:1 / -1;
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:8px 26px;
  font-size:15px;
}
.nav a{color:var(--ink);text-decoration:none;padding:4px 0;display:inline-block}
.nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--accent)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}

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

.band--image{padding-top:0;padding-bottom:64px;background:var(--bg-base)}
.figure-main{grid-column:4 / span 9;margin:0}
.figure-main img{width:100%}
figcaption{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin-top:12px;
  max-width:56ch;
}
.band--dark figcaption{color:#93a4b0}

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

.list{list-style:none;margin:0 0 22px;padding:0}
.list li{position:relative;padding-left:26px;margin-bottom:11px}
.list li::before{
  content:"";position:absolute;left:0;top:14px;
  width:13px;height:2px;background:var(--accent);
}
.band--dark .list li::before{background:#c4795f}

.steps{list-style:none;margin:0 0 22px;padding:0;counter-reset:paso}
.steps li{position:relative;padding-left:42px;margin-bottom:14px;counter-increment:paso}
.steps li::before{
  content:counter(paso,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-size:13px;color:var(--accent-2);
}
.band--dark .steps li::before{color:#8fa6b5}

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

.detail-figure{grid-column:1 / span 4;margin:0}
.detail-figure img{width:100%}
.detail-text{grid-column:6 / span 6}

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

.contact-mail{font-family:var(--serif);font-size:clamp(22px,3vw,30px);line-height:1.2}

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

.footer{background:var(--dark);color:var(--on-dark);padding:72px 52px 56px;margin:0}
.footer-name{
  font-family:var(--serif);
  font-size:clamp(44px,12.5vw,168px);
  line-height:.92;
  letter-spacing:-.02em;
  margin:0 0 56px;
  grid-column:1 / -1;
}
.footer .grid{row-gap:0}
.fcol{grid-column:span 4;font-size:15px;line-height:1.7}
.fcol::before{content:"";display:block;width:52px;height:2px;background:var(--accent-2);margin-bottom:18px}
.fcol h2{font-family:var(--sans);font-size:13px;font-weight:400;color:#93a4b0;margin:0 0 12px;line-height:1.5}
.fcol ul{list-style:none;margin:0;padding:0}
.fcol li{margin-bottom:7px}
.footer a{color:var(--on-dark);text-decoration-color:#8fa6b5}
.footer p{margin:0 0 10px}
.footer .note{color:#93a4b0;font-size:13px;margin-top:16px}

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

@media (max-width:1000px){
  .band{padding:64px 36px}
  .course-nav{padding:16px 36px}
  .course-title{padding:72px 36px 40px;min-height:0}
  .course-title--inner{padding:64px 36px 36px}
  .course-base{padding:44px 36px 56px}
  .footer{padding:56px 36px 44px}
  .col,.course-title h1,.course-title--inner h1{grid-column:1 / -1}
  .course-base .intro{grid-column:1 / -1}
  .course-base .topics{grid-column:1 / -1;margin-top:28px}
  .figure-main{grid-column:1 / -1}
  .detail-figure{grid-column:1 / span 7}
  .detail-text{grid-column:1 / -1;margin-top:28px}
  .fcol{grid-column:span 6}
}

@media (max-width:640px){
  body{font-size:16px}
  .band{padding:48px 20px}
  .course-nav{padding:14px 20px}
  .course-title{padding:52px 20px 32px}
  .course-title--inner{padding:48px 20px 28px}
  .course-base{padding:36px 20px 44px}
  .band--image{padding-bottom:44px}
  .footer{padding:48px 20px 40px}
  .grid{grid-template-columns:1fr;column-gap:0}
  .col,.figure-main,.detail-figure,.detail-text,.fcol,
  .course-title h1,.course-title--inner h1,
  .course-base .intro,.course-base .topics,.footer-name{grid-column:1 / -1}
  .fcol{margin-bottom:34px}
  .fcol:last-child{margin-bottom:0}
  .nav ul{gap:6px 18px;font-size:15px}
  .footer-name{margin-bottom:40px}
}