/* ======================================
   ENERSUN - CSS 
   ====================================== */

/* ---------- Variables ---------- */
:root{
  --primary-blue: #0d47a1;
  --yellow-sun: #fdb813;
  --accent-orange: #f57c00;
  --light-blue: #64b5f6;
  --neutral-gray: #eceff1;

  --text-dark: #1a1a1a;
  --text-light: #666;
  --white: #fff;

  --success: #4caf50;
  --shadow: rgba(0,0,0,.1);
  --shadow-dark: rgba(0,0,0,.2);

  --header-bg: #00ffff;
  --header-text: #0B4AA2;
  --header-shadow: 0 2px 10px rgba(16,24,40,.08);
}

/* ---------- Reset & Base ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:var(--text-dark);
  line-height:1.6;
  overflow-x:hidden;
  position: relative;
}

/* Prevenir scroll cuando el menú móvil está abierto */
body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Overlay para el menú móvil */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998 !important; 
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;  
}

.menu-overlay.active {
  display: block;
  opacity: 1;
  pointer-events: auto;  
}
.container{ 
  max-width:1200px; 
  margin:0 auto; 
  padding:0 2rem; 
}
section{ 
  padding:5rem 0; 
}
.section-title{
  text-align:center; 
  font-size:2.5rem; 
  color:var(--primary-blue);
  margin-bottom:3rem; 
  position:relative; 
  display:block;
  line-height: 1.2;
}
.section-title::after{
  content:""; 
  position:absolute; 
  left:50%; 
  bottom:-10px; 
  transform:translateX(-50%);
  width:80px; 
  height:4px; 
  background:var(--accent-orange); 
  border-radius:2px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }
  section {
    padding: 3rem 0;
  }
  .section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 1rem;
  }
  section {
    padding: 2.5rem 0;
  }
  .section-title {
    font-size: 1.75rem;
  }
}

/* Móviles extra pequeños */
@media (max-width: 360px) {
  .hero-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .stat-card {
    min-height: 100px;
    padding: 1rem 0.75rem;
  }
  
  .stat-number {
    font-size: 1.75rem;
  }
  
  .stat-card p {
    font-size: 0.85rem;
  }
  
  .nav-menu {
    width: 85% !important;
    max-width: 260px !important;
  }
}

/* ---------- Header / Nav ---------- */
.header{
  background:var(--header-bg); color:var(--header-text);
  box-shadow:var(--header-shadow); position:sticky; top:0; z-index:1000;
}
.nav-container{
  max-width:1200px; margin:0 auto; padding:.75rem 2rem;
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; align-items:center; gap:1rem; }
.logo img{ height:100px; width:auto; transition:transform .3s ease, height .25s ease; }
.logo:hover img{ transform:scale(1.04); }
.logo-text{ font-size:1.875rem; font-weight:800; color:var(--header-text); letter-spacing:.5px; }

.nav-menu{ display:flex; list-style:none; gap:2rem; }
.nav-menu a{
  color:var(--header-text); text-decoration:none; font-weight:600; position:relative; padding:.5rem 0;
  transition:opacity .2s ease;
}
.nav-menu a:hover{ opacity:.85; }
.nav-menu a::after{
  content:""; position:absolute; bottom:0; left:50%; width:0; height:2px; background:var(--accent-orange);
  transition:width .25s ease, left .25s ease; transform:translateX(-50%);
}
.nav-menu a:hover::after{ width:100%; left:0; transform:none; }

.mobile-menu-btn{ display:none; background:none; border:0; font-size:1.5rem; color:var(--header-text); cursor:pointer; }

