/* Configuración Global y Reset Básico */
body {
    font-family: var(--font-body); /* Fuente limpia para el cuerpo */
    line-height: 1.6;
    color: var(--color-white);
    background-color: var(--color-black);
    overflow-x: hidden;
}

html.intro-scroll-lock,
body.intro-scroll-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Control global de intensidad neón (0.6 a 1.4 recomendado) */
:root {
    --khroma-neon-intensity: 1.5;
}

/** -------------------- */
/** HEADER / NAVBAR */
/** -------------------- */
.header-minimal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;

    /* Estado inicial transparente; JS controla desplazamiento y opacidad */
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.45s ease, opacity 0.85s ease;
}

.header-minimal.header-visible {
    /* Estado visible: En su posición original */
    transform: translateY(0);
}

.header-minimal .navbar {
    background-color: transparent;
    transition: background-color 0.3s ease-in-out;
}

.header-minimal.header-solid {
    background-color: rgba(0, 0, 0, 0.92);
}

/* Durante el typewriter inicial, ocultamos header y contenido secundario del hero. */
body.hero-typing-active .header-minimal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-100%);
}

#hero-intro .animated-word,
#hero-intro .animated-cta {
    opacity: 0;
    visibility: hidden;
    transform: translateY(28px);
    filter: blur(4px);
    pointer-events: none;
    transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), filter 1.05s ease, visibility 0s linear 1.05s;
}

body.hero-elements-visible #hero-intro .animated-word,
body.hero-elements-visible #hero-intro .animated-cta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    filter: blur(0);
    pointer-events: auto;
    transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1), transform 1.05s cubic-bezier(0.22, 1, 0.36, 1), filter 1.05s ease, visibility 0s linear 0s;
}

body.hero-elements-visible #hero-intro .animated-cta {
    transition-delay: 0.28s;
}

/* Centrar el título typewriter en toda la pantalla durante la escritura inicial. */
body.hero-typing-active #typewriter-title {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(92vw, 1100px);
    margin: 0;
    text-align: center;
    transform: translate(-50%, -50%);
    z-index: 1200;
    pointer-events: none;
}

/* Durante el "vuelo" del título, ocultamos el original para mostrar solo la copia animada. */
body.hero-title-transitioning #typewriter-title {
    opacity: 0;
    visibility: hidden;
}

/* Mobile Menu Styles */
.navbar-toggler {
    position: relative;
    overflow: visible;
    border: 2px solid rgba(1, 159, 251, 0.95) !important;
    border-radius: 0 !important;
    padding: 0.45rem;
    background-color: rgba(8, 8, 12, 0.78) !important;
    box-shadow:
      -3px 3px 0 rgba(1, 159, 251, 0.95),
      3px 3px 0 rgba(253, 21, 114, 0.95),
      0 0 0 1px rgba(253, 21, 114, 0.9),
      0 0 10px rgba(1, 159, 251, 0.45),
      0 0 12px rgba(253, 21, 114, 0.35) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease !important;
}

.navbar-toggler::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 1px solid rgba(253, 21, 114, 0.95);
    border-radius: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.72;
    animation: navbar-toggler-glitch 2.4s steps(1, end) infinite;
}

.navbar-toggler:hover {
    background-color: rgba(15, 15, 24, 0.9) !important;
    border-color: rgba(253, 21, 114, 0.95) !important;
    box-shadow:
      -2px 2px 0 rgba(1, 159, 251, 0.95),
      2px 2px 0 rgba(253, 21, 114, 0.95),
      0 0 0 1px rgba(1, 159, 251, 0.95),
      0 0 12px rgba(1, 159, 251, 0.6),
      0 0 16px rgba(253, 21, 114, 0.5) !important;
}

.navbar-toggler:focus {
    box-shadow:
      -2px 2px 0 rgba(1, 159, 251, 0.95),
      2px 2px 0 rgba(253, 21, 114, 0.95),
      0 0 0 2px rgba(1, 159, 251, 0.65),
      0 0 12px rgba(1, 159, 251, 0.5),
      0 0 16px rgba(253, 21, 114, 0.45) !important;
    background-color: rgba(15, 15, 24, 0.9) !important;
}

.navbar-toggler.collapsed:focus,
.navbar-toggler.collapsed:focus-visible {
    background-color: rgba(8, 8, 12, 0.78) !important;
    border-color: rgba(1, 159, 251, 0.95) !important;
    box-shadow:
      -3px 3px 0 rgba(1, 159, 251, 0.95),
      3px 3px 0 rgba(253, 21, 114, 0.95),
      0 0 0 1px rgba(253, 21, 114, 0.9),
      0 0 10px rgba(1, 159, 251, 0.45),
      0 0 12px rgba(253, 21, 114, 0.35) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 1.5em;
    height: 1.5em;
    filter:
      drop-shadow(-1px 0 1px rgba(1, 159, 251, 0.55))
      drop-shadow(1px 0 1px rgba(253, 21, 114, 0.55));
}

.navbar-toggler:not(.collapsed) {
    background-color: rgba(20, 14, 24, 0.95) !important;
    border-color: rgba(253, 21, 114, 0.95) !important;
    box-shadow:
      -2px 2px 0 rgba(1, 159, 251, 0.95),
      2px 2px 0 rgba(253, 21, 114, 0.95),
      0 0 0 1px rgba(1, 159, 251, 0.95),
      0 0 12px rgba(1, 159, 251, 0.6),
      0 0 18px rgba(253, 21, 114, 0.65) !important;
}

@keyframes navbar-toggler-glitch {
    0%, 72%, 100% {
      transform: translate(0, 0);
      opacity: 0.72;
    }
    74% {
      transform: translate(-1px, 1px);
      opacity: 0.9;
    }
    76% {
      transform: translate(1px, -1px);
      opacity: 0.85;
    }
    78% {
      transform: translate(0, 0);
      opacity: 0.72;
    }
}

