/* ============================================================
   MARPLANTIS — sitio corporativo
   Paleta, tipografías y fotografía tomadas del brandbook oficial
   (Material de marca > Logotipo y cromática / Tipografía).
   Los seis colores llevan el nombre que les puso la marca.
   Tipografía: DeFontePlus (titulares), Bolota (carteles en
   mayúscula) y Barlow (texto), servidas desde el propio sitio.
   ============================================================ */

/* --- Tipografías de la marca (carpeta fuentes/) --------------- */
@font-face { font-family: "DeFontePlus"; src: url("../fuentes/DeFontePlus-Normale.ttf") format("truetype");  font-weight: 100 400; font-display: swap; }
@font-face { font-family: "DeFontePlus"; src: url("../fuentes/DeFontePlus-DemiGras.ttf") format("truetype"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "DeFontePlus"; src: url("../fuentes/DeFontePlus-Gros.ttf") format("truetype");     font-weight: 900; font-display: swap; }
@font-face { font-family: "Bolota";      src: url("../fuentes/bolota-bold.ttf") format("truetype");          font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow";      src: url("../fuentes/Barlow-Regular.ttf") format("truetype");       font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow";      src: url("../fuentes/Barlow-Italic.ttf") format("truetype");        font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow";      src: url("../fuentes/Barlow-Medium.ttf") format("truetype");        font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow";      src: url("../fuentes/Barlow-SemiBold.ttf") format("truetype");      font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow";      src: url("../fuentes/Barlow-Bold.ttf") format("truetype");          font-weight: 700; font-display: swap; }

:root {
  /* Los seis colores oficiales, con el nombre que les dio la marca */
  --deep-brown: #3D1A09;    /* Deep brown  — PANTONE 4625 C */
  --sweet-brown: #704030;   /* Sweet brown — PANTONE 478 C  */
  --beige-banana: #F8EBCD;  /* Beige banana— PANTONE 9160 C */
  --sun-yellow: #F0E018;    /* Sun yellow  — PANTONE 604 C  */
  --sky-blue: #CCEAF2;      /* Sky blue    — PANTONE 9440 C */
  --sexy-pink: #E996B2;     /* Sexy pink   — PANTONE 2044 C */

  /* Nombres de uso, para no repetir el color en cada regla */
  --negro: var(--deep-brown);
  --carbon: #4C2412;
  --carbon-alto: #5C2E19;
  --crema: var(--beige-banana);
  --crema-baja: rgba(248, 235, 205, 0.62);
  --amarillo: var(--sun-yellow);
  --pelaje: var(--sweet-brown);
  --paja: #E7C79A;
  --rosa: var(--sexy-pink);
  --celeste: var(--sky-blue);
  --tinta: var(--deep-brown);
  --tinta-suave: #7A5744;
  --borde-oscuro: rgba(248, 235, 205, 0.16);
  --borde-claro: rgba(61, 26, 9, 0.14);

  --fuente-display: "DeFontePlus", "Barlow", sans-serif;
  --fuente-cartel: "Bolota", "DeFontePlus", sans-serif;
  --fuente-ui: "Barlow", system-ui, sans-serif;

  --ancho-max: 1180px;
  --transicion: 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente-ui);
  font-size: 16px;
  line-height: 1.65;
  color: var(--crema);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--amarillo); color: var(--negro); }

/* ---------- utilidades ---------- */
.contenedor { max-width: var(--ancho-max); margin: 0 auto; padding: 0 32px; }

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 20px;
}
.clara .kicker { color: #7a4f22; }

.titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.titulo em { font-style: normal; font-weight: 800; }
.oscura .titulo em, .nocturna .titulo em, .sostenibilidad .titulo em { color: var(--amarillo); }

.parrafo { max-width: 560px; font-weight: 400; font-size: 16.5px; opacity: 1; }
.parrafo.ancho { max-width: 680px; }
.parrafo strong { font-weight: 700; }

.seccion {
  /* La curva mide hasta 88 px y se monta sobre el relleno: con 92 px el
     texto quedaba pegado al filo. El relleno tiene que ser la curva MÁS
     el aire que se quiere ver. */
  padding: clamp(120px, 10vw, 172px) 0;
  position: relative;
  overflow: hidden;
}

/* ---------- divisores orgánicos entre secciones ---------- */
.onda {
  position: absolute;
  left: -1px; right: -1px;
  width: calc(100% + 2px);
  height: clamp(48px, 5vw, 88px);
  z-index: 3;
  pointer-events: none;
  display: block;
}
.onda path { fill: var(--negro); }
.onda.carbon path { fill: var(--carbon); }
.onda-sup { top: -1px; }
.onda-inf { bottom: -1px; }
.clara + .oscura .onda-sup path,
.clara .onda path { fill: var(--negro); }

/* ---------- palabra gigante de fondo ---------- */
.palabra-fondo {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: var(--fuente-display);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(120px, 21vw, 340px);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 231, 205, 0.075);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.producto .contenedor, .exportaciones .contenedor,
.producto .campo, .producto .tarjetas-producto,
.exportaciones .mapa-envoltorio, .exportaciones .mapa-remate { position: relative; z-index: 1; }
.seccion.clara { background: var(--crema); color: var(--tinta); }
.seccion.clara .parrafo { color: var(--tinta-suave); }
.seccion.oscura { background: var(--negro); }
.seccion.nocturna { background: var(--carbon); }

.partido {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 76px;
  align-items: center;   /* columnas de distinto largo: el aire se reparte, no se acumula abajo */
}

/* ---------- botones ---------- */
.boton {
  display: inline-block;
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.boton-amarillo { background: var(--amarillo); color: var(--negro); }
.boton-amarillo:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(239, 226, 36, 0.28); }
.boton-borde {
  border: 1.5px solid rgba(247, 231, 205, 0.45);
  color: var(--crema);
  background: rgba(53, 39, 30, 0.25);
  backdrop-filter: blur(4px);
}
.boton-borde:hover { border-color: var(--amarillo); color: var(--amarillo); transform: translateY(-3px); }
.boton-mini { padding: 11px 24px; font-size: 13px; }

/* ---------- animación de aparición ---------- */
.aparece {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.aparece.visible { opacity: 1; transform: none; }
.d1 { transition-delay: 0.12s; }
.d2 { transition-delay: 0.24s; }
.d3 { transition-delay: 0.36s; }

/* ============================================================
   CABECERA
   ============================================================ */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 24px 44px;
  transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease;
}
.cabecera.compacta {
  background: rgba(53, 39, 30, 0.86);
  backdrop-filter: blur(16px);
  padding: 13px 44px;
  box-shadow: 0 1px 0 var(--borde-oscuro);
}

.logo { display: inline-flex; align-items: center; text-decoration: none; line-height: 1; }
.logo-svg { height: 26px; width: auto; display: block; }
.logo-letra { fill: var(--crema); }
.logo-banano { fill: var(--amarillo); }
.isotipo { height: 34px; width: auto; display: block; }
/* Sobre fondo claro el logotipo va en marrón; el banano no cambia nunca. */
.claro .logo-letra, .clara .logo-letra, .sobre-crema .logo-letra { fill: var(--negro); }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--crema);
  text-decoration: none;
  opacity: 0.88;
  position: relative;
  transition: opacity 0.3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--amarillo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }

