/* 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;
    }
}

/** ------------------------- */
/** FLOATING ACTIONS (social + Back to Top) */
/** ------------------------- */
.btn-floating-action {
    --float-size: 42px;
    --float-gap: 12px;
    --float-right: 30px;
    --float-bottom: 30px;
    --float-font: 1.4rem;
    --float-enter-delay: 0ms;
    --float-slide: calc(100% + var(--float-right) + 28px);
    position: fixed;
    right: var(--float-right);
    width: var(--float-size);
    height: var(--float-size);
    background-color: rgba(8, 8, 12, 0.85);
    color: var(--khroma-color);
    border: 2px solid rgba(var(--khroma-rgb), 0.95);
    border-radius: 0;
    box-shadow:
      3px 3px 0 rgba(var(--khroma-rgb), 0.95),
      0 0 6px rgba(var(--khroma-rgb), 0.75),
      0 0 12px rgba(var(--khroma-rgb), 0.55),
      0 0 16px rgba(var(--khroma-rgb), 0.4);
    font-size: var(--float-font);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    text-decoration: none;
    /* Fuera de pantalla a la derecha */
    transform: translateX(var(--float-slide));
    /* Mismos saltos cian↔magenta que .parallax-title-brand::after */
    animation: floating-action-glitch 5s steps(1, end) infinite;
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0s;
}

.btn-back-to-top {
    bottom: var(--float-bottom);
    --float-enter-delay: 0ms;
}

/* Redes: círculo, riel derecho centrado a lo alto */
.btn-floating-social {
    top: 50%;
    bottom: auto;
    border-radius: 50%;
    box-shadow:
      0 0 6px rgba(var(--khroma-rgb), 0.75),
      0 0 12px rgba(var(--khroma-rgb), 0.55),
      0 0 16px rgba(var(--khroma-rgb), 0.4);
    animation-name: floating-social-glitch;
}

/* Facebook → Instagram → WhatsApp, centrados en el eje vertical */
.btn-facebook-float {
    margin-top: calc(-1 * (var(--float-size) * 1.5 + var(--float-gap)));
    --float-enter-delay: 55ms;
}

.btn-instagram-float {
    margin-top: calc(-0.5 * var(--float-size));
    --float-enter-delay: 110ms;
}

.btn-whatsapp-float {
    margin-top: calc(0.5 * var(--float-size) + var(--float-gap));
    --float-enter-delay: 165ms;
}

.btn-floating-action.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: var(--float-enter-delay);
}

.btn-floating-action.visible:hover,
.btn-floating-action.visible:focus-visible {
    transform: translate(2px, 2px);
    transition-duration: 0.2s, 0.2s, 0.2s;
    transition-timing-function: ease, ease, ease;
    transition-delay: 0s;
}

.arrow-up {
    font-family: var(--font-handwritten);
    line-height: 1;
    text-shadow: 0 0 6px currentColor;
}

.btn-floating-social .bi {
    line-height: 1;
    text-shadow: 0 0 6px currentColor;
}

@keyframes floating-action-glitch {
  0%, 31.6%, 33.8%, 35.1%, 39.6%, 76.7%, 79.8%, 81.9%, 100% {
    color: var(--khroma-color);
    border-color: rgba(var(--khroma-rgb), 0.95);
    box-shadow:
      3px 3px 0 rgba(var(--khroma-rgb), 0.95),
      0 0 6px rgba(var(--khroma-rgb), 0.75),
      0 0 12px rgba(var(--khroma-rgb), 0.55),
      0 0 16px rgba(var(--khroma-rgb), 0.4);
  }

  32.1%, 33.3%, 35.7%, 39.2%, 40.5%, 74.8%, 75.6%, 79.2%, 82.4%, 98.8% {
    color: var(--khroma-secondary);
    border-color: rgba(var(--khroma-secondary-rgb), 0.95);
    box-shadow:
      3px 3px 0 rgba(var(--khroma-secondary-rgb), 0.95),
      0 0 6px rgba(var(--khroma-secondary-rgb), 0.75),
      0 0 12px rgba(var(--khroma-secondary-rgb), 0.55),
      0 0 16px rgba(var(--khroma-secondary-rgb), 0.4);
  }
}

