/* EDA website kit — on top of colors_and_type.css */

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth}
body{background:var(--bg-canvas);color:var(--fg-1);overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:22px 0;
  transition:background .4s var(--ease-out-smooth), color .3s var(--ease-out-smooth), padding .3s var(--ease-out-smooth), border-color .3s;
  color:var(--fg-1);
}
.site-header.scrolled{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid var(--border-1);
  padding:14px 0;
}
.site-header.on-dark{color:#fff;background:transparent;border-bottom-color:transparent}
.site-header.on-dark.scrolled{background:rgba(8,31,45,.78);border-bottom-color:rgba(255,255,255,.08)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:32px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.03em;font-size:20px}
.logo img{
  height:62px;width:auto;border-radius:0;background:transparent;display:block;max-width:none;
  transition:height .3s var(--ease-out-smooth), filter .35s var(--ease-out-smooth);
}
/* Dual-variant logo: original colors always (Ronald 13-jul — keep the cyan on dark too).
   .logo-light = original PNG (dark wordmark) for light backgrounds;
   .logo-dark  = same logo with the wordmark in white for dark backgrounds. */
.logo img{filter:none}
.logo .logo-dark{display:none}
.site-header.on-dark .logo .logo-light{display:none}
.site-header.on-dark .logo .logo-dark{display:block}
.site-header.scrolled .logo img{height:48px}
.site-header:not(.on-dark) .logo{color:var(--eda-cyan-600)}
.footer-brand .logo img{height:54px;width:auto;max-width:none;filter:none;opacity:.95}
.nav-main{display:flex;gap:22px}
.nav-item{position:relative}
.nav-main a{font-size:14px;font-weight:500;position:relative;padding:6px 0;opacity:.85;transition:opacity .2s;white-space:nowrap;display:inline-flex;align-items:center}
.nav-main a:hover, .nav-main a.active{opacity:1}
.nav-main a.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--eda-cyan-400)}

/* Nav dropdown (blog / services) */
.nav-main .nav-dropdown{
  position:absolute !important;top:100% !important;left:-16px !important;padding-top:14px !important;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease-out-smooth),transform .22s var(--ease-out-smooth),visibility .22s;
  z-index:101;
  pointer-events:none;
  width:max-content;
}
.nav-main .nav-item:hover > .nav-dropdown, .nav-main .nav-item:focus-within > .nav-dropdown{
  opacity:1;visibility:visible;transform:none;pointer-events:auto;
}
/* Tolerancia de hover (Ronald 29-jul): bajando lento del link "Blog" al panel
   el menú se cerraba antes de alcanzarlo. Dos capas:
   (1) gracia de .5s antes de ocultar — si el puntero llega al panel en ese
       lapso, el :hover del ancestro se recupera y no se cierra;
   (2) mientras el ítem está hovered, el link extiende su hitbox hacia abajo
       (puente invisible link→panel) sin mover el layout. */
