/* Landing de Hangar Austral — hereda la estética de los boards:
   paleta "papel" cálida, monospace, acentos camel/espresso. Look plano/archival. */
:root{
  --surface:#faf6ef; --bg:#efe7d8; --panel:#f5efe4; --chart:#fbf8f2;
  --ink:#2c2722; --muted:#94897a; --border:rgba(74,53,30,0.14);
  --camel:#a87c52; --espresso:#5a4733;
  --mono:"Berkeley Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --read:800px;        /* columna de lectura */
  --wide:1000px;       /* figuras / boards (breakout suave sobre la lectura) */
  --gutter:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--mono); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(168,124,82,.06), transparent 60%),
    radial-gradient(100% 60% at 50% 110%, rgba(90,71,51,.05), transparent 55%);
}
:focus-visible{ outline:2px solid var(--camel); outline-offset:3px; border-radius:2px; }

.page{ max-width:calc(var(--wide) + var(--gutter) * 2); margin:0 auto; padding:0 var(--gutter) 48px; }

/* ---- columna de lectura: el texto va angosto; las figuras se ensanchan un poco ---- */
.page > h1, .page > h2, .page > h3, .page > h4,
.page > p, .page > ul, .page > ol, .page > blockquote{
  max-width:var(--read); margin-left:auto; margin-right:auto;
}

/* byline (arriba a la izquierda, chiquito) */
.page > .byline{
  max-width:var(--read); margin:30px auto 0;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
}

/* H1 / hero */
.page > h1{
  margin-top:30px; margin-bottom:14px;
  font-size:clamp(31px,4.4vw,46px); font-weight:700;
  letter-spacing:-0.035em; line-height:1.05; text-wrap:balance;
}
/* subtítulo del hero (más chico que el título) */
.page > .subtitle{
  max-width:var(--read); margin:0 auto 20px;
  font-size:21px; font-weight:500; line-height:1.34; letter-spacing:-0.01em; color:var(--espresso);
}
.page > .subtitle + p{ font-size:16.5px; line-height:1.62; color:#39332c; }

/* H2 = separador de sección tipo "eyebrow" de los boards */
.page > h2{
  display:flex; align-items:center; gap:18px;
  margin-top:92px; margin-bottom:30px;
  font-size:12.5px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--espresso);
}
.page > h2::before, .page > h2::after{ content:""; height:1px; background:var(--border); flex:1; }

/* H3 = subtítulo */
.page > h3{
  margin-top:52px; margin-bottom:10px;
  font-size:20px; font-weight:700; letter-spacing:-0.02em; line-height:1.28; color:var(--ink);
}