@keyframes floating-social-glitch {
  0%, 31.6%, 33.8%, 35.1%, 39.6%, 76.7%, 79.8%, 81.9%, 100% {
    color: var(--khroma-color);
    border-color: rgba(var(--khroma-rgb), 0.95);
    box-shadow:
      0 0 6px rgba(var(--khroma-rgb), 0.75),
      0 0 12px rgba(var(--khroma-rgb), 0.55),
      0 0 16px rgba(var(--khroma-rgb), 0.4);
  }

  32.1%, 33.3%, 35.7%, 39.2%, 40.5%, 74.8%, 75.6%, 79.2%, 82.4%, 98.8% {
    color: var(--khroma-secondary);
    border-color: rgba(var(--khroma-secondary-rgb), 0.95);
    box-shadow:
      0 0 6px rgba(var(--khroma-secondary-rgb), 0.75),
      0 0 12px rgba(var(--khroma-secondary-rgb), 0.55),
      0 0 16px rgba(var(--khroma-secondary-rgb), 0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
    .btn-floating-action {
        transform: none;
        animation: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .btn-floating-action.visible {
        transform: none;
        transition-delay: 0s;
    }

    .btn-floating-action.visible:hover,
    .btn-floating-action.visible:focus-visible {
        transform: translate(2px, 2px);
    }
}

@media (max-width: 767px) {
    .btn-floating-action {
        --float-size: 35px;
        --float-gap: 10px;
        --float-right: 20px;
        --float-bottom: 20px;
        --float-font: 1.05rem;
    }
}

/** ------------------------- */
/** SKIP TYPEWRITER (Omitir) */
/** ------------------------- */
.btn-skip-typewriter {
    --float-right: 30px;
    --float-bottom: 30px;
    --float-slide: calc(100% + var(--float-right) + 28px);
    position: fixed;
    right: var(--float-right);
    bottom: var(--float-bottom);
    z-index: 1400;
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(8, 8, 12, 0.55);
    color: rgba(var(--khroma-secondary-rgb), 0.75);
    border: 1px solid rgba(var(--khroma-secondary-rgb), 0.45);
    border-radius: 0;
    box-shadow:
      -1px 1px 0 rgba(var(--khroma-secondary-rgb), 0.35),
      1px 1px 0 rgba(var(--khroma-rgb), 0.3),
      0 0 6px rgba(var(--khroma-secondary-rgb), calc(0.18 * var(--khroma-neon-intensity)));
    font-family: var(--font-special-elite);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(var(--float-slide));
    transition:
      opacity 0.35s ease,
      visibility 0.35s ease,
      transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
      box-shadow 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      background-color 0.2s ease;
}

.btn-skip-typewriter.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.btn-skip-typewriter.visible:hover,
.btn-skip-typewriter.visible:focus-visible {
    color: var(--khroma-color);
    background-color: rgba(8, 8, 12, 0.8);
    border-color: rgba(var(--khroma-rgb), 0.7);
    transform: translate(1px, 1px);
    transition-duration: 0.2s;
    transition-timing-function: ease;
    box-shadow:
      -1px 1px 0 rgba(var(--khroma-rgb), 0.55),
      1px 1px 0 rgba(var(--khroma-secondary-rgb), 0.45),
      0 0 10px rgba(var(--khroma-rgb), calc(0.28 * var(--khroma-neon-intensity)));
}

@media (prefers-reduced-motion: reduce) {
    .btn-skip-typewriter {
        transform: none;
        transition: opacity 0.2s ease, visibility 0.2s ease,
          box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .btn-skip-typewriter.visible {
        transform: none;
    }

    .btn-skip-typewriter.visible:hover,
    .btn-skip-typewriter.visible:focus-visible {
        transform: translate(1px, 1px);
    }
}

@media (max-width: 767px) {
    .btn-skip-typewriter {
        --float-right: 20px;
        --float-bottom: 20px;
        padding: 0.4rem 0.65rem;
        font-size: 0.6rem;
    }
}

/** ------------------------- */
/** 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,
.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,
.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 */
}

/** ---------------------------------------------------------- */
/** CLASES DE ANIMACIÓN AL SCROLL */
/** ---------------------------------------------------------- */
.animated-service {
    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,
.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;
    background-color: var(--color-black); /* Fallback mientras carga el iframe */
}

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

/* Mapa como fondo de la sección (detrás del overlay y la tarjeta) */
#contacto .map-background {
    z-index: 0;
}

.map-background iframe {
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none; /* Evita que el mapa capture el scroll del mouse */
    filter: grayscale(100%) brightness(0.75) contrast(1.05);
}

/* Tinte oscuro de marca sobre el mapa */
#contacto .map-overlay {
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55),
        rgba(0, 0, 0, 0.35) 35%,
        rgba(0, 0, 0, 0.75) 78%,
        var(--color-black) 100%
      ),
      linear-gradient(
        120deg,
        rgba(var(--khroma-secondary-rgb), 0.16),
        transparent 45%,
        rgba(var(--khroma-rgb), 0.16)
      );
}

.contact-card {
  position: relative;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  isolation: isolate;

  /* Animación de entrada */
  transition:
    transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 1s ease-in-out,
    border-color 0.35s ease,
    box-shadow 0.45s ease;
  opacity: 0;
  transform: translateY(100px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(var(--khroma-secondary-rgb), 0.12),
    0 18px 48px rgba(0, 0, 0, 0.45);
}

/* Marco neón bicolor (mismo lenguaje que btn-neon-corner) */
.contact-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(var(--khroma-rgb), calc(0.55 * var(--khroma-neon-intensity))),
    rgba(var(--khroma-secondary-rgb), calc(0.45 * var(--khroma-neon-intensity))),
    rgba(var(--khroma-rgb), calc(0.35 * var(--khroma-neon-intensity)))
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.45s ease;
  z-index: 1;
}