.nav-main .nav-dropdown{transition-delay:.5s}
.nav-main .nav-item:hover > .nav-dropdown, .nav-main .nav-item:focus-within > .nav-dropdown{transition-delay:0s}
.nav-main .nav-item.nav-blog:hover > a{padding-bottom:34px;margin-bottom:-34px}
.nav-main .nav-item.force-close > .nav-dropdown{
  opacity:0 !important;visibility:hidden !important;transform:translateY(-6px) !important;pointer-events:none !important;
  transition:opacity .15s,transform .15s,visibility .15s !important;
}
.nav-dropdown-inner{
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid var(--border-1);border-radius:4px;
  box-shadow:var(--shadow-lg);
  padding:12px;min-width:340px;
  display:flex;flex-direction:column;gap:2px;
  color:var(--fg-1);
}
.nav-dropdown a{
  display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:3px;
  font-size:14px;font-weight:600;color:var(--fg-1);opacity:1;
  transition:background .18s,color .18s;
}
.nav-dropdown a::after{display:none}
.nav-dropdown a .nd-desc{font-size:12px;font-weight:400;color:var(--fg-3);line-height:1.45}
.nav-dropdown a:hover, .nav-dropdown a:focus-visible{background:var(--accent-soft);color:var(--accent)}
.nav-dropdown a:hover .nd-desc, .nav-dropdown a:focus-visible .nd-desc{color:var(--fg-2)}
.site-header.on-dark .nav-dropdown-inner{background:rgba(8,31,45,.96);border-color:rgba(255,255,255,.1);color:#fff}
.site-header.on-dark .nav-dropdown a{color:#fff}
.site-header.on-dark .nav-dropdown a:hover, .site-header.on-dark .nav-dropdown a:focus-visible{background:rgba(91,164,197,.14);color:var(--eda-cyan-300)}
.site-header.on-dark .nav-dropdown a .nd-desc{color:rgba(255,255,255,.55)}
.header-right{display:flex;align-items:center;gap:18px}
.lang-toggle{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;border-radius:3px;border:1px solid transparent;transition:all .2s}
.lang-toggle .sep{opacity:.4;margin:0 2px}
.lang-toggle span{opacity:.5;transition:opacity .2s}
.lang-toggle span.on{opacity:1;color:var(--eda-cyan-300)}
.site-header:not(.on-dark) .lang-toggle span.on{color:var(--eda-cyan-600)}
.lang-toggle:hover{border-color:rgba(255,255,255,.15)}
.site-header:not(.on-dark) .lang-toggle:hover{border-color:var(--border-2)}
/* LinkedIn arriba (Ronald 21-jul): visible también en móvil — no entra en el display:none responsive */
.header-linkedin{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;border:1px solid transparent;color:inherit;opacity:.85;transition:all .2s}
.header-linkedin:hover{opacity:1;border-color:rgba(255,255,255,.15);color:var(--eda-cyan-300)}
.site-header:not(.on-dark) .header-linkedin:hover{border-color:var(--border-2);color:var(--eda-cyan-600)}
.mm-foot-row{display:flex;align-items:center;justify-content:center;gap:14px}
.mm-foot-row .header-linkedin{width:auto;height:auto;padding:8px 14px;gap:8px;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.18);font-size:13px;font-weight:500}
.mm-foot-row .header-linkedin:hover{color:var(--eda-cyan-300)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:3px;font-weight:600;font-size:13px;letter-spacing:.01em;transition:all .22s var(--ease-out-smooth);border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--eda-cyan-600);color:#fff}
.btn-primary:hover{background:var(--eda-cyan-700);transform:translateY(-1px)}
.btn-outline{border-color:currentColor;color:inherit}
.btn-outline:hover{background:rgba(255,255,255,.08)}
.site-header:not(.on-dark) .btn-outline:hover{background:var(--neutral-100)}
.btn-ghost{padding:10px 0;color:var(--accent);font-weight:600;font-size:14px}
.btn-ghost::after{content:'→';margin-left:8px;transition:transform .24s}
.btn-ghost:hover::after{transform:translateX(6px)}
.btn-lg{padding:14px 24px;font-size:14px}
.menu-toggle{display:none;width:36px;height:36px;align-items:center;justify-content:center;border-radius:3px;border:1px solid rgba(255,255,255,.2)}
.site-header:not(.on-dark) .menu-toggle{border-color:var(--border-2)}

/* Header density — keep the 8 ES items on one line INSIDE the container at every desktop width.
   This used to be capped at max-width:1520px, which left the wide case broken: above 1520 the
   logo went back to 62px (496px wide) and the row's min-content exceeded the 1400px container,
   so "Contacto" rendered 102px past the container's right edge at 1600/1680/1920 — and past the
   viewport itself at 1560–1600. Measured: Δright was +102px above 1520 vs −58px below it.
   Ronald asked precisely for the left margin to be mirrored on the right (24-jul), so the density
   now applies unconditionally; narrower breakpoints below still override it. */
.site-header:not(.scrolled) .logo img{height:50px}
.nav-main{gap:16px}
.nav-main a{font-size:13px}
.header-right{gap:12px}
.header-right .btn{padding:9px 14px}

/* ---------- Mobile menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:200;pointer-events:none;visibility:hidden;transition:visibility .45s}
.mobile-menu.open{pointer-events:auto;visibility:visible}
.mobile-menu-backdrop{
  position:absolute;inset:0;background:rgba(2,13,23,.55);
  opacity:0;transition:opacity .35s var(--ease-out-smooth);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.mobile-menu.open .mobile-menu-backdrop{opacity:1}
.mobile-menu-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);
  background:linear-gradient(160deg,var(--eda-deep-600) 0%,var(--eda-deep-700) 45%,var(--eda-deep-800) 100%);
  color:#fff;display:flex;flex-direction:column;
  padding:22px 28px 32px;overflow-y:auto;
  transform:translateX(100%);transition:transform .45s var(--ease-out-expo);
  box-shadow:-24px 0 60px rgba(2,13,23,.45);
  border-left:1px solid rgba(130,193,213,.14);
}
.mobile-menu.open .mobile-menu-panel{transform:none}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.mobile-menu-head .mm-logo{height:38px;width:auto;filter:none}
.mobile-menu-close{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:3px;border:1px solid rgba(255,255,255,.18);color:#fff;transition:all .2s;
}
.mobile-menu-close:hover{border-color:var(--eda-cyan-300);color:var(--eda-cyan-300)}
.mobile-menu-nav{display:flex;flex-direction:column}
.mobile-menu-nav a{
  font-size:22px;font-weight:500;letter-spacing:-.01em;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
  opacity:0;transform:translateX(18px);
  transition:color .2s;
}
.mobile-menu-nav a::after{
  content:'→';font-size:16px;color:var(--eda-cyan-300);opacity:0;transform:translateX(-6px);
  transition:opacity .2s,transform .2s;
}
.mobile-menu-nav a:hover::after,.mobile-menu-nav a.active::after{opacity:1;transform:none}
.mobile-menu-nav a.active{color:var(--eda-cyan-300)}
.mobile-menu.open .mobile-menu-nav a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease-out-expo),transform .5s var(--ease-out-expo),color .2s;
}
.mobile-menu.open .mobile-menu-nav a:nth-child(1){transition-delay:.06s}
.mobile-menu.open .mobile-menu-nav a:nth-child(2){transition-delay:.1s}
.mobile-menu.open .mobile-menu-nav a:nth-child(3){transition-delay:.14s}
.mobile-menu.open .mobile-menu-nav a:nth-child(4){transition-delay:.18s}
.mobile-menu.open .mobile-menu-nav a:nth-child(5){transition-delay:.22s}
.mobile-menu.open .mobile-menu-nav a:nth-child(6){transition-delay:.26s}
.mobile-menu.open .mobile-menu-nav a:nth-child(7){transition-delay:.3s}
.mobile-menu.open .mobile-menu-nav a:nth-child(8){transition-delay:.34s}
.mobile-menu-foot{margin-top:auto;padding-top:30px;display:flex;flex-direction:column;gap:16px}
.mobile-menu-foot .btn{justify-content:center}
.mobile-menu-foot .lang-toggle{align-self:center;font-size:13px;color:rgba(255,255,255,.85)}
html.mm-lock,html.mm-lock body{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .mobile-menu-panel,.mobile-menu-backdrop,.mobile-menu-nav a{transition:none !important}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100vh;color:#fff;
  display:flex;align-items:flex-end;padding:180px 0 100px;
  overflow:hidden;background:var(--eda-deep-700);
}
.hero h1, .hero h2, .hero h3{color:#fff}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg video, .hero-bg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,31,45,.55) 0%, rgba(8,31,45,.7) 55%, rgba(8,31,45,.95) 100%)}
.hero-inner{position:relative;z-index:2;width:100%}
/* Translucent dark scrim behind the hero copy (Ronald 13-jul) — fades out to the right */
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(6,24,36,.68) 0%, rgba(6,24,36,.44) 38%, rgba(6,24,36,.14) 62%, rgba(6,24,36,0) 80%);
}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--eda-cyan-300);margin-bottom:28px;opacity:0;
  animation:fadeUp .8s var(--ease-out-expo) .2s forwards;
}
.hero-eyebrow::before{content:'';display:block;width:36px;height:1px;background:var(--eda-cyan-300)}
.hero h1{
  color:#fff;
  font-size:clamp(46px,6.2vw,96px);font-weight:300;line-height:1.02;
  letter-spacing:-.03em;margin:0 0 28px;max-width:18ch;
  opacity:0;animation:fadeUp .9s var(--ease-out-expo) .35s forwards;
}
.hero h1 .accent{color:var(--eda-cyan-300);font-weight:500}
.hero h1 strong{color:#fff;font-weight:500}
.hero-lead{
  font-size:18px;line-height:1.7;color:rgba(255,255,255,.75);
  max-width:52ch;margin-bottom:40px;
  opacity:0;animation:fadeUp .9s var(--ease-out-expo) .5s forwards;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .9s var(--ease-out-expo) .65s forwards}
.hero-stats{
  position:absolute;right:var(--container-pad);bottom:60px;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:520px;
  opacity:0;animation:fadeUp 1s var(--ease-out-expo) .8s forwards;
}
.hero-stat{border-top:1px solid rgba(255,255,255,.2);padding-top:14px}
.hero-stat .n{font-size:36px;font-weight:300;letter-spacing:-.02em;line-height:1}
.hero-stat .n .u{font-size:14px;color:var(--eda-cyan-300);font-weight:600;margin-left:4px}
.hero-stat .l{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.hero-scroll{
  position:absolute;left:var(--container-pad);bottom:40px;z-index:2;
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.hero-scroll::before{content:'';width:40px;height:1px;background:rgba(255,255,255,.3);animation:scrollBar 2s infinite}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes scrollBar{0%,100%{transform:scaleX(.5);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}}

/* ---------- Sections ---------- */
section{padding:clamp(56px,6.5vw,96px) 0}
.section-dark{background:var(--bg-dark);color:#fff}
.section-muted{background:var(--bg-subtle)}
.section-head{margin-bottom:52px;max-width:720px}
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:20px;
}
.eyebrow::before{content:'';width:28px;height:1px;background:currentColor}
.section-dark .eyebrow{color:var(--eda-cyan-300)}
.section-head h2{font-size:clamp(32px,4vw,56px);font-weight:300;line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
.section-head h2 strong{font-weight:500;color:var(--accent)}
.section-dark .section-head h2 strong{color:var(--eda-cyan-300)}
.section-head p{font-size:17px;line-height:1.65;color:var(--fg-2);max-width:60ch}
.section-dark .section-head p{color:rgba(255,255,255,.72)}

.partners{padding:56px 0;border-top:1px solid var(--border-1);border-bottom:1px solid var(--border-1);background:#fff;overflow:hidden}
.partners-lbl{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3);margin-bottom:32px;text-align:center}
.marquee{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
/* Track holds 4 identical sets; -50% = 2 sets, so the loop is seamless and the
   half-track always exceeds the viewport (the old 1-set half left a blank gap
   on wide screens). 76s keeps the same visual speed as the old 38s/1-set. */
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 76s linear infinite;will-change:transform;animation-play-state:running !important}
/* Never pause — user wants constant motion */
.partners .marquee-track:hover{animation-play-state:running !important}
/* Each item gets EQUAL right margin; no gap, no padding on the track. Half-track translate = exactly one set. */
.partners .marquee-track img{height:42px!important;max-height:42px!important;width:auto!important;max-width:180px!important;object-fit:contain!important;filter:none;opacity:.85;transition:opacity .3s;flex-shrink:0;margin:0 48px 0 48px}
.partners .marquee-track img:hover{opacity:1}
/* Coherencia visual de tamaño entre logos (Ronald 17-jul): los wordmarks anchos
   (Siemens/ABB/Hitachi, antes en canvas SVG cuadrado 24x24 que los achicaba) usan
   PNG recortado al glifo con altura calibrada a la masa visual de SEL/OMICRON. */
.partners .marquee-track img[src*="abb-trim"]{height:34px!important;max-height:34px!important}
.partners .marquee-track img[src*="siemens-trim"]{height:30px!important;max-height:30px!important;max-width:220px!important}
.partners .marquee-track img[src*="hitachi-trim"]{height:28px!important;max-height:28px!important;max-width:220px!important}
@keyframes marquee{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-50%,0,0)}}

/* ---------- Services grid ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-1)}
.service-card{
  background:var(--surface-card);padding:44px 36px;position:relative;
  transition:all .35s var(--ease-out-smooth);cursor:pointer;
  min-height:340px;display:flex;flex-direction:column;
}
.service-card:hover{background:var(--eda-deep-700);color:#fff}
.service-card:hover .s-num{color:var(--eda-cyan-300)}
.service-card:hover .s-title{color:#fff}
.service-card:hover .s-link{color:var(--eda-cyan-300)}
.service-card:hover .s-desc{color:rgba(255,255,255,.72)}
.s-num{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.12em;margin-bottom:40px;transition:color .3s}
.s-icon{color:var(--accent);margin-bottom:28px;transition:color .3s}
.service-card:hover .s-icon{color:var(--eda-cyan-300)}
.s-title{font-size:22px;font-weight:600;line-height:1.2;margin-bottom:16px;letter-spacing:-.01em;color:var(--fg-1);transition:color .3s}
.s-desc{font-size:14px;line-height:1.65;color:var(--fg-3);margin-bottom:auto;transition:color .3s}
.s-link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent);margin-top:28px;letter-spacing:.02em;transition:color .3s}
.s-link svg{transition:transform .24s}
.service-card:hover .s-link svg{transform:translateX(6px)}

/* ---------- Feature / about ---------- */
.split{display:grid;grid-template-columns:6fr 6fr;gap:clamp(40px,5vw,72px);align-items:center}
.split-img{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img::after{content:'';position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(8,31,45,.3));pointer-events:none;z-index:3}

/* El carrusel del equipo y la banda de valores de #about viven en el bloque
   "Acerca de EDA (#about)" más abajo. */
.split-body h2{margin-bottom:24px}
.split-body .lead{font-size:19px;line-height:1.7;color:var(--fg-2);margin-bottom:32px;max-width:52ch}

/* ---------- Cases ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--grid-gap)}
.case{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px;
  cursor:pointer;color:#fff;
}
.case img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out-smooth)}
.case:hover img{transform:scale(1.06)}
/* Consistent darkening gradient on all 4 cards so light images (lab, SCADA) stay AA-legible */
.case::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,31,45,.28) 0%,rgba(8,31,45,.5) 42%,rgba(8,31,45,.86) 74%,rgba(5,22,36,.97) 100%)}
.case-body{position:absolute;left:32px;right:32px;bottom:28px;z-index:2}
.case-tag{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--eda-cyan-200);margin-bottom:14px;padding:4px 10px;background:rgba(2,13,23,.55);border:1px solid rgba(255,255,255,.22)}
.case-title{font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-.01em;margin-bottom:10px;max-width:24ch;color:var(--eda-cyan-200);text-shadow:0 1px 12px rgba(2,13,23,.55)}
.case-meta{display:flex;gap:20px;font-size:12px;color:rgba(255,255,255,.82);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 8px rgba(2,13,23,.6)}
.case-desc{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 12px;max-width:52ch;text-shadow:0 1px 8px rgba(2,13,23,.6)}

