/* ══════════════════════════════════════════════════════════
   INGENIO LA CABAÑA — Hoja de estilos principal
   Sistema visual extraído de la fotografía del amanecer.
   Versión 2.0 — Julio 2026
   ══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root {
  /* Blancos y fondos — del color de la neblina del amanecer */
  --mist:     #FFFFFF;
  --mist-2:   #EDE9DC;
  --mist-3:   #E4DFCE;
  --card-bg:  #F7F7F5;  /* blanco roto neutro — separación sutil de tarjetas sobre fondo blanco */

  /* Ink — de la tierra húmeda en sombra */
  --ink:      #1C1710;
  --ink-m:    rgba(28,23,16,.50);
  --ink-s:    rgba(28,23,16,.26);
  --ink-xs:   rgba(28,23,16,.06);

  /* Verde institucional — Brandbook ILC */
  --cane:     #306C35;
  --cane-2:   #7CC242;
  --cane-d:   #1F4A25;  /* verde institucional más profundo — hover de enlaces editoriales (9.6:1 sobre #F7F7F5) */

  /* Verde oscuro institucional — para botones principales */
  --forest:   #306C35;
  --forest-h: #3D8A44;  /* hover */

  /* Naranja institucional — SOLO para acentos, nunca botones principales */
  --dawn:     #F6862D;

  /* Neutros de apoyo — del camino; azul institucional como acento */
  --earth:    #7A6448;
  --mountain: #003480;

  /* Fondos oscuros — sombra del mismo verde institucional (no un tono
     nuevo): --cane a menor luminosidad, para bloques grandes de fondo
     sólido sin que dominen visualmente. --dark-2 es el footer, sin cambios */
  --dark:     #1E4A24;
  --dark-2:   #1A1810;

  /* Tipografía */
  --f: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* ── 2. RESET ───────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { font-size: 16px; scroll-behavior: smooth; }
body  {
  font-family: var(--f);
  background: var(--mist);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a       { color: inherit; text-decoration: none; }
ul      { list-style: none; }
button  { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── 3. CONTENEDOR ──────────────────────────────────────── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── 4. UTILIDADES ──────────────────────────────────────── */

/* Eyebrow */
.ey      { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ey-ln   { width: 24px; height: .5px; background: var(--cane); flex-shrink: 0; }
.ey-tx   { font-size: 11px; font-weight: 300; letter-spacing: .26em; text-transform: uppercase; color: var(--cane); }
.ey.ctr  { justify-content: center; }

/* Variante light (sobre fondos oscuros) */
.ey-ln.l { background: var(--dawn); }
.ey-tx.l { color: var(--dawn); }

/* Arrow link */
.ar {
  display: inline-block; width: 26px; height: .5px;
  background: currentColor; position: relative;
  flex-shrink: 0; vertical-align: middle; margin-left: 10px;
  transition: width .22s ease;
}
.ar::after {
  content: ''; position: absolute; right: 0; top: -3px;
  width: 6px; height: 6px;
  border-right: .5px solid currentColor;
  border-top: .5px solid currentColor;
  transform: rotate(45deg);
}
a:hover > .ar, .ghost:hover .ar { width: 34px; }

/* ── 5. BOTONES ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase;
  padding: 15px 36px; border-radius: 20px;
  transition: background .22s ease, border-color .22s ease, opacity .22s ease, transform .22s ease;
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }

/* Verde oscuro — uso principal sobre fondos claros */
.btn-forest {
  background: var(--forest);
  color: var(--mist);
}
.btn-forest:hover { background: var(--forest-h); }

/* Neblina — sobre fondos oscuros */
.btn-mist {
  background: var(--mist);
  color: var(--forest);
}
.btn-mist:hover { background: var(--card-bg); }

/* Contorno — sobre fondos oscuros, acción secundaria */
.btn-outline {
  background: transparent;
  border: .5px solid rgba(247,243,233,.35);
  color: rgba(247,243,233,.88);
}
.btn-outline:hover {
  border-color: rgba(247,243,233,.65);
  opacity: 1;
  transform: translateY(-2px);
}

/* Ghost link — CTA secundario editorial (texto + flecha). UNA SOLA REGLA GLOBAL
   (.ghost) controla todos los enlaces "Conoce…" del sitio; .ghost-l es la
   variante para fondos oscuros. Sin subrayado: la señal permanente de que es
   clicable es el verde institucional, el peso Medium (500) y la flecha →, no
   el hover. En hover la flecha se desplaza unos píxeles a la derecha y el color
   se profundiza apenas; el texto no cambia de tamaño ni de peso. El área
   clicable se amplía con un pseudo-elemento (sin mover la composición). No es
   un botón: sin fondo, sin caja. Distinto del CTA primario (.btn) y del menú. */
.ghost {
  position: relative;
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
  color: var(--cane); /* #306C35: 6.3:1 sobre blanco, 5.9:1 sobre #F7F7F5 */
  width: fit-content; max-width: 100%;
  padding: 0 0 6px; /* mismo espacio vertical que tenía con la línea inferior */
  transition: color .22s ease;
}
/* Área clicable ampliada (~44 px de alto) sin alterar el diseño */
.ghost::before { content: ""; position: absolute; inset: -12px -10px -10px; }
.ghost:focus-visible {
  outline: 2px solid var(--cane-2); outline-offset: 6px; border-radius: 2px;
  color: var(--cane-d);
}
/* La flecha acompaña el peso del texto; se desplaza, no se alarga */
.ghost .ar { height: 1px; width: 26px; transition: transform .22s ease; }
.ghost .ar::after { top: -3.5px; border-right-width: 1px; border-top-width: 1px; }
.ghost:hover { color: var(--cane-d); }
.ghost:hover .ar { width: 26px; transform: translateX(5px); }

/* Móvil: menos tracking para que enlaces largos quepan en una línea en columnas angostas */
@media (max-width: 680px) {
  .ghost { letter-spacing: .06em; }
  .ghost .ar, .ghost:hover .ar { margin-left: 8px; width: 22px; }
}
/* En pantallas táctiles no hay hover: sin desplazamiento "pegado" tras el toque */
@media (hover: none) {
  .ghost:hover { color: var(--cane); }
  .ghost:hover .ar { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ghost, .ghost .ar { transition: none; }
  .ghost:hover .ar { transform: none; }
}

/* Variante clara — sobre fondos oscuros / fotografías */
.ghost-l { color: rgba(247,243,233,.95); }
.ghost-l:hover, .ghost-l:focus-visible { color: #fff; }
.ghost-l:focus-visible { outline-color: var(--cane-2); }

/* ── 6. NAVEGACIÓN ──────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 52px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: .5px solid rgba(28,23,16,.07);
  gap: 16px;
  transition: box-shadow .4s;
}
.nav.raised {
  box-shadow: 0 2px 40px rgba(28,23,16,.08);
}
.nav-logo {
  /* Logo ~+47 % (38 → 56 px de alto de caja; el archivo PNG trae ~15 % de margen
     transparente arriba y abajo, así que el logo visible pasa de ~26 a ~38 px).
     Los márgenes negativos absorben el aumento dentro de ese margen transparente:
     la altura del header (67 px) y su relleno no cambian. */
  height: 56px; width: auto; flex-shrink: 0; margin: -9px 0;
  transition: transform .25s ease;
}
/* Hover de los logos (header y footer): suben un poco, sin rebote */
.nav-logo:hover { transform: translateY(-3px); }
.nav > a:first-child { flex-shrink: 0; }
.nav-links {
  display: flex; gap: 32px; flex: 1; justify-content: center;
}
/* Enlaces: reposo gris cálido → hover tinta + línea fina verde claro que
   crece desde la izquierda → página activa: texto verde #306C35 con la
   línea fina fija en verde claro #7CC242. Sin sombras, sin cambios de tamaño. */
.nav-links a {
  position: relative; display: inline-block; padding: 6px 0;
  font-size: 12px; font-weight: 300;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: rgba(28,23,16,.75);
  transition: color .2s ease;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--cane-2);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .22s ease, background-color .2s ease;
}
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--cane); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--cane-2); }
.nav-links a:focus-visible, .nav-cta:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid var(--cane-2); outline-offset: 4px; border-radius: 2px;
}
.nav-cta {
  font-size: 10px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
  color: var(--mist); background: var(--forest);
  padding: 10px 24px; border-radius: 20px;
  flex-shrink: 0;
  transition: background-color .2s ease;
}
.nav-cta:hover { background: var(--forest-h); }
.nav-cta:active { background: var(--dark); }

/* Selector de idioma ES | EN. El idioma actual va en verde institucional y peso 600
   (no es un enlace); el otro es un enlace en gris cálido, igual que el resto del menú.
   En escritorio vive entre el menú y el botón Contacto; en ≤1100 px pasa a la última
   fila del panel plegable (.nav-lang-m) para no ocupar espacio en la barra. */
.nav-lang {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
/* Cada opción mide ~38 px de alto y ~34 px de ancho (área clicable cómoda) sin crecer el header */
.nav-lang a, .nav-lang-cur { position: relative; padding: 10px 8px; line-height: 1.4; }
.nav-lang a { color: rgba(28,23,16,.78); font-weight: 400; transition: color .2s ease; }
/* Área táctil ampliada (~40 × 44 px) sin mover nada */
.nav-lang a::before { content: ""; position: absolute; inset: -4px -3px; }
.nav-lang a:hover, .nav-lang a:focus-visible { color: var(--ink); }
/* Idioma activo: verde institucional + línea fina verde claro, como la página activa del menú */
.nav-lang-cur { color: var(--cane); font-weight: 600; }
.nav-lang-cur::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 7px;
  height: 1px; background: var(--cane-2);
}
.nav-lang-sep { width: 1px; height: 15px; background: rgba(28,23,16,.35); flex-shrink: 0; }
.nav-lang a:focus-visible { outline: 2px solid var(--cane-2); outline-offset: -2px; border-radius: 2px; }
.nav-lang-m { display: none; }

/* Botón de menú (solo visible en pantallas angostas): dos líneas finas que
   pasan a "X" al abrir. */
.nav-toggle {
  display: none; position: relative; flex-shrink: 0;
  width: 36px; height: 36px; margin-right: -8px;
  background: none; border: 0; cursor: pointer;
}
.nav-toggle-bar {
  position: absolute; left: 9px; right: 9px; height: 1.5px;
  background: var(--ink); border-radius: 1px;
  transition: transform .22s ease, top .22s ease;
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 21px; }
.nav.is-open .nav-toggle-bar:nth-child(1) { top: 17.5px; transform: rotate(45deg); }
.nav.is-open .nav-toggle-bar:nth-child(2) { top: 17.5px; transform: rotate(-45deg); }

/* Las anclas internas (#contacto, #azucar…) no quedan bajo el header fijo */
html { scroll-padding-top: 76px; }

@media (prefers-reduced-motion: reduce) {
  .nav-links a, .nav-links a::after, .nav-cta, .nav-toggle-bar,
  .nav-links, .nav-logo, .f-logo, .f-social a { transition: none !important; }
  .nav-logo:hover, .f-logo:hover, .f-social a:hover { transform: none; }
}

/* ── 7. HERO ────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 44% 56%;
  height: calc(100vh - 67px);
  min-height: 600px;
  max-height: 920px;
}

/* Columna editorial — neblina del amanecer */
.hero-left {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 52px 60px 80px 52px;
  background: var(--mist);
  overflow: hidden;
}

