/* ==========================================================================
   EXERGÍA V7 — Fondo animado del Hero + Logo interactivo al hover
   Este archivo se carga DESPUÉS de styles.css y no modifica ninguna regla
   existente de la V6. Si quieres desactivar el efecto, basta con quitar
   la línea <link> de styles-v7.css en index.html.
   ========================================================================== */

/* ---------- Fondo hexagonal animado del Hero ---------- */
.hero-fondo-animado {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-hex-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.16;
}

.hex-capa polygon {
    fill: none;
    stroke: #ffffff;
    stroke-width: 1.4;
}

.hex-capa-2 polygon,
.hex-capa-4 polygon { stroke: var(--naranja-energia); }

.hex-capa {
    animation: hexDeriva 34s ease-in-out infinite;
    transform-origin: center;
}
.hex-capa-1 { animation-duration: 40s; }
.hex-capa-2 { animation-duration: 30s; animation-direction: reverse; }
.hex-capa-3 { animation-duration: 46s; }
.hex-capa-4 { animation-duration: 26s; animation-direction: reverse; }

@keyframes hexDeriva {
    0%   { transform: translate(0, 0) rotate(0deg); }
    50%  { transform: translate(-18px, 14px) rotate(2.2deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.hero-glow-1 {
    width: 480px; height: 480px;
    top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(255,122,26,0.22) 0%, transparent 70%);
    animation: glowFlota 22s ease-in-out infinite;
}
.hero-glow-2 {
    width: 560px; height: 560px;
    bottom: -220px; right: -160px;
    background: radial-gradient(circle, rgba(35,79,115,0.35) 0%, transparent 70%);
    animation: glowFlota 28s ease-in-out infinite reverse;
}
@keyframes glowFlota {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(40px, -30px) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Asegura que el contenido quede por encima de las capas animadas */
.hero-content { position: relative; z-index: 10; }

/* Si el visitante pidió reducir animaciones, se desactivan */
@media (prefers-reduced-motion: reduce) {
    .hex-capa, .hero-glow { animation: none; }
}

/* ---------- Logo del Hero: interactivo con el mouse ---------- */
.logo-hero-wrap {
    perspective: 900px;
    cursor: pointer;
}

.logo-hero-svg {
    height: 210px;
    width: 210px;
    max-width: 100%;
    display: block;
    transition: transform 0.15s ease-out;
    transform-style: preserve-3d;
    will-change: transform;
}

#logoHeroGroup {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: 100px 100px;
}

/* Respaldo sin JavaScript: leve acercamiento al pasar el mouse */
.logo-hero-wrap:hover .logo-hero-svg {
    transform: scale(1.04);
}

@media (max-width: 480px) {
    .logo-hero-svg { height: 130px; width: 130px; }
}