/* ==========================================================================
   Balam LLC — sitio institucional
   Depende de _tokens.css, que se carga antes. Ningun color, tipografia ni
   medida de espaciado se declara aqui en crudo: todo sale de var().
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
  background: var(--surface-page);
  color: var(--text-body);
  text-rendering: optimizeLegibility;
}

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

/* --- primitivas ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.overline {
  max-width: none;
  font: var(--text-overline);
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-4);
}

.display {
  font: var(--text-display);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

h2 {
  font: var(--text-h2);
  letter-spacing: var(--track-display);
  margin: 0 0 var(--sp-4);
}

h3 {
  font: var(--text-h3);
  margin: 0 0 var(--sp-2);
}

p { margin: 0 0 var(--sp-4); max-width: 60ch; }
p:last-child { margin-bottom: 0; }

.lede {
  font: var(--text-body-md);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-body);
}

.mono { font: var(--text-mono); }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}

/* Marcador de contenido pendiente. Nunca debe llegar a produccion:
   la verificacion previa al despliegue busca la cadena "data-todo". */
[data-todo] {
  background: var(--danger-soft);
  color: var(--danger);
  border-bottom: 1px solid var(--danger);
  padding-inline: var(--sp-1);
  font-weight: 600;
}

/* --- encabezado ---------------------------------------------------------- */

.site-header {
  /* Chrome fijo como material translucido (readme: --material-chrome + blur),
     el contenido se desliza debajo. */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--material-chrome);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  border-bottom: 1px solid var(--border-default);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--surface-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --- tira de folio ------------------------------------------------------- */

.doc-strip {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
}

.doc-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-2);
  font: var(--text-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

.doc-strip span:first-child { color: var(--text-body); }

/* --- numeracion de seccion ----------------------------------------------- */

.sec-n {
  font: var(--text-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--track-overline);
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}

.sec-n span { color: var(--brand-orange); }

/* --- figuras: metraje industrial real, tratado como figura de ficha ------ */

.fig { margin: 0; }

.fig video, .fig .fig-still {
  display: block;
  width: 100%;
  object-fit: cover;
}

.fig .fig-still { display: none; }

.fig figcaption {
  font: var(--text-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
}

.fig-n { color: var(--brand-orange); }

.fig-ref { color: var(--text-muted); }

.fig-bleed video, .fig-bleed .fig-still {
  height: clamp(16rem, 38vw, 26rem);
}

.fig-bleed figcaption {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
}

.fig-bleed figcaption .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  padding-block: var(--sp-3);
}

.fig-bleed .fig-ref { color: var(--text-inverse-muted); }

.fig-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.fig-card video, .fig-card .fig-still { height: auto; aspect-ratio: 4 / 3; }

.fig-card figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-default);
}

.portfolio-row {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: var(--sp-8);
  align-items: start;
}

.portfolio-row .portfolio { grid-template-columns: 1fr 1fr; }

.footer-doc { font: var(--text-mono); font-size: 0.75rem; letter-spacing: var(--track-label); }

.disclaimer {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-default);
  font: var(--text-body-sm);
  color: var(--text-muted);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: var(--control-h-lg);
  padding-block: var(--sp-4);
  flex-wrap: wrap;
}

.lockup { width: 11.5rem; }