/* ---------- Hero ---------- */
.hero{
  min-height:90vh; 
  position:relative; 
  display:flex; 
  align-items:center;
  background-position:center; 
  background-size:cover; 
  background-repeat:no-repeat;
  padding: 2rem 0;
}
.hero::before{
  content:""; 
  position:absolute; 
  inset:0;
  background:linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)), url("/static/img/paneles_bg_hero.11ecaa140201.jpeg") center/cover no-repeat;
  z-index:0;
}
.hero-container{ 
  max-width:1200px; 
  margin:0 auto; 
  padding:2rem; 
  text-align:center; 
  position:relative; 
  z-index:1; 
  width: 100%;
}
.hero h1{
  font-size:3.5rem; 
  color:var(--white); 
  margin-bottom:1.5rem;
  animation:fadeInUp 1s ease; 
  text-shadow:2px 2px 4px rgba(0,0,0,.3);
  line-height: 1.2;
}
.hero p{
  font-size:1.4rem; 
  color:var(--white); 
  margin-bottom:2.5rem; 
  animation:fadeInUp 1.2s ease;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.cta-button{
  background:var(--accent-orange); 
  color:#fff; 
  padding:1rem 2.5rem; 
  border:0; 
  border-radius:50px;
  font-size:1.2rem; 
  font-weight:600; 
  cursor:pointer; 
  transition:.3s ease all;
  box-shadow:0 4px 15px rgba(245,124,0,.3); 
  display:inline-block; 
  text-decoration:none; 
  animation:fadeInUp 1.4s ease;
}
.cta-button:hover{ 
  transform:translateY(-3px); 
  box-shadow:0 6px 25px rgba(245,124,0,.4); 
  background:#ff8c00; 
}

@media (max-width: 992px) {
  .hero {
    min-height: 80vh;
  }
  .hero h1 {
    font-size: 2.8rem;
  }
  .hero p {
    font-size: 1.2rem;
  }
}

.hero-stats{
  margin-top:4rem; 
  display:grid; 
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); 
  gap:1.5rem; 
  animation:fadeInUp 1.6s ease;
  width: 100%;
  max-width: 100%;
}
.stat-card{
  background:rgba(255,255,255,.95); 
  padding:1.5rem; 
  border-radius:15px; 
  box-shadow:0 5px 20px var(--shadow); 
  transition:transform .3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 140px;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.stat-card:hover{ transform:translateY(-5px); }
.stat-number{ 
  font-size:2.5rem; 
  font-weight:700; 
  color:var(--accent-orange); 
  margin-bottom:.5rem; 
  line-height: 1;
}
.stat-card p{ 
  color:var(--primary-blue); 
  font-size:1rem; 
  margin:0; 
  line-height: 1.3;
}

/* ---------- About (3 cards) ---------- */
.about{ background:var(--neutral-gray); }
.about-content{
  display:grid; grid-template-columns:repeat(3, minmax(300px,1fr)); gap:2rem; align-items:stretch;
}
.about-card{
  background:#fff; border-radius:16px; box-shadow:0 8px 28px rgba(13,71,161,.06);
  padding:2rem; display:flex; flex-direction:column; min-height:240px; transition:transform .2s ease, box-shadow .2s ease;
}
.about-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(13,71,161,.1); }
.about-card h3{ color:var(--primary-blue); font-size:1.3rem; display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.about-card i{ color:var(--yellow-sun); font-size:1.25rem; }

/* ---------- Services / Kits ---------- */
.services{ background:#fff; }
.services-nav{ 
  display:flex; 
  justify-content:center; 
  gap:1rem; 
  margin-bottom:3rem; 
  flex-wrap:wrap; 
}
.service-nav-btn{
  background:#fff; 
  color:var(--primary-blue); 
  border:2px solid var(--primary-blue);
  padding:1rem 2rem; 
  border-radius:50px; 
  font-size:1.1rem; 
  font-weight:600; 
  cursor:pointer; 
  transition:.3s ease all;
  white-space: nowrap;
}
.service-nav-btn:hover, .service-nav-btn.active{ 
  background:var(--primary-blue); 
  color:#fff; 
  transform:translateY(-2px); 
  box-shadow:0 5px 15px var(--shadow); 
}

@media (max-width: 768px) {
  .services-nav {
    gap: 0.75rem;
  }
  .service-nav-btn {
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .services-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .service-nav-btn {
    width: 100%;
    text-align: center;
  }
}

.service-section{ display:none; animation:fadeIn .5s ease; }
.service-section.active{ display:block; }

.services-grid{
  display:grid; 
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); 
  gap:2rem; 
  margin-top:3rem;
}

@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .services-grid {
    gap: 1.25rem;
  }
}
.kit-card{
  background:#fff; 
  border-radius:20px; 
  box-shadow:0 10px 30px var(--shadow);
  overflow:hidden; 
  transition:.3s ease all; 
  display:flex; 
  flex-direction:column;
  width: 100%;
}
.kit-card:hover{ 
  transform:translateY(-10px); 
  box-shadow:0 15px 40px var(--shadow-dark); 
}

@media (max-width: 768px) {
  .kit-card {
    border-radius: 16px;
  }
  .kit-card:hover {
    transform: translateY(-5px);
  }
}
.kit-category{ background:var(--primary-blue); color:#fff; padding:.5rem; text-align:center; font-weight:600; text-transform:uppercase; letter-spacing:1px; font-size:.9rem; }
.kit-header{ padding:1.5rem; background:linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%); border-bottom:1px solid var(--neutral-gray); }
.kit-title{ color:var(--primary-blue); margin-bottom:.5rem; font-size:1.4rem; }
.kit-description{ color:var(--text-light); font-size:.95rem; margin-bottom:1rem; }
.kit-price{ font-size:2rem; font-weight:700; color:var(--accent-orange); display:flex; align-items:baseline; gap:.5rem; margin-top:1rem; }
.kit-price-label{ font-size:.9rem; color:var(--text-light); }
.kit-specs, .kit-benefits{ padding:1.5rem; }
.kit-specs h4, .kit-benefits h4{ color:var(--primary-blue); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.spec-grid{ display:grid; gap:.75rem; }
.spec-item, .benefit-item{ display:flex; align-items:center; gap:.75rem; color:var(--text-dark); font-size:.95rem; }
.spec-icon, .benefit-icon{ color:var(--yellow-sun); font-size:1.1rem; width:20px; text-align:center; }
.kit-cta{ padding:1.5rem; background:var(--neutral-gray); display:flex; gap:1rem; margin-top:auto; }
.kit-btn-primary{
  flex:1; background:var(--accent-orange); color:#fff; border:0; padding:1rem; border-radius:10px; font-weight:600; cursor:pointer; transition:.2s; font-size:1rem;
}
.kit-btn-primary:hover{ background:#ff8c00; transform:translateY(-2px); box-shadow:0 5px 15px rgba(245,124,0,.3); }
.kit-btn-secondary{
  flex:1; background:#fff; color:var(--primary-blue); border:2px solid var(--primary-blue); padding:1rem; border-radius:10px; font-weight:600; cursor:pointer; transition:.2s; font-size:1rem;
}
.kit-btn-secondary:hover{ background:var(--primary-blue); color:#fff; }

/* ---------- Benefits ---------- */
.benefits{ 
  background:linear-gradient(135deg, var(--light-blue) 0%, var(--white) 100%); 
}
.benefits-grid{ 
  display:grid; 
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); 
  gap:2rem; 
  margin-top:3rem; 
}
.benefit-card{
  background:#fff; 
  padding:2rem; 
  border-radius:15px; 
  text-align:center; 
  box-shadow:0 5px 20px var(--shadow); 
  transition:.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.benefit-card:hover{ 
  transform:translateY(-10px); 
  box-shadow:0 10px 30px var(--shadow-dark); 
}
.benefit-card .benefit-icon{ 
  font-size:3rem; 
  color:var(--accent-orange); 
  margin-bottom:1rem; 
}
.benefit-card h3{ 
  color:var(--primary-blue); 
  margin-bottom:1rem; 
  font-size: 1.25rem;
}
.benefit-card p {
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 1.5rem;
  }
  .benefit-card {
    padding: 1.5rem;
  }
  .benefit-card .benefit-icon {
    font-size: 2.5rem;
  }
}

@media (max-width: 480px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .benefit-card h3 {
    font-size: 1.1rem;
  }
}

/* ---------- Contact ---------- */
.contact{
  background:linear-gradient(135deg, var(--primary-blue) 0%, #0a2e5f 100%); color:#fff;
}
.contact-content{ 
  display:grid; 
  grid-template-columns:1fr; 
  gap:2rem; 
  margin-top:3rem; 
}
.contact-info{
  background:rgba(255,255,255,.1); 
  padding:1.5rem; 
  border-radius:15px; 
  backdrop-filter:blur(10px);
}
.contact-info h3{ 
  color:var(--yellow-sun); 
  margin-bottom:1.5rem; 
  font-size:1.5rem; 
}
.contact-info ol{ 
  list-style:none; 
  counter-reset:item; 
  padding:0; 
}
.contact-info ol li{ 
  counter-increment:item; 
  margin-bottom:1rem; 
  position:relative; 
  padding-left:2.5rem; 
  line-height:1.8; 
}
.contact-info ol li::before{
  content:counter(item); 
  position:absolute; 
  left:0; 
  top:0; 
  background:var(--accent-orange); 
  color:#fff; 
  width:25px; 
  height:25px;
  border-radius:50%; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  font-weight:600; 
  font-size:.9rem;
  flex-shrink: 0;
}
.contact-form{
  background:#fff; 
  color:var(--text-dark); 
  padding:1.5rem; 
  border-radius:15px; 
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.form-group{ 
  margin-bottom:1.25rem; 
}
.form-group label{ 
  display:block; 
  color:var(--primary-blue); 
  margin-bottom:.5rem; 
  font-weight:500; 
  font-size:0.95rem;
}
.form-group input, .form-group select, .form-group textarea{
  width:100%; 
  padding:.75rem; 
  border:2px solid var(--neutral-gray); 
  border-radius:8px; 
  font-size:1rem; 
  transition:.3s all;
  font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; 
  border-color:var(--accent-orange); 
  box-shadow:0 0 0 3px rgba(245,124,0,.1);
}

/* Estilos para el grupo de kit (aparece/desaparece dinámicamente) */
#kit-group {
  transition: all 0.3s ease;
}

/* Mejoras visuales para selects */
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230d47a1' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px;
  padding-right: 2.5rem;
  cursor: pointer;
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Estilos para el botón de envío */
.contact-form button[type="submit"] {
  transition: all 0.3s ease;
  cursor: pointer;
}

.contact-form button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

/* Desktop: dos columnas lado a lado */
@media (min-width: 769px) {
  .contact-content{ 
    grid-template-columns:1fr 1fr; 
    gap:3rem; 
  }
  .contact-info{
    padding:2rem;
  }
  .contact-info h3{ 
    font-size:1.8rem; 
  }
  .contact-form{
    padding:2rem;
  }
}

/* Tablets medianos */
@media (min-width: 600px) and (max-width: 768px) {
  .contact-info, .contact-form {
    padding: 1.75rem;
  }
}

/* ---------- Modal ---------- */
.modal{
  display:none; position:fixed; z-index:2000; inset:0; background:rgba(0,0,0,.7); animation:fadeIn .3s ease;
}
.modal-content{
  background:#fff; margin:2% auto; padding:0; border-radius:20px; width:90%; max-width:900px; max-height:90vh; overflow-y:auto; animation:slideInUp .3s ease;
}
.modal-header{
  background:linear-gradient(135deg, var(--primary-blue) 0%, var(--light-blue) 100%); color:#fff; padding:2rem; border-radius:20px 20px 0 0; position:relative;
}
.close{
  position:absolute; right:2rem; top:50%; transform:translateY(-50%); font-size:2rem; font-weight:300; cursor:pointer; transition:transform .3s ease; background:none; border:none; color:#fff;
}
.close:hover{ transform:translateY(-50%) rotate(90deg); }
.modal-body{ padding:2rem; }
.tech-specs-table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.tech-specs-table th, .tech-specs-table td{ padding:1rem; text-align:left; border-bottom:1px solid var(--neutral-gray); }
.tech-specs-table th{ background:var(--light-blue); color:var(--primary-blue); font-weight:600; }
.tech-specs-table tr:hover{ background:var(--neutral-gray); }

/* ---------- PROCESO COMERCIAL (Card única + flechas + texto legible) ---------- */
#proceso-comercial{ position:relative; min-height:85vh; display:flex; align-items:center; }
#proceso-comercial::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url("/static/img/proceso-background.4e66f7c5d533.jpg") center/cover no-repeat !important;
  z-index:0;
}
#proceso-comercial > *{ position:relative; z-index:1; }

/* Card blanca única: aplicada al contenedor de pasos existente */
#proceso-comercial .timeline-steps{
  position:relative; z-index:2;
  background:rgba(255,255,255,.94); border:1px solid rgba(13,71,161,.08);
  border-radius:22px; box-shadow:0 18px 42px rgba(0,0,0,.18);
  padding:1.6rem 2rem; backdrop-filter:blur(2px);

  display:flex; gap:1.4rem; justify-content:space-between;
}

#proceso-comercial .step{
  flex:1 1 0; min-width:180px; text-align:center; position:relative;
}

/* Ícono circular sin estilos nativos y sin márgenes negativos */
#proceso-comercial .step .step-icon{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:86px; height:86px; border-radius:50%;
  background:#fff !important; border:4px solid var(--accent-orange) !important; color:var(--accent-orange);
  box-shadow:0 12px 28px rgba(0,0,0,.22); cursor:pointer; position:relative; margin:0 0 .65rem 0 !important;
}
#proceso-comercial .step .step-icon i{ animation:none !important; transform:none !important; }
#proceso-comercial .step .step-number{
  position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%;
  background:var(--accent-orange); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700;
}

