/* ============================================================
   styles.css — Hoja de estilos global de IEC SOLAR
   Contiene: variables de color, reset, tipografía,
   navbar, footer, botones, cards, formularios, animaciones
   y media queries (responsive).
   ============================================================ */

/* ----------------------------------------------------------
   1. VARIABLES GLOBALES
   Definen la paleta de colores y fuentes que se usan en todo
   el sitio. Cambiar aquí afecta a todas las páginas.
   ---------------------------------------------------------- */
:root {
  --color-navy:       #0A192F; /* Azul oscuro principal (fondos, navbar) */
  --color-navy-mid:   #112240; /* Azul medio (cards sobre fondo navy) */
  --color-navy-border:#233554; /* Borde sutil sobre fondos navy */
  --color-amber:      #F5A623; /* Dorado/amber (acentos, botones CTA) */
  --color-amber-dark: #D48B1A; /* Amber oscuro (hover de botones) */
  --color-white:      #F8FAFC; /* Blanco suave (textos sobre fondo oscuro) */
  --color-text:       #0A192F; /* Texto principal sobre fondo claro */
  --color-text-muted: rgba(10,25,47,0.65); /* Texto secundario */
  --color-bg-light:   #F8FAFC; /* Fondo claro de secciones */
  --color-border:     #E2E8F0; /* Borde suave en cards claras */
  --color-green:      #25D366; /* Verde WhatsApp */
  --color-green-dark: #20BD5A; /* Verde hover WhatsApp */

  --font-main: 'Outfit', 'Segoe UI', Arial, sans-serif; /* Fuente principal */
  --max-width: 1280px;  /* Ancho máximo del contenido */
  --navbar-h: 96px;     /* Altura de la barra de navegación */
  --transition: 0.3s ease; /* Transición estándar */
}

/* ----------------------------------------------------------
   2. RESET Y BASE
   Elimina estilos predeterminados del navegador para partir
   desde una base limpia y consistente.
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box; /* Incluye padding/border en el cálculo de ancho */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* Desplazamiento suave al hacer clic en anclas */
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-bg-light);
  line-height: 1.6;
  /* Agrega espacio arriba para que el contenido no quede detrás del navbar fijo */
  padding-top: var(--navbar-h);
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ----------------------------------------------------------
   3. TIPOGRAFÍA (importar Google Fonts desde el HTML)
   Se usa la fuente Outfit para títulos y textos destacados.
   ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-main);
  line-height: 1.2;
  font-weight: 700;
}

/* ----------------------------------------------------------
   4. UTILIDADES GENERALES
   Clases reutilizables que se aplican en múltiples lugares.
   ---------------------------------------------------------- */

/* Contenedor centrado con ancho máximo */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Línea decorativa amber que aparece sobre los títulos */
.amber-line {
  width: 48px;
  height: 3px;
  background: var(--color-amber);
  margin-bottom: 24px;
}

/* Versión centrada de la línea amber */
.amber-line--center {
  margin-left: auto;
  margin-right: auto;
}

/* Sección con fondo claro */
.section-light {
  background: var(--color-bg-light);
  padding: 80px 0;
}

/* Sección con fondo navy oscuro */
.section-dark {
  background: var(--color-navy);
  padding: 80px 0;
}

/* Encabezado de sección (título + subtítulo centrado) */
.section-header {
  text-align: center;
  margin-bottom: 60px;
}
.section-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: var(--color-white);
}
.section-header p {
  margin-top: 16px;
  color: rgba(248,250,252,0.6);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.section-header--light h2 { color: var(--color-text); }
.section-header--light p  { color: var(--color-text-muted); }

/* ----------------------------------------------------------
   5. BOTONES
   Dos estilos principales: primario (amber) y secundario
   (contorno amber). Se usan en CTAs y formularios.
   ---------------------------------------------------------- */

/* Botón primario: fondo amber, texto navy */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 14px 28px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-decoration: none;
}

.btn-primary {
  background: var(--color-amber);
  color: var(--color-navy);
}
.btn-primary:hover {
  background: var(--color-amber-dark);
}

/* Botón secundario: solo borde, sin relleno */
.btn-outline {
  background: transparent;
  border: 2px solid var(--color-amber);
  color: var(--color-amber);
}
.btn-outline:hover {
  background: var(--color-amber);
  color: var(--color-navy);
}