.hero-h1 {
  font-weight: 800;
  /* 56 px desde ~1420 px de ancho; por debajo se reduce con la columna para que la línea más
     larga ("la caña de azúcar.") siga cabiendo y el título se mantenga en 3 líneas */
  font-size: clamp(38px, calc(4.8vw - 12px), 56px);
  line-height: 1.08; letter-spacing: -.028em;
  color: var(--ink); margin-bottom: 24px;
  max-width: 520px;
}
.hero-sub {
  font-size: 17px; font-weight: 400;
  line-height: 1.82; color: rgba(28,23,16,.76);
  /* Medida algo menor que el título y líneas equilibradas (3 líneas parejas en vez de
     una última línea corta) */
  max-width: 460px; text-wrap: balance; margin-bottom: 52px;
}
/* Versión en inglés: "More than 100 years" es más largo que su equivalente en español;
   se reduce un poco el título para que no quede la palabra "years" sola en una línea. */
html[lang="en"] .hero-h1 { font-size: clamp(36px, calc(4.4vw - 12px), 52px); }
.hero-actions { display: flex; align-items: center; gap: 28px; }

/* Columna fotográfica — corte limpio, sin degradado */
.hero-right { position: relative; overflow: hidden; }
.hero-img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 34% 50%;
  display: block;
}
.hero-cap {
  position: absolute; bottom: 24px; right: 28px;
  font-size: 8.5px; font-weight: 300;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(247,243,233,.48);
}

/* ── 7b. VIDEO — pieza audiovisual protagonista (prueba 2, Home) ─
   v2: banda más compacta (520px, no 640px), texto abajo-izquierda,
   y un matiz verde institucional localizado (no un filtro de color
   sobre todo el video) — dos degradados radiales apilados, ambos
   anclados en la esquina donde vive el texto y desvaneciéndose a
   transparente: uno neutro (contraste, legibilidad garantizada sin
   importar el brillo del fotograma) + uno en rgba(48,108,53,…),
   el mismo verde de --cane, para el guiño de marca. La entrada del
   texto es una animación de opacidad de 33s (duración del loop del
   video) que aparece ~7s adentro de cada ciclo, cuando ya se ve la
   cortadora — no usa .rv (ese sistema es "al hacer scroll", este es
   "al avanzar el video"; mezclar los dos generaba estados en conflicto). */
.s-video { background: var(--mist); }
.video-banner { position: relative; height: 520px; overflow: hidden; }
.video-banner video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.video-banner-mask {
  position: absolute; inset: 0;
  /* Metraje real, no una sola foto fija: el fondo bajo el texto
     cambia de brillo/detalle durante el loop (cañaveral abierto,
     luego la cortadora muy cerca de cámara). Overlay reforzado a
     pedido — debe notarse como matiz, no ser un contraste apenas
     perceptible. */
  background:
    radial-gradient(ellipse 820px 520px at 0% 100%, rgba(23,30,16,.82) 0%, rgba(23,30,16,.58) 45%, rgba(23,30,16,.08) 82%, rgba(23,30,16,0) 100%),
    radial-gradient(ellipse 640px 420px at 0% 100%, rgba(48,108,53,.48) 0%, rgba(48,108,53,.14) 55%, rgba(48,108,53,0) 78%);
  display: flex; align-items: flex-end;
  padding: 44px 52px;
}
.video-banner-text {
  color: #fff; font-family: var(--f); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2;
  max-width: 680px;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
  opacity: 0;
  animation: videoTextIn 33s ease-in-out infinite;
}
@keyframes videoTextIn {
  0%    { opacity: 0; transform: translateY(6px); }
  21%   { opacity: 0; transform: translateY(6px); }
  27%   { opacity: 1; transform: translateY(0); }
  97%   { opacity: 1; transform: translateY(0); }
  100%  { opacity: 0; transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .video-banner-text { opacity: 1; transform: none; animation: none; }
}

/* ── 8. STATEMENT ───────────────────────────────────────── */
.statement {
  background: var(--dark);
  padding: 84px 52px;
  text-align: center;
}
.statement-inner { max-width: 820px; margin: 0 auto; }
.statement-h {
  font-weight: 800;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.09; letter-spacing: -.022em;
  color: #fff;
  margin-bottom: 28px;
}
.statement-h em {
  font-style: italic; font-weight: 300;
  color: inherit; /* mismo color que el resto del título — sin mezcla */
}
.statement-p {
  font-size: 17.5px; font-weight: 400; line-height: 1.80;
  color: rgba(247,243,233,.74);
  max-width: 580px; margin: 0 auto 56px;
}
.pillars { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.pillar  { font-size: 10px; font-weight: 300; letter-spacing: .24em; text-transform: uppercase; color: rgba(247,243,233,.36); }
.p-sep   { color: var(--dawn); opacity: .45; font-size: 12px; }

/* ── 8b. PUENTE NARRATIVO ────────────────────────────────
   Transición editorial sutil entre el Hero y "Más que un
   ingenio" — tipografía pequeña, nunca un segundo titular. */
.narrative-bridge {
  background: var(--mist-2);
  padding: 48px 52px;
  text-align: center;
}
.narrative-bridge p {
  font-size: 19px; font-weight: 300; font-style: italic;
  color: var(--ink-m);
  max-width: 480px; margin: 0 auto;
}

/* ── 9. NEGOCIOS ────────────────────────────────────────── */
.s-negocios { padding: 100px 52px; background: var(--mist); }
.s-negocios.tint { background: var(--card-bg); }

/* Lista de capacidades — ligera y discreta, sin iconos ni tarjetas */
.capacidades-list {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px; margin-top: 28px;
  font-size: 13px; font-weight: 300;
  color: var(--ink-m);
}
.capacidades-list .v-sep { color: var(--ink-xs); }

.s-header {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px;
  margin-bottom: 52px;
}
.s-header-left { max-width: 520px; }
.s-h {
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.12; letter-spacing: -.02em;
  color: var(--ink);
}

/* Subtítulo de sección — el "espejo" concreto bajo el titular.
   font-size/line-height iguales en todo texto de apoyo de sección
   del sitio (ver .page-lede, .sos-sub-text, .page-banner-sub,
   .personas-body p) — regla global de tipografía, 2026-09-01. */
.s-sub {
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(28,23,16,.70); margin-top: 16px; max-width: 460px;
}

.negocios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Panel placeholder (producto sin foto) — ámbar → tierra → oscuro */
.n-card-ph {
  height: 156px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--dawn) 0%, var(--earth) 52%, var(--dark) 100%);
}
.n-card-ph-tx {
  font-size: 9px; font-weight: 300;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(247,243,233,.72);
}

/* Tarjeta con foto en la cabecera */
.n-card {
  background: var(--card-bg);
  border-radius: 12px;
  border: .5px solid rgba(28,23,16,.08);
  display: flex; flex-direction: column;
  overflow: hidden; /* necesario para foto top */
  transition: transform .30s ease, box-shadow .30s ease;
}
.n-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(28,23,16,.08);
}
.n-card-photo {
  width: 100%; height: 156px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.n-card-body {
  padding: 22px 26px 26px;
  display: flex; flex-direction: column; gap: 11px;
  flex: 1;
}
.n-num   { font-size: 9.5px; font-weight: 300; letter-spacing: .2em; color: var(--ink-s); }
.n-bar   { width: 32px; height: 2px; border-radius: 1px; }
.n-title { font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ink); }
.n-type  { font-size: 11px; font-weight: 500; color: var(--cane); margin-top: -6px; }
.n-desc  { font-size: 12.5px; font-weight: 300; line-height: 1.72; color: var(--ink-m); flex: 1; }
.n-link  {
  font-size: 10px; font-weight: 300;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--cane); display: flex; align-items: center;
  transition: color .22s ease;
}
.n-link:hover { color: var(--ink); }

/* ── 10. PERSONAS ───────────────────────────────────────── */
.s-personas { padding: 100px 52px; background: var(--mist); }

/* Separación editorial: cuando "Nuestra cultura" sigue a "Nuestra historia"
   en el Home, se distingue con una diferencia sutil de fondo (blanco roto)
   en vez de un vacío grande — el cambio de fondo hace el trabajo principal. */
.s-historia + .s-personas { padding-top: 60px; background: var(--card-bg); }

.personas-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 44% 56%;
  gap: 64px; align-items: center;
}
/* Variante invertida — alterna el ritmo cuando una página tiene
   varios bloques foto/contenido seguidos (p. ej. Sostenibilidad). */
.personas-inner.rev { grid-template-columns: 56% 44%; }
/* Las columnas en % más el gap de 64 px sumaban 100 % + 64 px: entre 1101 y
   ~1244 px el bloque se salía ~12 px del margen derecho y se recortaba. En ese
   tramo las columnas usan fr (reparten el espacio descontando el gap), con la
   misma proporción 44/56. Fuera del tramo no cambia nada. */
@media (min-width: 1101px) and (max-width: 1244px) {
  .personas-inner { grid-template-columns: 44fr 56fr; }
  .personas-inner.rev { grid-template-columns: 56fr 44fr; }
}
/* Foto más baja — para bloques introductorios seguidos de más
   contenido, donde los 520px por defecto dejan demasiado aire. */
.personas-photo.compact { height: 340px; }

/* Banner fotográfico contenido con título superpuesto (Tlaloc) —
   igual que .page-banner pero dentro de .page-inner, con esquinas
   redondeadas. Altura propia para poder reducirla en móvil. */
.tlaloc-hero { height: 520px; }

/* Foto — sin overlay, corte limpio */
.personas-photo {
  border-radius: 12px;
  overflow: hidden;
  height: 520px;
}
.personas-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.personas-content { display: flex; flex-direction: column; gap: 0; }

/* Variante de proporción natural — para fotografías que deben verse
   completas, sin recortar a ninguna persona a ningún ancho de
   pantalla (p. ej. "Nuestra gente" en Crece con nosotros). La caja
   adopta la proporción real de la foto en vez de una altura fija. */
.personas-photo.ratio-natural { height: auto; aspect-ratio: 3 / 2; }

.personas-quote {
  font-size: 22px; font-weight: 300; font-style: italic;
  line-height: 1.55; color: var(--ink);
  position: relative; padding-left: 32px;
  margin-bottom: 40px; margin-top: 8px;
}
.personas-quote::before {
  content: '"';
  position: absolute; left: 0; top: 14px;
  font-size: 68px; font-weight: 800; font-style: normal;
  color: var(--dawn); opacity: .22; line-height: 0;
}

.personas-body h3 {
  font-weight: 600; font-size: 20px;
  letter-spacing: -.01em; color: var(--ink); margin-bottom: 14px;
}
.personas-body p {
  font-size: 18px; font-weight: 400;
  line-height: 1.8; color: rgba(28,23,16,.76); margin-bottom: 32px;
}

/* Grid de personas: foto secundaria opcional */
.personas-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 28px;
}
.personas-grid-photo {
  border-radius: 8px; overflow: hidden; height: 160px;
}
.personas-grid-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
}

/* Encuadre de la foto de la colaboradora (Nuestra cultura, Home): la fotografía
   es vertical y la caja es panorámica; se baja la ventana de recorte para
   quitar el techo vacío de arriba y dejar su rostro y torso protagonistas.
   En una sola columna (≤1100 px) la caja es más ancha y el recorte, más
   estrecho, así que la ventana se ajusta de nuevo. */
.personas-grid-photo img.crop-cultura-1 { object-position: center 50%; }
@media (max-width: 1100px) { .personas-grid-photo img.crop-cultura-1 { object-position: center 38%; } }

/* Video vertical protagonista (p. ej. "Un ingenio de oportunidades",
   Crece con nosotros) — el video conserva su relación de aspecto
   9:16 original, nunca recortado ni estirado. Sin overlay, sin
   texto encima; solo los controles nativos del navegador. */
