/* ============================================================
   MERC — Design system v2
   Paleta OFICIAL: extraída directamente de las formas/fondos del propio
   PPTX del cliente (MERC_Web_Project_Presentacion_Demo_V5), no muestreada
   del logo — son los valores que se repiten de forma consistente en las
   13 láminas de su documento, así que son la paleta que ellos ya usan.
     oro/oliva  #C4AA17  (acento principal en todas las láminas)
     terracota  #BC641D  (rojizo quemado — más apagado que un naranja vivo)
     espresso   #29251F  (texto/fondo oscuro dominante)
     café medio #5A3C1C  (variación oscura de acento)
   Regla de aplicación: UN color dominante (oro) + UN acento agudo (terracota).
   El espresso es el neutro oscuro (texto, header, footer) — no un cuarto color compitiendo.
   Tipografía: Manrope única familia, contraste por peso (800 display / 400-600 texto).
   Composición de hero: calcada de Olam Agri (bloque de color + foto en diagonal + texto fantasma).
   ============================================================ */

:root{
  --gold: #C4AA17;
  --gold-light: #DFC24A;
  --gold-pale: #F3ECC9;
  --terracotta: #BC641D;
  --terracotta-dark: #954E16;
  --espresso: #29251F;
  --espresso-soft: #5A3C1C;
  --cream: #FFFDF8;
  --cream-2: #D8D0BF;
  --ink: #29251F;
  --ink-soft: #6A6258;
  --line: rgba(41,37,31,.13);
  --line-strong: rgba(41,37,31,.24);
  --white: #ffffff;

  --display: "Manrope", "Segoe UI", sans-serif;
  --sans: "Manrope", "Segoe UI", sans-serif;

  --container: 1600px;
  --radius: 8px;
  --ease: cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:clip; }
/* .contact-band usa el truco width:100vw para salirse del container y ser
   ancho completo real — pero 100vw incluye el ancho de la scrollbar vertical,
   así que sin recortar esto esa sección se pasaba unos px del borde derecho y
   generaba scroll horizontal en toda la página. Usamos overflow-x:CLIP (no
   "hidden"): "hidden" convierte a html/body en un contenedor de scroll propio,
   y eso es justo lo que rompía el header "sticky" — a ratos perdía su punto
   de referencia y desaparecía por completo al hacer scroll. "clip" recorta
   igual mostrando el borde, pero sin crear ese contenedor de scroll. */
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; background:none; border:0; }
.container{ max-width:var(--container); margin:0 auto; padding:0 44px; }
section{ position:relative; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

h1,h2,h3{ font-family:var(--display); font-weight:800; color:var(--espresso); margin:0; letter-spacing:-.01em; }
.accent-word{ color:var(--terracotta); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--terracotta-dark);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--terracotta); display:inline-block; }

/* --i (asignado en JS a cada .reveal, 0–7 repitiendo) antes se guardaba pero
   nunca se usaba en el CSS — todos los elementos de una fila (las 3 puertas,
   los 4 puntos de servicios, etc.) aparecían exactamente al mismo instante,
   en bloque, sin cascada — eso se sentía golpeado/espontáneo. Con el delay
   escalonado por --i, entran uno tras otro, más fluido.
   Bug real encontrado: las puertas, los puntos de servicios y la foto de
   servicios NO se animaban en absoluto — cada uno tiene su PROPIA regla
   `transition` (para el hover: sombra, esquina, fondo...) que, al venir
   después en la hoja de estilos, reemplazaba por completo la `transition` de
   `.reveal` sobre el mismo elemento (con el mismo selector no se combinan,
   se pisan). Por eso usamos la propiedad `translate` (aparte de `transform`,
   que es la que usa cada hover) — así nunca chocan, sin importar qué
   elemento sea. */
.reveal{
  opacity:0; translate:0 26px;
  transition:opacity .6s var(--ease), translate .6s var(--ease);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.reveal.in{ opacity:1; translate:none; }

/* Caso especial: Contacto. En vez de desvanecerse desde la nada, se pidió
   que se sienta como si "saliera de atrás del pie de página" — se mantiene
   siempre visible (sin fade) y solo se desplaza hacia arriba desde abajo. */
.contact-band.reveal{ opacity:1; translate:0 80px; transition:translate .85s var(--ease); }
.contact-band.reveal.in{ translate:none; }

/* Línea/costura tenue reportada entre Contacto y el pie de página SOLO en
   mobile: dos bloques del mismo color (espresso) pegados, uno de ellos
   animado con `translate` — cuando ese `translate` queda "activo" aunque
   sea en 0 0, el navegador lo sigue tratando como una capa aparte y a veces
   se nota un filo de 1px en la costura por el antialiasing de esa capa.
   `translate:none` evita dejar esa capa prendida en reposo, y este ligero
   solape negativo tapa cualquier resto de esa costura sin afectar el hueco
   de arriba (que va en el padding, no en el margen). */
.contact-band{ margin-bottom:-1px; }

/* Firma visual del sitio: una sola esquina con radio grande y curvo (suavizada), el resto en escuadra —
   el mismo recurso que Olam usa en sus fotos y bloques. Se repite en paneles y fotos del sitio. */
.corner-cut{ border-radius:0 var(--corner,64px) 0 0; }

/* ============ UTILITY BAR ============ */
/* Se encoge a 0 (altura + opacidad) al hacer scroll — así "se desliza y desaparece"
   sin necesitar overflow:hidden en el grupo completo (eso recortaba el mega menú). */
.util-bar{
  background:var(--espresso); color:rgba(251,247,239,.78); font-size:15.75px;
  overflow:hidden; height:52px; transition:height .5s cubic-bezier(.4,0,.2,1), opacity .4s ease;
}
.header-group.scrolled .util-bar{ height:0; opacity:0; }
.util-bar-inner{ display:flex; align-items:center; justify-content:space-between; height:52px; }
.util-links{ display:flex; align-items:center; gap:28px; }
.util-links a, .util-links button{ display:flex; align-items:center; gap:8px; color:inherit; font-size:15.75px; font-weight:600; transition:color .2s; }
.util-links a:hover, .util-links button:hover{ color:var(--gold-light); }
.util-links svg{ width:17px; height:17px; }
.util-right{ display:flex; align-items:center; gap:22px; }
.util-lang{ display:flex; gap:2px; }
.util-lang button{ padding:2px 6px; font-weight:700; color:rgba(251,247,239,.6); font-size:15.3px; }
.util-lang button.active{ color:var(--gold-light); }
.util-lang span{ color:rgba(251,247,239,.3); }
.util-subscribe{ background:var(--terracotta); color:var(--cream); font-weight:800; font-size:15.3px; padding:10px 20px; display:flex; align-items:center; gap:9px; transition:background .25s; }
.util-subscribe:hover{ background:var(--terracotta-dark); }
.util-subscribe svg{ width:16px; height:16px; }

/* ============ HEADER ============ */
/* La utilidad y el nav viajan juntos en un solo grupo "sticky". Al hacer scroll, la barra
   utilitaria se encoge a 0 (arriba) y el nav queda ocupando el tope — coreografía real,
   no solo un cambio de color. Sin overflow:hidden aquí: el mega menú necesita poder
   desbordar hacia abajo del header sin que nada lo recorte. */
/* overflow-anchor:none evita el bug real detrás del parpadeo/saltitos: al
   encoger la barra utilitaria (52px→0), el navegador (Chrome de forma
   automática) intenta "anclar" el scroll para compensar ese movimiento de
   layout — pero esa compensación puede cruzar de nuevo el umbral que prende
   el estado "scrolled", encogiendo/agrandando el header en loop. Esto le
   dice al navegador que no toque el scroll por los cambios de tamaño aquí. */
.header-group{ position:sticky; top:0; z-index:100; overflow-anchor:none; }

.site-header{
  position:relative;
  background:var(--cream);
  border-bottom:1px solid transparent; transition:background .35s var(--ease), border-color .3s, box-shadow .3s;
}
.site-header.scrolled{ border-color:var(--line); box-shadow:0 6px 24px rgba(42,33,25,.06); }
.site-header .container{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; height:82px; }

/* ---- Home: header transparente flotando sobre el hero, se vuelve sólido al hacer scroll ---- */
body.home .site-header{
  background:transparent; border-bottom:0; box-shadow:none;
}
/* El fondo oscuro ya no es un simple cambio de color: es una capa aparte que
   se revela con un barrido de arriba hacia abajo (clip-path inset, borde
   inferior animado) — como una cortina que cae — en vez de aparecer/perderse
   de golpe. Vive en su propio pseudo-elemento para no interferir con el
   mega menú, que necesita poder desbordar por debajo del header. */
body.home .site-header::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:var(--espresso);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease);
  pointer-events:none;
}
body.home .site-header .brand-word{ color:var(--cream); transition:color .35s var(--ease); }
body.home .site-header .brand-mark{ filter:brightness(0) invert(1); transition:filter .35s var(--ease); }
/* El logo (brand-word/brand-mark) ya era crema/blanco incluso sin scroll —
   señal de que esta franja de arriba SIEMPRE cae sobre fondo oscuro (la curva
   naranja del hero, no una zona clara), nunca sobre algo parecido al fondo
   crema de las páginas interiores. Un intento anterior puso el nav en tonos
   oscuros (espresso) ahí mismo, y quedó ilegible sobre el naranja. Mismo
   esquema que el estado "scrolled" (que si acierta el contraste): crema
   translúcido de base, blanco sólido en hover, dorado para la página activa
   y para la barrita que se llena — consistente con el logo de al lado. */
