/* =========================================================
   COAGROCARDINAL — Design System v1.0 tokens
   ========================================================= */
:root {
  /* Color — primarios */
  --azul-cardinal: #0D2B3E;
  --dorado-cafe: #C9A84C;
  --crema-campo: #F5F0E8;

  /* Color — soporte */
  --verde-origen: #1B4332;
  --blanco: #FFFFFF;
  --gris-institucional: #4A4A4A;

  /* Footer / negro institucional */
  --negro: #141414;

  /* Opacidades de marca usadas puntualmente */
  --azul-cardinal-80: rgba(13, 43, 62, 0.8);
  --azul-cardinal-40: rgba(13, 43, 62, 0.4);
  --dorado-10: rgba(201, 168, 76, 0.1);
  --blanco-10: rgba(255, 255, 255, 0.1);
  --blanco-20: rgba(255, 255, 255, 0.2);

  /* Tipografía */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espaciado — sistema 02 */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Ancho de contenido (mobile-first, centrado en pantallas más grandes) */
  --content-max: 480px;
  --side-pad: 24px;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--azul-cardinal);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Contenedor centrado — mantiene la proporción mobile en pantallas anchas */
main > section,
.footer,
.navbar__inner,
.mobile-menu__header,
.mobile-menu__list {
  width: 100%;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   Botones
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 24px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 4px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.btn--primary {
  background: var(--dorado-cafe);
  color: var(--azul-cardinal);
}
.btn--primary:hover { opacity: 0.9; }
.btn--primary:focus-visible { outline: 2px solid var(--azul-cardinal); outline-offset: 2px; }

.btn--secondary {
  background: transparent;
  color: var(--dorado-cafe);
  border: 1px solid var(--dorado-cafe);
}
.btn--secondary:hover { background: var(--dorado-10); }
.btn--secondary:focus-visible { outline: 2px solid var(--dorado-cafe); outline-offset: 2px; }

/* =========================================================
   Enlaces con flecha
   ========================================================= */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--azul-cardinal);
}
.link-arrow--gold { color: var(--dorado-cafe); }
.link-arrow span { transition: transform 0.15s ease; }
.link-arrow:hover span { transform: translateX(3px); }

/* =========================================================
   Títulos de sección
   ========================================================= */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.15;
  color: var(--azul-cardinal);
  margin-bottom: var(--sp-24);
}
.section-title--light { color: var(--blanco); }
.section-title--on-green { color: var(--blanco); }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--azul-cardinal);
  border-bottom: 2px solid var(--dorado-cafe);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--side-pad);
}
.navbar__brand,
.footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.navbar__logo,
.footer__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
}
.navbar__wordmark,
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--dorado-cafe);
  white-space: nowrap;
}
.navbar__toggle {
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Nav horizontal de desktop — oculto en mobile por defecto.
   Solo existe en el HTML de las páginas ya adaptadas a desktop. */
.navbar__links { display: none; }
.navbar__cta-group { display: none; }

/* Elementos que solo existen en la versión desktop del Home —
   ocultos acá para que mobile se vea exactamente igual que antes. */
.mission__image { display: none; }
.story-split__quote { display: none; }
.footer__link-cols { display: none; }
.text-block__image { display: none; }

/* =========================================================
   MENÚ MOBILE (overlay)
   ========================================================= */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--azul-cardinal);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.mobile-menu.is-open { transform: translateY(0); }

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--side-pad);
}
.mobile-menu__close { color: var(--blanco); }

.mobile-menu__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-32);
  padding: var(--sp-32) var(--side-pad);
}
.mobile-menu__list a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  color: var(--blanco);
}
.mobile-menu__list a:hover { color: var(--dorado-cafe); }
.mobile-menu__list a.is-active { color: #B69B4B; }

.mobile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  padding: 0 var(--side-pad) var(--sp-32);
}

body.menu-open { overflow: hidden; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-48) var(--side-pad) var(--sp-64);
  color: var(--blanco);
  background: var(--azul-cardinal);
  background-image: url('../src/cafetalAntioqueño.png');
  background-size: cover;
  background-position: center;
}
.hero__content { max-width: var(--content-max); margin: 0 auto; width: 100%; }

/* Variante sin foto (ej. Contacto): sin min-height gigante ni centrado
   vertical — el título queda compacto, pegado arriba, como corresponde
   cuando no hay imagen de fondo que "llene" el espacio. */
.hero--compact {
  min-height: 0;
  justify-content: flex-start;
  padding-top: var(--sp-64);
  padding-bottom: var(--sp-48);
}

.badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: var(--sp-24);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--dorado-cafe);
  border: 1px solid var(--dorado-cafe);
  border-radius: 3px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.12;
  margin-bottom: var(--sp-16);
}
.hero__text {
  font-size: 15px;
  line-height: 1.55;
  color: #D7DEE3;
  margin-bottom: var(--sp-32);
  max-width: 40ch;
}
.hero__actions { display: flex; flex-direction: column; gap: var(--sp-16); }