.site-nav {
  display: flex;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.site-nav a {
  font: var(--text-label);
  letter-spacing: var(--track-label);
  color: var(--text-secondary);
  text-decoration: none;
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.site-nav a:hover {
  color: var(--text-body);
  border-bottom-color: var(--brand-orange);
  text-decoration: none;
}

/* --- hero: unico bloque de marca ----------------------------------------- */

.hero {
  background: var(--surface-brand);
  color: var(--text-on-brand);
  padding-block: var(--sp-16);
}

.hero .overline { color: var(--text-on-brand); opacity: 0.72; }

.hero .display { max-width: 18ch; }

.hero .lede {
  margin-top: var(--sp-6);
  max-width: 46ch;
  font-size: 1.125rem;
}

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

.section { padding-block: var(--sp-16); }
.section + .section { padding-top: var(--sp-12); }
.section + .section > .wrap { border-top: 1px solid var(--border-default); padding-top: var(--sp-12); }

.section-head { margin-bottom: var(--sp-8); }
.section-head p { color: var(--text-secondary); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
}

.grid-3 .card p {
  color: var(--text-secondary);
  font: var(--text-body-sm);
  margin: 0;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4);
}

.grid-4 .card p {
  color: var(--text-secondary);
  font: var(--text-body-sm);
  margin: 0;
}

/* Indice numerado: dato, por tanto en mono; el naranja solo como acento. */
.index {
  font: var(--text-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--brand-orange);
  margin: 0 0 var(--sp-3);
}

.subsection { margin-top: var(--sp-10); }

.subsection-title {
  font: var(--text-overline);
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}

.portfolio {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0 var(--sp-6);
}

.portfolio li {
  font: var(--text-mono);
  font-size: 0.875rem;
  color: var(--text-body);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border-default);
}

.record.record-prose dd { font: var(--text-body-sm); color: var(--text-secondary); }

/* --- pasos --------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-6);
}

.steps li {
  border-top: 2px solid var(--brand-orange);
  padding-top: var(--sp-4);
}

.steps p:last-child {
  color: var(--text-secondary);
  font: var(--text-body-sm);
  margin: 0;
}

/* --- company record ------------------------------------------------------ */

.record { padding: 0; overflow: hidden; }

.record dl { margin: 0; }

.record .row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-default);
}

.record .row:first-child { border-top: 0; }

.record dt {
  font: var(--text-label);
  letter-spacing: var(--track-label);
  color: var(--text-muted);
}

.record dd {
  margin: 0;
  font: var(--text-mono);
  color: var(--text-body);
  overflow-wrap: anywhere;
}

.record-note {
  max-width: none;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-default);
  background: var(--n-50);
  font: var(--text-body-sm);
  color: var(--text-secondary);
}

.record-note a { color: var(--link); }

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

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-4);
}

.contact-grid dt {
  font: var(--text-overline);
  letter-spacing: var(--track-overline);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
}

.contact-grid dd {
  margin: 0;
  font: var(--text-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-body);
}

.contact-grid dd a { color: var(--link); }

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

.site-footer {
  background: var(--surface-inverse);
  color: var(--text-on-inverse);
  padding-block: var(--sp-12);
  margin-top: var(--sp-16);
}

.site-footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-8);
  flex-wrap: wrap;
}

.site-footer .footer-wordmark {
  /* El sistema no provee lockup en negativo y prohibe redibujar el jaguar:
     sobre fondo oscuro va bloque naranja o texto plano. Aqui, texto plano. */
  font: var(--text-h1);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--text-on-inverse);
  margin: 0;
}

.site-footer .footer-wordmark span {
  display: block;
  font: var(--text-overline);
  letter-spacing: var(--track-overline);
  color: var(--text-inverse-muted);
  margin-top: var(--sp-1);
}

.site-footer p {
  font: var(--text-body-sm);
  color: var(--text-inverse-muted);
  margin: var(--sp-4) 0 0;
}

.footer-legal {
  font: var(--text-body-sm);
  color: var(--text-inverse-muted);
  text-align: right;
}

.footer-legal a { color: var(--text-on-inverse); }

/* --- foco visible -------------------------------------------------------- */

a:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* --- angosto ------------------------------------------------------------- */

@media (max-width: 40rem) {
  .record .row { grid-template-columns: 1fr; gap: var(--sp-1); }
  .site-footer .wrap { align-items: flex-start; }
  .footer-legal { text-align: left; }
  .section { padding-block: var(--sp-12); }
  .hero { padding-block: var(--sp-12); }
}

@media (max-width: 48rem) {
  .portfolio-row { grid-template-columns: 1fr; }
  .portfolio-row .portfolio { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  /* Sin animacion: se muestra el poster fijo en lugar del video. */
  .fig video { display: none; }
  .fig .fig-still { display: block; }
}