/* ============================================
   Navarro & Sons — estilos de sitio
   Consume unicamente variables de la Capa System / Component
   (src/design-tokens/tokens.*.css). Nunca declarar color, espaciado,
   radio o sombra crudo aqui.
   ============================================ */

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

body {
  margin: 0;
  font-family: var(--font-font-family-body), system-ui, sans-serif;
  font-size: var(--font-font-size-body-base);
  color: var(--color-typography-paragraph);
  background: var(--color-backgrounds-principal);
  line-height: 1.5;
}

h1,
h2,
h3 {
  font-family: var(--font-font-family-headings), serif;
  color: var(--color-typography-heading);
}

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

a {
  color: var(--color-typography-link);
}

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (max-width: 1024px) {
  .container {
    padding: 0 var(--space-ml);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* ---------- Header / navegacion (organismo) ----------
   2 modos, elegidos con un modifier en el HTML segun el fondo
   sobre el que se monta el header:
   - .site-header--dark  -> para fondos oscuros (logo y nav claros)
   - .site-header--light -> para fondos claros (logo y nav oscuros)
   Los nav links reusan el componente "menu-label" del sistema
   (mismo componente detras de los items de menu). */
.site-header {
  padding: var(--space-md) 0;
  position: sticky;
  top: 0;
  z-index: 10;
  transition: background-color 0.25s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-header__logo {
  width: 292px;
  height: auto;
  display: block;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: var(--font-font-size-body-lg);
  cursor: pointer;
}

.site-nav__list {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-label {
  font-family: var(--font-styles-label-large-font-family), sans-serif;
  font-weight: var(--font-styles-label-large-font-weight);
  font-size: var(--font-styles-label-large-font-size);
  line-height: var(--font-styles-label-large-line-height);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* modo dark: header sobre fondo oscuro */
.site-header--dark {
  background: var(--color-backgrounds-contrast);
}

.site-header--dark .nav-toggle {
  color: var(--menu-label-text-color-contrast);
}

.site-header--dark .menu-label {
  color: var(--menu-label-text-color-contrast);
}

.site-header--dark .menu-label:hover,
.site-header--dark .menu-label[aria-current="page"] {
  color: var(--color-foregrounds-disabled);
}

/* modo overlay: solo el home. El header flota transparente sobre el hero
   (position:fixed en vez de sticky, para que el hero arranque en el tope
   real del viewport) y se rellena con background.contrast al hacer scroll
   (clase is-scrolled agregada por js/main.js). */
.site-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
}

.site-header--overlay.is-scrolled {
  background: var(--color-backgrounds-contrast);
}

/* modo light: header sobre fondo claro */
.site-header--light {
  background: var(--color-backgrounds-principal);
}

.site-header--light .nav-toggle {
  color: var(--menu-label-text-color-default);
}

.site-header--light .menu-label {
  color: var(--menu-label-text-color-default);
}

.site-header--light .menu-label:hover,
.site-header--light .menu-label[aria-current="page"] {
  color: var(--color-foregrounds-disabled);
}

/* "Navarro Holding" agrupa Nosotros / Ecosistema Empresarial / Desarrollos
   Estrategicos en un dropdown dentro del nav. El trigger reusa "menu-label"
   (misma tipografia y color que el resto de los items); el panel y sus
   opciones reusan el componente "dropdown" del sistema. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-dropdown__trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.nav-dropdown.is-open .nav-dropdown__trigger::after {
  transform: rotate(-135deg);
}

.nav-dropdown:has([aria-current="page"]) .nav-dropdown__trigger {
  color: var(--color-foregrounds-disabled);
}

.site-header--light .nav-dropdown:has([aria-current="page"]) .nav-dropdown__trigger {
  color: var(--color-foregrounds-disabled);
}

.dropdown {
  position: absolute;
  top: calc(100% + var(--space-sm));
  left: 0;
  min-width: 240px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dropdown-box-spacing-large-gap);
  background: var(--dropdown-box-background-color-default);
  border: 1px solid var(--dropdown-box-border-color-default);
  border-radius: var(--dropdown-box-border-radius-large);
  padding: var(--dropdown-box-spacing-large-vertical) var(--dropdown-box-spacing-large-horizontal);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nav-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-option {
  display: block;
  font-family: var(--font-styles-label-large-font-family), sans-serif;
  font-weight: var(--font-styles-label-large-font-weight);
  font-size: var(--font-styles-label-large-font-size);
  line-height: var(--font-styles-label-large-line-height);
  text-decoration: none;
  color: var(--dropdown-options-text-color-default);
  background: var(--dropdown-options-background-color-default);
  border-radius: var(--dropdown-options-border-radius-large);
  padding: var(--space-xs);
  transition: color 0.15s ease, background-color 0.15s ease;
}

.dropdown-option:hover,
.dropdown-option[aria-current="page"] {
  color: var(--dropdown-options-text-color-hover);
  background: var(--dropdown-options-background-color-hover);
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xxs);
    width: var(--size-ml);
    height: var(--size-ml);
  }

  .nav-toggle__bar {
    width: var(--size-sm);
    height: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .site-header__logo {
    width: 190px;
  }

  .site-header .container {
    position: relative;
    padding: 0 var(--space-sm);
  }

  .site-header {
    margin: var(--space-md);
    padding: var(--space-sm) 0;
    border: 1px solid var(--color-borders-alternative);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: min-height 0.35s ease;
  }

  .site-header--overlay {
    background: var(--color-backgrounds-contrast);
  }

  .site-header:has(.site-nav.is-open) {
    min-height: calc(100vh - (var(--space-md) * 2));
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.35s ease, opacity 0.25s ease, visibility 0s linear 0.35s;
  }

  .site-nav.is-open {
    max-height: 100vh;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }

  .site-nav__list {
    padding: var(--space-lm) var(--space-ml);
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
  }

  .menu-label {
    display: block;
    padding: var(--space-xs) 0;
    font-family: var(--font-styles-subtitle-large-font-family), serif;
    font-weight: var(--font-styles-subtitle-large-font-weight);
    font-size: var(--font-styles-subtitle-large-font-size);
    line-height: var(--font-styles-subtitle-large-line-height);
  }

  .dropdown-option {
    font-family: var(--font-styles-subtitle-large-font-family), serif;
    font-weight: var(--font-styles-subtitle-large-font-weight);
    font-size: var(--font-styles-subtitle-large-font-size);
    line-height: var(--font-styles-subtitle-large-line-height);
    background: transparent;
  }

  .site-header--dark .dropdown-option,
  .site-header--dark .dropdown-option:hover {
    color: var(--menu-label-text-color-contrast);
  }

  .site-header--light .dropdown-option,
  .site-header--light .dropdown-option:hover {
    color: var(--menu-label-text-color-default);
  }

  .dropdown-option:hover {
    background: transparent;
  }

  .dropdown-option[aria-current="page"],
  .dropdown-option[aria-current="page"]:hover {
    color: var(--color-foregrounds-disabled);
    background: transparent;
  }

  .button {
    font-size: var(--font-styles-text-button-small-font-size);
    line-height: var(--font-styles-text-button-small-line-height);
  }

  .nav-dropdown {
    position: static;
  }

  .nav-dropdown__trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown__trigger::after {
    width: var(--size-xs);
    height: var(--size-xs);
  }

  .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    min-width: 0;
    border: none;
    background: none;
    padding: var(--space-sm) 0 var(--space-sm) var(--space-sm);
  }

  .nav-dropdown.is-open .dropdown {
    display: flex;
  }
}

/* ---------- Hero (organismo) ----------
   Full width/full height con foto de fondo + degrade de arte especifico
   para esta imagen (no es un color reusable del sistema, por eso va crudo
   en el linear-gradient en vez de un token). El texto reusa color-typography-
   contrast (igual que header dark / footer) porque queda sobre el tramo mas
   oscuro del degrade. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(to right, rgba(51, 51, 51, 1) 30%, rgba(51, 51, 51, 0.35) 100%),
    url("../assets/navarro-sons-hero-orinoquia-colombia.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 90%;
  gap: var(--space-lm);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: var(--space-md);
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-styles-label-large-font-family), sans-serif;
  font-weight: var(--font-styles-label-large-font-weight);
  font-size: var(--font-styles-label-large-font-size);
  line-height: var(--font-styles-label-large-line-height);
  color: var(--color-typography-contrast);
}

.hero__tags li:not(:last-child)::after {
  content: "●";
  margin-left: var(--space-xs);
}

.hero__title {
  font-family: var(--font-styles-display-large-font-family), serif;
  font-weight: var(--font-styles-display-large-font-weight);
  font-size: var(--font-styles-display-large-font-size);
  line-height: var(--font-styles-display-large-line-height);
  color: var(--color-typography-contrast);
  margin: 0;
  overflow-wrap: break-word;
}

.hero__subtitle {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-line-height-body-lg);
  color: var(--color-typography-contrast);
  max-width: 60ch;
  margin: 0;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .hero__content {
    width: 100%;
  }

  .hero__title {
    font-size: var(--font-font-size-headings-lg);
    line-height: var(--font-line-height-headings-lg);
  }

  .hero__subtitle {
    font-size: var(--font-styles-subtitle-small-font-size);
    line-height: var(--font-line-height-body-md);
  }

  .hero__tags {
    font-size: var(--font-styles-label-small-font-size);
    line-height: var(--font-styles-label-small-line-height);
  }
}

/* ---------- Page hero (organismo, paginas internas) ----------
   Hero compacto (no full-bleed) para paginas internas, distinto de
   .hero (full-bleed con imagen, solo home). El fondo (.page-hero) va
   a todo el ancho del viewport; el contenido (.page-hero__inner) usa
   el mismo patron que .container (max-width 1440, centrado) pero con
   padding horizontal propio, mas generoso, que lo hace ver mas
   compacto que el resto de las secciones del sitio. Reusa
   .heading-section (con --on-dark solo en la variante dark) para el
   bloque subtitulo+titulo y clona el patron de parrafos de
   .location__body para el bloque de texto. Padding horizontal
   simetrico, confirmado en los 5 heros de Figma (colapsa a
   --space-lg en mobile). Dos variantes de fondo elegidas con
   modifier:
   - .page-hero--dark  -> fondo solido backgrounds-contrast, texto
     contrast (usa heading-section--on-dark en el HTML)
   - .page-hero--light -> transparente, sobre el fondo claro de la
     pagina (texto default: heading-section sin --on-dark) */
.page-hero {
  padding: var(--space-xxl) 0;
}

.page-hero--dark {
  background: var(--color-backgrounds-contrast);
}

.page-hero--light {
  background: transparent;
}

.page-hero__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-xxl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.page-hero__body p {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

.page-hero--dark .page-hero__body {
  color: var(--color-foregrounds-contrast);
}

@media (max-width: 1024px) {
  .page-hero__inner {
    padding: 0 var(--space-lg);
  }
}

@media (max-width: 768px) {
  .page-hero {
    padding: var(--space-lg) 0;
  }

  .page-hero__inner {
    width: 100%;
    padding: 0 var(--space-md);
  }
}

/* ---------- Secciones ----------
   .section: base heredado (queda igual que siempre estuvo) -- lo siguen
   usando .section--facts y .section--business-areas, que ya tienen su
   propio override individual de padding y no se tocan.
   .section-main: secciones genericas inmediatamente debajo del hero (el
   hero ya trae su propio padding-bottom, asi que estas usan un valor mas
   chico para no duplicar el espacio).
   .section-content: el resto de las secciones genericas sin hero encima
   (CTA final, teasers, etc), mismo valor que .section siempre tuvo. */
.section {
  padding: var(--space-xl) 0;
}

.section-main {
  padding: var(--space-lm) 0;
}

.section-content {
  padding: var(--space-xl) 0;
}

.section--muted {
  background: var(--color-backgrounds-secondary);
}

.section--business-areas {
  padding-bottom: var(--space-xxl);
}

.section h2 {
  font-size: var(--font-font-size-headings-sm);
  line-height: var(--font-line-height-headings-sm);
  margin-top: 0;
}

.grid {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ---------- Card (molecula) ---------- */
.card {
  --card-bg: var(--color-backgrounds-secondary);
  --card-border: var(--color-borders-subtle);
  --card-radius: var(--radius-md);

  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-md);
}

.card h3 {
  margin-top: 0;
  font-size: var(--font-font-size-headings-xs);
}

/* ---------- Button (atomo, tokens de Figma) ---------- */
.button {
  display: inline-flex;
  align-items: center;
  gap: var(--button-spacing-large-gap);
  border: 1px solid transparent;
  border-radius: var(--button-border-radius-large);
  padding: var(--button-spacing-large-vertical) var(--button-spacing-large-horizontal);
  font-family: var(--font-styles-text-button-large-font-family), sans-serif;
  font-weight: var(--font-styles-text-button-large-font-weight);
  font-size: var(--font-styles-text-button-large-font-size);
  line-height: var(--font-styles-text-button-large-line-height);
  text-decoration: none;
  cursor: pointer;
}

.button__icon {
  max-width: var(--button-sizing-icon-large);
  max-height: var(--button-sizing-icon-large);
  width: auto;
  height: auto;
  display: block;
}

.button--primary {
  background: var(--button-background-color-primary-default);
  color: var(--button-text-color-primary-default);
}

.button--primary:hover {
  background: var(--button-background-color-primary-hover);
  color: var(--button-text-color-primary-hover);
}

.button--secondary {
  background: var(--button-background-color-secondary-default);
  color: var(--button-text-color-secondary-default);
  border-color: var(--button-border-color-secondary-default);
}

.button--secondary:hover {
  background: var(--button-background-color-secondary-hover);
  color: var(--button-text-color-secondary-hover);
}

.button--ghost-dark {
  background: var(--button-background-color-ghost-dark-default);
  color: var(--button-text-color-ghost-dark-default);
  border-color: var(--button-border-color-ghost-dark-default);
}

/* ---------- Contacto (organismo) ---------- */
.contact-info__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.contact-info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-right: var(--space-md);
  border-right: 1px solid var(--color-borders-neutral);
}

.contact-info-item:last-child {
  border-right: none;
  padding-right: 0;
}

.contact-info-item__subtitle {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  margin: 0;
}

.contact-info-item__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

.contact-info-item__body--tertiary {
  color: var(--color-foregrounds-tertiary);
}

.contact-info-item__body--secondary {
  color: var(--color-foregrounds-secondary);
}

@media (max-width: 768px) {
  .contact-info__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lm);
  }

  .contact-info-item {
    border-right: none;
    padding-right: 0;
  }
}

/* ---------- Footer (organismo) ----------
   2 columnas: izquierda = logo + copyright, derecha = nav + fila de partners.
   Los links reusan "menu-label" en su estado "contrast" (el footer tiene el
   mismo fondo negro que el header en modo dark, asi que el mismo estado ya
   probado ahi aplica igual aca). La fila de partners es un placeholder
   estructural hasta que lleguen los assets/copy reales. */
.site-footer {
  background: var(--color-primary-subtle);
  color: var(--color-foregrounds-contrast);
  padding: var(--space-lm) 0;
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.site-footer__logo {
  width: 291px;
  height: auto;
  display: block;
}

.site-footer__copyright {
  font-size: var(--font-font-size-body-xs);
  line-height: var(--font-line-height-body-xs);
  margin: 0;
}

.site-footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer .menu-label {
  color: var(--menu-label-text-color-contrast);
}

.site-footer__partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-footer__partner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 220px;
  height: auto;
  gap: var(--space-xs);
}

.site-footer__partner-logo {
  display: block;
  height: auto;
  flex-shrink: 0;
}

.site-footer__partner-caption {
  font-size: var(--font-font-size-body-xs);
  line-height: var(--font-line-height-body-xs);
  margin: 0;
}

@media (max-width: 768px) {
  .site-footer .container {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Heading (atomo, tokens de Figma) ----------
   Texto de heading reusable en cualquier parte del sitio (no exclusivo de
   heading-section). Variantes de tamaño --large/--small con los tokens
   font-styles-heading-large/small. --large baja a los valores de --small
   en mobile (mismo patron que .hero__title), asi que alcanza con usar
   --large en el HTML sin necesidad de swap de clase en la mayoria de los casos. */
.heading {
  margin: 0;
  color: var(--color-foregrounds-principal);
}

.heading.heading--large {
  font-family: var(--font-styles-heading-large-font-family), serif;
  font-weight: var(--font-styles-heading-large-font-weight);
  font-size: var(--font-styles-heading-large-font-size);
  line-height: var(--font-styles-heading-large-line-height);
}

.heading.heading--small {
  font-family: var(--font-styles-heading-large-font-family), serif;
  font-weight: var(--font-styles-heading-large-font-weight);
  font-size: var(--font-styles-heading-small-font-size);
  line-height: var(--font-styles-heading-large-line-height);
}

@media (max-width: 768px) {
  .heading.heading--large {
    font-size: var(--font-styles-heading-small-font-size);
    line-height: var(--font-styles-heading-small-line-height);
  }
}

.heading--on-dark {
  color: var(--color-foregrounds-principal);
}

/* ---------- Heading section (molecula, reusable en todas las paginas) ----------
   Subtitulo + titulo. Dos variantes de alineacion elegidas con modifier
   (--start / --center) y una variante de color para fondos oscuros
   (--on-dark, cambia solo el color del titulo; el subtitulo se mantiene
   foregrounds-tertiary en ambos casos). */
.heading-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.heading-section--start {
  align-items: flex-start;
  text-align: left;
}

.heading-section--center {
  align-items: center;
  text-align: center;
}

.heading-section__subtitle {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  color: var(--color-foregrounds-tertiary);
  margin: 0;
}

.heading-section--on-dark .heading-section__title {
  color: var(--color-foregrounds-contrast);
}

/* ---------- Facts (organismo, home) ---------- */
.section--facts {
  padding: var(--space-xxl) 0;
}

.facts-section__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lm);
}

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  background: var(--color-backgrounds-neutral);
  border: 1px solid var(--color-borders-alternative);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-sm);
  color: var(--color-foregrounds-secondary);
}