.oportunidades-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 45% 55%;
  gap: 40px; align-items: center;
}
.oportunidades-video { display: flex; justify-content: center; min-width: 0; }
.oportunidades-video video {
  width: 100%; max-width: 430px; height: auto;
  border-radius: 12px; display: block;
  background: var(--mist-3);
}

/* ── 11. SOSTENIBILIDAD ─────────────────────────────────── */
.s-sostenibilidad { padding: 0; background: var(--mist); }

/* Cabecera fotográfica: foto con overlay oscuro, texto blanco */
.sos-header { position: relative; height: 420px; overflow: hidden; }
.sos-header img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
}
.sos-header-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(23,30,16,.48) 0%,
    rgba(23,30,16,.70) 100%
  );
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  padding: 0 52px 56px; text-align: center;
}
.sos-header-mask .ey { margin-bottom: 16px; }
.sos-h2 {
  font-weight: 800;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.10; letter-spacing: -.02em;
  color: #fff; margin-bottom: 14px;
}
.sos-sub-text {
  font-size: 18px; font-weight: 400;
  line-height: 1.8; color: rgba(247,243,233,.80);
  max-width: 520px;
}

/* Cards de programas */
.sos-cards { padding: 72px 52px 100px; }
.sos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px; margin: 0 auto;
}
.sos-card {
  background: var(--mist);
  border-radius: 12px; padding: 40px 32px;
  border: .5px solid rgba(28,23,16,.07);
  transition: transform .30s ease;
}
.sos-card:hover { transform: translateY(-3px); }
.sos-n     { font-weight: 800; font-size: 44px; letter-spacing: -.02em; color: var(--cane); line-height: 1; margin-bottom: 16px; }
.sos-title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 12px; }
.sos-desc  { font-size: 14.5px; font-weight: 400; line-height: 1.75; color: rgba(28,23,16,.70); }

/* ── 11b. SOSTENIBILIDAD (página interna) — datos destacados ─
   Reutiliza .sos-card/.sos-n/.sos-title/.sos-desc (impacto RSE
   del Home) en una variante de 4 columnas para cifras puntuales
   (p. ej. Tonatiuh). Sin tocar el componente original de 3 col. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1100px; margin: 0 auto;
}
.stat-grid .sos-card { padding: 32px 22px; }
.stat-grid .sos-n     { font-size: 32px; }
.stat-grid.cols-5     { grid-template-columns: repeat(5, 1fr); }
/* Tlaloc (5 datos, algunos en texto en vez de cifra): número algo
   más pequeño que Tonatiuh, y altura reservada en .sos-n/.sos-title
   (hasta 2 líneas cada uno) para que los 5 recuadros alineen su
   texto secundario a la misma altura sin importar si el dato de
   arriba ocupó una o dos líneas. No toca el componente base ni la
   variante de 4 columnas que usa Tonatiuh. */
.stat-grid.cols-5 .sos-n     { font-size: 26px; min-height: 52px; }
.stat-grid.cols-5 .sos-title { line-height: 1.3; min-height: 39px; }

/* Grid con divisores — mismo lenguaje que .filosofia-grid (líneas
   verticales sutiles, sin tarjetas) para secuencias breves de pasos
   o ideas (p. ej. el ciclo del agua de Tlaloc, o ideas clave de
   Cogeneración). .cols-3 la reduce a 3 columnas. */
.divider-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 8px;
}
.divider-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.divider-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.divider-item { padding: 0 24px; }
.divider-item:first-child { padding-left: 0; }
.divider-item:last-child { padding-right: 0; }
.divider-item + .divider-item { border-left: 1px solid rgba(28,23,16,.08); }
.divider-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cane); margin-bottom: 10px;
}
.divider-desc { font-size: 14.5px; font-weight: 400; line-height: 1.7; color: rgba(28,23,16,.70); }
.divider-desc + .divider-desc { margin-top: 8px; opacity: .72; }
.divider-statement { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
/* Numeral grande — reutiliza el peso tipográfico de .t-year (línea
   de tiempo) para marcar pasos de un proceso sin usar íconos. */
.divider-num {
  display: block; font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; color: var(--cane); margin-bottom: 10px;
}
.divider-title { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 6px; }

/* ── RESPONSABILIDAD SOCIAL (Compromiso con el entorno) ──────
   Composición editorial asimétrica: cuatro áreas que alternan foto
   izquierda / texto sin foto / foto derecha / foto izquierda, sin
   tarjetas ni íconos, y una banda de resultados con numerales
   grandes. Un solo color de acento (verdes institucionales). */
.rse-intro { max-width: 720px; }
.rse-area {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center; margin-top: 112px;
}
.rse-intro + .rse-area { margin-top: 96px; }
.rse-area.rev .rse-media { order: 2; }
.rse-photo { margin: 0; height: 440px; border-radius: 12px; overflow: hidden; }
.rse-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fotografías rotativas (crossfade): un único espacio por área, con altura
   fija (sin saltos de layout). Las imágenes se apilan; la nueva se funde
   encima de la anterior, que se mantiene opaca hasta terminar (sin "hueco"
   a mitad de la transición). Sin desplazamiento, zoom ni filtros. Si no hay
   JavaScript o se pidió reducir el movimiento, solo se ve la primera. */
.rse-media { position: relative; }
.rse-rotor { position: relative; }
.rse-rotor img { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.rse-rotor img.is-prev { opacity: 1; z-index: 1; }
.rse-rotor img.is-active { opacity: 1; z-index: 2; transition: opacity .75s ease; }
.rse-dots { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; gap: 4px; }
.rse-media.is-rot .rse-dots { display: flex; }
.rse-dot {
  position: relative; width: 22px; height: 12px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.rse-dot::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 5px;
  height: 2px; border-radius: 1px; background: rgba(28,23,16,.20);
  transition: background-color .3s ease;
}
.rse-dot.is-active::before { background: var(--cane); }
.rse-dot:focus-visible { outline: 2px solid var(--cane-2); outline-offset: 2px; }
.rse-num {
  display: block; font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; color: var(--cane); margin-bottom: 12px;
}
.rse-h {
  font-weight: 800; font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
.rse-sub {
  margin-top: 16px; font-weight: 700; font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.25; letter-spacing: -.01em; color: var(--cane);
}
.rse-p {
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(28,23,16,.76); max-width: 500px; margin-top: 16px;
}
.rse-list { margin-top: 26px; max-width: 460px; }
.rse-list li {
  padding: 11px 0; border-top: 1px solid rgba(28,23,16,.10);
  font-size: 15px; font-weight: 400; color: var(--ink);
}
.rse-list li strong { font-weight: 600; }
.rse-list li:last-child { border-bottom: 1px solid rgba(28,23,16,.10); }
.rse-inline {
  margin-top: 22px; font-size: 14px; font-weight: 400; line-height: 1.8;
  color: var(--ink); max-width: 520px;
}
.rse-fact { position: relative; margin-top: 30px; padding-top: 18px; }
.rse-fact::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; border-radius: 2px; background: var(--cane-2);
}
.rse-fact strong {
  display: block; font-weight: 800; font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.05; letter-spacing: -.02em; color: var(--cane);
}
.rse-fact span { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; color: var(--ink); }
.rse-fact small { display: block; margin-top: 4px; font-size: 13px; font-weight: 300; color: var(--ink-m); }

/* Área sin fotografía: texto + cifra en dos columnas */
.rse-area-text { grid-template-columns: 1.35fr 1fr; align-items: start;
  padding-top: 56px; border-top: 1px solid rgba(28,23,16,.10); }
.rse-fact-side { margin-top: 0; padding-top: 18px; align-self: center; }
.rse-fact-side strong { font-size: clamp(56px, 6vw, 88px); }
.rse-fact-side span { max-width: 300px; font-size: 16px; line-height: 1.5; }

/* Banda de resultados */
.rse-results-sec { padding-top: 96px; padding-bottom: 104px; }
.rse-results {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  margin-top: 48px;
}
.rse-res { position: relative; padding-top: 22px; border-top: 1px solid rgba(28,23,16,.10); }
.rse-res::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 40px; height: 3px; border-radius: 2px; background: var(--cane-2);
}
.rse-res strong {
  display: block; font-weight: 800; font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1; letter-spacing: -.03em; color: var(--cane);
}
.rse-res span { display: block; margin-top: 12px; font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--ink); }
.rse-res small { display: block; margin-top: 6px; font-size: 12px; font-weight: 300; color: var(--ink-m); }

/* Revelado en secuencia de etapas (.stage-reveal): Gestión del agua de
   Tlaloc (01 → 04, con línea) y las tres etapas de Cogeneración (01 → 03,
   sin línea). .is-anim / .is-on las agrega un script solo si no se pidió
   reducir el movimiento; sin ellas todo es visible. Cada etapa: fundido +
   14 px verticales (0.5 s, 130 ms entre etapas); dentro de la etapa, número
   → título → texto, con 90 ms entre sí. En Tlaloc, una línea de 1 px en
   #7CC242 (sobre la franja, dentro de su margen actual) se traza de
   izquierda a derecha acompañando la secuencia. */
.stage-reveal { position: relative; }
.stage-reveal .divider-item:nth-child(1) { --i: 0; }
.stage-reveal .divider-item:nth-child(2) { --i: 1; }
.stage-reveal .divider-item:nth-child(3) { --i: 2; }
.stage-reveal .divider-item:nth-child(4) { --i: 3; }
.stage-reveal.is-anim .divider-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1);
}
.stage-reveal.is-anim .divider-item > * {
  opacity: 0;
  transition: opacity .45s cubic-bezier(.22,.61,.36,1);
}
.stage-reveal.is-on .divider-item {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i) * 130ms);
}
.stage-reveal.is-on .divider-item > * { opacity: 1; }
.stage-reveal.is-on .divider-item > :nth-child(1) { transition-delay: calc(var(--i) * 130ms); }
.stage-reveal.is-on .divider-item > :nth-child(2) { transition-delay: calc(var(--i) * 130ms + 90ms); }
.stage-reveal.is-on .divider-item > :nth-child(3) { transition-delay: calc(var(--i) * 130ms + 180ms); }
.stage-reveal.is-on .divider-item > :nth-child(4) { transition-delay: calc(var(--i) * 130ms + 270ms); }
@media (min-width: 1101px) {
  .tlaloc-flow::before {
    content: ""; position: absolute; left: 0; right: 0; top: -16px;
    height: 1px; background: var(--cane-2);
  }
  .tlaloc-flow.is-anim::before {
    transform: scaleX(0); transform-origin: left center;
    transition: transform 1.1s cubic-bezier(.45,.05,.3,1);
  }
  .tlaloc-flow.is-on::before { transform: scaleX(1); }
}

/* Acordeón discreto (p. ej. "Conoce los 11 parámetros monitoreados"
   en Tlaloc) — solo texto, sin ícono nuevo: reutiliza la flecha de
   .ar y la gira al abrir. */
.ghost.is-open .ar, .ghost.is-open:hover .ar { transform: rotate(90deg); }
.tlaloc-params {
  margin-top: 28px; padding-top: 22px; max-width: 760px;
  margin-left: auto; margin-right: auto;
  border-top: 1px solid rgba(28,23,16,.10);
}
.tlaloc-params ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 32px;
}
.tlaloc-params li {
  font-size: 14px; font-weight: 300; line-height: 2;
  color: var(--ink-m); break-inside: avoid;
}