body.home .site-header .main-nav a{ color:rgba(251,247,239,.82); transition:color .35s var(--ease); }
body.home .site-header .main-nav a:hover{ color:var(--cream); }
body.home .site-header .main-nav a[aria-current="page"]{ color:var(--gold-light); }
body.home .site-header .main-nav a::after{ background:var(--gold-light); }
body.home .site-header .btn-ghost{ border-color:var(--cream); color:var(--cream); transition:color .35s var(--ease), border-color .35s var(--ease), background .25s; }
body.home .site-header .btn-ghost:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
body.home .site-header .nav-toggle{ border-color:var(--espresso); color:var(--espresso); }

body.home .site-header.scrolled{ box-shadow:0 10px 30px rgba(20,15,10,.25); }
body.home .site-header.scrolled::before{ clip-path:inset(0 0 0% 0); }
body.home .site-header.scrolled .brand-word{ color:var(--cream); }
body.home .site-header.scrolled .brand-mark{ filter:none; }
body.home .site-header.scrolled .main-nav a{ color:rgba(251,247,239,.82); }
body.home .site-header.scrolled .main-nav a:hover{ color:var(--cream); }
body.home .site-header.scrolled .main-nav a[aria-current="page"]{ color:var(--gold-light); }
body.home .site-header.scrolled .main-nav a::after{ background:var(--gold-light); }
body.home .site-header.scrolled .btn-ghost{ border-color:rgba(251,247,239,.4); color:var(--cream); }
body.home .site-header.scrolled .btn-ghost:hover{ background:var(--cream); color:var(--espresso); border-color:var(--cream); }
body.home .site-header.scrolled .nav-toggle{ border-color:rgba(251,247,239,.4); color:var(--cream); }

body.home .hero{ padding-top:82px; }

.brand{ display:flex; align-items:center; gap:11px; }
.brand-mark{ width:36px; height:31px; flex:0 0 auto; }
.brand-word{ font-family:var(--display); font-weight:800; font-size:21.5px; letter-spacing:-.01em; color:var(--espresso); }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  display:block;
  font-size:16px; font-weight:700; letter-spacing:.01em; color:var(--espresso-soft);
  padding:10px 16px; border-radius:4px; position:relative; transition:color .25s;
}
.main-nav a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.main-nav a:hover{ color:var(--espresso); }
.main-nav a:hover::after{ transform:scaleX(1); }
/* Página activa: el link de la sección en la que estás queda marcado con el
   mismo subrayado que el hover, pero fijo (no necesita pasar el mouse), y en
   terracota para que se distinga de los demás. Vale para las 3 variantes de
   color del header (normal, home transparente, home scrolled) y para el
   menú de mobile más abajo. */
.main-nav a[aria-current="page"]{ color:var(--terracotta-dark); }
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }

/* ---- Mega menú — de regreso a tarjeta clara flotante (la barra oscura de ancho
   completo no convenció), columnas de solo texto plano: un pequeño encabezado de
   categoría por columna + enlaces, sin iconos ni tarjetas internas. */
.nav-item{ position:relative; }
/* El menú se abre/cierra por :hover en .nav-item, y como .mega-menu es su
   descendiente, hover encima de CUALQUIER parte de .mega-menu también cuenta
   como hover en .nav-item — en teoría no debería poder "perderse" al bajar el
   mouse. El problema real era el `margin-top:14px` de antes: eso deja un
   colchón de 14px de página VACÍA entre el link y la tarjeta que no es
   territorio de ningún elemento (ni el link, que termina arriba, ni la
   tarjeta, que empieza más abajo) — el mouse cruza por ahí, sale de .nav-item
   sin haber entrado todavía a .mega-menu, y el navegador cierra el menú antes
   de que el cursor llegue a los enlaces. Solución: .mega-menu (el que abre y
   cierra) va PEGADO al link (top:100%, sin margen) para que no haya hueco sin
   cubrir; el espacio de aire visual se mueve a un padding-top DENTRO de
   .mega-menu — sigue viéndose igual de separado, pero ahora ese aire también
   es parte de la caja hoverable. La tarjeta blanca (fondo, sombra, columnas)
   vive en .mega-menu-inner. */