/* Flechas entre pasos (línea + punta) excepto el último */
#proceso-comercial .step .step-icon::after,
#proceso-comercial .step .step-icon::before{ content:""; position:absolute; top:50%; transform:translateY(-50%); }
#proceso-comercial .step:not(:last-child) .step-icon::after{
  left:calc(100% + 6px); width:clamp(32px, 3.4vw, 56px); height:3px; background:var(--accent-orange); border-radius:2px;
}
#proceso-comercial .step:not(:last-child) .step-icon::before{
  left:calc(100% + 6px + clamp(32px, 3.4vw, 56px));
  border-left:10px solid var(--accent-orange); border-top:6px solid transparent; border-bottom:6px solid transparent;
}

/* Títulos / textos dentro del card único */
#proceso-comercial .step-title{
  margin:.25rem 0 .35rem !important; color:#0d47a1 !important; font-weight:800 !important; text-shadow:none !important; opacity:1 !important;
}
#proceso-comercial .step-description{ color:#1c2733 !important; opacity:.98 !important; text-shadow:none !important; }

/* Detalles (acordeón) si los utilizas */
#proceso-comercial .step-details[hidden]{ display:none !important; }
#proceso-comercial .step-details{
  margin-top:.65rem; background:#fff; border:1px solid var(--neutral-gray); border-radius:12px;
  padding:.75rem .9rem; box-shadow:0 6px 16px rgba(0,0,0,.10); text-align:left;
}

