/* Cañada Húmeda — hoja de estilos compartida por index, liderazgo y compromiso.
   Vivia inline en index.html; se saco afuera para que las paginas nuevas usen
   exactamente los mismos tokens y componentes, sin copiar y pegar. */
/* ============ DESIGN SYSTEM ============ */
:root{
  /* Paleta del restyling de Eze (PDF "Propuesta restyling", 2026-08).
     Los cinco valores de marca salieron muestreados del propio PDF; el resto
     son pasos interpolados para mantener la escala que ya usaba el sitio.
     El logo NO se toca hasta que Berni lo apruebe. */
  --green-900:#171F1C; --green-800:#28443B; --green-700:#3A5F4F; --green-600:#4C7C63;
  --green-500:#628F78; --gold-600:#3C6274; --gold-500:#7FB0C2; --gold-400:#A6CFDD;
  --mint:#A7D8BD;
  --cream:#FFFFFF; --cream-100:#E8E9E2; --sage:#D7E5DC; --ink:#171F1C; --muted:#5A6660; --clay:#B5532E;
  --line:#DCDDD5; --white:#fff;
  --font-display:'Zalando Sans Expanded',system-ui,sans-serif; --font-sans:'Zalando Sans',system-ui,sans-serif;
  --maxw:1180px; --radius:18px; --radius-sm:12px;
  --shadow-sm:0 1px 3px rgba(16,48,28,.06),0 6px 18px rgba(16,48,28,.05);
  --shadow-md:0 8px 24px rgba(16,48,28,.10),0 24px 48px rgba(16,48,28,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
section{scroll-margin-top:66px}
/* Orden de secciones (embudo de venta): Hero -> Unidades -> Productos -> Clasificacion -> Historia -> Reconocimientos+Logos -> Instagram -> Contacto */
main{display:flex;flex-direction:column}
/* Transicion suave al cambiar de idioma */
html.lang-swap [data-i18n],html.lang-swap [data-i18n-html]{animation:langswap .52s cubic-bezier(.4,0,.2,1) both}
@keyframes langswap{from{opacity:0;filter:blur(5px);translate:0 6px}to{opacity:1;filter:blur(0);translate:0 0}}
@media(prefers-reduced-motion:reduce){html.lang-swap [data-i18n],html.lang-swap [data-i18n-html]{animation:none}}
.hero{order:1}.trust{order:2}#grupo{order:3}#productos{order:4}#servicios{order:5}#nosotros{order:6}#trayectoria{order:7}#novedades{order:8}#contacto{order:9}
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--green-900)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* En pantallas grandes el contenido crece en vez de dejar 300px muertos a cada
   lado. Arranca en 1180 a los 1300px de ancho, asi abajo de eso nada cambia.
   La prosa no se estira: cada bloque de texto tiene su propio tope en ch. */
@media(min-width:1300px){:root{--maxw:clamp(1180px,88vw,1560px)}}
.eyebrow{font-family:var(--font-sans);font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-600);display:inline-block}
.lead{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:60ch;text-wrap:pretty}
p{text-wrap:pretty}
.feat-text p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* El texto justificado necesita ancho: en columnas angostas (mobile) se vuelve desprolijo, asi que pasa a alineado a la izquierda */
@media(max-width:640px){.feat-text p,.historia .hist-text .hist-body p{text-align:left;hyphens:manual;-webkit-hyphens:manual}}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:12px;font-weight:600;font-size:15px;letter-spacing:.005em;cursor:pointer;border:none;transition:all .22s var(--ease);min-height:48px}
.btn svg{width:18px;height:18px;transition:transform .22s var(--ease)}
.btn-primary{background:var(--green-800);color:#fff;box-shadow:0 6px 18px rgba(25,72,43,.28)}
.btn-primary:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:0 10px 26px rgba(25,72,43,.34)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-gold{background:var(--gold-400);color:var(--green-900)}
.btn-gold:hover{background:var(--gold-400);transform:translateY(-3px);box-shadow:0 12px 28px rgba(62,143,176,.42)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.24);border-color:#fff;transform:translateY(-3px)}
.btn-gold:hover svg,.btn-ghost:hover svg{transform:translateX(4px)}
.btn-outline{background:transparent;color:var(--green-800);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--green-600);color:var(--green-700);transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--gold-500);outline-offset:3px;border-radius:6px}

/* ============ TOP BAR ============ */
.topbar{background:var(--green-900);color:rgba(255,255,255,.82);font-size:13px;position:relative;z-index:101}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:18px}
.topbar a{color:rgba(255,255,255,.82);transition:color .2s}
.topbar a:hover{color:var(--gold-400)}
.topbar .tb-left{display:flex;align-items:center;gap:8px;min-width:0}
.topbar .tb-left svg{width:14px;height:14px;color:var(--gold-400);flex-shrink:0}
.topbar .tb-left span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .tb-right{display:flex;align-items:center;gap:18px}
.topbar .tb-right .sep{width:1px;height:14px;background:rgba(255,255,255,.2)}
.lang{display:flex;gap:2px;align-items:center}
.langbtn{background:none;border:none;color:rgba(255,255,255,.7);font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.04em;cursor:pointer;padding:4px 7px;border-radius:6px;line-height:1;transition:color .2s,background .2s,transform .18s var(--ease);min-height:auto}
.langbtn:hover{color:#fff;background:rgba(255,255,255,.12)}
.langbtn:active{transform:scale(.85)}
.langbtn.on{color:var(--green-900);background:var(--gold-400);animation:langPop .32s var(--ease)}
@keyframes langPop{0%{transform:scale(.82)}55%{transform:scale(1.13)}100%{transform:scale(1)}}
.tb-social{display:flex;gap:5px}
.tb-social a{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;border-radius:6px;color:rgba(255,255,255,.7);transition:color .2s,background .2s}
.tb-social a:hover{color:var(--green-900);background:var(--gold-400)}
.tb-social a svg{width:14px;height:14px}
@media(max-width:760px){.topbar .tb-left span{display:none}.topbar .tb-right .hide-sm{display:none}.topbar .wrap{height:48px}.lang{gap:6px}.langbtn{font-size:13px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center}}

/* ============ HEADER / NAV ============ */
header.nav{position:sticky;top:0;z-index:100;background:transparent;border-bottom:1px solid var(--line);box-shadow:0 1px 0 var(--line),0 6px 22px rgba(16,48,28,.06);transition:box-shadow .35s var(--ease),border-color .35s var(--ease),padding .3s var(--ease)}
/* glass en un ::before para NO crear containing-block del menu fijo (position:fixed) */
header.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);transition:background .35s var(--ease)}
header.nav.scrolled::before{background:rgba(255,255,255,.82)}
header.nav.scrolled{border-bottom-color:var(--line);box-shadow:0 1px 0 var(--line),0 10px 30px rgba(16,48,28,.10)}
body.menu-open header.nav{z-index:210;position:fixed;top:0;left:0;right:0}
body.menu-open .brand{position:relative;z-index:221}
body.menu-open .brand .bt b{color:#fff}
body.menu-open .brand .bt small{color:var(--gold-400)}
body.menu-open .brand .mark img{filter:brightness(0) invert(1)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;transition:height .3s var(--ease)}
header.nav.scrolled .wrap{height:64px}
.brand{display:flex;align-items:center;gap:12px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
/* Mientras el nombre grande manda en el hero, el nav va sin marca.
   Al scrollear, el nombre del hero se va y la marca sube a ocupar su lugar. */
body.hero-top .brand{opacity:0;transform:translateY(15px);pointer-events:none}
/* En telefono la barra queda vacia si escondemos la marca: el relevo con el
   nombre del hero solo tiene sentido en escritorio, donde hay lugar para los dos. */
@media(max-width:1024px){body.hero-top .brand{opacity:1;transform:none;pointer-events:auto}}
body.menu-open .brand{opacity:1;transform:none;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.brand{transition:none}
  body.hero-top .brand{opacity:1;transform:none;pointer-events:auto}}
.brand .mark{width:46px;height:46px;flex-shrink:0;transition:width .3s var(--ease),height .3s var(--ease)}
header.nav.scrolled .brand .mark{width:40px;height:40px}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand .bt{display:flex;flex-direction:column;line-height:1}
.brand .bt b{font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--green-900);letter-spacing:-.01em;white-space:nowrap}
.brand .bt small{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);font-weight:700;margin-top:3px}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks>a{white-space:nowrap}
/* Con Liderazgo y Nuestro compromiso el menu tiene 7 entradas: entre 1024 y 1400
   se aprieta un poco para no partirse en dos lineas. */
