/* =========================================================
   Layout primitives — sections, containers, heads
   Estos primitivos definen el ritmo vertical del sitio.
   ========================================================= */

.tla-section { padding: 90px 24px; }
.tla-section--sm { padding: 70px 24px; }
.tla-section--lg { padding: 110px 24px; }
.tla-section--alt { background: var(--neutral-50); }
.tla-section--dark {
  background: var(--neutral-900);
  color: var(--fg-on-dark);
}
.tla-section--dark .tla-h-section,
.tla-section--dark .tla-h-display,
.tla-section--dark .tla-h-sub { color: var(--fg-on-dark); }
.tla-section--dark .tla-lead,
.tla-section--dark .tla-body { color: var(--fg-on-dark-muted); }

@media (max-width: 720px) {
  .tla-section    { padding: 64px 20px; }
  .tla-section--sm { padding: 48px 20px; }
  .tla-section--lg { padding: 80px 20px; }
}

.tla-container        { max-width: var(--container-max);    margin: 0 auto; }
.tla-container--narrow{ max-width: var(--container-narrow); margin: 0 auto; }
.tla-container--wide  { max-width: var(--container-wide);   margin: 0 auto; }

.tla-head        { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.tla-head--left  { text-align: left;   max-width: 720px; margin: 0 0 40px; }

.tla-h-display {
  font: 700 clamp(36px, 4.2vw, 60px) / 1.08 var(--font-display);
  letter-spacing: -0.025em;
  margin: 16px 0 14px;
  text-wrap: balance;
}
.tla-h-section {
  font: 700 clamp(28px, 3vw, 42px) / 1.15 var(--font-display);
  letter-spacing: -0.02em;
  margin: 14px 0 14px;
  text-wrap: balance;
}
.tla-h-sub {
  font: 700 clamp(20px, 2.2vw, 26px) / 1.25 var(--font-display);
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.tla-lead {
  font: 400 17px / 1.65 var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
  margin: 0 0 20px;
}
.tla-body {
  font: 400 16px / 1.7 var(--font-body);
  color: var(--fg-muted);
  text-wrap: pretty;
  margin: 0 0 16px;
}

/* Grid utilities for two-column layouts (about/empresa) — sin Bootstrap */
.tla-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.tla-grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tla-grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }

@media (max-width: 960px) {
  .tla-grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .tla-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .tla-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .tla-grid-3,
  .tla-grid-4 { grid-template-columns: 1fr; }
}

/* Sticky offset helper for jump-to-anchor under sticky header */
.tla-anchor-target { scroll-margin-top: calc(var(--topbar-h) + var(--header-h) + 16px); }