.contact-card.visible {
  opacity: 1;
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 24px rgba(var(--khroma-secondary-rgb), calc(0.18 * var(--khroma-neon-intensity))),
    0 0 48px rgba(var(--khroma-rgb), calc(0.12 * var(--khroma-neon-intensity))),
    0 22px 56px rgba(0, 0, 0, 0.55);
}

.contact-card.visible::before {
  opacity: 0.9;
}

.contact-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--khroma-rgb), 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 28px rgba(var(--khroma-secondary-rgb), calc(0.28 * var(--khroma-neon-intensity))),
    0 0 56px rgba(var(--khroma-rgb), calc(0.2 * var(--khroma-neon-intensity))),
    0 24px 60px rgba(0, 0, 0, 0.6);
}

.contact-card:hover::before {
  opacity: 1;
}

.contact-card > .row {
  position: relative;
  z-index: 2;
}

/* Separador vertical cyan→rosa */
.contact-card-aside {
  position: relative;
}

.contact-card-aside::after {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  right: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--khroma-secondary-rgb), 0.7),
    rgba(var(--khroma-rgb), 0.7),
    transparent
  );
}

.contact-card-intro {
  min-height: 100%;
}

.contact-card h2,
.contact-card h3,
.contact-card .contact-card-greeting {
  color: var(--color-white) !important;
}

.contact-card .contact-card-tagline {
  color: var(--khroma-color) !important;
  text-shadow:
    0 0 8px rgba(var(--khroma-rgb), calc(0.55 * var(--khroma-neon-intensity))),
    0 0 18px rgba(var(--khroma-rgb), calc(0.28 * var(--khroma-neon-intensity)));
}

.contact-card .contact-field-label,
.contact-card label {
  color: var(--khroma-secondary) !important;
  letter-spacing: 2px;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(var(--khroma-secondary-rgb), calc(0.35 * var(--khroma-neon-intensity)));
}

.contact-card .form-control {
  border: none !important;
  border-bottom: 2px solid var(--color-border-gray) !important;
  border-radius: 0;
  padding: 0.65rem 0;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-white);
  background-color: transparent;
  box-shadow: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-card textarea.form-control {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.45;
}

.contact-card .form-control:focus {
  box-shadow: 0 6px 18px -10px rgba(var(--khroma-rgb), calc(0.85 * var(--khroma-neon-intensity)));
  border-color: var(--khroma-color) !important;
  background-color: transparent;
  color: var(--color-white);
  outline: none;
}

.contact-card .form-control::placeholder {
  color: rgba(179, 179, 194, 0.45);
  font-weight: 500;
}

/* Autofill sobre superficie oscura */
.contact-card .form-control:-webkit-autofill,
.contact-card .form-control:-webkit-autofill:hover,
.contact-card .form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-white);
  caret-color: var(--color-white);
  transition: background-color 99999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px var(--color-surface) inset;
}

/* Mensajes de estado */
.contact-card .loading,
.contact-card .error-message,
.contact-card .sent-message {
  font-weight: 700;
  padding: 0.75rem 1rem;
  text-align: center;
  border: 1px solid var(--color-border-gray);
  border-radius: 2px;
}

.contact-card .loading {
  color: var(--color-white);
  background: var(--color-surface-alt);
  border-color: rgba(var(--khroma-secondary-rgb), 0.45);
}

.contact-card .error-message {
  color: var(--color-white);
  background: rgba(237, 60, 13, 0.18);
  border-color: var(--color-error);
}

.contact-card .sent-message {
  color: var(--color-white);
  background: rgba(24, 210, 110, 0.16);
  border-color: var(--color-success);
}

.contact-card .btn-pop-art:disabled {
  opacity: 0.65;
  cursor: wait;
  transform: none;
}