/* Botón dark: fondo navy, texto blanco (usado en CTAs amber) */
.btn-dark {
  background: var(--color-navy);
  color: var(--color-white);
}
.btn-dark:hover {
  background: var(--color-navy-mid);
}

/* Botón WhatsApp */
.btn-whatsapp {
  background: var(--color-green);
  color: #fff;
  justify-content: center;
  width: 100%;
}
.btn-whatsapp:hover {
  background: var(--color-green-dark);
}

/* Botón deshabilitado (durante carga del formulario) */
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ----------------------------------------------------------
   6. NAVBAR
   Barra de navegación fija en la parte superior. Tiene logo,
   links de menú, un dropdown para "Sistemas Solares" y un
   botón CTA. En mobile se convierte en menú hamburguesa.
   ---------------------------------------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(10, 25, 47, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-navy-border);
  height: var(--navbar-h);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* Logo: imagen + nombre de la empresa */
.navbar__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.navbar__logo-img {
  height: 52px;
  width: auto;
  object-fit: contain;
  image-rendering: auto;
}
.navbar__logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-white);
}
.navbar__logo-text span {
  color: var(--color-amber); /* "SOLAR" en dorado */
}

/* Links de navegación desktop */
.navbar__links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.navbar__link {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(248,250,252,0.8);
  transition: color var(--transition);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-main);
  display: flex;
  align-items: center;
  gap: 4px;
}
.navbar__link:hover,
.navbar__link.active {
  color: var(--color-amber);
}

/* Botón CTA del navbar ("Cotizar Ahora") */
.navbar__cta {
  margin-left: 16px;
}

/* Contenedor del dropdown "Sistemas Solares" */
.navbar__dropdown {
  position: relative;
}

/* Panel del dropdown (oculto por defecto, visible al hacer clic) */
.navbar__dropdown-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;   /* Sin separación: evita el "gap" que hacía cerrar el menú */
  min-width: 200px;
  background: var(--color-navy-mid);
  border: 1px solid var(--color-navy-border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 100;
}

/* El dropdown se abre SOLO con clic (JS agrega la clase "open").
   Se eliminó el hover del CSS porque causaba que el panel
   desapareciera al mover el mouse hacia las opciones. */
.navbar__dropdown-panel.open {
  display: block;
}

/* Link individual dentro del dropdown */
.navbar__dropdown-link {
  display: block;
  padding: 12px 20px;
  font-size: 0.875rem;
  color: rgba(248,250,252,0.8);
  transition: color var(--transition), background var(--transition);
}
.navbar__dropdown-link:hover,
.navbar__dropdown-link.active {
  color: var(--color-amber);
  background: rgba(10,25,47,0.5);
}

/* Ícono de la flecha del dropdown (rotado cuando está abierto) */
.navbar__chevron {
  display: inline-block;
  transition: transform var(--transition);
  font-style: normal;
  font-size: 0.7rem;
}
.navbar__dropdown:hover .navbar__chevron {
  transform: rotate(180deg);
}

/* Botón hamburguesa (solo visible en mobile) */
.navbar__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-white);
  font-size: 1.5rem;
  padding: 8px;
}

/* Menú mobile (oculto por defecto) */
.navbar__mobile {
  display: none;
  background: var(--color-navy);
  border-top: 1px solid var(--color-navy-border);
  padding: 16px 24px;
}
.navbar__mobile.open {
  display: block; /* Se muestra cuando JS agrega la clase "open" */
}

.navbar__mobile-link {
  display: block;
  padding: 12px 16px;
  font-size: 0.875rem;
  color: rgba(248,250,252,0.8);
  transition: color var(--transition);
}
.navbar__mobile-link:hover { color: var(--color-amber); }

/* Submenú colapsable en mobile */
.navbar__mobile-submenu {
  padding-left: 24px;
  display: none;
}
.navbar__mobile-submenu.open { display: block; }

.navbar__mobile-submenu-link {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  color: rgba(248,250,252,0.6);
}
.navbar__mobile-submenu-link:hover { color: var(--color-amber); }

/* ----------------------------------------------------------
   7. FOOTER
   Pie de página con 3 columnas: marca, navegación y contacto.
   ---------------------------------------------------------- */
.footer {
  background: var(--color-navy);
  color: rgba(248,250,252,0.8);
}

/* Línea decorativa amber en la parte superior del footer */
.footer__top-line {
  height: 4px;
  background: var(--color-amber);
}

.footer__inner {
  padding: 64px 0 32px;
}