.cabecera-acciones { display: flex; align-items: center; gap: 22px; }
.idiomas { display: flex; align-items: center; gap: 7px; color: var(--crema-baja); font-size: 12px; }
.idioma {
  background: none; border: none; cursor: pointer;
  font-family: var(--fuente-ui);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--crema-baja);
}
.idioma.activo { color: var(--amarillo); }
.idioma { text-decoration: none; transition: color var(--transicion); }
.idioma:hover { color: var(--crema); }

.menu-movil { display: none; }

/* ============================================================
   HERO — fotografía a pantalla completa
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroAcerca 14s ease-out forwards;
}
@keyframes heroAcerca {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: 2;   /* por encima del video, que va en la capa 1 */
  background:
    linear-gradient(to top, rgba(61, 26, 9, 0.97) 0%, rgba(61, 26, 9, 0.62) 34%, rgba(61, 26, 9, 0.24) 62%, rgba(61, 26, 9, 0.46) 100%),
    linear-gradient(100deg, rgba(61, 26, 9, 0.72) 0%, rgba(61, 26, 9, 0.16) 55%, transparent 100%);
}

.hero-contenido {
  position: relative;
  z-index: 2;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: clamp(118px, 20vh, 168px) 32px clamp(84px, 16vh, 150px);
  width: 100%;
}

.hero-titulo {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(48px, 7.6vw, 106px);
  line-height: 0.99;
  letter-spacing: -0.015em;
  margin-bottom: 30px;
  text-shadow: 0 2px 40px rgba(53, 39, 30, 0.45);
}
.hero-titulo em { font-style: normal; font-weight: 800; color: var(--amarillo); }

.hero-sub {
  max-width: 500px;
  font-size: 17.5px;
  opacity: 0.95;
  margin-bottom: 42px;
  text-shadow: 0 1px 18px rgba(53, 39, 30, 0.5);
}
.hero-sub strong { font-weight: 700; color: var(--amarillo); }

