/* ============================================================
   GALAXY.CSS — Experiencia galáctica premium (Andromeda Studio)
   Paleta: azules profundos, negro espacial y blanco estelar.
   Se carga después de styles.css y complementa a galaxy.js.
   ============================================================ */

/* ------------------------------------------------------------
   0. PORTAL DE CARGA — salto hiperespacial (warp.js)
      Cubre la página desde el primer pixel pintado y se
      desvanece cuando la nave "llega" al destino.
   ------------------------------------------------------------ */

html.warp-lock {
    overflow: hidden;
}

#warpGate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: #020617;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.9s ease, transform 0.9s ease;
}

#warpGate.warp-out {
    opacity: 0;
    transform: scale(1.16);
    pointer-events: none;
}

#warpCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.warp-brand {
    position: relative;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.warp-logo {
    height: 88px;
    width: auto;
    filter: drop-shadow(0 0 20px rgba(96, 165, 250, 0.5));
    animation: warpLogoPulso 1.8s ease-in-out infinite;
}

@keyframes warpLogoPulso {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 14px rgba(96, 165, 250, 0.35)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 0 26px rgba(147, 197, 253, 0.65)); }
}

.warp-titulo {
    margin-top: 1.1rem;
    font-family: var(--font-header, 'Montserrat', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.38em;
    text-indent: 0.38em;
    color: #f8fafc;
    text-shadow: 0 0 18px rgba(96, 165, 250, 0.55);
}

.warp-estado {
    margin-top: 0.55rem;
    font-family: var(--font-secondary, 'Inter', sans-serif);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: #93c5fd;
    animation: warpParpadeo 1.4s ease-in-out infinite;
}

@keyframes warpParpadeo {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

.warp-skip {
    position: absolute;
    bottom: 1.8rem;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    pointer-events: none;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: rgba(148, 163, 184, 0.55);
    transition: opacity 0.35s ease;
}

/* Durante el flash del salto, el texto se funde con la luz */
#warpGate.warp-flash .warp-brand,
#warpGate.warp-flash .warp-skip {
    opacity: 0;
}

@media (max-width: 480px) {
    .warp-logo { height: 68px; }
    .warp-titulo { font-size: 0.88rem; letter-spacing: 0.28em; text-indent: 0.28em; }
}

/* ------------------------------------------------------------
   1. CIELO — canvas de estrellas (lo crea galaxy.js)
   ------------------------------------------------------------ */

#galaxyCanvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* Velo espacial: oscurece ligeramente el fondo para dar profundidad */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 70% at 50% -10%, rgba(29, 78, 216, 0.10), transparent 60%),
        radial-gradient(ellipse 100% 60% at 50% 110%, rgba(2, 6, 23, 0.55), transparent 70%);
}

/* ------------------------------------------------------------
   2. BARRA DE PROGRESO ORBITAL (la crea galaxy.js)
   ------------------------------------------------------------ */

#orbitProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    z-index: 9999;
    background: linear-gradient(90deg, #1d4ed8, #60a5fa 60%, #f8fafc);
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.75);
    border-radius: 0 3px 3px 0;
    transition: width 0.12s linear;
}

/* ------------------------------------------------------------
   3. NAVBAR — cristal espacial al scrollear
   ------------------------------------------------------------ */

.navbar {
    transition: background 0.45s ease, box-shadow 0.45s ease;
}

.navbar.scrolled {
    background: rgba(4, 8, 18, 0.62);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
}

.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #93c5fd, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

/* ------------------------------------------------------------
   4. TITULARES — brillo estelar recorriendo el texto
   ------------------------------------------------------------ */

@supports (-webkit-background-clip: text) or (background-clip: text) {
    .hero-title,
    .section-title {
        background: linear-gradient(115deg,
            #f8fafc 0%,
            #f8fafc 38%,
            #93c5fd 50%,
            #f8fafc 62%,
            #f8fafc 100%);
        background-size: 220% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: titleShimmer 8s linear infinite;
    }
}

@keyframes titleShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: -220% center; }
}

/* ------------------------------------------------------------
   5. BOTONES — destello cometa al pasar el cursor
   ------------------------------------------------------------ */

.btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -90%;
    width: 55%;
    height: 100%;
    transform: skewX(-22deg);
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.28),
        transparent);
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover::after {
    left: 130%;
}

/* ------------------------------------------------------------
   6. TARJETAS — aura que sigue al cursor (spotlight)
      galaxy.js inyecta <span class="card-glow"> y actualiza
      las variables --mx / --my con la posición del puntero.
   ------------------------------------------------------------ */

.card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
        rgba(96, 165, 250, 0.16),
        rgba(29, 78, 216, 0.06) 45%,
        transparent 70%);
    transition: opacity 0.35s ease;
}

.servicio-card:hover .card-glow,
.precio-card:hover .card-glow,
.portafolio-card:hover .card-glow,
.beneficio-item:hover .card-glow {
    opacity: 1;
}

.beneficio-item,
.precio-card,
.portafolio-card {
    position: relative;
}