.mega-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  width:min(640px,90vw); padding-top:14px;
  opacity:0; pointer-events:none; transition:opacity .12s ease, transform .18s ease;
}
.nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu{
  opacity:1; pointer-events:auto; transform:translate(-50%,0);
}
.mega-menu-inner{
  padding:34px 36px;
  background:var(--white); border-radius:var(--radius); box-shadow:0 24px 48px rgba(41,37,31,.18);
  display:flex; gap:28px;
}
/* min-width:0 es la parte que faltaba: un hijo flex por default NO se encoge
   más allá del ancho de su contenido (min-width:auto), así que una palabra
   larga sin espacios ("proveedores", "documentación") empujaba la columna
   entera fuera del recuadro blanco en vez de partirse en dos líneas — eso
   es lo que se veía como letras "sin fondo blanco atrás". overflow-wrap
   es el respaldo por si una palabra sigue sin caber ni partiéndose por
   espacio. */
.mega-col{ flex:1; min-width:0; padding:0 18px; border-left:1px solid var(--line); overflow-wrap:break-word; }
.mega-col:first-child{ padding-left:0; border-left:0; }
.mega-col h6{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--terracotta-dark); margin-bottom:14px;
}
/* Esta regla base vivía SOLO dentro de `body.home` (ver el bloque de abajo),
   así que en cualquier página que no fuera el home, `.mega-col a` nunca la
   recibía y cascadeaba hasta `.main-nav a` (16px, bold 700, padding:10px 16px
   — pensado para los links horizontales del nav, no para una lista vertical
   angosta). Ese texto más grande y con más padding es justo lo que hacía que
   palabras largas ("homologación", "proveedores") no cupieran en la columna y
   se salieran del recuadro blanco. Puesta aquí, sin `body.home`, aplica en
   todas las páginas — y ya gana por especificidad (dos clases) sobre
   `.main-nav a` (una clase) sin necesitar el prefijo. */
/* width:fit-content (en vez de ancho completo de columna) es la pieza clave:
   sigue siendo `display:block` así que cada link ocupa su propia fila (se
   siguen apilando, no se van de lado), pero la CAJA del link ahora mide
   exactamente lo que mide su texto — ya no el ancho completo de la columna.
   Eso es lo que permite que el ::after (la misma barrita que se "llena" del
   nav principal, no el subrayado nativo del navegador) calce con el texto
   real en vez de estirarse hasta el borde de la columna o subrayar cada
   línea suelta de un texto envuelto en dos renglones. */
.mega-col a{
  display:block; width:fit-content; max-width:100%; position:relative;
  font-size:14.5px; font-weight:600; color:var(--ink); padding:7px 0;
  transition:color .2s;
}
.mega-col a::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:var(--terracotta); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.mega-col a:hover{ color:var(--terracotta); }
.mega-col a:hover::after{ transform:scaleX(1); }
/* Especificidad reforzada: el menú vive DENTRO de .main-nav, y hay DOS reglas
   de color para .main-nav a en la home (una para header transparente, otra
   para header ya encogido/.scrolled) — ambas le ganaban a la regla de arriba
   y el texto se volvía casi invisible (blanco sobre blanco) según el estado
   de scroll. Esta cubre los dos casos, solo en la home. */
body.home .site-header .main-nav .mega-col a,
body.home .site-header.scrolled .main-nav .mega-col a{ color:var(--ink); }
/* Estas dos reglas de arriba fijaban el color SIEMPRE a --ink, sin importar
   hover — por especificidad le ganaban a `.mega-col a:hover` de más arriba
   (que sí tiene menos clases), así que en el home la letra se quedaba negra
   quieta aunque la barrita de abajo sí se llenara. Con .scrolled el header
   ya usa dorado para todo (link activo, la barrita del nav) — que el
   submenú lo use también en ese momento, para que no se sienta "de otro
   color" al abrir el mega menú con el header encogido. Sin scroll, se queda
   terracota (igual que en las páginas interiores). */
body.home .site-header .main-nav .mega-col a:hover{ color:var(--terracotta); }
body.home .site-header.scrolled .main-nav .mega-col a:hover{ color:var(--gold-light); }
body.home .site-header.scrolled .main-nav .mega-col a:hover::after{ background:var(--gold-light); }

.header-right{ display:flex; align-items:center; gap:18px; }

.btn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-size:16.5px; font-weight:800; letter-spacing:.01em;
  padding:17px 30px; border-radius:0; border:1px solid transparent;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s, border-radius .25s var(--ease);
}
/* En reposo, geométrico (esquina recta) — al seleccionar/hover, un toque muy
   ligero de la silueta de marca (una esquina se curva un poco), nada más. */
.btn:hover, .btn:focus-visible{ border-radius:0 16px 0 0; }
.btn svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-dark{ background:var(--espresso); color:var(--cream); }
.btn-dark:hover{ background:var(--terracotta); transform:translateY(-2px); box-shadow:0 12px 24px rgba(221,78,12,.3); }
.btn-pill{ background:var(--cream); color:var(--espresso); }
.btn-pill:hover{ background:var(--espresso); color:var(--cream); transform:translateY(-2px); }
.btn-text{ padding:13px 4px; color:var(--espresso); font-weight:800; }
.btn-text:hover{ color:var(--terracotta); }
.btn-text:hover svg{ transform:translateX(3px); }
.btn-ghost{ border-color:var(--line-strong); color:var(--espresso); padding:11px 20px; }
.btn-ghost:hover{ border-color:var(--espresso); background:var(--espresso); color:var(--cream); }

.nav-toggle{ display:none; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:4px; }
.nav-toggle svg{ width:16px; height:16px; }
/* Solo existe para el menú de mobile/tableta (ver media query) — oculto por
   default para que en escritorio no aparezca como un bloque suelto dentro
   del nav. */
.mobile-nav-extra{ display:none; }

/* ============ HERO (composición tipo Olam: bloque de color + foto en diagonal) ============ */
/* "Pinned hero": el hero se queda FIJO en el viewport (position:fixed) y el resto
   del contenido (.page-content) sube por encima al hacer scroll, tapándolo poco a
   poco — y al subir de vuelta, se destapa. .hero-spacer reserva el espacio que el
   hero dejó de ocupar en el flujo normal al volverse fixed. Solo en desktop: en
   mobile el hero vuelve a comportarse normal (ver media query abajo). */
/* Fondo terracota (no oro) — es el tono de tu marca con luminosidad real de "naranja",
   por eso aguanta texto blanco encima, igual que Olam sobre su naranja. */