.hero__scroll {
  position: absolute;
  bottom: var(--sp-24);
  left: 50%;
  transform: translateX(-50%);
  color: var(--blanco);
  opacity: 0.8;
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* =========================================================
   STATS
   ========================================================= */
.stats {
  background: var(--azul-cardinal);
  color: var(--blanco);
  padding: var(--sp-64) var(--side-pad);
}
.stats__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-16);
}
.stat {
  padding: var(--sp-24) 0;
  border-bottom: 1px solid var(--blanco-10);
}
.stats__grid .stat:nth-last-child(-n+2) { border-bottom: none; }
.stat__number {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 28px;
  color: var(--dorado-cafe);
  margin-bottom: var(--sp-8);
}
.stat__label {
  font-size: 13px;
  line-height: 1.4;
  color: #C7D0D6;
}

/* =========================================================
   MISIÓN
   ========================================================= */
.mission {
  background: var(--crema-campo);
  padding: var(--sp-64) var(--side-pad);
}
.mission .section-title { max-width: 20ch; }
.mission__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-institucional);
  margin-bottom: var(--sp-24);
  max-width: 42ch;
}

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline {
  background: var(--blanco);
  padding: var(--sp-64) var(--side-pad);
}
.timeline .section-title { max-width: 18ch; }

/* Un solo contenedor relativo: la línea es UNA sola barra continua
   detrás de todos los puntos, en vez de un segmento por item. Así
   nunca se corta, sin importar cuánto crezca el texto de cada fila. */
.timeline__list {
  position: relative;
}
.timeline__list::before {
  content: '';
  position: absolute;
  top: 11px;
  bottom: 9px;
  left: 9px;
  width: 2px;
  background: rgba(201, 168, 76, 0.45);
}

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 20px auto auto 1fr;
  column-gap: 10px;
  align-items: start;
  padding-bottom: var(--sp-24);
}
.timeline__item:last-child { padding-bottom: 0; }

.timeline__dot {
  position: relative;
  z-index: 1;
  justify-self: center;
  margin-top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--azul-cardinal);
}
.timeline__dot--current {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  background: var(--dorado-cafe);
}

.timeline__year {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  color: var(--azul-cardinal);
  white-space: nowrap;
}
.timeline__pct {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--dorado-cafe);
  white-space: nowrap;
}
.timeline__desc {
  grid-column: 4;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gris-institucional);
}

/* =========================================================
   SERVICIOS
   ========================================================= */
.services {
  background: var(--azul-cardinal);
  padding: var(--sp-64) var(--side-pad);
}
.services .section-title { max-width: 16ch; }

.service {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--blanco-10);
  transition: opacity 0.15s ease;
}
.service:hover { opacity: 0.8; }
.services__list li:last-child .service { border-bottom: none; }

.service__num {
  font-weight: 700;
  font-size: 13px;
  color: var(--dorado-cafe);
  flex-shrink: 0;
}
.service__body { flex: 1; min-width: 0; }
.service__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--blanco);
  margin-bottom: 2px;
}
.service__desc {
  font-size: 13px;
  color: #A9B4BB;
}
.service__arrow {
  color: var(--dorado-cafe);
  font-size: 16px;
  flex-shrink: 0;
}

.services > .link-arrow { margin-top: var(--sp-24); display: flex; }

/* =========================================================
   IMAGEN DE CULTIVO (separador visual)
   Ahora es un <img> normal — cada página pone su propio src
   directo en el HTML, sin tener que tocar el CSS.
   ========================================================= */
.crop-image {
  display: block;
  height: 260px;
  width: 100%;
  object-fit: cover;
  background-color: var(--verde-origen);
}

/* =========================================================
   CERTIFICACIONES
   ========================================================= */
.certifications {
  background: var(--verde-origen);
  padding: var(--sp-64) var(--side-pad);
}
.certifications .section-title { max-width: 16ch; }