/* ── PORTAFOLIO Y PRESENTACIONES (Nuestros negocios) ─────────
   Portafolio comercial: transición industrial, azúcares, melaza,
   energía renovable y presentaciones. Composición editorial
   (fotografía real + tipografía), sin tarjetas ni íconos. ICUMSA y
   Brix son datos secundarios. Color: solo verdes institucionales
   (--cane en textos y datos, --cane-2 en líneas); sin azul ni
   naranja en esta página. Un único bloque sólido verde (Energía). */
.nx-accent {
  display: block; width: 48px; height: 3px; margin-top: 32px;
  background: var(--cane-2); border-radius: 2px;
}
.nx-accent.on-dark { margin: 0 0 28px; }

/* Producción industrial — la foto sangra al borde derecho */
.nx-ind { padding: 84px 0; overflow: hidden; }
.nx-ind-grid {
  display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: 72px; align-items: center;
  padding-left: max(52px, calc((100% - 1200px) / 2));
}
.nx-ind-photo {
  margin: 0; height: 480px; overflow: hidden;
  border-radius: 12px 0 0 12px;
}
.nx-ind-photo img { width: 100%; height: 100%; object-fit: cover; }

.nx-port { padding-top: 88px; padding-bottom: 88px; }
.nx-pres-sec { padding-top: 88px; padding-bottom: 88px; }

.nx-block {
  margin-top: 72px; padding-top: 56px;
  border-top: 1px solid rgba(28,23,16,.10);
}
.nx-block.nx-first { margin-top: 56px; }
.nx-h {
  font-weight: 800; font-size: clamp(26px, 2.7vw, 38px);
  line-height: 1.15; letter-spacing: -.02em; color: var(--ink);
}
.nx-p {
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(28,23,16,.76); max-width: 520px; margin-top: 16px;
}

/* Azúcares — 2 × 2, fotografías grandes */
.nx-tiles {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 44px 28px; margin-top: 36px;
}
.nx-photo, .nx-feature-photo, .nx-pres-photo, .nx-hero-photo, .nx-energy-photo {
  margin: 0; border-radius: 12px; overflow: hidden;
}
/* Entrada secuencial de las cuatro azúcares: la clase .is-anim la agrega un
   script solo si no se pidió reducir el movimiento (sin ella todo es visible).
   Misma animación para las cuatro: fundido + 18 px verticales, 1 s. */
.nx-tiles.is-anim .nx-tile {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s cubic-bezier(.25,.6,.35,1), transform 1s cubic-bezier(.25,.6,.35,1);
}
.nx-tiles.is-anim .nx-tile.is-on {
  opacity: 1; transform: none;
  transition-delay: var(--d, 0ms);
}
.nx-photo { aspect-ratio: 3 / 2; }
.nx-photo img, .nx-feature-photo img, .nx-pres-photo img,
.nx-hero-photo img, .nx-energy-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.nx-photo img { object-position: center 55%; }
.nx-name {
  position: relative; padding-top: 20px;
  font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25;
  letter-spacing: -.015em; color: var(--cane); margin-top: 20px;
}
.nx-name::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 32px; height: 3px; border-radius: 2px; background: var(--cane-2);
}
.nx-spec {
  font-size: 14px; font-weight: 300; letter-spacing: .01em;
  color: var(--ink-m); margin-top: 6px;
}

/* Melaza — texto a la izquierda, foto a la derecha */
.nx-feature {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.nx-feature.rev .nx-feature-photo { order: 2; }
.nx-feature.rev .nx-feature-text { order: 1; }
.nx-feature-photo { height: 380px; }
.nx-datum { position: relative; margin-top: 36px; padding-top: 22px; }
.nx-datum::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 48px; height: 3px; border-radius: 2px; background: var(--cane-2);
}
.nx-datum span {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-m);
}
.nx-datum strong {
  font-weight: 800; font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.1; letter-spacing: -.02em; color: var(--cane);
}

/* Energía renovable — foto y panel verde forman UNA sola pieza editorial: columnas
   iguales, misma altura (380 px), sin separación entre ellas y con las esquinas
   redondeadas solo en el contorno exterior. Es una categoría comercial
   distinta de los azúcares: separador editorial más marcado (línea con
   un tramo verde) y más aire arriba; el panel verde es el único bloque
   de color sólido de la página. */
.nx-energy-wrap {
  position: relative; margin-top: 104px; padding-top: 64px;
}
.nx-energy-wrap::before {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 64px; height: 3px; border-radius: 2px; background: var(--cane-2);
}
.nx-energy {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; align-items: stretch;
}
.nx-energy-photo { height: 380px; border-radius: 12px 0 0 12px; }
.nx-energy-panel {
  display: flex; flex-direction: column; justify-content: center;
  height: 380px; padding: 48px 56px;
  background: var(--cane); border-radius: 0 12px 12px 0;
}
.nx-energy-panel .nx-h { color: #fff; }
.nx-energy-panel .nx-p { color: rgba(255,255,255,.86); }

/* Capacidad comercial — sección propia (fondo blanco): eyebrow con acento naranja
   discreto y más presencia que el eyebrow estándar, título con el estilo de
   títulos de sección (.s-h) y los dos párrafos oficiales en dos columnas. */
.nx-cap-sec { padding-top: 88px; padding-bottom: 24px; }
.nx-cap-sec .ey-ln { width: 32px; height: 2px; border-radius: 1px; background: var(--dawn); }
.nx-cap-sec .ey-tx { font-size: 13px; font-weight: 600; letter-spacing: .2em; }
.nx-cap-sec .s-h { max-width: 820px; }
.nx-cap-sec .nx-info-cols { margin-top: 36px; }
.nx-info-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 960px;
}
.nx-info-cols p {
  font-weight: 400; font-size: 17px; line-height: 1.7;
  color: rgba(28,23,16,.72);
}

/* Presentaciones y modalidades */
.nx-hero-photo { margin-top: 48px; aspect-ratio: 1527 / 704; }
.nx-pres-row {
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: 40px; margin-top: 40px;
}
.nx-pres-row.rev { grid-template-columns: 1fr 1.35fr; }
.nx-pres-photo { height: 340px; }
.nx-pres-info { margin-top: 20px; }
.nx-label {
  font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-m); margin-bottom: 6px;
}
.nx-sizes {
  display: flex; flex-wrap: wrap;
  font-weight: 800; font-size: clamp(26px, 2.6vw, 34px);
  letter-spacing: -.02em; line-height: 1.2; color: var(--cane);
}
.nx-sizes span + span {
  margin-left: 28px; padding-left: 28px;
  border-left: 1px solid rgba(28,23,16,.14);
}
.nx-note { font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--ink-m); margin-top: 8px; }
.nx-note-lg { font-size: 20px; line-height: 1.5; color: var(--ink); margin-top: 0; max-width: 360px; }
.nx-label.is-green { color: var(--cane); }

/* ── CALIDAD E INOCUIDAD (Quiénes somos) ─────────────────────
   Cierre institucional de la página: sistemas de gestión,
   certificaciones de mercado y cierre humano. Reutiliza .ey, .s-h,
   .page-section/.page-inner y el lenguaje editorial del sitio:
   fotografía documental sin filtros, líneas sutiles, sin tarjetas. */
.cal-section { padding-top: 88px; padding-bottom: 88px; }
.cal-p {
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(28,23,16,.76); max-width: 640px;
}
.cal-h {
  font-weight: 800; font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.18; letter-spacing: -.02em;
  color: var(--ink); margin: 14px 0 16px;
}
.cal-block {
  margin-top: 88px; padding-top: 72px;
  border-top: 1px solid rgba(28,23,16,.10);
}
.cal-top {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.cal-top.rev { grid-template-columns: 1fr 1fr; }
.cal-photo {
  margin: 0; border-radius: 12px; overflow: hidden;
}
.cal-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.cal-photo { aspect-ratio: 3 / 2; }
/* Variante alta — fotografía principal del bloque (altura fija, recorte
   limpio de la original sin deformarla). */
.cal-photo.tall { aspect-ratio: auto; height: 580px; }

/* Certificaciones: logo + datos, sin tarjetas — columnas separadas
   por una línea vertical sutil (mismo lenguaje que .divider-grid). */
.cal-certs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 64px;
}
.cal-certs.two { grid-template-columns: repeat(2, 1fr); }
.cal-cert { padding: 0 32px; }
.cal-cert:first-child { padding-left: 0; }
.cal-cert:last-child { padding-right: 0; }
.cal-cert + .cal-cert { border-left: 1px solid rgba(28,23,16,.10); }
.cal-logo { display: block; height: 128px; width: auto; margin-bottom: 24px; }
.cal-norm {
  font-weight: 600; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cane); margin-bottom: 8px;
}
.cal-name {
  font-weight: 600; font-size: 17px; line-height: 1.35;
  letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px;
}
.cal-text {
  font-size: 16.5px; font-weight: 400; line-height: 1.75;
  color: rgba(28,23,16,.70);
}
.cal-scope {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid rgba(28,23,16,.10);
  font-size: 14.5px; font-weight: 400; line-height: 1.7;
  color: rgba(28,23,16,.70);
}
.cal-scope span {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-m);
}

/* Selector de producto (p. ej. Azúcar/Melaza sobre el mapa) —
   editorial, no botones grandes: texto + subrayado en el activo. */
.wm-selector {
  display: flex; gap: 32px; justify-content: center;
  margin-top: 40px;
}
.wm-tab {
  background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-s);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.wm-tab:hover { color: var(--ink-m); }
.wm-tab.is-active { color: var(--cane); border-bottom-color: var(--cane-2); }

/* Mapa mundial de puntos (p. ej. "Nuestros mercados", Nuestros
   negocios). Elemento web propio (SVG + datos, geometría real de
   continentes), no una imagen — base en verde institucional apagado,
   mercados destacados en verde claro, sin pines, sin banderas, sin
   relleno de países. Protagonista de la sección: ocupa la mayor
   parte del ancho disponible. */
.world-map-wrap { max-width: 960px; margin: 48px auto 0; position: relative; }
.world-map { width: 100%; height: auto; display: block; }
.wm-base circle { fill: var(--cane); opacity: .48; }
.wm-market-dot { fill: var(--cane-2); cursor: pointer; }
.wm-market-dot:hover, .wm-market-dot:focus { fill: var(--forest-h); outline: none; }
.wm-market-dot.is-active { fill: var(--forest-h); r: 7; }

/* Etiqueta contextual al pasar el cursor sobre un país — anclada al punto,
   no un panel: fondo blanco, borde muy sutil, sin sombras fuertes.
   Se reposiciona (clases flip-*) cuando el punto está cerca de un
   borde del mapa para no cortarse. */
.wm-tip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  background: #fff;
  border: 1px solid rgba(28,23,16,.12);
  border-radius: 4px;
  padding: 7px 11px;
  min-width: 68px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(23,30,16,.06);
  z-index: 4;
  /* Aparece al pasar el cursor: transición muy corta, sin capturar el
     puntero (no bloquea el hover de puntos vecinos). */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, visibility 0s linear .12s;
}
.wm-tip.is-on {
  opacity: 1; visibility: visible;
  transition: opacity .12s ease, visibility 0s;
}
.wm-tip.flip-below { transform: translate(-50%, 8px); }
.wm-tip.flip-right { transform: translate(0, calc(-100% - 8px)); }
.wm-tip.flip-right.flip-below { transform: translate(0, 8px); }
.wm-tip.flip-left { transform: translate(-100%, calc(-100% - 8px)); }
.wm-tip.flip-left.flip-below { transform: translate(-100%, 8px); }
/* Etiqueta permanente de El Salvador (referencia fija del mapa): misma
   familia visual que el tooltip, una sola línea, bajo su punto y hacia el
   océano (a la izquierda) para no tocar a México ni a Perú. */