.hero{
  position:fixed; top:0; left:0; right:0; z-index:0;
  height:100vh; min-height:560px; display:flex; align-items:center;
  background:var(--terracotta); overflow:hidden; color:var(--cream);
}
.hero-spacer{ height:100vh; min-height:560px; }
.page-content{ position:relative; z-index:1; background:var(--cream); }
/* Curva real tipo "S", calcada de tu boceto (plana arriba, cae fuerte en medio,
   plana abajo) — un solo border-radius circular NUNCA puede lograr esa forma
   (una elipse gigante siempre sigue curveando, nunca se aplana). Se necesita un
   clip-path con una curva bézier real: el <clipPath> con el path está al final
   del <body> del HTML (objectBoundingBox, así escala con el tamaño de la caja).
   El área que queda VISIBLE (foto) es todo lo que está a la izquierda/abajo de
   esa curva — arriba del todo casi no se ve foto, se va abriendo hacia abajo. */
.hero-photo{
  position:absolute; z-index:0;
  left:0; right:0; top:var(--header-h,134px); bottom:0;
  clip-path:url(#heroCurve);
  transition:top .5s var(--ease);
}
/* Corregido con evidencia de video real, esta vez viendo el momento exacto de la
   transición cuadro a cuadro: NO es fundido (nunca hay dos fotos translúcidas
   encimadas) y NO es deslizamiento de carrete. Es un WIPE opaco — la foto nueva
   entra cubriendo a la vieja desde un lado (izquierda en unos mensajes, derecha
   en otros), con un borde limpio que barre hasta cubrir el 100%. Las fotos se
   apilan todas en el mismo sitio; la que "entra" sube de z-index y se revela con
   clip-path animado; las demás se quedan abiertas y opacas debajo, sin animar. */
.hero-photo-track{ position:absolute; inset:0; }
.hero-photo-slide{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.15s cubic-bezier(.65,0,.35,1);
}
.hero-photo-slide.alt{ clip-path:inset(0 0 0 100%); }
.hero-photo-slide.active{ clip-path:inset(0 0 0 0); }
.hero-photo-track img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.15) translate(-1.5%,-1%); } }
/* Matiz leve en una esquina — la foto se queda brillante, a la par del color de fondo. */
.hero-photo::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(200deg, rgba(41,37,31,.16), rgba(41,37,31,0) 45%);
}

/* Capa de primer plano — placeholder. Aquí es donde van tus fotos recortadas (sujeto sin
   fondo, PNG con transparencia). Crossfade puro, sincronizado con la foto de fondo —
   sin ningún elemento aparte cruzando la pantalla (confirmado: Olam no usa eso). */
.hero-fg{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  background:linear-gradient(0deg, rgba(20,15,10,.18), rgba(20,15,10,0) 30%);
  transition:opacity 1.4s ease;
}
.hero-fg.active{ opacity:1; }

.hero-inner{ position:relative; z-index:4; width:100%; padding:130px 0 48px; }
/* Espejo completo: el texto no solo se empuja a la derecha como bloque — se alinea
   a la derecha de verdad (texto, párrafo y botones), como pediste. */
/* grid-template-columns:minmax(0,1fr) es la causa real detrás de que el
   texto se saliera por la derecha en mobile: sin especificarla, la columna
   implícita de un grid se dimensiona por CONTENIDO (el texto más ancho que
   tenga cualquiera de los 3 mensajes), no por el espacio disponible — en
   escritorio nunca se notaba porque max-width:960px daba de sobra, pero en
   mobile (que quita ese límite) esa columna podía terminar más ancha que la
   pantalla, y el texto se salía por el borde derecho. minmax(0,1fr) obliga a
   la columna a respetar el ancho real del contenedor. */
.hero-slide-wrap{ display:grid; grid-template-columns:minmax(0,1fr); max-width:960px; margin-left:auto; text-align:right; }
/* Texto y botones se mueven como UN solo bloque (confirmado en Olam): al salir, se
   desvanecen y suben un poco; el que entra, sube desde abajo mientras aparece — nunca
   los dos a la vez (primero sale, después entra), y los botones van pegados al texto. */
.hero-slide{
  grid-area:1/1; display:flex; flex-direction:column; align-items:flex-end;
  opacity:0; transform:translateY(22px); pointer-events:none; z-index:1;
  transition:opacity .5s ease, transform .5s ease;
}
.hero-slide.active{ opacity:1; transform:translateY(0); pointer-events:auto; z-index:3; }
.hero-slide.leaving{ opacity:0; transform:translateY(-22px); transition:opacity .4s ease, transform .4s ease; z-index:2; }
.hero h1{
  font-size:clamp(41px,7vw,101px); line-height:1.02; margin:0 0 26px; color:var(--cream); font-weight:800;
}
.hero h1 .accent-word{ color:var(--espresso); }
.hero p{ max-width:46ch; font-size:19.5px; color:rgba(251,247,239,.86); margin-bottom:0; font-weight:500; margin-left:auto; }
/* Los botones van pegados al párrafo (no anclados hasta el fondo del hero): el espacio
   que dejan depende del texto de cada mensaje, no de la altura total de la sección. Se
   mueven junto con el título y el párrafo como un solo bloque (.hero-slide), no aparte.
   Bug corregido: row-reverse + flex-end en realidad empuja hacia la IZQUIERDA (con
   row-reverse el eje principal se invierte, "end" pasa a ser el lado izquierdo). Con
   dirección normal, flex-end si empuja correctamente a la derecha. */
.hero-actions{
  display:flex; align-items:center; justify-content:flex-end;
  gap:18px; flex-wrap:wrap; margin-top:0; padding-top:34px; width:100%;
}
.hero .btn-text{ color:var(--cream); }
.hero .btn-text:hover{ color:var(--espresso); }

.hero-dots{ display:flex; gap:10px; margin-top:44px; margin-left:auto; width:fit-content; position:relative; z-index:4; }
.hero-dots button{ width:34px; height:3px; background:rgba(251,247,239,.35); border-radius:2px; transition:background .3s, width .3s; }
.hero-dots button.active{ background:var(--cream); width:52px; }

/* ============ TRES PUERTAS ============ */
.doors{ padding:76px 0 92px; }
.section-head{ max-width:680px; margin-bottom:50px; }
.section-head h2{ font-size:clamp(30px,3.6vw,44px); margin-top:14px; line-height:1.1; }
.section-head p{ color:var(--ink-soft); font-size:17.5px; margin-top:14px; max-width:54ch; font-weight:500; }

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

/* Puertas — de regreso a foto real (pediste que fuera con imágenes, tipo la
   tarjeta de noticias de Olam): foto arriba con la esquina curva, contenido en
   fondo claro ABAJO (no overlay encima de la foto). Hover: se levanta, la foto
   hace un zoom lento — misma coreografía de siempre. */
/* La curva vive en TODA la tarjeta (no solo en la foto): antes .door-photo
   tenía su propio border-radius mientras .door (el fondo blanco de atrás) se
   quedaba en escuadra — al crecer la curva en hover, esa esquina dejaba ver
   el rectángulo blanco de .door justo detrás, como un "cuadro" suelto. Con
   un solo border-radius en la tarjeta completa, la curva recorta la foto Y
   la tarjeta a la vez: no hay una segunda caja blanca escondida detrás. */