.cert-list { display: flex; flex-direction: column; gap: var(--sp-24); }
.cert { display: flex; align-items: center; gap: var(--sp-16); }
.cert__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--blanco);
  flex-shrink: 0;
}
.cert__name { font-weight: 700; font-size: 15px; color: var(--blanco); }
.cert__meta { font-size: 13px; color: #C9D6CD; margin-top: 2px; }
.certifications > .link-arrow { margin-top: var(--sp-24); display: flex; }

/* =========================================================
   ALIADOS
   ========================================================= */
.partners {
  background: var(--crema-campo);
  padding: var(--sp-64) 0 var(--sp-64) var(--side-pad);
}
.partners .section-title { padding-right: var(--side-pad); max-width: 16ch; }

.partners__track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.partners__scroll {
  display: flex;
  gap: var(--sp-16);
  width: max-content;
  animation: partners-marquee 24s linear infinite;
}
/* El set de logos está duplicado en el HTML: al mover exactamente
   -50% (el ancho de UN set completo) el loop queda perfecto, sin salto. */
@keyframes partners-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.partners__track:hover .partners__scroll,
.partners__track:focus-within .partners__scroll {
  animation-play-state: paused;
}
.partner {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--sp-16);
}
.partner__logo { width: 100%; height: auto; object-fit: contain; }

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta {
  background: var(--azul-cardinal);
  padding: var(--sp-64) var(--side-pad);
  text-align: left;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.15;
  color: var(--blanco);
  margin-bottom: var(--sp-16);
}
.cta__text {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--sp-32);
}
.cta .btn {
  width: 100%;
  padding: 18px 24px;
  border-radius: 12px;
  text-transform: none;
  letter-spacing: normal;
  font-size: 16px;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--negro);
  padding: var(--sp-48) var(--side-pad) var(--sp-24);
}
.footer__brand { margin-bottom: var(--sp-24); }
.footer__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 1px solid var(--blanco-10);
  padding-top: var(--sp-24);
}
.footer__links { display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 14px; color: #D7D7D7; }
.footer__links a:hover { color: var(--dorado-cafe); }
.footer__links a.is-active { color: #B69B4B; }

.footer__social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dorado-cafe);
  color: var(--azul-cardinal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer__social-icon {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.footer__bottom {
  border-top: 1px solid var(--blanco-10);
  margin-top: var(--sp-24);
  padding-top: var(--sp-16);
}
.footer__bottom p { font-size: 12px; color: #8A8A8A; }

/* =========================================================
   COMPONENTES REUTILIZABLES (eyebrow / divider)
   Usados en Quiénes somos y disponibles para otras páginas.
   ========================================================= */
.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dorado-cafe);
  margin-bottom: var(--sp-8);
}

.divider {
  width: 56px;
  height: 2px;
  background: var(--dorado-cafe);
  margin: 0 0 var(--sp-24);
  border: none;
}
.divider--light {
  width: 100%;
  height: 1px;
  background: var(--blanco-10);
}

/* =========================================================
   TEXT BLOCK — bloque genérico de texto (eyebrow opcional +
   título + línea + párrafos). Reutilizado en varias páginas:
   Quiénes somos, Comercialización, etc.
   ========================================================= */
.text-block {
  background: var(--blanco);
  padding: var(--sp-64) var(--side-pad);
}
.text-block .section-title { max-width: 20ch; margin-bottom: var(--sp-16); }
.text-block p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-institucional);
  margin-bottom: var(--sp-16);
}
.text-block p:last-child { margin-bottom: 0; }
.text-block p strong { color: var(--azul-cardinal); }
.text-block .btn { margin-top: var(--sp-8); }

/* Modificadores de botón reutilizables */
.btn--auto { width: auto; }
.btn--plain { text-transform: none; letter-spacing: normal; }

/* =========================================================
   QUIÉNES SOMOS — Cards de valores (Propósito / Visión)
   ========================================================= */
.value-cards {
  background: var(--crema-campo);
  padding: var(--sp-64) 0 var(--sp-64) var(--side-pad);
}
.value-cards__track { overflow-x: auto; scrollbar-width: none; }
.value-cards__track::-webkit-scrollbar { display: none; }
.value-cards__scroll {
  display: flex;
  gap: var(--sp-16);
  padding-right: var(--side-pad);
  width: max-content;
}
.value-card {
  width: 260px;
  flex-shrink: 0;
  background: var(--blanco);
  border-left: 3px solid var(--dorado-cafe);
  border-radius: 4px;
  padding: var(--sp-24);
}
.value-card__title {
  font-weight: 700;
  font-size: 16px;
  color: var(--azul-cardinal);
  margin-bottom: var(--sp-8);
}
.value-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-institucional);
}

/* =========================================================
   QUIÉNES SOMOS — Lo que nos hace diferentes
   ========================================================= */
.differentiators {
  background: var(--azul-cardinal);
  padding: var(--sp-64) var(--side-pad);
}
.differentiators .section-title { margin-bottom: var(--sp-16); }

.diff-list { margin-top: var(--sp-24); }
.diff-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: var(--sp-16);
  font-size: 16px;
  color: var(--blanco);
}
.diff-list li:last-child { margin-bottom: 0; }
.diff-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado-cafe);
}
.diff-list li.is-highlight {
  color: var(--dorado-cafe);
  font-weight: 700;
}

/* =========================================================
   COMERCIALIZACIÓN — Stats en fila ("La operación en números")
   Distinto del grid .stats del Home: acá cada fila es
   número (izq.) + etiqueta (der.), no apiladas.
   ========================================================= */
.stats-list {
  background: var(--azul-cardinal);
  padding: var(--sp-64) var(--side-pad);
}
.stats-list .section-title { margin-bottom: var(--sp-8); }

.stat-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--blanco-10);
}
.stat-row:last-child { border-bottom: none; }
.stat-row__number {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  color: var(--dorado-cafe);
  flex-shrink: 0;
}
.stat-row__label {
  font-size: 13px;
  line-height: 1.4;
  color: #C7D0D6;
  text-align: right;
  padding-top: 4px;
}

/* =========================================================
   COMERCIALIZACIÓN — Participación en cosecha (gráfico de barras)
   ========================================================= */
.harvest-share {
  background: var(--crema-campo);
  padding: var(--sp-64) var(--side-pad);
}
.harvest-share .section-title { color: var(--dorado-cafe); max-width: 20ch; margin-bottom: var(--sp-16); }