@media (max-width: 991px) {
    .header-minimal.mobile-menu-open {
        transform: translateY(0) !important;
    }

    .navbar-collapse {
        position: static;
        width: 100%;
        margin-top: 0.75rem;
        padding: 1rem;
        background-color: rgba(6, 6, 10, 0.58);
        border: 1px solid rgba(1, 159, 251, 0.75);
        border-bottom: 3px solid var(--khroma-secondary);
        box-shadow:
          0 0 14px rgba(1, 159, 251, 0.25),
          0 0 16px rgba(253, 21, 114, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .navbar-collapse.show {
        height: var(--mobile-menu-available-height, calc(100dvh - var(--mobile-navbar-row-height, 72px) - var(--mobile-secondary-height, 44px)));
        max-height: var(--mobile-menu-available-height, calc(100dvh - var(--mobile-navbar-row-height, 72px) - var(--mobile-secondary-height, 44px)));
    }

    .navbar-collapse.show .navbar-nav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        min-height: 100%;
        margin: 0;
    }

    .header-minimal .secondary-header {
        position: relative;
        z-index: 2;
    }

    .nav-item {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        border-bottom: 2px dashed var(--color-black);
    }

    .nav-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .nav-menu-link {
        font-size: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
        width: 100%;
        padding: 0;
        color: var(--color-white) !important;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .nav-menu-link:hover {
        color: var(--color-white) !important;
        text-decoration: none;
    }
}

/* Desktop Menu Styles */
.navbar-nav {
    gap: 1rem;
}

.nav-menu-link {
    color: var(--color-white) !important;
    font-weight: bold;
    font-size: 1rem;
    position: relative;
    text-shadow:
      -0.06em 0 0 var(--khroma-secondary),
      0.06em 0 0 var(--khroma-color),
      -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
      0.06em 0 0.02em rgba(253, 21, 114, 0.8),
      -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
      0.06em 0 0.08em rgba(253, 21, 114, 0.8);
    transition: all 0.3s ease;
}

@media (min-width: 992px) {
    .nav-menu-link {
        font-size: 0.95rem;
        padding: 0.2rem 0.35rem;
        line-height: 1.15;
    }
}

.nav-menu-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--khroma-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-menu-link:hover {
    color: var(--color-white) !important;
}

.nav-menu-link:hover::after {
    transform: scaleX(1);
}

/** ------------------------- */
/** SECONDARY HEADER (SOCIAL + CONTACT) - MAGENTA SHADOW BAR */
/** ------------------------- */
.secondary-header {
    width: 100%;
    background-color: transparent;
    border-top: none;
    padding: 0.2rem 1.1rem;
}

.secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-white);
    font-weight: bold;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}

.secondary-link i {
    font-size: 0.95rem;
}

.secondary-link:hover {
    color: var(--color-black);
}

.secondary-link.secondary-link-facebook {
    color: var(--khroma-secondary);
}

.secondary-link.secondary-link-instagram {
    color: var(--khroma-color);
}

.secondary-link.secondary-link-whatsapp,
.secondary-link.secondary-link-email {
    color: var(--color-white);
    text-shadow:
      -0.06em 0 0 var(--khroma-secondary),
      0.06em 0 0 var(--khroma-color),
      -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
      0.06em 0 0.02em rgba(253, 21, 114, 0.8),
      -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
      0.06em 0 0.08em rgba(253, 21, 114, 0.8);
}

.secondary-link.secondary-link-facebook:hover,
.secondary-link.secondary-link-facebook:focus-visible {
    color: var(--khroma-secondary);
}

.secondary-link.secondary-link-instagram:hover,
.secondary-link.secondary-link-instagram:focus-visible {
    color: var(--khroma-color);
}

.secondary-link.secondary-link-whatsapp:hover,
.secondary-link.secondary-link-whatsapp:focus-visible,
.secondary-link.secondary-link-email:hover,
.secondary-link.secondary-link-email:focus-visible {
    color: var(--color-white);
}

@media (max-width: 575px) {
    .secondary-header {
        padding: 0.2rem 0.8rem;
    }
    .secondary-link {
        font-size: 0.8rem;
    }
    .secondary-link span {
        display: none;
    }
}

/** ------------------------- */
/** BACK TO TOP BUTTON */
/** ------------------------- */
.btn-back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: var(--khroma-color);
    color: var(--color-white);
    border: 3px solid var(--color-black);
    border-radius: 0; /* Square for Pop Art */
    box-shadow: 5px 5px 0px var(--color-black);
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.btn-back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.btn-back-to-top:hover {
    background-color: var(--khroma-color-hover);
    box-shadow: 3px 3px 0px var(--color-black);
    transform: translate(2px, 2px);
}

.arrow-up {
    font-family: var(--font-handwritten);
    line-height: 1;
}

@media (max-width: 767px) {
    .btn-back-to-top {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
        bottom: 20px;
        right: 20px;
    }
}

/** ------------------------- */
/** TIPOGRAFÍA ESPECÍFICA */
/** ------------------------- */
.font-special-elite {
    font-family: var(--font-special-elite);
    /* El Pop Art a menudo usa mayúsculas para las fuentes de impacto */
    text-transform: uppercase;
}

.font-handwritten {
    font-family: var(--font-handwritten);
}

.font-logo {
    font-family: var(--font-logo);
    font-size: 2rem;
    color: var(--khroma-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.navbar-brand {
    position: relative;
    display: inline-block;
    font-family: var(--font-logo);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-left: 0.85rem;
    padding-bottom: 0.15rem;
    color: var(--color-white) !important;
    text-shadow:
      -0.06em 0 0 var(--khroma-secondary),
      0.06em 0 0 var(--khroma-color),
      -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
      0.06em 0 0.02em rgba(253, 21, 114, 0.8),
      -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
      -0.06em 0 0.16em rgba(1, 159, 251, 0.6),
      0.06em 0 0.08em rgba(253, 21, 114, 0.8),
      0.06em 0 0.16em rgba(253, 21, 114, 0.6),
      0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
}

.navbar-brand::after {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -0.08rem;
    width: 200%;
    height: 2px;
    border-radius: 999px;
    background: var(--khroma-color);
    box-shadow:
      0 0 6px rgba(253, 21, 114, 0.95),
      0 0 14px rgba(253, 21, 114, 0.82),
      0 0 22px rgba(253, 21, 114, 0.62);
    transform-origin: left center;
    animation: navbar-brand-neon 2.6s ease-in-out infinite;
}

.navbar-brand:hover,
.navbar-brand:focus-visible {
    color: var(--color-white) !important;
}

@keyframes navbar-brand-neon {
    0% {
      background: var(--khroma-color);
      box-shadow:
        0 0 6px rgba(253, 21, 114, 0.95),
        0 0 14px rgba(253, 21, 114, 0.82),
        0 0 22px rgba(253, 21, 114, 0.62);
      opacity: 0.9;
      transform-origin: left center;
      transform: scaleX(0);
      filter: brightness(0.95);
    }
    25% {
      opacity: 1;
      transform-origin: left center;
      transform: scaleX(1);
      filter: brightness(1.18);
    }
    25.01% {
      transform-origin: right center;
      transform: scaleX(1);
    }
    50% {
      background: var(--khroma-color);
      box-shadow:
        0 0 6px rgba(253, 21, 114, 0.95),
        0 0 14px rgba(253, 21, 114, 0.82),
        0 0 22px rgba(253, 21, 114, 0.62);
      opacity: 0.9;
      transform-origin: right center;
      transform: scaleX(0);
      filter: brightness(0.95);
    }
    50.01% {
      background: var(--khroma-secondary);
      box-shadow:
        0 0 6px rgba(1, 159, 251, 0.95),
        0 0 14px rgba(1, 159, 251, 0.82),
        0 0 22px rgba(1, 159, 251, 0.62);
      transform-origin: right center;
      transform: scaleX(0);
    }
    75% {
      opacity: 1;
      transform-origin: right center;
      transform: scaleX(1);
      filter: brightness(1.18);
    }
    75.01% {
      transform-origin: left center;
      transform: scaleX(1);
    }
    100% {
      background: var(--khroma-secondary);
      box-shadow:
        0 0 6px rgba(1, 159, 251, 0.95),
        0 0 14px rgba(1, 159, 251, 0.82),
        0 0 22px rgba(1, 159, 251, 0.62);
      opacity: 0.85;
      transform-origin: left center;
      transform: scaleX(0);
      filter: brightness(0.98);
    }
}

.nav-menu-link {
    font-family: var(--font-handwritten);
    letter-spacing: 0.5px;
}


/** ------------------------------- */
/** Estilos de la Sección HERO */
/** ------------------------------- */
#hero-intro {
    min-height: 100vh;
    padding: 0 5%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    --hero-focus-x: -999px;
    --hero-focus-y: -999px;
    --hero-focus-radius: clamp(170px, calc(12vw + 50px), 270px);
    background-color: var(--color-black);
}

/* Utilidad modular para fondo negro y parrafos simples tipo hero */
.bg-darkhard {
    background-color: #000000 !important;
}

.bg-darkhard p,
.bg-darkhard p.text-dark,
.bg-darkhard p.text-muted {
    color: rgba(255, 255, 255, 0.75) !important;
}

#hero-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/hero-background-khroma.png') center center / cover no-repeat;
    opacity: 0.4; /* 20% base + 40% spotlight = 60% */
    -webkit-mask-image: radial-gradient(
      circle var(--hero-focus-radius) at var(--hero-focus-x) var(--hero-focus-y),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0.78) 68%,
      rgba(0, 0, 0, 0.42) 84%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: radial-gradient(
      circle var(--hero-focus-radius) at var(--hero-focus-x) var(--hero-focus-y),
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 0.78) 68%,
      rgba(0, 0, 0, 0.42) 84%,
      rgba(0, 0, 0, 0) 100%
    );
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: opacity 0.8s ease, -webkit-mask-image 120ms linear, mask-image 120ms linear;
    will-change: -webkit-mask-image, mask-image;
    z-index: 1;
    pointer-events: none;
}