.door{
  background:var(--white); overflow:hidden;
  --corner:52px; border-radius:0 var(--corner) 0 0;
  display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-radius .4s var(--ease);
}
.door:hover{ --corner:88px; transform:translateY(-8px); box-shadow:0 26px 48px rgba(41,37,31,.18); }
.door-photo{ aspect-ratio:4/3; overflow:hidden; }
.door-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.door:hover .door-photo img{ transform:scale(1.07); }
.door-content{ padding:26px 28px 30px; }
.door-tag{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--door-tag,var(--terracotta-dark)); }
.door h3{ font-size:19px; margin:12px 0 8px; font-weight:800; line-height:1.25; color:var(--espresso); }
.door p.support{ font-size:14px; margin-bottom:18px; font-weight:500; color:var(--ink-soft); }
.door .btn-text{ padding-left:0; color:var(--espresso); }
.door .btn-text:hover{ color:var(--door-tag,var(--terracotta-dark)); }

.door--proveedores{ --door-tag:var(--gold); }
.door--aliados{ --door-tag:var(--terracotta); }
.door--inversores{ --door-tag:var(--espresso-soft); }

/* ============ CATEGORÍAS DE PRODUCTO (tarjeta oscura, referencia Olam Agri) ============
   Fondo espresso sólido, título + texto de apoyo arriba, ícono circular de línea
   abajo. La curva de marca ahora aparece arriba-derecha Y abajo-izquierda (no solo
   una esquina) para que se sienta más presente en la tarjeta, no escondida. */
/* auto-fit en vez de un número fijo de columnas: así esta grid sirve tanto para
   3 tarjetas (categorías de producto) como para 5 (motivos) u otra cantidad en
   futuras páginas, sin dejar huecos raros en la última fila. */
.cats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px; }
.cat-card{
  background:var(--espresso); color:var(--cream);
  min-height:300px; padding:32px 30px 34px;
  display:flex; flex-direction:column; justify-content:space-between; gap:20px;
  --corner:52px; border-radius:0 var(--corner) 0 var(--corner);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-radius .4s var(--ease);
}
.cat-card:hover{ --corner:88px; transform:translateY(-8px); box-shadow:0 26px 48px rgba(41,37,31,.3); }
.cat-card h3{ font-size:24px; font-weight:800; line-height:1.24; color:var(--cream); }
.cat-card p{ font-size:15px; font-weight:500; line-height:1.55; color:rgba(255,253,248,.75); margin-top:10px; }
.cat-ico{
  align-self:flex-start; width:76px; height:76px; border-radius:50%;
  border:1.5px solid var(--cat-color, var(--gold-light));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cat-ico svg{ width:56px; height:56px; color:var(--cat-color, var(--gold-light)); }

/* Colores más diferenciados entre sí (antes casi todos caían en la misma familia
   dorado/naranja) — dorado, naranja, verde salvia, azul acero y café quemado,
   cada uno elegido también por lo que evoca el ícono (verde = crecimiento/alianza,
   azul = alcance global, etc.), sin salirse del tono terroso de la marca. */
.cat-card--1{ --cat-color:#C9A227; }
.cat-card--2{ --cat-color:var(--terracotta); }
.cat-card--3{ --cat-color:#7C8B5A; }
.cat-card--4{ --cat-color:#4A7FA5; }
.cat-card--5{ --cat-color:#954E16; }

/* ============ RESPALDO / STATS ============ */
.stats{ background:var(--espresso); padding:74px 0; color:var(--cream); }
.stats-head{ text-align:center; margin-bottom:46px; }
.stats-head .eyebrow{ justify-content:center; color:var(--gold-light); }
.stats-head .eyebrow::before{ background:var(--gold-light); }
.stats-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.stat{ text-align:center; padding:0 8px; }
.stat-num{ font-family:var(--display); font-weight:800; font-size:clamp(26px,3vw,38px); color:var(--gold-light); display:flex; align-items:baseline; justify-content:center; gap:2px; }
.stat-label{ font-size:12.5px; color:rgba(251,247,239,.68); margin-top:8px; line-height:1.4; font-weight:600; }
.stat-div{ width:30px; height:2px; background:var(--terracotta); margin:12px auto 0; }

/* ============ BRAND STATEMENT (bloque tipo "Creating Opportunities") ============ */
.brand-statement{ background:var(--terracotta); overflow:hidden; }
.statement-grid{ display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; min-height:360px; gap:40px; }
.statement-graphic{
  position:relative; height:100%; min-height:360px; display:flex; align-items:center; overflow:hidden;
  font-family:var(--display); font-weight:800; color:rgba(255,255,255,.14);
  font-size:clamp(160px,17vw,260px); line-height:.78; letter-spacing:-.04em; user-select:none;
}
.statement-graphic span{ margin-left:-.06em; }
.statement-text h2{ color:var(--white); font-size:clamp(26px,3vw,38px); line-height:1.16; margin-bottom:18px; max-width:16ch; }
.statement-text .accent-word{ color:var(--espresso); }
.statement-text p{ color:rgba(255,255,255,.86); font-size:15.5px; margin-bottom:26px; max-width:46ch; font-weight:500; }

/* ============ SERVICIOS (tipo "Products & Services" de Olam) ============ */
.services{ padding:104px 0; }
.services-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:stretch; }
/* No tenía tamaño propio: heredaba el h2 por default del navegador (~24px),
   minúsculo al lado de una foto tan grande — por eso se veía "chiquito". */
.services-intro h2{ font-size:clamp(28px,3vw,40px); line-height:1.15; }
.services-intro p{ color:var(--ink-soft); font-size:16.5px; margin:16px 0 26px; max-width:40ch; font-weight:500; }
.services-intro .btn-dark{ padding:19px 34px; font-size:17px; }
/* Galería interactiva: cada punto de la lista tiene su propia foto apilada
   aquí debajo (crossfade de opacidad); al pasar el cursor sobre un punto,
   cambia la foto — igual que viste en la página de Olam. */
.services-photo-wrap{ position:relative; margin-bottom:26px; aspect-ratio:4/3; --corner:44px; border-radius:0 var(--corner) 0 0; overflow:hidden; transition:border-radius .4s var(--ease); }
.services-grid:hover .services-photo-wrap{ --corner:72px; }
.services-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.services-photo.active{ opacity:1; }

/* Antes esto era una caja con borde y fondo gris (se sentía "una caja dentro de
   otra caja", genérico, desconectado del resto de la página). Ahora es una lista
   limpia sin marco, pero con affordance real de interacción: fondo + barra de
   acento al hover/activo, para que se sienta clicable de verdad — no solo texto. */
/* align-items:stretch en .services-grid hace que esta columna tome la misma
   altura que la foto de la izquierda; justify-content:center mantiene los 4
   puntos agrupados de forma natural (como estaban) pero centrados dentro de
   esa altura completa, en vez de arrancar pegados arriba. */
.services-list{ display:flex; flex-direction:column; justify-content:center; }
.service-item{
  display:flex; align-items:center; gap:18px; padding:20px 18px;
  border-bottom:1px solid var(--line); position:relative;
  transition:background .3s var(--ease), padding-left .3s var(--ease);
}
.service-item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--terracotta); transform:scaleY(0); transition:transform .3s var(--ease);
}
.service-item:hover, .service-item.is-active{ background:var(--cream-2); padding-left:26px; }
.service-item:hover::before, .service-item.is-active::before{ transform:scaleY(1); }
.service-item .service-text{ display:flex; flex-direction:column; gap:4px; }
.service-item .desc{ font-size:14px; color:var(--ink-soft); font-weight:500; max-width:52ch; }
.service-ico{
  width:80px; height:80px; flex:0 0 auto; border-radius:50%; border:1.5px solid var(--terracotta);
  display:flex; align-items:center; justify-content:center; color:var(--terracotta);
  background:var(--white);
  transition:all .35s var(--ease);
}
.service-item:hover .service-ico, .service-item.is-active .service-ico{ border-color:var(--terracotta-dark); color:var(--terracotta-dark); background:color-mix(in srgb, var(--terracotta) 8%, white); transform:scale(1.06); }
.service-ico svg{ width:58px; height:58px; }
.service-item span.label{ font-weight:800; font-size:14.5px; color:var(--espresso); }
.service-item--accent span.label{ color:var(--terracotta-dark); }

/* ============ ABOUT (tipo "Firm Foundations") ============ */
/* Imagen completa (todo el ancho de la página), tipo el bloque de Olam que
   enviaste como referencia: foto de fondo, texto abajo sobre un degradado
   oscuro, esquina curva grande. Sin tarjeta flotante — la foto ES el fondo. */
.feature-band{ position:relative; margin:0 0 148px; }
.feature-photo{ position:relative; height:620px; overflow:hidden; --corner:110px; border-radius:0 var(--corner) 0 0; }
.feature-photo img{ width:100%; height:100%; object-fit:cover; }
.feature-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,15,10,.8) 0%, rgba(20,15,10,.35) 42%, rgba(20,15,10,0) 68%);
}
.feature-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding-bottom:52px; }
.feature-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:end; width:100%; }
.feature-main h2{ color:var(--cream); font-size:clamp(27px,2.9vw,38px); line-height:1.2; max-width:17ch; margin-bottom:24px; }
.feature-main .accent-word{ color:var(--gold-light); }
.feature-points{ display:flex; flex-direction:column; gap:22px; }
.feature-point h4{ color:var(--gold-light); font-size:16px; font-weight:800; margin-bottom:6px; }
.feature-point p{ color:rgba(251,247,239,.85); font-size:14px; font-weight:500; }