.wm-fixed {
  position: absolute; z-index: 3;
  transform: translate(calc(-100% + 10px), 11px);
  background: #fff;
  border: 1px solid rgba(28,23,16,.12);
  border-radius: 4px;
  padding: 4px 9px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 10px rgba(23,30,16,.06);
  opacity: 0; visibility: hidden;
}
.wm-fixed.is-on { opacity: 1; visibility: visible; }
.wm-tip-country {
  font-weight: 600; font-size: 11px; letter-spacing: .03em;
  color: var(--ink); margin: 0;
}
.wm-tip-product {
  font-size: 9px; font-weight: 300; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-m); margin: 3px 0 0;
}

/* Cierre editorial de "Reconocimientos" (Crece con nosotros): frase centrada
   en dos líneas, con mucho aire sobre ella para separarla de los sellos.
   Menor que el título de la sección; la primera línea es pequeña y ligera y la
   segunda grande y en negritas, para marcar el contraste tipográfico. */
.rec-cierre {
  margin-top: 104px; text-align: center;
  font-size: clamp(22px, 2.5vw, 32px); line-height: 1.35; letter-spacing: -.015em;
}
.rec-cierre span, .rec-cierre strong { text-wrap: balance; }
.rec-cierre span { display: block; font-size: clamp(18px, 2vw, 26px); font-weight: 300; letter-spacing: -.01em; color: var(--ink-m); }
.rec-cierre strong { display: block; margin-top: 4px; font-weight: 800; color: var(--cane); }

/* Programas RSE — cuadrícula editorial de 2 columnas (p. ej.
   "Nuestros programas", Compromiso con el entorno). Pieza editorial,
   no tarjeta: sin fondo, sin sombra, sin ícono; solo número, título,
   descripción y un bloque "Actividades" (provisional hasta recibir
   contenido oficial de RSE). Separador sutil solo entre filas. */
.programas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 80px;
  margin-top: 56px;
}
.programa-item:nth-child(3), .programa-item:nth-child(4) {
  padding-top: 48px;
  border-top: 1px solid rgba(28,23,16,.10);
}
.programa-num {
  display: block; font-size: 24px; font-weight: 800;
  letter-spacing: -.02em; color: var(--cane); margin-bottom: 10px;
}
.programa-title {
  font-weight: 600; font-size: 21px; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: 12px;
}
.programa-desc {
  font-size: 15px; font-weight: 300; line-height: 1.75;
  color: var(--ink-m); margin-bottom: 24px;
}
.programa-activities-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cane); margin-bottom: 8px;
}
.programa-activities-text {
  font-size: 14px; font-weight: 300; font-style: italic;
  line-height: 1.7; color: var(--ink-m);
}

/* ── 12. HISTORIA ───────────────────────────────────────── */
.s-historia { padding: 0; background: var(--mist); }

/* Banner fotográfico: la planta al atardecer */
.historia-banner { position: relative; height: 500px; overflow: hidden; }
.historia-banner img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.historia-banner-mask {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(23,30,16,.92) 0%,
    rgba(23,30,16,.35) 52%,
    rgba(23,30,16,.12) 100%
  );
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 0 60px 56px;
}
/* "El presente" (Nuestra historia): sin tinte sobre la fotografía; solo un
   degradado oscuro en la zona del texto (lado izquierdo y parte inferior) que
   se desvanece a transparente, para conservar el color natural de la imagen. */
.historia-banner-mask--natural {
  background:
    linear-gradient(to right,
      rgba(23,30,16,.72) 0%,
      rgba(23,30,16,.62) 40%,
      rgba(23,30,16,.30) 62%,
      rgba(23,30,16,0) 82%),
    linear-gradient(to top,
      rgba(23,30,16,.55) 0%,
      rgba(23,30,16,.22) 32%,
      rgba(23,30,16,0) 52%);
}
/* En pantallas angostas el texto ocupa todo el ancho: el degradado pasa a ser inferior */
@media (max-width: 900px) {
  .historia-banner--presente { height: 680px !important; }
  .historia-banner-mask--natural {
    background: linear-gradient(to top,
      rgba(23,30,16,.86) 0%,
      rgba(23,30,16,.76) 45%,
      rgba(23,30,16,.62) 70%,
      rgba(23,30,16,.50) 82%,
      rgba(23,30,16,.14) 94%,
      rgba(23,30,16,0) 100%);
  }
}
.br-d { display: none; }
@media (min-width: 901px) { .br-d { display: inline; } }
.historia-banner-mask .ey { margin-bottom: 14px; }
.historia-banner-mask h2 {
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.09; letter-spacing: -.022em;
  color: #fff;
}

/* Contenido debajo del banner */
.historia-content { padding: 80px 52px 100px; background: var(--mist); }
.s-historia .historia-content p {
  /* Texto de apoyo: mismos valores globales que el resto del sitio (18 px / 400 / 1.8) */
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(28,23,16,.76);
}
.historia-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px; align-items: start;
}
.historia-text p {
  font-size: 14px; font-weight: 300;
  line-height: 1.78; color: var(--ink-m); margin-bottom: 32px;
}

/* Timeline */
.timeline { display: flex; flex-direction: column; }
.t-item   { display: flex; gap: 32px; }
.t-left   { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 68px; }
.t-dot    { width: 10px; height: 10px; border-radius: 50%; background: var(--cane); margin-top: 10px; flex-shrink: 0; }
.t-dot.da { background: var(--cane-2); }
.t-line   { width: .5px; flex: 1; background: rgba(28,23,16,.10); min-height: 64px; margin: 12px 0; }
.t-year   { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--cane); }
.t-year.da{ color: var(--cane-2); }
.t-body   { display: flex; flex: 1; justify-content: space-between; align-items: flex-start; gap: 32px; }
.t-content    { padding-bottom: 64px; }
.t-content h4 { font-weight: 600; font-size: 21px; color: var(--ink); margin-bottom: 9px; }
.t-content p  { font-size: 15.5px; font-weight: 400; line-height: 1.75; color: rgba(28,23,16,.70); max-width: 420px; }
.t-photo  { flex-shrink: 0; width: 240px; height: 172px; border-radius: 12px; overflow: hidden; margin-top: -6px; }
.t-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sellos oficiales (p. ej. EMAT/Tecoloco, Crece con nosotros) —
   archivos originales sin modificar; tamaño fijo (no % del ancho)
   para que nunca pierdan legibilidad, envuelven en pantallas
   angostas en vez de encogerse. */
.t-seals {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 44px; margin-top: 18px;
}
.t-seals img { width: 208px; height: auto; display: block; }

/* Composición fotográfica — cinco momentos históricos (1920 → Hoy).
   Puente visual entre la línea de tiempo y "El presente": banda
   fotográfica a sangre, año y título como texto HTML real. Sin
   tarjetas, sombras, degradados ni marcos — las fotos son las
   protagonistas, la transición de blanco y negro/sepia a color
   ya la da el material histórico real, sin filtros añadidos. */
.legado       { background: var(--mist); padding: 96px 0 112px; }
.legado-strip { display: flex; gap: 3px; }
.legado-item  { flex: 1; min-width: 0; }
.legado-photo { aspect-ratio: 3 / 4; overflow: hidden; background: var(--mist-3); }
.legado-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.legado-cap   { padding: 18px 14px 0; }
.legado-item:first-child .legado-cap { padding-left: 52px; }
.legado-item:last-child  .legado-cap { padding-right: 52px; }
.legado-year  { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--cane); margin-bottom: 4px; }
.legado-year.da { color: var(--cane-2); }
.legado-label { display: block; font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--ink-m); }

/* Revelado narrativo de la composición histórica (solo "Nuestra historia").
   La clase .is-anim la agrega un script únicamente si el usuario NO pidió
   reducir el movimiento; sin ella todo queda visible. Cada foto aparece
   con opacidad + 12 px de desplazamiento vertical, y su año/título entra
   un instante después. Una sola vez, sin zoom ni desplazamiento lateral. */