#hero-intro::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../img/hero-background-khroma.png') center center / cover no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease;
    will-change: opacity;
    z-index: 0;
}

#hero-intro .hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    will-change: opacity;
    z-index: 0;
    pointer-events: none;
}

#hero-intro.bg-visible::after {
    opacity: 0.2;
}

#hero-intro.bg-video-active::before,
#hero-intro.bg-video-active::after {
    opacity: 0;
}

#hero-intro.bg-video-active .hero-bg-video {
    opacity: 1;
}

@media (max-width: 768px) {
    #hero-intro.bg-visible::before {
      opacity: 0;
    }

    #hero-intro.bg-visible::after {
      opacity: 1;
    }

    #hero-intro.bg-video-active::after {
      opacity: 1;
    }

    #hero-intro.bg-video-active .hero-bg-video {
      opacity: 0;
    }

    #hero-intro.bg-video-active.bg-video-mobile-on::after {
      opacity: 0;
    }

    #hero-intro.bg-video-active.bg-video-mobile-on .hero-bg-video {
      opacity: 1;
    }
}

#hero-intro > .row,
#hero-intro .hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-size: var(--font-size-hero);
    letter-spacing: 0px; /* Reducir el espaciado para la fuente 'máquina de escribir' */
    font-weight: 400 !important; /* La fuente de máquina de escribir suele ser de peso normal */
}

/* Utilidad modular de sombra bicolor neon para titulos */
.text-shadow-bicolor,
.hero-content h1 {
    /* Contorno bicolor relativo al tamano del texto */
    text-shadow:
      -0.06em 0 0 var(--khroma-secondary),
      0.06em 0 0 var(--khroma-color),
      -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
      0.06em 0 0.02em rgba(253, 21, 114, 0.8),
      /* Neon cyan glow */
      -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
      -0.06em 0 0.16em rgba(1, 159, 251, 0.6),
      /* Neon magenta glow */
      0.06em 0 0.08em rgba(253, 21, 114, 0.8),
      0.06em 0 0.16em rgba(253, 21, 114, 0.6),
      0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
}

/* Neón solo para texto coloreado dentro del titulo */
.hero-content h1 .text-khroma {
    text-shadow:
      0 0 3px rgba(253, 21, 114, 0.9),
      0 0 8px rgba(253, 21, 114, 0.65),
      0 0 14px rgba(253, 21, 114, 0.4);
}

.hero-content h1 .text-cyan {
    color: var(--khroma-secondary);
    text-shadow:
      0 0 3px rgba(1, 159, 251, 0.9),
      0 0 8px rgba(1, 159, 251, 0.65),
      0 0 14px rgba(1, 159, 251, 0.4);
}

.text-khroma {
    color: var(--khroma-color);
    font-family: var(--font-special-elite);
}

.brand-mark {
    display: inline-block;
    font-family: var(--font-logo);
    font-size: 1em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-white);
    text-shadow:
      -0.06em 0 0 var(--khroma-secondary),
      0.06em 0 0 var(--khroma-color),
      -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
      0.06em 0 0.02em rgba(253, 21, 114, 0.8),
      -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
      -0.06em 0 0.16em rgba(1, 159, 251, 0.6),
      0.06em 0 0.08em rgba(253, 21, 114, 0.8),
      0.06em 0 0.16em rgba(253, 21, 114, 0.6),
      0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
}

/** -------------------------------------------- */
/** ESTILO DE COMPONENTE: BOTÓN POP ART */
/** -------------------------------------------- */
.btn-pop-art {
    /* Estilo de botón sólido y vibrante */
    background-color: var(--khroma-color);
  border: 3px solid var(--color-black);
    color: var(--color-white);
    font-family: var(--font-handwritten); /* Fuente de mano alzada */
    font-weight: bold;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;

    /* Pequeño toque Bohemio/Irregular: Sombra sutil que rompe la perfección */
    box-shadow: 4px 4px 0px var(--color-dark);
}

.btn-pop-art:hover {
    background-color: var(--khroma-color-hover);
  border-color: var(--color-black);
    color: var(--color-white);
    /* Efecto de 'presión' al hacer hover */
    box-shadow: 2px 2px 0px var(--color-dark);
    transform: translate(2px, 2px);
}

