/* COMJESA — sistema visual luminoso basado en la guía de marca. */
:root{--ink:#103952;--blue:#1e648b;--deep-blue:#0a293d;--orange:#f47a20;--orange-light:#ffaf70;--pale:#f3f6f8;--line:#d6dfe2;--muted:#64747c;--green:#427b63;--yellow:#f47a20}
body{background:#f3f6f8;color:#172e3b}
header,header.is-scrolled,body:not([data-page="home"]) header{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(16,57,82,.12);box-shadow:0 10px 35px rgba(16,57,82,.07);backdrop-filter:blur(18px)}
header .wrap{min-height:96px}header button[data-page="home"]{width:215px;height:92px;overflow:visible}header .logo{width:205px!important;height:84px!important;object-fit:contain;transform:scale(1.28)!important;filter:none!important}.logo-lettering{display:none!important}
.header-contact,.menu-toggle,.btn{border-radius:999px!important}.header-contact{background:var(--orange)!important;color:white!important;box-shadow:0 10px 28px rgba(244,122,32,.22)!important}.menu-toggle{color:var(--ink);border:1px solid rgba(16,57,82,.22);background:white}.menu-toggle:hover{color:white;background:var(--ink)}
.site-menu{background:rgba(255,255,255,.98);border:1px solid var(--line);box-shadow:0 24px 60px rgba(10,41,61,.16)}.site-menu button{color:var(--ink)}.site-menu button:hover{background:var(--pale);color:var(--blue)}.site-menu button small{color:var(--muted)}.site-menu>a{background:var(--orange);color:white}
.visual-hero.scene-carousel{background:var(--deep-blue)}
.hero-slide .hero-shade{background:linear-gradient(90deg,rgba(10,41,61,.94) 0%,rgba(10,41,61,.73) 40%,rgba(10,41,61,.2) 76%),linear-gradient(0deg,rgba(10,41,61,.74),transparent 55%,rgba(10,41,61,.2))}
.hero-slide:before{background:radial-gradient(circle at 76% 24%,rgba(30,100,139,.42),transparent 25%),radial-gradient(circle at 66% 72%,rgba(66,123,99,.3),transparent 24%),radial-gradient(circle at 46% 20%,rgba(244,122,32,.16),transparent 17%);opacity:.72}
.hero-slide:after{background:radial-gradient(circle,rgba(255,175,112,.2),rgba(30,100,139,.14) 38%,transparent 69%)}
.hero-copy .eyebrow{color:var(--orange-light)}.hero-copy h1 span{color:#fff;text-shadow:none}.hero-copy .btn.primary,.contact form .btn.primary{background:var(--orange);border-color:var(--orange);color:white}.hero-copy .btn.primary:hover,.contact form .btn.primary:hover{background:#d96112;border-color:#d96112}.hero-copy .btn.light{border-color:rgba(255,255,255,.7)}
.scene-selector[aria-pressed="true"]{border-color:var(--orange)}.scene-selector[aria-pressed="true"] span{color:var(--orange-light)}.scene-arrows button{border-radius:50%!important}.visual-hero.scene-carousel:after{background:linear-gradient(transparent,var(--pale))}

.brand-energy{position:absolute;z-index:2;right:4vw;top:145px;width:min(34vw,500px);aspect-ratio:1;pointer-events:none;opacity:.72;filter:saturate(1.1);mix-blend-mode:screen}
.brand-energy__halo{position:absolute;inset:12%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.13),rgba(30,100,139,.09) 36%,transparent 68%);filter:blur(10px)}
.brand-energy__node,.brand-energy__core{position:absolute;display:block;border-radius:50%}.brand-energy__node{width:18%;aspect-ratio:1;border:1px solid rgba(255,255,255,.45);backdrop-filter:blur(3px)}
.brand-energy__node:after{content:'';position:absolute;inset:23%;border-radius:50%;background:white;opacity:.72;filter:blur(1px)}
.brand-energy__node--green{left:3%;top:29%;background:radial-gradient(circle at 38% 35%,#d6ffe8,#5ca576 35%,rgba(66,123,99,.08) 72%);box-shadow:0 0 46px rgba(66,123,99,.75)}
.brand-energy__node--blue{right:5%;top:4%;background:radial-gradient(circle at 38% 35%,#e4f6ff,#4d9bca 36%,rgba(30,100,139,.08) 72%);box-shadow:0 0 52px rgba(30,100,139,.82)}
.brand-energy__node--orange{right:1%;bottom:4%;background:radial-gradient(circle at 38% 35%,#fff1de,#ff9b52 36%,rgba(244,122,32,.08) 72%);box-shadow:0 0 54px rgba(244,122,32,.78)}
.brand-energy__core{left:46%;top:46%;width:13%;aspect-ratio:1;background:radial-gradient(circle at 36% 32%,#fff,#ffe0a1 24%,#f47a20 70%);box-shadow:0 0 28px #ffaf70,0 0 70px rgba(244,122,32,.7)}
.brand-energy__line{position:absolute;display:block;left:51%;top:51%;height:2px;transform-origin:left center;opacity:.7}.brand-energy__line:after{content:'';position:absolute;inset:-4px 0;background:inherit;filter:blur(7px)}
.brand-energy__line--green{width:39%;transform:rotate(201deg);background:linear-gradient(90deg,#ffe0a1,#71b98b 82%,transparent)}.brand-energy__line--blue{width:38%;transform:rotate(-47deg);background:linear-gradient(90deg,#ffe0a1,#59aee0 82%,transparent)}.brand-energy__line--orange{width:40%;transform:rotate(43deg);background:linear-gradient(90deg,#ffe0a1,#ff9b52 82%,transparent)}

.home-conversion{color:var(--ink);background:var(--pale);padding-top:120px;padding-bottom:105px}.home-conversion:before{right:-190px;top:-290px;background:radial-gradient(circle,rgba(30,100,139,.17),rgba(66,123,99,.09) 40%,transparent 70%);filter:blur(10px)}.home-conversion:after{background:radial-gradient(circle,rgba(244,122,32,.12),rgba(255,175,112,.07) 38%,transparent 70%)}
.conversion-copy .eyebrow,.eyebrow{color:var(--orange)}.conversion-copy h2{color:var(--ink)}.conversion-copy h2 span{color:var(--blue)}.conversion-copy p:not(.eyebrow){color:var(--muted)}.conversion-copy .btn.primary{background:var(--orange);border-color:var(--orange);color:white}.conversion-copy .tech-outline{border-color:rgba(16,57,82,.28)!important;background:white!important;color:var(--ink)!important}.conversion-copy .tech-outline:hover{border-color:var(--blue)!important;background:var(--ink)!important;color:white!important}
.conversion-steps li{color:var(--ink);border-color:var(--line)}.conversion-steps span{color:var(--orange)}.conversion-steps small{color:var(--muted)}
.home-routes{background:white;padding-bottom:108px}.home-routes button{color:var(--ink);border-color:var(--line);background:transparent}.home-routes button+button{border-left-color:var(--line)}.home-routes button:hover{background:var(--pale);border-color:var(--line)}.home-routes span{color:var(--orange)}.home-routes small{color:var(--muted)}.home-routes i{color:var(--blue)}
.contact{background:linear-gradient(128deg,#0a293d,#103952 62%,#1e648b);padding-top:108px}.contact:before{background:radial-gradient(circle,rgba(255,175,112,.2),rgba(30,100,139,.16) 40%,transparent 70%)}.contact:after{background:radial-gradient(circle,rgba(66,123,99,.25),transparent 68%)}.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--orange-light);box-shadow:inset 0 -2px var(--orange-light)}.contact .form-preview{border-left-color:var(--orange-light)}
body:not([data-page="home"]) main{background:linear-gradient(180deg,#fff,var(--pale) 70%)}

.motion-ready h2.kinetic-title{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(42px);transition:opacity .75s ease,transform .9s cubic-bezier(.16,1,.3,1),clip-path .9s cubic-bezier(.16,1,.3,1)}.motion-ready h2.kinetic-title.is-title-visible{opacity:1;clip-path:inset(0);transform:none}
@media(prefers-reduced-motion:no-preference){
  .hero-slide:not([hidden]) h1.kinetic-title{animation:brand-title-rise .95s cubic-bezier(.16,1,.3,1) both}.hero-slide:not([hidden]) h1.kinetic-title span{display:inline-block;animation:brand-title-accent 1.15s .12s cubic-bezier(.16,1,.3,1) both}
  .brand-energy{animation:brand-field-float 11s ease-in-out infinite alternate}.brand-energy__halo{animation:brand-halo-pulse 5.5s ease-in-out infinite}.brand-energy__node--green{animation:brand-node-green 7s ease-in-out infinite alternate}.brand-energy__node--blue{animation:brand-node-blue 8.5s ease-in-out infinite alternate}.brand-energy__node--orange{animation:brand-node-orange 9.5s ease-in-out infinite alternate}.brand-energy__core{animation:brand-core-pulse 2.8s ease-in-out infinite}
  @keyframes brand-title-rise{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(58px)}to{opacity:1;clip-path:inset(0);transform:none}}
  @keyframes brand-title-accent{from{opacity:0;transform:translateY(26px);letter-spacing:.01em}to{opacity:1;transform:none;letter-spacing:inherit}}
  @keyframes brand-field-float{from{transform:translate3d(-2%,1%,0) rotate(-2deg)}to{transform:translate3d(3%,-3%,0) rotate(3deg)}}
  @keyframes brand-halo-pulse{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.1)}}
  @keyframes brand-node-green{to{transform:translate3d(-14px,17px,0) scale(1.08)}}@keyframes brand-node-blue{to{transform:translate3d(10px,-16px,0) scale(.94)}}@keyframes brand-node-orange{to{transform:translate3d(16px,11px,0) scale(1.07)}}
  @keyframes brand-core-pulse{0%,100%{transform:scale(.9);filter:brightness(.95)}50%{transform:scale(1.14);filter:brightness(1.2)}}
}

/* ==========================================================
   V3 — Red energética continua + navegación translúcida
   ========================================================== */

html {
  background: #0a293d;
}

body {
  position: relative;
  min-height: 100%;
  background: transparent;
}

.energy-network-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #0a293d;
}

.energy-network-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.network-current {
  fill: none;
  stroke: url(#network-current);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 12 18;
  opacity: .55;
  filter: drop-shadow(0 0 7px rgba(255, 211, 61, .28));
  vector-effect: non-scaling-stroke;
}

.network-current--two {
  stroke-width: 1.7;
  opacity: .36;
}

header,
main,
footer {
  position: relative;
}

header {
  z-index: 20;
}

main,
footer {
  z-index: 1;
}

.page-energy-flow {
  display: none !important;
}

header,
header.is-scrolled,
body:not([data-page="home"]) header {
  background: rgba(8, 31, 45, .76);
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 10px 35px rgba(2, 16, 24, .18);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}

header .wrap {
  min-height: 90px;
  gap: 0;
}

header button[data-page="home"] {
  align-self: stretch;
  width: 245px;
  height: 90px;
  padding-inline: 20px !important;
  background: rgba(255, 255, 255, .9) !important;
  border-right: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 0 !important;
}

header .logo {
  width: min(210px, 100%);
  transform: none;
}

.primary-nav {
  align-self: stretch;
  gap: 0;
  height: 90px;
}

.primary-nav button,
.primary-nav a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 clamp(14px, 1.55vw, 26px);
  color: rgba(255, 255, 255, .92);
  border-left: 1px solid rgba(255, 255, 255, .065);
  font-size: clamp(.76rem, .87vw, .92rem);
  font-weight: 500;
  letter-spacing: .015em;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}

.primary-nav button:hover,
.primary-nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.primary-nav button::after,
.primary-nav a::after {
  right: 18%;
  bottom: 0;
  left: 18%;
  height: 3px;
  background: var(--yellow);
}

.home-conversion {
  color: #fff;
  background: rgba(16, 57, 82, .78);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

.home-conversion::before {
  opacity: .34;
  background:
    radial-gradient(circle at 14% 15%, rgba(42, 152, 199, .26), transparent 34%),
    radial-gradient(circle at 83% 78%, rgba(0, 169, 156, .18), transparent 35%);
}

.conversion-copy .eyebrow {
  color: #82d5f2;
}

.conversion-copy h2,
.conversion-copy h2 span {
  color: #fff;
}

.conversion-copy h2 span {
  color: #9ddff5;
}

.conversion-copy p {
  color: rgba(229, 242, 248, .88);
}

.conversion-steps li {
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .045);
}

.conversion-steps small {
  color: rgba(218, 235, 242, .82);
}

.conversion-steps span {
  color: var(--yellow);
}

.home-routes {
  color: #fff;
  background: rgba(10, 41, 61, .74);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(11px);
  backdrop-filter: blur(11px);
}

.home-routes .eyebrow,
.home-routes h2,
.home-routes button strong {
  color: #fff;
}

.home-routes .section-lead,
.home-routes button small {
  color: rgba(218, 235, 242, .8);
}

.home-routes button {
  background: rgba(255, 255, 255, .045);
  border-color: rgba(255, 255, 255, .2);
}

.home-routes button:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 211, 61, .72);
}

.contact {
  background: rgba(10, 41, 61, .88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

body:not([data-page="home"]) main {
  background: rgba(246, 250, 252, .96);
}

@keyframes network-current-forward {
  to { stroke-dashoffset: -300; }
}

@keyframes network-current-reverse {
  to { stroke-dashoffset: 300; }
}

@media (prefers-reduced-motion: no-preference) {
  .network-current--one {
    animation: network-current-forward 18s linear infinite;
  }

  .network-current--two {
    animation: network-current-reverse 24s linear infinite;
  }
}

@media (max-width: 1100px) {
  header .wrap {
    min-height: 78px;
  }

  header button[data-page="home"] {
    width: 188px;
    height: 78px;
    padding-inline: 15px !important;
  }

  header .logo {
    width: 160px;
  }

  .menu-toggle {
    color: #fff !important;
  }

  .site-menu {
    top: 78px;
    color: #fff;
    background: rgba(8, 31, 45, .94);
    border-color: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .site-menu button {
    color: rgba(255, 255, 255, .92);
    background: transparent;
    border-color: rgba(255, 255, 255, .12);
  }

  .site-menu button:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
  }
}

@media (max-width: 620px) {
  .energy-network-bg svg {
    width: 150%;
    margin-left: -25%;
  }

  .home-conversion,
  .home-routes {
    background-color: rgba(10, 41, 61, .78);
  }
}
@media(max-width:1000px){.brand-energy{right:-8vw;top:175px;width:480px;opacity:.55}.home-conversion{padding-top:92px}}
@media(max-width:720px){
  header .wrap{min-height:76px}header button[data-page="home"]{width:164px;height:72px}header .logo{width:158px!important;height:66px!important;transform:scale(1.18)!important}.header-contact{display:none}.menu-toggle{border:0;background:transparent}
  .hero-slide{min-height:820px}.hero-slide .hero-copy{padding-top:132px}.hero-slide .hero-shade{background:linear-gradient(90deg,rgba(10,41,61,.94),rgba(10,41,61,.54)),linear-gradient(0deg,rgba(10,41,61,.9),transparent 58%)}
  .brand-energy{right:-105px;top:120px;width:390px;opacity:.54}.brand-energy__node{width:16%}
  .visual-hero.scene-carousel:after{height:100px}.home-conversion{padding-top:78px;padding-bottom:62px}.home-routes{padding-bottom:76px}.home-routes button{border-top-color:var(--line)}.home-routes button+button{border-left:0}.contact{padding-top:76px}
}
@media(prefers-reduced-motion:reduce){.brand-energy{display:none}.motion-ready h2.kinetic-title{opacity:1;clip-path:none;transform:none}}

/* V2 — navegación abierta y flujos de energía; amarillo como acento principal. */
:root{--yellow:#ffd33d;--orange:#f47a20}
header .wrap{display:flex;align-items:center;gap:32px}
.primary-nav{display:flex;align-items:center;justify-content:flex-end;gap:clamp(18px,2.2vw,38px);margin-left:auto;white-space:nowrap}
.primary-nav button,.primary-nav a{position:relative;padding:12px 0;border:0;background:transparent;color:var(--ink);font:650 13px/1.2 'Avenir Next','Segoe UI',Arial,sans-serif;text-decoration:none;letter-spacing:.005em;cursor:pointer}
.primary-nav button:after,.primary-nav a:after{content:'';position:absolute;left:0;right:100%;bottom:5px;height:2px;background:var(--yellow);transition:right .28s cubic-bezier(.2,.8,.2,1)}
.primary-nav button:hover:after,.primary-nav a:hover:after,.primary-nav button[aria-current="true"]:after{right:0}
.primary-nav button:hover,.primary-nav a:hover{color:var(--blue)}
.header-actions{display:none}
.site-menu{border-top:3px solid var(--yellow)}.site-menu>a{background:var(--yellow);color:var(--ink)}

.header-contact,.hero-copy .btn.primary,.contact form .btn.primary,.conversion-copy .btn.primary{background:var(--yellow)!important;border-color:var(--yellow)!important;color:var(--ink)!important;box-shadow:0 12px 28px rgba(255,211,61,.24)!important}
.header-contact:hover,.hero-copy .btn.primary:hover,.contact form .btn.primary:hover,.conversion-copy .btn.primary:hover{background:#ffe16c!important;border-color:#ffe16c!important}
.hero-copy .eyebrow{color:#ffe16c}.scene-selector[aria-pressed="true"]{border-color:var(--yellow)}.scene-selector[aria-pressed="true"] span{color:#ffe16c}
.conversion-copy .eyebrow,.eyebrow{color:#987000}.conversion-copy h2 span{color:var(--blue)}.conversion-steps span,.home-routes span{color:#9b7200}
.home-conversion:after{background:radial-gradient(circle,rgba(255,211,61,.17),rgba(66,123,99,.07) 40%,transparent 70%)}
.contact:before{background:radial-gradient(circle,rgba(255,211,61,.18),rgba(30,100,139,.14) 42%,transparent 70%)}
.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--yellow);box-shadow:inset 0 -2px var(--yellow)}.contact .form-preview{border-left-color:var(--yellow)}

#home{position:relative;isolation:isolate;overflow:hidden}#home>.visual-hero,#home>.home-conversion,#home>.home-routes{position:relative;z-index:1}
.brand-energy{display:none}
.page-energy-flow{position:absolute;z-index:3;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:.52}
.energy-path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-width:2.2;stroke-dasharray:14 12;filter:drop-shadow(0 0 7px rgba(255,211,61,.35))}.energy-path--a{stroke:url(#energy-flow-a)}.energy-path--b{stroke:url(#energy-flow-b);stroke-width:1.5;opacity:.6}.energy-path--c{stroke:url(#energy-flow-a);stroke-width:1.3;opacity:.45}
.home-routes{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;padding-inline:max(6vw,calc((100vw - 1280px)/2));}.home-routes button{min-height:145px}.home-routes button+button{border-left-color:var(--line)}
#sistemas-antiincendios,#preguntas-frecuentes{scroll-margin-top:120px}

@media(prefers-reduced-motion:no-preference){.energy-path--a{animation:energy-current 13s linear infinite}.energy-path--b{animation:energy-current 18s linear infinite reverse}.energy-path--c{animation:energy-current 16s linear infinite}@keyframes energy-current{to{stroke-dashoffset:-260}}}
@media(max-width:1100px){.primary-nav{display:none}.header-actions{display:flex;margin-left:auto}.header-contact{display:none!important}.menu-toggle{border:0;background:transparent;color:var(--ink);box-shadow:none}.menu-toggle:hover{background:transparent;color:var(--blue)}}
@media(max-width:720px){.page-energy-flow{opacity:.42;height:92%}.energy-path{stroke-width:1.6}.energy-path--b{display:none}.home-routes{grid-template-columns:1fr;padding-inline:24px}.home-routes button+button{border-left:0}.menu-toggle{font-size:0;gap:0}.menu-toggle span{font-size:22px}}
@media(prefers-reduced-motion:reduce){.energy-path{stroke-dasharray:none}}

/* V3 — cierre de cascada: estas reglas prevalecen sobre el tema anterior. */
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(8,31,45,.76);
  border-bottom:1px solid rgba(255,255,255,.13);
  box-shadow:0 10px 35px rgba(2,16,24,.18);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  backdrop-filter:blur(20px) saturate(1.2)
}

/* V6 — logo original, sin marco, sobre una barra clara continua. */
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(246,248,247,.94);
  border-bottom:1px solid rgba(18,61,81,.14);
  box-shadow:0 10px 30px rgba(8,34,47,.09);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08)
}
header .wrap{min-height:110px}
header button[data-page="home"]{
  width:190px;
  height:110px;
  padding:0!important;
  background-color:transparent!important;
  background-image:url('assets/comjesa-logo-transparent.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:132px auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none
}
header button[data-page="home"]:before,
header button[data-page="home"]:after{display:none!important}
.primary-nav{height:110px}
.primary-nav button,.primary-nav a{
  color:#143f56;
  border-left-color:rgba(20,63,86,.09)
}
.primary-nav button:hover,.primary-nav a:hover{
  color:#0d5f87;
  background:rgba(30,100,139,.075)
}
.menu-toggle{color:#143f56!important}

@media(min-width:861px) and (max-width:1100px){
  header .wrap{min-height:94px}
  header button[data-page="home"]{width:150px;height:94px;background-position:center!important;background-size:114px auto!important}
  .primary-nav{height:94px}
}
@media(max-width:860px){
  header .wrap{min-height:84px}
  header button[data-page="home"]{width:132px;height:84px;background-position:center!important;background-size:100px auto!important}
  .menu-toggle{color:#143f56!important}
}
header .wrap{min-height:90px;gap:0}
header button[data-page="home"]{align-self:stretch;width:245px;height:90px;padding-inline:20px!important;background:rgba(255,255,255,.9)!important;border-right:1px solid rgba(255,255,255,.2)!important;border-radius:0!important}
header .logo{width:210px!important;height:auto!important;transform:none!important}
.primary-nav{align-self:stretch;height:90px;gap:0;margin-left:auto}
.primary-nav button,.primary-nav a{display:flex;align-items:center;justify-content:center;height:100%;padding:0 clamp(14px,1.55vw,26px);color:rgba(255,255,255,.92);border-left:1px solid rgba(255,255,255,.065);font:500 clamp(.76rem,.87vw,.92rem)/1.2 'Avenir Next','Segoe UI',Arial,sans-serif;letter-spacing:.015em}
.primary-nav button:hover,.primary-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.primary-nav button:after,.primary-nav a:after{left:18%;right:82%;bottom:0;height:3px}
.primary-nav button:hover:after,.primary-nav a:hover:after,.primary-nav button[aria-current="true"]:after{right:18%}
.page-energy-flow{display:none!important}
.home-conversion{color:#fff;background:rgba(16,57,82,.78);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.home-conversion:before{opacity:.34;background:radial-gradient(circle at 14% 15%,rgba(42,152,199,.26),transparent 34%),radial-gradient(circle at 83% 78%,rgba(0,169,156,.18),transparent 35%)}
.conversion-copy .eyebrow{color:#82d5f2}
.conversion-copy h2{color:#fff}.conversion-copy h2 span{color:#9ddff5}.conversion-copy p:not(.eyebrow){color:rgba(229,242,248,.88)}
.conversion-steps li{color:#fff;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.045)}
.conversion-steps span{color:var(--yellow)}.conversion-steps small{color:rgba(218,235,242,.82)}
.home-routes{color:#fff;background:rgba(10,41,61,.74);border-bottom:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px)}
.home-routes .eyebrow,.home-routes h2,.home-routes button strong{color:#fff}.home-routes .section-lead,.home-routes button small{color:rgba(218,235,242,.8)}
.home-routes button{color:#fff;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.2)}.home-routes button+button{border-left-color:rgba(255,255,255,.2)}.home-routes button:hover{background:rgba(255,255,255,.1);border-color:rgba(255,211,61,.72)}
.home-routes span{color:var(--yellow)}
.contact{background:rgba(10,41,61,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body:not([data-page="home"]) main{background:rgba(246,250,252,.96)}

@media(max-width:1100px){
  header .wrap{min-height:78px}
  header button[data-page="home"]{width:188px;height:78px;padding-inline:15px!important}
  header .logo{width:160px!important;height:auto!important;transform:none!important}
  .menu-toggle{color:#fff!important}
  .site-menu{top:78px;color:#fff;background:rgba(8,31,45,.94);border-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
  .site-menu button{color:rgba(255,255,255,.92);background:transparent;border-color:rgba(255,255,255,.12)}
  .site-menu button:hover{color:#fff;background:rgba(255,255,255,.08)}
}
@media(max-width:720px){header .wrap{min-height:76px}header button[data-page="home"]{width:164px;height:76px}header .logo{width:150px!important;height:auto!important;transform:none!important}}

/* V4 — más luz, menos azul y logo integrado como emisor de energía. */
html{background:#142d30}
.energy-network-bg{background:#142d30}
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(13,29,31,.78);
  border-bottom-color:rgba(255,255,255,.12)
}
header button[data-page="home"]{
  position:relative;
  z-index:2;
  overflow:visible;
  width:254px;
  background-color:transparent!important;
  background-image:url('assets/comjesa-logo-header.png')!important;
  background-repeat:no-repeat!important;
  background-position:10px center!important;
  background-size:226px auto!important;
  border-right:0!important;
  border-radius:0 70px 70px 0!important;
  box-shadow:none
}
header button[data-page="home"]:before{
  content:'';
  position:absolute;
  z-index:-1;
  top:50%;
  right:-17px;
  width:92px;
  height:92px;
  transform:translateY(-50%);
  border:1px solid rgba(255,211,61,.76);
  border-left-color:rgba(37,184,162,.32);
  border-radius:50%;
  box-shadow:0 0 0 9px rgba(255,211,61,.035),0 0 26px rgba(255,211,61,.22)
}
header button[data-page="home"]:after{
  content:'';
  position:absolute;
  right:-29px;
  top:50%;
  width:13px;
  height:13px;
  transform:translateY(-50%);
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 6px rgba(255,211,61,.1),0 0 20px rgba(255,211,61,.75)
}
header .logo{
  opacity:0
}
.hero-slide .hero-shade{
  background:linear-gradient(90deg,rgba(10,27,29,.9) 0%,rgba(13,38,39,.64) 43%,rgba(20,45,46,.12) 78%),linear-gradient(0deg,rgba(11,31,33,.72),transparent 58%,rgba(12,28,30,.18))
}
.home-conversion{
  background:rgba(28,55,54,.72);
  border-color:rgba(166,215,200,.2)
}
.conversion-copy .eyebrow{color:#a7ddd2}
.conversion-copy h2 span{color:#d4eee7}
.home-routes{
  color:#17343a;
  background:rgba(247,248,239,.91);
  border-bottom-color:rgba(23,52,58,.12)
}
.home-routes .eyebrow{color:#218b7d}
.home-routes h2,.home-routes button strong{color:#17343a}
.home-routes .section-lead,.home-routes button small{color:#5d7476}
.home-routes button{color:#17343a;background:rgba(255,255,255,.52);border-color:rgba(23,52,58,.16)}
.home-routes button+button{border-left-color:rgba(23,52,58,.16)}
.home-routes button:hover{color:#17343a;background:rgba(255,255,255,.82);border-color:rgba(255,211,61,.9)}
.home-routes span{color:#218b7d}
.contact{background:rgba(24,48,49,.9)}

@media(max-width:1100px){
  header button[data-page="home"]{width:218px;border-radius:0 58px 58px 0!important}
  header button[data-page="home"]{background-position:9px center!important;background-size:188px auto!important}
  header button[data-page="home"]:before{right:-12px;width:78px;height:78px}
  header button[data-page="home"]:after{right:-21px;width:11px;height:11px}
}
@media(min-width:861px) and (max-width:1100px){
  header .wrap{min-height:78px;padding-inline:3vw}
  header button[data-page="home"]{width:176px;height:78px;background-position:5px center!important;background-size:150px auto!important}
  header button[data-page="home"]:before{right:-8px;width:70px;height:70px}
  header button[data-page="home"]:after{right:-15px;width:9px;height:9px}
  .primary-nav{display:flex;height:78px;gap:0}
  .primary-nav button,.primary-nav a{padding-inline:clamp(7px,1vw,11px);font-size:clamp(.61rem,1.02vw,.72rem);letter-spacing:0}
  .header-actions{display:none}
}
@media(max-width:720px){
  header button[data-page="home"]{width:205px;border-radius:0 52px 52px 0!important}
  header button[data-page="home"]{background-position:8px center!important;background-size:176px auto!important}
  header .logo{width:154px!important}
  header button[data-page="home"]:before{right:-10px;width:70px;height:70px}
  header button[data-page="home"]:after{right:-18px;width:10px;height:10px}
  .menu-toggle{display:flex;align-items:center;gap:7px;font-size:11px!important;text-transform:uppercase;letter-spacing:.11em}
  .menu-toggle span{font-size:18px!important}
  .hero-slide .hero-shade{background:linear-gradient(90deg,rgba(10,27,29,.88),rgba(15,40,41,.46)),linear-gradient(0deg,rgba(10,28,30,.82),transparent 68%)}
  .home-conversion{background:rgba(28,55,54,.76)}
  .home-routes{background:rgba(247,248,239,.94)}
}

/* V5 — marco rectangular y azul petróleo más luminoso. */
html{background:#17465a}
.energy-network-bg{background:#17465a}
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(10,37,52,.8);
  border-bottom-color:rgba(165,218,239,.22)
}
header button[data-page="home"]{
  background-image:url('assets/comjesa-logo-header-light.png')!important;
  background-color:rgba(120,190,218,.075)!important;
  border:1px solid rgba(137,205,232,.34)!important;
  border-radius:0!important;
  box-shadow:inset 0 -3px var(--yellow),0 0 25px rgba(104,180,212,.12)
}
header button[data-page="home"]:before{
  z-index:0;
  inset:7px;
  width:auto;
  height:auto;
  transform:none;
  border:1px solid rgba(173,224,242,.24);
  border-radius:0;
  box-shadow:none
}
header button[data-page="home"]:after{
  right:auto;
  top:auto;
  bottom:-1px;
  left:0;
  width:44%;
  height:3px;
  transform:none;
  border-radius:0;
  background:linear-gradient(90deg,var(--yellow),rgba(255,211,61,.08));
  box-shadow:0 0 14px rgba(255,211,61,.48)
}
.hero-slide .hero-shade{
  background:linear-gradient(90deg,rgba(9,38,54,.87) 0%,rgba(19,68,88,.58) 44%,rgba(56,112,132,.09) 79%),linear-gradient(0deg,rgba(12,45,60,.66),transparent 58%,rgba(16,48,62,.14))
}
.home-conversion{
  background:rgba(31,78,98,.7);
  border-color:rgba(164,215,235,.22)
}
.conversion-copy .eyebrow{color:#b7e1f1}
.conversion-copy h2 span{color:#d8eef7}
.contact{background:rgba(18,55,70,.88)}

@media(max-width:720px){
  .hero-slide .hero-shade{background:linear-gradient(90deg,rgba(9,38,54,.86),rgba(30,83,103,.38)),linear-gradient(0deg,rgba(11,43,57,.76),transparent 68%)}
  .home-conversion{background:rgba(31,78,98,.74)}
}

/* V7 — área de logo como pantalla publicitaria integrada. */
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(242,245,246,.95);
  border-bottom:1px solid rgba(18,61,81,.14);
  box-shadow:0 10px 30px rgba(8,34,47,.1);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08)
}
header .wrap{min-height:108px}
header button[data-page="home"]{
  position:relative;
  overflow:hidden;
  width:205px;
  height:108px;
  padding:0!important;
  background-color:#05090b!important;
  background-image:url('assets/comjesa-logo-screen.png'),radial-gradient(circle at 50% 38%,rgba(255,211,61,.15),transparent 38%)!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:130px auto,100% 100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:inset 0 0 28px rgba(32,144,190,.12),0 8px 25px rgba(6,25,34,.15)
}
header button[data-page="home"]:before{
  content:'';
  display:block!important;
  position:absolute;
  z-index:1;
  inset:0;
  width:auto;
  height:auto;
  transform:none;
  border:0;
  border-radius:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 4px);
  box-shadow:none;
  pointer-events:none
}
header button[data-page="home"]:after{
  content:'';
  display:block!important;
  position:absolute;
  z-index:2;
  right:9px;
  bottom:8px;
  left:auto;
  top:auto;
  width:7px;
  height:7px;
  transform:none;
  border-radius:50%;
  background:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,211,61,.08),0 0 12px rgba(255,211,61,.8)
}
.primary-nav{height:108px}
.primary-nav button,.primary-nav a{color:#143f56;border-left-color:rgba(20,63,86,.09)}
.primary-nav button:hover,.primary-nav a:hover{color:#0d5f87;background:rgba(30,100,139,.075)}
.menu-toggle{color:#143f56!important}

@media(min-width:861px) and (max-width:1100px){
  header .wrap{min-height:94px}
  header button[data-page="home"]{width:165px;height:94px;background-position:center!important;background-size:114px auto,100% 100%!important}
  .primary-nav{height:94px}
}
@media(max-width:860px){
  header .wrap{min-height:84px}
  header button[data-page="home"]{width:150px;height:84px;background-position:center!important;background-size:102px auto,100% 100%!important}
  .menu-toggle{color:#143f56!important}
}

/* V8 — display compacto e integrado al borde. */
header .wrap{padding-left:0}
header button[data-page="home"]{
  width:190px;
  background-size:138px auto,100% 100%!important;
  box-shadow:inset 0 0 22px rgba(32,144,190,.1),6px 0 22px rgba(6,25,34,.1)
}

@media(min-width:861px) and (max-width:1100px){
  header button[data-page="home"]{width:158px;background-size:118px auto,100% 100%!important}
}
@media(max-width:860px){
  header .wrap{min-height:72px;padding-left:0}
  header button[data-page="home"]{width:146px;height:72px;background-size:94px auto,100% 100%!important}
  header button[data-page="home"]:after{right:7px;bottom:7px;width:6px;height:6px}
}

/* V9 — una sola superficie clara y logo HD sin recoloración. */
header,
header.is-scrolled,
body:not([data-page="home"]) header{background:rgba(241,244,245,.96)}
header .wrap{min-height:88px;padding-left:0}
header button[data-page="home"]{
  width:240px;
  height:88px;
  background-color:rgba(228,233,235,.42)!important;
  background-image:url('assets/comjesa-logo-header-hd.png')!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:220px auto!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none
}
header button[data-page="home"]:before{display:none!important}
header button[data-page="home"]:after{
  content:'';
  display:block!important;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  top:auto;
  width:100%;
  height:2px;
  transform:none;
  border-radius:0;
  background:linear-gradient(90deg,transparent 0%,var(--yellow) 18%,var(--yellow) 82%,transparent 100%);
  box-shadow:0 0 10px rgba(255,211,61,.42)
}
.primary-nav{height:88px}

@media(min-width:861px) and (max-width:1100px){
  header .wrap{min-height:82px}
  header button[data-page="home"]{width:188px;height:82px;background-size:176px auto!important}
  .primary-nav{height:82px}
}
@media(max-width:860px){
  header .wrap{min-height:72px;padding-left:0}
  header button[data-page="home"]{width:176px;height:72px;background-size:164px auto!important}
  header button[data-page="home"]:after{right:0;bottom:0;left:0;width:100%;height:2px}
}

/* V10 — barra blanca limpia, sin superficie gris detrás del logo. */
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(255,255,255,.97);
  border-bottom-color:rgba(20,63,86,.11);
  box-shadow:0 8px 28px rgba(8,34,47,.075)
}
header button[data-page="home"]{background-color:transparent!important}
.primary-nav button,.primary-nav a{border-left-color:rgba(20,63,86,.075)}
.primary-nav button:hover,.primary-nav a:hover{background:rgba(30,100,139,.055)}

/* V11 — barra azul-negro uniforme y logo luminoso, sin caja independiente. */
header,
header.is-scrolled,
body:not([data-page="home"]) header{
  background:rgba(5,24,35,.965);
  border-bottom:0;
  box-shadow:0 10px 34px rgba(0,13,21,.24)
}
header:after{
  content:'';
  position:absolute;
  z-index:5;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,#52bde7 18%,var(--yellow) 48%,#52bde7 78%,transparent 100%);
  box-shadow:0 0 13px rgba(255,211,61,.34);
  opacity:.8
}
header button[data-page="home"]{
  background-color:transparent!important;
  background-image:url('assets/comjesa-logo-header-dark.png')!important;
  border:0!important;
  box-shadow:none!important
}
header button[data-page="home"]:before,
header button[data-page="home"]:after{display:none!important}
.primary-nav button,
.primary-nav a{
  color:rgba(255,255,255,.9);
  border-left-color:rgba(255,255,255,.085)
}
.primary-nav button:hover,
.primary-nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.07)
}
.menu-toggle{color:#fff!important}

/* V14 — portafolio actualizado y compromiso normativo. */
.standards-commitment{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:26px 52px;
  margin-top:42px;
  padding:36px 38px 26px;
  color:#fff;
  background:linear-gradient(118deg,#061a2b 0%,#07394c 72%,#075e68 100%);
  border-top:4px solid var(--yellow);
  border-radius:16px;
  overflow:hidden
}
.standards-commitment:after{
  content:'';
  position:absolute;
  right:-110px;
  bottom:-180px;
  width:360px;
  height:360px;
  border:1px solid rgba(82,189,231,.34);
  border-radius:50%;
  box-shadow:0 0 0 34px rgba(0,171,154,.05),0 0 0 78px rgba(255,211,61,.035);
  pointer-events:none
}
.standards-copy,.standards-points,.standards-note{position:relative;z-index:1}
.standards-copy .eyebrow{margin-bottom:13px;color:#8de8d1}
.standards-copy h3{font-size:clamp(1.7rem,2.4vw,2.35rem);line-height:1.08}
.standards-copy>p:last-child{margin-top:18px;color:#d6e8ed;font-size:14px}
.standards-points{border-top:1px solid rgba(255,255,255,.25)}
.standards-points article{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.standards-points span{color:var(--yellow);font-size:11px;font-weight:750;padding-top:3px}
.standards-points b{font-size:15px}
.standards-points p{margin-top:4px;color:#bed8df;font-size:12px;line-height:1.5}
.standards-note{grid-column:1/-1;margin:0;padding-top:17px;border-top:1px solid rgba(255,255,255,.18);color:#a9c9d2;font-size:11px}

.brand-storage-only{display:none!important}
.pv-manufacturer{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.pv-manufacturer>.manufacturer-tile{height:100%}
.pv-manufacturer>div{grid-column:1/-1;padding-top:6px}
.pv-manufacturer .manufacturer-tile img{max-width:170px;height:58px}
.pv-manufacturer>a[href*="longi"] img{width:66px;height:66px}
.storage-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

@media(max-width:720px){
  .standards-commitment{grid-template-columns:1fr;gap:24px;margin-top:30px;padding:28px 24px 22px}
  .standards-note{grid-column:auto}
}
@media(max-width:560px){
  .pv-manufacturer{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pv-manufacturer>div{grid-column:1/-1}
  .pv-manufacturer>.manufacturer-tile{max-width:none;width:auto}
  .pv-manufacturer>a:last-of-type{grid-column:1/-1}
  .storage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}