@font-face{font-family:"DM Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/dm-sans-latin.woff2") format("woff2")}
@font-face{font-family:Manrope;font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/fonts/manrope-latin.woff2") format("woff2")}
:root{--navy:#07111f;--navy2:#0e2238;--cyan:#58ddd4;--gold:#e9bd68;--ink:#edf3f8;--muted:#99aabc;--line:#ffffff18;--paper:#091421;--white:#0d1a29}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:#060c15;font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
button,a{touch-action:manipulation}
button{font:inherit}
[hidden]{display:none!important}
.wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.topbar{background:linear-gradient(90deg,#020812,#0b1b2e);color:#aebed0;font-size:.82rem;padding:.5rem 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem}
.topbar a{color:#eef7ff}
header{position:absolute;top:var(--topbar-height,41px);left:0;right:0;z-index:10;color:#fff;border-bottom:1px solid #ffffff24}
.main-nav{height:82px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.brand{display:flex;align-items:center;gap:.8rem;font-family:Manrope,sans-serif;font-weight:800;letter-spacing:.06em;min-width:0}
.brand-logo{width:58px;height:58px;display:block;object-fit:cover;border-radius:12px;box-shadow:0 4px 18px #00000024;flex:0 0 auto}
.brand span{min-width:0;max-width:340px;overflow-wrap:anywhere}
.desktop-nav{display:flex;align-items:center;gap:1.7rem;font-weight:500;margin-left:auto}
.desktop-nav>a:not(.nav-cta):hover{color:var(--cyan)}
.header-tools{display:flex;align-items:center;gap:.85rem;flex:0 0 auto}
.language-switch{display:inline-flex;align-items:center;gap:.15rem;padding:.16rem .25rem;border:1px solid #ffffff33;background:#071525a8;border-radius:8px;font-family:Manrope,sans-serif;font-size:.76rem;font-weight:800;letter-spacing:.06em}
.language-switch span{color:#70879a}
.language-option{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:36px;color:#aebed0;line-height:1}
.language-option:hover{color:var(--cyan)}
.language-option.active{color:#fff}
.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:9px;font-weight:700;transition:.2s ease}
.nav-cta{padding:.68rem 1rem;background:var(--cyan);color:#052329;white-space:nowrap}
.btn{padding:.88rem 1.2rem;border:1px solid transparent}
.btn:hover,.nav-cta:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cyan);color:#052329;box-shadow:0 12px 30px #0bb3ac3d}
.btn-ghost{border-color:#ffffff55;color:#fff;background:#ffffff0a}
.menu-toggle{display:none;width:42px;height:42px;padding:9px;border:1px solid #ffffff36;background:#071525bb;border-radius:9px;align-items:center;justify-content:center;flex-direction:column;gap:4px;color:#fff;cursor:pointer}
.menu-toggle span{display:block;width:19px;height:2px;border-radius:2px;background:currentColor;transition:.2s ease}
.menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-toggle span:nth-child(2){opacity:0}
.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:absolute;left:0;right:0;top:72px;background:#061220f7;border-top:1px solid #ffffff18;border-bottom:1px solid #ffffff20;box-shadow:0 18px 35px #00000055}
.mobile-menu-inner{display:grid;padding-top:1rem;padding-bottom:1.2rem}
.mobile-menu a{padding:.75rem .2rem;border-bottom:1px solid #ffffff12;font-weight:700}
.mobile-menu .nav-cta{margin-top:.85rem;border:0;padding:.72rem 1rem}
.hero{min-height:690px;color:#fff;background:linear-gradient(90deg,#031020f2 0%,#06172fd6 40%,#06172f34 68%),url('/assets/solar-energy-hero.webp') center/cover;display:flex;align-items:center;padding:150px 0 65px}
.eyebrow{display:flex;align-items:center;gap:.7rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.8rem}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--cyan);flex:0 0 auto}
h1,h2,h3{font-family:Manrope,sans-serif;line-height:1.08;margin:0;overflow-wrap:anywhere}
h1{font-size:clamp(3rem,6vw,5.2rem);max-width:830px;letter-spacing:-.055em;margin:1rem 0 1.2rem}
.hero p{font-size:1.1rem;color:#c9d6e4;max-width:650px;margin:0 0 1.6rem}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-note{margin-top:1.8rem;display:flex;align-items:flex-start;gap:.7rem;color:#aebed0;font-size:.9rem;max-width:700px}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 7px #39d6ce22;flex:0 0 auto;margin-top:.42rem}
section{padding:100px 0;scroll-margin-top:82px}
#about{position:relative;background:radial-gradient(circle at 14% 10%,#173652 0,transparent 34%),linear-gradient(135deg,#0b1726 0%,#07111d 58%,#0c1e2f 100%);color:#f2f6f9;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff10}
.intro-grid{display:grid;grid-template-columns:.85fr 1.6fr;gap:5rem;align-items:start}
.kicker{color:var(--cyan);font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em}
.section-title{font-size:clamp(2.25rem,4vw,3.55rem);letter-spacing:-.045em;margin:.8rem 0 1.3rem}
.lead{color:var(--muted);font-size:1.08rem;max-width:690px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.4rem;border-top:1px solid var(--line)}
.fact{padding:1.4rem 1.2rem 0 0}
.fact strong{font-family:Manrope;font-size:1.15rem;display:block;color:#fff}
.fact span{color:var(--muted);font-size:.9rem}
.products{background:radial-gradient(circle at 88% 8%,#153e46 0,transparent 25%),radial-gradient(circle at 5% 92%,#172844 0,transparent 28%),linear-gradient(180deg,#07111b,#0b1624);color:#eff5f8}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:2.8rem}
.section-head p{max-width:510px;color:var(--muted);margin:0}
.category-stack{display:grid;gap:2rem}
.category{background:linear-gradient(145deg,#132437e8,#0c1827f2);border:1px solid #ffffff1f;border-radius:20px;overflow:hidden;box-shadow:0 25px 70px #00000038,inset 0 1px #ffffff0c}
.category-top{display:grid;grid-template-columns:.8fr 1.4fr;gap:3rem;padding:2.5rem;align-items:center}
.category-id{color:var(--gold);font-weight:800;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase}
.category h3{font-size:clamp(1.8rem,3vw,2.7rem);margin:.6rem 0;color:#fff}
.category-copy{color:#aebdcc;margin:0 0 1.2rem}
.category-actions{display:flex;flex-wrap:wrap;gap:.65rem}
.category-top>div{min-width:0}
.category-actions .nav-cta{max-width:100%;min-width:0;white-space:normal;text-align:center}
.catalog-link{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.66rem 1rem;border:1px solid #ffffff38;border-radius:9px;color:#f4f8fb;font-weight:700;background:#ffffff09;transition:.2s ease}
.catalog-link:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold);background:#e9bd6810}
.family-list{display:flex;flex-wrap:wrap;gap:.55rem}
.family-list span{max-width:100%;border:1px solid #ffffff22;background:#ffffff08;border-radius:99px;padding:.36rem .7rem;font-size:.875rem;color:#c9d4de}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);background:#ffffff16;gap:1px;border-top:1px solid #ffffff18}
.catalog-item{background:#0a1624}
.catalog-item img{width:100%;height:auto;display:block;object-fit:contain;filter:saturate(.9) contrast(1.03)}
.catalog-item div{padding:1rem 1.2rem}
.catalog-item strong{display:block;font-family:Manrope;font-size:.98rem;color:#f3f7fa}
.catalog-item small{display:block;font-size:.875rem;line-height:1.6;color:#a9b8c7}
.category.storage{background:linear-gradient(145deg,#101d32,#07111e);border-color:#ffffff1f}
.category.storage .category-copy{color:#aebfd0}
.category.storage .family-list span{border-color:#ffffff22;color:#c9d6e2}
.category.storage .catalog-grid{border-color:#ffffff1b;background:#17304a}
.catalog-note{margin:1rem 0 0;color:#778b9e;font-size:.84rem}
.why{background:radial-gradient(circle at 82% 30%,#163b43 0,transparent 30%),linear-gradient(120deg,#07111f,#0d2034);color:#fff;position:relative;overflow:hidden;border-top:1px solid #ffffff12}
.why:after{content:"";position:absolute;right:-170px;top:-200px;width:520px;height:520px;border:1px solid #58ddd42a;border-radius:50%;box-shadow:0 0 0 70px #58ddd408,0 0 0 140px #58ddd405}
.why-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:7rem;position:relative;z-index:1}
.why .lead{color:#aec0d2}
.benefits{display:grid;gap:1rem}
.benefit{display:grid;grid-template-columns:44px 1fr;gap:1rem;padding:1.1rem 0;border-bottom:1px solid #ffffff17}
.benefit-num{color:var(--gold);font-family:Manrope;font-weight:800}
.benefit h3{font-size:1.08rem;margin-bottom:.25rem}
.benefit p{color:#9fb1c4;margin:0;font-size:.93rem}
.factory{background:radial-gradient(circle at 12% 12%,#163541 0,transparent 27%),radial-gradient(circle at 92% 90%,#142943 0,transparent 26%),linear-gradient(180deg,#08131f,#0b1827);color:#f3f7fa;border-top:1px solid #ffffff12}
.factory-intro{display:grid;grid-template-columns:.85fr 1.35fr;gap:5rem;align-items:start;margin-bottom:2.6rem}
.factory .lead{margin-top:.2rem;color:#aebed0}
.factory-locations{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.4rem}
.factory-locations span{padding:.55rem .8rem;border:1px solid #58ddd43d;background:#58ddd40d;border-radius:99px;color:#c9efec;font-size:.84rem;font-weight:700}
.factory-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;gap:1rem}
.factory-shot{position:relative;margin:0;overflow:hidden;border:1px solid #ffffff1c;border-radius:16px;background:#0c1927;box-shadow:0 20px 50px #00000036}
.factory-shot-primary{grid-column:span 2}
.factory-shot picture{display:block;width:100%;height:235px;overflow:hidden}
.factory-shot img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s ease,filter .5s ease;filter:saturate(.92) contrast(1.03)}
.factory-shot:hover img{transform:scale(1.025);filter:saturate(1) contrast(1.03)}
.factory-shot figcaption{display:grid;gap:.18rem;padding:1rem 1.2rem;background:#081522;color:#fff}
.factory-shot figcaption strong{font-family:Manrope,sans-serif;font-size:1rem}
.factory-shot figcaption span{color:#b7c6d3;font-size:.875rem}
.factory-note{margin:1rem 0 0;color:#7f93a5;font-size:.82rem}
.contact{padding:90px 0;background:radial-gradient(circle at 15% 80%,#15333d 0,transparent 28%),linear-gradient(145deg,#060d17,#0d1c2c)}
.contact-box{background:linear-gradient(135deg,#132436,#0c1725);border:1px solid #ffffff1b;border-radius:20px;box-shadow:0 30px 90px #00000055,inset 0 1px #ffffff0e;display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden}
.contact-main{padding:4rem}
.contact-main .section-title{font-size:clamp(2.2rem,4vw,3.3rem);color:#fff}
.contact-main p{color:#9fb0c0;max-width:570px}
.contact-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.8rem}
.contact-main .btn{background:#21c063;color:#042517}
.contact-email-link{color:#cdeae8;text-decoration:underline;text-underline-offset:.25em}
.contact-email-link:hover{color:#fff}
.contact-details{background:linear-gradient(145deg,#0b1726,#07111e);color:#fff;padding:4rem 3rem;display:flex;flex-direction:column;justify-content:center;border-left:1px solid #ffffff12}
.contact-main,.contact-details{min-width:0}
.contact-main .btn{max-width:100%;flex-wrap:wrap;text-align:center}
.contact-number{white-space:nowrap}
.detail a,.contact-email-link{overflow-wrap:anywhere}
.whatsapp-dock{display:none}
.detail{padding:1rem 0;border-bottom:1px solid #ffffff17}
.detail:last-child{border:0}
.detail-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:#7693aa;display:block;margin-bottom:.28rem}
.detail a{color:#e8f3fa}
.detail a:hover{color:var(--cyan)}
.wechat-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.wechat-id{user-select:all;overflow-wrap:anywhere}
.wechat-copy{min-height:44px;padding:.5rem .8rem;border:1px solid #ffffff36;border-radius:8px;background:#ffffff08;color:#e8f3fa;font:inherit;cursor:pointer}
.wechat-copy:hover{border-color:var(--cyan);color:var(--cyan)}
.wechat-status{display:block;margin-top:.4rem;font-size:.875rem;color:#b4c6d5}
footer{background:#030811;color:#8498aa;padding:25px 0;font-size:.86rem;border-top:1px solid #ffffff10}
.footer-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.footer-row strong{color:#dce7ef}
.social-links{display:flex;gap:.55rem;flex-wrap:wrap}
.social-link{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.55rem .75rem;border:1px solid #ffffff1e;background:#ffffff05;border-radius:8px;color:#e3edf5;font-weight:700}
.social-link:hover{border-color:var(--cyan);color:var(--cyan);background:#58ddd40c}
.social-link svg{width:17px;height:17px;fill:currentColor}
@media(max-width:980px){
  .brand span{max-width:230px;font-size:.82rem}
  .desktop-nav{gap:1rem}
}
@media(max-width:820px){
  .topbar{display:none}
  header{top:0}
  .main-nav{min-height:72px;height:auto;padding-block:7px;gap:.5rem}
  .mobile-menu{top:100%}
  .desktop-nav{display:none}
  .menu-toggle{display:inline-flex;width:44px;height:44px}
  .language-option{min-width:44px;min-height:44px}
  .hero{min-height:660px;padding-top:calc(var(--mobile-header-height,72px) + 48px);background-image:linear-gradient(90deg,#031020f2 0%,#06172fd6 40%,#06172fb3 68%),url('/assets/solar-energy-hero-mobile.webp');background-position:62% center}
  .intro-grid,.why-grid,.factory-intro,.contact-box,.category-top{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .factory-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .factory-shot-primary{grid-column:span 2}
  .catalog-grid{grid-template-columns:1fr}
  .section-head{display:block}
  .section-head p{margin-top:1rem}
  .contact-main,.contact-details{padding:2.3rem}
  .facts{grid-template-columns:1fr}
  .fact{padding:1rem 0;border-bottom:1px solid var(--line)}
  .contact-details{border-left:0;border-top:1px solid #ffffff12}
  .whatsapp-dock{display:block;position:fixed;z-index:20;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:.75rem 1rem;background:#21c063;color:#042517;border:1px solid #ffffff30;border-radius:12px;box-shadow:0 6px 24px #00000066;font-weight:700;text-align:center}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:500px){
  .wrap{width:min(100% - 28px,1160px)}
  .brand{gap:.5rem;min-width:0}
  .brand-logo{width:46px;height:46px}
  .brand span{font-size:.65rem;line-height:1.2;max-width:128px}
  .header-tools{gap:.5rem}
  .language-switch{font-size:.72rem}
  .category-top,.contact-main,.contact-details{padding:1.5rem}
  h1{font-size:clamp(2.55rem,12.5vw,3.15rem)}
  html[lang="es-MX"] .hero h1{hyphens:auto;hyphenate-limit-chars:8 3 3}
  .hero{min-height:650px}
  .hero p{font-size:1.02rem}
  .hero-note{font-size:.84rem}
  section{padding:75px 0}
  .footer-row{display:block}
  .footer-row>div:first-child{margin-bottom:1rem}
  .social-links{margin-top:1rem}
  .factory-gallery{grid-template-columns:1fr}
  .factory-shot picture{height:270px}
  .factory-shot-primary{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
@media(max-width:370px){
  .brand span{display:none}
  .hero{padding-top:calc(var(--mobile-header-height,72px) + 43px)}
}

/* Catalogue choices remain readable and touch-friendly on small screens. */
.catalog-original{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .75rem;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.catalog-size{flex-basis:100%;color:var(--muted);font-size:.85rem}
.catalog-link{min-height:44px;max-width:100%;white-space:normal;text-align:center}