/* Componente reutilizable: Botón neón bicolor externo */
.btn-neon-frame,
.btn-neon-corner {
  --btn-neon-cyan: var(--khroma-secondary);
  --btn-neon-fuchsia: var(--khroma-color);
  --btn-neon-border-size: 2px;
  --btn-neon-offset: 2px;
  --btn-neon-radius: 14px;
  --btn-neon-text-normal: var(--btn-neon-cyan);
  --btn-neon-text-hover: var(--btn-neon-fuchsia);
  position: relative;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: var(--btn-neon-radius) !important;
  overflow: visible;
  color: var(--btn-neon-text-normal) !important;
  padding: 0.85rem 3.5rem !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.btn-neon-frame:hover,
.btn-neon-frame:focus-visible,
.btn-neon-corner:hover,
.btn-neon-corner:focus-visible {
  background-color: transparent !important;
  color: var(--btn-neon-text-hover) !important;
  transform: translate(0, 0) !important;
  text-shadow:
    0 0 4px rgba(253, 21, 114, 0.8),
    0 0 6px rgba(253, 21, 114, 0.6),
    0 0 8px rgba(253, 21, 114, 0.4) !important;
  box-shadow: none !important;
}

.btn-neon-frame::before,
.btn-neon-corner::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--btn-neon-offset));
  pointer-events: none;
  border-radius: calc(var(--btn-neon-radius) + var(--btn-neon-offset));
  border: var(--btn-neon-border-size) solid transparent;
  border-top-color: var(--btn-neon-fuchsia);
  border-right-color: var(--btn-neon-fuchsia);
  border-bottom-color: var(--btn-neon-cyan);
  border-left-color: var(--btn-neon-cyan);
  filter:
    /* Núcleo cían/fucsia + halo progresivo, similar al text-shadow neón */
    drop-shadow(-1px 1px 0 rgba(1, 159, 251, 0.9))
    drop-shadow(-1px 1px 3px rgba(1, 159, 251, 0.82))
    drop-shadow(-1px 1px 7px rgba(1, 159, 251, 0.62))
    drop-shadow(1px -1px 0 rgba(253, 21, 114, 0.9))
    drop-shadow(1px -1px 3px rgba(253, 21, 114, 0.82))
    drop-shadow(1px -1px 7px rgba(253, 21, 114, 0.62));
}

.btn-neon-frame:hover::before,
.btn-neon-frame:focus-visible::before,
.btn-neon-corner:hover::before,
.btn-neon-corner:focus-visible::before {
  border-top-color: var(--btn-neon-cyan);
  border-right-color: var(--btn-neon-cyan);
  border-bottom-color: var(--btn-neon-fuchsia);
  border-left-color: var(--btn-neon-fuchsia);
  filter: none;
}

/** -------------------------------------------------- */
/** ESTILO DE COMPONENTE: BOTÓN OUTLINE POP ART */
/** -------------------------------------------------- */
.btn-pop-art-outline {
    background-color: transparent;
  border: 3px solid var(--khroma-secondary);
    color: var(--color-white);
    font-family: var(--font-handwritten); /* Fuente de mano alzada */
    font-weight: bold;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;

    /* Mismo toque de sombra Pop Art que el botón principal */
    box-shadow: 4px 4px 0px var(--color-dark);
}

.btn-pop-art-outline:hover {
    background-color: var(--khroma-color);
  border-color: var(--color-black);
    color: var(--color-white);
    /* Efecto de 'presión' al hacer hover */
    box-shadow: 2px 2px 0px var(--color-dark);
    transform: translate(2px, 2px);
}

/* Efecto presionado coherente para todos los botones del sitio */
.btn,
.btn-pop-art,
.btn-pop-art-outline,
.btn-back-to-top,
.navbar-toggler {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover,
.btn:focus-visible,
.btn-pop-art:hover,
.btn-pop-art:focus-visible,
.btn-pop-art-outline:hover,
.btn-pop-art-outline:focus-visible,
.btn-back-to-top:hover,
.btn-back-to-top:focus-visible,
.navbar-toggler:hover,
.navbar-toggler:focus-visible {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px var(--color-black) !important;
}

/** ------------------------------------------------------ */
/** CLASES DE ANIMACIÓN AL SCROLL (OPACIDAD CERO) */
/** ------------------------------------------------------ */
.animated-project {
    opacity: 0;
    transform: translateY(40px); /* Desplazado hacia abajo, se moverá a 0 al aparecer */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/** ----------------------------------------- */
/** ESTILOS DE COMPONENTE: PORTAFOLIO */
/** ----------------------------------------- */
#portfolio {
    background-color: var(--color-surface); /* Base oscura para resaltar acentos neón */
}

/* Títulos de Proyectos (Fuente de Mano Alzada) */
.portfolio-title {
    font-size: 2rem;
    color: var(--color-white);
    line-height: 1.1;
    margin-bottom: 5px;
    transition: color 0.3s;
}

/* Categoría (Texto limpio y discreto) */
.portfolio-category {
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-muted);
}

/* Placeholder para la imagen (Minimalismo) */
.image-placeholder {
    width: 100%;
    /* Mantenemos un aspecto cuadrado o 4:3 para el impacto visual */
    padding-top: 75%; /* Ratio 4:3 */
    background-color: var(--color-placeholder) !important;
    transition: transform 0.4s ease-out;
    /* Agregamos un borde sutil para darle textura (Bohemio/Irregular) */
    border: 1px solid var(--color-border-gray); 
}

/* Efecto Hover: Pop Art y Dinámico */
.portfolio-item:hover .portfolio-title {
    color: var(--khroma-color); /* El título se vuelve Magenta vibrante al pasar el mouse */
}

.portfolio-item:hover .image-placeholder {
    transform: scale(0.98); /* La imagen se encoge ligeramente para dar un efecto dinámico */
}

/** ---------------------------------------------------------- */
/** AJUSTE VISUAL DE LA IMAGEN DENTRO DEL PLACEHOLDER */
/** ---------------------------------------------------------- */
.portfolio-img {
    /* Asegura que la imagen ocupe todo el espacio y esté visible */
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para cubrir el contenedor sin distorsionarla */
    position: absolute; /* Permite posicionarla y cubrir el padding-top del placeholder */
    top: 0;
    left: 0;
    z-index: 5; /* Colócala por debajo de la capa de semitono (z-index: 10) */
}

/* Ajuste necesario: El padding-top que usamos para definir el ratio ahora no es necesario
  para mantener el espacio, pero lo dejaremos para la compatibilidad con el diseño.
  El overlay y la imagen ahora se posicionan por encima. */
.image-placeholder {
    padding-top: 75%; /* Mantener para el ratio de 4:3 */
    background-color: transparent !important; /* El fondo ya no es necesario */
}

/** ---------------------------------------------------------- */
/** ESTILOS DE COMPONENTE: SERVICIOS */
/** ---------------------------------------------------------- */

