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

:root{
  --bg:#eef0f2;
  --bg-alt:#dfe3e7;
  --bg-dark:#1b2733;
  --ink:#151a20;
  --ink-soft:#636d78;
  --ink-inv:#eef0f2;
  --accent:#2c4a7c;
  --accent-2:#a35a2a;
  --seam:4px;
  --mono:ui-monospace,Consolas,"Liberation Mono",Menlo,monospace;
  --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.75;
  overflow-x:hidden;
}

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

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

.dark a:focus-visible{outline-color:#c8a37e;}

/* ---------- estructura ---------- */

.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

.band{padding:96px 0;}
.band--tight{padding:72px 0;}
.band--alt{background:var(--bg-alt);}
.band--dark{background:var(--bg-dark);color:var(--ink-inv);}
.band--dark h2,.band--dark h3{color:var(--ink-inv);}
.band--dark .lead,.band--dark .cap{color:#a9b6c2;}

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

h1,h2,h3,.kicker,.num,.brand,.nav a,.cap{
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.08em;
}

h1{
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.18;
  margin:0;
  font-weight:700;
}

h2{
  font-size:clamp(19px,2vw,25px);
  line-height:1.3;
  margin:0 0 20px;
  font-weight:700;
}

h3{
  font-size:16px;
  line-height:1.4;
  margin:32px 0 12px;
  font-weight:700;
  letter-spacing:.1em;
}

p{margin:0 0 20px;}
p:last-child{margin-bottom:0;}

.lead{font-size:18px;color:var(--ink-soft);}
.kicker{font-size:12px;color:var(--accent-2);margin:0 0 14px;letter-spacing:.18em;}
.num{font-size:12px;color:var(--accent-2);letter-spacing:.2em;display:block;margin-bottom:8px;}
.cap{
  font-size:11px;
  line-height:1.6;
  color:var(--ink-soft);
  letter-spacing:.14em;
  text-transform:uppercase;
}

ul,ol{margin:0 0 20px;padding-left:0;list-style:none;}
ul li,ol li{position:relative;padding-left:26px;margin-bottom:10px;}
ul li::before{
  content:"";
  position:absolute;left:0;top:11px;
  width:9px;height:9px;background:var(--accent);
}
ol{counter-reset:step;}
ol li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--mono);font-size:12px;color:var(--accent-2);
  letter-spacing:.1em;
}
ol li{padding-left:38px;}
.band--dark ul li::before{background:#c8a37e;}

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

.masthead{
  background:var(--bg-dark);
  color:var(--ink-inv);
  padding:18px 0;
}
.masthead-inner{
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  align-items:baseline;
  justify-content:space-between;
}
.brand{
  font-size:15px;
  font-weight:700;
  letter-spacing:.28em;
  color:var(--ink-inv);
  text-decoration:none;
}
.brand:hover{text-decoration:none;color:#fff;}
.nav ul{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;list-style:none;padding:0;}
.nav li{padding:0;margin:0;}
.nav li::before{display:none;}
.nav a{
  font-size:11.5px;
  color:#b9c4cf;
  text-decoration:none;
  letter-spacing:.16em;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent-2);}
.nav a:focus-visible{outline:3px solid #c8a37e;outline-offset:3px;}

/* ---------- mosaico ---------- */

.mosaic{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--seam);
}

.mod{
  background:var(--bg);
  padding:28px;
}
.band--alt .mod{background:var(--bg);}
.band--dark .mod{background:#22303e;}
.mod--plain{background:transparent;padding:0;}
.mod--flat{padding:28px 28px 28px 0;background:transparent;}

.fill{min-height:76px;}
.fill--indigo{background:var(--accent);}
.fill--copper{background:var(--accent-2);}
.fill--steel{background:#8d99a6;}
.fill--dark{background:var(--bg-dark);}
.fill--pale{background:var(--bg-alt);}

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

.hero{padding:56px 0 0;}
.hero .mosaic{grid-template-rows:auto auto auto;}
.h-title{grid-column:1/9;grid-row:1/3;background:var(--bg-alt);padding:36px 32px;display:flex;flex-direction:column;justify-content:center;}
.h-t1{grid-column:9/11;grid-row:1/2;}
.h-t2{grid-column:11/13;grid-row:1/2;}
.h-intro{grid-column:9/13;grid-row:2/3;background:var(--bg-alt);padding:28px;}
.h-side{grid-column:1/3;grid-row:3/4;}
.h-img{grid-column:3/9;grid-row:3/4;padding:0;background:var(--bg-dark);}
.h-img img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.h-cap{grid-column:9/13;grid-row:3/4;background:var(--bg-alt);padding:24px;display:flex;flex-direction:column;gap:14px;}
.h-cap .rule{height:6px;background:var(--accent-2);width:64px;}

/* ---------- separador de teselas ---------- */

.sep{
  height:24px;
  background:
    repeating-linear-gradient(90deg,
      var(--accent) 0 24px,
      transparent 24px 48px,
      var(--accent-2) 48px 72px,
      transparent 72px 96px);
}
.sep--lead{margin-bottom:56px;}
.sep--dark{
  background:
    repeating-linear-gradient(90deg,
      #33506f 0 24px,
      transparent 24px 48px,
      #8a4d26 48px 72px,
      transparent 72px 96px);
}

/* ---------- composiciones de contenido ---------- */

.c-8{grid-column:span 8;}
.c-6{grid-column:span 6;}
.c-5{grid-column:span 5;}
.c-4{grid-column:span 4;}
.c-3{grid-column:span 3;}
.c-2{grid-column:span 2;}
.c-12{grid-column:1/-1;}

.detail-img{padding:0;background:#22303e;}
.detail-img img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.detail-cap{padding:14px 0 0;}

.note{
  border-left:6px solid var(--accent);
  padding:4px 0 4px 20px;
  color:var(--ink-soft);
}

.contact-mod{border-top:6px solid var(--accent-2);}

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

.foot{background:var(--bg-dark);color:var(--ink-inv);}
.foot .sep{margin:0;}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--seam);
  padding:var(--seam) 0 0;
}
.foot-mod{background:#22303e;padding:26px;}
.foot-mod h2{font-size:12px;letter-spacing:.18em;margin:0 0 12px;color:#b9c4cf;}
.foot-mod p{font-size:14px;line-height:1.7;color:#c6d0da;}
.foot-mod a{color:#dbe4ec;}
.foot-mod ul{margin:0;}
.foot-mod li{padding-left:0;margin-bottom:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;}
.foot-mod li::before{display:none;}
.foot-name{font-family:var(--mono);text-transform:uppercase;letter-spacing:.26em;font-size:15px;font-weight:700;margin-bottom:10px;}
.foot-bottom{padding:22px 0 40px;font-size:12.5px;color:#8d9baa;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;}

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

@media (max-width:900px){
  .band{padding:64px 0;}
  .band--tight{padding:56px 0;}
  .c-8,.c-6,.c-5,.c-4,.c-3,.c-2{grid-column:1/-1;}
  .foot-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  body{font-size:16.5px;}
  .band,.band--tight{padding:48px 0;}
  .wrap{padding:0 16px;}
  .hero{padding:32px 0 0;}
  .mod{padding:22px;}
  .h-title,.h-intro,.h-cap{padding:24px;}
  .hero .mosaic{grid-template-rows:none;}
  .h-title,.h-t1,.h-t2,.h-intro,.h-side,.h-img,.h-cap{grid-column:1/-1;grid-row:auto;}
  .h-t1,.h-t2,.h-side{min-height:24px;}
  .h-side{display:none;}
  .foot-grid{grid-template-columns:1fr;}
  .masthead-inner{flex-direction:column;align-items:flex-start;}
  .sep{height:16px;}
}