/* Grid de 3 columnas */
.footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

.footer__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.footer__logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
}
.footer__logo-text {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-white);
}
.footer__logo-text span { color: var(--color-amber); }

.footer__desc {
  font-size: 0.875rem;
  color: rgba(248,250,252,0.55);
  line-height: 1.7;
}

.footer__col-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-amber);
  margin-bottom: 24px;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__nav-link {
  font-size: 0.875rem;
  color: rgba(248,250,252,0.75);
  transition: color var(--transition);
}
.footer__nav-link:hover { color: var(--color-amber); }

.footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer__contact-icon {
  color: var(--color-amber);
  font-size: 1.05rem;
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
}
.footer__contact-link {
  font-size: 0.875rem;
  color: rgba(248,250,252,0.75);
  transition: color var(--transition);
}
.footer__contact-link:hover { color: var(--color-amber); }

/* Línea inferior del footer con copyright */
.footer__bottom {
  border-top: 1px solid var(--color-navy-border);
  padding: 24px 0;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(248,250,252,0.35);
}

/* ----------------------------------------------------------
   8. HERO SECTIONS
   Secciones de portada con imagen de fondo, overlay oscuro
   y contenido centrado a la izquierda.
   ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Overlay semitransparente sobre la imagen del hero */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 47, 0.75);
}

/* Contenido del hero (encima del overlay) */
.hero__content {
  position: relative;
  z-index: 1;
  padding: 120px 0 80px;
  max-width: 760px;
}

.hero__title {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.15;
}
.hero__title span { color: var(--color-amber); }

.hero__subtitle {
  margin-top: 24px;
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  color: rgba(248,250,252,0.7);
  max-width: 560px;
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* Hero más pequeño para páginas internas */
.hero--small {
  min-height: 40vh;
}
.hero--small .hero__content {
  padding: 96px 0 48px;
}

/* ----------------------------------------------------------
   9. STATS BAR
   Barra de 3 estadísticas destacadas (bajo el hero principal).
   ---------------------------------------------------------- */
.stats {
  background: var(--color-navy);
  padding: 48px 0;
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.stats__item {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.stats__icon {
  height: 56px;
  width: 56px;
  /* Glow radial ámbar de fondo (estilo de la referencia) */
  background: radial-gradient(circle, rgba(245,166,35,0.30) 0%, rgba(245,166,35,0.05) 58%, transparent 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: var(--color-white);
  flex-shrink: 0;
}

.stats__value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-amber);
}
.stats__label {
  font-size: 0.8rem;
  color: rgba(248,250,252,0.55);
  margin-top: 2px;
}

/* ----------------------------------------------------------
   10. GRID DE SISTEMAS (cards en Home y Sistemas)
   ---------------------------------------------------------- */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.system-card {
  background: var(--color-navy-mid);
  border: 1px solid var(--color-navy-border);
  padding: 32px;
  display: block;
  transition: border-color var(--transition);
  cursor: pointer;
}
.system-card:hover {
  border-color: rgba(245,166,35,0.5);
}

.system-card__icon {
  height: 48px;
  width: 48px;
  background: rgba(245,166,35,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 1.3rem;
  color: var(--color-amber);
  transition: background var(--transition);
}
.system-card:hover .system-card__icon {
  background: rgba(245,166,35,0.2);
}

.system-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}

.system-card__desc {
  font-size: 0.875rem;
  color: rgba(248,250,252,0.55);
}

.system-card__arrow {
  margin-top: 24px;
  font-size: 0.875rem;
  color: var(--color-amber);
  font-weight: 500;
  opacity: 0;
  transition: opacity var(--transition);
}
.system-card:hover .system-card__arrow { opacity: 1; }

/* ----------------------------------------------------------
   11. GRID DE SERVICIOS
   ---------------------------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.service-card {
  padding: 32px;
  border: 1px solid var(--color-border);
  background: #fff;
  /* Transición suave para el borde, sombra y desplazamiento vertical */
  transition: box-shadow var(--transition),
              border-color var(--transition),
              transform var(--transition);
}
/* Al pasar el mouse: sube levemente, borde amber, sombra visible */
.service-card:hover {
  box-shadow: 0 8px 32px rgba(10,25,47,0.12);
  border-color: var(--color-amber);
  transform: translateY(-4px);
}
/* El glow del ícono se intensifica al hacer hover sobre la card */
.service-card:hover .service-card__icon {
  background: radial-gradient(circle, rgba(245,166,35,0.40) 0%, rgba(245,166,35,0.10) 58%, transparent 74%);
}

.service-card__icon {
  height: 56px;
  width: 56px;
  /* Glow radial ámbar; sobre fondo claro el ícono va en ámbar para contraste */
  background: radial-gradient(circle, rgba(245,166,35,0.22) 0%, rgba(245,166,35,0.06) 58%, transparent 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 1.7rem;
  color: var(--color-amber);
  transition: background var(--transition);
}

.service-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}

.service-card__desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ----------------------------------------------------------
   12. SECCIÓN "NUESTRA HISTORIA" (two-column layout)
   ---------------------------------------------------------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about__img-wrapper {
  position: relative;
}
.about__img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

/* Badge flotante con "+30 años" */
.about__badge {
  position: absolute;
  bottom: -24px;
  left: -24px;
  background: var(--color-amber);
  padding: 24px;
}
.about__badge-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}
.about__badge-label {
  font-size: 0.8rem;
  color: rgba(10,25,47,0.75);
  margin-top: 4px;
}