.hero-botones { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Nano, el mono mascota que acompaña el scroll ----------
   Es UNO solo, fijo a la ventana. Cada sección le cambia el sitio y la pose;
   entre estados viaja con una transición, así parece que juega por la página. */
.nano {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  width: clamp(120px, 13vw, 190px);
  --nano-pelo: #8a5a3a;        /* el marrón del peluche */
  --nano-crema: #f7e7d3;
  --nano-linea: #2e1a10;
  --nano-amarillo: #f5c842;    /* manos, pies y punta de la cola */
  --nano-mochila: #3f6fa8;     /* la maleta que carga a la espalda */
  --nano-hocico: #c08a63;      /* el hocico va café, no crema */
  --nano-nariz: #7a3b34;
  --nano-gorra: #f2a3b8;       /* la gorrita rosada, con la visera atrás */
  --nano-gorra-vis: #e2839c;
  filter: drop-shadow(0 20px 34px rgba(20, 8, 3, 0.5));
  transition: opacity 0.3s ease;
}
/* Dos dibujos, uno solo visible: el de cuerpo entero y el que se asoma. */
.nano:not([class*="nano--"]) { opacity: 0; }

/* piezas que se animan según la pose */
.nano--traza .nano-mochila,

@keyframes nanoCola { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes nanoGorra {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  45% { transform: translateY(-3px) rotate(-2deg); }
}
@keyframes nanoParpadea {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

/* ---- pose 1: en el hero, saluda y da saltitos ---- */
.nano--hero { right: 5%; bottom: 96px; left: auto; top: auto; }
.nano--hero .nano-brazo-der,
.nano--hero { animation: nanoSalta 3.4s ease-in-out infinite; }
@keyframes nanoSaluda {
  0%, 60%, 100% { transform: rotate(0deg); }
  75% { transform: rotate(-20deg); }
  88% { transform: rotate(-6deg); }
}
@keyframes nanoSalta {
  0%, 100% { transform: translateY(0) scaleY(1); }
  45% { transform: translateY(-16px) scaleY(1.02); }
  70% { transform: translateY(0) scaleY(0.98); }
}

/* ---- pose 2: en las cifras, se asoma por el borde izquierdo ---- */
.nano--datos { left: 2%; bottom: 12vh; right: auto; top: auto; }
.nano--datos { animation: nanoAsoma 4s ease-in-out infinite; }
@keyframes nanoAsoma {
  0%, 100% { transform: rotate(4deg) translateX(0); }
  50% { transform: rotate(-2deg) translateX(14px); }
}

/* ---- pose: asomado por el borde izquierdo (página de producto) ----
   Se queda medio fuera de cuadro, como espiando lo que hay en la página. */
.nano--asoma {
  left: calc(-1 * clamp(150px, 16vw, 230px) / 2);   /* la mitad oculta: el canto queda en las manos */
  right: auto;
  bottom: 24vh;
  top: auto;
  width: clamp(150px, 16vw, 230px);
  animation: nanoEspia 5s ease-in-out infinite;
}
.nano-espia-gorra { transform-origin: 219px 60px; animation: nanoGorra 3.4s ease-in-out infinite; }
/* se asoma un poco más y vuelve, como quien espía por el canto */
@keyframes nanoEspia {
  0%, 100% { transform: translateX(0) rotate(3deg); }
  44%      { transform: translateX(34px) rotate(-1deg); }
}

/* ---- pose 3: en trazabilidad, inspecciona con la lupa ---- */
.nano--traza { left: 4%; right: auto; bottom: 16vh; top: auto; }
.nano--traza { animation: nanoBusca 5s ease-in-out infinite; }
@keyframes nanoMaleta {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(-3px); }
}
@keyframes nanoBusca {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(-4deg) translateY(-10px); }
}

/* ---- salida y entrada corriendo ----
   Mientras está fuera de cuadro se le cambia el sitio y la pose; el público
   solo ve que se fue por un lado y volvió por el otro. */
.nano.corriendo:not(.sale-der):not(.sale-izq):not(.entra-der):not(.entra-izq) { animation: none !important; }
.nano.corriendo .nano-cola { animation: nanoColaRapida 0.24s linear infinite; }
.nano.corriendo .nano-pierna-izq { animation: correrIzq 0.2s linear infinite alternate; }
.nano.corriendo .nano-pierna-der { animation: correrDer 0.2s linear infinite alternate; }
.nano-pierna-izq { transform-origin: 132px 300px; }
.nano-pierna-der { transform-origin: 168px 300px; }

.nano.sale-der { animation: saleDer 0.66s cubic-bezier(0.45, 0, 0.75, 0.1) both; }
.nano.sale-izq { animation: saleIzq 0.66s cubic-bezier(0.45, 0, 0.75, 0.1) both; }
.nano.entra-der { animation: entraDer 0.62s cubic-bezier(0.16, 0.9, 0.3, 1) both; }
.nano.entra-izq { animation: entraIzq 0.62s cubic-bezier(0.16, 0.9, 0.3, 1) both; }

@keyframes saleDer {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  26%  { transform: translateX(-12%) rotate(-5deg); opacity: 1; }   /* toma impulso */
  100% { transform: translateX(230%) rotate(12deg); opacity: 0; }
}
@keyframes saleIzq {
  0%   { transform: translateX(0) rotate(0deg); opacity: 1; }
  26%  { transform: translateX(12%) rotate(5deg); opacity: 1; }
  100% { transform: translateX(-230%) rotate(-12deg); opacity: 0; }
}
@keyframes entraDer {
  from { transform: translateX(190%) rotate(9deg); opacity: 0; }
  70%  { transform: translateX(-6%) rotate(-3deg); opacity: 1; }
  to   { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes entraIzq {
  from { transform: translateX(-190%) rotate(-9deg); opacity: 0; }
  70%  { transform: translateX(6%) rotate(3deg); opacity: 1; }
  to   { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes correrIzq { from { transform: rotate(-26deg); } to { transform: rotate(24deg); } }
@keyframes correrDer { from { transform: rotate(26deg); } to { transform: rotate(-24deg); } }
@keyframes nanoColaRapida { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }

/* ---------- estampilla (la de las piezas de campaña) ---------- */
.estampilla {
  position: absolute;
  z-index: 4;
  right: clamp(28px, 4vw, 60px);
  top: clamp(104px, 15vh, 150px);
  bottom: auto;
  display: block;
  padding: 13px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--negro);
  background: var(--crema);
  transform: rotate(-7deg);
  transition: transform var(--transicion);
  /* borde dentado de estampilla, sin imágenes */
  -webkit-mask-image:
    radial-gradient(circle at 50% 0, transparent 0 5px, #000 5.5px),
    radial-gradient(circle at 50% 100%, transparent 0 5px, #000 5.5px);
  -webkit-mask-size: 14px 100%, 14px 100%;
  -webkit-mask-repeat: repeat-x, repeat-x;
  -webkit-mask-position: 0 -5px, 0 calc(100% + 5px);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  box-shadow: 0 14px 34px rgba(20, 12, 6, 0.45);
}
.estampilla:hover { transform: rotate(-3deg) scale(1.05); }
.estampilla-linea {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  opacity: 0.75;
}
.estampilla-fuerte {
  display: block;
  font-family: var(--fuente-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin: 1px 0;
}

/* marquesina inferior */
.marquesina {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(247, 231, 205, 0.18);
  padding: 15px 0;
  overflow: hidden;
  background: rgba(53, 39, 30, 0.55);
  backdrop-filter: blur(8px);
}
.marquesina-pista {
  display: flex;
  align-items: center;
  gap: 36px;
  width: max-content;
  animation: desfila 30s linear infinite;
}
.marquesina span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(247, 231, 205, 0.75);
  white-space: nowrap;
}
.marquesina i { color: var(--amarillo); font-style: normal; font-size: 14px; }
@keyframes desfila { to { transform: translateX(-50%); } }

/* ============================================================
   DATOS
   ============================================================ */
.datos {
  background: var(--crema);
  color: var(--tinta);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.dato {
  padding: 46px 32px;
  text-align: center;
  border-left: 1px solid rgba(53, 39, 30, 0.14);
}
.dato:first-child { border-left: none; }
.cifra {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(40px, 4.4vw, 62px);
  line-height: 1;
  color: #7a4f22;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.dato span { font-size: 13.5px; color: var(--tinta-suave); display: block; max-width: 220px; margin: 0 auto; }

/* ============================================================
   NOSOTROS
   ============================================================ */
.linea-tiempo { margin-top: 44px; display: grid; gap: 26px; }
.hito {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 22px;
  align-items: start;
}
.hito-anio {
  font-family: var(--fuente-display);
  font-style: normal;
  font-weight: 800;
  font-size: 27px;
  color: var(--tinta);
  line-height: 1.2;
}
.hito-texto {
  font-size: 14.5px;
  color: var(--tinta-suave);
  border-left: 2px solid var(--amarillo);
  padding-left: 20px;
}

.col-visual { display: grid; gap: 26px; }
.retrato {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(53, 39, 30, 0.22);
}
.retrato img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.retrato:hover img { transform: scale(1.04); }

.tarjeta-cita {
  position: relative;
  padding: 38px 36px;
  background: var(--negro);
  border-radius: 22px;
  color: var(--crema);
  overflow: hidden;
}
.cita {
  font-family: var(--fuente-display);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  margin-bottom: 26px;
  position: relative;
}
.cita-autor { display: grid; gap: 2px; font-size: 14px; }
.cita-autor strong { color: var(--amarillo); font-weight: 700; }
.cita-autor span { opacity: 0.7; }

/* ============================================================
   PRODUCTO
   ============================================================ */
.producto .contenedor:first-child { margin-bottom: 60px; }

.campo {
  position: relative;
  margin: 0 auto 64px;
  max-width: 1240px;
  padding: 0 32px;
  overflow: visible;
}
.campo img {
  width: 100%;
  height: clamp(240px, 27vw, 380px);   /* panorámica, no un bloque cuadrado */
  object-fit: cover;
  border-radius: 24px;
}
.campo::after {
  content: "";
  position: absolute;
  inset: 0 32px;
  border-radius: 24px;
  background: linear-gradient(to top, rgba(53, 39, 30, 0.5), transparent 42%),
              linear-gradient(to bottom, rgba(53, 39, 30, 0.3), transparent 28%);
  pointer-events: none;
}

.campo-etiqueta {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--negro);
  background: var(--crema);
  padding: 10px 17px;
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
.campo-etiqueta i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--amarillo);
  border: 1px solid rgba(53, 39, 30, 0.3);
  outline: 4px solid rgba(239, 226, 36, 0.35);
  animation: late 2.4s ease-in-out infinite;
}
@keyframes late {
  0%, 100% { outline-color: rgba(239, 226, 36, 0.35); }
  50% { outline-color: rgba(239, 226, 36, 0.02); }
}

.tarjetas-producto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.tarjeta-prod {
  background: var(--carbon);
  border: 1px solid var(--borde-oscuro);
  border-radius: 22px;
  overflow: hidden;
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.tarjeta-prod:hover {
  transform: translateY(-6px);
  border-color: rgba(239, 226, 36, 0.4);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.tarjeta-foto { height: 230px; overflow: hidden; }
.tarjeta-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.tarjeta-prod:hover .tarjeta-foto img { transform: scale(1.06); }
.tarjeta-cuerpo { padding: 32px 32px 36px; }

.sello {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
  color: var(--amarillo);
  border: 1px solid rgba(239, 226, 36, 0.35);
}

.tarjeta-prod h3 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 26px;
  margin-bottom: 13px;
}
.tarjeta-prod p { font-size: 14.5px; opacity: 0.92; margin-bottom: 20px; }

.lista-banano { list-style: none; display: grid; gap: 10px; }
.lista-banano li {
  position: relative;
  padding-left: 26px;
  font-size: 13.5px;
  opacity: 1;
}
.lista-banano li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--amarillo);
}

/* ============================================================
   TRAZABILIDAD — declaración tipográfica
   ============================================================ */
.trazabilidad {
  background: var(--negro);
  padding: clamp(80px, 11vh, 110px) 0 clamp(70px, 9vh, 96px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.trazabilidad .kicker { margin-bottom: 22px; }
.traza-lineas { margin-bottom: 26px; }
.traza-linea {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.015em;
}
.traza-linea.amarilla { color: var(--amarillo); }
.trazabilidad .parrafo { margin: 0 auto; }
.traza-remate {
  margin-top: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--crema-baja);
}

/* ============================================================
   MARCAS — tarjetas fotográficas
   ============================================================ */
.marcas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 52px;
}
.marca {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
  color: var(--crema);
}
.marca:hover { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(53, 39, 30, 0.3); }
.marca > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.marca:hover > img { transform: scale(1.06); }
.marca-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(53, 39, 30, 0.92) 0%, rgba(53, 39, 30, 0.42) 45%, rgba(53, 39, 30, 0.08) 75%);
  transition: background 0.5s ease;
}
.marca-cuerpo { position: relative; z-index: 2; padding: 36px 34px 40px; width: 100%; }
.marca-tipo {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 12px;
}
.marca-nombre {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(32px, 2.8vw, 42px);
  line-height: 1.02;
  margin-bottom: 14px;
}
.marca-desc {
  font-size: 14px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease 0.05s, max-height 0.5s ease;
}
.marca:hover .marca-desc { opacity: 0.92; max-height: 130px; }
.marca-flecha {
  position: absolute;
  right: 30px; bottom: 34px;
  font-size: 22px;
  color: var(--amarillo);
  transition: transform var(--transicion);
}
.marca:hover .marca-flecha { transform: translateX(8px); }

/* ============================================================
   SOSTENIBILIDAD — foto de fondo
   ============================================================ */
.sostenibilidad {
  position: relative;
  padding: 130px 0;
  overflow: hidden;
  color: var(--crema);
}
.sost-fondo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sost-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(53, 39, 30, 0.88), rgba(53, 39, 30, 0.82));
}
.sost-contenido { position: relative; z-index: 2; }

.pilares {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 56px;
}
.pilar {
  background: rgba(53, 39, 30, 0.55);
  border: 1px solid var(--borde-oscuro);
  border-radius: 18px;
  padding: 34px 32px;
  backdrop-filter: blur(6px);
}
.pilar h3 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(239, 226, 36, 0.35);
}
.pilar p { font-size: 14px; opacity: 0.94; }