.legado.is-anim .legado-photo,
.legado.is-anim .legado-cap {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
.legado.is-anim .legado-item.is-on .legado-photo {
  opacity: 1; transform: none;
  transition-delay: var(--d, 0ms);
}
.legado.is-anim .legado-item.is-on .legado-cap {
  opacity: 1; transform: none;
  transition-delay: calc(var(--d, 0ms) + 280ms);
}

/* ── 13. CTA FINAL ──────────────────────────────────────── */
.s-cta { background: var(--dark); padding: 120px 52px; text-align: center; }
.s-cta h2 {
  font-weight: 800;
  font-size: clamp(36px, 4.8vw, 64px);
  letter-spacing: -.022em; line-height: 1.10;
  color: #fff; margin-bottom: 20px;
}
.s-cta p {
  font-size: 15px; font-weight: 300; line-height: 1.78;
  color: rgba(247,243,233,.50);
  max-width: 440px; margin: 0 auto 48px;
}
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* ── 13b. PAGE BANNER — cabecera de páginas internas ────── */
/* Componente compartido: toda página interna abre con esta cabecera
   fotográfica. Mismo lenguaje que los banners de Sostenibilidad/Historia. */
/* La altura es MÍNIMA: si el texto (eyebrow + título + subtítulo) no cabe, el banner crece en vez de
   recortar la parte superior con overflow:hidden. Cuando el texto cabe, se ve exactamente igual. */
.page-banner { position: relative; min-height: 420px; overflow: hidden; }
/* Variante alta — cuando la fotografía tiene varias personas a
   media altura (rostros ocupan casi todo el banner estándar): más
   alto para dejar el texto anclado abajo, sobre torso/uniforme,
   sin superponerse a ningún rostro. */
.page-banner.tall { min-height: 560px; }
.page-banner img,
.page-banner video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Video de fondo del hero (p. ej. "Compromiso con el entorno") —
   mismo tratamiento que una fotografía: recurso editorial, no
   interactivo, sin controles ni dependencia de JS. */
.hero-compromiso-video { object-position: center center; }
/* Encuadre del hero de "Crece con nosotros" (GENTE-FINAL.jpg) — en
   viewports angostos el recorte de object-fit:cover pasa a ser
   horizontal (la foto es más ancha que el banner), así que el
   encuadre por defecto ya no alcanza para dejar el texto fuera de
   los rostros; se ajusta solo el eje horizontal en ese tramo. */
.crece-hero-photo { object-position: center 50%; }
/* Eyebrow del hero de "Crece con nosotros": desplazado a la izquierda en
   escritorio para que no quede sobre el rostro de la colaboradora. */
/* Degradado del hero de "Crece con nosotros": solo en la parte inferior, hasta
   donde llega el eyebrow; el resto de la fotografía (incluido el lado
   izquierdo) se ve sin oscurecer. */
.page-banner-mask.mask-left.crece-hero-mask {
  background: linear-gradient(to top,
    rgba(23,30,16,.76) 0%,
    rgba(23,30,16,.66) 24%,
    rgba(23,30,16,.54) 38%,
    rgba(23,30,16,.28) 47%,
    rgba(23,30,16,0) 55%);
}
@media (max-width: 900px) {
  .page-banner-mask.mask-left.crece-hero-mask {
    background: linear-gradient(to top,
      rgba(23,30,16,.80) 0%,
      rgba(23,30,16,.68) 40%,
      rgba(23,30,16,.42) 58%,
      rgba(23,30,16,.12) 68%,
      rgba(23,30,16,0) 74%);
  }
}
@media (min-width: 901px) {
  .crece-hero-ey { margin-left: -40px; }
  /* Bloque de texto 22 px más abajo, para que el eyebrow quede bajo el rostro */
  .page-banner-mask.crece-hero-mask { padding-bottom: 34px; }
}
.page-banner-mask {
  position: relative; min-height: inherit;
  background: linear-gradient(to bottom,
    rgba(23,30,16,.62) 0%,
    rgba(23,30,16,.72) 50%,
    rgba(23,30,16,.90) 100%
  );
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 48px 52px 56px;
}
/* Variante localizada — degradado oscuro solo en el tercio izquierdo,
   a transparente antes del centro. Para fotografías que deben verse
   en su color y luz naturales (p. ej. Crece con nosotros): la foto
   no se oscurece de forma general, solo detrás del bloque de texto. */
.page-banner-mask.mask-left {
  background: linear-gradient(to right,
    rgba(23,30,16,.70) 0%,
    rgba(23,30,16,.46) 22%,
    rgba(23,30,16,0) 42%
  );
}
/* Variante reforzada — misma idea, extendida y algo más oscura, para
   fotografías muy claras/pálidas donde el degradado por defecto no
   alcanza a cubrir el párrafo (p. ej. cañaverales en flor). Prueba
   visual 2026-10-01, no es aún una regla definitiva. */
.page-banner-mask.mask-left-strong {
  background: linear-gradient(to right,
    rgba(23,30,16,.80) 0%,
    rgba(23,30,16,.60) 28%,
    rgba(23,30,16,0) 50%
  );
}
/* Variante más ancha y con transición muy suave — para fotos con
   zonas claras y mucho detalle justo detrás del párrafo (p. ej. la
   aérea de Quiénes somos). Más stops intermedios = degradado más
   gradual hacia el centro, no un corte perceptible. Prueba visual
   2026-10-01, no es aún una regla definitiva. */
.page-banner-mask.mask-left-wide {
  background: linear-gradient(to right,
    rgba(23,30,16,.82) 0%,
    rgba(23,30,16,.72) 20%,
    rgba(23,30,16,.50) 38%,
    rgba(23,30,16,.22) 52%,
    rgba(23,30,16,0) 64%
  );
}
/* Variante de esquina — degradado radial anclado en la esquina
   inferior izquierda, no una banda vertical de borde a borde (p. ej.
   el video de "Compromiso con el entorno"): concentrado en el 30-35%
   izquierdo (detrás del bloque de texto), desaparece antes del
   centro. Ancho (45%) sin cambios — no se extiende más hacia la
   derecha. Alto aumentado (130% → 170%) y más oscuro en los stops
   cercanos a la esquina, para que el eyebrow quede cubierto. */
.page-banner-mask.mask-corner-bl {
  background: radial-gradient(ellipse 45% 170% at 0% 100%,
    rgba(23,30,16,.90) 0%,
    rgba(23,30,16,.85) 40%,
    rgba(23,30,16,.75) 65%,
    rgba(23,30,16,.40) 80%,
    rgba(23,30,16,0) 92%
  );
}
/* Velo local difuminado — segundo nivel de contraste exclusivo del
   párrafo, no un tinte más fuerte de toda la foto. Óvalo borroso sin
   bordes ni forma de tarjeta, más oscuro justo detrás del texto y
   desvanecido hacia la fotografía. Prueba exclusiva de Quiénes somos
   (2026-10-01) — no es aún una regla global. */
.sub-veil { position: relative; }
.sub-veil::before {
  content: '';
  position: absolute;
  top: -22px; left: -28px; right: -120px; bottom: -22px;
  background: radial-gradient(ellipse 65% 100% at 18% 50%,
    rgba(10,14,8,.50) 0%,
    rgba(10,14,8,.28) 45%,
    rgba(10,14,8,0) 75%
  );
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.sub-veil p { position: relative; z-index: 1; }
/* Sombra: legibilidad garantizada sin importar el brillo de la foto
   ni cuánto empuje el contenido al eyebrow hacia la zona más clara.
   El eyebrow dorado necesita más ayuda que el blanco: dos capas. */
.page-banner-mask .ey-tx.l {
  text-shadow: 0 0 10px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.95);
}
.page-banner-mask h1,
.page-banner-mask .page-banner-sub {
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.page-banner-mask .ey { margin-bottom: 14px; }
.page-banner-mask h1 {
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.10; letter-spacing: -.02em;
  color: #fff;
  margin-bottom: 16px;
  max-width: 720px;
}
.page-banner-sub {
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(247,243,233,.82);
  max-width: 520px;
}

/* Contenido bajo el banner — secciones claras alternadas */
.page-section { padding: 100px 52px; background: var(--mist); }
.page-section.alt { background: var(--mist-2); }
.page-section.tint { background: var(--card-bg); }
.page-inner { max-width: 1100px; margin: 0 auto; }
.page-inner.narrow { max-width: 720px; }
.page-lede {
  font-size: 18px; font-weight: 400; line-height: 1.8;
  color: rgba(28,23,16,.70); margin-bottom: 24px;
}
.page-lede:last-child { margin-bottom: 0; }

/* Cierre editorial de página (Quiénes somos: calidad e inocuidad).
   Mismo tratamiento que el cierre de Compromiso con el entorno: centrado,
   fondo blanco, título protagonista y texto de apoyo subordinado. El relleno
   se reduce por breakpoint (la sección de Compromiso lo fija en línea). */
.page-section.cierre-sec { text-align: center; padding: 170px 52px; }
.cierre-sec .s-h { font-size: clamp(32px, 4.4vw, 60px); text-wrap: balance; }
.cierre-sec .page-lede { margin: 22px auto 0; max-width: 520px; }
@media (max-width: 900px) { .page-section.cierre-sec { padding: 130px 40px; } }
@media (max-width: 680px) { .page-section.cierre-sec { padding: 96px 28px; } }

/* Grid de valores — variante de 4 columnas del componente sos-card */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Filosofía (Quiénes somos) — Misión, Visión y Valores en tres
   columnas de igual jerarquía, separadas por líneas verticales
   extremadamente sutiles (división editorial, no tarjetas). */
.filosofia-grid {
  display: grid;
  grid-template-columns: 1.15fr 1.15fr 1fr;
}
.filosofia-item {
  padding: 0 40px;
}
.filosofia-item:first-child { padding-left: 0; }
.filosofia-item:last-child { padding-right: 0; }
.filosofia-item + .filosofia-item {
  border-left: 1px solid rgba(28,23,16,.08);
}
.filosofia-label {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--cane); margin-bottom: 18px;
}
.filosofia-quote {
  font-size: 23px; font-weight: 300; font-style: italic;
  line-height: 1.55; color: var(--ink);
}
.valores-stack {
  display: flex; flex-direction: column;
  font-size: 16px; font-weight: 400;
  color: var(--ink);
}
.valores-stack li {
  padding: 13px 0;
  border-bottom: 1px solid rgba(28,23,16,.08);
}
.valores-stack li:first-child { padding-top: 0; }
.valores-stack li:last-child { padding-bottom: 0; border-bottom: none; }

/* Entrada en secuencia de "Nuestra filosofía" (solo Quiénes somos): Misión
   (0 ms) → Visión (+140 ms) → al terminar Visión, la etiqueta "Nuestros
   valores" y luego cada valor, uno por uno (110 ms entre sí). Solo
   opacidad + 10–14 px verticales, sin otros efectos. .is-anim / .is-on las
   agrega un script únicamente si no se pidió reducir el movimiento; sin
   ellas todo es visible. */
.filosofia-grid.is-anim .filosofia-item:nth-child(-n+2) {
  opacity: 0; transform: translateY(14px);
  transition: opacity .48s cubic-bezier(.22,.61,.36,1), transform .48s cubic-bezier(.22,.61,.36,1);
}
.filosofia-grid.is-anim .filosofia-item:nth-child(3) { border-left-color: transparent; transition: border-color .42s ease; }
.filosofia-grid.is-anim .filosofia-item:nth-child(3) .filosofia-label,
.filosofia-grid.is-anim .valores-stack li {
  opacity: 0; transform: translateY(10px);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1), transform .42s cubic-bezier(.22,.61,.36,1);
}
.filosofia-grid.is-on .filosofia-item:nth-child(-n+2) { opacity: 1; transform: none; }
.filosofia-grid.is-on .filosofia-item:nth-child(2) { transition-delay: 140ms; }
.filosofia-grid.is-on .filosofia-item:nth-child(3) { border-left-color: rgba(28,23,16,.08); transition-delay: 620ms; }
.filosofia-grid.is-on .filosofia-item:nth-child(3) .filosofia-label { opacity: 1; transform: none; transition-delay: 620ms; }
.filosofia-grid.is-on .valores-stack li { opacity: 1; transform: none; }
.filosofia-grid.is-on .valores-stack li:nth-child(1) { transition-delay: 730ms; }
.filosofia-grid.is-on .valores-stack li:nth-child(2) { transition-delay: 840ms; }
.filosofia-grid.is-on .valores-stack li:nth-child(3) { transition-delay: 950ms; }
.filosofia-grid.is-on .valores-stack li:nth-child(4) { transition-delay: 1060ms; }
/* Columna única (≤1100 px): mismos pasos, tiempos más cortos */
@media (max-width: 1100px) {
  .filosofia-grid.is-on .filosofia-item:nth-child(2) { transition-delay: 120ms; }
  .filosofia-grid.is-on .filosofia-item:nth-child(3) { transition-delay: 480ms; }
  .filosofia-grid.is-on .filosofia-item:nth-child(3) .filosofia-label { transition-delay: 480ms; }
  .filosofia-grid.is-on .valores-stack li:nth-child(1) { transition-delay: 570ms; }
  .filosofia-grid.is-on .valores-stack li:nth-child(2) { transition-delay: 660ms; }
  .filosofia-grid.is-on .valores-stack li:nth-child(3) { transition-delay: 750ms; }
  .filosofia-grid.is-on .valores-stack li:nth-child(4) { transition-delay: 840ms; }
}

/* ── CONTACTO (formulario) ───────────────────────────────────
   Página "Contacto": columna de datos + formulario. Campos rectangulares
   con borde fino (3:1 de contraste), etiquetas en mayúsculas pequeñas como
   los demás rótulos del sitio, botón primario .btn-forest. Sin colores
   nuevos: el estado de error usa el naranja institucional en el borde y el
   mensaje en tinta, nunca solo color. */
.contacto-sec { padding-top: 96px; padding-bottom: 110px; }
.contacto-grid {
  display: grid; grid-template-columns: 5fr 7fr; gap: 88px; align-items: start;
}
.contacto-info .s-h { margin-bottom: 20px; font-size: clamp(30px, 3.2vw, 44px); }
.contacto-datos { margin-top: 40px; display: grid; gap: 26px; }
.contacto-datos dt {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cane); margin-bottom: 6px;
}
.contacto-datos dd { font-size: 17px; font-weight: 400; line-height: 1.6; color: var(--ink); }
.contacto-datos dd a, .contacto-cv a { color: var(--cane); font-weight: 600; transition: color .2s ease; }
.contacto-datos dd a:hover, .contacto-cv a:hover { color: var(--ink); }
.contacto-datos dd a:focus-visible, .contacto-cv a:focus-visible { outline: 2px solid var(--cane-2); outline-offset: 4px; border-radius: 2px; }
.contacto-empleo {
  margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(28,23,16,.10);
}
.contacto-empleo .page-lede { margin-bottom: 18px; font-size: 16px; }
.contacto-empleo .contacto-cv { margin: 24px 0 0; }