/* ---------- Animaciones ---------- */
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes slideInUp{ from{ transform:translateY(100px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .about-content{ grid-template-columns:repeat(2, minmax(300px,1fr)); }
}
@media (max-width:992px){
  .about-content{ grid-template-columns:1fr; }
  #proceso-comercial .timeline-steps{ flex-wrap:wrap; }
  #proceso-comercial .step{ flex:1 1 calc(50% - 1.4rem); }
  #proceso-comercial .step .step-icon::after,
  #proceso-comercial .step .step-icon::before{ display:none !important; } /* evita cruces de flechas */
}
@media (max-width:768px){
  .mobile-menu-btn{ 
    display:block !important; 
    z-index:1002 !important; 
    position:relative !important; 
    background:none !important;
    border:none !important;
    cursor:pointer !important;
    padding:0.5rem !important;
    font-size:1.5rem !important;
  }
  
  .nav-menu{
    display:flex !important;
    position:fixed !important; 
    top:0 !important; 
    right:-100% !important; 
    width:70% !important; 
    max-width:300px !important; 
    height:100vh !important; 
    height:100dvh !important; /* Para móviles con barras dinámicas */
    background:linear-gradient(135deg, #000 0%, #1a1a1a 100%) !important;
    flex-direction:column !important; 
    padding:5rem 1.75rem 2rem !important; 
    box-shadow:-8px 0 24px rgba(0,0,0,0.6) !important; 
    transition:right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index:1001 !important; 
    overflow-y:auto !important;
    margin:0 !important;
    list-style:none !important;
    gap: 0 !important;
  }
  
  .nav-menu.active{ 
    right:0 !important; 
  }
  
  .nav-menu li{ 
    margin:0.15rem 0 !important; 
    width:100% !important; 
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  
  .nav-menu li:first-child {
    margin-top: 0 !important;
  }
  
  .nav-menu li:last-child {
    border-bottom: none;
  }
  
  .nav-menu a{ 
    display:block !important; 
    padding:1rem 0.75rem !important; 
    font-size:1.05rem !important; 
    color:#fff !important;
    text-shadow:none !important;
    font-weight:600 !important;
    transition: all 0.25s ease !important;
    border-radius: 6px;
    letter-spacing: 0.3px;
  }
  
  .nav-menu a:hover,
  .nav-menu a:focus{
    color:#f57c00 !important;
    opacity:1 !important;
    background: rgba(245,124,0,0.1) !important;
    padding-left: 1.25rem !important;
    transform: translateX(4px);
  }
  
  .nav-menu a::after {
    display: none !important;
  }
  
  /* Animación de entrada de items del menú */
  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .nav-menu.active li {
    animation: slideInFromRight 0.3s ease forwards;
  }
  
  .nav-menu.active li:nth-child(1) { animation-delay: 0.05s; }
  .nav-menu.active li:nth-child(2) { animation-delay: 0.1s; }
  .nav-menu.active li:nth-child(3) { animation-delay: 0.15s; }
  .nav-menu.active li:nth-child(4) { animation-delay: 0.2s; }
  .nav-menu.active li:nth-child(5) { animation-delay: 0.25s; }
  .nav-menu.active li:nth-child(6) { animation-delay: 0.3s; }
  .nav-menu.active li:nth-child(7) { animation-delay: 0.35s; }
  
  .hero h1{ 
    font-size:2rem; 
    line-height: 1.2;
    margin-bottom: 1rem;
  } 
  .hero p{ 
    font-size:1.1rem;
    line-height: 1.4;
    margin-bottom: 2rem;
  }
  .hero-container {
    padding: 1.5rem;
  }
  .services-grid{ 
    grid-template-columns:1fr; 
  }
  .hero-stats{ 
    grid-template-columns:repeat(2,1fr); 
    gap: 1rem;
    margin-top: 2.5rem;
    padding: 0 0.5rem;
  }
  .stat-card {
    padding: 1.25rem 0.75rem;
    min-height: 130px;
    aspect-ratio: 1 / 1;
  }
  .stat-number {
    font-size: 2.2rem;
  }
  .stat-card p {
    font-size: 0.85rem;
    line-height: 1.2;
  }
  .contact-content {
    gap: 1.5rem;
  }
  .form-group {
    margin-bottom: 1rem;
  }
}

/* Móviles pequeños - optimización adicional */
@media (max-width:480px){
  .hero h1{ 
    font-size:1.6rem; 
  }
  .hero p{ 
    font-size:1rem;
  }
  .cta-button {
    padding: 0.85rem 2rem;
    font-size: 1rem;
  }
  .hero-stats{ 
    grid-template-columns:1fr; 
    gap: 0.85rem;
    padding: 0 0.25rem;
  }
  .stat-card {
    aspect-ratio: auto;
    min-height: 110px;
    padding: 1.25rem 1rem;
  }
  .stat-number {
    font-size: 2rem;
  }
  .stat-card p {
    font-size: 0.9rem;
  }
  .container {
    padding: 0 1rem;
  }
  .contact-info, .contact-form {
    padding: 1.25rem;
  }
  .contact-info {
    padding: 1rem;
  }
  .contact-info h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
  }
  .contact-info ol li {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    padding-left: 2.25rem;
  }
  .contact-info ol li::before {
    width: 22px;
    height: 22px;
    font-size: 0.85rem;
  }
  .form-group {
    margin-bottom: 1rem;
  }
  .form-group label {
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }
  .form-group input, .form-group select, .form-group textarea {
    padding: 0.65rem;
    font-size: 0.95rem;
  }
  .cta-button[type="submit"] {
    width: 100%;
    padding: 1rem;
  }
  .section-title {
    font-size: 2rem;
  }
}
@media (max-width:560px){
  #proceso-comercial .step{ flex:1 1 100%; }
}
/* ====== PROCESO COMERCIAL (card única que incluye título + pasos) ====== */
#proceso-comercial{
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
}
#proceso-comercial::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url("/static/img/proceso-background.4e66f7c5d533.jpg") center/cover no-repeat !important;
  z-index:0;
}
#proceso-comercial > *{ position:relative; z-index:1; }

/* Card blanca grande (ahora envuelve título + subtítulo + pasos) */
#proceso-comercial .timeline-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(13,71,161,.08);
  border-radius: 22px;
  box-shadow: 0 18px 42px rgba(0,0,0,.18);
  padding: 1.4rem 2rem 1.6rem;
  backdrop-filter: blur(2px);
  margin-inline: auto;
}