.bar-chart { margin-top: var(--sp-8); }
.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(13, 43, 62, 0.08);
}
.bar-row:last-child { border-bottom: none; }
.bar-row__year {
  width: 68px;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 13px;
  color: var(--azul-cardinal);
}
.bar-row__track { flex: 1; height: 26px; }
.bar-row__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--azul-cardinal);
  transition: width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bar-row--projection .bar-row__fill { background: var(--dorado-cafe); }
.bar-row__value {
  width: 46px;
  flex-shrink: 0;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  color: var(--gris-institucional);
}
.bar-row--projection .bar-row__value { color: var(--dorado-cafe); }

/* =========================================================
   COMERCIALIZACIÓN — Mapa de cobertura regional
   ========================================================= */
.region-map-section {
  background: var(--blanco);
  padding: var(--sp-64) var(--side-pad);
}
.region-map-section .section-title { max-width: 18ch; margin-bottom: var(--sp-24); }
.region-map {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================================================
   SERVICIOS — Acordeón
   Cada item: header de color (navy o verde) + panel colapsable.
   navy -> panel blanco · verde -> panel crema (misma lógica de
   color que el resto del sitio).
   ========================================================= */
.accordion-item__header { margin: 0; }

.accordion-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-24) var(--side-pad);
  background: var(--azul-cardinal);
  color: var(--blanco);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 17px;
  text-align: left;
}
.accordion-item--green .accordion-item__trigger { background: var(--verde-origen); }

.accordion-item__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dorado-cafe);
  transition: transform 0.25s ease;
}
.accordion-item__trigger[aria-expanded="true"] .accordion-item__icon {
  transform: rotate(180deg);
}

.accordion-item__panel {
  overflow: hidden;
  max-height: 0;
  background: var(--blanco);
  transition: max-height 0.3s ease;
}
.accordion-item--green .accordion-item__panel { background: var(--crema-campo); }

.accordion-item__list { padding: var(--sp-24) var(--side-pad); }
.accordion-item__list li {
  position: relative;
  padding: 12px 0 12px 20px;
  border-bottom: 1px solid rgba(13, 43, 62, 0.08);
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-institucional);
}
.accordion-item__list li:first-child { padding-top: 0; }
.accordion-item__list li:last-child { padding-bottom: 0; border-bottom: none; }
.accordion-item__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dorado-cafe);
}
/* El primer item no tiene padding-top, así que su punto también
   sube 12px para seguir alineado con el texto (18px - 12px = 6px). */
.accordion-item__list li:first-child::before { top: 6px; }

/* =========================================================
   CERTIFICACIONES E IMPACTO — Resumen ("34.652 familias")
   ========================================================= */
.impact-summary {
  background: var(--azul-cardinal);
  padding: var(--sp-64) var(--side-pad);
}
.impact-summary .section-title { max-width: 14ch; margin-bottom: var(--sp-24); }

.breakdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--blanco-10);
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-row__label {
  font-size: 15px;
  color: var(--blanco);
}
.breakdown-row__value {
  font-weight: 700;
  font-size: 15px;
  color: var(--dorado-cafe);
  text-align: right;
  flex-shrink: 0;
}
.breakdown-row--total .breakdown-row__label,
.breakdown-row--total .breakdown-row__value {
  color: var(--dorado-cafe);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 13px;
}
.breakdown-row--total .breakdown-row__value {
  text-transform: none;
  font-size: 15px;
}

/* =========================================================
   CERTIFICACIONES E IMPACTO — Historias ("Construimos más que negocios")
   ========================================================= */
.stories {
  background: var(--crema-campo);
  padding: var(--sp-64) var(--side-pad);
}
.stories .section-title { max-width: 18ch; }

.story-list { display: flex; flex-direction: column; gap: var(--sp-16); }
.story-card {
  background: var(--blanco);
  border-left: 3px solid var(--dorado-cafe);
  border-radius: 4px;
  padding: var(--sp-16) var(--sp-24);
}
.story-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-16);
  margin-bottom: var(--sp-8);
}
.story-card__title {
  font-weight: 700;
  font-size: 15px;
  color: var(--azul-cardinal);
}
.story-card__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--gris-institucional);
}

.status-badge {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.status-badge--pending { background: rgba(201, 168, 76, 0.18); color: #8A6D2F; }
.status-badge--done { background: rgba(27, 67, 50, 0.12); color: var(--verde-origen); }
.status-badge--active { background: #E7E7E7; color: var(--gris-institucional); }

/* =========================================================
   Divider muted — versión para usar sobre fondos claros
   (blanco / crema), donde .divider--light sería invisible.
   ========================================================= */
.divider--muted { width: 100%; height: 1px; background: rgba(13, 43, 62, 0.08); }

/* =========================================================
   CONTABLE — Título grande de página + lista de documentos
   ========================================================= */
.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.05;
  color: var(--azul-cardinal);
  margin-bottom: var(--sp-24);
}

.documents {
  background: var(--blanco);
  padding: var(--sp-64) var(--side-pad);
}

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  padding: 20px 0;
  border-bottom: 1px solid rgba(13, 43, 62, 0.08);
  transition: opacity 0.15s ease;
}
.doc-row:last-child { border-bottom: none; }

/* Para listas de un solo item (ej. "Comunicado oficial" del Home):
   se ven las 2 líneas, arriba y abajo, en vez de que la de abajo
   se elimine por ser también el "último" item de la lista. */
.doc-list--single .doc-row { border-top: 1px solid rgba(13, 43, 62, 0.08); }
.doc-list--single .doc-row:last-child { border-bottom: 1px solid rgba(13, 43, 62, 0.08); }
.doc-row:hover { opacity: 0.75; }

.doc-row__text {
  flex: 1;
  font-size: 15px;
  line-height: 1.4;
  color: var(--azul-cardinal);
}
.doc-row__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--crema-campo);
  color: var(--azul-cardinal);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   CONTACTO — Formulario
   ========================================================= */