.fact__number {
  font-family: var(--font-styles-display-large-font-family), serif;
  font-weight: var(--font-styles-display-large-font-weight);
  font-size: var(--font-styles-display-large-font-size);
  line-height: var(--font-styles-display-large-line-height);
  color: var(--color-foregrounds-tertiary);
  margin: 0;
}

.fact__text {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  color: inherit;
  margin: 0;
}

@media (max-width: 768px) {
  .facts {
    grid-template-columns: 1fr;
  }
}

/* ---------- Areas de negocio (organismo, home) ---------- */
.business-areas {
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
}

.business-areas__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
}

.business-areas__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  width: 100%;
}

@media (max-width: 768px) {
  .business-areas__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .business-areas__grid {
    display: flex;
    grid-template-columns: unset;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-xs);
  }

  .business-areas__grid::-webkit-scrollbar {
    display: none;
  }

  .business-thumb {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

/* ---------- Business thumb (molecula, reusable) ---------- */
.business-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-backgrounds-principal);
  border: 1px solid var(--color-borders-subtle);
  border-radius: var(--radius-sm);
}

.business-thumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: var(--color-backgrounds-secondary);
  border: 1px solid var(--color-borders-subtle);
  border-radius: var(--radius-xs);
}

.business-thumb__icon img {
  max-width: var(--size-md);
  max-height: var(--size-md);
  width: auto;
  height: auto;
  display: block;
}