/* Título y subtítulo adentro del card */
#proceso-comercial .timeline-card .section-title{
  margin: .25rem 0 0.75rem;
}
#proceso-comercial .timeline-card .subtitle{
  text-align:center;
  color:#2b3a4a;
  opacity:.9;
  margin: -0.25rem 0 1.25rem;
}

/* La grilla/fila de pasos ya no tiene fondo; solo layout */
#proceso-comercial .timeline-steps{
  display:flex !important;
  gap: 1.4rem !important;
  justify-content: space-between;
  padding: 0;                 /* sin fondo ni padding extra */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#proceso-comercial .step{
  flex: 1 1 0;
  min-width: 180px;
  text-align: center;
  position: relative; /* para flechas */
}

/* Ícono circular */
#proceso-comercial .step .step-icon{
  all: unset;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: #fff !important;
  border: 4px solid var(--accent-orange) !important;
  color: var(--accent-orange);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  cursor: pointer;
  position: relative;
  margin: 0 0 .65rem 0 !important;
}
#proceso-comercial .step .step-icon i{ animation:none !important; transform:none !important; }
#proceso-comercial .step .step-number{
  position:absolute; top:-8px; right:-8px;
  width:28px; height:28px; border-radius:50%;
  background: var(--accent-orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; font-weight:700;
}

/* Flechas entre pasos */
#proceso-comercial .step .step-icon::after,
#proceso-comercial .step .step-icon::before{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
}
#proceso-comercial .step:not(:last-child) .step-icon::after{
  left: calc(100% + 6px);
  width: clamp(32px, 3.4vw, 56px); height: 3px;
  background: var(--accent-orange); border-radius: 2px;
}
#proceso-comercial .step:not(:last-child) .step-icon::before{
  left: calc(100% + 6px + clamp(32px, 3.4vw, 56px));
  border-left: 10px solid var(--accent-orange);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* Títulos/textos dentro del card */
#proceso-comercial .step-title{
  margin:.25rem 0 .35rem !important;
  color:#0d47a1 !important;
  font-weight:800 !important;
  text-shadow:none !important;
  opacity:1 !important;
}
#proceso-comercial .step-description{
  color:#1c2733 !important;
  opacity:.98 !important;
  text-shadow:none !important;
}

/* Detalles (acordeón) */
#proceso-comercial .step-details[hidden]{ display:none !important; }
#proceso-comercial .step-details{
  margin-top:.65rem;
  background:#fff; border:1px solid var(--neutral-gray);
  border-radius:12px; padding:.75rem .9rem;
  box-shadow:0 6px 16px rgba(0,0,0,.10); text-align:left;
}

/* Responsive */
@media (max-width: 1024px){
  #proceso-comercial .timeline-steps{ flex-wrap: wrap; }
  #proceso-comercial .step{ flex: 1 1 calc(50% - 1.4rem); }
  #proceso-comercial .step .step-icon::after,
  #proceso-comercial .step .step-icon::before{ display:none !important; }
}
@media (max-width: 560px){
  #proceso-comercial .step{ flex: 1 1 100%; }
}
/* ===== Más espacio entre Título/Subtítulo y los pasos ===== */
#proceso-comercial .timeline-card{
  padding: 2.2rem 2rem 2rem !important; 
    /* ↑ más padding arriba/abajo */
}

/* Título y subtítulo con respiración */
#proceso-comercial .timeline-card .section-title{
  margin: 0 0 .4rem !important;
}
#proceso-comercial .timeline-card .subtitle{
  margin: .25rem 0 1.9rem !important;     /* ↑ separa del bloque de pasos */
  color: #2b3a4a; opacity: .9;
}

/* Línea decorativa bajo el subtítulo (también da espacio extra) */
#proceso-comercial .timeline-card .subtitle::after{
  content:"";
  display:block;
  width: 120px; height: 4px;
  margin: .9rem auto 1.2rem;              /* controla la “distancia” */
  background: var(--accent-orange);
  border-radius: 2px;
  opacity: .9;
}