/* ---------- Sustainability band ----------
   The band must read as a distinct card INSIDE the dark section (it used to
   share the exact same bg → one giant black block). Tighter padding, its own
   surface gradient, hairline border and visible dot pattern. */
.band{
  background:linear-gradient(135deg,var(--eda-deep-600) 0%,var(--eda-deep-700) 55%,var(--eda-deep-800) 100%);
  color:#fff;border-radius:6px;padding:clamp(40px,5vw,72px);position:relative;overflow:hidden;
  border:1px solid rgba(130,193,213,.16);
  box-shadow:var(--shadow-inset-hairline),0 24px 60px -24px rgba(2,13,23,.6);
}
.section-dark .band ~ *, .band + *{margin-top:0}
/* Keep the hosting section proportioned (~70vh max feel) */
#sostenibilidad{padding:clamp(56px,7vw,96px) 0}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,64px);align-items:center;position:relative;z-index:2}
.band h2{font-size:clamp(32px,3.8vw,52px);font-weight:300;line-height:1.1;letter-spacing:-.02em;margin-bottom:24px;color:#fff}
.band h2 strong{font-weight:500;color:var(--eda-cyan-300)}
.band-stats{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.band-stat{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.band-stat .n{font-size:44px;font-weight:300;letter-spacing:-.02em;line-height:1}
.band-stat .l{font-size:12px;color:rgba(255,255,255,.6);letter-spacing:.14em;text-transform:uppercase;margin-top:10px}
.band-stat .n{color:#fff}
.band-pattern{position:absolute;right:-5%;top:-30%;width:60%;height:160%;opacity:.14;z-index:0;background:radial-gradient(circle,var(--eda-cyan-300) 1.6px,transparent 2.1px);background-size:20px 20px;mask-image:linear-gradient(105deg,transparent 0%,#000 45%);-webkit-mask-image:linear-gradient(105deg,transparent 0%,#000 45%)}

/* ---------- Careers ---------- */
.careers-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:44px}
.career-card{border:1px solid var(--border-1);padding:28px;border-radius:4px;transition:all .25s;background:var(--surface-card);display:flex;flex-direction:column;gap:14px;min-height:200px;cursor:pointer}
.career-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.career-loc{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase}
.career-title{font-size:18px;font-weight:600;line-height:1.25;margin:0}
.career-meta{display:flex;gap:16px;font-size:12px;color:var(--fg-3);font-family:var(--font-mono);margin-top:auto;padding-top:12px;border-top:1px solid var(--border-1)}
.career-meta span{display:flex;align-items:center;gap:6px}

/* ---------- Blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{display:flex;flex-direction:column;gap:16px;cursor:pointer}
.post-img{aspect-ratio:4/3;overflow:hidden;border-radius:4px;background:var(--neutral-100)}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out-smooth)}
.post:hover .post-img img{transform:scale(1.05)}
.post-meta{display:flex;gap:14px;font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.1em;text-transform:uppercase}
.post-meta .cat{color:var(--accent);font-weight:600}
/* código citable de artículo (Ronald 23-jul: "el artículo A1 de la página EDA")
   — el chip del menú desplegable vive en el bloque "Blog dropdown" más abajo */
.post-meta .ref,.article-meta .ref{font-weight:700;color:var(--fg-2);border:1px solid var(--border-1);padding:1px 7px;border-radius:5px}
.blog-group{margin-bottom:18px}
.blog-group-next{margin-top:clamp(36px,5vw,64px)}
.post-title{font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:0;color:var(--eda-cyan-600)}
.post:hover .post-title{color:var(--eda-cyan-700)}
.post-excerpt{font-size:14px;color:var(--fg-3);line-height:1.6;margin:0}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:22px}
.contact-section{padding-top:80px;padding-bottom:80px}
.contact-section .contact-info h2{font-size:clamp(28px,3vw,40px) !important}
.contact-section .contact-form{padding:32px}
.contact-section .field input,.contact-section .field select,.contact-section .field textarea{padding:10px 12px}
.contact-section .field textarea{min-height:88px}
.contact-block .lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:10px}
.contact-block .val{font-size:17px;font-weight:500;color:var(--fg-1)}
.contact-block a.val:hover{color:var(--accent)}
.contact-form{background:var(--surface-card);padding:40px;border:1px solid var(--border-1);border-radius:4px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form .full{grid-column:1 / -1}
.field label{display:block;font-size:12px;font-weight:600;color:var(--fg-2);margin-bottom:6px;letter-spacing:.02em}
.field input, .field select, .field textarea{width:100%;padding:12px 14px;font-family:inherit;font-size:14px;border:1px solid var(--border-2);border-radius:3px;background:var(--surface-card);color:var(--fg-1);transition:all .2s}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}

/* ---------- Footer ---------- */
.site-footer{background:var(--eda-deep-800);color:#fff;padding:0 0 24px;position:relative;overflow:hidden}
.site-footer .shader-bg{opacity:.35}
.site-footer .container{position:relative;z-index:2}
.footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding:56px 0 44px;border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap;
}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4{color:#fff}
.footer-cta h2{font-size:clamp(28px,3.4vw,44px);font-weight:300;line-height:1.08;letter-spacing:-.02em;margin:10px 0 0;max-width:18ch;color:#fff}
.footer-cta h2 br{display:block}
.footer-cta .btn-primary{padding:14px 26px;font-size:14px}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding:44px 0 36px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand{display:flex;flex-direction:column;gap:12px}
.footer-brand .logo{color:#fff;margin-bottom:4px}
.footer-brand p{font-size:13px;color:rgba(255,255,255,.6);line-height:1.55;max-width:36ch}
.footer-social{display:flex;gap:10px;margin-top:8px}
.footer-social a{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);transition:all .25s}
.footer-social a:hover{background:var(--eda-cyan-600);border-color:var(--eda-cyan-600);color:#fff;transform:translateY(-2px)}
.footer-col h4{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:14px}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.footer-col a,.footer-col li{font-size:13px;color:rgba(255,255,255,.62);transition:color .2s}
.footer-col a:hover{color:var(--eda-cyan-300)}
.footer-bot{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:12px;color:rgba(255,255,255,.58);letter-spacing:.01em}
.footer-legal{display:flex;gap:20px}
.footer-mark{
  position:absolute;right:-4%;bottom:-20px;font-size:clamp(140px,22vw,280px);font-weight:800;
  letter-spacing:-.05em;color:rgba(255,255,255,.025);line-height:1;pointer-events:none;user-select:none;
  z-index:1;
}

/* ---------- Hero + dark sections with shader ---------- */
.hero .shader-bg{z-index:0}
.hero-bg{z-index:1}
.hero-bg::after{background:linear-gradient(180deg,rgba(8,31,45,.35) 0%, rgba(8,31,45,.55) 55%, rgba(8,31,45,.9) 100%)}
.section-dark.shader-host .container{position:relative;z-index:2}
.section-dark.shader-host .shader-bg{opacity:.7}
section.shader-host .container{position:relative;z-index:2}
/* Fix: the rule above out-specifies .hero-stats{position:absolute} and pulled the
   stats into the hero flex row — hero copy lost ~480px and sat ~20px left of the
   header logo (the misalignment Ronald flagged 13-jul). Re-assert absolute. */
section.hero .container.hero-stats{position:absolute}

/* Services section - allow shader bg */
#servicios.shader-host .shader-bg{opacity:.4}
/* Cases section shader */
#casos.shader-host .shader-bg{opacity:.6}
/* Careers shader */
#carreras.shader-host .shader-bg{opacity:.5}
/* About section shader */
#about.shader-host .shader-bg{opacity:.4;mix-blend-mode:multiply}

/* ---------- Reveal anim ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out-expo),transform .8s var(--ease-out-expo)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

/* ---------- Responsive ---------- */
/* Nav collapses to hamburger below 1366px. Measured, not guessed: the header row has a
   min-content width of ~1310px (400px logo + 8 nav items + LinkedIn/theme/lang + CTA), so
   between 1201 and ~1300 the "Contacto" button was rendering past the viewport edge — at
   1280 it read "Contac", at 1201 it was fully offscreen. The old 1200px cut only fixed
   what was already below the failure range. 1366 matches the .co build (deploy-colombia.sh),
   so both sites now collapse at the same point instead of two breakpoints ~165px apart. */
@media (max-width: 1365px){
  .nav-main,.header-right .btn,.header-right .lang-toggle{display:none}
  .menu-toggle{display:inline-flex}
}
/* Phones: the header row could not fit. .logo img carried max-width:none, so the lockup's
   min-content width (240px) + 32px gap + 120px .header-right pinned .header-inner at 412px
   no matter how narrow the viewport was, and the hamburger rendered offscreen on every
   phone under 414px (measured: 22px off at 390, 92px off at 320). Letting the lockup shrink
   proportionally is the whole fix — height:auto + max-height keeps the aspect ratio, which
   plain max-width alone would have squashed. */
@media (max-width: 480px){
  .header-inner{gap:14px;min-width:0}
  .logo{min-width:0}
  .header-right{gap:10px;flex:0 0 auto}
  .site-header .logo img,.site-header:not(.scrolled) .logo img{
    height:auto;max-height:32px;max-width:100%;
  }
}
@media (max-width: 960px){
  .site-header{padding:14px 0}
  .site-header .logo img,.site-header:not(.scrolled) .logo img{height:32px}
  .services-grid{grid-template-columns:1fr 1fr}
  .cases-grid,.blog-grid,.careers-grid{grid-template-columns:1fr}
  .split,.band-grid,.contact{grid-template-columns:1fr;gap:40px}
  .contact-form{grid-template-columns:1fr;padding:28px}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px}
  .footer-bot{flex-direction:column;gap:16px;text-align:center}
  .hero{padding:140px 0 80px;min-height:auto;flex-direction:column;justify-content:flex-end}
  section.hero .container.hero-stats{position:static;margin-top:60px;max-width:none}
  .hero-scroll{display:none}
}
@media (max-width: 620px){
  .services-grid{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr;gap:24px}
}

/* ---------- Acerca de EDA (#about) ----------
   Ronald (24-jul): "me falta un encuadre, un cuadrito… quisiera unir mejor la
   imagen con el texto… la columna del texto está muy alta versus la imagen muy
   plana". Respuesta estructural: la sección deja de ser dos columnas sueltas y
   pasa a ser UNA pieza — un panel con marco propio donde la foto sangra hasta
   el borde, el titular comparte ese marco, y los tres valores cierran abajo en
   una banda dividida por hairlines con la misma gramática que .step-card
   (método de trabajo, servicios.html), que es el "encuadrecito" que él citó.
   El hueco muerto bajo la foto desaparece porque la altura de la fila la fija
   la propia foto (16/9 real, sin recorte ni franjas — Ronald 14/15-jul) y el
   texto se centra ópticamente dentro de ella. */
.about-panel{
  --about-gutter:clamp(24px,2.2vw,32px); /* misma sangría para banda y titular apilado */
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  background:var(--surface-card);
  border:1px solid var(--border-1);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 28px 60px -28px rgba(8,31,45,.32), 0 8px 20px -12px rgba(8,31,45,.16);
}
[data-theme="dark"] .about-panel{
  box-shadow:0 28px 60px -28px rgba(0,0,0,.65), 0 8px 20px -12px rgba(0,0,0,.45);
}
/* Foto: sangra a los bordes del panel. aspect-ratio 16/9 = el ratio real de las
   fotos del equipo, así que en el rango de dos columnas se ven completas. */
.about-media{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  background:var(--eda-deep-800);
}
.about-intro{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,3vw,48px);
  border-left:1px solid var(--border-1); /* la costura imagen ↔ texto dentro del mismo marco */
}
.about-intro .eyebrow{margin-bottom:18px}
.about-intro h2{margin:0 0 18px;text-wrap:balance}
.about-intro .lead{font-size:17px;line-height:1.65;color:var(--fg-2);margin:0;max-width:46ch}

/* Banda de valores: regiones de un mismo panel separadas por hairline (mismo
   truco de .steps-grid: gap 1px sobre fondo --border-1), no tarjetas anidadas. */
.about-values{
  grid-column:1 / -1;
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--border-1);
  border-top:1px solid var(--border-1);
}
.about-values li{
  position:relative;background:var(--surface-card);
  padding:clamp(26px,2.4vw,34px) var(--about-gutter);
}
/* La "liniecita delgadita" de los pasos de servicios, montada sobre el hairline */
.about-values li::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--eda-cyan-400),transparent 70%);opacity:.55;
}
.about-values .vn{
  display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.12em;color:var(--accent);margin-bottom:20px;
}
.about-values .vt{font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0 0 10px}
.about-values .vd{font-size:14px;line-height:1.65;color:var(--fg-3);margin:0;max-width:68ch}