@media(min-width:1025px) and (max-width:1460px){
  .navlinks{gap:clamp(11px,1.25vw,20px)}
  .navlinks a{font-size:clamp(12.8px,1vw,14.5px)}
  .nav-cta{margin-left:20px}
  .nav-cta .btn{padding:11px 16px;font-size:13.5px}
  .brand .bt b{font-size:17px}
  .brand .mark{width:40px;height:40px}
}
.nav-extra{display:none}
.navlinks a{font-size:16px;font-weight:500;color:var(--ink);position:relative;padding:6px 0;transition:color .22s var(--ease),transform .22s var(--ease)}
.navlinks a::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:2px;border-radius:2px;background:var(--gold-500);transform:translateX(-50%);transition:width .28s var(--ease)}
.navlinks a:hover{color:var(--green-700);transform:translateY(-1px)}.navlinks a:hover::after{width:100%}
.navlinks a.active{color:var(--green-700)}.navlinks a.active::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:14px}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;min-width:44px;min-height:44px}
.burger span{width:24px;height:2px;background:var(--green-900);border-radius:2px;transition:.3s}
@media(max-width:1024px){
  /* Menu mobile: panel desplegable compacto (no full-screen) */
  .navlinks{position:fixed;top:0;left:0;right:0;height:auto;max-height:100dvh;overflow-y:auto;background:linear-gradient(180deg,var(--green-900),#0c2416);border-radius:0 0 26px 26px;box-shadow:0 30px 60px -18px rgba(0,0,0,.5);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:88px 26px 26px;opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s var(--ease);z-index:200}
  .navlinks::before{content:"";position:fixed;inset:0;background:rgba(16,48,28,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility .32s var(--ease);z-index:-1}
  .navlinks.open::before{opacity:1;visibility:visible}
  .navlinks.open{opacity:1;visibility:visible;transform:translateY(0)}
  .navlinks>a{color:#fff !important;font-family:var(--font-display);font-size:22px;font-weight:600;line-height:1.15;letter-spacing:-.01em;padding:14px 4px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.09);opacity:0;transform:translateY(10px);transition:transform .4s var(--ease),opacity .4s var(--ease),color .2s var(--ease),padding-left .2s var(--ease)}
  /* En el cajon el ::after es la flechita del final de fila, NO el subrayado de escritorio:
     hay que anular la posicion absoluta, el fondo y el radio que trae aquel estilo, si no
     queda un rombo relleno flotando en el medio del menu. */
  .navlinks>a::after,.navlinks>a.active::after,.navlinks>a:hover::after{content:"";position:static;display:block;
    width:8px;height:8px;background:none;border-radius:0;
    border-right:2px solid var(--gold-400);border-top:2px solid var(--gold-400);
    transform:rotate(45deg);flex:none;margin-right:5px;transition:opacity .22s var(--ease)}
  .navlinks>a::after{opacity:.45}
  .navlinks>a.active::after,.navlinks>a:hover::after{opacity:1}
  .navlinks>a.active{color:var(--gold-400) !important}
  .navlinks.open>a{opacity:1;transform:translateY(0)}
  .navlinks.open>a:nth-child(1){transition-delay:.06s}
  .navlinks.open>a:nth-child(2){transition-delay:.11s}
  .navlinks.open>a:nth-child(3){transition-delay:.16s}
  .navlinks.open>a:nth-child(4){transition-delay:.21s}
  .navlinks.open>a:nth-child(5){transition-delay:.26s}
  .navlinks>a:last-of-type{border-bottom:none}
  .navlinks>a:active{color:var(--gold-400);padding-left:12px}
  .burger{display:flex;z-index:221}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:#fff}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:#fff}
  .nav-cta .btn:not(.burger){display:none}
  .nav-extra{display:flex;flex-wrap:wrap;align-items:center;gap:13px;width:100%;margin-top:22px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease) .3s,transform .4s var(--ease) .3s}
  .navlinks.open .nav-extra{opacity:1;transform:translateY(0)}
  /* ".navlinks a" (0-1-1) le ganaba a ".nav-extra-cta" y lo dejaba sin padding lateral. */
  .navlinks .nav-extra-cta{font-size:15px;padding:12px 24px;margin-right:auto}
  .nav-extra-row{display:flex;align-items:center;gap:12px}
  .navlinks .nav-extra-ig{color:#fff;opacity:.9;display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.28);border-radius:10px;background:rgba(255,255,255,.04);transition:background .2s,opacity .2s}
  .navlinks .nav-extra-ig:hover{opacity:1;background:rgba(255,255,255,.1)}
  .nav-extra-ig svg{width:20px;height:20px}
  .nav-extra-langs{display:flex;gap:6px}
  .nav-extra .langbtn{color:rgba(255,255,255,.72);background:none;border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:0 12px;min-height:38px;font-size:13px;font-weight:700;letter-spacing:.04em;display:inline-flex;align-items:center}
  .nav-extra .langbtn.on{color:var(--green-900);background:var(--gold-400);border-color:var(--gold-400)}
  .nav-extra-loc{width:100%;color:rgba(255,255,255,.5);font-size:12.5px;letter-spacing:.03em;margin:0}
}


/* ===== FRANJA DE DATOS (los numeros salen del hero) ===== */
/* Franja de datos dentro del hero: se apoya sobre el video con su propio velo.
   Al scrollear baja mientras el nombre sube; los dos se apartan y dejan el video solo. */
.hero-facts{position:relative;z-index:2;flex:none;
  background:linear-gradient(to top,rgba(9,26,16,.9) 0%,rgba(9,26,16,.74) 44%,rgba(9,26,16,.3) 78%,rgba(9,26,16,0) 100%);
  padding:clamp(17px,2.1vw,25px) 0 clamp(14px,1.7vw,20px);
  transform:translateY(calc(var(--hero-p,0)*42px));opacity:calc(1 - var(--hero-p,0)*1.5);
  will-change:transform,opacity}
.hero-facts>.wrap{max-width:none;width:100%;margin:0;padding-left:clamp(20px,4vw,64px);padding-right:clamp(20px,4vw,64px)}
/* Numeros arriba, etiqueta abajo, separados por filetes: el numero es el que manda. */
.facts-stats{display:flex;flex-wrap:wrap;row-gap:20px}
.facts-stats .hs{position:relative;flex:1 1 0;min-width:132px;padding:0 clamp(20px,2.8vw,44px)}
.facts-stats .hs::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:68%;width:1px;background:rgba(255,255,255,.2)}
.facts-stats .hs:first-child{padding-left:0}
.facts-stats .hs:first-child::before{display:none}
.facts-stats .hs b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(23px,2.4vw,30px);line-height:1;color:#fff;letter-spacing:-.025em;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1}
.facts-stats .hs>span{display:block;font-size:11.5px;color:rgba(255,255,255,.68);line-height:1.32;margin-top:7px;max-width:15ch}
/* "Exportamos a" cierra la franja como pie, con un filete que la une a los numeros. */
.facts-mkts{display:flex;align-items:center;gap:10px clamp(15px,1.9vw,22px);flex-wrap:wrap;
  margin-top:clamp(18px,2.2vw,25px);padding-top:clamp(15px,1.9vw,20px);border-top:1px solid rgba(255,255,255,.13)}
.facts-mkts-lbl{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-400)}
.hero-facts .hero-markets{display:flex;gap:12px clamp(16px,2vw,22px);flex-wrap:wrap;margin:0}
.hero-facts .hero-markets span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgba(255,255,255,.82)}
.hero-facts .hero-markets img{border-radius:2px}
/* En telefono la franja se compacta para no comerse el video: 2x2 y tipos mas chicas. */
@media(max-width:760px){.hero-facts{padding:15px 0 17px}
  .hero-facts>.wrap{padding-left:24px;padding-right:24px}
  .facts-stats{row-gap:15px}
  .facts-stats .hs{flex:1 1 42%;min-width:0;padding:0 0 0 clamp(14px,3.6vw,22px)}
  .facts-stats .hs:nth-child(odd){padding-left:0}
  .facts-stats .hs:nth-child(odd)::before{display:none}
  .facts-stats .hs b{font-size:clamp(26px,7vw,32px)}
  .facts-stats .hs>span{font-size:11.5px;margin-top:5px;line-height:1.3;max-width:17ch}
  .facts-mkts{margin-top:15px;padding-top:13px;gap:7px 13px}
  .facts-mkts-lbl{font-size:10.5px;letter-spacing:.11em}
  .hero-facts .hero-markets{gap:6px 13px}
  .hero-facts .hero-markets span{font-size:11.5px;gap:6px}
  .hero-facts .hero-markets img{width:17px}
  /* la flecha de bajar cae justo sobre el final de esta linea: le dejamos lugar */
  .hero-sub{font-size:12.5px;gap:9px;padding-right:58px}
  .hero-sub::before{width:20px}
  .hero-scroll{top:-34px}.hero-scroll svg{width:26px;height:26px}}


/* ===== Parallax suave + scrollytelling (solo mueve imagenes, nunca texto) ===== */
.px{--px:0}
.px img{transform:translate3d(0,calc(var(--px) * -22px),0) scale(1.1);will-change:transform}
.hist-media.px .hist-photo{transform:translate3d(0,calc(var(--px) * -22px),0) scale(1.1)}
.hist-media.px .hist-photo.is-on{transform:translate3d(0,calc(var(--px) * -22px),0) scale(1.1)}
/* indicador de linea de tiempo de la seccion Nosotros */
.hist-track{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:7px}
.hist-track i{width:3px;height:16px;border-radius:100px;background:rgba(255,255,255,.32);transition:background .45s var(--ease),height .45s var(--ease)}
.hist-track i.on{background:#fff;height:26px}
@media(prefers-reduced-motion:reduce){
  .px img,.hist-media.px .hist-photo,.hist-media.px .hist-photo.is-on{transform:none!important}
  .hist-track i{transition:none}
}
@media(max-width:1024px){.hist-track{display:none}}


/* ===== PLANTA DE SELECCION: la foto es el fondo (no otro bloque foto+texto) ===== */
.plantx{position:relative;overflow:hidden;isolation:isolate;color:#fff;
  min-height:clamp(460px,62vw,620px);display:flex;align-items:center;
  padding:clamp(56px,7vw,96px) 0}
.plantx-bg{position:absolute;inset:-8% 0;z-index:-2}
.plantx-bg img{width:100%;height:100%;object-fit:cover;
  transform:translate3d(0,calc(var(--px,0) * -30px),0) scale(1.06);will-change:transform}
.plantx::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(9,26,16,.93) 0%,rgba(9,26,16,.78) 42%,rgba(9,26,16,.28) 78%,rgba(9,26,16,.12) 100%)}
.plantx-inner{max-width:620px}
/* Boton para ver el institucional: el video lleva voz en off, va con sonido */
.plantx-play{display:inline-flex;align-items:center;gap:13px;margin-top:clamp(24px,3vw,34px);
  padding:13px 26px 13px 15px;border-radius:100px;cursor:pointer;font:inherit;font-size:15px;font-weight:600;
  color:var(--green-900);background:var(--gold-400);border:none;
  transition:background .25s var(--ease),transform .25s var(--ease),gap .25s var(--ease)}
