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

:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --dark:#23262b;
  --ink:#16181d;
  --muted:#656b75;
  --blue:#2d5bd6;
  --gold:#c9a00f;
  --seam:4px;
}

*{box-sizing:border-box;}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  overflow-x:hidden;
}

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

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

.wrap{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

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

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

.mod{
  background:var(--panel);
  padding:28px;
  min-width:0;
}

.mod--flat{padding:0;}
.mod--bg{background:var(--bg);}
.mod--blue{background:var(--blue);}
.mod--gold{background:var(--gold);}
.mod--dark{background:var(--dark);}

.c4{grid-column:span 4;}
.c5{grid-column:span 5;}
.c6{grid-column:span 6;}
.c7{grid-column:span 7;}
.c8{grid-column:span 8;}
.c12{grid-column:span 12;}

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

h1,h2,h3{margin:0 0 16px;line-height:1.15;}

h1{
  font-size:clamp(2.3rem,5.4vw,4.1rem);
  font-weight:700;
  letter-spacing:-0.035em;
  line-height:1.05;
}

h2{
  font-size:clamp(1.35rem,2.5vw,2rem);
  font-weight:700;
  letter-spacing:-0.02em;
}

h3{
  font-size:1.06rem;
  font-weight:700;
  letter-spacing:-0.005em;
  margin-bottom:8px;
}

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

.lead{font-size:1.06rem;color:var(--ink);}

.cap,
figcaption{
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

.num{
  display:block;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.14em;
  color:var(--gold);
  margin-bottom:10px;
}

.small{font-size:13px;color:var(--muted);}

ul.list,
ol.list{margin:0 0 18px;padding-left:0;list-style:none;}
ul.list li,
ol.list li{
  position:relative;
  padding-left:22px;
  margin-bottom:9px;
}
ul.list li::before{
  content:"";
  position:absolute;
  left:0;top:11px;
  width:9px;height:9px;
  background:var(--blue);
}
ol.list{counter-reset:step;}
ol.list li{padding-left:30px;}
ol.list li::before{
  counter-increment:step;
  content:counter(step);
  position:absolute;left:0;top:0;
  font-size:13px;font-weight:700;color:var(--gold);
  line-height:1.9;
}

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

.site-head{background:var(--dark);}
.head-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 28px;
  padding-top:16px;
  padding-bottom:16px;
}
.brand{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--bg);
  text-decoration:none;
  border-bottom:3px solid var(--gold);
  padding-bottom:2px;
}
.site-head nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0;padding:0;
}
.site-head nav a{
  color:var(--bg);
  font-size:14.5px;
  text-decoration:none;
  border-bottom:2px solid transparent;
  padding-bottom:2px;
}
.site-head nav a:hover,
.site-head nav a:focus-visible{border-bottom-color:var(--blue);}
.site-head a:focus-visible{outline-color:var(--gold);}

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

.hero{padding:24px 0 0;}
.hero-h1{grid-column:span 8;padding:44px 36px;}
.hero-side{
  grid-column:span 4;
  display:grid;
  grid-template-rows:1fr auto;
  gap:var(--seam);
  min-width:0;
}
.hero-tiles{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--seam);
}
.hero-tiles span{display:block;height:44px;}
.t-blue{background:var(--blue);}
.t-gold{background:var(--gold);}
.t-dark{background:var(--dark);}
.t-panel{background:var(--panel);}

.hero-strip{
  grid-column:span 2;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:var(--seam);
  min-width:0;
}
.hero-strip span{display:block;}

.hero-fig{grid-column:span 6;}
.hero-fig img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.hero-cap{grid-column:span 3;padding:24px;}
.hero-mark{grid-column:span 1;}

/* ---------- separador ---------- */

.seam-row{
  height:24px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--blue) 0 24px,
    transparent 24px 48px,
    var(--gold) 48px 72px,
    transparent 72px 144px);
  background-repeat:repeat-x;
}

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

.band{padding:72px 0;}
.band--alt{background:var(--panel);}
.band--alt .mod{background:var(--bg);}
.band--alt .mod--blue{background:var(--blue);}
.band--alt .mod--gold{background:var(--gold);}
.band--wide{padding:96px 0;}

.band--dark{background:var(--dark);color:var(--bg);padding:96px 0;}
.band--dark h2,
.band--dark h3{color:var(--bg);}
.band--dark .mod{background:#2b2f36;}
.band--dark .mod--flat{background:transparent;}
.band--dark .cap,
.band--dark figcaption,
.band--dark .small{color:#a4abb6;}
.band--dark a{color:#8fb0ff;}
.band--dark ul.list li::before{background:var(--gold);}

.dark-fig{grid-column:span 4;grid-column-start:2;}
.dark-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.dark-text{grid-column:span 6;padding:28px;}

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

.tile-fill{grid-column:span 2;background:var(--blue);}
.tile-fill--gold{background:var(--gold);}
.tile-fill--dark{background:var(--dark);}

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

.site-foot{background:var(--dark);color:var(--bg);padding-bottom:56px;}
.foot-seam{
  height:24px;
  background-image:repeating-linear-gradient(
    90deg,
    var(--gold) 0 24px,
    transparent 24px 48px,
    var(--blue) 48px 72px,
    transparent 72px 120px);
}
.foot-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--seam);
  margin-top:40px;
}
.foot-col{background:#2b2f36;padding:24px;min-width:0;}
.foot-col h2{font-size:0.85rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;}
.foot-col ul{list-style:none;margin:0;padding:0;}
.foot-col li{margin-bottom:7px;}
.foot-col a{color:var(--bg);text-decoration:none;border-bottom:1px solid rgba(244,245,247,.35);}
.foot-col a:hover{border-bottom-color:var(--blue);}
.foot-name{font-size:1.3rem;font-weight:700;letter-spacing:-0.02em;}
.foot-note{font-size:13.5px;line-height:1.6;color:#a4abb6;}

/* ---------- páginas internas ---------- */

.page-head{padding:56px 0 0;}
.page-h1{grid-column:span 8;padding:40px 32px;}
.page-side{grid-column:span 4;padding:32px;background:var(--dark);color:var(--bg);}
.page-side .cap{color:#a4abb6;}

.doc{padding:56px 0 72px;}
.doc .mod{padding:32px;}

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

@media (max-width:900px){
  .band,.band--wide,.band--dark{padding:48px 0;}
  .hero-h1{grid-column:span 12;padding:32px 24px;}
  .hero-side{grid-column:span 12;}
  .hero-fig{grid-column:span 8;}
  .hero-cap{grid-column:span 4;}
  .hero-strip,.hero-mark{display:none;}
  .c4,.c5,.c6,.c7,.c8{grid-column:span 6;}
  .dark-fig{grid-column:span 5;grid-column-start:1;}
  .dark-text{grid-column:span 7;}
  .foot-grid{grid-template-columns:repeat(2,1fr);}
  .page-h1{grid-column:span 12;}
  .page-side{grid-column:span 12;}
  .tile-fill{display:none;}
}

@media (max-width:640px){
  body{font-size:16.5px;}
  .mod{padding:22px;}
  .doc .mod{padding:22px;}
  .hero-fig,.hero-cap,.c4,.c5,.c6,.c7,.c8,
  .dark-fig,.dark-text{grid-column:span 12;}
  .dark-text{padding:22px;}
  .foot-grid{grid-template-columns:1fr;}
  .head-inner{gap:10px 16px;}
  .site-head nav ul{gap:6px 14px;}
  .hero-tiles span{height:34px;}
}