/* Bajo ~1180px el texto crecería más alto que la foto y volvería el desbalance:
   ahí la pieza se apila (foto de ancho completo arriba, luego titular y banda). */
@media (max-width:1180px){
  .about-panel{grid-template-columns:minmax(0,1fr)}
  /* apilado el titular queda justo encima de la banda: misma sangría o se ve el salto */
  .about-intro{
    border-left:0;border-top:1px solid var(--border-1);
    padding-left:var(--about-gutter);padding-right:var(--about-gutter);
  }
}
/* Tablet / notebook chico: la foto a ancho completo en 16/9 se comería media
   pantalla, así que la banda pasa a formato panorámico — el recorte cae arriba
   y abajo (cielo/techo y piso), nunca a los costados donde están las personas.
   Y el titular se reparte en dos columnas para no dejar la fila medio vacía. */
@media (max-width:1180px) and (min-width:861px){
  .about-media{aspect-ratio:11/5}
  .about-intro{
    display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
    column-gap:clamp(28px,3vw,48px);align-content:center;justify-content:normal;
  }
  .about-intro .eyebrow{grid-column:1;grid-row:1;margin-bottom:12px}
  .about-intro h2{grid-column:1;grid-row:2;margin:0}
  .about-intro .lead{grid-column:2;grid-row:1 / span 2;align-self:center;max-width:none}
}
/* Tres valores: 2-up dejaría un huérfano, así que bajo 960 se apilan directo
   (a 3-up las descripciones ya caían en 5 líneas de ~30 caracteres) */