.plantx-play:hover{background:#BFDCE7;gap:16px;transform:translateY(-2px)}
.plantx-play i{width:30px;height:30px;border-radius:50%;background:var(--green-900);color:var(--gold-400);
  display:grid;place-items:center;flex:none}
.plantx-play i svg{width:12px;height:12px;margin-left:2px}
#instModal .vidm-inner video{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:#08180f;
  border-radius:16px;border:1px solid rgba(255,255,255,.11);margin-top:clamp(18px,2.4vw,26px)}
.plantx .svc-brand{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-400);margin-bottom:15px}
.plantx h3{font-family:var(--font-display);font-size:clamp(27px,3.6vw,42px);line-height:1.07;letter-spacing:-.022em;
  color:#fff;margin:0 0 18px;text-wrap:balance;text-shadow:0 2px 24px rgba(9,26,16,.5)}
.plantx p{color:rgba(255,255,255,.84);font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.68;margin:0;max-width:56ch}
@media(prefers-reduced-motion:reduce){.plantx-bg img{transform:none}}
@media(max-width:760px){.plantx{min-height:0}.plantx::after{background:linear-gradient(180deg,rgba(9,26,16,.82),rgba(9,26,16,.92))}}

/* ============ HERO ============ */
.hero{position:relative;min-height:min(100svh,1000px);display:flex;flex-direction:column;color:#fff;overflow:hidden;margin-top:-112px;padding-top:112px}
.hero-bg{position:absolute;inset:0;z-index:-2;background:var(--green-900)}
.hero-bg video,.hero-bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
/* Velo solo en la franja de abajo, donde vive el nombre: los 2/5 superiores del
   video quedan limpios y nitidos. */
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background:
  linear-gradient(to top,rgba(9,26,16,.62) 0%,rgba(9,26,16,.26) 17%,rgba(9,26,16,.05) 34%,transparent 50%),
  linear-gradient(to bottom,rgba(9,26,16,.42) 0%,rgba(9,26,16,.16) 11%,transparent 24%),
  radial-gradient(56% 40% at 17% 88%,rgba(9,26,16,.34) 0%,transparent 72%)}
/* Slideshow Ken Burns (fotos reales de caña/campo) */
.hero-slides{position:absolute;inset:0;height:120%;will-change:transform}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.14) translate(-1.7%,-1.3%);transition:opacity 2.4s cubic-bezier(.4,0,.2,1),transform 2.4s cubic-bezier(.4,0,.2,1);will-change:opacity,transform}
.hero-slide:nth-child(even){transform:scale(1.14) translate(1.7%,-1%)}
.hero-slide.is-active{opacity:1;z-index:1;animation:kenburns 9s ease-out forwards}
.hero-slide:nth-child(even).is-active{animation-name:kenburns-alt}
@keyframes kenburns{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(-1.7%,-1.3%)}}
@keyframes kenburns-alt{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(1.7%,-1%)}}
/* Hook de video opcional (caña): se monta sobre el slideshow si data-vsrc tiene archivo */
.hero-video{position:absolute;inset:0;width:100%;height:120%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease);will-change:transform}
.hero-video.is-on{opacity:1}
.hero>.wrap{max-width:none;width:100%;margin:0;padding-left:clamp(20px,4vw,64px);padding-right:24px;flex:1 1 auto;display:flex;align-items:flex-end}
/* Franja de marca arriba del hero: acompaña al video mientras el nav todavia no muestra el logo */
.hero>.wrap.hero-brandbar{flex:none;align-items:center;padding-top:clamp(10px,1.8vh,22px);
  transform:translateY(calc(var(--hero-p,0)*-26px));opacity:calc(1 - var(--hero-p,0)*1.6);will-change:transform,opacity}