.contact-form-section {
  background: var(--blanco);
  padding: var(--sp-64) var(--side-pad);
}
.contact-form-section .eyebrow { margin-bottom: var(--sp-24); }

.form-field { margin-bottom: var(--sp-24); }
.form-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--azul-cardinal);
  margin-bottom: var(--sp-8);
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--crema-campo);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--azul-cardinal);
}
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'><path d='M6 9L12 15L18 9' stroke='%230D2B3E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #9A9184; }
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--dorado-cafe);
}

/* =========================================================
   CONTACTO — Datos de contacto directo
   ========================================================= */
.contact-direct {
  background: var(--crema-campo);
  padding: var(--sp-64) var(--side-pad);
}
.contact-direct__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  color: var(--azul-cardinal);
  margin-bottom: 4px;
}
.contact-direct__subtitle {
  font-size: 14px;
  color: var(--gris-institucional);
  margin-bottom: var(--sp-24);
}
.info-row {
  display: flex;
  gap: var(--sp-16);
  padding: 14px 0;
  border-bottom: 1px solid rgba(13, 43, 62, 0.1);
}
.info-row:last-child { border-bottom: none; }
.info-row__label {
  width: 88px;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-institucional);
}
.info-row__value { font-size: 14px; color: var(--azul-cardinal); }

/* =========================================================
   FOOTER — Mensaje de cierre (solo en la página de Contacto)
   ========================================================= */
.footer__statement { margin-bottom: var(--sp-32); }
.footer__statement-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--blanco);
  margin-bottom: var(--sp-16);
  max-width: 34ch;
}
.footer__statement-tagline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--dorado-cafe);
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Fijo en todas las páginas, esquina inferior derecha.
   z-index 150: por encima del contenido y del navbar (100),
   pero por debajo del menú mobile a pantalla completa (200)
   para que no quede flotando encima cuando el menú está abierto.
   ========================================================= */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3));
  transition: transform 0.15s ease;
}
.whatsapp-float:hover { transform: scale(1.06); }
.whatsapp-float__icon { width: 100%; height: 100%; object-fit: contain; }

/* =========================================================================
   TABLET (desde 600px, hasta justo antes del desktop en 1024px)
   Es el MISMO diseño mobile en TODAS las páginas — no se reordena ni
   reestructura nada. Solo se ensancha el contenedor y el padding lateral,
   para que en una tablet el layout de mobile no se quede angosto y
   perdido en el centro de una pantalla mucho más ancha.
   Va sin ".page-home": aplica a todo el sitio por igual (todas las
   páginas comparten este archivo), a diferencia del bloque de desktop
   de más abajo, que por ahora es solo para el Home.

   Dos escalones en vez de uno solo: con un único ancho fijo, entre
   ~800px y 1023px sobraba demasiado espacio en blanco a los costados
   (700px se quedaba muy corto para esas resoluciones). Así, el ancho
   sigue creciendo hasta justo antes del desktop.
   ========================================================================= */
@media (min-width: 600px) {
  :root {
    --content-max: 700px;
    --side-pad: 40px;
  }
}
@media (min-width: 900px) {
  :root {
    --content-max: 960px;
    --side-pad: 48px;
  }
}

/* =========================================================================
   DESKTOP — SOLO HOME (.page-home)
   Todo lo de acá abajo va scopeado bajo .page-home a propósito: el resto
   de páginas todavía es mobile-only, así que esto no las toca. Cuando
   adaptemos cada página a desktop, sacamos su selector del scope (o le
   agregamos su propia clase "page-xxx" con las reglas que aplique).
   ========================================================================= */