@media (max-width:960px){
  .about-values{grid-template-columns:minmax(0,1fr)}
}

.team-carousel{position:absolute;inset:0}
.team-carousel .tc-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.1s var(--ease-out-smooth);
}
.team-carousel .tc-img.active{opacity:1}

/* ---------- Hero — 3-layer slow transition (no JS) ---------- */
.hero-bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.hero-layer{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;
  animation:heroLayers 24s infinite;
  will-change:opacity, transform;
}
.hero-layer video, .hero-layer img{
  width:100%;height:100%;object-fit:cover;display:block;
  position:absolute;inset:0;
}
.hero-layer-1{animation-delay:0s}
.hero-layer-2{animation-delay:-16s}
.hero-layer-3{animation-delay:-8s}
@keyframes heroLayers{
  0%   {opacity:0; transform:scale(1.08)}
  8%   {opacity:1; transform:scale(1.04)}
  33%  {opacity:1; transform:scale(1.00)}
  41%  {opacity:0; transform:scale(.99)}
  100% {opacity:0; transform:scale(.99)}
}

/* ---------- Blog dropdown — índice tabular (Ronald 24-jul) ----------
   Antes cada ítem apilaba código + título + tema en columna: 3-4 líneas,
   el código arriba y en gris casi invisible. Ahora la fila es una tabla de
   tres columnas — [código][título, máx 2 líneas][tema, a la derecha] — y el
   código abre la lectura con contraste real en los tres contextos de color
   (header claro, header sobre el hero, tema oscuro).
   Tinta por contexto vía custom properties: las reglas estructurales se
   escriben una sola vez y cada contexto solo redefine sus valores. */
/* ancla al borde derecho del HEADER, no del ítem (Ronald 27-jul): el panel
   debe quedar "lo más a la derecha posible", cayendo desde la línea inferior
   del header — .nav-blog pasa a position:static para que el ancestro
   posicionado sea .header-inner */
.header-inner{position:relative}
.nav-item.nav-blog{position:static}
.nav-main .nav-item.nav-blog .nav-dropdown{left:auto !important;right:0 !important}
.nav-main .nav-item.nav-blog .nav-dropdown-inner{
  --nd-chip-bg:var(--accent-soft);
  --nd-chip-ink:var(--eda-cyan-700);
  --nd-chip-bd:rgba(43,122,149,.24);
  --nd-chip-bg-on:var(--eda-cyan-600);
  --nd-chip-ink-on:#fff;
  --nd-title-ink-on:var(--eda-cyan-700);
  --nd-rule:var(--border-1);
  min-width:680px;max-width:680px;padding:10px;gap:1px;
  /* tope ~5 entradas + scroll (Ronald 27-jul): con más artículos el panel
     no crece — aparece la barrita */
  max-height:min(384px,62vh);overflow-y:auto;overscroll-behavior:contain;
}
[data-theme="dark"] .nav-main .nav-item.nav-blog .nav-dropdown-inner,
.site-header.on-dark .nav-main .nav-item.nav-blog .nav-dropdown-inner{
  --nd-chip-bg:rgba(130,193,213,.16);
  --nd-chip-ink:var(--eda-cyan-300);
  --nd-chip-bd:rgba(130,193,213,.32);
  --nd-chip-bg-on:var(--eda-cyan-300);
  --nd-chip-ink-on:var(--eda-cyan-900);
  --nd-title-ink-on:var(--eda-cyan-300);
  --nd-rule:rgba(255,255,255,.10);
}
.nav-main .nav-item.nav-blog .nav-dropdown a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;column-gap:18px;
  padding:9px 12px;white-space:normal;
}
/* corte entre la serie A (IEC 61850) y la serie B (terreno y laboratorio) */
.nav-main .nav-item.nav-blog .nav-dropdown a.nd-cut{
  margin-top:7px;padding-top:15px;border-top:1px solid var(--nd-rule);
}
.nav-blog .nd-ref{
  display:inline-flex;align-items:center;justify-content:center;min-width:30px;
  margin-top:1px;padding:3px 6px;border-radius:3px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:1.15;
  letter-spacing:.02em;
  background:var(--nd-chip-bg);color:var(--nd-chip-ink);
  border:1px solid var(--nd-chip-bd);
  transition:background .18s,color .18s,border-color .18s;
}
.nav-blog .nd-title{
  font-size:13.5px;font-weight:600;line-height:1.4;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* columna derecha: una sola línea, alineada al borde derecho del panel — es la
   "tablita" que identifica el tema; la columna se dimensiona sola (auto).
   El selector lleva `.nav-dropdown a` para ganarle a la regla genérica
   `.nav-dropdown a .nd-desc` (12px), que si no fija el tamaño. */
.nav-blog .nav-dropdown a .nd-desc{
  font-family:var(--font-mono);font-size:11px;line-height:1.5;text-align:right;
  padding-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nav-blog .nav-dropdown a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-blog .nav-dropdown a:hover .nd-ref,
.nav-blog .nav-dropdown a:focus-visible .nd-ref{
  background:var(--nd-chip-bg-on);color:var(--nd-chip-ink-on);border-color:transparent;
}
.nav-blog .nav-dropdown a:hover .nd-title,
.nav-blog .nav-dropdown a:focus-visible .nd-title{color:var(--nd-title-ink-on)}

/* ---------- Service card "energized bus" hover line ---------- */
.s-title{position:relative;padding-bottom:12px}
.s-title::after{
  content:'';position:absolute;left:0;bottom:0;height:2px;width:0;border-radius:1px;
  background:linear-gradient(90deg,var(--eda-cyan-400),var(--eda-cyan-300));
  background-size:200% 100%;
  transition:width .45s var(--ease-out-expo);
}
.service-card:hover .s-title::after{width:56px;animation:busFlow 1.6s linear infinite}
@keyframes busFlow{0%{background-position:0% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){
  .service-card:hover .s-title::after{animation:none}
}
/* Service cards can be links (index teaser) */
a.service-card{color:inherit;display:flex}

/* ---------- Footer CTA hidden where it duplicates #contacto ---------- */
body[data-nav="home"] .footer-cta{display:none}

/* ---------- Sub-page building blocks (servicios/casos/sostenibilidad/carreras/blog) ---------- */
/* Method steps (servicios) */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border-1);margin-top:56px}
.step-card{background:var(--surface-card);padding:36px 30px;position:relative}
.step-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--eda-cyan-400),transparent 70%);opacity:.55;
}
.step-num{font-family:var(--font-mono);font-size:12px;color:var(--accent);letter-spacing:.12em;margin-bottom:22px}
.step-title{font-size:18px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.step-desc{font-size:14px;line-height:1.65;color:var(--fg-3);margin:0}

/* Commitments (sostenibilidad) */
.commit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px);margin-top:52px}
.commit-card{border:1px solid var(--border-1);border-radius:4px;padding:34px 30px;background:var(--surface-card);transition:all .25s}
.commit-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.commit-card .c-icon{color:var(--accent);margin-bottom:20px}
.commit-card h3{font-size:19px;font-weight:600;margin:0 0 10px;letter-spacing:-.01em}
.commit-card p{font-size:14px;line-height:1.65;color:var(--fg-3);margin:0}