.about__text h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--color-text);
  margin-bottom: 24px;
}
.about__text p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: 16px;
}

/* ----------------------------------------------------------
   13. SECCIÓN PROCESO (4 pasos numerados)
   ---------------------------------------------------------- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}

.process-step__number {
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(245,166,35,0.2);
  margin-bottom: 16px;
}

.process-step__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}

.process-step__desc {
  font-size: 0.875rem;
  color: rgba(248,250,252,0.55);
}

/* ----------------------------------------------------------
   14. CTA SECTIONS
   Sección de llamada a la acción: amber o con imagen de fondo.
   ---------------------------------------------------------- */
.cta-amber {
  background: var(--color-amber);
  padding: 64px 0;
  text-align: center;
}
.cta-amber h2 {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  color: var(--color-navy);
}
.cta-amber p {
  margin-top: 12px;
  color: rgba(10,25,47,0.7);
  font-size: 0.95rem;
}
.cta-amber .btn { margin-top: 32px; }

/* ----------------------------------------------------------
   FAQ — Preguntas Frecuentes (acordeón)
   ---------------------------------------------------------- */
.faq {
  padding: 96px 0;
  background: var(--color-navy);
}
.faq .section-label {
  color: var(--color-amber);
  text-align: center;
  margin-bottom: 12px;
}
.faq h2 {
  text-align: center;
  color: #F8FAFC;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: 16px;
}
.faq__subtitle {
  text-align: center;
  color: rgba(248,250,252,0.6);
  font-size: 1rem;
  margin-bottom: 56px;
}
.faq__list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq__item {
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-navy-mid);
  border: 1px solid var(--color-navy-border);
  transition: border-color var(--transition);
}
.faq__item:has(.faq__question[aria-expanded="true"]) {
  border-color: var(--color-amber);
}
.faq__question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-main);
  font-size: 1.05rem;
  font-weight: 600;
  color: #F8FAFC;
  transition: color var(--transition);
}
.faq__question:hover { color: var(--color-amber); }
.faq__question[aria-expanded="true"] { color: var(--color-amber); }
.faq__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-amber);
  transition: transform var(--transition);
}
.faq__question[aria-expanded="true"] .faq__icon { transform: rotate(180deg); }
.faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq__answer.open { max-height: 600px; }
.faq__answer p,
.faq__answer ul {
  padding: 0 28px;
  color: rgba(248,250,252,0.72);
  font-size: 0.95rem;
  line-height: 1.75;
}
.faq__answer p:first-child { padding-top: 0; }
.faq__answer p:last-child { padding-bottom: 24px; }
.faq__answer ul {
  padding-left: 48px;
  padding-bottom: 12px;
}
.faq__answer ul li { margin-bottom: 8px; }
.faq__answer ul li strong { color: #F8FAFC; }

.cta-image {
  position: relative;
  padding: 80px 0;
  background-size: cover;
  background-position: center;
  text-align: center;
}
.cta-image__overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,25,47,0.8);
}
.cta-image__content {
  position: relative;
  z-index: 1;
}
.cta-image h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--color-white);
}
.cta-image p {
  margin-top: 16px;
  color: rgba(248,250,252,0.7);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.cta-image .btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* ----------------------------------------------------------
   15. FORMULARIO DE CONTACTO
   ---------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 48px;
}