.sost-lema {
  margin: 72px auto 0;
  max-width: 720px;
  text-wrap: balance;
  text-align: center;
  font-family: var(--fuente-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--crema);
}

.certificaciones { margin-top: 56px; text-align: center; }
.cert-titulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 26px;
}
.cert-fila { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cert {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  padding: 16px 28px;
  border: 1.5px solid rgba(247, 231, 205, 0.3);
  border-radius: 999px;
  background: rgba(53, 39, 30, 0.4);
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.cert:hover { border-color: var(--amarillo); color: var(--amarillo); transform: translateY(-3px); }
.cert-nota { margin-top: 20px; font-size: 11.5px; opacity: 0.7; font-style: italic; }

/* ============================================================
   EXPORTACIONES — mapa
   ============================================================ */
/* El mapa tiene que caber de un vistazo, por eso esta sección va más
   apretada que el resto; pero abajo hay que dejarle sitio a la curva o
   se le monta encima al remate. */
.exportaciones { padding: clamp(110px, 8vw, 140px) 0 clamp(132px, 10vw, 176px); }
.exportaciones .contenedor { margin-bottom: 18px; }

.mapa-envoltorio {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

.mapa-caja {
  position: relative;
  padding: 0;
}
#mapaMundo {
  display: block;
  width: 100%;
  height: auto;
  max-height: 45vh;      /* el mapa no debe empujar el remate fuera de pantalla */
}

.pais {
  fill: rgba(247, 231, 205, 0.13);
  stroke: none;
  transition: fill 0.25s ease;
}
.pais.destino {
  fill: var(--crema);
  stroke: var(--carbon);
  stroke-width: 0.6;
  cursor: pointer;
}
.pais.destino:hover,
.pais.destino.activo { fill: var(--amarillo); opacity: 1; }
.pais.origen { fill: var(--amarillo); cursor: pointer; }

.arco {
  fill: none;
  stroke: var(--amarillo);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.9;
  pointer-events: none;
}

.punto-origen { pointer-events: none; }
.punto-origen .anillo {
  fill: none;
  stroke: var(--amarillo);
  stroke-width: 1.2;
  animation: onda 2.6s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes onda {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}

.mapa-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--crema);
  color: var(--negro);
  font-size: 13px;
  font-weight: 700;
  padding: 9px 15px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(0.92);
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  z-index: 5;
}
.mapa-tooltip.visible { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.mapa-tooltip small { display: block; font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }


.mapa-nota { margin-top: 14px; text-align: center; font-size: 11.5px; opacity: 0.75; font-style: italic; }

.puerto {
  position: relative;
  max-width: 1320px;
  margin: 64px auto 0;
  padding: 0 32px;
}

/* ============================================================
   TRABAJA CON NOSOTROS
   ============================================================ */
.trabaja-foto { margin-top: 40px; border-radius: 22px; overflow: hidden; box-shadow: 0 26px 60px rgba(53, 39, 30, 0.2); }
.trabaja-foto img { width: 100%; height: 300px; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.trabaja-foto:hover img { transform: scale(1.04); }

.col-caminos { display: grid; gap: 22px; align-content: center; height: 100%; }
.camino {
  display: block;
  background: #fffaf0;
  border: 1.5px solid var(--borde-claro);
  border-radius: 22px;
  padding: 36px 38px;
  text-decoration: none;
  color: var(--tinta);
  transition: transform var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.camino:hover {
  transform: translateY(-5px);
  border-color: var(--tinta);
  box-shadow: 0 24px 50px rgba(53, 39, 30, 0.14);
}
.camino h3 { font-family: var(--fuente-display); font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.camino p { font-size: 14px; color: var(--tinta-suave); margin-bottom: 14px; }
.camino-cta { font-size: 13.5px; font-weight: 800; color: var(--tinta); border-bottom: 2px solid var(--amarillo); padding-bottom: 2px; }

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto-datos { list-style: none; margin-top: 36px; display: grid; gap: 16px; }
.contacto-datos li { display: grid; grid-template-columns: 90px 1fr; gap: 14px; font-size: 15px; align-items: baseline; }
.contacto-datos strong { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amarillo); }
.contacto-datos a { color: var(--crema); text-decoration: none; border-bottom: 1px solid rgba(247, 231, 205, 0.3); transition: border-color 0.3s, color 0.3s; }
.contacto-datos a:hover { color: var(--amarillo); border-color: var(--amarillo); }

.formulario {
  background: var(--carbon);
  border: 1px solid var(--borde-oscuro);
  border-radius: 22px;
  padding: 30px 30px 32px;
  display: grid;
  gap: 14px;
}
.campo-form { display: grid; gap: 6px; }
.campo-form label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.7; }
.campo-form input,
.campo-form textarea {
  font-family: var(--fuente-ui);
  font-size: 14.5px;
  color: var(--crema);
  background: var(--negro);
  border: 1px solid rgba(247, 231, 205, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
  transition: border-color 0.3s, box-shadow 0.3s;
  resize: vertical;
}
.campo-form input:focus,
.campo-form textarea:focus {
  outline: none;
  border-color: var(--amarillo);
  box-shadow: 0 0 0 3px rgba(239, 226, 36, 0.15);
}
.formulario .boton { justify-self: start; }
.form-aviso { font-size: 13px; color: var(--amarillo); min-height: 20px; }

/* ============================================================
   PIE
   ============================================================ */
.pie { background: #291e17; border-top: 1px solid var(--borde-oscuro); padding-top: 70px; }
.pie-marca p { margin-top: 16px; font-size: 13.5px; opacity: 0.8; }
.pie-nav { display: grid; gap: 10px; align-content: start; }
.pie-nav a { color: var(--crema); opacity: 0.88; text-decoration: none; font-size: 13.5px; transition: opacity 0.3s, color 0.3s; }
.pie-nav a:hover { opacity: 1; color: var(--amarillo); }
.pie-denuncia a { color: var(--crema); }
.pie-base {
  border-top: 1px solid var(--borde-oscuro);
  padding: 22px 32px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  opacity: 0.75;
}
.pie-boceto { font-style: italic; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .partido { grid-template-columns: 1fr; gap: 48px; }
  .datos { grid-template-columns: repeat(2, 1fr); }
  .dato { border-left: none; border-top: 1px solid var(--borde-oscuro); }
  .tarjetas-producto, .marcas-grid, .pilares { grid-template-columns: 1fr 1fr; }
  .marca { min-height: 440px; }
}

@media (max-width: 760px) {
  .nav, .cabecera-acciones { display: none; }
  .menu-movil {
    display: grid;
    gap: 5px;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
  }
  .menu-movil span { width: 24px; height: 2px; background: var(--crema); border-radius: 2px; }
  .cabecera.abierta { background: var(--negro); }
  .cabecera.abierta .nav {
    display: flex;
    position: fixed;
    inset: 0;
    background: var(--negro);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    font-size: 20px;
    z-index: -1;
    padding-top: 40px;
  }
  .hero-contenido { padding: 140px 22px 120px; }
  .nano { width: 96px; }
  .nano--hero { right: 2%; bottom: 88px; }
  .nano--datos { left: -26px; bottom: 10vh; }
  .nano--traza { right: 3%; bottom: 12vh; }
  .estampilla { right: 18px; top: 88px; padding: 8px 12px; }
  .estampilla-fuerte { font-size: 16px; }
  .estampilla-linea { font-size: 8px; }
  .onda { height: 38px; }
  .tarjetas-producto, .marcas-grid, .pilares { grid-template-columns: 1fr; }
  .marca { min-height: 420px; }
  .datos { grid-template-columns: 1fr 1fr; }
  .seccion { padding: 84px 0; }
  .sostenibilidad { padding: 90px 0; }
  .campo img { height: 240px; }
  .campo { padding: 0 22px; }
  .campo::after { inset: 0 22px; }
  .campo-etiqueta { font-size: 10.5px; padding: 7px 11px; }
  .formulario { padding: 32px 26px; }
  .contenedor { padding: 0 22px; }
  .cabecera { padding: 16px 22px; }
  .cabecera.compacta { padding: 12px 22px; }
}

/* ---------- reducción de movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { transition: none; opacity: 1; transform: none; }
  .hero-foto, .marquesina-pista, .campo-etiqueta i, .punto-origen .anillo,
  .nano, .nano-cola, .nano-brazo-der, .nano-sombrero, .nano-ojo { animation: none; }
}

.mapa-remate {
  max-width: 640px;
  margin: 18px auto 0;
  padding: 0 32px;
  text-align: center;
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: clamp(17px, 1.9vw, 23px);
  line-height: 1.4;
  color: var(--crema);
  opacity: 0.9;
}

/* ============================================================
   PORTADA — banner propio de cada página interna
   ============================================================ */
.portada {
  position: relative;
  /* La curva tiene que caer al mismo nivel en las siete páginas, PERO fijar la
     altura del banner lo desborda en ventanas bajas y el rótulo se mete debajo
     del logo. La solución es al revés: que el contenido mida siempre igual
     (título y bajada reservan dos líneas) y el banner solo tenga un mínimo. */
  min-height: clamp(400px, 52vh, 500px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: 54px;
}
.portada-foto {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  animation: heroAcerca 16s ease-out forwards;
}
.portada-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--negro) 2%, rgba(53, 39, 30, 0.72) 38%, rgba(53, 39, 30, 0.3) 100%),
    linear-gradient(100deg, rgba(53, 39, 30, 0.7) 0%, rgba(53, 39, 30, 0.15) 60%, transparent 100%);
}
.portada-contenido { position: relative; z-index: 2; padding-top: 130px; }
.portada-titulo {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 82px);
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  text-shadow: 0 2px 34px rgba(25, 14, 6, 0.5);
}
.portada-titulo em { font-style: normal; color: var(--amarillo); }
/* Dos líneas de alto vaya o no vaya el título en dos: así todos los banners
   miden lo mismo y la curva no baila de una página a otra. */
.portada-titulo { min-height: 2.1em; }
.portada-bajada { min-height: 3.4em; }
.portada-bajada {
  max-width: 560px;
  font-size: 17px;
  opacity: 0.94;
  text-shadow: 0 1px 16px rgba(25, 14, 6, 0.55);
}

/* ---------- misión / visión / política ---------- */
.proposito-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 50px;
}
.proposito-tarjeta {
  background: var(--carbon);
  border: 1px solid var(--borde-oscuro);
  border-radius: 22px;
  padding: 36px 32px;
  transition: transform var(--transicion), border-color var(--transicion);
}
.proposito-tarjeta:hover { transform: translateY(-6px); border-color: rgba(239, 226, 36, 0.4); }
.proposito-icono { width: 42px; height: 42px; color: var(--amarillo); margin-bottom: 20px; }
.proposito-tarjeta h3 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 12px;
}
.proposito-tarjeta p { font-size: 14.5px; opacity: 0.85; }

