/* 
 * factura-luz.css
 * Contiene estilos específicos de la página factura-luz.html,
 * incluyendo secciones hero, conceptos, consejos, FAQ y media queries.
 * Los estilos comunes se cargan desde common.css, header.css, y footer.css.
 */

/* Fondo general de la página */
body {
  background-color: #fff; /* Fondo blanco completo para toda la página */
}

/* Ajuste específico para el dropdown-menu en esta página */
.dropdown-menu {
  top: 90%; /* Mayor superposición para evitar el espacio que dispara el mouseleave */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Añadir transición para suavizar el cierre */
}

/* Optimizar el botón "Llamar ahora" para evitar retrasos */
.header-btn {
  transition: background-color 0.2s ease; /* Reducir la transición y eliminar transform para evitar retrasos */
}

/* Hero Section (Combinada con CTA) */
.hero-section { 
  padding: 30px 0 50px; 
  background-color: #e6f0fa; 
  margin-top: 0; 
}
.hero-content { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 20px; 
}
.hero-text { 
  flex: 1; 
  max-width: 50%; 
  text-align: left; 
}
.hero-text h1 { 
  font-size: 2.5em; 
  color: #003087; 
  margin-bottom: 15px; 
  font-weight: 700; 
}
.hero-text p { 
  font-size: 1.1em; 
  color: #555; 
  margin-bottom: 20px; 
}
.hero-text .call-to-action-text { 
  display: block; 
}
.hero-text .cta-button--small { 
  display: block; 
  padding: 12px 25px; 
  margin-top: 10px; 
  margin-bottom: 10px; 
  text-align: center; 
  width: 100%; 
  max-width: 450px; 
}
.hero-image { 
  flex: 1; 
  max-width: 50%; 
  text-align: right; 
}
.hero-image img { 
  max-width: 100%; 
  width: 100%; 
  max-height: 350px; 
  object-fit: contain; 
  margin-top: 80px; 
}
.hero-image .schedule-text { 
  font-size: 0.9em; 
  color: #666; 
  margin-top: 20px; 
  text-align: center; 
}

/* Conceptos Clave */
.concepts-section { 
  padding: 40px 0 60px; /* Reducido el padding-top de 60px a 40px */
  text-align: center; 
  background-color: #fff; 
}
.concepts-section h2 { 
  font-size: 2.5em; 
  color: #003087; 
  margin-bottom: 30px; 
  font-weight: 700; 
}
.concepts-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px; 
}
.concepts-grid-bottom { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 25px; 
  margin-top: 20px; 
}
.concepts-card { 
  background-color: #fff; 
  padding: 25px; 
  border-radius: 10px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
  border: 1px solid #e0e0e0; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.concepts-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); 
}
.concepts-card h3 { 
  font-size: 1.2em; 
  color: #003087; 
  margin-bottom: 10px; 
  font-weight: 600; 
}
.concepts-card p { 
  font-size: 0.95em; 
  color: #555; 
  line-height: 1.5; 
}
.concepts-card a { 
  color: #f4a261; 
  text-decoration: none; 
  font-weight: 500; 
}
.concepts-card a:hover { 
  color: #e08e4e; 
  text-decoration: underline; 
}

/* Optimización */
.optimization-section { 
  padding: 60px 0; 
  text-align: center; 
  background-color: #e6f0fa; 
  margin: 0; 
  width: 100%; 
}
.optimization-section .container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 0 20px; 
}
.optimization-section h2 { 
  font-size: 2em; 
  color: #003087; 
  margin-bottom: 20px; 
  font-weight: 700; 
}
.optimization-section p { 
  font-size: 1em; 
  color: #666; 
  margin-bottom: 30px; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto; 
}
.advice-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 25px; 
}
.advice-grid-bottom { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 25px; 
  margin-top: 20px; 
}
.advice-card { 
  background-color: #fff; 
  padding: 25px; 
  border-radius: 10px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
  border: 1px solid #e0e0e0; 
  transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.advice-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); 
}
.advice-card h3 { 
  font-size: 1.2em; 
  color: #003087; 
  margin-bottom: 10px; 
  font-weight: 600; 
}
.advice-card p { 
  font-size: 0.95em; 
  color: #555; 
  line-height: 1.5; 
}
.advice-card a { 
  color: #f4a261; 
  text-decoration: none; 
  font-weight: 500; 
}
.advice-card a:hover { 
  color: #e08e4e; 
  text-decoration: underline; 
}

/* Consejos para Ahorrar */
.tips-section { 
  padding: 40px 0 20px; 
  text-align: center; 
  background-color: #fff; 
}
.tips-section h2 { 
  font-size: 2em; 
  color: #003087; 
  margin-bottom: 20px; 
  font-weight: 700; 
}
.tips-section > p { 
  font-size: 1em; 
  color: #666; 
  margin-bottom: 30px; 
  max-width: 800px; 
  margin-left: auto; 
  margin-right: auto; 
}
.tips-content { 
  display: flex; 
  justify-content: space-between; 
  align-items: flex-start; 
  gap: 20px; 
}
.tips-text { 
  flex: 1; 
  max-width: 50%; 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
}
.tips-image { 
  flex: 1; 
  max-width: 50%; 
  text-align: right; 
  margin-top: 0; 
}
.tips-image img { 
  max-width: 100%; 
  width: 100%; 
  max-height: 380px; 
  object-fit: contain; 
}