.business-thumb__title {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  color: var(--font-colors-headings);
  margin: 0;
}

/* ---------- Ubicacion / Orinoquia (organismo, home) ----------
   Full width/full height con foto de fondo + degrade de arte especifico
   para esta imagen (mismo criterio que .hero: no es un color reusable
   del sistema, por eso va crudo en el linear-gradient en vez de un token). */
.location {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-xl) 0;
  background-image:
    linear-gradient(to right, rgba(38, 38, 38, 0.95) 39.104%, rgba(38, 38, 38, 0.4) 100%),
    url("../assets/navarro-sons-meta-colombia.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.location__row {
  display: flex;
  gap: var(--space-xl);
  align-items: flex-start;
  width: 100%;
}

.location__intro {
  width: 600px;
  flex-shrink: 0;
}

.location__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
  flex: 1;
  min-width: 0;
}

.location__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  color: var(--color-foregrounds-contrast);
}

.location__body p {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

.location__content .button {
  align-self: flex-start;
}

@media (max-width: 768px) {
  .location {
    padding: var(--space-lg) 0;
  }

  .location__row {
    flex-direction: column;
    gap: var(--space-lm);
  }

  .location__intro {
    width: 100%;
  }
}

/* ---------- Desarrollos Estrategicos (organismo, home) ---------- */
.strategic-developments {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lm);
}