.page > p{ margin:18px auto; font-size:15.5px; line-height:1.72; color:#39332c; }
.page > ul, .page > ol{ margin:18px auto; font-size:15.5px; line-height:1.66; color:#39332c; padding-left:1.4em; }
.page > blockquote{
  margin:26px auto; padding:6px 0 6px 20px; border-left:3px solid var(--camel);
  color:var(--espresso); font-size:17px;
}
a{ color:var(--camel); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--espresso); }
strong{ font-weight:700; color:var(--ink); }
code{ background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:.9em; }
hr{ max-width:var(--read); margin:52px auto; border:0; border-top:1px solid var(--border); }

/* ---- KPI destacado ---- */
.kpi{
  max-width:var(--read); margin:38px auto;
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center;
  padding:22px 28px; background:var(--panel);
  border:1px solid var(--border); border-left:4px solid var(--camel); border-radius:10px;
}
.kpi-fig{
  font-size:33px; font-weight:700; letter-spacing:-0.02em; color:var(--espresso);
  line-height:1.04; white-space:nowrap;
}
.kpi-fig strong{ color:var(--camel); }
.kpi-body{ font-size:14.5px; line-height:1.55; color:#39332c; }
@media (max-width:560px){
  .kpi{ grid-template-columns:1fr; gap:10px; padding:20px 22px; }
  .kpi-fig{ white-space:normal; font-size:28px; }
}

/* ---- figuras de media (gif / imagen / video), expandibles ---- */
figure.media{
  position:relative; max-width:var(--wide); margin:40px auto; cursor:zoom-in;
}
.media-el{
  width:100%; height:auto; display:block;
  border:1px solid var(--border); border-radius:8px; background:var(--chart);
  transition:border-color .15s ease;
}
figure.media:hover .media-el{ border-color:var(--camel); }
/* hint "ampliar" al hover (no intercepta el click) */
figure.media::after{
  content:"⤢ ampliar"; position:absolute; top:10px; right:10px;
  font-size:10.5px; letter-spacing:.06em; color:#f6efe2;
  background:rgba(44,39,34,.74); padding:4px 8px; border-radius:5px;
  opacity:0; transition:opacity .15s ease; pointer-events:none;
}
figure.media:hover::after{ opacity:1; }
figure.media figcaption{
  margin-top:11px; text-align:center; color:var(--muted);
  font-size:12px; letter-spacing:0.04em;
}

/* ---- fila de figuras lado a lado ---- */
.figure-row{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  max-width:var(--wide); margin:40px auto;
}
.figure-row > *{ flex:1 1 220px; min-width:200px; margin:0; }
.figure-row figure.media{ margin:0; }
.figure-row .media-el{ border-radius:7px; }
.figure-row figure.media::after{ content:"⤢"; padding:4px 7px; }
.row-text{ flex-basis:100%; text-align:center; color:var(--muted); font-size:13px; }

/* ---- boards (web components con Shadow DOM, sin iframe) ---- */
.board-embed{
  width:min(100%, var(--bw, var(--wide)));
  margin:48px auto; overflow:hidden;
}
hangar-board{ display:block; }
.board-full{
  display:block; width:min(100%, var(--bw, var(--wide))); margin:9px auto 0;
  text-align:right; color:var(--muted); font-size:11px; letter-spacing:0.04em; text-decoration:none;
}
.board-full:hover{ color:var(--camel); }
.board-missing{
  max-width:var(--read); margin:26px auto; padding:14px 16px;
  border:1px dashed var(--camel); border-radius:8px; color:var(--espresso);
  font-size:13px; background:var(--panel);
}

/* ---- footer + banner de preview ---- */
.site-foot{
  max-width:var(--wide); margin:80px auto 0; padding:24px var(--gutter) 44px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  color:var(--muted); font-size:12px; letter-spacing:0.04em;
}
.preview-banner{
  position:sticky; top:0; z-index:10; text-align:center;
  background:var(--espresso); color:#f6efe2; padding:7px;
  font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
}

/* ---- lightbox (modal de media, sin iframe) ---- */
.lb-overlay{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  padding:max(24px, 4vh) 24px; background:rgba(28,24,20,.82);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.lb-overlay.open{ display:flex; }
.lb-media{
  max-width:min(1100px, 94vw); max-height:84vh; width:auto; height:auto;
  object-fit:contain; border-radius:10px; background:#000;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.lb-cap{ color:#e9dfce; font-size:12.5px; letter-spacing:.04em; text-align:center; max-width:80vw; }
.lb-close{
  position:absolute; top:16px; right:18px; cursor:pointer;
  background:rgba(246,239,226,.12); color:#f6efe2; border:1px solid rgba(246,239,226,.3);
  width:38px; height:38px; border-radius:50%; font-size:16px; line-height:1; font-family:var(--mono);
}
.lb-close:hover{ background:rgba(246,239,226,.22); }

/* ---- mobile ---- */
@media (max-width:640px){
  .page{ padding:0 18px 36px; }
  .page > h1{ margin-top:56px; }
  .page > h2{ margin-top:64px; margin-bottom:24px; }
  .page > h3{ margin-top:40px; }
  figure.media, .figure-row, .board-embed{ margin-top:30px; margin-bottom:30px; }
  figure.media::after{ opacity:1; } /* en touch siempre visible */
  .site-foot{ margin-top:56px; }
}

/* ---- accesibilidad: menos movimiento ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}