/* Generic end-of-page CTA strip for sub-pages */
.page-cta{
  margin-top:clamp(56px,7vw,88px);padding:clamp(36px,4vw,56px);
  border-radius:6px;background:var(--eda-deep-700);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;border:1px solid rgba(130,193,213,.16);
}
.page-cta::before{
  content:'';position:absolute;right:-4%;top:-40%;width:50%;height:180%;opacity:.12;
  background:radial-gradient(circle,var(--eda-cyan-300) 1.6px,transparent 2.1px);background-size:20px 20px;
  mask-image:linear-gradient(105deg,transparent 0%,#000 40%);-webkit-mask-image:linear-gradient(105deg,transparent 0%,#000 40%);
}
.page-cta h2{font-size:clamp(24px,2.6vw,34px);font-weight:300;letter-spacing:-.02em;line-height:1.15;margin:0;max-width:24ch;position:relative;z-index:1;color:#fff}
.page-cta p{color:rgba(255,255,255,.7);font-size:15px;line-height:1.6;margin:10px 0 0;max-width:52ch;position:relative;z-index:1}
.page-cta .btn{position:relative;z-index:1}

/* Cases page — vertical rhythm when cards carry descriptions */
.case .case-desc{display:none}
.cases-page .case .case-desc{display:block}
.cases-page .case{aspect-ratio:16/10}

@media (max-width: 960px){
  .steps-grid{grid-template-columns:1fr 1fr}
  .commit-grid{grid-template-columns:1fr}
  .page-cta{flex-direction:column;align-items:flex-start}
  .cases-page .case{aspect-ratio:4/3}
}
@media (max-width: 620px){
  .steps-grid{grid-template-columns:1fr}
  .case-body{left:20px;right:20px;bottom:20px}
  .case-title{font-size:21px}
}

/* Pulso de corriente en el guión de los eyebrows (feedback 05-jul) */
.eyebrow{position:relative}
.eyebrow::after{content:"";position:absolute;left:0;top:calc(50% - 1px);width:34px;height:2px;
  background:linear-gradient(90deg,transparent,var(--eda-cyan-300),transparent);
  background-size:200% 100%;opacity:0;animation:eyebrow-pulse 4.5s ease-in-out infinite}
@keyframes eyebrow-pulse{0%,55%{opacity:0;background-position:120% 0}70%{opacity:.9}85%,100%{opacity:0;background-position:-120% 0}}
@media (prefers-reduced-motion: reduce){.eyebrow::after{animation:none}}

/* ---------- SCADA architectures band (Ronald 13-jul) ----------
   Fast crossfade of blurred, unreadable architecture drawings from real
   projects — shows volume of delivered SCADA work without exposing any
   client, substation name or detail. */
.scada-band{background:var(--eda-deep-800);color:#fff;padding:clamp(64px,8vw,120px) 0;position:relative;overflow:hidden}
.scada-band .section-head{margin-bottom:44px}
.scada-band h2{color:#fff}
.scada-band .eyebrow{color:var(--eda-cyan-300)}
.scada-band p.lead-sm{color:rgba(255,255,255,.65);font-size:15px;line-height:1.7;max-width:62ch}
.scada-stage{
  position:relative;border-radius:6px;overflow:hidden;
  aspect-ratio:16/9;max-height:560px;width:100%;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.08);
}
.scada-stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;
  opacity:0;transform:scale(1.04);
  transition:opacity .5s ease, transform 2.4s linear;
}
.scada-stage img.on{opacity:1;transform:scale(1)}
.scada-stage::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,31,45,0) 55%,rgba(8,31,45,.55) 100%)}
.scada-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding:18px 22px;
}
.scada-caption .t{font-size:14px;font-weight:600;letter-spacing:.02em}
.scada-caption .idx{font-family:var(--font-mono);font-size:12px;color:var(--eda-cyan-300);letter-spacing:.12em}
@media (prefers-reduced-motion: reduce){.scada-stage img{transition:opacity .3s ease;transform:none}}