.strategic-developments__intro {
  width: 798px;
  max-width: 100%;
}

.strategic-developments__grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-sm);
  width: 100%;
}

@media (max-width: 768px) {
  .strategic-developments__grid {
    flex-direction: column;
    gap: var(--space-smd);
  }

  .strategic-card {
    flex: none;
    width: 100%;
    height: auto;
  }
}

/* ---------- Strategic card (molecula, reusable) ---------- */
.strategic-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-smd);
  flex: 1;
  height: 380px;
  padding: var(--space-ml) var(--space-md);
  border-radius: var(--radius-sm);
  border: 1px solid;
}

.strategic-card--light {
  background: var(--color-gradient-silver);
  border-color: var(--color-primary-middle);
}

.strategic-card--dark {
  background: var(--color-gradient-gold);
  border-color: var(--color-complementary-middle);
}

.strategic-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.strategic-card__eyebrow {
  font-family: var(--font-styles-paragraph-extra-small-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-extra-small-font-weight-regular);
  font-size: var(--font-styles-paragraph-extra-small-font-size);
  line-height: var(--font-styles-paragraph-extra-small-line-height);
  color: var(--color-foregrounds-tertiary);
  text-transform: uppercase;
  margin: 0;
}

.strategic-card--dark .strategic-card__eyebrow {
  color: var(--color-complementary-subtle);
}