.contacto-form-wrap { max-width: 640px; }
.cf-preview {
  margin-bottom: 28px; padding: 12px 16px; font-size: 13px; line-height: 1.6;
  color: var(--ink); border: 1px dashed rgba(28,23,16,.30); border-radius: 6px;
}
.cf-field { margin-bottom: 26px; }
.cf-field > label, .cf-trap label {
  display: block; margin-bottom: 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--cane);
}
.cf input[type="text"], .cf input[type="email"], .cf select, .cf textarea {
  display: block; width: 100%;
  font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.5;
  color: var(--ink); background: #fff;
  border: 1px solid rgba(28,23,16,.45); border-radius: 6px;
  padding: 14px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.cf textarea { min-height: 168px; resize: vertical; }
.cf select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C1710' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.cf input:hover, .cf select:hover, .cf textarea:hover { border-color: var(--ink); }
.cf input:focus-visible, .cf select:focus-visible, .cf textarea:focus-visible {
  outline: 2px solid var(--cane-2); outline-offset: 2px; border-color: var(--cane);
}
.cf input.is-invalid, .cf select.is-invalid, .cf textarea.is-invalid { border-color: var(--dawn); border-width: 2px; padding: 13px 15px; }
.cf input[type="checkbox"].is-invalid { outline: 2px solid var(--dawn); outline-offset: 2px; }
.cf-err { margin-top: 8px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.cf-err::before { content: "● "; color: var(--dawn); }

.cf-consent { margin-top: 4px; }
.cf-check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font-size: 14px; font-weight: 400; line-height: 1.6;
  text-transform: none; letter-spacing: 0; color: var(--ink);
}
.cf-consent > label.cf-check { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: 0; }
.cf-check input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--cane); cursor: pointer; }
.cf-check input:focus-visible { outline: 2px solid var(--cane-2); outline-offset: 3px; }
.cf-actions { margin-top: 32px; }
.cf-actions .btn { font-family: inherit; }
.cf-actions .btn:disabled { opacity: .6; cursor: default; transform: none; }
.cf-status { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--ink); }
.cf-status.is-error::before { content: "● "; color: var(--dawn); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-ok { padding: 8px 0 8px 28px; border-left: 3px solid var(--cane-2); }
.cf-ok:focus { outline: none; }
.cf-ok h3 { font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.02em; color: var(--ink); }
.cf-ok p { margin-top: 12px; font-size: 18px; font-weight: 400; line-height: 1.7; color: rgba(28,23,16,.76); }
@media (prefers-reduced-motion: reduce) { .cf input, .cf select, .cf textarea { transition: none; } }

/* ── 14. FOOTER ─────────────────────────────────────────── */
footer {
  background: var(--dark-2);
  padding: 64px 52px 36px;
  border-top: .5px solid rgba(247,243,233,.07);
}
.f-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 52px;
}
/* Logo del footer: claramente mayor que el del header. El PNG blanco trae ~22 %
   de margen transparente arriba y abajo y ~9 % a la izquierda; los márgenes
   negativos lo recortan visualmente para alinear el logo con el texto. */
