/* ============================================================
   INDEX.CSS — Estilos y colores del Hub Easycom (index.html)
   ------------------------------------------------------------
   CÓMO USAR:
   - Modifica las variables en :root para cambiar colores globales
   - Cada pilar tiene su propio bloque de color al final del archivo
   - Los comentarios con ► indican dónde hacer cambios comunes
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. VARIABLES GLOBALES DE COLOR
      ► Aquí defines la paleta de toda la página de inicio.
      ► Cambia estos valores cuando tengas el manual de marca.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Fondo general de la página */
  --bg-page:          #050d1a;

  /* ── Pilar 1: Easycom Telecom (azules) ── */
  --telecom-dark:     #050d1a;   /* ► color más oscuro del pilar */
  --telecom-mid:      #0d3050;   /* ► color intermedio           */
  --telecom-accent:   #1a7fd4;   /* ► color de acento principal  */
  --telecom-light:    #4db8ff;   /* ► color más claro / brillos  */

  /* ── Pilar 2: FirExperts (rojos) ── */
  --fire-dark:        #1a0005;   /* ► color más oscuro del pilar */
  --fire-mid:         #5a0a0a;   /* ► color intermedio           */
  --fire-accent:      #d42020;   /* ► color de acento principal  */
  --fire-light:       #ff4444;   /* ► color más claro / brillos  */

  /* ── Pilar 3: EasycomAV (grises) ── */
  --av-dark:          #080808;   /* ► color más oscuro del pilar */
  --av-mid:           #1a1a1a;   /* ► color intermedio           */
  --av-accent:        #555555;   /* ► color de acento principal  */
  --av-light:         #aaaaaa;   /* ► color más claro / brillos  */

  /* Colores neutros compartidos */
  --white:            #ffffff;
  --white-dim:        rgba(255,255,255,0.5);
  --white-faint:      rgba(255,255,255,0.12);

  /* Velocidad de las animaciones */
  --transition-slow:  0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast:  0.3s ease;
}


/* ─────────────────────────────────────────────────────────────
   2. RESET Y BASE
      Normaliza márgenes y define el body.
      No es necesario modificar esta sección.
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;           /* Sin scroll en desktop — los pilares ocupan toda la pantalla */
  background: var(--bg-page);
  font-family: 'Rajdhani', sans-serif;
}


/* ─────────────────────────────────────────────────────────────
   3. LOGO / NOMBRE SUPERIOR
      El nombre "Easycom" centrado en la parte superior.
      ► Ajusta el tamaño de fuente o posición si lo necesitas.
   ───────────────────────────────────────────────────────────── */
.hub-logo {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
  pointer-events: none;       /* No interfiere con los clics en los pilares */
}

.hub-logo__img {
  display: block;
  margin: 0 auto;
  height: clamp(36px, 5vw, 68px);
  width: auto;
  filter: drop-shadow(0 0 32px rgba(26, 127, 212, 0.55)) drop-shadow(0 2px 6px rgba(0,0,0,0.9));
}

.hub-logo__tagline {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.6rem, 1.2vw, 0.8rem);
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-top: 4px;
}


/* ─────────────────────────────────────────────────────────────
   4. CANVAS DE PARTÍCULAS
      Fondo animado global. No necesita modificaciones.
   ───────────────────────────────────────────────────────────── */
.particles-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   5. CONTENEDOR DE PILARES
      El flex que distribuye los 3 pilares horizontalmente.
   ───────────────────────────────────────────────────────────── */
.pillars {
  display: flex;
  width: 100%;
  height: 100%;
}


/* ─────────────────────────────────────────────────────────────
   6. PILAR — ESTRUCTURA BASE
      Estilos compartidos por los 3 pilares.
      La animación de expansión al hover vive aquí.
   ───────────────────────────────────────────────────────────── */
.pillar {
  position: relative;
  flex: 1;
  overflow: hidden;
  cursor: pointer;
  transition: flex var(--transition-slow);
}

/* El pilar sobre el que está el cursor se expande */
.pillar:hover { flex: 1.6; }

/* Los pilares vecinos se encogen */
.pillars:has(.pillar:hover) .pillar:not(:hover) { flex: 0.7; }

/* Línea separadora vertical entre pilares */
.pillar::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: rgba(255,255,255,0.08);
  z-index: 10;
}
.pillar:last-child::after { display: none; }


/* ─────────────────────────────────────────────────────────────
   7. CAPAS INTERNAS DEL PILAR
      Cada pilar tiene: fondo (bg) + video + overlay de color + contenido
   ───────────────────────────────────────────────────────────── */

/* Fondo de color / gradiente */
.pillar-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: transform 0.8s ease;
}
.pillar:hover .pillar-bg { transform: scale(1.05); }