/* Services grid: closing CTA — 9 cards = 3 filas exactas; la CTA cierra como banda full-row */
.service-cta{
  grid-column:1 / -1;
  background:linear-gradient(135deg,var(--eda-deep-600) 0%,var(--eda-deep-800) 100%);
  color:#fff;
}
.service-cta .s-title{color:#fff}
.service-cta .s-desc{color:rgba(255,255,255,.72)}
.service-cta .s-icon{color:var(--eda-cyan-300)}
.service-cta .s-link{color:var(--eda-cyan-300)}
.service-cta:hover{background:linear-gradient(135deg,var(--eda-deep-500, #1d5d7d) 0%,var(--eda-deep-700) 100%)}
@media (max-width:960px){.service-cta{grid-column:span 1}}
@media (max-width:620px){.service-cta{grid-column:auto}}

/* Careers: explicit apply link on every opening */
.career-apply{display:inline-flex;align-items:center;gap:8px;margin-top:2px;color:var(--eda-cyan-600);font-weight:600;font-size:13px}
.career-apply:hover{text-decoration:underline}

/* ---------- SCADA mosaic — todas las arquitecturas en una pantalla (Ronald 14-jul) ---------- */
.scada-mosaic{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.scada-mosaic figure{
  position:relative;margin:0;border-radius:6px;overflow:hidden;
  aspect-ratio:99/70;   /* proporción A3 apaisado de los diagramas */
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 44px -22px rgba(0,0,0,.55);
  background:#0c1f29;
}
.scada-mosaic figure img{width:100%;height:100%;object-fit:cover;display:block}
.scada-mosaic-cap{
  border:1px dashed rgba(255,255,255,.18);border-radius:6px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:18px;
}
.scada-mosaic-cap .t{font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1.5}
@media (max-width:960px){.scada-mosaic{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.scada-mosaic{grid-template-columns:1fr}}

/* ---------- Contact — formulario guiado por categoría ---------- */
.cat-lbl{font-size:12px;font-weight:600;color:var(--fg-2);margin-bottom:8px;letter-spacing:.02em}
.cat-chips{display:flex;flex-wrap:wrap;gap:8px}
.cat-chip{position:relative;cursor:pointer}
.cat-chip input{position:absolute;opacity:0;pointer-events:none}
.cat-chip span{
  display:inline-flex;align-items:center;padding:9px 16px;border-radius:999px;
  border:1px solid var(--border-2);font-size:13.5px;font-weight:600;color:var(--fg-2);
  transition:all .18s;background:var(--surface-card);
}
.cat-chip:hover span{border-color:var(--accent)}
.cat-chip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff}
.cat-chip input:focus-visible + span{box-shadow:0 0 0 3px var(--accent-ring)}
.cat-block{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:18px;border:1px dashed var(--border-2);border-radius:4px;background:rgba(8,31,45,.02)}
.cat-block[hidden]{display:none}
.check-row{display:flex;flex-wrap:wrap;gap:8px 14px;padding-top:4px}
.check-row .ck{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--fg-2);cursor:pointer}
.check-row .ck input{accent-color:var(--accent);width:15px;height:15px}
.field.triple{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;grid-column:1 / -1}
.field.triple label{display:block;font-size:12px;font-weight:600;color:var(--fg-2);margin-bottom:6px}
@media (max-width:620px){.cat-block{grid-template-columns:1fr}.field.triple{grid-template-columns:1fr}}

/* ---------- Careers — modal de postulación por perfil ---------- */
.apply-modal{position:fixed;inset:0;z-index:200}
.apply-modal[hidden]{display:none}
.apply-backdrop{position:absolute;inset:0;background:rgba(8,31,45,.62);backdrop-filter:blur(3px)}
.apply-panel{
  position:relative;z-index:1;max-width:720px;margin:5vh auto;max-height:90vh;overflow:auto;
  background:var(--surface-card);border-radius:8px;padding:32px;box-shadow:0 40px 120px -30px rgba(0,0,0,.5);
}
.apply-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.apply-head h3{font-size:24px;font-weight:600;margin:4px 0 0;letter-spacing:-.01em}
.apply-close{background:none;border:0;cursor:pointer;color:var(--fg-3);padding:6px;border-radius:6px}
.apply-close:hover{background:rgba(8,31,45,.06);color:var(--fg-1)}
.apply-intro{font-size:13.5px;color:var(--fg-3);line-height:1.6;margin:0 0 20px;max-width:56ch}
#applyForm{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#applyForm .full{grid-column:1 / -1}
.apply-cv{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-2);background:rgba(79,167,202,.08);border:1px solid rgba(79,167,202,.25);border-radius:4px;padding:10px 12px;margin:0}
.apply-actions{display:flex;gap:12px}
@media (max-width:620px){#applyForm{grid-template-columns:1fr}.apply-panel{margin:0;max-height:100vh;border-radius:0}}

/* ---------- Band stat con valor textual largo (IEC 61850) ---------- */
.band-stat .n.n-txt{font-size:clamp(24px,2.4vw,34px);line-height:1.2;padding-top:6px}

/* ===== Arriendo (catálogo + banda home) ===== */
.rent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:22px}
.rent-grid-home{grid-template-columns:repeat(auto-fit,minmax(230px,380px))} /* teaser de 2 equipos: cap de ancho para que no se estiren a media banda */
.rent-card{background:var(--bg-canvas);border:1px solid rgba(10,40,55,.10);border-radius:6px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s var(--ease-out-smooth),box-shadow .25s var(--ease-out-smooth)}
.rent-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,30,40,.12)}
.rent-img{background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;padding:20px;border-bottom:1px solid rgba(10,40,55,.07)}
.rent-img img{max-width:100%;max-height:100%;object-fit:contain}
.rent-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.rent-tag{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:700}
.rent-title{font-size:17px;font-weight:650;margin:0}
.rent-desc{font-size:13.5px;line-height:1.55;color:var(--fg-2);margin:0;flex:1}
.rent-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:1px dashed rgba(10,40,55,.16)}
.rent-price{font-weight:700;font-size:15px;white-space:nowrap}
.rent-price .u{font-size:11.5px;color:var(--fg-2);font-weight:500;margin-left:3px}
.rent-note{margin-top:26px;font-size:12.5px;color:var(--fg-2);line-height:1.6;max-width:72ch}
.rent-perks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0 0 40px}
.rent-perk{display:flex;align-items:center;gap:12px;background:var(--bg-canvas);border:1px solid rgba(10,40,55,.10);border-radius:6px;padding:14px 16px;font-size:13.5px;font-weight:600}
.rent-perk i{color:var(--accent);flex:none}
.eq-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:6px 14px}

