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

:root{
  --bg:#14161a;
  --bg-alt:#1d2026;
  --paper:#e4e4e1;
  --tx:#d8dbdf;
  --tx-soft:#8a9098;
  --tx-dark:#14161a;
  --amber:#e8a33d;
  --teal:#4fb79a;
  --line:#0b0c0e;
  --serif:Georgia,'Times New Roman',serif;
  --sans:system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.8;
  overflow-x:hidden;
}

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

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

h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 .6em;}
h1{font-size:clamp(34px,5.4vw,60px);line-height:1.05;letter-spacing:-.01em;}
h2{font-size:clamp(23px,2.6vw,31px);line-height:1.12;}
h3{font-size:clamp(19px,1.5vw,21px);line-height:1.2;}
p{margin:0 0 1.15em;max-width:74ch;}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0;}

ul,ol{margin:0 0 1.15em;padding-left:1.1em;max-width:74ch;}
li{margin-bottom:.55em;}
li::marker{color:var(--amber);}

.cap{font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--tx-soft);text-transform:none;letter-spacing:0;}
.num{font-family:var(--sans);font-size:13px;color:var(--teal);margin:0 0 14px;letter-spacing:.04em;}
.lede{font-size:19px;line-height:1.65;}

/* ---------- barra superior ---------- */
.topbar{
  background:var(--line);
  border-bottom:6px solid var(--line);
}
.topbar-in{
  background:var(--bg-alt);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 28px;
  padding:20px 44px;
}
.brand{
  font-family:var(--serif);
  font-size:22px;
  letter-spacing:.02em;
  color:var(--tx);
  text-decoration:none;
}
.brand:hover{color:var(--amber);}
.topnav ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;max-width:none;}
.topnav li{margin:0;}
.topnav a{font-size:15px;color:var(--tx);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.topnav a:hover{color:var(--amber);border-bottom-color:var(--amber);}
.topnav a[aria-current="page"]{color:var(--amber);border-bottom-color:var(--amber);}

/* ---------- rejilla base ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--line);
}
.cell{padding:72px 44px;background:var(--bg);}
.cell--alt{background:var(--bg-alt);}
.cell--paper{background:var(--paper);color:var(--tx-dark);}
.cell--amber{background:var(--amber);color:var(--tx-dark);}
.cell--teal{background:var(--teal);color:var(--tx-dark);}
.cell--tight{padding:44px;}

.band{border-top:6px solid var(--line);}
.band:first-of-type{border-top:0;}

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

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:5px;
  background:var(--line);
  border-bottom:6px solid var(--line);
}
.hero-main{grid-column:1 / 8;grid-row:1 / 3;background:var(--bg);padding:78px 44px 66px;display:flex;flex-direction:column;justify-content:center;}
.hero-main h1{max-width:14ch;margin-bottom:0;}
.hero-kicker{font-size:13px;color:var(--teal);margin:0 0 26px;}
.hero-intro{grid-column:8 / 13;grid-row:1 / 2;background:var(--amber);color:var(--tx-dark);padding:66px 44px;}
.hero-intro p{margin:0;font-size:18px;line-height:1.65;max-width:44ch;}
.hero-field{grid-column:8 / 13;grid-row:2 / 3;background:var(--teal);min-height:120px;}
.hero-nav{grid-column:1 / 13;background:var(--bg-alt);padding:22px 44px;}
.hero-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;margin:0;padding:0;max-width:none;}
.hero-nav li{margin:0;}
.hero-nav a{font-size:15px;color:var(--tx);text-decoration:none;border-bottom:1px solid var(--tx-soft);padding-bottom:2px;}
.hero-nav a:hover{color:var(--amber);border-bottom-color:var(--amber);}

/* ---------- imagen principal ---------- */
.figcell{padding:44px;background:var(--bg);}
.figcell figure{margin:0;}
.figcell img{border:5px solid var(--line);width:100%;height:auto;}
.capcell{padding:44px;background:var(--bg-alt);display:flex;align-items:flex-end;}
.capcell p{margin:0;}
.fieldcell{background:var(--amber);}

/* ---------- imagen de detalle (sección clara) ---------- */
.paper-band .cell--paper a{color:#8a5a10;}
.detail-fig{margin:0;}
.detail-fig img{width:100%;height:auto;border:5px solid var(--line);}
.detail-fig figcaption{margin-top:14px;font-size:13px;line-height:1.6;color:#4a4f55;}
.cell--paper .num{color:#1f6f5e;}
.cell--paper li::marker{color:#a56a12;}

/* ---------- listas prácticas ---------- */
.check{list-style:none;padding-left:0;}
.check li{position:relative;padding-left:26px;}
.check li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:3px;background:var(--amber);}
.cell--paper .check li::before{background:#a56a12;}

.steps{counter-reset:step;list-style:none;padding-left:0;}
.steps li{counter-increment:step;position:relative;padding-left:38px;}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font-size:13px;color:var(--teal);}

/* ---------- pie ---------- */
.site-footer{border-top:6px solid var(--line);}
.footer-grid{display:grid;grid-template-columns:4fr 5fr 3fr;gap:5px;background:var(--line);}
.footer-cell{padding:48px 44px;background:var(--bg);}
.footer-cell--alt{background:var(--bg-alt);}
.footer-cell--teal{background:var(--bg-alt);}
.footer-name{font-family:var(--serif);font-size:24px;margin:0 0 10px;}
.footer-cell ul{list-style:none;padding:0;margin:0;}
.footer-cell li{margin-bottom:.4em;}
.footer-cell a{color:var(--tx);text-decoration:none;border-bottom:1px solid transparent;}
.footer-cell a:hover{color:var(--amber);border-bottom-color:var(--amber);}
.footer-cell a.mail{color:var(--amber);border-bottom:1px solid var(--amber);}
.footer-note{font-size:13px;line-height:1.65;color:var(--tx-soft);margin:14px 0 0;}

/* ---------- páginas interiores ---------- */
.page-head{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;background:var(--line);border-bottom:6px solid var(--line);}
.page-head .cell{padding:66px 44px;}
.about-panel{display:grid;grid-template-columns:1fr;gap:5px;background:var(--line);}
.about-panel .cell{padding:66px 44px;display:grid;grid-template-columns:repeat(12,1fr);}
.about-panel .inner{grid-column:span 7;}
.about-panel .cell--tall{padding-top:96px;padding-bottom:96px;}
@media (max-width:1020px){
  .about-panel .inner{grid-column:1 / -1;}
}

/* ---------- adaptación ---------- */
@media (max-width:1020px){
  .hero{grid-template-columns:1fr;}
  .hero-main,.hero-intro,.hero-field,.hero-nav{grid-column:1 / -1;grid-row:auto;}
  .hero-field{min-height:70px;}
  .grid > *{grid-column:1 / -1 !important;}
  .footer-grid{grid-template-columns:1fr;}
  .capcell{align-items:flex-start;}
}

@media (max-width:640px){
  body{font-size:16px;}
  .cell,.figcell,.capcell,.hero-main,.hero-intro,.about-panel .cell,.page-head .cell{padding:44px 20px;}
  .cell--tight{padding:32px 20px;}
  .topbar-in,.hero-nav,.footer-cell{padding-left:20px;padding-right:20px;}
  .hero-main{padding-top:52px;padding-bottom:44px;}
  .hero-main h1{max-width:none;}
  .lede{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;}
}