/* Video que se activa al hover */
.pillar-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  z-index: 1;
}
.pillar:hover .pillar-video { opacity: 0.35; } /* ► Ajusta la opacidad del video (0 = invisible, 1 = sólido) */

/* Overlay de oscurecimiento para mejorar legibilidad del texto */
.pillar-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 100%);
}

/* Zona de texto y logo dentro del pilar */
.pillar-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* sin justify-content: el logo-wrap crece y centra el logo;
     sub y cta se anclan al fondo naturalmente */
  padding: clamp(5rem, 11vh, 8rem) clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5vh, 4rem);
}


/* ─────────────────────────────────────────────────────────────
   8. TEXTOS DENTRO DEL PILAR
   ───────────────────────────────────────────────────────────── */

/* Texto de sector (TELECOM / INCENDIO / AUDIO Y VIDEO) arriba */
.pillar-sector {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.2rem, 3vw, 2.8rem);
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.15);
  margin-bottom: auto;
  padding-top: clamp(7rem, 18vh, 12rem);
  text-align: center;
  transition: color var(--transition-slow), transform var(--transition-slow);
  white-space: nowrap;
}
.pillar:hover .pillar-sector {
  color: rgba(255,255,255,0.5);
  transform: translateY(-8px);
}

/* Contenedor del logo — ocupa todo el espacio libre y centra la imagen */
.pillar-logo-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition: transform var(--transition-slow);
}
.pillar:hover .pillar-logo-wrap { transform: translateY(-8px); }

/* Logo del negocio */
.pillar-icon {
  width: clamp(220px, 30vw, 400px);
  height: clamp(130px, 20vh, 220px);
  object-fit: contain;
  filter: drop-shadow(0 4px 28px rgba(0,0,0,0.8));
  transition: transform var(--transition-slow), filter var(--transition-slow);
  animation: logoPulse 5s ease-in-out infinite;
}
.pillar--telecom .pillar-icon {
  width: clamp(170px, 23vw, 330px);
  height: clamp(100px, 15vh, 185px);
}
.pillar--fire .pillar-icon {
  width: clamp(230px, 31vw, 420px);
  height: clamp(135px, 20vh, 230px);
}
.pillar--av .pillar-icon {
  width: clamp(210px, 27vw, 380px);
  height: clamp(120px, 17vh, 205px);
}
.pillar:hover .pillar-icon {
  filter: drop-shadow(0 6px 40px rgba(0,0,0,0.9)) drop-shadow(0 0 28px rgba(255,255,255,0.12));
  transform: scale(1.04);
}

/* Nombre del negocio */
.pillar-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 3rem);
  letter-spacing: 0.12em;
  color: var(--white);
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.7);
  white-space: nowrap;
}

/* Subtítulo — anclado al fondo, siempre a la misma altura en los 3 pilares */
.pillar-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.65rem, 1.1vw, 0.85rem);
  letter-spacing: 0.4em;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  text-align: center;
  transition: color var(--transition-slow);
  margin-bottom: 0.75rem;
}
.pillar:hover .pillar-sub { color: rgba(255,255,255,0.85); }

/* Botón CTA — aparece solo en hover */
.pillar-cta {
  margin-top: clamp(0.8rem, 2vh, 1.5rem);
  padding: 0.55em 2em;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.75rem, 1.2vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, background var(--transition-fast);
  white-space: nowrap;
}
.pillar:hover .pillar-cta { opacity: 1; transform: translateY(0); }
.pillar-cta:hover { background: rgba(255,255,255,0.15); }


/* ─────────────────────────────────────────────────────────────
   9. COLORES ESPECÍFICOS POR PILAR
      ► Aquí ajustas el gradiente de fondo de cada pilar.
      ► El primer valor del radial-gradient es el color central (brillo),
        el segundo es el color de relleno, el tercero es el borde oscuro.
   ───────────────────────────────────────────────────────────── */

/* — Pilar Telecom (azul) — */
.pillar--telecom .pillar-bg {
  background: radial-gradient(ellipse at 60% 40%,
    #1a5fa8 0%,
    var(--telecom-mid) 40%,
    var(--telecom-dark) 100%);
}
.pillar--telecom:hover .pillar-bg {
  background: radial-gradient(ellipse at 60% 40%,
    #2278cc 0%,          /* ► color central al hacer hover */
    var(--telecom-accent) 40%,
    var(--telecom-dark) 100%);
}
.pillar--telecom .pillar-cta {
  border-color: var(--telecom-accent);
  color: var(--telecom-light);
}

/* — Pilar FirExperts (rojo) — */
.pillar--fire .pillar-bg {
  background: radial-gradient(ellipse at 50% 60%,
    #a02020 0%,
    var(--fire-mid) 40%,
    var(--fire-dark) 100%);
}
.pillar--fire:hover .pillar-bg {
  background: radial-gradient(ellipse at 50% 60%,
    #cc2828 0%,
    var(--fire-accent) 40%,
    var(--fire-dark) 100%);
}
.pillar--fire .pillar-cta {
  border-color: var(--fire-accent);
  color: var(--fire-light);
}