.contact-form-wrapper {
  background: #fff;
  border: 1px solid var(--color-border);
  padding: 40px;
}
.contact-form-wrapper h2 {
  font-size: 1.4rem;
  color: var(--color-text);
  margin-bottom: 32px;
}

.form-group {
  margin-bottom: 24px;
}
/* Campo trampa anti-spam: fuera de pantalla, invisible para humanos */
.hidden-field {
  position: absolute;
  left: -9999px;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* Input, select y textarea comparten el mismo estilo base */
.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  color: var(--color-text);
  font-size: 0.875rem;
  font-family: var(--font-main);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  resize: none; /* Para textarea */
}
.form-control:focus {
  border-color: var(--color-amber);
  box-shadow: 0 0 0 2px rgba(245,166,35,0.2);
}

/* Mensaje de éxito tras enviar el formulario */
.form-success {
  display: none; /* JS lo muestra */
  align-items: center;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 16px;
  margin-bottom: 24px;
  color: #15803d;
  font-size: 0.875rem;
}
.form-success.show { display: flex; }

/* Mensaje de error del formulario */
.form-error {
  display: none; /* JS lo muestra */
  background: #fef2f2;
  border: 1px solid #fecaca;
  padding: 16px;
  margin-bottom: 24px;
  color: #dc2626;
  font-size: 0.875rem;
}
.form-error.show { display: block; }

/* Panel de información de contacto (lado derecho) */
.contact-info {
  background: var(--color-navy);
  padding: 40px;
  height: 100%;
}
.contact-info h3 {
  font-size: 1.25rem;
  color: var(--color-white);
  margin-bottom: 32px;
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.contact-info__icon-box {
  height: 48px;
  width: 48px;
  background: radial-gradient(circle, rgba(245,166,35,0.30) 0%, rgba(245,166,35,0.05) 58%, transparent 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--color-white);
}
.contact-info__label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 4px;
}
.contact-info__value {
  font-size: 0.875rem;
  color: var(--color-amber);
  transition: color var(--transition);
}
.contact-info__value:hover { color: var(--color-amber-dark); }

.contact-info__divider {
  border-top: 1px solid var(--color-navy-border);
  margin: 32px 0 28px;
}
.contact-info__whatsapp-hint {
  font-size: 0.875rem;
  color: rgba(248,250,252,0.55);
  margin-bottom: 16px;
}

/* ----------------------------------------------------------
   16. PÁGINA DE SISTEMA SOLAR (beneficios + componentes)
   ---------------------------------------------------------- */
.benefits-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
.benefits-list__check {
  color: var(--color-amber);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1rem;
}

.components-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.component-card {
  background: var(--color-navy-mid);
  border: 1px solid var(--color-navy-border);
  padding: 32px;
  transition: border-color var(--transition);
}
.component-card:hover { border-color: rgba(245,166,35,0.3); }

.component-card__number {
  height: 40px;
  width: 40px;
  background: rgba(245,166,35,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-amber);
}
.component-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
}
.component-card__desc {
  font-size: 0.8rem;
  color: rgba(248,250,252,0.55);
  line-height: 1.6;
}

/* ----------------------------------------------------------
   17. ANIMACIONES (fade-up al hacer scroll)
   Las clases .fade-up se añaden a los elementos que deben
   animarse. JS usa IntersectionObserver para activarlos.
   ---------------------------------------------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Estado visible (JS agrega esta clase cuando el elemento entra en viewport) */
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Retrasos escalonados para animar cards en secuencia */
.fade-up[data-delay="1"] { transition-delay: 0.1s; }
.fade-up[data-delay="2"] { transition-delay: 0.2s; }
.fade-up[data-delay="3"] { transition-delay: 0.3s; }
.fade-up[data-delay="4"] { transition-delay: 0.4s; }

/* ----------------------------------------------------------
   17b. SECCIÓN SOLUCIONES (tabs + fondo dinámico)
   ---------------------------------------------------------- */

/* Contenedor principal: cubre toda la pantalla, posición relativa
   para que el fondo absoluto quede debajo del contenido */
.solutions-section {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 80px 0;
}

/* Cada imagen de fondo (una por pestaña).
   Solo la que tiene la clase "active" se muestra.
   La transición de opacidad genera el efecto de fade entre fondos. */
.solutions-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}
.solutions-bg.active {
  opacity: 1;
}

/* Overlay oscuro encima del fondo para garantizar legibilidad */
.solutions-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 25, 47, 0.72);
  z-index: 1;
}