.service-card {
    --service-neon-intensity: var(--khroma-neon-intensity, 1);
    position: relative;
    overflow: hidden;
    min-height: 280px;
    border: 1px solid rgba(1, 159, 251, calc(0.35 * var(--service-neon-intensity)));
    border-radius: 14px;
    background:
      radial-gradient(circle at top left, rgba(1, 159, 251, calc(0.11 * var(--service-neon-intensity))), transparent 46%),
      radial-gradient(circle at bottom right, rgba(253, 21, 114, calc(0.09 * var(--service-neon-intensity))), transparent 42%),
      linear-gradient(145deg, rgba(10, 12, 18, 0.7), rgba(10, 12, 18, 0.52));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
      0 0 10px rgba(1, 159, 251, calc(0.18 * var(--service-neon-intensity))),
      0 0 14px rgba(253, 21, 114, calc(0.12 * var(--service-neon-intensity)));
    transition:
      transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
      border-color 280ms ease;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(253, 21, 114, calc(0.22 * var(--service-neon-intensity)));
    border-radius: 13px;
    pointer-events: none;
    transition: border-color 280ms ease, opacity 280ms ease;
}

.service-card::after {
    content: "";
    position: absolute;
    inset: -45% -55%;
    background: linear-gradient(
      120deg,
      transparent 30%,
      rgba(255, 255, 255, 0.16) 48%,
      rgba(1, 159, 251, calc(0.2 * var(--service-neon-intensity))) 52%,
      transparent 70%
    );
    opacity: 0;
    transform: translateX(-70%) rotate(10deg);
    transition: transform 560ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
    pointer-events: none;
}

.service-card h3 {
    letter-spacing: 0.2px;
}

.service-card p {
    color: rgba(255, 255, 255, 0.78) !important;
}

.service-icon {
    font-size: 1.25rem;
    display: inline-block;
    border: 1px solid rgba(253, 21, 114, calc(0.45 * var(--service-neon-intensity)));
    border-radius: 999px;
    background-color: rgba(20, 10, 22, 0.45);
    box-shadow: 0 0 8px rgba(253, 21, 114, calc(0.35 * var(--service-neon-intensity)));
    padding: 6px 12px;
    line-height: 1;
    transition: border-color 280ms ease, box-shadow 280ms ease, color 280ms ease;
}

/* Efecto Hover Pop Art en la tarjeta */
.service-card:hover,
.service-card:focus-within {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(1, 159, 251, calc(0.65 * var(--service-neon-intensity)));
    box-shadow:
      0 0 12px rgba(1, 159, 251, calc(0.35 * var(--service-neon-intensity))),
      0 0 22px rgba(1, 159, 251, calc(0.28 * var(--service-neon-intensity))),
      0 0 12px rgba(253, 21, 114, calc(0.3 * var(--service-neon-intensity))),
      0 0 22px rgba(253, 21, 114, calc(0.22 * var(--service-neon-intensity)));
}

.service-card:hover::before,
.service-card:focus-within::before {
    border-color: rgba(253, 21, 114, calc(0.42 * var(--service-neon-intensity)));
}

.service-card:hover::after,
.service-card:focus-within::after {
    opacity: calc(0.2 * var(--service-neon-intensity));
    transform: translateX(65%) rotate(10deg);
}

.service-card:hover .service-icon,
.service-card:focus-within .service-icon {
    border-color: rgba(1, 159, 251, calc(0.5 * var(--service-neon-intensity)));
    box-shadow: 0 0 8px rgba(1, 159, 251, calc(0.4 * var(--service-neon-intensity)));
}

.service-card-feature {
    border-color: rgba(253, 21, 114, calc(0.5 * var(--service-neon-intensity)));
    box-shadow:
      0 0 12px rgba(253, 21, 114, calc(0.2 * var(--service-neon-intensity))),
      0 0 16px rgba(1, 159, 251, calc(0.14 * var(--service-neon-intensity)));
}

.service-card-feature::before {
    border-color: rgba(1, 159, 251, calc(0.35 * var(--service-neon-intensity)));
}

.service-card-feature:hover .service-icon,
.service-card-feature:focus-within .service-icon {
    color: var(--khroma-secondary);
}

/** ---------------------------------------------------------- */
/** CLASES DE ANIMACIÓN AL SCROLL (para los servicios) */
/** ---------------------------------------------------------- */
.animated-service {
    /* Usaremos la misma lógica de animación que en el portafolio */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/** ---------------------------------------------------------- */
/** ESTILOS DE COMPONENTE: FOOTER */
/** ---------------------------------------------------------- */
#contacto {
    /* El background-color: bg-dark ya lo define Bootstrap en el HTML */
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.footer-link {
    color: var(--color-text-muted); /* Gris claro para el texto */
    text-decoration: none;
    transition: color 0.3s;
    /* Usamos la fuente de Mano Alzada para los enlaces del footer (toque Bohemio/Artístico) */
    font-family: var(--font-handwritten);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.footer-link:hover {
    color: var(--khroma-secondary); /* Color Pop Art al hacer hover */
}

/** ---------------------------------------------------------- */
/** MICROINTERACCIÓN: CURSOR POP ART (CORREGIDO) */
/** ---------------------------------------------------------- */

/* Opción A: Cursor personalizado SVG Codificado (Círculo Magenta) */
.has-interactive-cursor,
.portfolio-item,
.btn-pop-art,
.btn-pop-art-outline,
.service-card,
.footer-link,
#contacto
a {
    /* El código largo de abajo es un SVG codificado.
    Representa un círculo magenta con borde negro de 32x32 pixeles.
     El '16 16' indica que el clic ocurre en el centro del círculo. */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23fd1572' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer;
}

/* Opción: Si quieres que TODO el sitio tenga el cursor personalizado, descomenta esto: */

/* body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23fd1572' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 16 16, auto;
} */


/** ---------------------------------------------------------- */
/** EFECTO MÁQUINA DE ESCRIBIR */
/** ---------------------------------------------------------- */

/* El cursor parpadeante */
.typing-cursor {
    display: inline-block;
    width: 15px; /* Grosor del bloque */
    height: 60px; /* Altura ajustada al tamaño de fuente del H1 */
    background-color: var(--khroma-color); /* Color Magenta Pop Art */
    margin-left: 5px;
    vertical-align: text-bottom;
    animation: blink 0.8s infinite; /* Animación de parpadeo */
}

/* Animación keyframes para el parpadeo */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

/* Ajuste para móviles */
@media (max-width: 992px) {
    .typing-cursor {
        height: 40px;
        width: 10px;
    }
}

/** ---------------------------------------------------------- */
/** EFECTO HOVER: SEMITONO (POP ART) */
/** ---------------------------------------------------------- */

/* Contenedor principal de la imagen (debe ser relativo para posicionar el overlay) */
.image-placeholder {
  position: relative; /* Asegura que el overlay se posicione correctamente */
  overflow: hidden; /* Oculta el patrón fuera del área de la imagen */
  /* El resto de estilos del placeholder permanece igual (border, padding-top, etc.) */
}

/* Capa de Semitono */
.halftone-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--khroma-secondary); /* Fondo del overlay con color de marca */
  opacity: 0; /* Inicialmente invisible */
  transition: opacity 0.3s ease-out; /* Transición suave para la aparición */
  z-index: 10;
}

