/* A Electrics - One Page Styles */
:root{
  --bg:#0a0a0a;
  --surface:#111417;
  --text:#eaf7f5;
  --muted:#b9d9d4;
  --primary:#19c3bd;   /* teal from logo */
  --primary-2:#9edc3b;  /* lime/green from logo */
  --accent:#0ea79a;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius:16px;
  --nav-h:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text);
  padding-top: var(--nav-h);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1100px, 92%); margin-inline:auto}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Navbar */
.site-header{position:relative;}
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  background: linear-gradient(90deg, rgba(10,10,10,.85), rgba(10,10,10,.65));
  backdrop-filter: blur(10px) saturate(120%);
  height: var(--nav-h); padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.04);
}
.navbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--primary), transparent, var(--primary-2));
  opacity:.6;
}
.lang-select{display:flex; align-items:center; gap:8px}
.custom-lang{position:relative}
.cl-button{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; background:#0f1214; border:1px solid rgba(255,255,255,.12); color:var(--text)}
.cl-button::after{content:"▾"; font-size:12px; opacity:.8}
.cl-list{position:absolute; right:0; top:calc(100% + 8px); background:#0e1114; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; display:none; min-width:160px; box-shadow: var(--shadow); z-index:1200}
.cl-list.show{display:block}
.cl-list li{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; cursor:pointer}
.cl-list li:hover{background: rgba(255,255,255,.06)}
.flag{width:22px; height:14px; display:inline-flex}
.code{font-weight:700; letter-spacing:.4px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; margin-inline:auto}
.brand img{width:56px; height:56px; object-fit:cover; border-radius:12px; box-shadow:0 6px 18px rgba(25,195,189,.25)}
.brand span{letter-spacing:.6px}
.brand-name{font-size: clamp(20px, 3.2vw, 28px); font-weight:800;
  background: linear-gradient(90deg, var(--primary), var(--primary-2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.menu-toggle{display:none; font-size:28px; background:none; border:none; color:var(--text)}
.nav-links{list-style:none; display:flex; gap:24px; margin:0; padding:0}
.nav-links a{opacity:.9; position:relative; padding:6px 2px}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; transform:scaleX(0); transform-origin:left;
  background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: transform .3s ease;
}
.nav-links a:hover{opacity:1; color:var(--text)}
.nav-links a:hover::after{transform:scaleX(1)}

.lang-select select{
  background: #0f1214; color:var(--text); border:1px solid rgba(255,255,255,.08);
  padding:6px 10px; border-radius:10px; outline:none;
}

/* Hero */
.hero{
  background:
    radial-gradient(1200px 500px at 20% -10%, rgba(25,195,189,.25) 0%, transparent 60%),
    radial-gradient(1000px 400px at 90% 10%, rgba(158,220,59,.18) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,1) 0%, rgba(10,10,10,.8) 100%);
  padding: 80px 0 60px;
}
.hero-inner{width:min(1000px,92%); margin:auto; text-align:center}
.hero h1{font-size: clamp(28px, 5vw, 52px); line-height:1.1; margin:16px 0}
.hero p{font-size: clamp(16px, 2.6vw, 22px); color:var(--muted)}
.hero-cta{margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:600}
.btn.primary{background:linear-gradient(90deg, var(--primary), var(--primary-2)); color:#041312}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{border-color: rgba(255,255,255,.18); color:var(--text)}
.btn.ghost:hover{background: rgba(255,255,255,.08)}
.btn.icon{width:42px; height:42px; padding:10px; justify-content:center; background:#0f1214; border:1px solid rgba(255,255,255,.08); border-radius:12px; color:var(--text)}
.btn.icon:hover{border-color: var(--primary)}
/* Ensure SVGs are visible inside social buttons */
.social .btn.icon svg{width:22px; height:22px; display:block}

/* Sections */
.section{padding: 70px 0}
.section-title{font-size: clamp(22px, 4vw, 36px); margin:0 0 28px; text-align:center}
.section-text{color:var(--muted); margin:0 0 24px}
.section-text.note{font-size: clamp(13px, 1.6vw, 18px); opacity:.85; text-align:center}
.lang-blurb{ text-align:center; font-size: clamp(16px, 2.4vw, 22px); color:#eaf7f5; font-weight:600; letter-spacing:.2px }
/* Extra spacing for languages section */
#idiomas .section-title{ margin-bottom: 34px }
#idiomas .lang-blurb{ margin-top: 6px; margin-bottom: 22px; font-size: clamp(17px, 2.6vw, 24px) }

/* Centered descriptions for About and Work */
#quienes .section-text,
#trabajo .section-text{
  text-align:center; font-size: clamp(16px, 2.2vw, 21px);
  margin-left:auto; margin-right:auto; max-width: 900px; letter-spacing:.2px
}

/* Neon headings */
.neon{
  text-shadow: 0 0 6px rgba(25,195,189,.6), 0 0 14px rgba(25,195,189,.5), 0 0 24px rgba(158,220,59,.35);
  position:relative;
}
.section-title.neon::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-10px; width:120px; height:3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-2)); border-radius:3px; box-shadow:0 0 12px rgba(25,195,189,.6);
}

/* Scroll reveal */
.will-reveal{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease}
.will-reveal.revealed{opacity:1; transform: translateY(0)}

/* Features */
.features{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
.feature{background:linear-gradient(180deg, #0e1114, #0a0a0a); border:1px solid rgba(255,255,255,.06); padding:20px; border-radius:16px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; text-align:center}
.feature{cursor:pointer}
.feature .icon{font-size:36px; margin-bottom:8px; display:grid; place-items:center; transition: transform .25s ease, filter .25s ease}
.feature h3{margin:6px 0; transition: letter-spacing .25s ease, text-shadow .25s ease}
.feature p{transition: transform .25s ease, opacity .25s ease}
.feature:hover{transform: translateY(-4px); border-color: rgba(25,195,189,.35); box-shadow: 0 12px 30px rgba(25,195,189,.15)}
.feature:hover .icon{transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 8px rgba(25,195,189,.4))}
.feature:hover h3{text-shadow: 0 0 6px rgba(25,195,189,.35)}
.feature:hover p{transform: translateY(-1px); opacity:.95}

/* Expandable details */
.feature .feature-details{max-height:0; overflow:hidden; transition:max-height .4s ease, opacity .3s ease; opacity:.0; text-align:left; margin-top:8px}
.feature[aria-expanded="true"] .feature-details{max-height:180px; opacity:1}
.feature .feature-details ul{margin:0; padding-left:18px; display:grid; gap:6px; font-size: clamp(14px, 2.2vw, 16px)}
.feature .feature-details li{list-style:disc; color:var(--muted)}
.feature[aria-expanded="true"]{border-color: rgba(25,195,189,.35); box-shadow: 0 12px 30px rgba(25,195,189,.15)}
.feature[aria-expanded="true"] .icon{transform: translateY(-2px) scale(1.05)}
.feature[aria-expanded="true"] h3{letter-spacing:.3px}

/* Helper neon hint */
.feature .helper{
  margin: 4px 0 6px; font-size: 13px; letter-spacing:.4px; text-transform: uppercase; opacity:.9;
  color:#b9ecea; text-shadow: 0 0 6px rgba(25,195,189,.6), 0 0 10px rgba(158,220,59,.35);
}
.feature[aria-expanded="true"] .helper{
  color:#eaf7f5; text-shadow: 0 0 8px rgba(25,195,189,.8), 0 0 14px rgba(158,220,59,.5);
}

/* Remove emphasis background for first card title "Servicios" */
.features .feature:first-child h3{padding:0; border:none; background:none; border-radius:0}

/* Dynamic continuous motion for features (faster, more visible) */
@keyframes floatCard { 0%{ transform: translateY(0) rotate(0deg) } 50%{ transform: translateY(-8px) rotate(-0.6deg) } 100%{ transform: translateY(0) rotate(0deg) } }
@keyframes pulseIcon { 0%{ transform: translateY(0) scale(1) } 50%{ transform: translateY(-4px) scale(1.09) } 100%{ transform: translateY(0) scale(1) } }
.about .feature{ animation: floatCard 3.2s ease-in-out infinite }
.about .feature:nth-child(2){ animation-delay: .5s }
.about .feature:nth-child(3){ animation-delay: 1s }
.about .feature .icon{ animation: pulseIcon 2s ease-in-out infinite }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .about .feature, .about .feature .icon{ animation: none }
}

/* Showcase rotating gallery */
.showcase{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.slot{position:relative; overflow:hidden; border-radius:18px; border:1px solid rgba(255,255,255,.06); background:#0d1012; box-shadow: var(--shadow); transition: transform .25s ease, border-color .25s ease}
.slot::before{content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 60% at 0% 0%, rgba(25,195,189,.15), transparent 50%), radial-gradient(120% 60% at 100% 100%, rgba(158,220,59,.12), transparent 50%)}
.slot img{width:100%; height:280px; object-fit:cover; opacity:1; transition:opacity .6s ease}
.slot img.fade{opacity:0}
@keyframes kenburns {
  from {transform: scale(1)}
  to {transform: scale(1.08)}
}
.slot img.animate{animation: kenburns 10s ease-in-out forwards}
.slot .overlay{position:absolute; left:12px; bottom:12px; padding:6px 10px; border-radius:999px; font-size:12px; letter-spacing:.4px;
  background: linear-gradient(90deg, rgba(25,195,189,.9), rgba(158,220,59,.9)); color:#041312; font-weight:700}
.slot:hover{transform: translateY(-3px); border-color: rgba(158,220,59,.28)}

/* Contact */
.contact-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px}
.contact-form{display:grid; gap:14px; background:#0e1114; padding:20px; border-radius:16px; border:1px solid rgba(255,255,255,.06)}
.contact-form label{display:grid; gap:6px; color:var(--muted)}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0c0f11; color:var(--text);
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--accent); border-color:transparent}

.list{list-style:none; padding:0; margin:0 0 18px 0; display:grid; gap:12px}
.list li{line-height:1.6}
.contact-info .list li{padding:6px 0}
.contact-info .company-name{font-size:18px; font-weight:800; margin-bottom:6px; letter-spacing:.3px}
.social{display:flex; gap:10px}
.social-mobile{display:none; gap:12px}
.social-mobile .btn.icon{width:48px; height:48px; padding:10px}

/* Compact submit button */
.contact-form .btn.primary{
  align-self:center; padding:8px 14px; font-size:14px; border-radius:10px;
  width: fit-content; min-width:0; line-height:1.1; letter-spacing:.2px
}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:20px 0; background:#0b0c0d}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.to-top{color:var(--muted)}
.to-top:hover{color:var(--primary)}

/* WhatsApp Floating */
.btn-whatsapp{
  position:fixed; right:20px; bottom:22px; z-index:1200;
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; /* WhatsApp green */
  border:none; box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.btn-whatsapp svg{width:28px; height:28px}

/* Responsive */
@media (max-width: 900px){
  .features{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .menu-toggle{display:block}
  .nav-links{position:absolute; right:12px; top:calc(var(--nav-h) - 14px); background:#0e1114; border:1px solid rgba(255,255,255,.08); border-radius:14px; flex-direction:column; padding:10px; display:none}
  .nav-links.show{display:flex}
  .brand img{width:50px; height:50px}
  .slot img{height:220px}
  .cl-list{right:auto; left:0}
  /* Swap social sets on mobile */
  .social{display:none}
  .social-mobile{display:flex}
}

/* RTL support for Arabic */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .navbar{flex-direction:row-reverse}
html[dir="rtl"] .nav-links{align-items:flex-end}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:1400}
.lightbox.open{display:flex}
.lightbox-img{max-width:90vw; max-height:85vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.12)}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(15,18,20,.8); color:#fff; border:1px solid rgba(255,255,255,.15); width:44px; height:44px; border-radius:10px;
  display:grid; place-items:center; cursor:pointer; font-size:26px
}
.lightbox-close{top:18px; right:18px}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-prev:hover, .lightbox-next:hover, .lightbox-close:hover{background:#0f1214; border-color: var(--primary)}