:root {
  --color-fondo: #04121A;
  --color-primario: #0A3D91;
  --color-secundario: #0073FF;
  --color-acento: #00E6B8;
  --color-texto: #E2E8F0;
  --fuente-titulo: 'Poppins', sans-serif;
  --fuente-texto: 'Open Sans', sans-serif;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 90%;
  padding: 1.2rem 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0, 230, 184, 0.25);
  z-index: 1000;
  transition: background 0.4s ease;
}

header.scrolled {
  background: rgba(0, 0, 0, 0.85);
}

header h1 {
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  color: var(--color-acento);
}

nav a {
  color: var(--color-texto);
  text-decoration: none;
  margin-left: 1.8rem;
  font-weight: 500;
  transition: color 0.3s;
}

nav a:hover {
  color: var(--color-acento);
}

.hero {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  background: url('imagenes/Fondo_AXION_hero.png') no-repeat center center/cover;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 230, 184, 0.05), rgba(0, 0, 0, 0.7));
  z-index: 0;
}

.hero-contenido {
  position: relative;
  z-index: 1;
  max-width: 900px;
  padding: 0 1rem;
}

.hero h2 {
  font-family: var(--fuente-titulo);
  font-size: 2.8rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

.hero p {
  color: #e2e8f0;
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto 2rem;
}

.btn-primario {
  background: linear-gradient(90deg, var(--color-secundario), var(--color-acento));
  color: #04121A;
  padding: 0.9rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 15px rgba(0, 230, 184, 0.5);
}

footer {
  background-color: #000000;
  color: #CBD5E1;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
}

body {
  font-family: var(--fuente-texto);
  color: var(--color-texto);
  margin: 0;
  background-color: var(--color-fondo);
}

/* ==========================
   SECCIÓN QUÉ HACEMOS
=========================== */
.que-hacemos {
  background-color: #000; /* fondo oscuro tipo Axion */
  color: #777;
  padding: 6rem 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-qh {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  max-width: 1200px;
  width: 100%;
}

.texto-qh {
  flex: 1 1 550px;
}

.texto-qh h3 {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 1.8rem;
  margin-bottom: 2rem;
}

.texto-qh p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.8rem;
  color: #5f7180;
  transition: color 0.6s ease, transform 0.6s ease;
}

.texto-qh p.activo {
  color: var(--color-texto); /* texto se ilumina al hacer scroll */
  transform: translateX(0);
}

.texto-qh strong {
  color: var(--color-acento);
  font-weight: 600;
}

.imagen-qh {
  flex: 0 0 350px;
  display: flex;
  justify-content: center;
}

.imagen-qh img {
  border-radius: 1.5rem;
  width: 100%;
  max-height: 600px;
  object-fit: cover;
  box-shadow: 0 0 25px rgba(0, 230, 184, 0.25);
}

/* Responsive */
@media (max-width: 900px) {
  .contenedor-qh {
    flex-direction: column-reverse;
    text-align: center;
  }

  .imagen-qh {
    width: 100%;
  }

  .texto-qh p {
    font-size: 1rem;
  }
}

/* ==========================
   SECCIÓN: SERVICIOS
=========================== */
.servicios {
  background-color: #04121A;
  color: var(--color-texto);
  text-align: center;
  padding: 6rem 8%;
}

.servicios h3 {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  margin-bottom: 3rem;
  color: var(--color-acento);
}

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.card-servicio {
  background-color: #0B1E29;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 230, 184, 0.08);
  transition: all 0.4s ease;
  border-bottom: 4px solid transparent;
}

.card-servicio:hover {
  transform: translateY(-6px);
  border-bottom: 4px solid var(--color-acento);
  box-shadow: 0 0 25px rgba(0, 230, 184, 0.25);
}

.card-servicio h4 {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.card-servicio p {
  color: #bcd2df;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.card-servicio .icono {
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  font-size: 1.5rem;
  color: var(--color-acento);
  text-decoration: none;
  transition: transform 0.3s ease;
}

.card-servicio .icono:hover {
  transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
  .servicios {
    padding: 4rem 5%;
  }
  .card-servicio {
    padding: 1.8rem;
  }
}


/* ==========================
   PRE-FOOTER SECTION
========================== */
.pre-footer {
  background-color: #000000;
  color: var(--color-texto);
  padding: 4rem 8%;
  display: flex;
  justify-content: center;
}

.pre-footer-contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  gap: 2rem;
}

.pre-col {
  flex: 1 1 250px;
  min-width: 200px;
}

.pre-col h4 {
  color: var(--color-acento);
  font-family: var(--fuente-titulo);
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.pre-col ul {
  list-style: none;
  padding: 0;
}

.pre-col ul li {
  margin-bottom: 0.6rem;
}

.pre-col ul li a {
  color: #b0b0b0;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s;
}

.pre-col ul li a:hover {
  color: var(--color-acento);
}

.pre-col.derecha {
  text-align: right;
}

.marca {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  color: var(--color-acento);
  margin-bottom: 1.2rem;
}

.btn-secundario {
  background-color: var(--color-acento);
  color: #000;
  padding: 0.8rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn-secundario:hover {
  background-color: #00f5c3;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .pre-footer-contenedor {
    flex-direction: column;
    text-align: center;
  }
  .pre-col.derecha {
    text-align: center;
  }
}


/* ==========================
   SECCIÓN: PARA QUIÉN SON
=========================== */
.para-quien {
  background: radial-gradient(circle at top, #04121A 10%, #0A3D91 100%);
  color: var(--color-texto);
  text-align: center;
  padding: 6rem 8%;
  overflow: hidden;
}

.para-quien h3 {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  color: var(--color-acento);
  margin-bottom: 1rem;
}

.para-quien .intro {
  max-width: 700px;
  margin: 0 auto 4rem;
  color: #bcd2df;
  font-size: 1.1rem;
}

/* GRID DE NODOS */
.grid-nodos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 5rem;
  justify-items: center;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

.nodo {
  background: rgba(10, 61, 145, 0.2);
  border: 2px solid rgba(0, 230, 184, 0.3);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  width: 100%;
  max-width: 300px;
  text-align: center;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease;
  box-shadow: 0 0 25px rgba(0, 230, 184, 0.12);
}

.nodo.activo {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 0 30px rgba(0, 230, 184, 0.35);
  border-color: var(--color-acento);
}

.nodo .icono {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--color-acento);
}

.nodo p {
  color: #dce8f0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

/* Efecto al pasar el ratón */
.nodo:hover {
  transform: scale(1.05);
  border-color: var(--color-acento);
  box-shadow: 0 0 35px rgba(0, 230, 184, 0.7), 0 0 60px rgba(0, 115, 255, 0.4);
  transition: all 0.4s ease;
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .grid-nodos {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
}

@media (max-width: 480px) {
  .grid-nodos {
    grid-template-columns: 1fr;
  }
}

/* ==========================
   SECCIÓN: INFOGRAFÍA CIRCULAR
=========================== */
.porque-circular {
  background: radial-gradient(circle at center, #04121A 40%, #0A3D91 100%);
  color: var(--color-texto);
  text-align: center;
  padding: 6rem 8%;
  position: relative;
  overflow: hidden;
}

.porque-circular h3 {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  color: var(--color-acento);
  margin-bottom: 3rem;
}

.contenedor-circular {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
}

/* Núcleo central */
.nucleo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%);
  background: rgba(0, 230, 184, 0.15);
  border: 2px solid var(--color-acento);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 40px rgba(0, 230, 184, 0.4);
  font-family: var(--fuente-titulo);
  font-size: 1.3rem;
  color: var(--color-acento);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
  opacity: 0;
  transition: all 1s ease;
}

.nucleo.activo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 0 60px rgba(0, 230, 184, 0.6);
}

/* Razones */
.razon {
  position: absolute;
  width: 180px;
  background: rgba(10, 61, 145, 0.25);
  border: 2px solid rgba(0, 230, 184, 0.3);
  border-radius: 14px;
  padding: 1.2rem;
  color: #dce8f0;
  font-size: 0.95rem;
  line-height: 1.4;
  box-shadow: 0 0 20px rgba(0, 230, 184, 0.1);
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s ease;
}

.razon.activo {
  opacity: 1;
  transform: scale(1);
  border-color: var(--color-acento);
  box-shadow: 0 0 35px rgba(0, 230, 184, 0.4);
}

/* Posiciones alrededor del círculo */
.r1 { top: 0%; left: 32%; transform: translate(-50%, 0); }
.r2 { top: 63%; left: 80%; transform: translate(-50%, 0); }
.r3 { top: 23%; left: 80%; transform: translate(-50%, 0); }
.r4 { bottom: 0%; left: 32%; transform: translate(-50%, 0); }
.r5 { top: 63%; right: 80%; transform: translate(-50%, 0); }
.r6 { top: 23%; right: 80%; transform: translate(-50%, 0); }

.razon p {
  margin: 0;
}

.razon:hover {
  transform: scale(1.07);
  box-shadow: 0 0 40px rgba(0, 230, 184, 0.6);
  border-color: var(--color-acento);
}

/* Responsivo */
@media (max-width: 768px) {
  .contenedor-circular {
    width: 350px;
    height: 350px;
  }
  .nucleo {
    width: 100px;
    height: 100px;
    font-size: 1rem;
  }
  .razon {
    width: 120px;
    font-size: 0.8rem;
    padding: 0.8rem;
  }
}


/* ==========================
   SECCIÓN: POR QUÉ ELEGIRNOS + CÓMO LO HACEMOS
=========================== */
.porque-como {
  background: linear-gradient(180deg, #04121A 0%, #0A3D91 100%);
  color: var(--color-texto);
  padding: 6rem 8%;
  text-align: center;
}

.porque-como h3 {
  font-family: var(--fuente-titulo);
  font-size: 2rem;
  color: var(--color-acento);
  margin-bottom: 2rem;
}

/* --- Por qué elegirnos --- */
.por-que {
  margin-bottom: 5rem;
}

.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.item {
  font-size: 1.1rem;
  background: rgba(10, 61, 145, 0.25);
  border: 1px solid rgba(0, 230, 184, 0.4);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  box-shadow: 0 0 15px rgba(0, 230, 184, 0.1);
  transition: all 0.3s ease;
}

.item:hover {
  background: rgba(0, 230, 184, 0.08);
  box-shadow: 0 0 25px rgba(0, 230, 184, 0.4);
  transform: scale(1.05);
}

/* --- Cómo lo hacemos --- */
.como-lo-hacemos {
  text-align: center;
  margin-top: 2rem;
}

.pasos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.paso {
  background: rgba(10, 61, 145, 0.25);
  border: 2px solid rgba(0, 230, 184, 0.3);
  border-radius: 16px;
  padding: 1.5rem;
  width: 200px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 15px rgba(0, 230, 184, 0.1);
  transition: all 0.4s ease;
}

.paso:hover {
  border-color: var(--color-acento);
  box-shadow: 0 0 30px rgba(0, 230, 184, 0.4);
  transform: scale(1.05);
}

.numero {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-acento);
  margin-bottom: 0.8rem;
}

.paso p {
  color: #dce8f0;
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Flechas entre pasos */
.flecha {
  font-size: 2rem;
  color: var(--color-acento);
  opacity: 0.8;
  margin: 0 0.5rem;
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .pasos {
    flex-direction: column;
    gap: 1.8rem;
  }
  .flecha {
    transform: rotate(90deg);
  }
}

/* ==========================
   PÁGINA DE SERVICIOS
=========================== */

.servicio {
  padding: 6rem 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contenedor-servicio {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.contenedor-servicio.reverse {
  flex-direction: row-reverse;
}

.texto {
  flex: 1 1 45%;
}

.texto h3 {
  font-family: var(--fuente-titulo);
  color: var(--color-acento);
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.texto p {
  color: var(--color-texto);
  font-size: 1.1rem;
  line-height: 1.6;
}

.imagen {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
}

.imagen img {
  width: 100%;
  max-width: 500px;
  border-radius: 16px;
  box-shadow: 0 0 25px rgba(0, 230, 184, 0.3);
}

/* Fondos con degradados direccionales */
.digitalizacion {
  background: linear-gradient(90deg, #04121A 0%, #0A3D91 100%);
}

.formacion {
  background: linear-gradient(270deg, #04121A 0%, #0A3D91 100%);
}

.consultoria {
  background: linear-gradient(90deg, #052C4F 0%, #0A3D91 100%);
}

.soporte {
  background: linear-gradient(270deg, #052C4F 0%, #0A3D91 100%);
}


/* Responsive */
@media (max-width: 900px) {
  .contenedor-servicio, .contenedor-servicio.reverse {
    flex-direction: column;
  }
  .texto, .imagen {
    flex: 1 1 100%;
    text-align: center;
  }
  .imagen img {
    max-width: 90%;
  }
}

/* ==========================
   PÁGINA DE SOLUCIONES
=========================== */
.solucion {
  padding: 6rem 8%;
  color: var(--color-texto);
  text-align: center;
}

.solucion h2 {
  color: var(--color-acento);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.solucion .intro {
  max-width: 700px;
  margin: 0 auto 3rem;
  color: #bcd2df;
}

/* Cuadro doble (Formación / Implementación) */
.grid-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.opcion {
  background: rgba(10, 61, 145, 0.25);
  border: 2px solid rgba(0, 230, 184, 0.25);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 0 15px rgba(0, 230, 184, 0.1);
  transition: all 0.4s ease;
}

.opcion:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 230, 184, 0.4);
  border-color: var(--color-acento);
}

.opcion h3 {
  color: var(--color-acento);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.opcion p {
  color: #dce8f0;
  font-size: 1rem;
  margin-bottom: 1.2rem;
}

.precio {
  display: inline-block;
  background: var(--color-acento);
  color: #04121A;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border-radius: 8px;
  margin-top: 0.5rem;
}

/* Degradados de fondo por sección */
.digitalizacion { background: linear-gradient(90deg, #04121A 0%, #0A3D91 100%); }
.formacion { background: linear-gradient(270deg, #04121A 0%, #0A3D91 100%); }
.consultoria { background: linear-gradient(90deg, #052C4F 0%, #0A3D91 100%); }
.soporte { background: linear-gradient(270deg, #052C4F 0%, #0A3D91 100%); }

/* ==========================
   SECCIÓN DE OFERTAS
=========================== */
.ofertas-especiales {
  background: radial-gradient(circle at center, #00E6B8 10%, #0A3D91 90%);
  text-align: center;
  padding: 6rem 8%;
  color: #04121A;
}

.ofertas-especiales h2 {
  font-size: 2.2rem;
  color: #04121A;
  margin-bottom: 1rem;
}

.ofertas-especiales .intro {
  color: #052C4F;
  margin-bottom: 3rem;
}

.grid-ofertas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.oferta {
  background: #ffffff;
  color: #04121A;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 0 30px rgba(0, 230, 184, 0.5);
  transition: all 0.4s ease;
}

.oferta:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 40px rgba(0, 230, 184, 0.8);
}

.oferta h3 {
  color: #0A3D91;
  margin-bottom: 1rem;
}

.oferta p {
  color: #0f1f38;
  margin-bottom: 1rem;
}


/* ==========================
   HISTORIA DE AXION AI MADRID
=========================== */
.historia-axion {
  background: linear-gradient(180deg, #04121A 0%, #0A3D91 100%);
  padding: 8rem 10%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.historia-axion .bloque {
  background: rgba(10, 61, 145, 0.25);
  border: 1px solid rgba(0, 230, 184, 0.3);
  border-radius: 16px;
  padding: 3rem 2rem;
  max-width: 1000px;
  width: 100%;
  box-shadow: 0 0 25px rgba(0, 230, 184, 0.1);
  opacity: 0;
  transform: translateY(60px);
  transition: all 1s ease;
}

.historia-axion .bloque.visible {
  opacity: 1;
  transform: translateY(0);
  box-shadow: 0 0 40px rgba(0, 230, 184, 0.6);
  border-color: var(--color-acento);
}

.historia-axion h2 {
  color: var(--color-acento);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.historia-axion p {
  color: #dce8f0;
  font-size: 1.1rem;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto;
}

/* Animación suave de resplandor */
.historia-axion .bloque.visible {
  animation: glow 2.5s ease-in-out forwards;
}

@keyframes glow {
  0% { box-shadow: 0 0 10px rgba(0, 230, 184, 0.1); }
  50% { box-shadow: 0 0 40px rgba(0, 230, 184, 0.6); }
  100% { box-shadow: 0 0 25px rgba(0, 230, 184, 0.2); }
}

/* Responsive */
@media (max-width: 768px) {
  .historia-axion {
    padding: 6rem 6%;
    gap: 3rem;
  }
  .historia-axion .bloque {
    padding: 2rem 1.5rem;
  }
  .historia-axion h2 {
    font-size: 1.6rem;
  }
  .historia-axion p {
    font-size: 1rem;
  }
}