/* ===== Compactación móvil (15-jul): menos scroll en celular ===== */
@media (max-width: 620px){
  section{padding:44px 0}
  .subpage-hero{min-height:auto !important;padding:120px 0 44px !important}
  /* catálogo + banda de arriendo: cards horizontales compactas */
  .rent-grid,.rent-grid-home{grid-template-columns:1fr;gap:12px}
  .rent-card{flex-direction:row;align-items:stretch}
  .rent-img{width:110px;min-width:110px;aspect-ratio:1/1;padding:10px;border-bottom:0;border-right:1px solid rgba(10,40,55,.07)}
  .rent-body{padding:10px 12px 12px;gap:4px}
  .rent-title{font-size:14px}
  .rent-tag{font-size:9.5px}
  .rent-desc{font-size:12px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rent-foot{margin-top:auto;padding-top:8px}
  .rent-price{font-size:13px}
  .rent-foot .btn{padding:6px 11px;font-size:12px}
  .rent-perks{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:26px}
  .rent-perk{padding:10px 12px;font-size:12px;gap:8px}
  .rent-note{font-size:11.5px}
  /* teaser de servicios del home: 2 columnas compactas (cada card linkea al detalle) */
  #servicios .services-grid{grid-template-columns:1fr 1fr}
  #servicios .service-card{padding:16px 14px}
  #servicios .s-desc{display:none}
  #servicios .s-icon{margin-bottom:14px}
  #servicios .s-icon svg,#servicios .s-icon i{width:24px;height:24px}
  #servicios .s-title{font-size:13.5px}
  #servicios .s-num{font-size:9.5px}
  #servicios .s-link{font-size:11.5px}
  /* mosaico SCADA: 2 columnas (1 sola alargaba mucho) */
  .scada-mosaic{grid-template-columns:repeat(2,1fr)}
  /* form de contacto: equipos de arriendo en 2 columnas */
  .eq-grid{grid-template-columns:1fr 1fr;gap:4px 8px}
  .eq-grid .ck span{font-size:11.5px}
  /* footer: 2x2 en vez de 4 columnas apiladas */
  .footer-top{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand{grid-column:1 / -1}
}

/* móvil: logo completo sin corte (el wordmark es ancho) + casos 2 col */
@media (max-width: 620px){
  .site-header .logo img,
  .site-header.scrolled .logo img,
  .site-header:not(.scrolled) .logo img{height:30px}
  .footer-brand .logo img{height:32px}
  /* 25-jul: a 390px las cards 2-col quedaban en ~185px — el título tapaba toda
     la imagen y la etiqueta se cortaba. Misma receta que casos.html: 1 columna. */
  .cases-grid{grid-template-columns:1fr;gap:14px}
  .case{aspect-ratio:3/2}
  .case-title{font-size:17px;line-height:1.25}
  .case-tag{font-size:10px}
  .case-body{left:16px;right:16px;bottom:14px}
  .case-meta{flex-wrap:wrap;gap:6px 14px}
  /* casos.html: las cards llevan descripción visible → 1 columna y texto contenido
     (en 2 columnas el párrafo desbordaba la card y tapaba imagen y título) */
  .cases-page .cases-grid{grid-template-columns:1fr;gap:14px}
  .cases-page .case{aspect-ratio:3/2}
  .cases-page .case-title{font-size:17px}
  .cases-page .case-tag{font-size:10px}
  .cases-page .case-body{left:16px;right:16px;bottom:14px}
  .cases-page .case-desc{font-size:12.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------- Certificación ISO trinorma Bureau Veritas (Ronald 15-jul) ---------- */
.iso-badge{
  display:flex;align-items:center;gap:22px;margin-top:34px;padding:20px 22px;
  border:1px solid var(--border-1);border-radius:6px;background:#fff;
  box-shadow:0 14px 34px -20px rgba(8,31,45,.25);
}
.iso-badge img{width:210px;max-width:40%;height:auto;flex:none;border:1px solid var(--border-1);border-radius:10px}
.iso-badge h3{font-size:15px;font-weight:600;margin:0 0 6px;color:var(--fg-1)}
.iso-badge p{font-size:13.5px;color:var(--fg-3);line-height:1.6;margin:0}
@media (max-width:620px){
  .iso-badge{flex-direction:column;align-items:flex-start;gap:14px}
  .iso-badge img{width:190px;max-width:75%}
}
.footer-iso{height:56px;width:auto;align-self:flex-start;margin:16px 0 4px;border-radius:5px;display:block}

/* ===== Paquete UX 16-jul: motion discipline + view transitions + touch + forms ===== */

/* (1) Reduced motion = sitio completo y ESTÁTICO: nada oculto, nada moviéndose */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .marquee-track{animation:none !important}           /* logos visibles, quietos */
  .hero-layer{animation:none !important;opacity:0}
  .hero-layer-3{opacity:1}                            /* frame nocturno fijo */
  html{scroll-behavior:auto}
}
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  /* (2) View Transitions cross-document: crossfade nativo entre páginas.
     Chrome/Edge 126+ y Safari 18.2+; el resto navega normal sin efecto. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
}
/* El header sticky no cruza el fade: queda clavado entre páginas */
.site-header{view-transition-name:site-header}
::view-transition-group(site-header){animation:none}

/* (3) Feedback táctil: las cards y botones responden al toque (hoy solo al mouse) */
a,button{-webkit-tap-highlight-color:transparent}
a,button,.btn{touch-action:manipulation}
.btn:active{transform:scale(.97);transition:transform .08s}
@media (hover: none){
  .service-card:active,.rent-card:active,.case:active,.post:active,
  .career-card:active,.commit-card:active,.step-card:active{
    transform:scale(.985);transition:transform .08s;
  }
}

/* (8) Formularios en móvil: ≥16px evita el auto-zoom de iOS al enfocar */
@media (max-width: 960px){
  .field input,.field select,.field textarea{font-size:16px}
}

/* Hero degradado cuando autoplay falla (iOS Low Power Mode): poster fijo,
   sin crossfade de capas desincronizado */
.hero.hero-static .hero-layer{animation:none !important;opacity:0}
.hero.hero-static .hero-layer-3{opacity:1}

/* ===== Ola visual 16-jul: spotlight (desktop), grano+glows, unifilar animado ===== */

/* (5) Spotlight cyan que sigue el cursor — solo mouse fino; en táctil ni se registra.
   Opacidad baja a propósito: lee como instrumento de precisión, no como juguete. */
@media (hover: hover) and (pointer: fine){
  .service-card,.rent-card,.career-card,.commit-card{position:relative}
  .service-card::after,.rent-card::after,.career-card::after,.commit-card::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
    background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(100,187,215,.14),transparent 42%);
    opacity:0;transition:opacity .3s;
  }
  .service-card:hover::after,.rent-card:hover::after,
  .career-card:hover::after,.commit-card:hover::after{opacity:1}
}

/* (6) Grano estático + glows cyan en superficies oscuras — costo de runtime cero;
   de paso mata el banding del azul #081F2D en pantallas baratas */
.scada-band{background-image:url(../../assets/images/noise.png),
  radial-gradient(900px 480px at 82% 8%,rgba(100,187,215,.07),transparent 70%),
  radial-gradient(700px 420px at 8% 96%,rgba(100,187,215,.05),transparent 70%)}
.band{background-image:url(../../assets/images/noise.png),
  linear-gradient(135deg,var(--eda-deep-600) 0%,var(--eda-deep-700) 55%,var(--eda-deep-800) 100%)}
.page-cta{background-image:url(../../assets/images/noise.png),
  radial-gradient(720px 400px at 85% 0%,rgba(100,187,215,.08),transparent 70%)}
.service-cta{background-image:url(../../assets/images/noise.png),
  linear-gradient(135deg,var(--eda-deep-600) 0%,var(--eda-deep-800) 100%)}
.service-cta:hover{background-image:url(../../assets/images/noise.png),
  linear-gradient(135deg,var(--eda-deep-500,#1d5d7d) 0%,var(--eda-deep-700) 100%)}

/* ============================================================
   MODO OSCURO — overrides de componentes con colores fijos.
   Las variables semánticas ya cambian en colors_and_type.css;
   aquí solo lo que tenía blanco/marca hardcodeado.
   (Ronald 22-jul: tema claro/oscuro como Belden.)
   ============================================================ */
[data-theme="dark"] .site-header.scrolled{background:rgba(5,22,36,.88);border-bottom-color:rgba(130,193,213,.12)}
[data-theme="dark"] .site-header:not(.on-dark){color:#fff}
[data-theme="dark"] .site-header:not(.on-dark) .logo{color:var(--eda-cyan-300)}
[data-theme="dark"] .logo .logo-light{display:none}
[data-theme="dark"] .logo .logo-dark{display:block}
[data-theme="dark"] .site-header:not(.on-dark) .lang-toggle span.on{color:var(--eda-cyan-300)}
[data-theme="dark"] .site-header:not(.on-dark) .lang-toggle:hover,
[data-theme="dark"] .site-header:not(.on-dark) .header-linkedin:hover,
[data-theme="dark"] .site-header:not(.on-dark) .theme-toggle:hover{border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .site-header:not(.on-dark) .header-linkedin:hover{color:var(--eda-cyan-300)}
[data-theme="dark"] .site-header:not(.on-dark) .btn-outline:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .site-header:not(.on-dark) .menu-toggle{border-color:rgba(255,255,255,.2)}
[data-theme="dark"] .nav-dropdown-inner{background:rgba(11,38,54,.98);border-color:rgba(130,193,213,.18);color:var(--fg-1)}
[data-theme="dark"] .nav-dropdown a{color:var(--fg-1)}
[data-theme="dark"] .nav-dropdown a:hover{background:rgba(130,193,213,.10)}
/* headings de marca que usaban cyan-600/700 (ilegibles sobre oscuro) */
[data-theme="dark"] .article-body h2,[data-theme="dark"] .article-body h3,
[data-theme="dark"] .policy-item h3{color:var(--eda-cyan-300)}
/* bandas que se quedan CLARAS a propósito (logos de fabricantes, fotos de
   catálogo con fondo blanco, sellos ISO) — no hay versión oscura honesta */
[data-theme="dark"] .partners,[data-theme="dark"] .rent-img,[data-theme="dark"] .iso-badge{background:#fff}
[data-theme="dark"] .iso-badge *{color:var(--neutral-800)}

/* ---------- Toggle de tema (sol/luna, junto al idioma) ---------- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;border:1px solid transparent;color:inherit;opacity:.85;transition:all .2s}
.theme-toggle:hover{opacity:1;border-color:rgba(255,255,255,.15);color:var(--eda-cyan-300)}
.site-header:not(.on-dark) .theme-toggle:hover{border-color:var(--border-2);color:var(--eda-cyan-600)}
.theme-toggle .ic-moon{display:block}
.theme-toggle .ic-sun{display:none}
[data-theme="dark"] .theme-toggle .ic-moon{display:none}
[data-theme="dark"] .theme-toggle .ic-sun{display:block}
.mm-foot-row .theme-toggle{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.18);width:38px;height:38px}

/* ---------- Dark-mode contrast fixes (25-jul) ---------- */
/* partners strip stays white in dark → keep the light-theme gray on it */
[data-theme="dark"] .partners-lbl{color:var(--neutral-500)}
/* cyan-600 fails on dark surfaces → use the dark accent */
[data-theme="dark"] .career-apply{color:var(--eda-cyan-300)}
/* dark accent (cyan-300) is light → white label was 1.99:1; use ink */
[data-theme="dark"] .cat-chip input:checked + span{color:#082330}
/* politica subtitle has an inline cyan-700 tuned for light */
[data-theme="dark"] [data-i18n="policy.subtitle"]{color:var(--eda-cyan-300)!important}
/* contact section is dark in BOTH themes → fg-3 (light gray) was 4.38:1 there */
.contact-section .contact-block .lbl{color:#8aa3b0}