/* ---------- página actual en el menú ---------- */
.nav a.activo { opacity: 1; color: var(--amarillo); }
.nav a.activo::after { transform: scaleX(1); }

/* ---------- botones bajo la trazabilidad ---------- */
.traza-botones { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

@media (max-width: 1080px) { .proposito-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .proposito-grid { grid-template-columns: 1fr; }
  .portada { min-height: 340px; padding-bottom: 36px; }
  .portada-contenido { padding-top: 104px; }
}

/* En fondo crema el amarillo no contrasta: el énfasis se hace con el marrón. */
.seccion.clara .titulo em { color: #7a4f22; }
.seccion.clara .parrafo strong { color: var(--tinta); }

/* ---------- formulario sobre fondo claro ---------- */
.formulario.claro {
  background: #fffaf0;
  border-color: var(--borde-claro);
}
.formulario.claro label { color: var(--tinta); opacity: 0.85; }
.formulario.claro input,
.formulario.claro textarea,
.formulario.claro select {
  background: #fff;
  color: var(--tinta);
  border-color: rgba(53, 39, 30, 0.22);
}
.formulario.claro .form-aviso { color: #7a4f22; }
.campo-form select {
  font-family: var(--fuente-ui);
  font-size: 14.5px;
  color: var(--crema);
  background: var(--negro);
  border: 1px solid rgba(247, 231, 205, 0.18);
  border-radius: 12px;
  padding: 10px 14px;
}
.boton-oscuro { background: var(--tinta); color: var(--crema); }
.boton-oscuro:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(53, 39, 30, 0.3); }

/* ---------- pie compacto ---------- */
.pie-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 34px;
}
.pie-datos { list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.pie-datos a { color: var(--crema); text-decoration: none; border-bottom: 1px solid rgba(247, 231, 205, 0.3); }
.pie-datos a:hover { color: var(--amarillo); border-color: var(--amarillo); }
.pie-fila .pie-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; max-width: 420px; }
.pie-base a { color: var(--crema); text-decoration: none; border-bottom: 1px solid rgba(247, 231, 205, 0.3); }
@media (max-width: 760px) { .pie-fila { flex-direction: column; align-items: flex-start; gap: 26px; } }

/* ---------- Trabaja: columnas a la misma altura ----------
   Sin esto la foto queda corta al lado del formulario y deja un hueco. */
.trabaja .partido { align-items: stretch; }
.trabaja .col-texto { display: flex; flex-direction: column; }
.trabaja .trabaja-foto {
  margin-top: 0;
  flex: 1;
  min-height: 300px;
  max-height: 440px;
}
.trabaja .col-texto > .kicker + .titulo + .parrafo + .trabaja-foto { margin-top: 34px; }
.trabaja .trabaja-foto img { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.trabaja .formulario { align-self: stretch; }

@media (max-width: 1080px) {
  .trabaja .trabaja-foto { min-height: 260px; }
}

/* ---------- Contacto en una columna: datos en fila, formulario debajo ---------- */
.contacto-datos.fila {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 30px auto 34px;
  max-width: 860px;
}
.contacto-datos.fila li {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 20px 24px;
  border: 1px solid var(--borde-oscuro);
  border-radius: 16px;
  background: rgba(247, 231, 205, 0.04);
  align-items: start;
}
.contacto .formulario { max-width: 860px; margin: 0 auto; }
@media (max-width: 760px) { .contacto-datos.fila { grid-template-columns: 1fr; } }

/* ---------- Nosotros: la foto acompaña toda la altura del texto ---------- */
#nosotros .partido { align-items: stretch; }
#nosotros .col-visual { display: flex; }
#nosotros .retrato { flex: 1; min-height: 360px; max-height: 480px; }
#nosotros .retrato img { height: 100%; }
#nosotros .tarjeta-cita { margin-top: 30px; }
@media (max-width: 1080px) { #nosotros .retrato { min-height: 300px; } }

/* ============================================================
   RITMO CLARO — el marrón pasa a ser acento, no fondo dominante
   ============================================================ */

/* Las curvas separan de verdad: arriba entran desde el marrón de la portada,
   abajo salen hacia el marrón del pie. */
.seccion.clara .onda path { fill: var(--negro); }
.trazabilidad .onda-sup path { fill: var(--crema); }
.trazabilidad .onda-inf { display: none; }
.onda.clarita path { fill: var(--crema); }

/* ---------- Producto sobre crema ---------- */
.seccion.clara.producto { color: var(--tinta); }
.seccion.clara.producto .kicker { color: #7a4f22; }
.seccion.clara .palabra-fondo { -webkit-text-stroke: 1px rgba(53, 39, 30, 0.10); }
.seccion.clara .campo-etiqueta { background: var(--negro); color: var(--crema); }
.seccion.clara .campo-etiqueta i { border-color: rgba(247, 231, 205, 0.35); }

/* ---------- Sostenibilidad sobre crema, con los pilares en marrón ---------- */
.seccion.clara .pilar {
  background: #fffaf0;
  color: var(--tinta);
  border: 1px solid rgba(53, 39, 30, 0.12);
  border-top: 4px solid var(--amarillo);
  border-radius: 4px 4px 18px 18px;
  backdrop-filter: none;
  box-shadow: 0 14px 30px rgba(53, 39, 30, 0.06);
  padding: 32px 30px 30px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.seccion.clara .pilar:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(53, 39, 30, 0.12); }
.seccion.clara .pilar h3 { color: var(--tinta); border-bottom: 1px solid rgba(53, 39, 30, 0.12); }
.seccion.clara .pilar p { color: var(--tinta-suave); opacity: 1; }
.seccion.clara .pilar .pilar-dato {
  display: block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(53, 39, 30, 0.18);
  font-size: 13px;
  font-weight: 700;
  color: #7a4f22;
}
.seccion.clara.sostenibilidad .sost-lema { color: var(--tinta); }
.seccion.clara.sostenibilidad .cert-titulo { color: #7a4f22; }
.seccion.clara.sostenibilidad .cert {
  border-color: rgba(53, 39, 30, 0.28);
  background: rgba(53, 39, 30, 0.04);
  color: var(--tinta);
}
.seccion.clara.sostenibilidad .cert:hover { border-color: var(--negro); background: var(--negro); color: var(--crema); }
.seccion.clara.sostenibilidad .cert-nota { color: var(--tinta-suave); }

/* ---------- Mapa sobre crema ---------- */
.seccion.clara.exportaciones { color: var(--tinta); }
.seccion.clara.exportaciones .kicker { color: #7a4f22; }
.seccion.clara .pais { fill: rgba(53, 39, 30, 0.14); }
.seccion.clara .pais.destino { fill: var(--negro); stroke: var(--crema); stroke-width: 0.7; }
.seccion.clara .pais.destino:hover,
.seccion.clara .pais.destino.activo { fill: #b99a12; }
.seccion.clara .pais.origen { fill: #b99a12; stroke: var(--negro); stroke-width: 0.8; }
.seccion.clara .arco { stroke: var(--negro); stroke-width: 1.8; }
.seccion.clara .punto-origen .anillo { stroke: var(--negro); }
.seccion.clara .mapa-tooltip { background: var(--negro); color: var(--crema); }
.seccion.clara .mapa-remate, .seccion.clara .mapa-nota { color: var(--tinta); }

/* ---------- Contacto sobre crema ---------- */
.seccion.clara.contacto { color: var(--tinta); }
.seccion.clara.contacto .kicker { color: #7a4f22; }
.seccion.clara .contacto-datos.fila li {
  border-color: rgba(53, 39, 30, 0.16);
  background: rgba(255, 255, 255, 0.55);
}
.seccion.clara .contacto-datos strong { color: #7a4f22; }
.seccion.clara .contacto-datos a { color: var(--tinta); border-bottom-color: rgba(53, 39, 30, 0.35); }
.seccion.clara .contacto-datos a:hover { color: #7a4f22; border-color: #7a4f22; }
.seccion.clara .formulario {
  background: #fffaf0;
  border-color: rgba(53, 39, 30, 0.14);
}
.seccion.clara .formulario label { color: var(--tinta); opacity: 0.8; }
.seccion.clara .formulario input,
.seccion.clara .formulario textarea,
.seccion.clara .formulario select {
  background: #fff;
  color: var(--tinta);
  border-color: rgba(53, 39, 30, 0.22);
}
.seccion.clara .formulario .boton-amarillo { background: var(--negro); color: var(--crema); }
.seccion.clara .form-aviso { color: #7a4f22; }

/* ---------- Trazabilidad: bloque oscuro entre dos claros ---------- */
.trazabilidad { border: none; }

/* ---------- Marcas: dos tarjetas, más presencia ---------- */
.marcas-grid { grid-template-columns: repeat(2, 1fr); max-width: 860px; margin-inline: auto; }
.marca { min-height: 560px; }

/* ---------- Trabaja: la foto llena su columna, sin huecos ---------- */
.trabaja .col-texto { justify-content: stretch; }
.trabaja .trabaja-foto { max-height: none; align-self: stretch; }
.trabaja .trabaja-foto img { min-height: 100%; }

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

/* ---------- Marcas: fruta suelta y centrada sobre el color de la tarjeta ---------- */
.marcas-grid {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
  max-width: none;
}
.marca { background: var(--negro); }
.marca:nth-child(2) { background: #4a2e1c; }
.marca > img.marca-fruta {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 78%;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.45));
  transition: transform var(--transicion);
}
.marca:hover > img.marca-fruta { transform: translate(-50%, -54%) scale(1.05); }
.marca-velo {
  background: linear-gradient(to top, var(--negro) 4%, rgba(53, 39, 30, 0.65) 34%, transparent 62%);
}

/* ---------- Producto: tarjetas oscuras dentro de una sección clara ----------
   Heredaban el color de texto de la sección (marrón sobre marrón). */
.seccion.clara .tarjeta-prod { color: var(--crema); border-color: rgba(53, 39, 30, 0.16); }
.seccion.clara .tarjeta-prod h3 { color: var(--crema); }
.seccion.clara .tarjeta-prod p { color: var(--crema); opacity: 0.92; }
.seccion.clara .tarjeta-prod .lista-banano li { color: var(--crema); }
.seccion.clara .tarjeta-prod .sello { color: var(--amarillo); border-color: rgba(239, 226, 36, 0.45); }


/* ============================================================
   Pie: al quitar la nota de boceto quedan dos textos sueltos.
   Se centran en una fila y respiran igual a ambos lados.
   ============================================================ */
.pie-base { justify-content: center; gap: 34px; text-align: center; }

/* ============================================================
   Nosotros: la cita y el retrato arrancan y terminan al mismo nivel
   ============================================================ */
#nosotros .partido { align-items: stretch; }
#nosotros .col-texto { display: flex; flex-direction: column; }
#nosotros .tarjeta-cita { margin-top: auto; }
#nosotros .col-visual { align-content: stretch; }
#nosotros .retrato { height: 100%; }


.rejilla-sellos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  margin-bottom: 64px;
}
.sello-tarjeta {
  background: #fff;
  border: 1px solid var(--borde-claro);
  border-radius: 20px;
  padding: 30px 26px 28px;
  text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.sello-tarjeta:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(61, 26, 9, 0.16); }
.sello-tarjeta img { width: 96px; height: 96px; object-fit: contain; margin-bottom: 18px; }
.sello-tarjeta h3 {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--negro);
  margin-bottom: 10px;
}
.sello-tarjeta p { font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); }

.tira-lote {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 30px 34px;
  border-radius: 22px;
  background: var(--sky-blue);
}
.tira-lote-sello { width: 132px; height: auto; }
.tira-lote-titulo {
  font-family: var(--fuente-cartel);
  font-size: 22px;
  color: var(--negro);
  margin-bottom: 8px;
}
.tira-lote-texto p { font-size: 15.5px; line-height: 1.62; color: var(--tinta); }
.tira-lote-texto strong { color: var(--negro); }

@media (max-width: 900px) {
  .rejilla-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tira-lote { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 560px) {
  .rejilla-sellos { grid-template-columns: 1fr; }
  .laureles { grid-template-columns: 1fr; }
}


/* ============================================================
   NANO — ilustraciones oficiales del brandbook
   ============================================================ */
.nano-pose { display: none; width: 100%; height: auto; }
.nano--hero  .nano-pose--hero  { display: block; }
.nano--traza .nano-pose--traza { display: block; }

/* Un Nano quieto en la esquina derecha del banner. Va ahí y no al final de la
   sección porque las secciones miden dos mil y pico de píxeles: colgado abajo
   había que recorrer toda la página para encontrarlo. En el banner se ve apenas
   carga, y el texto (título y bajada) vive en la mitad izquierda. */
.nano-fijo {
  position: absolute;
  bottom: 0;
  height: clamp(120px, 12vw, 200px);
  width: auto;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 14px 26px rgba(61, 26, 9, 0.22));
}
.nano-fijo--der { right: clamp(12px, 3vw, 60px); transform: scaleX(-1); }
.nano-fijo--izq { left: clamp(12px, 3vw, 60px); }
@media (max-width: 700px) { .nano-fijo { display: none; } }   /* en móvil estorba */

/* Los stickers de la marca, pegados como en las piezas impresas */
.tira-sticker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 4vw, 54px);
  margin-bottom: 58px;
  flex-wrap: wrap;
}
.tira-sticker img { width: clamp(96px, 11vw, 150px); height: auto; }
.tira-sticker img:nth-child(1) { transform: rotate(-7deg); }
.tira-sticker img:nth-child(2) { transform: rotate(4deg); }
.tira-sticker img:nth-child(3) { transform: rotate(-3deg); }




/* ============================================================
   VIDEOLOGO — pieza de marca dentro de Trazabilidad.
   Vive en su propio marco, no de fondo: la tipografía del video
   se peleaba con el titular del hero.
   ============================================================ */
.marco-video {
  position: relative;
  max-width: 1000px;
  margin: 54px auto 0;
  padding: 0 24px;
}
.videologo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  background: #241004;
  box-shadow: 0 30px 70px rgba(20, 8, 2, 0.45);
}
.video-sonido {
  position: absolute;
  right: 40px;
  bottom: 58px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--amarillo);
  color: var(--negro);
  font-family: var(--fuente-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.video-sonido:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20, 8, 2, 0.4); }
.marco-video-pie {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--crema);
  opacity: 0.72;
}
@media (max-width: 620px) {
  .video-sonido { right: 32px; bottom: 50px; padding: 7px 14px; font-size: 12px; }
}


/* ============================================================
   Contacto: el formulario en una sola columna obligaba a hacer
   scroll para verlo entero. Los campos cortos pasan a dos
   columnas — mismo tamaño de campo, la mitad de alto total.
   ============================================================ */
@media (min-width: 760px) {
  .contacto .formulario {
    grid-template-columns: 1fr 1fr;
    column-gap: 18px;
  }
  /* Mensaje, botón y aviso cruzan las dos columnas. */
  .contacto .formulario .campo-ancho,
  .contacto .formulario .boton,
  .contacto .formulario .form-aviso { grid-column: 1 / -1; }
}

/* En Contacto el bloque de datos y el formulario ocupan todo el contenedor:
   Nano baja al pie de la sección para no taparle la tarjeta de correo. */


/* ============================================================
   Certificaciones: los reconocimientos, sin la composición de
   las dos bananas que dejaba costuras y se comía la página.
   ============================================================ */
.laureles-banda {
  padding: 46px 34px 40px;
  margin-bottom: 58px;
  border-radius: 24px;
  background: var(--sky-blue);
  text-align: center;
}
.laureles-banda .cert-titulo { color: var(--negro); }
.laureles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 22px;
  place-items: center;
}
.laureles img { width: 100%; max-width: 208px; height: auto; }

.cert-mas { text-align: center; margin-bottom: 54px; }
.cert-mas .cert-titulo { color: var(--negro); opacity: 0.75; }

@media (max-width: 900px) { .laureles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .laureles { grid-template-columns: 1fr; } }

/* Sostenibilidad cierra con la fila de certificaciones pegada al borde:
   se le da aire extra abajo para que Nano tenga su banda libre. */
#sostenibilidad { padding-bottom: clamp(160px, 13vw, 210px); }