.hero-inner{padding:24px 0 clamp(10px,1.4vh,18px);text-shadow:0 1px 14px rgba(9,26,16,.5);transform:translateY(calc(var(--hero-p,0)*-40px));opacity:calc(1 - var(--hero-p,0)*1.25);will-change:transform,opacity}
/* La marca es la protagonista: el nombre grande sobre el video, sin mas texto.
   Al scrollear se achica y sube, y la marca del nav aparece en su lugar. */
.hero-lockup{display:flex;align-items:center;gap:clamp(13px,1.7vw,22px)}
/* El isotipo acompaña al nombre y, al scrollear, se achica y sube: es el mismo
   que despues aparece en el nav, asi el relevo se lee como un solo movimiento. */
.hero-mark{width:clamp(38px,4.2vw,56px);height:clamp(38px,4.2vw,56px);flex:none;
  filter:drop-shadow(0 2px 5px rgba(9,26,16,.7)) drop-shadow(0 6px 28px rgba(9,26,16,.6));
  transform:translateY(calc(var(--hero-p,0)*-22px)) scale(calc(1 - var(--hero-p,0)*.24));
  transform-origin:left center;will-change:transform}
.hero-mark img{width:100%;height:100%;object-fit:contain;display:block}
/* El nombre de la marca acompaña al isotipo arriba: es firma, no titulo */
.hero-name{color:#fff;font-family:var(--font-display);font-size:clamp(21px,2.7vw,34px);font-weight:600;line-height:1;letter-spacing:-.02em;
  text-shadow:0 1px 2px rgba(9,26,16,.7),0 2px 12px rgba(9,26,16,.6),0 4px 34px rgba(9,26,16,.55);
  transform:scale(calc(1 - var(--hero-p,0)*.14));transform-origin:left center;will-change:transform}
/* El titulo es la promesa, no el nombre */
.hero-word{color:#fff;font-family:var(--font-display);font-size:clamp(30px,5vw,60px);font-weight:600;line-height:1.03;letter-spacing:-.028em;margin:0;text-wrap:balance;
  text-shadow:0 1px 2px rgba(9,26,16,.62),0 2px 10px rgba(9,26,16,.5),0 4px 40px rgba(9,26,16,.6);
  transform:scale(calc(1 - var(--hero-p,0)*.09));transform-origin:left bottom;will-change:transform}
.hero-sub{margin:clamp(11px,1.4vh,16px) 0 0;font-size:clamp(12.5px,1.3vw,15px);font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.94);display:flex;align-items:center;gap:12px;text-shadow:0 1px 3px rgba(9,26,16,.75),0 2px 14px rgba(9,26,16,.7)}
.hero-sub::before{content:"";width:30px;height:1.5px;background:var(--gold-400);flex:none}
@keyframes heroEntra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero-lockup{animation:heroEntra .85s var(--ease) both}
.hero-sub{animation:heroEntra .85s var(--ease) .13s both}
.hero-facts>.wrap{animation:heroEntra .9s var(--ease) .3s both}
@media(prefers-reduced-motion:reduce){.hero-inner,.hero-word{transform:none;opacity:1}
  .hero-lockup,.hero-sub,.hero-facts>.wrap{animation:none}}