/* El contenido va por encima del overlay */
.solutions-container {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Encabezado de la sección (título + bajada) */
.solutions-header {
  text-align: center;
  margin-bottom: 48px;
}
.solutions-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-white);
}
.solutions-header p {
  margin-top: 12px;
  color: rgba(248,250,252,0.65);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  font-size: 0.95rem;
}

/* Panel translúcido central con blur de fondo */
.solutions-panel {
  background: rgba(10, 25, 47, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(248,250,252,0.1);
  max-width: 960px;
  margin: 0 auto;
}

/* Barra de pestañas: 3 botones uno debajo del otro (columna) */
.solutions-tabs {
  display: flex;
  border-bottom: 1px solid rgba(248,250,252,0.12);
}

/* Cada pestaña */
.solutions-tab {
  flex: 1 1 0;
  padding: 18px 24px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: rgba(248,250,252,0.6);
  font-family: var(--font-main);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  text-align: center;
}
.solutions-tab:hover {
  color: var(--color-white);
  background: rgba(245,166,35,0.08);
}
/* Pestaña activa: borde amber inferior + texto blanco */
.solutions-tab.active {
  color: var(--color-amber);
  border-bottom-color: var(--color-amber);
  background: rgba(245,166,35,0.08);
}
/* Ícono dentro de cada pestaña (acompaña al texto) */
.solutions-tab__icon {
  display: inline-flex;
  vertical-align: middle;
  font-size: 1.2em;
  margin-right: 8px;
  position: relative;
  top: -1px;
  color: var(--color-amber);
}

/* ----------------------------------------------------------
   ÍCONOS SVG (helpers generales)
   ---------------------------------------------------------- */

/* Todo SVG inyectado se renderiza como bloque para evitar el gap de baseline */
[data-icon] svg { display: block; }

/* Ícono del hero en las páginas de sistemas (mismo glow que la referencia) */
.hero-icon {
  height: 56px;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8rem;
  color: var(--color-white);
  background: radial-gradient(circle, rgba(245,166,35,0.35) 0%, rgba(245,166,35,0.06) 58%, transparent 72%);
}

/* Ícono inline dentro de un botón (ej: Enviar Mensaje) */
.btn [data-icon] {
  display: inline-flex;
  vertical-align: middle;
  font-size: 1.05em;
  margin-right: 8px;
  position: relative;
  top: -1px;
}

/* Área de contenido de cada pestaña */
.solutions-content {
  display: none;
  padding: 40px;
}
.solutions-content.active {
  display: block;
}

/* Grid de kits: 3 columnas dentro de Residencial */
.kits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card individual de cada kit */
.kit-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(248,250,252,0.12);
  overflow: hidden;
  transition: border-color var(--transition), transform var(--transition);
  cursor: pointer;
}
.kit-card:hover {
  border-color: var(--color-amber);
  transform: translateY(-4px);
}

/* Imagen de referencia del kit */
.kit-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* Contenido textual de la card */
.kit-card__body {
  padding: 20px;
}

/* Etiqueta del tipo de sistema (On-Grid / Híbrido / Off-Grid) */
.kit-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-amber);
  margin-bottom: 8px;
}

.kit-card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
  line-height: 1.3;
}

.kit-card__desc {
  font-size: 0.8rem;
  color: rgba(248,250,252,0.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* Botón dentro de la card que lleva a contacto */
.kit-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-amber);
  transition: gap var(--transition);
}
.kit-card:hover .kit-card__btn {
  gap: 10px;
}

/* ── Vista detalle de kits residenciales ── */

/* Botón volver a categorías */
.kit-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(248,250,252,0.55);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 20px;
  transition: color var(--transition);
}
.kit-detail__back:hover { color: var(--color-white); }

/* Título de la categoría en la vista detalle */
.kit-detail__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 20px;
}

/* Separador de fase dentro del detalle */
.kit-phase-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-amber);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(245,166,35,0.3);
  margin: 20px 0 12px;
  grid-column: 1 / -1;
}
.kit-phase-label:first-child { margin-top: 0; }