/* Beneficios */
.benefits { 
  padding: 60px 0; 
  background-color: #e6f0fa; 
}
.benefit-grid { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 20px; 
}
.benefit-card { 
  background-color: #fff; 
  padding: 20px; 
  border-radius: 10px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); 
  text-align: center; 
}
.benefit-card .icon { 
  display: block; 
  margin: 0 auto 10px; 
  text-align: center; 
}
.benefit-card p { 
  font-size: 0.95em; 
  color: #555; 
  line-height: 1.5; 
}
.benefit-card strong { 
  color: #003087; 
  font-weight: 600; 
}
.benefits .enterprise-text { 
  margin-top: 40px; 
}
.benefits .enterprise-text a { 
  color: #f4a261; 
  text-decoration: none; 
  font-weight: 500; 
}
.benefits .enterprise-text a:hover { 
  color: #e08e4e; 
  text-decoration: underline; 
}

/* Sección de Preguntas Frecuentes */
.faq-section { 
  padding: 60px 0; 
  text-align: center; 
  background-color: #fff; 
}
.faq-item { 
  background-color: #f9f9f9; 
  padding: 20px; 
  border-radius: 8px; 
  margin-bottom: 20px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
  text-align: left; 
}
.faq-item h3 { 
  font-size: 1.3em; 
  color: #003087; 
  margin-bottom: 10px; 
  font-weight: 600; 
}
.faq-item p { 
  font-size: 0.95em; 
  color: #666; 
  line-height: 1.5; 
}
.faq-item a { 
  color: #f4a261; 
  text-decoration: none; 
  font-weight: 500; 
}
.faq-item a:hover { 
  color: #e08e4e; 
  text-decoration: underline; 
}

/* Sección de Contacto con Teleoperadora */
.cta-section { 
  padding: 60px 0 20px; 
  background-color: #e6f0fa; 
}
.cta-content { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  gap: 20px; 
}
.cta-image { 
  flex: 1; 
  text-align: left; 
}
.cta-image__img { 
  max-width: 400px; 
}
.cta-text { 
  flex: 1; 
  text-align: left; 
  padding-left: 20px; 
}
.cta-text h2 { 
  font-size: 2.5em; 
  color: #003087; 
  margin-bottom: 15px; 
  font-weight: 700; 
}
.cta-text p { 
  font-size: 1.2em; 
  color: #666; 
  margin-bottom: 25px; 
}
.cta-text .cta-button--small { 
  display: inline-block; 
  padding: 12px 25px; 
  margin-top: 15px; 
}

/* Media queries */
@media (max-width: 1024px) {
  .hero-section h1 { 
    font-size: 2.5em; 
  }
  .hero-section p { 
    font-size: 1.2em; 
  }
  .hero-content { 
    flex-direction: column; 
    align-items: center; 
  }
  .hero-text { 
    max-width: 100%; 
    text-align: center; 
  }
  .hero-text .cta-button--small { 
    margin: 10px auto; 
    width: auto; 
    max-width: 300px; 
  }
  .hero-image { 
    max-width: 100%; 
    text-align: center; 
    margin-top: 20px; 
  }
  .hero-image .schedule-text { 
    margin-top: 10px; 
  }
  .benefit-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .concepts-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .concepts-grid-bottom { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .advice-grid { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .advice-grid-bottom { 
    grid-template-columns: repeat(2, 1fr); 
  }
  .tips-content { 
    flex-direction: column; 
    align-items: center; 
  }
  .tips-text { 
    max-width: 100%; 
  }
  .tips-image { 
    max-width: 100%; 
    text-align: center; 
    margin-top: 20px; 
    margin-top: 0; 
  }
  .cta-content { 
    flex-direction: column; 
    align-items: center; 
  }
  .cta-text { 
    text-align: center; 
    padding-left: 0; 
  }
  .cta-text h2, .cta-text p { 
    text-align: center; 
  }
}

@media (max-width: 768px) {
  .hero-section, .concepts-section, .optimization-section, .tips-section, .benefits, .faq-section, .cta-section { 
    padding: 40px 15px; 
  }
  .hero-section { 
    padding-top: 30px; 
  }
  .concepts-section { 
    padding-top: 40px; 
  }
  .tips-section { 
    padding-bottom: 20px; 
  }
  .cta-section { 
    padding-bottom: 20px; 
  }
  .hero-section h1 { 
    font-size: 2em; 
  }
  .hero-section p { 
    font-size: 1.1em; 
  }
  .benefit-grid { 
    grid-template-columns: 1fr; 
  }
  .concepts-grid { 
    grid-template-columns: 1fr; 
  }
  .concepts-grid-bottom { 
    grid-template-columns: 1fr; 
  }
  .advice-grid { 
    grid-template-columns: 1fr; 
  }
  .advice-grid-bottom { 
    grid-template-columns: 1fr; 
  }
}

@media (max-width: 480px) {
  .hero-section h1 { 
    font-size: 1.8em; 
  }
  .hero-section p { 
    font-size: 0.95em; 
  }
  .concepts-section h2, .optimization-section h2, .tips-section h2, .benefits h2, .cta-text h2 { 
    font-size: 1.6em; 
  }
  .cta-text p { 
    font-size: 1em; 
  }
  .faq-item h3 { 
    font-size: 1.1em; 
  }
  .faq-item p { 
    font-size: 0.9em; 
  }
}