/* Por si algún estilo viejo mete padding en los pasos, lo limpiamos */
#proceso-comercial .timeline-steps{
  padding: 0 !important;
  margin-top: 0 !important;
  gap: 1.6rem !important;                  /* un pelín más de separación entre pasos */
}

/* Responsive: conserva la separación cuando se parte en filas */
@media (max-width: 1024px){
  #proceso-comercial .timeline-card{ padding: 2rem 1.4rem 1.6rem !important; }
  #proceso-comercial .timeline-card .subtitle{ margin-bottom: 1.6rem !important; }
}
/* === MÁS ESPACIO ARRIBA/ABAJO EN EL CARD Y ENTRE TÍTULO ↔ PASOS === */
#proceso-comercial .timeline-card{
  padding: 3rem 2rem 2.4rem !important;       /* ↑ más espacio arriba/abajo */
}

/* Título y subtítulo con respiración extra */
#proceso-comercial .timeline-card .section-title{
  margin: 0 0 .8rem !important;
}
#proceso-comercial .timeline-card .subtitle{
  margin: .35rem 0 2.4rem !important;         /* ↑ separa de los pasos */
  color: #2b3a4a; opacity: .9;
}

/* Regla decorativa bajo el subtítulo que además suma espacio */
#proceso-comercial .timeline-card .subtitle::after{
  content:"";
  display:block;
  width: 140px; height: 4px;
  margin: 1.1rem auto 1.6rem;                 /* ↑ controla la “distancia” */
  background: var(--accent-orange);
  border-radius: 2px;
  opacity: .95;
}

/* Empuje extra antes de la grilla de pasos (por si hay estilos previos) */
#proceso-comercial .timeline-steps{
  margin-top: .6rem !important;               /* empuja los pasos hacia abajo */
  gap: 1.8rem !important;                     /* separa los pasos entre sí un poco más */
  background: transparent !important;         /* asegúrate de NO tener fondo aquí */
  border: 0 !important;
  box-shadow: none !important;
}

/* Opcional: si quieres todavía más aire, sube estos números:
   - padding top del .timeline-card (3rem → 3.4rem)
   - margin-bottom del .subtitle (2.4rem → 2.8rem)
   - margin-bottom del ::after (1.6rem → 2rem)
*/
:root{
  --accent-orange:#f57c00;
  --pv-shadow: 0 24px 60px rgba(13,71,161,.14);
}

/* Card “glass” con foco en contenido */
.pv-card{
  max-width: 1100px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  box-shadow: var(--pv-shadow);
  border: 1px solid rgba(13,71,161,.08);
}

/* Título y subrayado premium */
.pv-title{
  color:#0d47a1;
  font-weight: 900;
  letter-spacing:.3px;
}
.pv-underline{
  width: 110px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-orange), #ffb04d);
}

/* Círculos de paso */
.step-circle{
  width: 88px; height: 88px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:4px solid var(--accent-orange);
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}
.step-circle i{
  font-size: 30px; color: var(--accent-orange);
}
.step-badge{
  position:absolute; top:-10px; right:-10px;
  background: var(--accent-orange); color:#fff; font-weight:700;
  box-shadow:0 6px 16px rgba(245,124,0,.35);
}

/* Flecha horizontal entre pasos (solo desktop) */
.step-col{ position:relative; }
.step-col:not(:last-child)::after{
  content:""; position:absolute; top:44px; left:calc(50% + 64px);
  width: clamp(40px, 6vw, 76px); height:3px; background: var(--accent-orange);
  border-radius:2px;
}
.step-col:not(:last-child)::before{
  content:""; position:absolute; top:41px; left:calc(50% + 64px + clamp(40px, 6vw, 76px));
  border-left:10px solid var(--accent-orange);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}

/* Hover microinteractions */
.step-circle:hover{ transform: translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.step-col:hover h5{ text-decoration: underline 2px; text-underline-offset: 4px; }

/* Respeto de espacios y legibilidad */
#proceso-comercial .pv-steps{ row-gap: 2.25rem; }
#proceso-comercial p.small{ line-height: 1.6; }

/* Ocultar flechas cuando se rompa a varias filas */
@media (max-width: 992px){
  .step-col::after, .step-col::before{ display:none; }
}
/* === HEADER SIEMPRE NEGRO + TIPOGRAFÍA AZUL EN NEGRITA === */

/* Fuerza fondo negro en todas las variantes del header */
header.header,
#site-header.header,
header.header.scrolled,
#site-header.header.scrolled {
  background: #000 !important;
  box-shadow: none !important;     /* opcional: quita sombra si molesta */
}

/* Color y peso de la tipografía en el header */
header.header .logo-text,
header.header .nav-menu a,
header.header .mobile-menu-btn,
#site-header.header .logo-text,
#site-header.header .nav-menu a,
#site-header.header .mobile-menu-btn {
  color: var(--header-text, #ffffff) !important; /* azul corporativo */
  font-weight: 800 !important;                    /* “más gorditas” */
  text-shadow: none !important;
}

/* Hover/activo: mantiene azul y subraya en naranja corporativo */
header.header .nav-menu a:hover,
#site-header.header .nav-menu a:hover {
  color: var(--header-text, #ffffff) !important;
  opacity: 1 !important;
}
header.header .nav-menu a::after,
#site-header.header .nav-menu a::after {
  background: var(--accent-orange, #f57c00) !important;
}

/* Ícono/hamburguesa del menú móvil en azul y visible sobre negro */
header.header .mobile-menu-btn,
#site-header.header .mobile-menu-btn {
  color: var(--header-text, #ffffff) !important;
}

/* Logo: si el PNG oscuro pierde contraste sobre negro, puedes
   aplicar temporalmente esta clase a <img> para blanquearlo: */
header.header .logo img.force-white {
  filter: brightness(0) invert(1);
}


/* === Centrar VERTICAL la pastilla (nav-menu) sin tocar el logo === */