/* Grid de kits individuales */
.kit-items-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Card individual de kit */
.kit-item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(248,250,252,0.1);
  padding: 16px;
  transition: border-color var(--transition), transform var(--transition);
  cursor: pointer;
}
.kit-item:hover {
  border-color: var(--color-amber);
  transform: translateY(-3px);
}
.kit-item__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 4px;
  line-height: 1.3;
}
.kit-item__power {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-amber);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.kit-item__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  font-size: 0.74rem;
  color: rgba(248,250,252,0.6);
  line-height: 1.8;
}
.kit-item__specs li::before {
  content: "› ";
  color: var(--color-amber);
}
.kit-item__btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-amber);
}

/* Header con foto de fondo + badge del ícono (tabs industrial y agrícola) */
.kit-card__photo-header {
  position: relative;
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(245,166,35,0.25);
}
/* overlay oscuro para que el badge resalte sobre cualquier foto */
.kit-card__photo-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,25,47,0.78) 0%, rgba(10,25,47,0.45) 100%);
}
/* badge circular con glow ámbar que contiene el ícono */
.kit-card__photo-badge {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  color: var(--color-white);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,166,35,0.55) 0%, rgba(245,166,35,0) 70%);
}

/* ── Cards de la pestaña Ofertas ── */
.offer-card { position: relative; }
/* cinta de descuento sobre la foto */
.offer-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: var(--color-amber);
  color: var(--color-navy);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: 3px;
}
/* beneficio destacado dentro de la card */
.offer-benefit {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 14px;
}
.offer-benefit__off {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-amber);
  line-height: 1;
}
.offer-benefit__label {
  font-size: 0.8rem;
  color: rgba(248,250,252,0.7);
}
.offer-valid {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(248,250,252,0.45);
  margin-bottom: 16px;
}

/* Grid de 2 columnas para la tab industrial (4 cards) */
.kit-cards-grid--2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Mensaje de "próximamente" para las pestañas sin contenido aún */
.solutions-coming-soon {
  text-align: center;
  padding: 24px 0;
  color: rgba(248,250,252,0.5);
  font-size: 0.95rem;
}
.solutions-coming-soon strong {
  display: block;
  font-size: 1.1rem;
  color: var(--color-white);
  margin-bottom: 8px;
}

/* Responsive — tablet */
@media (max-width: 1024px) {
  .kits-grid        { grid-template-columns: 1fr 1fr; }
  .kit-items-grid   { grid-template-columns: 1fr 1fr; }
}
/* Responsive — mobile */
@media (max-width: 768px) {
  .kits-grid                { grid-template-columns: 1fr; }
  .kit-cards-grid--2col     { grid-template-columns: 1fr; }
  .kit-items-grid           { grid-template-columns: 1fr; }
  .solutions-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .solutions-tab {
    padding: 14px 12px;
    font-size: 0.8rem;
    border-bottom: 2px solid transparent;
  }
  .solutions-content        { padding: 24px; }
}

/* ----------------------------------------------------------
   18. WHATSAPP BUBBLE (botón flotante)
   ---------------------------------------------------------- */
.whatsapp-bubble {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  background: var(--color-green);
  border-radius: 50%;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.whatsapp-bubble:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 24px rgba(37,211,102,0.5);
}
.whatsapp-bubble svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}

/* ----------------------------------------------------------
   19. MEDIA QUERIES (Responsive)
   Adaptaciones para tablet (<= 1024px) y móvil (<= 640px).
   ---------------------------------------------------------- */

/* Tablet */
@media (max-width: 1024px) {
  .systems-grid      { grid-template-columns: repeat(2, 1fr); }
  .services-grid     { grid-template-columns: repeat(2, 1fr); }
  .process-grid      { grid-template-columns: repeat(2, 1fr); }
  .components-grid   { grid-template-columns: repeat(2, 1fr); }
  .about-grid        { grid-template-columns: 1fr; }
  .about__badge      { display: none; } /* Ocultar badge en tablet */
  .contact-grid      { grid-template-columns: 1fr; }
  .footer__grid      { grid-template-columns: 1fr 1fr; }

  /* Ocultar links desktop, mostrar toggle hamburguesa */
  .navbar__links  { display: none; }
  .navbar__toggle { display: block; }
}

/* Móvil */
@media (max-width: 640px) {
  .systems-grid    { grid-template-columns: 1fr; }
  .services-grid   { grid-template-columns: 1fr; }
  .process-grid    { grid-template-columns: 1fr; }
  .components-grid { grid-template-columns: 1fr; }
  .footer__grid    { grid-template-columns: 1fr; }
  .stats__grid     { grid-template-columns: 1fr; }
  .form-row        { grid-template-columns: 1fr; }

  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}