/* Generación del patrón de puntos (HALTONE effect) */
.halftone-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* CREACIÓN DEL PATRÓN DE PUNTOS:
    Usamos un radial-gradient repetitivo para simular el semitono.
    Cambiamos el tamaño de los puntos (6px) y la repetición del fondo (12px).
  */
  background-image: radial-gradient(circle at 50% 50%, var(--color-black) 2px, transparent 2px, transparent 6px);
  background-size: 12px 12px;
  mix-blend-mode: soft-light; /* Mezcla los colores del patrón con el fondo magenta */
  opacity: 0.5;
}

/* Comportamiento al hacer HOVER */
.portfolio-item:hover .halftone-overlay {
  opacity: 0.85; /* Hace que el overlay magenta con puntos aparezca sobre la imagen */
}

/* Opcional: Oscurecer la tipografía del proyecto al hacer hover */
.portfolio-item:hover .portfolio-category,
.portfolio-item:hover .portfolio-title {
  color: var(--color-black); /* Asegura contraste sobre el magenta */
}

/** -------------------------------------------------------- */
/** SECCIÓN DE CONTACTO (MAPA + FORMULARIO) */
/** -------------------------------------------------------- */
#contacto {
    position: relative;
    overflow: hidden;
}

.map-spacer {
    height: 60vh; /* Espacio reservado para el mapa */
}

.map-background iframe {
    pointer-events: none; /* Evita que el mapa capture el scroll del mouse */
}

.contact-card {
  /* Estilo Pop Art para el formulario */
  border: 3px solid var(--color-black) !important;
  box-shadow: 15px 15px 0px var(--khroma-secondary) !important; /* Sombra más pronunciada */

  /* Animamos tanto la transformación (rebote) como la opacidad */
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 1s ease-in-out;

  /* Estado inicial para animación */
  opacity: 0;
  transform: translateY(100px);
}

.contact-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.contact-card:hover {
  /* Efecto sutil al hover, ya que la animación de entrada es fuerte */
  transform: translateY(-5px);
  box-shadow: 20px 20px 0px var(--khroma-color-hover) !important;
}

.form-control {
  /* Estilo minimalista 'underlined' */
  border: none !important;
  border-bottom: 2px solid var(--color-black) !important;
  padding: 10px 0;
  font-family: var(--font-body);
  font-weight: bold;
}

.form-control:focus {
  box-shadow: none;
  border-color: var(--khroma-secondary) !important;
  background-color: transparent; 
}

/* Etiquetas flotantes o estilo máquina de escribir */
label {
  letter-spacing: 2px;
  font-weight: bold;
}

/* Mensajes de estado del formulario */
.loading, .error-message, .sent-message {
  display: none;
  font-weight: bold;
  padding: 10px;
  text-align: center;
}

.loading {
  background: var(--color-white);
  display: none; /* Se controla con JS */
}

.error-message {
  color: var(--color-white);
  background: var(--color-error);
}

.sent-message {
  color: var(--color-white);
  background: var(--color-success);
}

/** ---------------------------------------------------------- */
/** RESPONSIVE: AJUSTES PARA MÓVILES */
/** ---------------------------------------------------------- */

/* Tablets y móviles grandes (menor a 992px) */
@media (max-width: 991px) {
  .hero-content h1 {
      font-size: 3rem; /* Reducir tamaño del título principal */
  }

  .portfolio-title {
    font-size: 1.5rem;
  }

  .btn-pop-art, .btn-pop-art-outline {
    font-size: 0.9rem;
    padding: 0.65rem 1.5rem;
  }
}

/* Móviles medianos (menor a 768px) */
@media (max-width: 767px) {
  .hero-content h1 {
    font-size: 2.2rem; /* Ajuste más agresivo para pantallas pequeñas */
  }

  .lead {
    font-size: 1rem;
  }

  .display-4 {
    font-size: 2rem !important;
  }

  .display-5 {
    font-size: 1.8rem !important;
  }

  .portfolio-title {
    font-size: 1.3rem;
  }

  .service-icon {
    font-size: 1.1rem;
    padding: 5px 11px;
  }

  .service-card {
    min-height: 260px;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }

  .btn-pop-art, .btn-pop-art-outline {
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
  }

  /* Ajuste de espaciador de mapa para tablets/móviles grandes */
  .map-spacer {
    height: 50vh;
  }
}

/* Móviles pequeños (menor a 576px) */
@media (max-width: 575px) {
  .hero-content h1 {
    font-size: 1.8rem; /* Tamaño óptimo para móviles pequeños */
  }

  /* Ajuste de espaciador de mapa para móviles pequeños */
  .map-spacer {
    height: 20vh;
  }

  /* Ajuste de padding en la tarjeta de contacto */
  .contact-card {
    padding: 1.5rem !important;
  }

  .lead {
    font-size: 0.95rem;
  }

  .display-4 {
    font-size: 1.6rem !important;
  }

  .display-5 {
    font-size: 1.4rem !important;
  }

  .portfolio-title {
    font-size: 1.2rem;
  }

  .service-icon {
    font-size: 1rem;
    padding: 4px 10px;
  }

  .service-card {
    min-height: auto;
    border-radius: 12px;
  }

  .service-card:hover,
  .service-card:focus-within {
    transform: translateY(-2px) scale(1.005);
  }

  .service-card::after {
    display: none;
  }

  .btn-pop-art, .btn-pop-art-outline {
    font-size: 0.8rem;
    padding: 0.55rem 1rem;
  }

  .footer-link {
    font-size: 1rem;
  }
}
/** ---------------------------------------------------------- */
/** Preloader Animation */
 /** ---------------------------------------------------------- */
#preloader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999; /* Increased z-index */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent; /* Container is transparent, panels provide color */
}

.preloader-panel {
  position: absolute;
  top: 0;
  width: 51%; /* Slight overlap to prevent gap */
  height: 100%;
  background-color: var(--color-surface); /* Suave tinte base para la transición */
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

.preloader-left {
  left: 0;
}

.preloader-right {
  right: 0;
}

.preloader-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 0; /* Starts at 0 */
  background-color: var(--khroma-secondary);
  transform: translateX(-50%);
  z-index: 2;
  box-shadow:
    0 0 6px rgba(1, 159, 251, 0.9),
    0 0 14px rgba(1, 159, 251, 0.75),
    0 0 24px rgba(1, 159, 251, 0.55);
  transition: height 1s ease-in, opacity 0.3s ease-out, box-shadow 0.3s ease-in-out;
  animation: preloader-neon-cyan 1.2s ease-in-out infinite alternate;
}