/* ============ CIERRE / CONTACTO — bloque completo, tipo "Talk to Us" de Olam ============ */
/* Ancho completo de verdad (se sale del .container con el truco 100vw), con
   nuestra curva de firma cruzando toda la parte de arriba, y todo centrado:
   icono, título, texto y botón — no una tarjeta con texto a la izquierda. */
.contact-band{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  background:var(--espresso); color:var(--cream);
  clip-path:url(#topCurve);
  padding:110px 24px 120px;
}
.contact-inner{
  max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.contact-icon{
  width:64px; height:64px; border-radius:50%; background:rgba(251,247,239,.1);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px; color:var(--gold-light);
}
.contact-icon svg{ width:28px; height:28px; }
.contact-inner h3{ color:var(--cream); font-size:clamp(24px,2.6vw,32px); margin-bottom:14px; }
.contact-inner p{ font-size:15px; color:rgba(251,247,239,.78); margin:0 0 30px; max-width:44ch; font-weight:500; }
.contact-band .btn-pill:hover{ background:var(--gold); }

/* ============ FOOTER ============ */
.site-footer{ background:var(--espresso); color:var(--cream-2); padding:72px 0 28px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand .brand-word{ color:var(--cream); }
.footer-firma{ font-size:14px; color:rgba(255,255,255,.6); margin-top:16px; max-width:32ch; font-weight:500; }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; transition:background .3s, border-color .3s; }
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); }
.footer-social svg{ width:15px; height:15px; }
.footer-col h5{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-light); margin:0 0 18px; font-weight:800; }
.footer-col ul{ display:flex; flex-direction:column; gap:11px; }
.footer-col a{ font-size:14px; color:rgba(255,255,255,.72); transition:color .25s; font-weight:500; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:12.5px; color:rgba(255,255,255,.45); flex-wrap:wrap; gap:12px; font-weight:500; }

/* ============ PÁGINAS INTERIORES — piezas reutilizables ============
   Header, footer y contact-band se copian idénticos de index.html en cada
   página (no se tocan). Todo lo de aquí es para el contenido de EN MEDIO:
   algunas piezas (doors, services, stats, feature-band, brand-statement...)
   ya existen arriba y se reusan tal cual con contenido distinto; esto de
   aquí es lo que hacía falta agregar: un hero de página interior (sin
   carrusel ni pinned-scroll, esos son solo del home), migas de pan, una
   cuadrícula de "motivos" con ícono, una franja oscura de "estándares", y
   un formulario. */

/* ---- Hero de página interior: mismo lenguaje visual (bloque de color +
   foto con la curva de marca), pero estático — sin el carrusel ni el
   scroll fijo del home, que son mecánicas exclusivas de portada. ---- */
.page-hero{
  position:relative; overflow:hidden;
  background:var(--terracotta); color:var(--cream);
  min-height:460px; display:flex; align-items:center;
}
.page-hero-photo{ position:absolute; inset:0; z-index:0; clip-path:url(#heroCurve); }
.page-hero-photo img{ width:100%; height:100%; object-fit:cover; }
.page-hero-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(41,37,31,.16), rgba(41,37,31,0) 45%);
}
.page-hero-inner{ position:relative; z-index:2; width:100%; padding:80px 0 64px; text-align:right; }
.breadcrumb{ display:flex; justify-content:flex-end; gap:8px; font-size:13.5px; font-weight:600; color:rgba(251,247,239,.75); margin:0 0 20px; }
.breadcrumb a{ color:rgba(251,247,239,.75); transition:color .2s; }
/* El cambio de color solo (cream translúcido → cream sólido) es una
   diferencia demasiado sutil para notarse como hover real, sobre todo
   encima de la foto — se le suma un subrayado, como el resto de los links
   del sitio, para que sea inequívoco. */