.strategic-card__title {
  font-family: var(--font-styles-title-small-font-family), serif;
  font-weight: var(--font-styles-title-small-font-weight);
  font-size: var(--font-styles-title-small-font-size);
  line-height: var(--font-styles-title-small-line-height);
  color: var(--font-colors-headings);
  margin: 0;
}

.strategic-card--dark .strategic-card__title {
  color: var(--color-foregrounds-contrast);
}

.strategic-card__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  color: var(--color-typography-paragraph);
  margin: 0;
}

.strategic-card--dark .strategic-card__body {
  color: var(--color-foregrounds-contrast);
}

/* ---------- Presencia Internacional (organismo, home) ---------- */
.presence {
  background-image: url("../assets/worldwide-map.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--space-xl) 0;
  margin-top: var(--space-lm);
  margin-bottom: var(--space-lm);
}

.presence__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lm);
}

.presence__title {
  text-align: center;
}

.presence__grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  width: 100%;
}

@media (max-width: 768px) {
  .presence__grid {
    flex-direction: column;
  }
}

/* ---------- Presence card (molecula, reusable) ---------- */
.presence-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  flex: 1;
  padding: var(--space-md);
  background: var(--color-transparency-primary);
  border: 1px solid var(--color-borders-neutral);
  border-radius: var(--radius-sm);
}