/* Iconos que despiertan */
.servicio-icon img {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.servicio-card:hover .servicio-icon img {
    transform: scale(1.14) rotate(-5deg);
    opacity: 1;
}

.check-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.beneficio-item:hover .check-icon {
    transform: scale(1.12);
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.6);
}

/* ------------------------------------------------------------
   7. MATERIALIZACIÓN ORBITAL — el scroll arma la página
      galaxy.js asigna .g-reveal + data-fx + --reveal-delay.
      Cada elemento se materializa desde una dirección distinta,
      desenfocado y girado, como saliendo del hiperespacio.
   ------------------------------------------------------------ */

.g-reveal {
    opacity: 0;
    transform: translateY(48px) scale(0.96);
    filter: blur(7px);
    transition:
        opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.95s ease;
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform, filter;
}

.g-reveal[data-fx="izq"] {
    transform: translateX(-70px) rotateY(14deg) scale(0.94);
}

.g-reveal[data-fx="der"] {
    transform: translateX(70px) rotateY(-14deg) scale(0.94);
}

.g-reveal[data-fx="zoom"] {
    transform: scale(0.8);
    filter: blur(10px);
}

.g-reveal.visible {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Los titulares de sección emergen desenfocados
   (nota: NO usar clip-path como estado oculto — un elemento
   totalmente recortado nunca "interseca" para el observer) */
.section-header.g-reveal {
    transform: translateY(36px);
    filter: blur(9px);
}

/* Cuando el reveal ya termino, el titulo/subtitulo debe quedar nitido. */
.section-header.g-reveal.visible {
    transform: none;
    filter: none;
}

/* El plan destacado conserva su escala al terminar el reveal */
.precio-card.destacado.g-reveal.visible {
    transform: scale(1.05);
}

@media (max-width: 768px) {
    .precio-card.destacado.g-reveal.visible {
        transform: none;
    }

    /* En móvil las entradas laterales se vuelven verticales
       (evita desbordamiento horizontal) */
    .g-reveal[data-fx="izq"],
    .g-reveal[data-fx="der"] {
        transform: translateY(48px) scale(0.96);
    }
}

/* ------------------------------------------------------------
   7.2 DIVISORES CÓSMICOS — línea de luz que se dibuja sola
       entre secciones (los inyecta galaxy.js; reemplazan a
       los antiguos degradados con costuras)
   ------------------------------------------------------------ */

.cosmic-divider {
    position: relative;
    z-index: 2;
    height: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.cosmic-divider i {
    position: relative;
    top: -1px;
    display: block;
    width: min(760px, 80vw);
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(147, 197, 253, 0.55) 22%,
        #dbeafe 50%,
        rgba(147, 197, 253, 0.55) 78%,
        transparent);
    box-shadow: 0 0 14px rgba(96, 165, 250, 0.4);
    transform: scaleX(0);
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cosmic-divider i::after {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dbeafe;
    font-size: 0.85rem;
    font-style: normal;
    text-shadow: 0 0 12px rgba(147, 197, 253, 0.9);
    opacity: 0;
    transition: opacity 0.6s ease 0.6s;
}

.cosmic-divider.visible i {
    transform: scaleX(1);
}

.cosmic-divider.visible i::after {
    opacity: 1;
}

/* ------------------------------------------------------------
   7.3 ENSAMBLAJE POST-WARP — al aterrizar del hiperespacio,
       la página se arma pieza por pieza (warp.js alterna las
       clases pre-armado → armado en <html>)
   ------------------------------------------------------------ */

html.pre-armado .navbar {
    opacity: 0;
    transform: translateY(-28px);
}

html.pre-armado .hero-image {
    opacity: 0;
    transform: translateY(26px) scale(0.9);
    filter: blur(10px);
}

html.pre-armado .hero-title {
    opacity: 0;
    transform: translateY(36px);
    filter: blur(12px);
}

html.pre-armado .hero-subtitle {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
}

html.pre-armado .hero-buttons {
    opacity: 0;
    transform: translateY(22px);
}

html.pre-armado .whatsapp-float {
    opacity: 0;
    transform: scale(0.3);
}

html.armado .navbar {
    transition: opacity 0.7s ease 0.05s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

html.armado .hero-image {
    transition: opacity 0.9s ease 0.2s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, filter 0.9s ease 0.2s;
}

html.armado .hero-title {
    transition: opacity 0.9s ease 0.4s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s, filter 0.9s ease 0.4s;
}

html.armado .hero-subtitle {
    transition: opacity 0.9s ease 0.6s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s, filter 0.9s ease 0.6s;
}

html.armado .hero-buttons {
    transition: opacity 0.9s ease 0.8s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s;
}

html.armado .whatsapp-float {
    transition: opacity 0.6s ease 1.15s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.15s;
}

/* ------------------------------------------------------------
   7.4 INCLINACIÓN 3D FLUIDA — mientras el cursor recorre una
       tarjeta, el transform responde 1:1 (sin transición que
       lo frene); al salir, regresa suave con la transición base
   ------------------------------------------------------------ */

.tilting {
    transition-property: box-shadow, border-color, background;
    will-change: transform;
}

/* ------------------------------------------------------------
   9. DETALLES DEL SISTEMA — scrollbar y selección estelar
   ------------------------------------------------------------ */

::selection {
    background: rgba(59, 130, 246, 0.4);
    color: #f8fafc;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #050a16;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1d4ed8, #3b82f6);
    border-radius: 8px;
    border: 2px solid #050a16;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb, #60a5fa);
}

/* Laptop del hero flotando en gravedad cero */
.hero-mockup {
    animation: heroFloat 7s ease-in-out infinite;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ------------------------------------------------------------
   9.5 AURORA BOREAL EN EL HERO — banda de luz que ondula
   ------------------------------------------------------------ */

.hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -10%;
    width: 120%;
    height: 90%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(100deg,
        transparent 20%,
        rgba(59, 130, 246, 0.07) 40%,
        rgba(147, 197, 253, 0.10) 50%,
        rgba(29, 78, 216, 0.07) 60%,
        transparent 80%);
    filter: blur(30px);
    transform-origin: center;
    animation: auroraOndula 14s ease-in-out infinite alternate;
}

@keyframes auroraOndula {
    0%   { transform: translateX(-6%) skewY(-2deg) scaleY(1); opacity: 0.7; }
    50%  { transform: translateX(3%) skewY(1deg) scaleY(1.15); opacity: 1; }
    100% { transform: translateX(6%) skewY(-1deg) scaleY(0.95); opacity: 0.75; }
}

/* Halo de estrella detrás de los titulares */
.hero-title,
.section-title {
    filter: drop-shadow(0 0 22px rgba(96, 165, 250, 0.22));
}

/* ------------------------------------------------------------
   9.6 ANILLO ORBITAL — los iconos de servicio ganan un satélite
   ------------------------------------------------------------ */

.servicio-icon {
    position: relative;
}

.servicio-icon::after {
    content: '';
    position: absolute;
    inset: -9px;
    border-radius: 22px;
    border: 1.5px dashed rgba(147, 197, 253, 0.45);
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: orbitaGira 9s linear infinite;
    pointer-events: none;
}

.servicio-card:hover .servicio-icon::after {
    opacity: 1;
}

@keyframes orbitaGira {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Iconos del portafolio en gravedad cero */
.proyecto-emoji {
    animation: heroFloat 6s ease-in-out infinite;
}

/* Badge del plan recomendado con latido estelar */
.precio-card.destacado .badge {
    animation: badgeLatido 3.2s ease-in-out infinite;
}

@keyframes badgeLatido {
    0%, 100% { box-shadow: 0 0 0 0 rgba(147, 197, 253, 0); }
    50%      { box-shadow: 0 0 18px 2px rgba(147, 197, 253, 0.35); }
}

/* Pista sutil de que el fondo es interactivo */
.hero-subtitle::after {
    content: '✦ Mantén presionado el fondo y las estrellas te seguirán';
    display: block;
    margin-top: 1rem;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: rgba(147, 197, 253, 0.55);
    animation: pistaParpadeo 4s ease-in-out infinite;
}

@keyframes pistaParpadeo {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

@media (hover: none), (pointer: coarse) {
    .hero-subtitle::after {
        content: '✦ Toca la pantalla y crearás tu propia constelación';
    }
}

/* ------------------------------------------------------------
   10. ACCESIBILIDAD Y RENDIMIENTO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .section-title,
    .hero-mockup,
    .hero::before,
    .servicio-icon::after,
    .proyecto-emoji,
    .precio-card.destacado .badge,
    .hero-subtitle::after,
    .warp-logo,
    .warp-estado {
        animation: none !important;
    }

    .g-reveal,
    .section-header.g-reveal {
        opacity: 1;
        transform: none;
        filter: none;
        clip-path: none;
        transition: none;
    }

    .cosmic-divider i {
        transform: scaleX(1);
        transition: none;
    }

    .cosmic-divider i::after {
        opacity: 1;
        transition: none;
    }

    .btn::after {
        display: none;
    }

    #orbitProgress {
        transition: none;
    }
}

/* En táctiles no hay cursor: apagar spotlight para ahorrar GPU */
@media (hover: none), (pointer: coarse) {
    .card-glow {
        display: none;
    }
}

@media (max-width: 900px), (hover: none), (pointer: coarse) {
    .hero-title,
    .section-title {
        animation: none !important;
        background-size: 100% auto;
    }

    .navbar.scrolled {
        backdrop-filter: blur(8px) saturate(1.08);
        -webkit-backdrop-filter: blur(8px) saturate(1.08);
    }

    .g-reveal {
        transition-duration: 0.68s;
        transition-delay: 0s !important;
        filter: blur(4px);
    }

    .section-header.g-reveal {
        filter: blur(4px);
    }

    #orbitProgress {
        height: 2px;
    }
}