/** ---------------------------------------------------------- */
/** 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;
  }

  .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;
  }

  .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.boot-loading,
#preloader-overlay.lines-transition {
  z-index: 100001;
}

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

.preloader-progress {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

#preloader-overlay.boot-loading .preloader-progress {
  opacity: 1;
  visibility: visible;
}

.preloader-brand-text {
  margin: 0;
  font-size: clamp(1.35rem, 4.5vw, 2.5rem);
  letter-spacing: 0.14em;
  line-height: 1.2;
  white-space: nowrap;
}

.preloader-letter {
  color: var(--khroma-secondary);
  text-shadow:
    0 0 8px rgba(1, 159, 251, 0.85),
    0 0 16px rgba(1, 159, 251, 0.55);
  transition: color 0.18s ease, text-shadow 0.18s ease;
}

.preloader-letter-loaded {
  color: var(--khroma-color);
  text-shadow:
    0 0 8px rgba(253, 21, 114, 0.9),
    0 0 16px rgba(253, 21, 114, 0.6);
}

.preloader-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  margin-top: 0.85rem;
  max-width: min(92vw, 520px);
}

.preloader-percent {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.78);
  flex-shrink: 0;
}

.preloader-status-text {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}


/** ---------------------------------------------------------- */
/** 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-screen.boot-pending {
  visibility: hidden;
  pointer-events: none;
}

.intro-content {
  flex: 1;
  padding: 2rem;
  z-index: 1;
  position: relative;
}

.intro-hero-cluster {
  --intro-cluster-offset: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + var(--intro-cluster-offset)));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: min(92vw, 720px);
  z-index: 2;
  pointer-events: none;
  isolation: isolate;
}

/* Brand Title Animation */
.intro-brand {
  position: relative;
  top: auto;
  left: auto;
  margin: 0;
  font-size: 8rem;
  color: var(--color-white);
  transform: translateX(150%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}

.intro-brand.visible {
  transform: translateX(0) translateY(-50px);
  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: relative;
  top: auto;
  left: auto;
  width: 360px;
  max-width: 80vw;
  height: auto;
  margin: 0;
  z-index: 1;
  transform: translateY(-70px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 1s ease;
  will-change: transform, opacity;
  font-family: var(--font-logo);
}

@media (max-width: 768px) {
  .intro-hero-cluster {
    --intro-cluster-offset: 12px;
    width: min(94vw, 520px);
  }

  .intro-logo {
    width: 243px;
    max-width: 92vw;
  }
}

.intro-logo.visible {
  transform: translateY(50px) !important;
  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 {
  position: relative;
  background-color: var(--color-surface);
  padding: 1.5rem 0;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-footer-text);
}

/* Línea divisoria neón cyan→rosa (mismo lenguaje que la tarjeta de contacto) */
#footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(var(--khroma-secondary-rgb), calc(0.75 * var(--khroma-neon-intensity))),
    rgba(var(--khroma-rgb), calc(0.75 * var(--khroma-neon-intensity))),
    transparent
  );
  box-shadow:
    0 0 12px rgba(var(--khroma-secondary-rgb), calc(0.3 * var(--khroma-neon-intensity))),
    0 0 12px rgba(var(--khroma-rgb), calc(0.3 * var(--khroma-neon-intensity)));
}

#footer .footer-tagline {
  color: var(--color-text-muted);
}

#footer .footer-heading {
  color: var(--khroma-secondary);
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(var(--khroma-secondary-rgb), calc(0.35 * var(--khroma-neon-intensity)));
}

#footer .footer-bottom {
  border-top: 1px solid var(--color-border-gray);
}

#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;
  }
}

/** ---------------------------------------------------------- */
/** WeAreKhroma — Marcas, mejoras intro   */
/** ---------------------------------------------------------- */

.intro-hint {
  position: absolute;
  bottom: 4.25rem;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline: 1.25rem;
  box-sizing: border-box;
  text-align: center;
  z-index: 5;
  font-family: var(--font-special-elite);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  animation: intro-hint-pulse 2.4s ease-in-out 2.5s infinite;
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.intro-hint.visible {
  opacity: 1;
}

@keyframes intro-hint-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

.intro-subtitle {
  position: relative;
  top: auto;
  left: auto;
  margin: 0.35rem 0 0;
  transform: none;
  font-family: var(--font-special-elite);
  font-size: clamp(1.125rem, 3vw, 1.5rem);
  letter-spacing: 0.35em;
  color: var(--khroma-secondary);
  opacity: 0;
  transition: opacity 0.8s ease, letter-spacing 1s ease;
  white-space: nowrap;
  z-index: 2;
}

.intro-subtitle.visible {
  opacity: 0.9;
  letter-spacing: 0.45em;
}

#intro-screen {
  cursor: pointer;
}

#intro-screen:focus-visible {
  outline: 2px solid var(--khroma-secondary);
  outline-offset: -4px;
}

.intro-brand {
  font-size: clamp(3rem, 12vw, 8rem);
  letter-spacing: 0.02em;
  z-index: 2;
}

@media (max-width: 768px) {
  .intro-hero-cluster .intro-logo {
    width: 243px;
    max-width: 92vw;
  }

  .intro-hero-cluster .intro-logo.visible {
    transform: translateY(10px) !important;
  }

  .intro-hero-cluster .intro-brand {
    font-size: clamp(5.4rem, 21.6vw, 14.4rem);
  }
}

.brand-hashtag {
  display: inline-block;
  font-family: var(--font-special-elite);
  font-size: 0.9em;
  color: var(--khroma-secondary);
  margin-left: 0.15em;
}