.presence-card--us {
  background: var(--color-transparency-complementary);
  border-color: var(--color-borders-alternative);
}

.presence-card__flag {
  width: var(--size-lg);
  height: var(--size-lg);
  display: block;
}

.presence-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

.presence-card__name {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  color: var(--font-colors-headings);
  margin: 0;
}

.presence-card__tagline {
  font-family: var(--font-styles-paragraph-extra-small-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-extra-small-font-weight-regular);
  font-size: var(--font-styles-paragraph-extra-small-font-size);
  line-height: var(--font-styles-paragraph-extra-small-line-height);
  color: var(--color-foregrounds-secondary);
  text-transform: uppercase;
  margin: 0;
}

.presence-card__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  color: var(--color-typography-paragraph);
  margin: 0;
}

/* ---------- Call to Action (organismo, home) ---------- */
.cta {
  background: var(--color-gradient-silver);
}

.cta--light {
  background: var(--color-backgrounds-principal);
}

.cta--light .cta__body {
  color: var(--color-foregrounds-principal);
}

.cta__row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xxxl);
}

.cta__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
}

.cta__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  color: var(--color-foregrounds-secondary);
  margin: 0;
}

.cta .button {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cta__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lm);
  }
}

/* ---------- Bento (organismo, Nosotros) ----------
   Grid tipo bento: panel de historia (fondo contrast) + columna con
   mision/vision apiladas (fondo secondary y tertiary), mismo ancho
   los dos. Los fondos de los paneles son full-bleed (igual que
   .hero/.location); el contenido interno respeta el mismo tope de
   1440px centrado que .container via el padding calculado en los
   bordes exteriores (izquierdo de historia, derecho de mision/
   vision) -- ese calc cae a --space-lg en viewports angostos.
   align-items:stretch iguala la altura del panel de historia a la
   suma de mision+vision. En mobile se apila todo en una columna. */
.bento {
  display: flex;
  align-items: stretch;
}

.bento__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-smd);
  padding: var(--space-lg);
}

.bento__history {
  flex: 1;
  min-width: 0;
  background: var(--color-backgrounds-subtle);
  color: var(--color-foregrounds-secondary);
  padding-left: max(var(--space-lg), calc((100vw - 1440px) / 2 + var(--space-lg)));
}

.bento__group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.bento__mision {
  background: var(--color-backgrounds-secondary);
  padding-right: max(var(--space-lg), calc((100vw - 1440px) / 2 + var(--space-lg)));
}

.bento__vision {
  background: var(--color-backgrounds-tertiary);
  padding-right: max(var(--space-lg), calc((100vw - 1440px) / 2 + var(--space-lg)));
}

.bento__title {
  font-family: var(--font-styles-title-large-font-family), serif;
  font-weight: var(--font-styles-title-large-font-weight);
  font-size: var(--font-styles-title-large-font-size);
  line-height: var(--font-styles-title-large-line-height);
  margin: 0;
}

.bento__history .bento__title {
  color: var(--color-foregrounds-principal);
}