.hero-markets{display:flex;flex-wrap:wrap;gap:14px 18px;margin-top:18px}
.hero-markets span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82)}
.hero-markets img{width:22px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25);flex:none}
.hero-stats{margin-top:26px;display:flex;flex-wrap:wrap;gap:16px 0}
.hero-stats .hs{position:relative;padding:0 clamp(20px,2.4vw,34px)}
.hero-stats .hs::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:82%;width:1px;background:rgba(255,255,255,.78);box-shadow:0 0 4px rgba(0,0,0,.4)}
.hero-stats .hs:first-child{padding-left:0}
.hero-stats .hs:first-child::before{display:none}
.hero-stats .hs b{display:block;font-family:'Playfair Display',Georgia,serif;font-size:clamp(30px,3.2vw,42px);font-weight:800;color:#fff;line-height:.95;letter-spacing:0;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;text-shadow:0 2px 16px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.4)}
.hero-stats .hs > span{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.86);margin-top:6px;line-height:1.25;max-width:16ch;text-shadow:0 1px 8px rgba(0,0,0,.55)}
@media(max-width:600px){.hero-stats{gap:20px 0}.hero-stats .hs{width:50%;padding:0 14px;box-sizing:border-box}.hero-stats .hs:nth-child(odd){padding-left:0}.hero-stats .hs:nth-child(odd)::before{display:none}.hero-stats .hs b{font-size:clamp(34px,9vw,44px)}}
/* Hint animado: invita a hacer scroll; se desvanece al bajar */
/* Fuera del velo queda sobre el video claro, asi que lleva su propio fondo. */
.hero-scroll{position:absolute;left:auto;right:clamp(20px,4vw,64px);top:calc(-1 * clamp(40px,4.6vw,54px));z-index:4;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(9,26,16,.45);border:1px solid rgba(255,255,255,.28);color:#fff;
  transition:opacity .5s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.hero-scroll:hover{background:rgba(9,26,16,.72);transform:translateY(2px)}
.hero-scroll svg{width:22px;height:22px}
.hero-scroll svg{width:30px;height:30px;display:block;animation:heroScrollBounce 1.8s var(--ease) infinite}
@keyframes heroScrollBounce{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
body.scrolled .hero-scroll{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.hero-scroll svg{animation:none}}

/* ============ MARQUEE / TRUST ============ */
.trust{background:var(--green-900);color:rgba(255,255,255,.6);padding:18px 0;overflow:hidden}
.trust .track{display:flex;gap:54px;align-items:center;white-space:nowrap;animation:marq 26s linear infinite;font-family:var(--font-display);font-size:17px;font-style:italic;color:rgba(255,255,255,.5)}
.trust .track span{display:inline-flex;align-items:center;gap:54px}
.trust .track .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-500)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ SECTION SHARED ============ */
.section{padding:clamp(26px,3vh,54px) 0}
.sec-head{max-width:680px;margin-bottom:clamp(18px,2.4vh,30px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);margin:10px 0 14px;text-wrap:balance}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .eyebrow::before{display:none}

/* ============ NOSOTROS ============ */
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.about-media{position:relative}
.about-media .ph{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/4.6}
.about-media .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.about-media:hover .ph img{transform:scale(1.05)}
.about-media .badge{position:absolute;bottom:-24px;left:-24px;background:var(--green-800);color:#fff;padding:22px 26px;border-radius:16px;box-shadow:var(--shadow-md)}
.about-media .badge b{font-family:var(--font-display);font-size:42px;line-height:1;display:block;color:var(--gold-400)}
.about-media .badge span{font-size:12.5px;color:rgba(255,255,255,.8);letter-spacing:.04em}
.about h2{font-size:clamp(28px,3.8vw,44px);margin:16px 0 20px}
.about-lead{max-width:760px;margin:0 auto;text-align:center}
.about-lead h2{font-size:clamp(30px,4vw,46px);margin:0 0 20px}
.about-lead .lead{margin:0 auto}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:clamp(44px,5vw,60px)}
.value{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:16px;background:var(--white);border:1px solid var(--line);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.value:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.value .ic{width:52px;height:52px;border-radius:14px;background:var(--sage);display:grid;place-items:center;flex-shrink:0}
.value .ic svg{width:25px;height:25px;color:var(--green-700)}
.value b{font-size:17px;color:var(--green-900);font-weight:600;display:block}
.value p{font-size:14.5px;color:var(--muted);margin-top:6px;line-height:1.55}
@media(max-width:760px){.values{grid-template-columns:1fr;gap:18px}}

/* ============ EL GRUPO (sub-brands) ============ */
.grupo{background:var(--green-900);color:#fff;position:relative;overflow:hidden}
.grupo-bg{position:absolute;inset:0;z-index:0}
.grupo-bg img{width:100%;height:100%;object-fit:cover}
.grupo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(16,48,28,.97) 0%,rgba(16,48,28,.88) 45%,rgba(16,48,28,.72) 100%)}
.grupo>.wrap{position:relative;z-index:1}
.grupo .eyebrow{color:var(--gold-400)}
.grupo h2{color:#fff;text-wrap:balance;font-size:clamp(30px,4vw,52px);line-height:1.02;letter-spacing:-.03em;margin:0}
.grupo .lead{color:rgba(255,255,255,.84);font-size:clamp(16.5px,1.55vw,19px);line-height:1.62;max-width:62ch;
  margin:clamp(16px,1.8vw,22px) 0 0;text-wrap:pretty}
.grupo .sec-head{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(26px,3.4vh,40px)}
.grupo .sec-head .lead{margin-top:0;padding-bottom:6px}
@media(max-width:860px){.grupo .sec-head{grid-template-columns:1fr;gap:14px;align-items:start}
  .grupo .sec-head .lead{padding-bottom:0}}
/* El Grupo — tarjetas lideradas por fotografía (editorial, asimétrico) */
.grid-brands{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.bcard{grid-column:span 4;position:relative;height:clamp(240px,31vh,340px);display:flex;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.24);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.bcard.feat{grid-column:span 6}
.bcard.c3{grid-column:span 3}
.bcard:hover{transform:translateY(-8px);box-shadow:0 26px 56px rgba(0,0,0,.36)}
.grid-brands .bcard{transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .7s var(--ease)}
.grid-brands .bcard:nth-child(2){transition-delay:.09s}
.grid-brands .bcard:nth-child(3){transition-delay:.18s}
.grid-brands .bcard:nth-child(4){transition-delay:.27s}
.grid-brands .bcard:hover{transition-delay:0s}
.bphoto{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 68%;opacity:0;transition:opacity 1.3s var(--ease),transform .9s var(--ease)}
.bphoto.is-on{opacity:1}
.bcard:hover .bphoto.is-on{transform:scale(1.07)}
/* SALBRAS: el camion se ve en video, con zoom. La foto queda debajo por si el video no carga. */
.bvideo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;transition:transform .9s var(--ease)}
.bcard:hover .bvideo{transform:scale(1.06)}
.bcard::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(16,48,28,0) 0%,rgba(16,48,28,.18) 32%,rgba(16,48,28,.92) 100%);transition:background .45s var(--ease)}
.bcard:hover::after{background:linear-gradient(180deg,rgba(16,48,28,0) 0%,rgba(16,48,28,0) 32%,rgba(16,48,28,.78) 100%)}
.bcontent{position:relative;z-index:2;margin-top:auto;padding:16px 20px 18px;color:#fff;width:100%}
.bcontent::before{content:"";display:block;width:26px;height:2px;background:var(--gold-400);border-radius:2px;margin-bottom:14px;transition:width .35s var(--ease)}
.bcard:hover .bcontent::before{width:48px}
.bcard .tag{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-bottom:9px;display:inline-block;background:rgba(11,33,21,.62);padding:4px 10px;border-radius:6px}
.bcard h3{color:#fff;font-size:20px;line-height:1.1;margin-bottom:7px;text-wrap:balance}
.bcard.feat h3{font-size:clamp(20px,2vw,26px)}
.bcard p{font-size:14px;color:rgba(255,255,255,.88);line-height:1.5;max-width:42ch;min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard .new{position:absolute;top:16px;right:16px;z-index:3;background:var(--clay);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.07em;padding:5px 12px;border-radius:100px;text-transform:uppercase}
@media(max-width:900px){.grid-brands{grid-template-columns:repeat(6,1fr)}.bcard,.bcard.feat,.bcard.c3{grid-column:span 3}}
@media(max-width:560px){.grid-brands{grid-template-columns:1fr}.bcard,.bcard.feat,.bcard.c3{grid-column:auto;height:auto;min-height:250px}}

/* ============ PRODUCTOS (real photos) ============ */
/* Grid editorial asimétrico (12 columnas) */
.grid-products{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;align-items:start}
.prodcard{grid-column:span 3;position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.prodcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.prodcard.feat{grid-column:span 6}
.prodcard.wide{grid-column:span 12}
.prodcard .im{position:relative;height:clamp(165px,21vh,220px);overflow:hidden}
.prodcard.feat .im{height:clamp(190px,25vh,250px)}
.prodcard.wide .im{height:clamp(200px,27vh,270px)}
.prodcard .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),opacity .55s var(--ease)}
.prodcard .im img.alt{opacity:0}
.prodcard:hover .im img{transform:scale(1.06)}
.prodcard:hover .im img.alt{opacity:1}
.prodcard .im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,48,28,0) 38%,rgba(16,48,28,.82));opacity:.92;transition:opacity .35s var(--ease)}
.prodcard:hover .im::after{opacity:1}
.prodcard .cat{position:absolute;top:12px;left:12px;z-index:2;background:var(--green-900);color:#fff;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;font-weight:700}
.prodcard .po{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 18px 16px;color:#fff}
.prodcard .po h3{color:#fff;font-size:19px;line-height:1.12}
.prodcard.feat .po h3,.prodcard.wide .po h3{font-size:clamp(22px,2.4vw,28px)}
.prodcard .po .fact{display:flex;align-items:center;gap:8px;font-size:12.5px;color:rgba(255,255,255,.88);margin-top:7px;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.prodcard:hover .po .fact{opacity:1;transform:none}
.prodcard .po .fact::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--gold-400);flex:none}
@media(max-width:900px){
  .grid-products{grid-template-columns:repeat(6,1fr)}
  .prodcard{grid-column:span 3}
  .prodcard.feat,.prodcard.wide{grid-column:span 6}
}
@media(max-width:560px){
  .grid-products{grid-template-columns:1fr;gap:14px}
  .prodcard,.prodcard.feat,.prodcard.wide{grid-column:auto}
  .prodcard .im,.prodcard.feat .im,.prodcard.wide .im{height:230px}
  .prodcard .po .fact{opacity:1;transform:none}
}

/* ============ SERVICIOS (feature rows) ============ */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center;margin-bottom:84px}
.feature:last-child{margin-bottom:0}
.feature.rev .feat-media{order:2}
.feat-media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/3.1}
.feat-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.feat-media:hover img{transform:scale(1.06)}
.feat-media .float{position:absolute;top:18px;left:18px;background:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:11px;max-width:80%}
.feat-media .float svg{width:24px;height:24px;color:var(--green-700);flex-shrink:0}
.feat-media .float b{font-family:var(--font-display);font-size:17px;color:var(--green-900);line-height:1.1;display:block}
.feat-media .float span{font-size:11.5px;color:var(--muted)}
.feat-text .svc-brand{display:block;font-family:var(--font-sans);font-size:13px;font-weight:700;color:var(--green-600);margin-bottom:4px}
.feat-text h3{font-size:clamp(26px,3.4vw,38px);margin:6px 0 16px;text-wrap:balance}
.feat-bullets{list-style:none;margin:22px 0 0;display:flex;flex-direction:column;gap:13px}
.feat-bullets li{position:relative;padding-left:24px;font-size:15px;color:var(--ink);line-height:1.5}
.feat-bullets li svg{display:none}
.feat-bullets li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:2px;border-radius:2px;background:var(--gold-500)}
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.mini-stats .ms{padding:16px 0;border-top:2px solid var(--line)}
.mini-stats .ms b{font-family:var(--font-display);font-size:30px;color:var(--green-800);display:block;line-height:1}
.mini-stats .ms span{font-size:12.5px;color:var(--muted)}
@media(max-width:860px){
  .feature{grid-template-columns:1fr;gap:32px;margin-bottom:60px}
  .feature.rev .feat-media{order:0}
  .feat-media{aspect-ratio:16/10}
}