@media (min-width: 1024px) {

  /* Contenedor y espaciado: al cambiar estas variables acá, TODAS las
     secciones (que ya usan var(--content-max) / var(--sp-64) etc.)
     se ensanchan automáticamente, sin tocar cada selector. */
  .page-home {
    --content-max: 1800px;
    --side-pad: 64px;
    --sp-64: 80px;
    --sp-48: 56px;
  }

  /* ---------- NAVBAR ---------- */
  .page-home .navbar__inner { justify-content: flex-start; padding-top: 16px; padding-bottom: 16px; }
  .page-home .navbar__toggle { display: none; }
  .page-home .navbar__links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0 auto;
  }
  .page-home .navbar__links a {
    font-size: 13px;
    font-weight: 600;
    color: var(--blanco);
    white-space: nowrap;
  }
  .page-home .navbar__links a:hover { color: var(--dorado-cafe); }
  .page-home .navbar__links a.is-active { color: var(--dorado-cafe); }
  .page-home .navbar__cta-group {
    display: flex;
    gap: 12px;
  }
  .page-home .navbar__cta { padding: 9px 18px; font-size: 12px; }

  /* ---------- HERO ---------- */
  .page-home .hero { min-height: 560px; padding: 56px var(--side-pad); }
  .page-home .hero__content { max-width: 540px; margin: 0; }
  .page-home .hero__title { font-size: 72px; }
  .page-home .hero__text { font-size: 17px; max-width: 42ch; }
  .page-home .hero__actions { flex-direction: row; }
  .page-home .hero__actions .btn { width: auto; padding-left: 24px; padding-right: 24px; }
  .page-home .hero__scroll { display: none; }

  /* ---------- TIPOGRAFÍA GENERAL DE DESKTOP ---------- */
  /* Títulos de sección un poco más grandes, párrafos a 17px para que
     se lean cómodos en pantallas grandes. */
  .page-home .section-title { font-size: 56px; }
  .page-home .mission__text { font-size: 17px; }
  .page-home .cta__title { font-size: 56px; }
  .page-home .cta__text { font-size: 17px; }

  /* ---------- STATS (una sola fila) ---------- */
  .page-home .stats__grid { grid-template-columns: repeat(6, 1fr); column-gap: 32px; }
  .page-home .stats__grid .stat { border-bottom: none; padding: 0; }
  .page-home .stat__number { font-size: 44px; }

  /* ---------- MISIÓN (título+texto a la izquierda, foto a la derecha) ---------- */
  /* SIN max-width acá: .mission ES la sección (con el fondo crema), no un
     wrapper interno. Ponerle max-width le cortaba el fondo también —
     dejaba ese "cajón" angosto con blanco a los costados. */
  .page-home .mission { display: flex; align-items: center; gap: 64px; }
  .page-home .mission__text-col { flex: 1; }
  .page-home .mission .section-title { max-width: none; }
  .page-home .mission__image {
    display: block;
    flex: 1;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
  }

  /* ---------- TIMELINE (horizontal) ---------- */
  .page-home .timeline .section-title { max-width: none; }
  .page-home .timeline__list {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 8px;
  }
  .page-home .timeline__list::before {
    content: '';
    position: absolute;
    top: 14px;
    left: 0;
    right: 20%;
    bottom: auto;
    width: auto;
    height: 2px;
    background: rgba(13, 43, 62, 0.2);
  }
  .page-home .timeline__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0 24px 0 0;
  }
  .page-home .timeline__dot {
    position: static;
    margin: 0 0 16px;
    transform: none;
  }
  .page-home .timeline__dot::after { display: none; }

  /* El año queda como caption chico; el porcentaje pasa a ser
     el elemento grande y en negrita (al revés que en mobile). */
  .page-home .timeline__year {
    padding-left: 0;
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-institucional);
    margin-bottom: 4px;
  }
  .page-home .timeline__pct {
    display: block;
    font-size: 44px;
    color: var(--azul-cardinal);
    margin-bottom: 6px;
  }
  .page-home .timeline__desc { grid-column: auto; display: block; max-width: 150px; }

  /* Item destacado (2026 · proyección): año y porcentaje en dorado,
     con una flechita después del año. */
  .page-home .timeline__item--projection .timeline__year,
  .page-home .timeline__item--projection .timeline__pct {
    color: var(--dorado-cafe);
  }
  .page-home .timeline__item--projection .timeline__year::after {
    content: ' \2192';
  }

  /* ---------- SERVICIOS (grid de cards) ---------- */
  .page-home .services__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .page-home .service {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    height: 100%;
    gap: 16px;
    padding: 24px;
    border-bottom: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
  }
  .page-home .service:hover { background: rgba(255, 255, 255, 0.07); opacity: 1; }
  .page-home .service__arrow { align-self: flex-end; }

  /* ---------- IMAGEN + CERTIFICACIONES (2 columnas) ---------- */
  .page-home .story-split { display: flex; align-items: stretch; }
  .page-home .story-split__image-wrap { position: relative; flex: 1; }
  .page-home .story-split .crop-image { height: 100%; min-height: 460px; }
  .page-home .story-split__quote {
    display: block;
    position: absolute;
    left: 32px;
    bottom: 32px;
    max-width: 300px;
    margin: 0;
    padding: 18px 22px;
    background: rgba(13, 43, 62, 0.85);
    color: var(--blanco);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    line-height: 1.4;
    border-radius: 6px;
  }

  /* En desktop las certificaciones se ven distinto: fondo crema con
     cards blancas, en vez del bloque verde de mobile. */
  .page-home .story-split .certifications {
    flex: 1;
    background: var(--crema-campo);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .page-home .story-split .certifications .section-title { color: var(--azul-cardinal); }
  .page-home .story-split .cert-list { flex-direction: column; gap: 16px; max-width: none; }
  .page-home .story-split .cert {
    background: var(--blanco);
    border: 1px solid rgba(13, 43, 62, 0.1);
    border-radius: 8px;
    padding: 16px 20px;
  }
  .page-home .story-split .cert__name { color: var(--azul-cardinal); }
  .page-home .story-split .cert__meta { color: var(--gris-institucional); }

  /* ---------- ALIADOS (fila estática, sin carrusel — ya entran todos) ---------- */
  .page-home .partners .section-title {
    max-width: none;
    padding-right: 0;
    text-align: center;
    margin-bottom: 48px;
  }
  /* Logos planos sobre el fondo crema, sin el círculo blanco de mobile. */
  .page-home .partner {
    width: auto;
    height: 56px;
    background: none;
    border-radius: 0;
    padding: 0;
  }
  .page-home .partner__logo { width: auto; height: 100%; max-width: 160px; }
  .page-home .partners__track { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  .page-home .partners__scroll {
    animation: none;
    width: 100%;
    justify-content: center;
    gap: 56px;
  }
  /* El set duplicado (para el loop infinito de mobile) no hace falta acá */
  .page-home .partner[aria-hidden="true"] { display: none; }

  /* ---------- CTA FINAL (2 columnas) ---------- */
  /* SIN max-width acá tampoco, mismo motivo que Misión. */
  .page-home .cta { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
  .page-home .cta__content { flex: 1; max-width: 700px; }
  .page-home .cta .btn { width: auto; padding-left: 48px; padding-right: 48px; flex-shrink: 0; }

  /* ---------- COMUNICADO OFICIAL ----------
     No había diseño de desktop para esta sección — la dejé simple y
     centrada, en una franja angosta como una barra de aviso, en vez
     de estirar el texto/ícono a los 1800px completos. */
  .page-home .documents { padding: 32px var(--side-pad); }
  .page-home .doc-list { max-width: 900px; margin: 0 auto; }
  .page-home .doc-row__text { font-size: 17px; }

  /* ---------- FOOTER (logo arriba, fila con columnas + social) ---------- */
  /* Logo y columnas de links van en LA MISMA fila (no logo arriba y
     links debajo). flex-wrap + footer__bottom a 100% empuja el
     copyright a su propia línea, abajo de todo. */
  .page-home .footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }
  .page-home .footer__brand { margin-bottom: 0; flex-shrink: 0; }
  .page-home .footer__row {
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    border-top: none;
    padding-top: 0;
  }
  .page-home .footer__bottom {
    flex-basis: 100%;
  }
  /* En desktop se usa .footer__link-cols (2 columnas con encabezado);
     la lista plana de mobile (.footer__links) se oculta. */
  .page-home .footer__links { display: none; }
  .page-home .footer__link-cols { display: flex; gap: 64px; }
  .page-home .footer__link-col { display: flex; flex-direction: column; gap: 10px; }
  .page-home .footer__link-col a { font-size: 14px; color: #D7D7D7; }
  .page-home .footer__link-col a:hover { color: var(--dorado-cafe); }
  .page-home .footer__link-col a.footer__link-heading {
    font-weight: 700;
    font-size: 15px;
    color: var(--blanco);
    margin-bottom: 2px;
  }
  .page-home .footer__link-col a.footer__link-heading.is-active { color: #B69B4B; }
}

/* =========================================================================
   DESKTOP — QUIÉNES SOMOS (.page-quienes-somos)
   Mismo patrón que .page-home: todo scopeado para no tocar otras páginas.
   ========================================================================= */
@media (min-width: 1024px) {

  .page-quienes-somos {
    --content-max: 1800px;
    --side-pad: 64px;
    --sp-64: 80px;
    --sp-48: 56px;
  }

  /* ---------- TIPOGRAFÍA GENERAL DE DESKTOP ---------- */
  .page-quienes-somos .section-title { font-size: 56px; }

  /* ---------- NAVBAR (igual patrón que el Home) ---------- */
  .page-quienes-somos .navbar__inner { justify-content: flex-start; padding-top: 16px; padding-bottom: 16px; }
  .page-quienes-somos .navbar__toggle { display: none; }
  .page-quienes-somos .navbar__links { display: flex; align-items: center; gap: 22px; margin: 0 auto; }
  .page-quienes-somos .navbar__links a { font-size: 13px; font-weight: 600; color: var(--blanco); white-space: nowrap; }
  .page-quienes-somos .navbar__links a:hover { color: var(--dorado-cafe); }
  .page-quienes-somos .navbar__links a.is-active { color: var(--dorado-cafe); }
  .page-quienes-somos .navbar__cta-group { display: flex; gap: 12px; }
  .page-quienes-somos .navbar__cta { padding: 9px 18px; font-size: 12px; }

  /* ---------- HERO ---------- */
  .page-quienes-somos .hero { min-height: 560px; padding: 56px var(--side-pad); }
  .page-quienes-somos .hero__content { max-width: 540px; margin: 0; }
  .page-quienes-somos .hero__title { font-size: 72px; }
  .page-quienes-somos .hero__text { font-size: 17px; max-width: 42ch; }
  .page-quienes-somos .hero__scroll { display: none; }

  /* ---------- EL CAMINO QUE HEMOS RECORRIDO (2 columnas) ---------- */
  .page-quienes-somos .text-block { display: flex; align-items: center; gap: 64px; }
  .page-quienes-somos .text-block__col { flex: 1; }
  .page-quienes-somos .text-block .section-title { max-width: none; }
  .page-quienes-somos .text-block p { font-size: 17px; }
  .page-quienes-somos .text-block__image {
    display: block;
    flex: 1;
    height: 420px;
    object-fit: cover;
    border-radius: 12px;
  }

  /* ---------- CARDS: PROPÓSITO / MISIÓN / VISIÓN (grid de 3) ---------- */
  .page-quienes-somos .value-cards__track { overflow: visible; }
  .page-quienes-somos .value-cards__scroll {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: auto;
    max-width: 1300px;
    margin: 0 auto;
    padding-right: 0;
  }
  .page-quienes-somos .value-card {
    width: auto;
    min-height: 220px;
    padding: 36px 32px;
    border-left: 3px solid var(--dorado-cafe);
  }
  .page-quienes-somos .value-card__title { color: var(--dorado-cafe); font-size: 18px; margin-bottom: var(--sp-16); }
  .page-quienes-somos .value-card__text { font-size: 17px; line-height: 1.6; }

  /* ---------- LO QUE NOS HACE DIFERENTES (foto de fondo + chips) ---------- */
  /* Reutiliza la misma foto de paisaje que en mobile es una sección aparte
     (ver .crop-image más abajo, que en desktop se oculta). */
  .page-quienes-somos .differentiators {
    position: relative;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 64px;
    background-image: linear-gradient(180deg, rgba(13, 43, 62, 0.3), rgba(13, 43, 62, 0.8)), url('../src/desktop/paisajeMontanas.png');
    background-size: cover;
    background-position: center 70%;
  }
  .page-quienes-somos .differentiators .divider--light { display: none; }
  .page-quienes-somos .diff-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: var(--sp-24);
  }
  .page-quienes-somos .diff-list li {
    position: relative;
    padding: 10px 20px 10px 30px;
    margin-bottom: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    font-size: 14px;
    color: var(--blanco);
  }
  .page-quienes-somos .diff-list li::before { left: 14px; top: 50%; transform: translateY(-50%); }
  .page-quienes-somos .diff-list li.is-highlight { border-color: var(--dorado-cafe); color: var(--dorado-cafe); }

  /* La foto de paisaje independiente se oculta: ahora es el fondo de
     "Lo que nos hace diferentes" (arriba). */
  .page-quienes-somos .crop-image { display: none; }

  /* ---------- CTA FINAL (2 columnas) ---------- */
  .page-quienes-somos .cta { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
  .page-quienes-somos .cta__content { flex: 1; max-width: 700px; }
  .page-quienes-somos .cta__title { font-size: 56px; }
  .page-quienes-somos .cta__text { font-size: 17px; }
  .page-quienes-somos .cta .btn { width: auto; padding-left: 48px; padding-right: 48px; flex-shrink: 0; }

  /* ---------- FOOTER (logo arriba, fila con columnas + social) ---------- */
  .page-quienes-somos .footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
  }
  .page-quienes-somos .footer__brand { margin-bottom: 0; flex-shrink: 0; }
  .page-quienes-somos .footer__row {
    flex: 1;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    border-top: none;
    padding-top: 0;
  }
  .page-quienes-somos .footer__bottom { flex-basis: 100%; }
  .page-quienes-somos .footer__links { display: none; }
  .page-quienes-somos .footer__link-cols { display: flex; gap: 64px; }
  .page-quienes-somos .footer__link-col { display: flex; flex-direction: column; gap: 10px; }
  .page-quienes-somos .footer__link-col a { font-size: 14px; color: #D7D7D7; }
  .page-quienes-somos .footer__link-col a:hover { color: var(--dorado-cafe); }
  .page-quienes-somos .footer__link-col a.is-active { color: #B69B4B; }
  .page-quienes-somos .footer__link-col a.footer__link-heading {
    font-weight: 700;
    font-size: 15px;
    color: var(--blanco);
    margin-bottom: 2px;
  }
  .page-quienes-somos .footer__link-col a.footer__link-heading.is-active { color: #B69B4B; }
}

/* =========================================================
   SCROLL REVEAL
   El contenido aparece (opacity + leve desplazamiento hacia
   arriba) a medida que se hace scroll y entra en pantalla.
   Todo dentro de "no-preference": si el usuario prefiere menos
   movimiento, esto ni siquiera existe — el contenido se ve
   normal desde el principio, sin depender de que el JS lo
   "arregle" después.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Efecto cascada: cuando varios .reveal comparten el mismo
     padre (las 6 stats, las 5 cards de servicios, etc.), cada
     uno aparece un poco después que el anterior. */
  .reveal:nth-child(2) { transition-delay: 90ms; }
  .reveal:nth-child(3) { transition-delay: 180ms; }
  .reveal:nth-child(4) { transition-delay: 270ms; }
  .reveal:nth-child(5) { transition-delay: 360ms; }
  .reveal:nth-child(6) { transition-delay: 450ms; }
  .reveal:nth-child(7) { transition-delay: 540ms; }
  .reveal:nth-child(8) { transition-delay: 630ms; }
}

/* =========================================================
   Utilidad: foco visible accesible en enlaces del menú
   ========================================================= */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--dorado-cafe);
  outline-offset: 2px;
}