.bento__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.bento__body p {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

@media (max-width: 768px) {
  .bento {
    flex-direction: column;
  }

  .bento__history {
    width: 100%;
  }
}

/* ---------- Nuestros valores (organismo, Nosotros) ---------- */
.values {
  padding: var(--space-xxxl) 0;
}

.values__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-smd);
  width: 100%;
}

@media (max-width: 768px) {
  .values__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Value card (molecula, reusable) ---------- */
.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-smd);
  background: var(--color-backgrounds-principal);
  border-radius: var(--radius-sm);
}

.value-card__icon {
  width: 32px;
  height: 32px;
  display: block;
}

.value-card__title {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  margin: 0;
}

.value-card__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

/* ---------- Capacidades Corporativas (organismo, Nosotros) ----------
   Fondo full-bleed (como .page-hero/.bento); el contenido
   (heading-section + grid) va capado a 1440px centrado en
   .corporate-skills__inner. */
.corporate-skills {
  background: var(--color-backgrounds-tertiary);
  color: var(--color-foregrounds-secondary);
  padding: var(--space-xl) 0;
}

.corporate-skills__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
}

.corporate-skills__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lm);
  padding: 0 var(--space-xxl);
}

@media (max-width: 1024px) {
  .corporate-skills__inner {
    padding: 0 var(--space-ml);
  }

  .corporate-skills__grid {
    padding: 0 var(--space-lg);
  }
}

@media (max-width: 768px) {
  .corporate-skills__inner {
    padding: 0 var(--space-md);
  }

  .corporate-skills__grid {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* ---------- Skill item (molecula, reusable) ---------- */
.skill-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.skill-item__title {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  color: var(--color-foregrounds-principal);
  margin: 0;
}

.skill-item__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

/* ---------- Nuestra Ubicacion Estrategica (organismo, Nosotros) ----------
   Texto + imagen a dos columnas (a diferencia de .location del home, que
   es full-bleed con foto de fondo). align-items:stretch + object-fit:cover
   iguala la altura de la imagen a la del bloque de texto. */
.strategic-location {
  padding: var(--space-xxxl) 0;
}

.strategic-location__row {
  display: flex;
  align-items: stretch;
  gap: var(--space-xxl);
}

.strategic-location__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
  flex: 1;
  min-width: 0;
}

.strategic-location__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.strategic-location__body p {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

.strategic-location__image {
  flex: 1;
  min-width: 0;
  object-fit: cover;
  border-radius: var(--radius-md);
}

@media (max-width: 768px) {
  .strategic-location__row {
    flex-direction: column;
  }

  .strategic-location__image {
    width: 100%;
    height: 320px;
  }
}

/* ---------- Business cards (organismo, Ecosistema Empresarial) ----------
   Grid de 8 cards (icono + titulo + body), listado completo de areas de
   negocio del grupo. El icono reusa .business-thumb__icon tal cual (ya
   definido para el home). Padding/gap de la card confirmados a ojo desde
   screenshot, sin Figma disponible. */
.business-cards__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  padding-bottom: var(--space-xxl);
}

@media (max-width: 1024px) {
  .business-cards__grid {
    padding-bottom: var(--space-xl);
  }
}

@media (max-width: 768px) {
  .business-cards__grid {
    grid-template-columns: 1fr;
    padding-bottom: var(--space-lg);
  }
}

.business-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-backgrounds-principal);
  border: 1px solid var(--color-borders-subtle);
  border-radius: var(--radius-sm);
}

.business-card__title {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  margin: 0;
}

.business-card__body {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

/* ---------- Ecosistema (organismo, Ecosistema Empresarial) ----------
   Listado de empresas del grupo: foto (430x600, overlay degradado +
   logo) + columna de texto (badge + titulo + descripcion). El overlay
   son 2 gradientes negros verticales apilados sobre la foto -- misma
   tecnica cruda que .hero, documentada ahi como "arte especifico" y
   no reusable via token -- definidos inline junto con la foto de cada
   item (background-image no admite mezclar CSS y HTML attr, y asi
   queda igual de explicito que .hero). El item del medio invierte el
   lado con el modifier --reverse y agrega un checklist de 2 columnas. */
.ecosystem-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-bottom: var(--space-xxxl);
}

.ecosystem-item {
  display: flex;
  gap: var(--space-xxl);
}

.ecosystem-item--reverse {
  flex-direction: row-reverse;
}

.ecosystem-item__media {
  width: 430px;
  height: 600px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  padding: var(--space-lg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-sm);
}

.ecosystem-item__media--center {
  justify-content: center;
}

.ecosystem-item__logo {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
}