/** ---------------------------------------------------------- */
/** GLASS / MICA + SPOTLIGHT AL CURSOR (tarjetas compartidas) */
/** ---------------------------------------------------------- */
#marcas .brand-card,
.portfolio-card,
.contact-card {
  --mx: 50%;
  --my: 50%;
  --glass-spot-size: 480px;
  /* Intensidad del halo: 0 en reposo, sube en hover (debajo de la mica) */
  --spot-cyan: 0;
  --spot-pink: 0;
  background:
    /* Capa mica / cristal (encima) */
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.03) 42%,
      rgba(1, 159, 251, 0.045) 100%
    ),
    /* Halo bajo la mica — sigue --mx / --my */
    radial-gradient(
      var(--glass-spot-size) circle at var(--mx) var(--my),
      rgba(var(--khroma-secondary-rgb), calc(var(--spot-cyan) * var(--khroma-neon-intensity))),
      rgba(var(--khroma-rgb), calc(var(--spot-pink) * var(--khroma-neon-intensity))) 42%,
      transparent 70%
    ),
    rgba(16, 16, 24, 0.52);
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: --spot-cyan 0.35s ease, --spot-pink 0.35s ease;
}

#marcas .brand-card:hover,
#marcas .brand-card:focus-visible,
.portfolio-card:hover,
.portfolio-card:focus-visible,
.contact-card:hover,
.contact-card:focus-visible {
  /* Más tenue que antes; se filtra bajo el velo mica */
  --spot-cyan: 0.12;
  --spot-pink: 0.06;
}

@media (prefers-reduced-motion: reduce) {
  #marcas .brand-card:hover,
  #marcas .brand-card:focus-visible,
  .portfolio-card:hover,
  .portfolio-card:focus-visible,
  .contact-card:hover,
  .contact-card:focus-visible {
    --spot-cyan: 0;
    --spot-pink: 0;
  }
}

/* Sección Marcas — mismo lenguaje neón que la tarjeta de contacto */
#marcas .brand-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 1.75rem 4rem 1.75rem 1.75rem;
  height: 100%;
  min-height: 210px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
}

/* Marco neón bicolor (sutil en reposo, encendido al hover) */
#marcas .brand-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(var(--khroma-rgb), calc(0.5 * var(--khroma-neon-intensity))),
    rgba(var(--khroma-secondary-rgb), calc(0.4 * var(--khroma-neon-intensity))),
    rgba(var(--khroma-rgb), calc(0.3 * var(--khroma-neon-intensity)))
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.3;
  transition: opacity 0.35s ease;
  z-index: 1;
}

#marcas .brand-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--khroma-rgb), 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 22px rgba(var(--khroma-secondary-rgb), calc(0.2 * var(--khroma-neon-intensity))),
    0 0 44px rgba(var(--khroma-rgb), calc(0.14 * var(--khroma-neon-intensity))),
    0 18px 42px rgba(0, 0, 0, 0.5);
}

#marcas .brand-card:hover::before,
#marcas .brand-card:focus-visible::before {
  opacity: 1;
}

#marcas .brand-card:focus-visible {
  outline: 2px solid var(--khroma-secondary);
  outline-offset: 4px;
  border-color: rgba(var(--khroma-rgb), 0.45);
}

.brand-card-summary {
  position: relative;
  z-index: 2;
}

.brand-card-soon {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 3;
  font-family: var(--font-special-elite);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--khroma-color);
  border: 1px solid rgba(var(--khroma-rgb), 0.55);
  background: rgba(0, 0, 0, 0.35);
  padding: 0.3rem 0.55rem;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(var(--khroma-rgb), calc(0.35 * var(--khroma-neon-intensity)));
}

.brand-card--soon .brand-card-desc {
  opacity: 0.85;
}

.brand-card-name {
  font-family: var(--font-logo);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  margin-bottom: 0.35rem;
  color: var(--color-white);
}

.brand-card-category {
  font-family: var(--font-special-elite);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--khroma-secondary);
  margin-bottom: 1rem;
  display: block;
  text-shadow: 0 0 10px rgba(var(--khroma-secondary-rgb), calc(0.35 * var(--khroma-neon-intensity)));
}

.brand-card-desc {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 0;
  line-height: 1.55;
}

.brand-card-chevron {
  position: absolute;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-gray);
  color: var(--khroma-secondary);
  z-index: 2;
  transition: color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#marcas .brand-card:hover .brand-card-chevron,
#marcas .brand-card:focus-visible .brand-card-chevron {
  color: var(--color-white);
  border-color: var(--khroma-color);
  background: rgba(var(--khroma-rgb), 0.18);
  transform: translateX(4px);
}

.brand-card-services {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.brand-card-services li {
  padding: 0.2rem 0;
  padding-left: 1rem;
  position: relative;
}

.brand-card-services li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--khroma-color);
  font-size: 0.75rem;
}

.brand-card-note {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-border-gray);
  font-family: var(--font-handwritten);
  font-size: 1rem;
  color: var(--khroma-color);
}