.f-logo-link { display: inline-block; }
.f-logo {
  display: block; height: 150px; width: auto;
  margin: -32px 0 -14px -21px; opacity: .95;
  transition: transform .25s ease;
}
.f-logo:hover { transform: translateY(-4px); }
.f-brand h3 { font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(247,243,233,.85); margin-bottom: 12px; }
.f-brand p  { font-size: 12px; font-weight: 300; line-height: 1.75; color: rgba(247,243,233,.36); }
.f-brand a  { color: rgba(247,243,233,.45); display: block; transition: color .22s ease; }
.f-brand a:hover { color: rgba(247,243,233,.85); }
.f-col h4   { font-size: 9px; font-weight: 600; letter-spacing: .20em; text-transform: uppercase; color: rgba(247,243,233,.30); margin-bottom: 16px; }
.f-col ul   { display: flex; flex-direction: column; gap: 10px; }
.f-col a    { font-size: 12px; font-weight: 300; color: rgba(247,243,233,.50); transition: color .22s ease; }
.f-col a:hover { color: rgba(247,243,233,.88); }
.f-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 28px;
  border-top: .5px solid rgba(247,243,233,.07);
  gap: 16px; flex-wrap: wrap;
}
.f-copy   { font-size: 11px; font-weight: 300; color: rgba(247,243,233,.26); letter-spacing: .04em; }
.f-social { display: flex; gap: 4px; align-items: center; }
/* Íconos de redes: glifos de 28 px en un área clicable de 48 px */
.f-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: rgba(247,243,233,.78); transition: color .22s ease, transform .25s ease;
}
/* Mismo hover que los logos: sube un poco, sin rebote */
.f-social a:hover { color: #fff; transform: translateY(-4px); }
.f-social a:focus-visible { outline: 2px solid var(--cane-2); outline-offset: 2px; border-radius: 2px; color: #fff; }

/* ── 15. ANIMACIONES DE SCROLL ──────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .88s ease, transform .88s ease;
}
.rv.in   { opacity: 1; transform: none; }
.rv.d1   { transition-delay: .12s; }
.rv.d2   { transition-delay: .24s; }
.rv.d3   { transition-delay: .36s; }
.rv.d4   { transition-delay: .48s; }

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

/* ── 16. ANIMACIONES DE ENTRADA DEL HERO ────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hf { opacity: 0; transform: translateY(11px); animation: hfup .9s cubic-bezier(.22,.83,.54,1) both; }
  .h1 { animation-delay: .08s; }
  .h2 { animation-delay: .24s; }
  .h3 { animation-delay: .42s; }
  .h4 { animation-delay: .60s; }
  @keyframes hfup { to { opacity: 1; transform: none; } }

  .hero-right { animation: hri 1.8s ease both; }
  @keyframes hri { from { opacity: 0; } to { opacity: 1; } }
}

/* ── 17. RESPONSIVE ─────────────────────────────────────── */
/* Entre 1101 y 1240 px el menú cabe en una línea con espacios más cortos */
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav { padding: 14px 36px; }
  .nav-links { gap: 20px; }
  /* Aquí no hay espacio para crecer: se conserva el tamaño de menú anterior (10 px) */
  .nav-links a { font-size: 10px; letter-spacing: .12em; }
}
/* Entre 1241 y 1359 px el menú en español (el más largo) ya cabe a 12 px con
   espacios y márgenes más cortos; desde 1360 px recupera los espacios amplios. */
@media (min-width: 1241px) and (max-width: 1359px) {
  .nav { padding: 14px 36px; }
  .nav-links { gap: 20px; }
  .nav-links a { letter-spacing: .1em; }
}

/* ≤1100 px: el menú se pliega en un panel bajo el header. */
@media (max-width: 1100px) {
  .nav-toggle { display: block; }
  .nav-cta { margin-left: auto; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; justify-content: flex-start; gap: 0;
    padding: 6px 28px 14px;
    background: #fff;
    border-bottom: .5px solid rgba(28,23,16,.10);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .nav.is-open .nav-links {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .nav-links li + li { border-top: .5px solid rgba(28,23,16,.08); }
  .nav-links a {
    display: block; padding: 15px 0 15px 14px;
    font-size: 14px; letter-spacing: .1em;
    border-left: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
  }
  .nav-links a::after { display: none; }
  .nav-links a:hover, .nav-links a:focus-visible { border-left-color: var(--cane-2); }
  .nav-links a[aria-current="page"] { border-left-color: var(--cane-2); }
  /* selector de idioma dentro del panel */
  .nav-lang { display: none; }
  .nav-links li.nav-lang-m { display: flex; align-items: center; gap: 12px; padding: 4px 0 4px 6px; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
  .nav-links .nav-lang-m a, .nav-links .nav-lang-m .nav-lang-cur { display: inline-block; padding: 12px 10px; border-left: 0; }
  .nav-links .nav-lang-m .nav-lang-cur::after { left: 10px; right: 10px; bottom: 9px; }
  .nav-links .nav-lang-m a:hover, .nav-links .nav-lang-m a:focus-visible { border-left-color: transparent; color: var(--ink); }
}

@media (max-width: 1100px) {
  .negocios-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-grid,
  .stat-grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .f-grid        { grid-template-columns: 1fr 1fr; gap: 36px; }
  .historia-inner{ grid-template-columns: 1fr; gap: 48px; }
  .personas-inner{ gap: 40px; }
  .valores-grid  { grid-template-columns: repeat(2, 1fr); }
  .filosofia-grid{ grid-template-columns: 1fr; gap: 40px; }
  .filosofia-item { padding: 0; border-left: none !important; }
  .divider-grid,
  .divider-grid.cols-3,
  .divider-grid.cols-2 { grid-template-columns: 1fr; gap: 28px; }
  .divider-item   { padding: 0; border-left: none !important; }
}

@media (max-width: 900px) {
  .nav { padding: 14px 28px; }

  .page-banner        { min-height: 340px; }
  .page-banner.tall   { min-height: 460px; }
  .page-banner-mask   { padding: 48px 28px 40px; }
  .page-section       { padding: 72px 28px; }
  .video-banner       { height: 400px; }
  .video-banner-mask  { padding: 32px 28px; }
  .video-banner-text  { max-width: 460px; }

  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto 60vw;
    height: auto; max-height: none;
  }
  .hero-left  { padding: 48px 28px 48px; justify-content: flex-start; order: 1; }
  .hero-right { order: 2; min-height: 60vw; }
  .hero-h1    { font-size: clamp(34px, 9vw, 56px); }
  html[lang="en"] .hero-h1 { font-size: clamp(29px, 8.1vw, 52px); }
  .hero-sub   { max-width: 500px; }

  .s-negocios, .s-personas, .s-historia .historia-content,
  .sos-cards, .statement, .s-cta, footer { padding-left: 28px; padding-right: 28px; }
  .tlaloc-hero { height: 420px; }

  .s-header         { flex-direction: column; align-items: flex-start; gap: 14px; }
  .personas-inner,
  .personas-inner.rev { grid-template-columns: 1fr; }
  .personas-photo   { height: 320px; }
  .personas-photo.ratio-natural { height: auto; aspect-ratio: 3 / 2; }

  .rec-cierre { margin-top: 80px; }

  .contacto-grid { grid-template-columns: 1fr; gap: 56px; }
  .contacto-form-wrap { max-width: none; }

  /* Responsabilidad social: una columna, foto antes del texto */
  .rse-area, .rse-area-text { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
  .rse-intro + .rse-area { margin-top: 64px; }
  .rse-area.rev .rse-media { order: 0; }
  .rse-photo { height: 320px; }
  .rse-area-text { padding-top: 40px; }
  .rse-fact-side { align-self: start; }
  .rse-results { grid-template-columns: 1fr 1fr; gap: 44px 28px; }

  /* Portafolio y presentaciones: a una columna, texto antes que foto. */
  .nx-ind { padding: 64px 0 56px; }
  .nx-ind-grid { grid-template-columns: 1fr; gap: 36px; padding-left: 0; }
  .nx-ind-text { padding: 0 32px; }
  .nx-ind-photo { height: 320px; border-radius: 0; }
  .nx-port, .nx-pres-sec { padding-top: 64px; padding-bottom: 64px; }
  .nx-block { margin-top: 56px; padding-top: 44px; }
  .nx-block.nx-first { margin-top: 44px; }
  .nx-feature, .nx-feature.rev { grid-template-columns: 1fr; gap: 32px; }
  .nx-feature.rev .nx-feature-photo { order: 0; }
  .nx-feature.rev .nx-feature-text { order: 1; }
  .nx-feature-photo { height: 340px; }
  .nx-energy-wrap { margin-top: 72px; padding-top: 48px; }
  .nx-energy { grid-template-columns: 1fr; gap: 0; }
  .nx-energy-photo { height: 340px; border-radius: 12px 12px 0 0; }
  .nx-energy-panel { height: auto; padding: 40px 32px; border-radius: 0 0 12px 12px; }
  .nx-cap-sec { padding-top: 64px; padding-bottom: 16px; }
  .nx-info-cols { grid-template-columns: 1fr; gap: 14px; }
  .nx-pres-row, .nx-pres-row.rev { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .nx-pres-photo { height: 300px; }

  /* Calidad e inocuidad: en tablet/móvil el texto va primero, la
     fotografía después, y cada certificación pasa a una fila propia
     (logo a la izquierda, datos a la derecha) — los logos nunca se
     comprimen en una sola fila. */
  .cal-top, .cal-top.rev { grid-template-columns: 1fr; gap: 36px; }
  .cal-top .cal-top-text { order: -1; }
  .cal-photo.tall { height: 460px; }
  .cal-block { margin-top: 64px; padding-top: 56px; }
  .cal-certs, .cal-certs.two { grid-template-columns: 1fr; margin-top: 44px; }
  .cal-cert {
    padding: 28px 0; display: grid;
    grid-template-columns: 88px 1fr; column-gap: 24px; align-items: start;
  }
  .cal-cert:first-child { padding-top: 0; }
  .cal-cert + .cal-cert {
    border-left: none; border-top: 1px solid rgba(28,23,16,.10);
  }
  .cal-logo { grid-row: 1 / span 4; height: auto; width: 88px; margin-bottom: 0; }
  .cal-cert > :not(.cal-logo) { grid-column: 2; }
  /* Contenido primero, fotografía después (p. ej. "Nuestra gente") */
  .personas-inner.content-first .personas-photo   { order: 2; }
  .personas-inner.content-first .personas-content { order: 1; }
  .oportunidades-inner { grid-template-columns: 1fr; gap: 32px; }
  .oportunidades-content { order: 1; }
  .oportunidades-video   { order: 2; }
  .oportunidades-video video { max-width: 86%; }
  .personas-grid    { grid-template-columns: 1fr; }
  .sos-grid         { grid-template-columns: 1fr; }
  .historia-banner-mask { padding: 0 28px 40px; }

  /* Programas RSE — una columna; separador entre cada bloque (no
     solo entre filas) para que no se sienta como tarjetas apiladas. */
  .programas-grid { grid-template-columns: 1fr; gap: 0; margin-top: 40px; }
  .programa-item,
  .programa-item:nth-child(3), .programa-item:nth-child(4) {
    padding-top: 40px; margin-top: 40px; border-top: 1px solid rgba(28,23,16,.10);
  }
  .programa-item:first-child { padding-top: 0; margin-top: 0; border-top: none; }

  .legado        { padding: 64px 0 72px; }
  .legado-strip  { flex-direction: column; gap: 40px; }
  .legado-cap,
  .legado-item:first-child .legado-cap,
  .legado-item:last-child  .legado-cap { padding: 16px 28px 0; }
}

@media (max-width: 680px) {
  .cal-photo.tall { height: 360px; }
  .rec-cierre { margin-top: 64px; font-size: 20px; }
  .rec-cierre span { font-size: 17px; }
  .contacto-sec { padding-top: 64px; padding-bottom: 72px; }
  .cf-actions .btn { width: 100%; text-align: center; }
  .rse-photo { height: 260px; }
  .rse-results-sec { padding-top: 64px; padding-bottom: 72px; }
  .rse-results { gap: 36px 20px; margin-top: 36px; }
  .rse-res span { font-size: 14px; }
  .nx-ind-text { padding: 0 28px; }
  .nx-ind-photo { height: 260px; }
  .nx-tiles { grid-template-columns: 1fr 1fr; gap: 28px 14px; margin-top: 28px; }
  .nx-photo { aspect-ratio: 1 / 1; }
  .nx-name { font-size: 16px; margin-top: 14px; padding-top: 16px; }
  .nx-feature-photo { height: 280px; }
  .nx-energy-photo { height: 260px; }
  .nx-energy-panel { padding: 32px 24px; }
  .nx-pres-photo { height: 240px; }
  .cal-cert { grid-template-columns: 72px 1fr; column-gap: 20px; }
  .cal-logo { width: 72px; }
  /* En móvil el contenedor es mucho más angosto, así que el mismo
     texto ocupa una fracción mayor del ancho: se amplía solo el
     ancho del degradado (no la opacidad) para seguir cubriéndolo,
     sin volver a un tinte general (p. ej. "Compromiso con el
     entorno"). */
  .page-banner-mask.mask-corner-bl {
    background: radial-gradient(ellipse 70% 170% at 0% 100%,
      rgba(23,30,16,.90) 0%,
      rgba(23,30,16,.84) 25%,
      rgba(23,30,16,.74) 45%,
      rgba(23,30,16,.55) 60%,
      rgba(23,30,16,.30) 75%,
      rgba(23,30,16,0) 88%
    );
  }
  .negocios-grid{ grid-template-columns: 1fr; }
  .stat-grid,
  .stat-grid.cols-5 { grid-template-columns: 1fr; }
  .f-grid       { grid-template-columns: 1fr; }
  .f-logo       { height: 120px; margin: -26px 0 -10px -17px; }
  .cta-actions  { flex-direction: column; align-items: center; }
  .statement    { padding: 56px 24px; }
  .s-cta        { padding: 80px 24px; }
  .f-bottom     { flex-direction: column; align-items: flex-start; }
  footer        { padding: 48px 24px 28px; }
  .sos-header-mask { padding: 0 28px 40px; }
  .historia-banner  { height: 360px; }
  .personas-grid { display: none; } /* ocultar grid secundaria en móvil pequeño */

  .page-banner   { min-height: 300px; }
  .page-banner.tall { min-height: 560px; }
  .crece-hero-photo { object-position: center 44%; }
  .tlaloc-hero   { height: 340px; }
  .video-banner  { height: 300px; }
  .video-banner-mask { padding: 24px; }
  .valores-grid  { grid-template-columns: 1fr; }

  .wm-selector { gap: 22px; }
  .wm-tab { font-size: 11px; }
  .wm-tip { padding: 6px 10px; min-width: 62px; }
  .wm-fixed { padding: 3px 7px; }
  .wm-tip-country { font-size: 10px; }
  .tlaloc-params ul { columns: 1; }
}

/* ── Móvil: cabeceras fotográficas que crecen con su contenido ───────────
   Con altura fija (300/340/420 px) y el texto anclado abajo, en teléfonos el
   bloque de texto (eyebrow + título + subtítulo en 3–5 líneas) supera la
   altura y la parte superior queda recortada por overflow:hidden: se perdían
   el eyebrow y el título (Nuestra historia, Nuestros negocios, Compromiso con
   el entorno, "Nuevas capacidades…" en Quiénes somos, banner de Tlaloc).
   Ahora los banners de página (.page-banner) crecen en TODOS los anchos (ver su regla base);
   aquí queda el resto de cabeceras con foto, solo ≤ 680 px. */
@media (max-width: 680px) {
  .sos-header { height: auto; min-height: 420px; }
  .sos-header img { position: absolute; inset: 0; }
  .sos-header-mask { position: relative; inset: auto; min-height: inherit; padding-top: 56px; }

  .tlaloc-hero { height: auto; min-height: 340px; }
  .tlaloc-hero > img { position: absolute; inset: 0; }
  .tlaloc-hero > div { position: relative !important; inset: auto !important; min-height: 340px; padding-top: 48px !important;
    background: linear-gradient(to top, rgba(23,30,16,.86) 0%, rgba(23,30,16,.74) 55%, rgba(23,30,16,.58) 100%) !important; }

  /* Legibilidad del eyebrow y del texto en móvil: los degradados "mask-left" y
     "mask-corner-bl" solo oscurecen el lado izquierdo, pero en teléfono el texto
     ocupa todo el ancho y el eyebrow queda sobre la zona más clara de la foto
     (cielo, montañas). Se usa un oscurecimiento suave y continuo de abajo hacia
     arriba, y el eyebrow pierde el halo negro (que se veía como mancha). */
  .page-banner-mask.mask-left,
  .page-banner-mask.mask-corner-bl {
    background: linear-gradient(to top,
      rgba(23,30,16,.82) 0%,
      rgba(23,30,16,.68) 50%,
      rgba(23,30,16,.52) 100%);
  }
  .page-banner-mask .ey-tx.l { text-shadow: 0 1px 2px rgba(0,0,0,.55); }
}

/* Subtítulos del video de Crece con nosotros: Poppins, texto claro sin recuadro, contorno fino oscuro
   (mismo estilo aprobado para los subtítulos del video de Perfil Empresarial). */
.oportunidades-video video::cue {
  font-family: "Poppins", system-ui, sans-serif; font-weight: 500;
  color: #F7F3E9; background-color: transparent;
  text-shadow: 0 0 3px #171E10, 0 0 3px #171E10, 0 1px 4px rgba(23,30,16,.9);
}

/* ── Crece con nosotros · "Nuestra gente": presentación de fotografías ────────────
   El contenedor sigue siendo .personas-photo (para conservar el orden en la retícula y en móvil),
   pero ahora solo envuelve el marco 3:2 (.gs-frame, con el mismo radio de 12 px) y una barra de
   control discreta debajo. Fundido suave de .8 s; sin sombras, marcos ni degradados. */
.personas-photo.gente-show.ratio-natural { height: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; }
.gs-frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 12px; background: var(--card-bg); }
.gs-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 0; }
.gs-frame img.is-prev { opacity: 1; z-index: 1; }
.gs-frame img.is-active { opacity: 1; z-index: 2; transition: opacity .8s ease; }
.gs-bar { display: flex; align-items: center; gap: 2px; height: 36px; margin-top: 8px; }
.gs-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; color: rgba(28,23,16,.55);
  transition: color .2s ease;
}
.gs-btn::before { content: ""; position: absolute; inset: -8px; }          /* área táctil ≈ 44 px */
.gs-btn:hover { color: var(--cane); }
.gs-btn:focus-visible, .gs-dot:focus-visible { outline: 2px solid var(--cane-2); outline-offset: 2px; border-radius: 2px; }
.gs-pause { margin-left: auto; }
.gs-pause .gs-i-play { display: none; }
.gente-show.is-paused .gs-pause .gs-i-pause { display: none; }
.gente-show.is-paused .gs-pause .gs-i-play { display: block; }
.gs-dots { display: flex; gap: 2px; margin: 0 4px; }
.gs-dot { position: relative; width: 26px; height: 28px; padding: 0; }
.gs-dot::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 13px; height: 2px; border-radius: 1px;
  background: rgba(28,23,16,.20); transition: background-color .3s ease;
}
.gs-dot.is-active::before { background: var(--cane); }
.gs-status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .gs-frame img.is-active { transition: none; } }

/* Contacto SIN formulario (publicación temporal): <body class="contacto-sin-form">.
   Se oculta el formulario y los textos que lo anuncian (.solo-form) y los datos de contacto
   pasan a dos columnas. Para volver a mostrarlo basta quitar la clase de <body>. */
.contacto-sin-form .solo-form,
.contacto-sin-form .contacto-form-wrap { display: none; }
.contacto-sin-form .contacto-grid { grid-template-columns: 1fr; }
.contacto-sin-form .contacto-info { max-width: 820px; }
.contacto-sin-form .contacto-datos { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; }
@media (max-width: 680px) { .contacto-sin-form .contacto-datos { grid-template-columns: 1fr; gap: 28px; } }