.ecosystem-item__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
}

.ecosystem-item__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ecosystem-item__title {
  font-family: var(--font-styles-title-large-font-family), serif;
  font-weight: var(--font-styles-title-large-font-weight);
  font-size: var(--font-styles-title-large-font-size);
  line-height: var(--font-styles-title-large-line-height);
  margin: 0;
}

.ecosystem-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ecosystem-item__body p {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

.ecosystem-item__checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
}

.checklist-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-styles-paragraph-small-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-small-font-weight-bold);
  font-size: var(--font-styles-paragraph-small-font-size);
  line-height: var(--font-styles-paragraph-small-line-height);
}

.checklist-item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ---------- Badge (atomo, reusable) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-sm);
  background: var(--color-backgrounds-secondary);
  border: 1px solid var(--color-borders-neutral);
  border-radius: var(--radius-full);
  font-family: var(--font-styles-label-large-font-family), sans-serif;
  font-weight: var(--font-styles-label-large-font-weight);
  font-size: var(--font-styles-label-large-font-size);
  line-height: var(--font-styles-label-large-line-height);
}

.badge img {
  width: 16px;
  height: 16px;
  display: block;
}

@media (max-width: 768px) {
  .ecosystem-item,
  .ecosystem-item--reverse {
    flex-direction: column;
    gap: var(--space-md);
  }

  .ecosystem-item__media {
    width: 100%;
    height: 320px;
  }

  .ecosystem-item__checklist {
    grid-template-columns: 1fr;
  }
}

/* ---------- Strategic detail (organismo, Desarrollos Estrategicos) ----------
   Version en detalle (solo texto) de los .strategic-card teaser del
   home: eyebrow + titulo + descripcion, y opcionalmente un bloque
   extra (subtitulo + checklist, reusando .ecosystem-item__checklist/
   .checklist-item tal cual). El eyebrow reusa .strategic-card__eyebrow
   (ya existente, mismo estilo). */
/* Cada desarrollo estrategico es su propia seccion full-bleed (like
   .page-hero), alternando fondo claro/oscuro por item -- por eso el
   modifier va en la seccion, no en un wrapper compartido. */
.strategic-detail-section {
  padding: var(--space-xl) 0;
}

.strategic-detail-section--light {
  background: var(--color-backgrounds-secondary);
}

.strategic-detail-section--dark {
  background: var(--color-backgrounds-subtle);
  color: var(--color-foregrounds-secondary);
}

.strategic-detail-section--dark .ecosystem-item__title,
.strategic-detail-section--dark .strategic-detail__subtitle {
  color: var(--color-foregrounds-principal);
}

.strategic-detail-section__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

@media (max-width: 1024px) {
  .strategic-detail-section__inner {
    padding: 0 var(--space-ml);
  }
}

@media (max-width: 768px) {
  .strategic-detail-section__inner {
    padding: 0 var(--space-md);
  }
}

.strategic-detail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lm);
}

.strategic-detail__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.strategic-detail__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.strategic-detail__eyebrow {
  font-family: var(--font-styles-paragraph-small-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-small-font-weight-regular);
  font-size: var(--font-styles-paragraph-small-font-size);
  line-height: var(--font-styles-paragraph-small-line-height);
  color: var(--color-foregrounds-tertiary);
  text-transform: uppercase;
  margin: 0;
}

.strategic-detail__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.strategic-detail__body p {
  font-family: var(--font-styles-paragraph-large-font-family), sans-serif;
  font-weight: var(--font-styles-paragraph-large-font-weight-regular);
  font-size: var(--font-styles-paragraph-large-font-size);
  line-height: var(--font-styles-paragraph-large-line-height);
  margin: 0;
}

.strategic-detail__extra {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.strategic-detail__subtitle {
  font-family: var(--font-styles-subtitle-large-font-family), serif;
  font-weight: var(--font-styles-subtitle-large-font-weight);
  font-size: var(--font-styles-subtitle-large-font-size);
  line-height: var(--font-styles-subtitle-large-line-height);
  margin: 0;
}

/* ---------- Scroll reveal (utilidad, JS progresivo) ----------
   .reveal solo arranca oculto si JS confirmo que corrio (clase
   .js-reveal-ready en <html>, agregada por js/main.js apenas se
   ejecuta el script) -- si JS no corre, el contenido queda visible
   por default, nunca bloqueado. */
.js-reveal-ready .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav,
  .site-nav.is-open,
  .site-header,
  .nav-toggle__bar {
    transition: none;
  }
}