/* — Pilar EasycomAV (gris) — */
.pillar--av .pillar-bg {
  background: radial-gradient(ellipse at 40% 50%,
    #3a3a3a 0%,
    var(--av-mid) 40%,
    var(--av-dark) 100%);
}
.pillar--av:hover .pillar-bg {
  background: radial-gradient(ellipse at 40% 50%,
    #505050 0%,
    var(--av-accent) 40%,
    var(--av-dark) 100%);
}
.pillar--av .pillar-cta {
  border-color: var(--av-accent);
  color: var(--av-light);
}


/* ─────────────────────────────────────────────────────────────
   10. BARRA INFERIOR DECORATIVA
       Franja de 3 colores al pie de la pantalla.
       ► Cambia los colores para que coincidan con tu paleta.
   ───────────────────────────────────────────────────────────── */
.bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--telecom-accent),
    var(--fire-accent),
    var(--av-accent));
  z-index: 200;
  opacity: 0.6;
}


/* ─────────────────────────────────────────────────────────────
   11. ANIMACIONES GLOBALES
   ───────────────────────────────────────────────────────────── */

/* Glow suave y continuo sobre el logo */
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 4px 28px rgba(0,0,0,0.8)); }
  50%       { filter: drop-shadow(0 4px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(255,255,255,0.07)); }
}

/* Partículas que suben desde el suelo */
@keyframes floatUp {
  0%   { transform: translateY(0) scale(1);    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 0.8; }
  100% { transform: translateY(-105vh) scale(0.4); opacity: 0; }
}


/* ─────────────────────────────────────────────────────────────
   12. PARTÍCULAS POR PILAR
   ───────────────────────────────────────────────────────────── */
.pillar-particles {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

.pp {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  animation: floatUp linear infinite;
  opacity: 0;
}

/* Distribución, tamaño y ritmo individuales */
.pp-1 { left: 10%; width: 5px;  height: 5px;  animation-duration: 5.2s; animation-delay: 0s;   }
.pp-2 { left: 24%; width: 3px;  height: 3px;  animation-duration: 7.1s; animation-delay: 1.4s; }
.pp-3 { left: 43%; width: 7px;  height: 7px;  animation-duration: 6.0s; animation-delay: 0.7s; }
.pp-4 { left: 61%; width: 4px;  height: 4px;  animation-duration: 4.8s; animation-delay: 2.3s; }
.pp-5 { left: 77%; width: 6px;  height: 6px;  animation-duration: 5.7s; animation-delay: 0.4s; }
.pp-6 { left: 91%; width: 3px;  height: 3px;  animation-duration: 6.9s; animation-delay: 3.2s; }

/* Colores según el pilar */
.pillar--telecom .pp {
  background: rgba(77, 184, 255, 0.8);
  box-shadow: 0 0 8px 3px rgba(77, 184, 255, 0.5);
}
.pillar--fire .pp {
  background: rgba(255, 110, 40, 0.85);
  box-shadow: 0 0 8px 3px rgba(255, 70, 20, 0.5);
}
.pillar--av .pp {
  background: rgba(200, 200, 200, 0.7);
  box-shadow: 0 0 8px 3px rgba(170, 170, 170, 0.4);
}


/* ─────────────────────────────────────────────────────────────
   13. RESPONSIVE — MOBILE
       En pantallas pequeñas los pilares se apilan verticalmente.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  html, body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* ── Encabezado móvil ───────────────────────────────────────
     El hub-logo sale del flujo fixed y se convierte en un
     header sticky real que no se superpone con las secciones.   */
  .hub-logo {
    position: sticky;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    text-align: center;
    padding: 14px 24px 12px;
    background: rgba(5, 13, 26, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(26, 127, 212, 0.2);
    box-shadow: 0 4px 28px rgba(0, 0, 0, 0.85);
    z-index: 200;
  }

  .hub-logo__img     { height: 30px; }
  .hub-logo__tagline { display: none; }   /* encabezado simple en móvil */

  /* ── Pilares apilados ───────────────────────────────────────  */
  .pillars {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .pillar {
    flex: none !important;
    height: 50vh;               /* cada sección ocupa media pantalla */
    min-height: 260px;
    transition: none;
  }

  .pillar:hover { flex: none; }

  .pillar-content   { padding: 1.5rem 1rem; }
  .pillar-icon      { width: clamp(120px, 55vw, 220px); height: auto; max-height: 100px; }

  /* En mobile el botón siempre es visible (no hay hover en touch) */
  .pillar-cta       { opacity: 1; transform: translateY(0); }
}