/* ============ SUSTENTABILIDAD (band) ============ */
.sustain{position:relative;color:#fff;overflow:hidden}
.sustain-bg{position:absolute;inset:0;z-index:-2}
.sustain-bg img{width:100%;height:100%;object-fit:cover}
.sustain-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(16,48,28,.94),rgba(16,48,28,.62))}
.sustain .eyebrow{color:var(--gold-400)}.sustain .eyebrow::before{background:var(--gold-400)}
.sustain h2{color:#fff;max-width:16ch}
.sustain .lead{color:rgba(255,255,255,.82)}
.sus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:42px;max-width:760px}
.sus-item{display:flex;gap:15px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);padding:20px;border-radius:14px;transition:background .25s}
.sus-item:hover{background:rgba(255,255,255,.12)}
.sus-item .si{width:42px;height:42px;border-radius:10px;background:rgba(111,179,209,.18);display:grid;place-items:center;flex-shrink:0}
.sus-item .si svg{width:21px;height:21px;color:var(--gold-400)}
.sus-item b{font-size:15px;display:block;margin-bottom:3px}
.sus-item p{font-size:13.5px;color:rgba(255,255,255,.74)}
@media(max-width:640px){.sus-grid{grid-template-columns:1fr}}

/* ============ CTA BAND ============ */
.cta-contact .wrap{position:relative;z-index:1}
.cta-bg{position:absolute;inset:0;z-index:0}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(16,48,28,.9),rgba(16,48,28,.8) 50%,rgba(16,48,28,.93))}
.cta-head{text-align:center;max-width:62ch;margin:0 auto clamp(24px,3vw,40px)}
.cta-head h2{color:#fff;font-size:clamp(23px,3vw,34px);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.cta-head p{color:rgba(255,255,255,.84);max-width:54ch;margin:18px auto 30px;font-size:clamp(16px,1.5vw,18px)}
.cta-head .hero-actions{justify-content:center}

/* ============ CONTACTO ============ */
.contact{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,60px);align-items:start}
.contact-lead{font-family:var(--font-display);font-size:clamp(18px,2vw,23px);font-weight:600;color:#fff;line-height:1.25;letter-spacing:-.01em;margin-bottom:clamp(14px,2vw,22px);max-width:24ch}
.contact-info .ci{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.15)}
.contact-info .ci:first-of-type{border-top:1px solid rgba(255,255,255,.15)}
.contact-info .ci .ic{width:46px;height:46px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex-shrink:0}
.contact-info .ci .ic svg{width:22px;height:22px;color:var(--gold-400)}
.contact-info .ci b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.66);font-weight:700}
.contact-info .ci p{font-size:16px;color:#fff;font-weight:500;margin-top:3px}
.form{background:var(--white);border:1px solid rgba(255,255,255,.55);border-radius:var(--radius);padding:clamp(18px,2.2vw,26px);box-shadow:0 32px 64px -20px rgba(0,0,0,.5)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--green-900);margin-bottom:7px}
.field input,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:15px;color:var(--ink);background-color:var(--cream-100);background-image:linear-gradient(var(--gold-500),var(--gold-500));background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;transition:border-color .25s,background-size .35s var(--ease),background-color .25s;min-height:44px}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green-600);background-color:#fff;background-size:100% 2px}
.form .btn{width:100%;justify-content:center}
.form .ok{display:none;text-align:center;padding:30px 10px}
.form .ok.show{display:block}
.form .ok svg{width:54px;height:54px;color:var(--green-600);margin:0 auto 14px}
.form .ok h3{font-size:22px;margin-bottom:6px}
.form .ok p{color:var(--muted);font-size:15px}
/* Contacto — micro-interacciones */
.contact-info .ci{transition:transform .25s var(--ease)}
.contact-info .ci .ic{transition:background .25s var(--ease),transform .25s var(--ease)}
.contact-info .ci:hover{transform:translateX(5px)}
.contact-info .ci:hover .ic{background:var(--gold-400);transform:scale(1.06)}
.contact-info .ci:hover .ic svg{color:var(--green-900)}
.contact-info .ci p a{color:#fff;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease),color .2s var(--ease)}
.contact-info .ci p a:hover{color:var(--gold-400);border-color:var(--gold-400)}
/* Mapa de la planta (ubicacion exacta) */
.contact-map{position:relative;margin-top:clamp(26px,3.4vw,40px);border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 50px -26px rgba(0,0,0,.6)}
.contact-map iframe{width:100%;height:clamp(260px,30vw,360px);border:0;display:block;filter:grayscale(.18) contrast(1.03)}
.contact-map-cta{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--green-900);font-size:14px;font-weight:600;padding:11px 18px;border-radius:12px;text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .22s var(--ease),background .22s var(--ease)}
.contact-map-cta:hover{transform:translateY(-2px);background:#fff}
.contact-map-cta svg{width:17px;height:17px;color:var(--green-700)}
.field input:hover:not(:focus),.field textarea:hover:not(:focus){border-color:rgba(47,122,72,.45)}
.form{transition:box-shadow .35s var(--ease),border-color .35s var(--ease)}
.form:focus-within{border-color:rgba(111,179,209,.6);box-shadow:0 38px 70px -20px rgba(0,0,0,.55)}
.contact-card{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(28px,3vw,40px)}
.contact-card .cc-title{font-family:var(--font-display);font-size:clamp(21px,2.4vw,27px);font-weight:600;color:var(--green-900);letter-spacing:-.01em;margin-bottom:10px}
.contact-card .cc-text{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 auto 24px;max-width:34ch}
.contact-card .cc-btn{width:100%;max-width:340px;justify-content:center;font-size:16px;padding:15px 24px}
.contact-card .cc-alt{margin-top:16px;font-size:13.5px;color:var(--muted)}
.contact-card .cc-alt a{color:var(--green-700);font-weight:600;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s var(--ease)}
.contact-card .cc-alt a:hover{border-color:var(--green-700)}
@media(max-width:820px){.contact{grid-template-columns:1fr;gap:36px}.form .row{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
footer{background:var(--green-900);color:rgba(255,255,255,.7);padding:64px 0 26px}
.foot-quote{padding-bottom:40px;margin-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-quote .eyebrow{color:var(--gold-400)}
.foot-quote p{font-family:var(--font-display);font-style:italic;font-weight:500;font-size:clamp(21px,2.7vw,32px);color:#fff;max-width:24ch;line-height:1.22;margin-top:14px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot-brand .brand .bt b{color:#fff}
.foot-brand p{font-size:14px;color:rgba(255,255,255,.6);margin-top:18px;max-width:34ch}
.foot-social{display:flex;gap:12px;margin-top:20px}
.foot-social a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background .2s,transform .2s}
.foot-social a:hover{background:var(--gold-500);transform:translateY(-2px)}
.foot-social a:hover svg{color:var(--green-900)}
.foot-social svg{width:17px;height:17px;color:#fff}
.foot-col h3{font-family:var(--font-sans);color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.foot-col a{display:block;font-size:14.5px;color:rgba(255,255,255,.66);padding:6px 0;transition:color .2s,padding-left .2s}
.foot-col a:hover{color:var(--gold-400);padding-left:5px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:24px;font-size:13px;color:rgba(255,255,255,.5);flex-wrap:wrap}
.foot-bottom a{color:var(--gold-400)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}

/* ============ REVEAL ANIMATION ============ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .hero-bg video,.hero-bg img{height:100%}
  .hero-slides,.hero-video{height:100%;transform:none!important}
  .hero-slide{opacity:0;transform:none}
  .hero-slide.is-active{opacity:1;animation:none;transform:none}
  .prodcard .po .fact{opacity:1;transform:none}
}

/* ============ DEMO FLAG (footer) ============ */

/* ============ RECONOCIMIENTOS (franja) ============ */
.recon{padding:clamp(38px,5.5vw,60px) 0;background:var(--cream-100);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.recon-item{display:flex;gap:14px;align-items:flex-start}
.recon-item .ri{width:46px;height:46px;border-radius:12px;background:var(--sage);display:grid;place-items:center;flex-shrink:0}
.recon-item .ri svg{width:23px;height:23px;color:var(--green-700)}
.recon-item p{font-size:15px;color:var(--ink);line-height:1.5;font-weight:500}
@media(max-width:760px){.recon-grid{grid-template-columns:1fr;gap:18px}}

/* ============ NUESTRA HISTORIA ============ */
.historia{background:var(--cream-100)}
.hist-head{max-width:var(--maxw);margin:0 auto clamp(26px,3.6vh,44px);padding:0 24px}
.hist-head .eyebrow{display:block;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--green-600);margin-bottom:16px}
.hist-head h2{font-size:clamp(32px,4.4vw,54px);line-height:1.05;letter-spacing:-.025em;color:var(--green-900);margin:0;max-width:620px;text-wrap:balance}
/* Foto = tarjeta vertical sticky (sube/baja con el texto) con las fotos de familia rotando */
.hist{max-width:min(1340px,94vw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(36px,4.4vw,64px);align-items:center}
.hist-media{position:relative;align-self:center;height:clamp(420px,46vw,640px);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);background:#15301e}
.hist-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s var(--ease)}
.hist-photo.is-on{opacity:1}
.hist-media .hist-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;margin:0;padding:34px 22px 16px;color:#fff;font-size:13px;font-weight:600;letter-spacing:.05em;background:linear-gradient(0deg,rgba(16,48,28,.72),rgba(16,48,28,0))}
.hist-text .hist-body p{font-size:18px;color:var(--ink);line-height:1.75;margin-bottom:17px;max-width:62ch;text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;transform-origin:left top}
.hist-text .hist-body p:first-child{font-size:21px;color:var(--green-900);font-weight:500;line-height:1.55}
.hist-text .hist-body p:last-child{margin-bottom:0;margin-top:26px;font-family:var(--font-display);font-style:italic;font-weight:500;color:var(--green-800);font-size:24px;line-height:1.35;text-align:left;hyphens:manual;-webkit-hyphens:manual;max-width:none}
@media(max-width:1024px){.hist{display:flex;flex-direction:column;gap:26px}.hist-media{order:-1;position:relative;width:100%;height:calc((100vw - 48px) * 0.62);max-height:none;aspect-ratio:auto;align-self:auto}}

/* ============ RECONOCIMIENTOS Y RESPALDO (unificado) ============ */
.trayectoria{background:var(--green-900);color:#fff;position:relative;padding-bottom:clamp(40px,5vw,68px)}
.tray-panel{color:#fff}
.tray-panel .sec-head{margin-bottom:clamp(34px,4vw,46px)}
.tray-panel h2{color:#fff}
.tray-panel .lead{color:rgba(255,255,255,.78)}
/* John Deere va primero y ocupa el doble: es la credencial con mas peso. */
.creds{display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto auto;gap:14px}
.cred.cred-1{grid-column:2;grid-row:1}
.cred.cred-2{grid-column:2;grid-row:2}
/* La credencial de John Deere manda: ocupa las dos filas y corre video de fondo */
.cred-feat{grid-column:1;grid-row:1/3;min-height:clamp(260px,24vw,380px);align-items:flex-end;padding:clamp(24px,2.6vw,32px);
  border-color:rgba(111,179,209,.28);background:#0d2517}
.cred-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.55;
  transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
.cred-feat:hover .cred-bg{opacity:.72;transform:scale(1.04)}
.cred-feat::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(9,26,16,.92) 12%,rgba(9,26,16,.55) 48%,rgba(9,26,16,.18) 100%)}
.cred-feat>*:not(.cred-bg){position:relative;z-index:2}
.cred-feat b{font-size:clamp(20px,2.1vw,25px)}
.cred-feat p{color:rgba(255,255,255,.78);max-width:34ch}
.cred-feat .cred-ic{width:48px;height:48px;background:rgba(111,179,209,.2);border-color:rgba(111,179,209,.4)}
.cred-feat .cred-play{margin-top:15px;font-size:13px}
.cred-feat .cred-play i{width:26px;height:26px;background:var(--gold-400);border-color:var(--gold-400)}
.cred-feat .cred-play i svg{width:11px;height:11px;color:var(--green-900)}
@media(max-width:900px){.creds{grid-template-columns:1fr;grid-template-rows:none}
  .cred.cred-1,.cred.cred-2{grid-column:1;grid-row:auto}
  .cred-feat{grid-column:1;grid-row:auto;min-height:210px}}
.cred{position:relative;overflow:hidden;display:flex;gap:15px;align-items:center;padding:22px 22px 20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cred::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at 22% -10%,rgba(111,179,209,.16),transparent 62%);opacity:0;transition:opacity .38s var(--ease)}
.cred:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);border-color:rgba(111,179,209,.34);box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.cred:hover::after{opacity:1}
.cred-ic{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;background:rgba(111,179,209,.11);border:1px solid rgba(111,179,209,.24);display:grid;place-items:center;flex:none;transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease)}
.cred:hover .cred-ic{background:rgba(111,179,209,.2);border-color:rgba(111,179,209,.45);transform:scale(1.05)}
.cred-ic svg{width:21px;height:21px;stroke-width:1.6;color:var(--gold-400)}
/* Chapa blanca con el logo de John Deere: la marca pesa mas que un icono */
.cred-brand{position:relative;z-index:1;flex:none;width:clamp(60px,6.2vw,76px);height:clamp(60px,6.2vw,76px);
  border-radius:16px;background:#fff;display:grid;place-items:center;padding:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.cred:hover .cred-brand{transform:translateY(-2px) scale(1.04);box-shadow:0 12px 26px rgba(0,0,0,.3)}
.cred-brand img{width:100%;height:100%;object-fit:contain;display:block}
/* La credencial de Smart Farm ahora lleva a la pagina de sustentabilidad */
.cred-link{text-decoration:none;color:inherit}
.cred-go{display:inline-flex;align-items:center;gap:8px;margin-top:12px;
  font-size:13px;font-weight:600;color:var(--gold-400);line-height:1.35;text-wrap:balance}
.cred-go svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.cred-link:hover .cred-go svg{transform:translateX(4px)}
/* Cada icono se mueve segun lo que representa: el tractor "anda", la plantita
   se mece y el laurel del premio hamaca. Recorridos de 1-2px, nada de aspavientos. */
@keyframes icTractor{0%,100%{transform:translate(-3.4px,0)}
  25%{transform:translate(-1px,-1.6px)}50%{transform:translate(3.4px,0)}75%{transform:translate(1px,-1.6px)}}
@keyframes icPlanta{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes icPremio{0%,100%{transform:rotate(-9deg) translateY(0)}50%{transform:rotate(9deg) translateY(-2px)}}
.cred-ic[data-ic="tractor"] svg{animation:icTractor 2.6s ease-in-out infinite}
.cred-ic[data-ic="planta"] svg{transform-origin:50% 90%;animation:icPlanta 3s ease-in-out infinite}
.cred-ic[data-ic="premio"] svg{transform-origin:50% 8%;animation:icPremio 2.8s ease-in-out infinite}
.cred:hover .cred-ic svg,.cred-btn:hover .cred-ic svg{animation-duration:1.4s}
@media(prefers-reduced-motion:reduce){.cred-ic svg{animation:none!important}}
.cred>div{position:relative;z-index:1;min-width:0}
/* Credencial clickeable -> abre los videos de maquinaria */
.cred-btn{width:100%;text-align:left;font:inherit;cursor:pointer;color:inherit}
.cred-play{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--gold-400);white-space:nowrap;transition:gap .28s var(--ease),color .28s var(--ease)}
.cred-play i{width:21px;height:21px;border-radius:50%;background:rgba(111,179,209,.16);border:1px solid rgba(111,179,209,.36);display:grid;place-items:center;flex:none;transition:background .28s var(--ease),transform .28s var(--ease),border-color .28s var(--ease)}
.cred-play svg{width:9px;height:9px;margin-left:1.5px;transition:color .28s var(--ease)}
.cred-btn:hover .cred-play{gap:11px;color:#fff}
.cred-btn:hover .cred-play i{background:var(--gold-400);border-color:var(--gold-400);transform:scale(1.1)}
.cred-btn:hover .cred-play svg{color:var(--green-900)}
/* Ventana de videos */
.vidm{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(0px,1.6vw,22px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s var(--ease)}
.vidm[hidden]{display:none}
.vidm.open{opacity:1;visibility:visible}
.vidm-scrim{position:absolute;inset:0;background:rgba(9,26,16,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.vidm-panel{position:relative;width:min(1180px,100%);height:100%;max-height:100%;overflow-y:auto;background:var(--green-900,#10301C);border:1px solid rgba(255,255,255,.12);border-radius:24px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);transform:translateY(24px) scale(.98);transition:transform .4s var(--ease);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.vidm-panel::-webkit-scrollbar{width:12px}
.vidm-panel::-webkit-scrollbar-track{background:transparent}
.vidm-panel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:100px;border:4px solid transparent;background-clip:content-box}
.vidm.open .vidm-panel{transform:none}
.vidm-close{position:sticky;top:16px;float:right;margin:16px 16px -24px 0;z-index:3;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(16,48,28,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.vidm-close:hover{background:rgba(255,255,255,.16);transform:rotate(90deg)}
.vidm-close svg{width:20px;height:20px}
.vidm-inner{padding:clamp(28px,4.4vw,52px)}
.vidm-inner .eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);margin-bottom:14px}
.vidm-inner h2{font-family:var(--font-display);font-size:clamp(25px,3.4vw,38px);line-height:1.07;letter-spacing:-.02em;color:#fff;margin:0 0 14px;text-wrap:balance}
.vidm-inner .lead{color:rgba(255,255,255,.74);font-size:clamp(15px,1.5vw,16.5px);line-height:1.6;margin:0 0 clamp(24px,3vw,34px)}
/* Un video abajo del otro y a todo el ancho: se ven completos y arrancan solos. */
/* Los reels de Luis: vienen embebidos de Instagram, uno al lado del otro */
.vidm-reels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(16px,2.4vw,26px)}
.vidm-reel{position:relative;border-radius:16px;overflow:hidden;background:#0d2416;border:1px solid rgba(255,255,255,.1);min-height:560px}
.vidm-reel iframe{width:100%;height:100%;min-height:560px;border:0;display:block}
.vidm-note{margin:16px 0 0;font-size:14px;color:rgba(255,255,255,.6)}
.vidm-note a{color:var(--gold-400);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.vidm-sub{font-family:var(--font-display);font-size:clamp(19px,2.2vw,24px);font-weight:600;color:#fff;letter-spacing:-.015em;
  margin:clamp(34px,4.4vw,52px) 0 clamp(20px,2.6vw,28px);padding-top:clamp(26px,3.4vw,36px);border-top:1px solid rgba(255,255,255,.13)}
@media(max-width:560px){.vidm-reel,.vidm-reel iframe{min-height:520px}}
.vidm-grid{display:flex;flex-direction:column;gap:clamp(28px,3.6vw,46px)}
.vidm-item{position:relative}
.vidm-item video{width:100%;aspect-ratio:16/9;object-fit:contain;display:block;background:#08180f;
  border-radius:16px;border:1px solid rgba(255,255,255,.11)}
.vidm-cap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:baseline;
  gap:5px clamp(18px,3vw,40px);padding:0 3px 12px}
.vidm-cap b{color:#fff;font-family:var(--font-display);font-size:clamp(17px,1.9vw,21px);font-weight:600;
  letter-spacing:-.015em;line-height:1.2}
.vidm-cap span{color:rgba(255,255,255,.74);font-size:14.5px;line-height:1.55}
@media(max-width:760px){.vidm{padding:0}
  .vidm-panel{border-radius:0;border:none}
  .vidm-cap{grid-template-columns:1fr;gap:3px;padding-bottom:10px}
  .vidm-cap b{font-size:17px}.vidm-cap span{font-size:13.5px}}
.cred b{font-family:var(--font-display);font-size:18px;font-weight:600;color:#fff;display:block;line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.cred p{font-size:13px;color:rgba(255,255,255,.66);margin-top:6px;line-height:1.5}
.tray-logos{margin-top:clamp(38px,4.5vw,54px);padding-top:38px;border-top:1px solid rgba(255,255,255,.13);text-align:center}
.tray-logos-label{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);font-weight:700;margin-bottom:28px}
.logos-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,4vw,46px) clamp(16px,3vw,40px);align-items:center;justify-items:center;max-width:920px;margin:0 auto}
.logos-row span{font-family:var(--font-display);font-size:clamp(15px,1.6vw,18px);font-weight:600;color:rgba(255,255,255,.9);line-height:1.2;padding:6px 10px}
.logos-row .logo-img{max-height:50px;max-width:min(145px,100%);width:auto;height:auto;margin:0 auto;object-fit:contain;opacity:.95;transition:opacity .2s var(--ease)}
.logos-row .logo-img:hover{opacity:1}
@media(max-width:760px){.creds{grid-template-columns:1fr;gap:12px}.cred{padding:18px}.logos-row{grid-template-columns:repeat(2,1fr)}}

/* ============ UNIDADES — enlace IG + ubicación en tarjeta ============ */
.bcard .ulink{position:absolute;top:14px;right:14px;z-index:3;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.16);display:grid;place-items:center;transition:background .2s}
.bcard .ulink:hover{background:rgba(255,255,255,.32)}
.bcard .ulink svg{width:18px;height:18px;color:#fff}
.bcard .uloc{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:6px;font-size:11px;color:#fff;background:rgba(11,33,21,.62);padding:4px 9px;border-radius:6px;margin:0}
.bcard .uloc svg{width:13px;height:13px;color:var(--gold-400);flex:none}

/* ============ CTA + CONTACTO conectados ============ */
.cta-contact{position:relative;overflow:hidden;background:var(--green-900);color:#fff;isolation:isolate;padding-top:clamp(28px,3.5vw,50px);border-top:1px solid rgba(255,255,255,.09)}

/* ============ MOBILE ============ */
@media(max-width:520px){.wrap{padding:0 18px}}