.brand-card-cta {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--khroma-secondary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.brand-card-cta:hover {
  color: var(--khroma-color);
}

body.brand-dialog-open {
  overflow: hidden;
}

.brand-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.brand-dialog-backdrop {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: rgba(3, 3, 7, 0);
  backdrop-filter: blur(0);
  transition: background-color 0.4s ease, backdrop-filter 0.4s ease;
}

.brand-dialog-panel {
  --brand-origin-x: 0px;
  --brand-origin-y: 0px;
  --brand-origin-scale-x: 0.25;
  --brand-origin-scale-y: 0.25;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: clamp(2rem, 5vw, 5rem);
  padding-right: clamp(2rem, 6vw, 6rem);
  border: 1px solid rgba(var(--khroma-rgb), 0.35);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(var(--khroma-rgb), 0.08), transparent 42%),
    rgba(19, 18, 28, 0.96);
  box-shadow:
    0 0 26px rgba(var(--khroma-rgb), calc(0.22 * var(--khroma-neon-intensity))),
    0 0 52px rgba(var(--khroma-secondary-rgb), calc(0.14 * var(--khroma-neon-intensity))),
    0 24px 60px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform-origin: top left;
  transform:
    translate(var(--brand-origin-x), var(--brand-origin-y))
    scale(var(--brand-origin-scale-x), var(--brand-origin-scale-y));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease,
    box-shadow 0.45s ease;
  will-change: transform, opacity;
}

.brand-dialog.is-visible .brand-dialog-backdrop {
  background: rgba(3, 3, 7, 0.84);
  backdrop-filter: blur(7px);
}

.brand-dialog.is-visible .brand-dialog-panel {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.brand-dialog-close {
  position: absolute;
  top: clamp(1.25rem, 3vw, 2rem);
  right: clamp(1.25rem, 3vw, 2rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-gray);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.24);
  color: var(--color-white);
  font-size: 1.1rem;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.25s ease;
}

.brand-dialog-close:hover,
.brand-dialog-close:focus-visible {
  color: var(--khroma-secondary);
  border-color: var(--khroma-color);
  transform: rotate(5deg);
}

.brand-dialog-close:focus-visible {
  outline: 2px solid var(--khroma-secondary);
  outline-offset: 3px;
}

.brand-dialog-content {
  max-width: 860px;
}