.preloader-line-fuchsia {
  position: absolute;
  bottom: 0;
  left: calc(50% + 6px);
  width: 4px;
  height: 0; /* Starts at 0 */
  background-color: var(--khroma-color);
  transform: translateX(-50%);
  z-index: 2;
  box-shadow:
    0 0 6px rgba(253, 21, 114, 0.9),
    0 0 14px rgba(253, 21, 114, 0.75),
    0 0 24px rgba(253, 21, 114, 0.55);
  transition: height 1s ease-in, opacity 0.3s ease-out, box-shadow 0.3s ease-in-out;
  animation: preloader-neon-fuchsia 1.2s ease-in-out infinite alternate;
}

@keyframes preloader-neon-cyan {
  0% {
    filter: brightness(0.95);
    box-shadow:
      0 0 4px rgba(1, 159, 251, 0.75),
      0 0 10px rgba(1, 159, 251, 0.6),
      0 0 18px rgba(1, 159, 251, 0.4);
  }
  100% {
    filter: brightness(1.15);
    box-shadow:
      0 0 8px rgba(1, 159, 251, 0.95),
      0 0 18px rgba(1, 159, 251, 0.85),
      0 0 30px rgba(1, 159, 251, 0.65);
  }
}

@keyframes preloader-neon-fuchsia {
  0% {
    filter: brightness(0.95);
    box-shadow:
      0 0 4px rgba(253, 21, 114, 0.75),
      0 0 10px rgba(253, 21, 114, 0.6),
      0 0 18px rgba(253, 21, 114, 0.4);
  }
  100% {
    filter: brightness(1.15);
    box-shadow:
      0 0 8px rgba(253, 21, 114, 0.95),
      0 0 18px rgba(253, 21, 114, 0.85),
      0 0 30px rgba(253, 21, 114, 0.65);
  }
}

/* Animation States */
#preloader-overlay.line-active .preloader-line {
  height: 100%;
}

#preloader-overlay.line-active .preloader-line-fuchsia {
  height: 100%;
}

#preloader-overlay.split-active .preloader-left {
  transform: translateX(-100%);
}

#preloader-overlay.split-active .preloader-right {
  transform: translateX(100%);
}

#preloader-overlay.split-active .preloader-line {
  opacity: 0;
}

#preloader-overlay.split-active .preloader-line-fuchsia {
  opacity: 0;
}

#preloader-overlay.hidden {
  display: none;
}


/** ---------------------------------------------------------- */
/** Intro Screen */
/** ---------------------------------------------------------- */
#intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-black);
  z-index: 100000; /* Above everything including preloader */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Custom Pop Art Cursor */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='12' fill='%23fd1572' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 16 16, pointer;
}

.intro-content {
  flex: 1;
  padding: 2rem;
}

/* Brand Title Animation */
.intro-brand {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 8rem;
  color: var(--color-white);
  transform: translate(150%, -50%); /* Start off-screen right, vertically centered */
  opacity: 0;
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease; /* Bounce effect */
}

.intro-brand.visible {
  transform: translate(-50%, -50%); /* Center on screen */
  opacity: 1;
}

/* Services Animation */
.intro-services {
  position: absolute;
  bottom: 15%;
  left: 5%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem; /* Reduced gap */
}

.service-item {
  font-size: 2rem;
  color: var(--color-white);
  /* Sombra paralela bicolor relativa al tamano del texto */
  text-shadow:
    -0.06em 0 0 var(--khroma-secondary),
    0.06em 0 0 var(--khroma-color),
    -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
    0.06em 0 0.02em rgba(253, 21, 114, 0.8),
    /* Neon cyan glow */
    -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
    -0.06em 0 0.16em rgba(1, 159, 251, 0.6),
    /* Neon magenta glow */
    0.06em 0 0.08em rgba(253, 21, 114, 0.8),
    0.06em 0 0.16em rgba(253, 21, 114, 0.6),
    0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
  transform: translate(-150%, 150%); /* Start off-screen bottom-left */
  opacity: 0;
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.service-item.visible {
  transform: translate(0, 0);
  opacity: 1;
}

/* Enter Button (Removed) */
.intro-center {
  display: none;
}

/* Ticker Banner */
.intro-ticker {
  height: 60px;
  background-color: var(--khroma-secondary);
  border-top: 3px solid var(--color-black);
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-block;
  animation: ticker-scroll 20s linear infinite;
  padding-left: 100%; /* Start from right */
}

.ticker-item {
  display: inline-block;
  font-size: 1.5rem;
  color: var(--color-white);
  margin-right: 3rem;
  font-weight: bold;
}

@keyframes ticker-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .intro-brand { font-size: 6rem; }
  .service-item { font-size: 1rem; }
  #btn-enter-site { font-size: 1.5rem; }
}

/* Exit Animation State */
#intro-screen.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}


/** ---------------------------------------------------------- */
/** Intro Background Animation */
/** ---------------------------------------------------------- */
#intro-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* Changed from -1 to 0 to ensure visibility */
  overflow: hidden;
  pointer-events: none;
}

.intro-content {
  flex: 1;
  padding: 2rem;
  z-index: 1; /* Ensure content is above background */
  position: relative;
}

.bg-text-line {
  position: absolute;
  white-space: nowrap;
  opacity: 0.5;
  font-family: 'Special Elite', monospace; /* Hardcoded font */
  line-height: 1;
  user-select: none;
  will-change: transform; /* Optimization */
  /* Brillo sutil para que el texto destaque sobre el fondo negro */
  animation: neon-text-pulse 2.2s ease-in-out infinite alternate;
}

.bg-text-cyan {
  color: var(--khroma-secondary);
  text-shadow:
    0 0 6px rgba(1, 159, 251, 0.9),
    0 0 14px rgba(1, 159, 251, 0.75),
    0 0 26px rgba(1, 159, 251, 0.55);
}

.bg-text-fuchsia {
  color: var(--khroma-color);
  text-shadow:
    0 0 6px rgba(253, 21, 114, 0.9),
    0 0 14px rgba(253, 21, 114, 0.75),
    0 0 26px rgba(253, 21, 114, 0.55);
}

/* Directions */
.bg-move-left {
  animation: bg-scroll-left linear infinite;
}

.bg-move-right {
  animation: bg-scroll-right linear infinite;
}

.bg-move-up {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  animation: bg-scroll-up linear infinite;
}

.bg-move-down {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  animation: bg-scroll-down linear infinite;
}