/* Asegura alineación vertical con flex en el contenedor */
header.header .nav-container,
#site-header.header .nav-container{
  display: flex !important;
  align-items: center !important;   /* centra verticalmente su contenido */
}

/* La pastilla no debe tener “empujes” arriba/abajo */
header.header .nav-menu,
#site-header.header .nav-menu{
  margin-block: 0 !important;       /* quita márgenes fantasma */
  align-self: center !important;     /* céntrala dentro del contenedor */
}

/* Pequeña corrección fina (sube/baja 1–3px si la ves desfasada) */
@media (min-width: 769px){
  header.header .nav-menu,
  #site-header.header .nav-menu{
    transform: translateY(1px);      /* ajusta a 0 / 2px según tu ojo */
  }
}
/* color normal */
header.header .nav-menu a,
#site-header.header .nav-menu a{
  color: #ffffff !important;   /* pon aquí el color que quieras */
}

/* color al pasar el mouse */
header.header .nav-menu a:hover,
#site-header.header .nav-menu a:hover{
  color: #f57c00 !important;   /* por ejemplo el naranja corporativo */
}

/* color para el link activo (si le añades .active en el HTML/JS) */
header.header .nav-menu a.active,
#site-header.header .nav-menu a:focus{
  color: #0B4AA2 !important;   /* azul corporativo */
}
/* Compactar el menú sin perder el tamaño de letra */
header.header .nav-menu,
#site-header.header .nav-menu{
  padding: .35rem .6rem !important;   /* menos padding de la pastilla */
  gap: .25rem !important;              /* menos espacio entre links */
}

header.header .nav-menu a,
#site-header.header .nav-menu a{
  font-size: 1.1rem !important;        /* tamaño que te gustó */
  font-weight: 700 !important;
  letter-spacing: .2px;                /* un pelín, no tanto */
  padding: .55rem .85rem !important;   /* ↓ área de cada link */
}

/* Hover suave (sin “empujar” el layout) */
header.header .nav-menu a:hover,
#site-header.header .nav-menu a:hover{
  transform: translateY(-1px);         /* más sutil para no romper altura */
}
/* ===== BENEFICIOS: 3 columnas centradas (desktop), 2 (tablet), 1 (mobile) ===== */
#beneficios .benefits-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr)); /* 3 columnas fijas */
  gap: 2rem;
  justify-content: center;  /* centra el grid dentro del contenedor */
  justify-items: stretch;   /* cards llenan su columna */
  align-items: stretch;
  margin-inline: auto;
  max-width: 1200px;        /* evita que se intente meter 4 columnas */
}

#beneficios .benefit-card{
  width: 100%;
  max-width: 360px;         /* opcional: limita el ancho visual de cada card */
  margin-inline: auto;      /* centra cada card si la columna es más ancha */
}

/* Tablet (<= 1024px): 2 columnas */
@media (max-width: 1024px){
  #beneficios .benefits-grid{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    max-width: 900px;
  }
}

/* Mobile (<= 640px): 1 columna */
@media (max-width: 640px){
  #beneficios .benefits-grid{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
/* ===== Beneficios: alto uniforme en todas las cards ===== */
#beneficios .benefits-grid{
  align-items: stretch;          /* cada celda estira su contenido */
}

#beneficios .benefit-card{
  display: flex;                 /* para controlar layout interno */
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 260px;             /* AJUSTA este valor si las quieres más altas */
  height: 100%;
}

/* Mantén consistencia de espacios internos */
#beneficios .benefit-card .benefit-icon{ margin-bottom: .75rem; }
#beneficios .benefit-card h3{ margin: .25rem 0 .5rem; text-align: center; }

/* Si quieres texto pegadito abajo para equilibrar: */
#beneficios .benefit-card p{ margin-top: auto; text-align: center; }
/* === KITS SOLARES: header celeste con degradado ARRIBA -> ABAJO === */
#servicios .kit-card .kit-header {
  /* limpiamos y sobreescribimos cualquier fondo previo */
  background: none !important;

  /* celeste fijo que se aclara hacia abajo (poco blanco) */
  background-color: #bfe2ff !important; /* fallback */
  background-image: linear-gradient(
    to bottom,
    #bfe2ff 0%,   /* celeste más intenso ARRIBA */
    #dff0ff 78%,  /* se aclara suavemente */
    #f7fbff 100%  /* casi blanco ABAJO (poquito) */
  ) !important;

  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-position: top !important;
  border-bottom: 1px solid #d7e9ff;
}

/* Si alguna variante redefine el header, lo cubrimos igual */
#on-grid .kit-card .kit-header,
#hibridos .kit-card .kit-header,
#off-grid .kit-card .kit-header {
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 90%, #ffffff 80%) !important;
}

/* La banda azul "ON GRID / HÍBRIDOS / OFF GRID" queda intacta */
.kit-card .kit-category { background: var(--primary-blue); color: #fff; }
/* --- Quienes somos: 2 columnas simétricas --- */
#quienes-somos .about-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  #quienes-somos .about-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch; /* mismas alturas */
  }
}
#quienes-somos .about-card {
  background: #ffffff;
  border: 1px solid #e9eef7;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 20px rgba(0,0,0,.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}
#quienes-somos .about-card h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem 0;
  font-weight: 700;
}
#quienes-somos .about-card ul {
  margin: .75rem 0 0 0;
  padding: 0;
  list-style: none;
}
#quienes-somos .about-card ul li {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .35rem 0;
}
#quienes-somos .about-card ul li i {
  font-size: 1.1rem;
}

/* Si alguna card tenía anchos distintos, igualamos */
#quienes-somos .card--mission,
#quienes-somos .card--vision {
  width: 100%;
}
#beneficios .section-title {
  color: #ffffff !important;
}



/* =========================================================
   Footer EnerSun — Estilado profesional, aislado a .ef-footer
   ========================================================= */