.brand-dialog-content .brand-card-summary {
  max-width: 720px;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.brand-dialog-content .brand-card-name {
  font-size: clamp(4rem, 11vw, 8rem);
  margin-bottom: 0.65rem;
}

.brand-dialog-content .brand-card-category {
  font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  margin-bottom: 1.5rem;
}

.brand-dialog-content .brand-card-desc {
  max-width: 680px;
  color: var(--color-white);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.brand-dialog-description {
  max-width: 760px;
  margin: 0 0 2rem;
  color: var(--color-text-muted);
  font-size: clamp(1rem, 1.8vw, 1.18rem);
  line-height: 1.75;
}

.brand-dialog-content .brand-card-services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 2rem;
  max-width: 760px;
  font-size: 1rem;
}

.brand-dialog-content .brand-card-services li {
  padding-block: 0.45rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-dialog-content .brand-card-note {
  max-width: 760px;
  margin-top: 2rem;
}

.brand-dialog-content .brand-card-cta {
  padding: 0.65rem 0;
}

/** ---------------------------------------------------------- */
/** SKIN MODAL — LYNK (marketing home product look) */
/** Extensible: .brand-dialog--{marca} vía data-brand */
/** ---------------------------------------------------------- */
.brand-dialog--lynk {
  --lynk-electric: #2563ff;
  --lynk-electric-hover: #1b52e6;
  --lynk-deep: #4338ff;
  --lynk-navy: #0e0c2a;
  --lynk-navy-deep: #090820;
  --lynk-surface: #141235;
  --lynk-text: #f2f3ff;
  --lynk-muted: #9490c8;
  --lynk-border: rgba(255, 255, 255, 0.1);
  --font-lynk-display: 'Space Grotesk', 'Inter', sans-serif;
}

.brand-dialog--lynk.is-visible .brand-dialog-backdrop {
  background:
    radial-gradient(ellipse 70% 55% at 20% 15%, rgba(37, 99, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 80%, rgba(67, 56, 255, 0.18), transparent 50%),
    rgba(9, 8, 32, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.brand-dialog--lynk .brand-dialog-panel {
  border: 1px solid var(--lynk-border);
  border-radius: 1.25rem;
  background:
    radial-gradient(ellipse 80% 60% at 10% 0%, rgba(37, 99, 255, 0.12), transparent 50%),
    var(--lynk-surface);
  box-shadow: 0 24px 80px rgba(9, 8, 32, 0.45);
  color: var(--lynk-text);
}

.brand-dialog--lynk .brand-dialog-close {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: var(--lynk-text);
  transform: none;
}

.brand-dialog--lynk .brand-dialog-close:hover,
.brand-dialog--lynk .brand-dialog-close:focus-visible {
  color: var(--lynk-text);
  border-color: rgba(37, 99, 255, 0.55);
  background: rgba(37, 99, 255, 0.18);
  transform: none;
  outline: none;
}

.brand-dialog--lynk .brand-dialog-close:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 255, 0.35);
}

.brand-dialog--lynk .brand-dialog-content .brand-card-name {
  font-family: var(--font-lynk-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: transparent;
  background: linear-gradient(115deg, var(--lynk-electric) 0%, var(--lynk-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-category {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lynk-electric);
  text-shadow: none;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-desc,
.brand-dialog--lynk .brand-dialog-description {
  font-family: var(--font-body);
  color: var(--lynk-muted);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
  max-width: 40rem;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  max-width: none;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-services li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--lynk-text);
  padding: 0.5rem 1rem;
  border: 1px solid var(--lynk-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  padding-left: 1rem;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-services li::before {
  content: none;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-note {
  font-family: var(--font-lynk-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--lynk-muted);
  border-top: 1px solid var(--lynk-border);
  padding-top: 1.25rem;
  margin-top: 2rem;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.25rem;
  padding: 0.85rem 1.65rem;
  border-radius: 999px;
  border: none;
  background: var(--lynk-electric);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 0 0 rgba(37, 99, 255, 0.4);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.brand-dialog--lynk .brand-dialog-content .brand-card-cta:hover,
.brand-dialog--lynk .brand-dialog-content .brand-card-cta:focus-visible {
  background: var(--lynk-electric-hover);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(37, 99, 255, 0.28);
  outline: none;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .brand-dialog--lynk .brand-dialog-panel {
    border-radius: 1rem;
    box-shadow: 0 20px 60px rgba(9, 8, 32, 0.5);
  }

  .brand-dialog--lynk .brand-dialog-content .brand-card-services {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  #marcas .brand-card {
    min-height: 190px;
  }

  .brand-dialog-backdrop {
    padding: 0.75rem;
  }

  .brand-dialog-panel {
    width: 100%;
    height: 100%;
    padding: 4.5rem 1.5rem 2rem;
    box-shadow: 8px 8px 0 rgba(var(--khroma-rgb), 0.2);
  }

  .brand-dialog-content .brand-card-summary {
    margin-bottom: 2.25rem;
  }

  .brand-dialog-content .brand-card-services {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #marcas .brand-card,
  .brand-card-chevron,
  .brand-dialog-backdrop,
  .brand-dialog-panel {
    transition-duration: 0.01ms !important;
  }
}

/* Portafolio — grid Isotope + estilo neón */
#portfolio {
  background-color: var(--color-black);
}

.portfolio-filters {
  margin: 0;
  padding: 0;
}

.portfolio-filter {
  font-family: var(--font-special-elite);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-gray);
  background: var(--color-surface);
  padding: 0.55rem 1rem;
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.portfolio-filter:hover,
.portfolio-filter:focus-visible {
  color: var(--color-white);
  border-color: rgba(var(--khroma-secondary-rgb), 0.65);
  outline: none;
}

.portfolio-filter.is-active {
  color: var(--color-white);
  border-color: rgba(var(--khroma-rgb), 0.7);
  background: rgba(var(--khroma-rgb), 0.12);
  box-shadow:
    0 0 14px rgba(var(--khroma-rgb), calc(0.28 * var(--khroma-neon-intensity))),
    0 0 18px rgba(var(--khroma-secondary-rgb), calc(0.16 * var(--khroma-neon-intensity)));
}

.portfolio-grid {
  /* Isotope maneja el layout; mantenemos el row de Bootstrap para gutters */
}

.portfolio-item {
  margin-bottom: 0;
}

.portfolio-card {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.35s ease;
}

.portfolio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(var(--khroma-rgb), calc(0.55 * var(--khroma-neon-intensity))),
    rgba(var(--khroma-secondary-rgb), calc(0.45 * var(--khroma-neon-intensity)))
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 3;
}

.portfolio-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-placeholder);
}

.portfolio-card-media--tall {
  aspect-ratio: 3 / 4;
}

.portfolio-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
  filter: saturate(0.92) brightness(0.92);
}

.portfolio-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88) 0%,
    rgba(0, 0, 0, 0.45) 42%,
    transparent 72%
  );
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.portfolio-card-brand {
  font-family: var(--font-special-elite);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--khroma-secondary);
  text-shadow: 0 0 10px rgba(var(--khroma-secondary-rgb), calc(0.4 * var(--khroma-neon-intensity)));
  margin-bottom: 0.35rem;
}

.portfolio-card-title {
  font-family: var(--font-special-elite);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--color-white);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}

.portfolio-card-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--khroma-color);
  letter-spacing: 0.04em;
}