/* Keyframes */
@keyframes bg-scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes bg-scroll-right {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes bg-scroll-up {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

@keyframes bg-scroll-down {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes neon-text-pulse {
  0% {
    filter: brightness(0.95);
  }
  100% {
    filter: brightness(1.2);
  }
}

/* Logo Animation */
.intro-logo {
  position: absolute;
  top: 35%; /* Slightly above center (50%) */
  left: 50%;
  width: 400px; /* Increased size */
  max-width: 80vw; /* Responsive max width */
  height: auto;
  z-index: 0; /* Changed to 0 to avoid stacking context issues */
  transform: translate(-50%, -250%); /* Start off-screen top */
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Simplified transition property */
  will-change: transform, opacity;
  font-family: var(--font-logo);
}

/* Onomatopeya below intro logo and brand title */
.intro-onomatopeya {
  position: absolute;
  top: calc(56% - 170px);
  left: 50%;
  width: min(520px, 72vw);
  height: auto;
  transform: translate(-50%, -50%) scale(0.65);
  opacity: 0;
  filter: blur(6px);
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.9s ease, filter 0.9s ease;
  z-index: -1;
  pointer-events: none;
}

.intro-onomatopeya.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  filter: blur(0);
  animation: onomatopeya-pop-vibe 320ms ease-out 1.05s 1 both;
}

@keyframes onomatopeya-pop-vibe {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  22% {
    transform: translate(calc(-50% - 2px), calc(-50% + 1px)) scale(1.02);
  }
  44% {
    transform: translate(calc(-50% + 2px), calc(-50% - 1px)) scale(0.99);
  }
  66% {
    transform: translate(calc(-50% - 1px), calc(-50% + 1px)) scale(1.01);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 768px) {
  .intro-logo {
    width: 250px;
    top: 35%;
    z-index: 5;
  }
  .intro-brand {
    font-size: 5rem;
  }
  .intro-onomatopeya {
    top: calc(54% - 100px);
    width: min(620px, 84vw);
    z-index: 1;
  }
}

.intro-logo.visible {
  transform: translate(-50%, -50%) !important; /* Center horizontally, vertically at top: 40% */
  opacity: 1 !important;
}

/* Ensure title is above logo */
.intro-brand {
  z-index: 10; /* Increased z-index */
  font-family: var(--font-logo);
  /* Contorno bicolor relativo al tamano del texto */
  text-shadow:
    -0.06em 0 0 var(--khroma-secondary),
    0.06em 0 0 var(--khroma-color),
    -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
    0.06em 0 0.02em rgba(253, 21, 114, 0.8),
    /* Neon cyan glow */
    -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
    -0.06em 0 0.16em rgba(1, 159, 251, 0.6),
    /* Neon magenta glow */
    0.06em 0 0.08em rgba(253, 21, 114, 0.8),
    0.06em 0 0.16em rgba(253, 21, 114, 0.6),
    0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
}


/** -------------------------------------- */
/** Parallax Section Dividers */
/** -------------------------------------- */
.parallax-section {
  position: relative;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Overlay for better text visibility */
.parallax-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: parallax-bg-glitch 5s steps(1, end) infinite;
  z-index: 1;
}

.parallax-title {
  position: absolute;
  z-index: 10;
  font-size: 5rem;
  color: var(--color-white);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
  margin: 0;
  padding: 0;
  width: 100%;
}

.parallax-title-brand {
  color: var(--color-white);
  text-shadow:
    -0.06em 0 0 var(--khroma-secondary),
    0.06em 0 0 var(--khroma-color),
    -0.06em 0 0.02em rgba(1, 159, 251, 0.8),
    -0.06em 0 0.08em rgba(1, 159, 251, 0.8),
    -0.06em 0 0.16em rgba(1, 159, 251, 0.6),
    0.06em 0 0.02em rgba(253, 21, 114, 0.8),
    0.06em 0 0.08em rgba(253, 21, 114, 0.8),
    0.06em 0 0.16em rgba(253, 21, 114, 0.6),
    0.06em 0.06em 0 rgba(0, 0, 0, 0.45);
}

.parallax-title-brand::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.25em;
  width: clamp(220px, 40vw, 520px);
  height: 5px;
  border-radius: 999px;
  background: var(--khroma-color);
  box-shadow:
    0 0 10px rgba(253, 21, 114, 0.95),
    0 0 20px rgba(253, 21, 114, 0.9),
    0 0 32px rgba(253, 21, 114, 0.8);
  transform: translateX(-50%);
  animation: parallax-bar-glitch 5s steps(1, end) infinite;
}

@keyframes parallax-bar-glitch {
  0%, 31.6%, 33.8%, 35.1%, 39.6%, 76.7%, 79.8%, 81.9%, 100% {
    background: var(--khroma-color);
    box-shadow:
      0 0 10px rgba(253, 21, 114, 0.95),
      0 0 20px rgba(253, 21, 114, 0.9),
      0 0 32px rgba(253, 21, 114, 0.8);
    opacity: 1;
    transform: translateX(-50%);
    filter: brightness(1.12);
  }

  32.1%, 33.3%, 35.7%, 39.2%, 40.5%, 74.8%, 75.6%, 79.2%, 82.4%, 98.8% {
    background: var(--khroma-secondary);
    box-shadow:
      0 0 10px rgba(1, 159, 251, 0.95),
      0 0 20px rgba(1, 159, 251, 0.9),
      0 0 32px rgba(1, 159, 251, 0.8);
    opacity: 1;
    transform: translateX(-50%);
    filter: brightness(1.18);
  }
}

@keyframes parallax-bg-glitch {
  0%, 31.6%, 33.8%, 35.1%, 39.6%, 76.7%, 79.8%, 81.9%, 100% {
    background-color: rgba(0, 0, 0, 0.68);
  }

  32.1%, 33.3%, 35.7%, 39.2%, 40.5%, 74.8%, 75.6%, 79.2%, 82.4%, 98.8% {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

/* Special parallax for map in Contacto */
.parallax-map {
  background-attachment: scroll; /* Maps don't work well with fixed */
  background-image: none !important;
}

.parallax-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.parallax-map::before {
  z-index: 5;
}

.parallax-map .parallax-title {
  z-index: 10;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .parallax-section {
    height: 100vh;
    background-size: cover;
    background-position: center;
  }

  .parallax-title {
    font-size: 3rem;
  }
}

/** ---------------------------------------------------------- */
/** ESTILOS DE COMPONENTE: FOOTER */
/** ---------------------------------------------------------- */
#footer {
  border-top: 4px solid var(--color-black);
  background-color: var(--color-surface);
  padding: 1.5rem 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-footer-text);
}

#footer .copyright {
  text-align: center;
  float: left;
}

#footer .credits {
  float: right;
  text-align: center;
  font-size: 13px;
  color: var(--color-footer-text);
  padding-right: 3%;
}

#footer .credits a {
  color: var(--khroma-color);
}

@media (max-width: 575px) {
  #footer .copyright, #footer .credits {
    float: none;
    -moz-text-align-last: center;
    text-align-last: center;
    padding: 3px 0;
  }
}