.ef-footer{
  /* Tokens del footer */
  --ef-blue: #05294b;              /* azul “Cotización” */
  --ef-blue-dark: #094a86;
  --ef-text: #ffffff;
  --ef-btn-bg: rgba(255,255,255,.12);
  --ef-btn-bg-hover: rgba(255,255,255,.18);
  --ef-min-h: 320px;
  --ef-max-w: 1200px;
  --ef-gap-sm: 8px;
  --ef-gap-md: 12px;
  --ef-gap-lg: 20px;

  background: linear-gradient(180deg, var(--ef-blue) 0%, var(--ef-blue-dark) 100%);
  color: var(--ef-text);

  /* Evita “líneas” por colapso de márgenes previas */
  border-top: 1px solid transparent;
  margin-top: 0;

  /* Alto y centrado del bloque */
  min-height: var(--ef-min-h);
  display: grid;
  place-items: center;

  /* Padding lógico + safe areas */
  padding-inline: max(16px, env(safe-area-inset-left), env(safe-area-inset-right));
  padding-block: 0;
}

.ef-footer .ef-wrap{
  width: 100%;
  max-width: var(--ef-max-w);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ef-gap-lg);
}

.ef-footer .ef-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ef-gap-lg);
  flex-wrap: wrap;             
}

.ef-footer .ef-left{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ef-footer .ef-brand{
  font-weight: 800;
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: var(--ef-text);
}

.ef-footer .ef-tagline{
  opacity: .92;
  font-weight: 500;
  color: var(--ef-text);
}

.ef-footer .ef-copy{
  opacity: .85;
  font-size: .92rem;
  color: var(--ef-text);
}

/* Social buttons */
.ef-footer .ef-right{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ef-gap-md);
  justify-content: center;
}

.ef-footer .ef-social{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--ef-btn-bg);
  color: var(--ef-text);
  text-decoration: none;
  transition: transform .15s ease, background .15s ease;
  will-change: transform, background;
}

.ef-footer .ef-social:hover{
  background: var(--ef-btn-bg-hover);
  transform: translateY(-1px);
}

.ef-footer .ef-social:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  text-decoration: none;
}

.ef-footer .ef-social i{
  font-size: 1.1rem;
  line-height: 1;
}

/* Línea divisoria inferior (opcional) */
.ef-footer .ef-divider{
  height: 1px;
  background: rgba(255,255,255,.14);
  width: 100%;
  border-radius: 1px;
}

/* Responsive */
@media (max-width: 768px){
  .ef-footer{ min-height: 260px; }
  .ef-footer .ef-content{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ef-footer .ef-left{ align-items: center; }
}
/* Estilo especial para el enlace de Crédito Verde */
.nav-highlight {
  background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.nav-highlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.nav-highlight:hover::before {
  left: 100%;
}

.nav-highlight:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3) !important;
  background: linear-gradient(135deg, #66bb6a, #4caf50) !important;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .nav-highlight {
    margin-top: 0.5rem !important;
    display: inline-block !important;
  }
}
.kit-pre{
  white-space: pre-wrap;
  margin: 0;
  font-family: inherit;
  font-size: clamp(1.05rem, 0.8vw + 0.9rem, 1.35rem);
  line-height: 1.9;
  letter-spacing: .2px;
}
/* Evitar scroll horizontal global (incluye iOS/Android) */
html, body { 
  max-width: 100%;
  overflow-x: hidden;
}

/* Cuando el menú está abierto, bloquea el scroll de fondo */
body.menu-open { 
  overscroll-behavior: contain;
  touch-action: none;
}

/* Capas correctas en móvil */
@media (max-width: 768px) {
  .header { z-index: 1000; }
  .menu-overlay { z-index: 1001 !important; }
  .mobile-menu-btn { z-index: 1002 !important; }
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100vw !important;   /* fuera 100% del viewport */
    left: auto !important;
    width: 70vw !important;     /* panel lateral */
    max-width: 320px !important;
    height: 100dvh !important;  /* alto real de pantalla en móviles */
    z-index: 1003 !important;   /* por encima del overlay */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .nav-menu.active { 
    right: 0 !important;        /* entra a la vista */
  }
}


:root { --header-h: 80px; } /* ajusta según la altura real de tu barra */
#site-header,
#quienes-somos,
#servicios,
#beneficios,
#contacto,
#on-grid,
#hibrido,
#off-grid,
#comparativa,
#que-es,
#proceso {
  scroll-margin-top: var(--header-h);
}


@media (max-width:768px){
  .nav-menu{ z-index:10000 !important; position:fixed !important; }
  .menu-overlay{ z-index:9999 !important; }
}
@media (max-width:768px){
  .mobile-menu-btn{ 
    display:block !important; 
    z-index: 1002 !important; 
    position: relative !important; 
  }
  
  .nav-menu{
    display: flex !important;
    position: fixed !important; 
    top: 0 !important; 
    right: -100% !important; 
    width: 70% !important; 
    max-width: 300px !important; 
    height: 100vh !important; 
    height: 100dvh !important;
    background: linear-gradient(135deg, #000 0%, #1a1a1a 100%) !important;
    flex-direction: column !important; 
    padding: 5rem 1.75rem 2rem !important; 
    box-shadow: -8px 0 24px rgba(0,0,0,0.6) !important; 
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 1001 !important;  /* ← MÁS ALTO que el overlay */
    overflow-y: auto !important;
    pointer-events: auto !important;  /* ← SIEMPRE puede recibir clicks */
  }
  
  .nav-menu.active{ 
    right: 0 !important; 
  }
  
  .nav-menu li,
  .nav-menu a { 
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

@media (max-width: 768px) {
  .nav-menu * {
    pointer-events: auto !important;
  }
  

  .menu-overlay {
    pointer-events: auto !important;
  }
  
  .nav-menu a {
    position: relative !important;
    z-index: 10 !important;
  }
}
.menu-overlay {
  display: none !important; 
}