.breadcrumb a:hover{ color:var(--cream); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb span{ color:rgba(251,247,239,.4); }
.page-hero h1{ font-size:clamp(34px,4.4vw,54px); line-height:1.08; margin:0 0 20px; color:var(--cream); font-weight:800; max-width:760px; margin-left:auto; }
.page-hero h1 .accent-word{ color:var(--espresso); }
.page-hero p{ max-width:52ch; margin-left:auto; font-size:18px; color:rgba(251,247,239,.86); font-weight:500; margin-bottom:0; }
.page-hero .hero-actions{ padding-top:30px; }
.page-hero .btn-text{ color:var(--cream); }
.page-hero .btn-text:hover{ color:var(--espresso); }

/* ---- Motivos / value props: grid de tarjetas con ícono circular ---- */
.reasons{ padding:100px 0; }
.reasons-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 28px; margin-top:46px; }
.reason-card{ display:flex; flex-direction:column; gap:16px; }
.reason-ico{
  width:60px; height:60px; border-radius:50%; border:1.5px solid var(--terracotta);
  color:var(--terracotta); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.reason-ico svg{ width:28px; height:28px; }
.reason-card h3{ font-size:18px; font-weight:800; color:var(--espresso); }
.reason-card p{ font-size:14.5px; color:var(--ink-soft); font-weight:500; }

/* ---- Franja oscura de estándares / puntos de confianza ---- */
.standards{ background:var(--espresso); color:var(--cream); padding:84px 0; }
.standards .section-head h2{ color:var(--cream); }
.standards .section-head p{ color:rgba(251,247,239,.75); }
.standards-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px; margin-top:46px; }
.standard-item{ display:flex; gap:20px; }
.standard-ico{
  width:54px; height:54px; border-radius:50%; border:1.5px solid var(--gold-light);
  color:var(--gold-light); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.standard-ico svg{ width:25px; height:25px; }
.standard-item h3{ color:var(--cream); font-size:17.5px; font-weight:800; margin-bottom:8px; }
.standard-item p{ color:rgba(251,247,239,.8); font-size:14.5px; font-weight:500; }

/* ---- Formulario de precalificación ---- */
.form-section{ padding:104px 0; }
.form-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:60px; align-items:stretch; }
.form-intro h2{ font-size:clamp(28px,3vw,38px); line-height:1.15; margin-bottom:14px; }
.form-intro > p{ color:var(--ink-soft); font-size:16px; font-weight:500; margin-bottom:34px; max-width:52ch; }
.prequal-form{ display:grid; grid-template-columns:1fr 1fr; gap:24px 26px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:13.5px; font-weight:700; color:var(--espresso); }
.field label .req{ color:var(--terracotta); }
.field input, .field select, .field textarea{
  border:0; border-bottom:1.5px solid var(--line-strong); background:transparent;
  padding:11px 2px; font-family:inherit; font-size:15px; color:var(--ink);
  transition:border-color .25s; border-radius:0;
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--terracotta); }
.field textarea{ resize:vertical; min-height:90px; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6258' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2px center; background-size:16px; }
.prequal-form .btn{ grid-column:1/-1; justify-self:start; margin-top:8px; }
.form-privacy{ grid-column:1/-1; font-size:12.5px; color:var(--ink-soft); font-weight:500; }
/* .help-box ahora estira su alto para igualar al formulario (align-items:stretch
   en .form-grid) — antes se quedaba del alto de su propio texto y dejaba un
   tramo grande de página vacía debajo, ya que el formulario de al lado es
   mucho más largo. La foto llena justo ese espacio sobrante, con la curva
   abajo-izquierda como contraparte de la curva arriba-derecha de la tarjeta. */
.help-box{
  background:var(--cream-2); --corner:40px; border-radius:0 var(--corner) 0 0; padding:34px 30px;
  display:flex; flex-direction:column;
}
.help-box h4{ font-size:17px; font-weight:800; margin-bottom:10px; color:var(--espresso); }
.help-box p{ font-size:14px; color:var(--ink-soft); margin-bottom:20px; font-weight:500; }
.help-box-photo{
  margin:20px -30px -34px; flex:1; min-height:180px; overflow:hidden;
  border-radius:0 0 0 var(--corner);
}
.help-box-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px){
  .doors-grid{ grid-template-columns:1fr; }
  .cats-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:1fr; }
  .feature-grid{ grid-template-columns:1fr; gap:26px; }
  .feature-photo{ height:520px; }
  .statement-grid{ grid-template-columns:1fr; }
  .statement-graphic{ min-height:200px; font-size:clamp(100px,22vw,180px); }
  .stats-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .reasons-grid{ grid-template-columns:repeat(2,1fr); }
  .standards-grid{ grid-template-columns:1fr; gap:32px; }
  .form-grid{ grid-template-columns:1fr; gap:40px; }
}
@media (max-width: 860px){
  .nav-toggle{ display:flex; position:relative; z-index:2; }
  .header-right .btn-ghost{ display:none; }

  /* ---- Barra utilitaria (Contacto/Ubicaciones/Buscar/idioma/Portal
     proveedores): en mobile no cabe bien arriba y se veía mal — se oculta
     por completo de aquí y su contenido se repite dentro del menú de
     hamburguesa (.mobile-nav-extra, más abajo), que ahora ocupa toda la
     pantalla. ---- */
  .util-bar{ display:none; }

  /* ---- Menú móvil: antes el botón hamburguesa sí cambiaba de estado (JS
     alternaba la clase .open) pero no existía NINGUNA regla CSS que hiciera
     algo visible con esa clase — .main-nav se quedaba en display:none pasara
     lo que pasara. Ahora es un panel de PANTALLA COMPLETA (no un dropdown
     chico) que se desliza hacia abajo al abrir — con display:none no se
     puede animar una entrada/salida, así que se queda siempre en el DOM y
     se anima con translate + opacity + visibility. ---- */
  .main-nav{
    display:flex; position:fixed; top:82px; left:0; right:0; bottom:0; z-index:90;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--white);
    padding:8px 24px 24px; overflow-y:auto;
    translate:0 -14px; opacity:0; visibility:hidden; pointer-events:none;
    transition:translate .4s var(--ease), opacity .3s ease, visibility 0s linear .4s;
  }
  .main-nav.open{
    translate:none; opacity:1; visibility:visible; pointer-events:auto;
    transition:translate .4s var(--ease), opacity .35s ease, visibility 0s linear 0s;
  }
  .main-nav a{ color:var(--espresso) !important; padding:15px 4px; border-bottom:1px solid var(--line); font-size:16.5px; }
  .main-nav a::after{ display:none; }
  .main-nav a[aria-current="page"]{ color:var(--terracotta-dark) !important; font-weight:800; }
  /* El mega menú depende de :hover, que no existe en táctil — en su lugar el
     link principal ya lleva a la página completa, así que el panel flotante
     sobra aquí (y si se dejara, quedaría siempre abierto o mal posicionado). */
  .main-nav .mega-menu{ display:none; }

  /* ---- Contenido de la barra utilitaria, repetido aquí para mobile ---- */
  .mobile-nav-extra{ display:flex; flex-direction:column; gap:2px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
  .mobile-nav-extra a, .mobile-nav-extra button{
    display:flex; align-items:center; gap:10px; padding:13px 4px;
    color:var(--espresso); font-size:15.5px; font-weight:600;
  }
  .mobile-nav-extra svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ink-soft); }
  .mobile-lang{ display:flex; align-items:center; gap:4px; padding:8px 4px; }
  .mobile-lang button{ padding:4px 8px; font-weight:700; color:var(--ink-soft); }
  .mobile-lang button.active{ color:var(--terracotta-dark); }
  .mobile-lang span{ color:var(--line-strong); }
  .mobile-nav-extra .util-subscribe{
    margin-top:8px; background:var(--terracotta); color:var(--cream);
    justify-content:center; border-radius:4px; font-weight:800;
  }

  /* ---- Header transparente-sobre-foto: bug real en mobile. Ese esquema
     (logo/texto color crema, fondo transparente) asume que el header queda
     FLOTANDO sobre la foto del hero (position:fixed, como en escritorio). En
     mobile el hero ya no es fixed — la foto queda en el flujo normal, DEBAJO
     del header, así que el header transparente terminaba mostrando texto
     crema sobre fondo crema: invisible. Aquí se fuerza siempre la versión
     sólida/oscura (la misma que usa el estado "scrolled"), sin importar si
     hiciste scroll o no. ---- */
  body.home .site-header{ background:var(--espresso); }
  body.home .site-header::before{ display:none; }
  body.home .site-header .brand-word{ color:var(--cream); }
  body.home .site-header .brand-mark{ filter:none; }
  body.home .site-header .nav-toggle{ border-color:rgba(251,247,239,.4); color:var(--cream); }

  /* El "pinned hero" se apaga en mobile — vuelve a fluir normal, sin fixed. */
  /* body.home .hero{padding-top:82px} le gana a .hero{padding-top:20px} por
     especificidad si no repetimos el mismo prefijo aquí — quedaba un hueco
     naranja de más arriba del que debía en mobile. */
  body.home .hero{ position:relative; top:auto; min-height:auto; padding-top:20px; flex-direction:column; align-items:stretch; height:auto; }
  .hero-spacer{ display:none; }
  .hero-photo{ position:relative; inset:auto; height:280px; clip-path:none; margin:0 -32px 28px; }
  /* .hero-inner pone su padding horizontal en 0 (ver regla base) porque en
     escritorio el texto nunca llega a tocar el borde — lo detiene el
     max-width:960px de .hero-slide-wrap mucho antes. En mobile ese límite se
     quita (línea de abajo) para que el texto pueda ocupar el ancho completo,
     así que sin este padding el texto queda literalmente pegado al borde de
     la pantalla. */
  .hero-inner{ padding-left:32px; padding-right:32px; }
  .hero-slide-wrap{ max-width:none; text-align:left; }
  /* El piso del clamp() (41px) venía pensado para una caja más ancha — en un
     teléfono chico esa letra tan gruesa llenaba casi todo el renglón antes
     de partir línea, y la última palabra terminaba pegada al margen. Un
     poco más chica en mobile deja más aire a la derecha. */
  .hero h1{ font-size:clamp(32px, 9vw, 46px); }
  /* .hero-slide es flex-column con align-items:flex-start (no "stretch"),
     así que sus hijos NO se estiran al ancho del contenedor — cada uno toma
     el ancho que prefiera su propio contenido. El párrafo tiene
     max-width:46ch pensado para escritorio (una caja angosta y legible); en
     mobile, sin "stretch", esa caja de 46ch podía ser MÁS ANCHA que la
     pantalla y se salía por la derecha en vez de encogerse. */
  .hero-slide{ align-items:flex-start; }
  .hero p{ margin-left:0; max-width:none; width:100%; }
  .hero-actions{ justify-content:flex-start; }

  /* ---- "Conozca más sobre MERC" (feature-band): el texto va superpuesto a
     la foto con position:absolute a una altura fija (620px en escritorio) —
     en mobile la foto es más baja y el texto (título largo + botón + 2
     puntos) no cabe ahí, así que se derramaba fuera de esa altura y se
     encimaba visualmente con la sección de Contacto que sigue. Se apila
     normal (foto arriba, texto abajo en flujo), en vez de superpuesto. ---- */
  .feature-photo{ height:300px; }
  .feature-photo::after{ display:none; }
  .feature-overlay{ position:static; padding:28px 0 0; }
  .feature-main h2{ color:var(--espresso); max-width:none; }
  .feature-main .accent-word{ color:var(--terracotta); }
  /* .btn-pill es crema-sobre-oscuro (pensado para ir encima de la foto) — al
     apilar el texto en fondo claro se volvía invisible (crema sobre crema). */
  .feature-main .btn-pill{ background:var(--espresso); color:var(--cream); }
  .feature-main .btn-pill:hover{ background:var(--terracotta); color:var(--cream); }
  .feature-point h4{ color:var(--terracotta-dark); }
  .feature-point p{ color:var(--ink-soft); }

  /* ---- Hero de página interior: mismo bug que tuvo el hero del home en
     mobile — la foto va con clip-path en diagonal cubriendo TODA la sección
     como fondo absoluto, pensado para convivir con texto a la derecha sobre
     mucho espacio vacío. En mobile no hay espacio vacío: el texto ocupa
     todo el ancho y termina encimado sobre la foto, casi ilegible. Mismo
     arreglo que allá: la foto se apila arriba (bloque propio, sin recorte),
     el texto va abajo en flujo normal, alineados a la izquierda. ---- */
  .page-hero{ min-height:auto; flex-direction:column; align-items:stretch; }
  .page-hero-photo{ position:relative; inset:auto; height:240px; clip-path:none; }
  .page-hero-inner{ text-align:left; padding:32px 0 48px; }
  .breadcrumb{ justify-content:flex-start; }
  .page-hero h1{ margin-left:0; }
  .page-hero p{ margin-left:0; }
  .page-hero .hero-actions{ justify-content:flex-start; }

  .reasons-grid{ grid-template-columns:1fr; gap:30px; }
  .prequal-form{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .container{ padding:0 20px; }
  .hero-inner{ padding-left:28px; padding-right:28px; }
  .util-bar-inner{ height:auto; padding:8px 0; flex-wrap:wrap; gap:8px; }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .feature-band{ margin-bottom:90px; }
  .services{ padding:64px 0; }
  .doors{ padding:64px 0; }
  .contact-band{ padding:70px 20px 80px; }
  .reasons{ padding:64px 0; }
  .standards{ padding:56px 0; }
  .form-section{ padding:64px 0; }
}