.portfolio-card:hover,
.portfolio-card:focus-visible {
  transform: translateY(-5px);
  border-color: rgba(var(--khroma-rgb), 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 22px rgba(var(--khroma-secondary-rgb), calc(0.18 * var(--khroma-neon-intensity))),
    0 0 40px rgba(var(--khroma-rgb), calc(0.14 * var(--khroma-neon-intensity))),
    0 18px 40px rgba(0, 0, 0, 0.5);
  outline: none;
}

.portfolio-card:hover::before,
.portfolio-card:focus-visible::before {
  opacity: 1;
}

.portfolio-card:hover .portfolio-card-img,
.portfolio-card:focus-visible .portfolio-card-img {
  transform: scale(1.06);
  filter: saturate(1.05) brightness(1);
}

.portfolio-card:hover .portfolio-card-overlay,
.portfolio-card:focus-visible .portfolio-card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Descripciones ocultas: las lee GLightbox vía selector */
.glightbox-desc {
  display: none;
}

/* Lightbox GLightbox — tema oscuro Khroma */
.glightbox-clean .gslide-description {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-gray);
}

.glightbox-clean .gdesc-inner {
  padding: 1.25rem 1.5rem;
}

.glightbox-clean .gslide-title {
  font-family: var(--font-special-elite);
  color: var(--color-white) !important;
  font-size: 1.15rem !important;
  margin-bottom: 0.5rem !important;
}

.glightbox-clean .gslide-desc {
  color: var(--color-text-muted) !important;
  font-family: var(--font-body);
  font-size: 0.95rem !important;
  line-height: 1.55;
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
  background: rgba(8, 8, 12, 0.85);
  border: 1px solid rgba(var(--khroma-secondary-rgb), 0.55);
  color: var(--khroma-secondary);
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
  border-color: rgba(var(--khroma-rgb), 0.75);
  color: var(--khroma-color);
}

@media (max-width: 767px) {
  .portfolio-filter {
    font-size: 0.7rem;
    padding: 0.45rem 0.75rem;
  }

  .portfolio-card-overlay {
    opacity: 1;
    transform: none;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.9) 0%,
      rgba(0, 0, 0, 0.35) 55%,
      transparent 80%
    );
  }
}

.animated-brand {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.ecosystem-lead {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

@media (prefers-reduced-motion: reduce) {
  .intro-hint,
  .bg-text-line,
  .ticker-track {
    animation: none !important;
  }

  .animated-brand,
  .animated-service,
  .animated-project {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  #intro-screen.fade-out {
    transition-duration: 0.15s;
  }
}

@media (max-width: 768px) {
  .intro-hint {
    bottom: 3.75rem;
    font-size: calc(0.85rem * 0.9);
    padding-inline: 1rem;
  }

  #nosotros .nosotros-cta {
    display: flex;
    justify-content: center;
    text-align: center;
  }
}

/** Banner ticker de submarcas — intro */
.intro-brands-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  z-index: 3;
  border-top: 3px solid var(--color-black);
  background: linear-gradient(
    90deg,
    rgba(16, 16, 24, 0.98) 0%,
    rgba(23, 23, 33, 0.99) 50%,
    rgba(16, 16, 24, 0.98) 100%
  );
  box-shadow:
    0 -4px 24px rgba(253, 21, 114, 0.12),
    0 -2px 0 rgba(1, 159, 251, 0.35);
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  box-sizing: border-box;
}

.intro-brands-ticker.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-brands-ticker-viewport {
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  padding: 0.55rem 0;
}

.intro-brands-ticker-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  padding-left: 0;
  animation: intro-brands-scroll 50s linear infinite;
  will-change: transform;
}

.intro-brands-ticker-line {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(0.62rem, 1.6vw, 0.78rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
}

.intro-ticker-group {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.intro-ticker-brand {
  text-shadow:
    -0.05em 0 0 var(--khroma-secondary),
    0.05em 0 0 var(--khroma-color),
    0 0 10px rgba(1, 159, 251, 0.35),
    0 0 10px rgba(253, 21, 114, 0.35);
}

.intro-ticker-dot {
  color: var(--color-text-muted);
  opacity: 0.55;
  font-size: 0.95em;
  letter-spacing: 0;
  text-shadow: none;
}

.intro-ticker-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  margin: 0 1rem;
  flex-shrink: 0;
}

.divider-star {
  width: 0.55rem;
  height: 0.55rem;
  transform: rotate(45deg);
  border: 1px solid var(--color-black);
}

.divider-star-cyan {
  background: var(--khroma-secondary);
  box-shadow:
    0 0 6px rgba(1, 159, 251, 0.85),
    2px 2px 0 rgba(0, 0, 0, 0.5);
}

.divider-star-magenta {
  background: var(--khroma-color);
  box-shadow:
    0 0 6px rgba(253, 21, 114, 0.85),
    2px 2px 0 rgba(0, 0, 0, 0.5);
}

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

@media (prefers-reduced-motion: reduce) {
  .intro-brands-ticker-track {
    animation: none;
    display: block;
    text-align: center;
    width: 100%;
  }

  .intro-brands-ticker-line + .intro-brands-ticker-line {
    display: none;
  }

  .intro-brands-ticker-line {
    white-space: normal;
    line-height: 1.6;
    flex-wrap: wrap;
    justify-content: center;
  }

  .intro-ticker-divider {
    margin: 0 0.5rem;
  }
}