/* ══════════════════════════════════════════════════
   VARIABLES
══════════════════════════════════════════════════ */
:root {
    --bg-0: #0c0a08;
    --bg-1: #131109;
    --bg-2: #1a1712;
    --bg-3: #22201a;
    --bg-4: #2a2720;

    --gold: #d4aa6a;
    --gold-dim: #a07f48;
    --gold-bright: #e8c585;
    --gold-glow: rgba(212, 170, 106, .18);
    --gold-sm: rgba(212, 170, 106, .08);

    --terra: #c4674a;
    --dc-blue: #7289da;
    --dc-blue-sm: rgba(114, 137, 218, .1);

    --txt-0: #f0ebe0;
    --txt-1: #b0a291;
    --txt-2: #786a58;
    --txt-3: #4a3f30;

    --green: #00ff22;

    --borde: rgba(212, 170, 106, .12);
    --borde-hover: rgba(212, 170, 106, .32);
    --borde-card: rgba(212, 170, 106, .06);

    --f-display: 'Syne', sans-serif;
    --f-body: 'Inter', sans-serif;
    --f-mono: 'JetBrains Mono', monospace;

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-xl: 30px;

    --t-fast: .2s cubic-bezier(.4, 0, .2, 1);
    --t-med: .4s cubic-bezier(.4, 0, .2, 1);
    --t-slow: .7s cubic-bezier(.4, 0, .2, 1);
    --t-spring: .5s cubic-bezier(.34, 1.56, .64, 1);
}

/* ══════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: auto;
}

body {
    font-family: var(--f-body);
    background: var(--bg-0);
    color: var(--txt-0);
    line-height: 1.65;
    overflow-x: hidden;
    cursor: none !important;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: none !important;
}

button,
select {
    font-family: var(--f-body);
    border: none;
    cursor: none !important;
}

/* FIX: ocultar el cursor nativo de Windows en TODOS los campos de formulario
   (inputs, textareas, labels, opciones) para que solo se vea el personalizado */
input,
textarea,
label,
option,
optgroup {
    cursor: none !important;
}

/* Dropdowns personalizados también */
.custom-dropdown,
.custom-dropdown-wrap,
.dropdown-header,
.dropdown-list,
.dropdown-item {
    cursor: none !important;
}

::selection {
    background: var(--gold-sm);
    color: var(--gold-bright);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
}

.green {
    color: var(--green);
}

/* ══════════════════════════════════════════════════
   CURSOR
══════════════════════════════════════════════════ */
.cursor {
    position: fixed;
    top: -1px;
    left: -1px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4aa6a' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M1 1l16 7-7 2-4 9z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 2147483647 !important;
    pointer-events: none !important;
    transition: filter .15s;
    will-change: transform;
}

.cursor-follower {
    display: none !important;
    z-index: 2147483647 !important;
    pointer-events: none !important;
}

body.cursor-hover .cursor {
    filter: drop-shadow(0 0 8px rgba(212, 170, 106, 0.8)) brightness(1.2);
}

/* ══════════════════════════════════════════════════
   PROGRESS BAR
══════════════════════════════════════════════════ */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--terra));
    z-index: 9997;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000000;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity .4s, transform .5s cubic-bezier(.4, 0, .2, 1), background .3s, box-shadow .3s;
}

.nav.visible {
    opacity: 1;
    transform: translateY(0);
}

.nav.scrolled {
    background: rgba(12, 10, 8, .9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--borde);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .4);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.nav-logo {
    font-family: var(--f-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--txt-0);
    flex-shrink: 0;
    transition: opacity var(--t-fast);
}

.nav-logo span {
    color: var(--gold);
}

.nav-logo:hover {
    opacity: .8;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: .1rem;
}

/* Item de nav con dropdown */
.nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

/* Dropdown de servicios */
.nav-dropdown {
    position: absolute;
    top: calc(100% + .5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 210px;
    background: rgba(19, 17, 9, .95);
    border: 1px solid var(--borde-hover);
    border-radius: var(--r-md);
    padding: .5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
    z-index: 200;
}

.nav-dropdown::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 6px;
    background: var(--borde-hover);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Puente invisible para mantener el hover */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 15px;
    background: transparent;
}

.nav-item:hover .nav-dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .85rem;
    border-radius: var(--r-sm);
    font-size: .8rem;
    font-weight: 500;
    color: var(--txt-1);
    transition: background var(--t-fast), color var(--t-fast);
    cursor: none !important;
    text-decoration: none;
}


.nav-dropdown-item:hover {
    background: rgba(212, 170, 106, .08);
    color: var(--txt-0);
}

.nav-dropdown-item i {
    width: 1.4rem;
    text-align: center;
    font-size: .85rem;
    color: var(--gold);
    flex-shrink: 0;
}

.nav-dropdown-item.dc-item i {
    color: var(--dc-blue);
}

.nav-dropdown-item.srv-item i {
    color: #5ee87a;
}

.nav-dropdown-sep {
    height: 1px;
    background: var(--borde);
    margin: .3rem .4rem;
}

.nav-link {
    font-size: .8rem;
    font-weight: 500;
    color: var(--txt-1);
    padding: .45rem .8rem;
    border-radius: 8px;
    transition: all var(--t-fast);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    right: 50%;
    height: 1.5px;
    background: var(--gold);
    border-radius: 2px;
    transition: left var(--t-fast), right var(--t-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--txt-0);
    background: rgba(212, 170, 106, .07);
}

.nav-link.active::after,
.nav-link:hover::after {
    left: .8rem;
    right: .8rem;
}

/* Botón Volver en Nav */
.nav-back-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--txt-2);
    padding: .35rem .7rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--borde);
    background: rgba(12, 10, 8, .5);
    margin-left: 1rem;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    cursor: none !important;
    text-decoration: none;
}

.nav-back-btn:hover {
    color: var(--txt-0);
    border-color: var(--borde-hover);
    background: rgba(212, 170, 106, .1);
}

.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: none !important;
    padding: 0;
    z-index: 2147483646;
    flex-shrink: 0;
}

.nav-toggle span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: var(--txt-0);
    border-radius: 2px;
    transition: transform var(--t-med), opacity var(--t-med), background var(--t-fast);
    transform-origin: center;
}

/* ══════════════════════════════════════════════════
   FIX: MENÚ HAMBURGUESA FIJO ARRIBA A LA DERECHA
══════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Despegamos el botón del flujo normal y lo forzamos arriba a la derecha */
    .nav-toggle {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 2147483646 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        border-radius: 12px !important;

        /* Un fondito para que resalte sobre cualquier contenido */
        background: rgba(12, 10, 8, 0.75) !important;
        border: 1px solid rgba(212, 170, 106, 0.25) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    /* Como el botón ahora flota, evitamos que el nav-container intente "acomodarlo" a la izquierda */
    .nav-container {
        justify-content: space-between !important;
    }
}

/* Forzamos el header para que nada lo tape */
header,
.navbar,
.nav-container {
    position: relative !important;
    z-index: 999999 !important;
}

@media (max-width: 900px) {

    /* El botón específico a la derecha de todo */
    .nav-toggle,
    #menu-hamburguesa {
        /* Ajustá el nombre de la clase a la que uses vos */
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        z-index: 9999999 !important;
        /* Un poco menos que el cursor, pero más que todo lo demás */
        display: flex !important;
    }
}

/* Las 3 líneas se posicionan con calc para converger exactamente en el centro */
.nav-toggle span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 8px));
}

.nav-toggle span:nth-child(2) {
    transform: translate(-50%, -50%);
}

.nav-toggle span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 8px));
}

/* Al abrir: las 3 líneas convergen al centro (50% 50%) y rotan ahí */
.nav-toggle.open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
}

.nav-toggle.open span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: min(300px, 85vw);
    height: 100dvh;
    background: var(--bg-2);
    border-left: 1px solid var(--borde);
    z-index: 999999;
    transform: translateX(100%);
    transition: transform var(--t-slow);
    display: flex;
    align-items: center;
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-inner {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    width: 100%;
}

.mobile-logo {
    font-family: var(--f-display);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--txt-0);
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: opacity var(--t-fast);
}

.mobile-logo span {
    color: var(--gold);
}

.mobile-logo:hover {
    opacity: .8;
}

.mobile-link {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt-1);
    display: inline-block;
    transition: color var(--t-fast), transform var(--t-fast);
}

.mobile-link:hover {
    color: var(--gold);
    transform: translateX(6px);
}

.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999998;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med);
    backdrop-filter: blur(4px);
}

.mobile-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ══════════════════════════════════════════════════
   NAV DE PÁGINAS DE SERVICIO (body.srv-page)
   Solo hamburguesa top-left en TODOS los breakpoints.
   Al hacer scroll le aparece el fondito; al abrir,
   la X queda por encima del drawer (z-index).
══════════════════════════════════════════════════ */
body.srv-page .nav-container {
    justify-content: flex-start;
    padding: 0;
}

/* Sin logo, sin botón volver, sin links de desktop */
body.srv-page .nav-logo,
body.srv-page .nav-back-btn,
body.srv-page .nav-links {
    display: none !important;
}

/* Hamburguesa siempre visible, top-left, con fondito al scrollear */
body.srv-page .nav-toggle {
    display: block;
    width: 66px;
    height: 66px;
    border-bottom-right-radius: var(--r-md);
    transition: background .3s, backdrop-filter .3s, box-shadow .3s;
}

body.srv-page .nav.scrolled .nav-toggle {
    background: rgba(12, 10, 8, .9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, .4);
}

/* El nav queda por encima del menú => la X siempre se ve */
body.srv-page .nav {
    z-index: 1000000;
}

/* Drawer izquierdo (concuerda con hamburguesa a la izquierda) */
body.srv-page .mobile-menu {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    border-left: none;
    border-right: 1px solid var(--borde);
}

body.srv-page .mobile-menu.open {
    transform: translateX(0);
}

/* Espacio arriba para que la X no tape el primer item */
body.srv-page .mobile-menu-inner {
    padding-top: 6rem;
}

/* Botón "Volver al portfolio" dentro del menú */
.mobile-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--txt-2);
    padding: .6rem .75rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--borde);
    background: rgba(12, 10, 8, .4);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    margin-bottom: 1.25rem;
    width: fit-content;
}

.mobile-back:hover {
    color: var(--gold);
    border-color: var(--borde-hover);
    background: rgba(212, 170, 106, .06);
}

.mobile-back i {
    font-size: .8rem;
}

/* Sub-links de servicios en mobile */
.mobile-servicios-wrap {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.mobile-servicios-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: none !important;
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--txt-1);
    transition: color var(--t-fast);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 0;
}

.mobile-servicios-toggle:hover {
    color: var(--gold);
}

.mobile-servicios-toggle .toggle-arrow {
    font-size: .9rem;
    transition: transform var(--t-med);
    color: var(--txt-3);
    flex-shrink: 0;
}

.mobile-servicios-toggle.open .toggle-arrow {
    transform: rotate(90deg);
    color: var(--gold);
}

.mobile-sub-links {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, opacity .3s ease;
    opacity: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--borde);
    margin-left: .25rem;
}

.mobile-sub-links.open {
    max-height: 250px;
    opacity: 1;
}

.mobile-sub-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .95rem;
    font-weight: 500;
    color: var(--txt-2);
    padding: .5rem .5rem;
    transition: color var(--t-fast), transform var(--t-fast);
    cursor: none !important;
}

.mobile-sub-link:hover {
    color: var(--gold);
    transform: translateX(4px);
}

.mobile-sub-link i {
    font-size: .8rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════
   CONTAINER & SECCIONES
══════════════════════════════════════════════════ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.seccion {
    padding: 8rem 0;
    position: relative;
}

.sobre-mi,
.proyectos {
    background: var(--bg-1);
}

.servicios,
.tecnologias,
.contacto {
    background: var(--bg-0);
}

.seccion-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 5rem;
}

.seccion-num {
    font-family: var(--f-display);
    font-size: .72rem;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: .18em;
    opacity: .65;
    flex-shrink: 0;
}

.seccion-titulo {
    font-family: var(--f-display);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: -0.03em;
    flex-shrink: 1;
    overflow-wrap: break-word;
}

.seccion-linea {
    flex: 1;
    min-width: 20px;
    height: 1px;
    background: linear-gradient(to right, var(--borde), transparent);
    transform-origin: left center;
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.5rem;
    border-radius: var(--r-md);
    font-size: .875rem;
    font-weight: 600;
    cursor: none !important;
    transition: all var(--t-med);
    letter-spacing: .01em;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .06);
    opacity: 0;
    transition: opacity var(--t-fast);
}

.btn:hover::after {
    opacity: 1;
}

.btn-primary {
    background: var(--gold);
    color: var(--bg-0);
    font-weight: 700;
}

.btn-primary:hover {
    background: var(--gold-bright);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212, 170, 106, .35);
}

.btn-ghost {
    background: transparent;
    color: var(--txt-0);
    border: 1px solid var(--borde-hover);
}

.btn-ghost:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(212, 170, 106, .12);
}

.proyecto-nombre .dolar {
    color: #60a5fa;
}

.proyecto-nombre .ctd {
    color: #f59e0b;
}

.dp-brand .dolar {
    color: #60a5fa;
    /* Azul */
}

.dp-brand .ctd {
    color: #f59e0b;
    /* Dorado CTD */
}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 8rem 2rem 7rem;
}

.hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0;
    will-change: transform, opacity;
    animation: orbFloat 22s ease-in-out infinite;
}

.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(212, 170, 106, .14), transparent 65%);
    top: -200px;
    left: -100px;
}

.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(196, 103, 74, .11), transparent 65%);
    bottom: -150px;
    right: -80px;
    animation-direction: reverse;
    animation-delay: -7s;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(212, 170, 106, .07), transparent 65%);
    top: 45%;
    right: 15%;
    animation-delay: -12s;
}

@keyframes orbFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(40px, -50px) scale(1.06);
    }

    66% {
        transform: translate(-25px, 30px) scale(.94);
    }
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(212, 170, 106, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 170, 106, .04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 80%);
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: .025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px;
    pointer-events: none;
}

.particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--gold);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat var(--dur, 8s) ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }

    15% {
        opacity: .6;
    }

    85% {
        opacity: .3;
    }

    100% {
        transform: translateY(-120px) scale(.4);
        opacity: 0;
    }
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1.1rem;
    border-radius: 100px;
    border: 1px solid var(--borde-hover);
    background: rgba(212, 170, 106, .06);
    font-size: .78rem;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: .03em;
    margin-bottom: 2.25rem;
    opacity: 0;
    transform: translateY(16px);
}

.badge-dot {
    width: 7px;
    height: 7px;
    background: #5ee87a;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulseDot 2.2s ease infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(94, 232, 122, .5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(94, 232, 122, 0);
    }
}

.hero-title {
    font-family: var(--f-display);
    font-size: clamp(5rem, 15vw, 10rem);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -0.05em;
    margin-bottom: 1.75rem;
}

.hero-line {
    display: block;
    overflow: hidden;
}

.word {
    display: inline-block;
    color: var(--txt-0);
    transform: translateY(110%);
    will-change: transform;
}

.word.gold {
    color: var(--gold);
}

/* ROL con 3 items que rotan */
.hero-rol {
    font-family: var(--f-display);
    font-size: clamp(.9rem, 2vw, 1.15rem);
    font-weight: 500;
    color: var(--txt-1);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.rol-sep {
    color: var(--txt-3);
}

.rol-item {
    transition: color var(--t-med);
}

.rol-item.active {
    color: var(--gold);
}

.hero-desc {
    font-size: clamp(.95rem, 1.5vw, 1.1rem);
    color: var(--txt-1);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    margin-bottom: 3rem;
}

/* Hero stats */
.hero-stats {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: .875rem 2rem;
    gap: 0;
    opacity: 0;
    transform: translateY(20px);
}

.hs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: 0 1.25rem;
}

.hs-num {
    font-family: var(--f-display);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}

.hs-label {
    font-size: .68rem;
    color: var(--txt-2);
    white-space: nowrap;
}

.hs-sep {
    width: 1px;
    height: 32px;
    background: var(--borde);
    flex-shrink: 0;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    opacity: 0;
}

.scroll-line {
    width: 1px;
    height: 52px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2.2s ease-in-out infinite;
}

@keyframes scrollPulse {
    0% {
        transform: scaleY(0);
        transform-origin: top;
        opacity: 1;
    }

    49% {
        transform: scaleY(1);
        transform-origin: top;
        opacity: 1;
    }

    50% {
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
        opacity: .3;
    }
}

.scroll-indicator span {
    font-size: .6rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--txt-2);
}

/* ══════════════════════════════════════════════════
   TICKER
══════════════════════════════════════════════════ */
.ticker-wrap {
    background: var(--bg-1);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    overflow: hidden;
    padding: .85rem 0;
    position: relative;
    width: 100%;
}

.ticker-wrap::before,
.ticker-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
}

.ticker-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-1), transparent);
}

.ticker-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-1), transparent);
}

.ticker-track {
    display: flex;
    /* Cambiamos a flex */
    align-items: center;
    width: max-content;
    /* El track mide exactamente lo que ocupan sus elementos */
    animation: tickerMove 30s linear infinite;
    will-change: transform;
    /* Optimizamos para GPU */
}

.ticker-track span {
    font-family: var(--f-display);
    font-size: .8rem;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: color var(--t-fast);
    margin-right: 1.5rem;
}

.ticker-track span:hover {
    color: var(--gold);
}

.ticker-sep {
    color: var(--gold) !important;
    opacity: .5;
}

@keyframes tickerMove {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ══════════════════════════════════════════════════
   SOBRE MÍ
══════════════════════════════════════════════════ */
.sobre-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5.5rem;
    align-items: center;
}

.sobre-texto p {
    color: var(--txt-1);
    line-height: 1.85;
    margin-bottom: 1.25rem;
    font-size: .975rem;
}

.sobre-intro {
    font-size: 1.1rem !important;
    color: var(--txt-0) !important;
}

.sobre-texto strong {
    color: var(--gold);
    font-weight: 600;
}

.ctd-acronym {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--borde);
}

.ctd-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin-top: 1rem;
}

.ctd-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    transition: all var(--t-spring);
    cursor: none !important;
    position: relative;
    overflow: hidden;
}

.ctd-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold-sm), transparent);
    opacity: 0;
    transition: opacity var(--t-fast);
}

.ctd-card:hover {
    border-color: var(--borde-hover);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

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

.ctd-letra {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ctd-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    position: relative;
    z-index: 1;
}

.ctd-word {
    font-size: .85rem;
    font-weight: 600;
    color: var(--txt-0);
}

.ctd-desc {
    font-size: .7rem;
    color: var(--txt-2);
    line-height: 1.3;
}

.hobbies {
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--borde);
}

.hobbies-titulo {
    font-family: var(--f-display);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--txt-2);
    margin-bottom: 1rem;
}

.hobbies-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.hobby-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: 100px;
    font-size: .82rem;
    color: var(--txt-1);
    transition: all var(--t-spring);
    cursor: none !important;
}

.hobby-item i {
    color: var(--gold);
    font-size: .85rem;
}

.hobby-item:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-sm);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

.sobre-foto-wrap {
    position: relative;
}

.foto-frame {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--borde);
    aspect-ratio: 4/3;
}

.foto-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 170, 106, .14), transparent 55%, rgba(196, 103, 74, .09) 100%);
    z-index: 1;
    pointer-events: none;
}

.foto-frame::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index: 2;
    opacity: .8;
}

.sobre-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.4, 0, .2, 1);
}

.foto-frame:hover .sobre-foto {
    transform: scale(1.04);
}

.foto-shimmer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(212, 170, 106, .07) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shimmer 4s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0
    }

    100% {
        background-position: -200% 0
    }
}

.foto-tag {
    position: absolute;
    bottom: -.9rem;
    right: 1.5rem;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    padding: .45rem 1rem;
    border-radius: 100px;
    font-size: .78rem;
    color: var(--gold);
    display: flex;
    align-items: center;
    gap: .4rem;
    z-index: 4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

.foto-deco {
    position: absolute;
    inset: -12px;
    border: 1px solid var(--borde-card);
    border-radius: calc(var(--r-lg) + 12px);
    pointer-events: none;
    z-index: -1;
}

/* ══════════════════════════════════════════════════
   SERVICIOS
══════════════════════════════════════════════════ */
.svc-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.svc-card {
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
}

.svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--borde-hover), transparent);
    opacity: 0;
    transition: opacity var(--t-med);
}

.svc-card:hover {
    border-color: var(--borde-hover);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .4);
    transform: translateY(-10px) scale(1.04);
}

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

.svc-card-featured {
    border-color: rgba(114, 137, 218, .25);
    background: linear-gradient(135deg, var(--bg-2) 0%, rgba(114, 137, 218, .05) 100%);
}

.svc-card-featured::before {
    background: linear-gradient(90deg, transparent, rgba(114, 137, 218, .4), transparent) !important;
}

.svc-card-featured:hover {
    border-color: rgba(114, 137, 218, .55);
    box-shadow: 0 24px 64px rgba(114, 137, 218, .1);
}

.svc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.svc-num {
    font-family: var(--f-display);
    font-size: .7rem;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: .14em;
}

.svc-icon-wrap {
    width: 3rem;
    height: 3rem;
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--gold);
    transition: all var(--t-spring);
}

.svc-card:hover .svc-icon-wrap {
    transform: scale(1.1) rotate(-6deg);
}

.discord-icon {
    background: var(--dc-blue-sm);
    border-color: rgba(114, 137, 218, .25);
    color: var(--dc-blue);
}

.server-icon {
    background: rgba(94, 232, 122, .07);
    border-color: rgba(94, 232, 122, .2);
    color: #5ee87a;
}

.svc-titulo {
    font-family: var(--f-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: -0.03em;
}

.svc-desc {
    color: var(--txt-1);
    font-size: .88rem;
    line-height: 1.8;
}

.svc-lista {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-top: .25rem;
    flex: 1;
}

.svc-lista li {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .83rem;
    color: var(--txt-1);
}

.svc-lista li i {
    color: var(--gold);
    font-size: .65rem;
    flex-shrink: 0;
}

.svc-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--gold);
    transition: gap var(--t-fast), opacity var(--t-fast);
    margin-top: auto;
}

.svc-link:hover {
    gap: .7rem;
    opacity: .8;
}

/* Nuevos dos botones por card de servicio */
.svc-card-btns {
    display: flex;
    gap: .65rem;
    margin-top: auto;
    flex-wrap: wrap;
}

.svc-btn-consultar {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--txt-1);
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    padding: .55rem 1rem;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
    cursor: none !important;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

.svc-btn-consultar:hover {
    color: var(--gold);
    border-color: var(--borde-hover);
    background: rgba(212, 170, 106, .06);
}

.svc-btn-consultar i {
    font-size: .72rem;
}

.svc-btn-ver {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--bg-0);
    background: var(--gold);
    border: 1px solid var(--gold);
    border-radius: var(--r-sm);
    padding: .55rem 1rem;
    transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
    cursor: none !important;
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

.svc-btn-ver:hover {
    background: var(--gold-bright);
    box-shadow: 0 6px 20px rgba(212, 170, 106, .3);
    transform: translateY(-2px);
}

.svc-btn-ver i {
    font-size: .72rem;
    transition: transform var(--t-fast);
}

.svc-btn-ver:hover i {
    transform: translateX(3px);
}

.svc-card-featured .svc-btn-ver {
    background: var(--dc-blue);
    border-color: var(--dc-blue);
    color: #fff;
}

.svc-card-featured .svc-btn-ver:hover {
    background: #8fa4f3;
    border-color: #8fa4f3;
    box-shadow: 0 6px 20px rgba(114, 137, 218, .35);
}

/* Bot preview */
.bot-preview {
    background: var(--bg-0);
    border: 1px solid rgba(114, 137, 218, .2);
    border-radius: var(--r-md);
    overflow: hidden;
    font-family: var(--f-mono);
    font-size: .72rem;
}

.bot-preview-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(114, 137, 218, .08);
    border-bottom: 1px solid rgba(114, 137, 218, .15);
    padding: .55rem 1rem;
}

.bot-status-dot {
    width: 7px;
    height: 7px;
    background: #5ee87a;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulseDot 2s ease infinite;
}

.bot-name {
    color: var(--txt-0);
    font-size: .75rem;
    font-weight: 700;
    flex: 1;
    font-family: var(--f-body);
}

.bot-tag {
    color: var(--txt-2);
    font-weight: 400;
}

.bot-online {
    font-size: .62rem;
    color: #5ee87a;
    font-family: var(--f-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.bot-preview-body {
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.bot-msg {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}

.user-msg {
    flex-direction: column;
    gap: .1rem;
}

.user-msg .bot-user {
    font-size: .65rem;
    color: var(--txt-2);
    font-family: var(--f-body);
}

.user-msg span:last-child {
    color: var(--txt-0);
    background: var(--bg-3);
    padding: .3rem .65rem;
    border-radius: 6px;
    display: inline-block;
}

.bot-response {
    gap: .5rem;
}

.bot-avatar {
    color: var(--dc-blue);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.bot-response>div {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.bot-name-txt {
    font-size: .65rem;
    color: var(--dc-blue);
    font-family: var(--f-body);
    font-weight: 700;
}

.bot-response span:last-child {
    color: var(--txt-1);
}

.bot-response span b {
    color: var(--gold);
}

.bot-footer {
    display: flex;
    gap: .75rem;
    padding: .5rem 1rem;
    border-top: 1px solid rgba(114, 137, 218, .12);
    background: rgba(0, 0, 0, .2);
}

.bot-footer span {
    font-size: .62rem;
    color: var(--txt-2);
    display: flex;
    align-items: center;
    gap: .3rem;
    font-family: var(--f-body);
}

.bot-footer i {
    font-size: .75rem;
}

/* CTA Cotización */
.svc-cta {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: 3rem;
    text-align: center;
}

.svc-cta-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(212, 170, 106, .07), transparent);
}

.svc-cta-content {
    position: relative;
    z-index: 1;
}

.svc-cta-titulo {
    font-family: var(--f-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: -0.03em;
    margin-bottom: .75rem;
}

.svc-cta-sub {
    color: var(--txt-1);
    font-size: .95rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ══════════════════════════════════════════════════
   PROCESO (GSAP showcase strip)
══════════════════════════════════════════════════ */
.proceso-wrap {
    background: var(--bg-1);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
    padding: 2rem 0;
    overflow: hidden;
}

.proceso-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: relative;
}

.proceso-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--borde-hover), transparent);
    transform: scaleX(0);
    transform-origin: left center;
}

.proceso-step {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 2rem;
    flex: 1;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.ps-num {
    font-family: var(--f-display);
    font-size: .65rem;
    font-weight: 700;
    color: var(--txt-3);
    letter-spacing: .14em;
}

.ps-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--gold);
    flex-shrink: 0;
    transition: all var(--t-spring);
}

.proceso-step:hover .ps-icon {
    transform: rotate(-8deg) scale(1.1);
    border-color: var(--borde-hover);
}

.ps-info {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.ps-titulo {
    font-size: .9rem;
    font-weight: 700;
    color: var(--txt-0);
    font-family: var(--f-display);
}

.ps-sub {
    font-size: .7rem;
    color: var(--txt-2);
}

/* ══════════════════════════════════════════════════
   TECNOLOGÍAS
══════════════════════════════════════════════════ */
.tech-categorias {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

.tech-cat-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.tech-cat-emoji {
    font-size: 1.15rem;
    line-height: 1;
}

.tech-cat-header h3 {
    font-family: var(--f-display);
    font-size: .78rem;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.tech-card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1.1rem;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    font-size: .85rem;
    font-weight: 500;
    color: var(--txt-1);
    cursor: none !important;
    transition: all var(--t-spring);
    position: relative;
    overflow: hidden;
}

.tech-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold-sm), transparent);
    opacity: 0;
    transition: opacity var(--t-fast);
}

.tech-card:hover {
    border-color: var(--borde-hover);
    color: var(--txt-0);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

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

.tech-card i {
    font-size: 1.2rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.tech-card>span:last-child {
    position: relative;
    z-index: 1;
}

.tech-custom {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: .65rem;
    width: 1.3rem;
    height: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.gsap-badge {
    background: linear-gradient(135deg, #0ae448, #0aad35);
    color: #000;
}

.lenis-badge {
    background: linear-gradient(135deg, #e8d5b0, #c8a96e);
    color: #1a1814;
}

.dc-badge {
    color: var(--dc-blue);
    font-size: .8rem;
    width: 1.3rem;
    height: 1.3rem;
}

.json-badge {
    color: var(--gold);
    font-size: .6rem;
    width: auto;
}

.bash-badge {
    color: #5ee87a;
    font-family: monospace;
    font-size: .72rem;
    width: auto;
}

.netlify-badge {
    width: 1.3rem;
    height: 1.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #00AD9F;
    /* Color oficial de Netlify */
    font-size: 1.1rem;
    /* Ajuste para que se vea igual a los otros íconos */
}

/* Para que el SVG respete el tamaño del contenedor */
.netlify-badge svg {
    width: 100%;
    height: 100%;
}

/* ══════════════════════════════════════════════════
   PROYECTOS
══════════════════════════════════════════════════ */
.proyecto-featured {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 4.5rem;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: 4rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-med);
}

.proyecto-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .7;
}

.proyecto-featured::after {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 170, 106, .06), transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

.proyecto-featured:hover {
    border-color: var(--borde-hover);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}

.proyecto-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.proyecto-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .8rem;
    border-radius: 100px;
    font-size: .72rem;
    font-weight: 600;
    background: rgba(212, 170, 106, .1);
    color: var(--gold);
    border: 1px solid var(--borde-hover);
}

.proyecto-badge.estrella {
    background: rgba(212, 170, 106, .16);
}

.proyecto-anio {
    font-size: .75rem;
    color: var(--txt-2);
    font-weight: 500;
}

.proyecto-nombre {
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: -0.04em;
    margin-bottom: 1.25rem;
    line-height: 1;
}

.proyecto-nombre .gold {
    color: var(--gold);
}

.proyecto-desc {
    color: var(--txt-1);
    line-height: 1.8;
    margin-bottom: 2rem;
    font-size: .95rem;
}

.proyecto-stats {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-3);
    border-radius: var(--r-md);
    border: 1px solid var(--borde-card);
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.stat-num {
    font-family: var(--f-display);
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
}

.stat-label {
    font-size: .68rem;
    color: var(--txt-2);
    text-align: center;
    line-height: 1.4;
}

.stat-sep {
    width: 1px;
    height: 36px;
    background: var(--borde);
    flex-shrink: 0;
    margin: 0 1rem;
}

.proyecto-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.tag {
    padding: .3rem .75rem;
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: 100px;
    font-size: .72rem;
    color: var(--txt-2);
    font-weight: 500;
    transition: all var(--t-fast);
    cursor: none !important;
}

.tag:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-sm);
}

.proyecto-links {
    display: flex;
    gap: .875rem;
    flex-wrap: wrap;
}

/* Preview */
.proyecto-preview {
    position: relative;
    z-index: 1;
}

.preview-window {
    background: var(--bg-0);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    transition: transform var(--t-med);
}

.proyecto-featured:hover .preview-window {
    transform: translateY(-6px) rotate(-.8deg);
}

.preview-topbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem;
    background: var(--bg-2);
    border-bottom: 1px solid var(--borde);
}

.preview-dots {
    display: flex;
    gap: .4rem;
}

.pdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.pdot.red {
    background: #ff5f57;
}

.pdot.yellow {
    background: #ffbd2e;
}

.pdot.green {
    background: #28c840;
}

.preview-url {
    font-family: monospace;
    font-size: .65rem;
    color: var(--txt-2);
    margin-left: .4rem;
}

.preview-body {
    padding: 1.25rem;
}

.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--borde);
}

.dp-brand {
    font-family: var(--f-display);
    font-size: .9rem;
    font-weight: 700;
    color: var(--txt-0);
}

.dp-brand b {
    color: var(--gold);
}

.dp-live-badge {
    font-size: .62rem;
    padding: .18rem .55rem;
    background: rgba(94, 232, 122, .1);
    border: 1px solid rgba(94, 232, 122, .25);
    border-radius: 100px;
    color: #5ee87a;
    font-weight: 600;
}

.dp-paises {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
}

.dp-pais {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .4rem .25rem;
    background: var(--bg-2);
    border: 1px solid var(--borde-card);
    border-radius: 8px;
    transition: border-color var(--t-fast);
}

.dp-pais:hover {
    border-color: var(--borde);
}

.dp-pais img {
    width: 22px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
}

.dp-pais span {
    font-size: .52rem;
    color: var(--txt-2);
    text-align: center;
}

.dp-cotizaciones {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.dp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .38rem .65rem;
    background: var(--bg-2);
    border-radius: 6px;
    font-size: .7rem;
    color: var(--txt-1);
    transition: background var(--t-fast);
}

.dp-row:hover {
    background: var(--bg-3);
}

.dp-valor {
    color: var(--gold);
    font-weight: 700;
    font-family: monospace;
    font-size: .75rem;
}

.preview-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at 50% 50%, rgba(212, 170, 106, .12), transparent 70%);
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

/* Proyecto principal */
/* Axys Preview */
.axys-preview {
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ax-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 1.5rem;
}

.ax-logo {
    width: auto;
    height: 32px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(212, 170, 106, 0.4));
}

.ax-brand {
    font-family: var(--f-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--txt-0);
}

.ax-brand b {
    color: var(--gold);
}

.ax-modules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.ax-mod {
    background: var(--bg-2);
    border: 1px solid var(--borde-card);
    border-radius: 8px;
    padding: 1rem .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: all var(--t-fast);
}

.ax-mod:hover {
    border-color: var(--gold);
    background: rgba(212, 170, 106, .05);
    transform: translateY(-2px);
}

.ax-mod i {
    font-size: 1.4rem;
    color: var(--gold);
}

.ax-mod span {
    font-size: .65rem;
    color: var(--txt-1);
    font-weight: 600;
}

/* Proyecto secundario */
.proyecto-sec {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4.5rem;
    align-items: center;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: 3.5rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-med);
    margin-bottom: 2.5rem;
}

.proyecto-sec:hover {
    border-color: var(--borde-hover);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.proyecto-sec::before {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(196, 103, 74, .06), transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

.apis-deco {
    position: relative;
}

.apis-deco-inner {
    background: var(--bg-0);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
    transition: transform var(--t-med);
}

.proyecto-sec:hover .apis-deco-inner {
    transform: translateY(-4px) rotate(.5deg);
}

.apis-deco-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.1rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--borde);
    font-size: .75rem;
    color: var(--txt-2);
}

.apis-deco-title {
    font-family: monospace;
    color: var(--txt-1);
    font-size: .8rem;
}

.apis-linea {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .5rem;
    border-radius: 6px;
    font-size: .75rem;
    color: var(--txt-2);
    font-family: monospace;
    transition: all var(--t-fast);
    cursor: none !important;
}

.apis-linea:hover {
    background: var(--bg-2);
    color: var(--txt-1);
}

.api-method {
    padding: .15rem .5rem;
    border-radius: 4px;
    font-size: .62rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.api-method.get {
    background: rgba(94, 232, 122, .14);
    color: #5ee87a;
}

.api-method.post {
    background: rgba(212, 170, 106, .14);
    color: var(--gold);
}

.api-path {
    color: var(--txt-1);
}

/* Portfolio Decoración */
.portfolio-card::before {
    background: radial-gradient(circle, rgba(212, 170, 106, .08), transparent 65%);
}

.portfolio-deco {
    position: relative;
}

.portfolio-deco-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    height: 100%;
    min-height: 180px;
    background: var(--bg-1);
    border: 1px solid var(--borde);
    border-radius: var(--r-lg);
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.pd-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold);
}

.pd-line {
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, transparent, var(--gold), transparent);
    position: absolute;
    left: 50%;
}

.pd-line.line-1 {
    height: 60%;
    top: 10%;
    animation: pdFloat 3s ease-in-out infinite;
}

.pd-line.line-2 {
    height: 40%;
    bottom: 10%;
    left: 30%;
    animation: pdFloat 4s ease-in-out infinite reverse;
    opacity: .5;
}

.pd-line.line-3 {
    height: 50%;
    top: 20%;
    left: 70%;
    animation: pdFloat 3.5s ease-in-out infinite;
    opacity: .5;
}

.pd-icon {
    font-size: 1.5rem;
    color: var(--gold);
    opacity: .8;
    margin-top: .5rem;
}

@keyframes pdFloat {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(15px)
    }
}

/* ══════════════════════════════════════════════════
   GALERÍA BENTO
══════════════════════════════════════════════════ */
.galeria-desc {
    text-align: center;
    color: var(--txt-2);
    margin-top: -3rem;
    margin-bottom: 3rem;
    font-size: .95rem;
}

.bento-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
}

.gallery-item {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: none !important;
    background: var(--bg-1);
    border: 1px solid var(--borde);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}

.gallery-item.bento-tall {
    grid-row: span 2;
}

.gallery-item.bento-wide {
    grid-column: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow), filter var(--t-slow);
    filter: grayscale(30%) contrast(1.1);
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--t-med);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-overlay i {
    font-size: 1.8rem;
    color: var(--gold);
    transform: scale(0.5);
    transition: transform var(--t-spring);
    text-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}

.gallery-item:hover img {
    transform: scale(1.06);
    filter: grayscale(0%) contrast(1.1);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-overlay i {
    transform: scale(1);
}

/* Cards ocultas inicialmente sin romper la grilla */
.gallery-item.hidden-bento {
    display: none;
    opacity: 0;
    transform: scale(0.85) translateY(30px);
}

/* Contenedor y Botón "Expandir / Contraer" */
.galeria-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 3.5rem;
    position: relative;
    z-index: 5;
}

.btn-bento-expand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-3) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 100px;
    font-family: var(--f-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--txt-0);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: none !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(212, 170, 106, 0.08);
    transition: all var(--t-spring);
}

.btn-bento-expand::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--t-med);
}

.btn-bento-expand:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    box-shadow: 0 15px 40px rgba(212, 170, 106, 0.25), inset 0 0 20px rgba(212, 170, 106, 0.2);
}

.btn-bento-expand:hover::before {
    opacity: 1;
    animation: shineBtn 1.5s linear infinite;
}

.btn-bento-expand i {
    color: var(--gold);
    font-size: 1rem;
    transition: transform var(--t-spring);
}

.btn-bento-expand:hover i {
    transform: translateY(3px);
}

.btn-bento-expand.is-open:hover i {
    transform: translateY(-3px);
}

/* Modal Galería (ULTRA MINIMALISTA) */
.gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    padding: 2rem;
}

.gallery-modal.active {
    pointer-events: all;
}

.gallery-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 8, .92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity var(--t-med);
}

.gallery-modal.active .gallery-modal-overlay {
    opacity: 1;
}

.gallery-modal-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.94);
    transition: all var(--t-spring);
}

.gallery-modal.active .gallery-modal-content {
    opacity: 1;
    transform: scale(1);
}

.gm-close {
    position: fixed;
    top: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: var(--bg-2);
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    color: var(--txt-0);
    font-size: 1.4rem;
    cursor: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1010;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    transition: all var(--t-fast);
}

.gm-close:hover {
    background: var(--gold);
    color: var(--bg-0);
    transform: rotate(90deg) scale(1.1);
}

.gm-img-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gm-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--r-md);
    box-shadow: 0 25px 80px rgba(0, 0, 0, .8);
    user-select: none;
}

@keyframes shineBtn {
    100% {
        left: 150%;
    }
}

/* ══════════════════════════════════════════════════
   CONTACTO
══════════════════════════════════════════════════ */
.contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 5rem;
    align-items: start;
}

.contacto-titulo {
    font-family: var(--f-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: -0.04em;
    margin-bottom: 1rem;
    line-height: 1.1;
}

.contacto-parrafo {
    color: var(--txt-1);
    line-height: 1.8;
    margin-bottom: 2rem;
    font-size: .975rem;
}

.contacto-email {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
    color: var(--gold);
    font-weight: 600;
    padding: .875rem 1.5rem;
    border: 1px solid var(--borde-hover);
    border-radius: var(--r-md);
    background: rgba(212, 170, 106, .06);
    transition: all var(--t-med);
    word-break: break-all;
    margin-bottom: 2rem;
}

.contacto-email:hover {
    background: rgba(212, 170, 106, .12);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 170, 106, .15);
}

.contacto-socials-mini {
    display: flex;
    gap: .625rem;
    flex-wrap: wrap;
}

.cs-mini {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-sm);
    font-size: 1rem;
    color: var(--txt-2);
    transition: all var(--t-spring);
    cursor: none !important;
}

.cs-mini:hover {
    border-color: var(--borde-hover);
    color: var(--txt-0);
    transform: translateY(-3px);
}

.cs-mini.yt:hover {
    color: #ff4545;
    border-color: rgba(255, 69, 69, .3);
}

.cs-mini.ig:hover {
    color: #e1306c;
    border-color: rgba(225, 48, 108, .3);
}

.cs-mini.steam:hover {
    color: #6ab2e8;
    border-color: rgba(106, 178, 232, .3);
}

.cs-mini.dc {
    cursor: none !important;
}

.cs-mini.dc:hover {
    color: var(--dc-blue);
    border-color: rgba(114, 137, 218, .3);
}

/* Formulario */
.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: var(--bg-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-xl);
    padding: 2.5rem;
}

.form-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-grupo {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.form-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.form-opcional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    color: var(--txt-3);
    font-size: .7rem;
}

.form-input {
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    padding: .75rem 1rem;
    font-family: var(--f-body);
    font-size: .9rem;
    color: var(--txt-0);
    outline: none;
    transition: all var(--t-fast);
    resize: none;
}

.form-input::placeholder {
    color: var(--txt-3);
}

.form-input:focus {
    border-color: var(--gold);
    background: var(--bg-4);
    box-shadow: 0 0 0 3px rgba(212, 170, 106, .12);
}

.form-input:focus::placeholder {
    color: var(--txt-2);
}

.form-textarea {
    min-height: 130px;
}

/* CUSTOM DROPDOWN */
.custom-dropdown-group {
    position: relative;
}

.custom-dropdown {
    position: relative;
    width: 100%;
}

.dropdown-header {
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    padding: .75rem 1rem;
    font-family: var(--f-body);
    font-size: .9rem;
    color: var(--txt-0);
    cursor: none !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--t-fast);
    user-select: none;
}

.dropdown-header:hover {
    border-color: var(--gold);
    background: var(--bg-4);
}

.custom-dropdown.open .dropdown-header {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 170, 106, .12);
}

.dropdown-header i {
    color: var(--txt-2);
    transition: transform var(--t-fast), color var(--t-fast);
}

.custom-dropdown.open .dropdown-header i {
    transform: rotate(180deg);
    color: var(--gold);
}

.dropdown-list {
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    background: var(--bg-3);
    border: 1px solid var(--borde);
    border-radius: var(--r-md);
    padding: .5rem;
    margin: 0;
    list-style: none;
    z-index: 50;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .4);
    transition: all var(--t-med);
}

.custom-dropdown.open .dropdown-list {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

.dropdown-item {
    padding: .6rem 1rem;
    border-radius: 6px;
    font-size: .85rem;
    color: var(--txt-1);
    cursor: none !important;
    transition: all var(--t-fast);
}

.dropdown-item:hover,
.dropdown-item.selected {
    background: rgba(212, 170, 106, .1);
    color: var(--gold);
    font-weight: 600;
}

.form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.form-nota {
    font-size: .75rem;
    color: var(--txt-2);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.form-nota i {
    color: var(--gold);
}

/* FIX CRÍTICO: evitar que display:flex override el atributo hidden */
.form-success {
    display: none;
    /* oculto por defecto - JS lo cambia a flex */
    align-items: center;
    gap: .6rem;
    padding: .875rem 1.1rem;
    border-radius: var(--r-md);
    background: rgba(94, 232, 122, .08);
    border: 1px solid rgba(94, 232, 122, .2);
    color: #5ee87a;
    font-size: .85rem;
    font-weight: 500;
}

.form-success.visible {
    display: flex;
}

.form-success i {
    font-size: 1rem;
}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
.footer {
    padding: 4rem 0 3rem;
    background: var(--bg-1);
    border-top: 1px solid var(--borde);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-col-title {
    font-family: var(--f-display);
    font-size: .7rem;
    font-weight: 700;
    color: var(--txt-2);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.footer-logo {
    font-family: var(--f-display);
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--txt-0);
    letter-spacing: -0.02em;
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-logo span {
    color: var(--gold);
}

.footer-logo:hover {
    opacity: .8;
}

.footer-tagline {
    font-size: .85rem;
    color: var(--txt-2);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.footer-email-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: var(--txt-1);
    font-weight: 500;
    transition: color var(--t-fast);
}

.footer-email-link i {
    color: var(--gold);
}

.footer-email-link:hover {
    color: var(--gold);
}

.footer-col-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.footer-col-list li a {
    font-size: .85rem;
    color: var(--txt-2);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color var(--t-fast), transform var(--t-fast);
}

.footer-col-list li a:hover {
    color: var(--gold);
    transform: translateX(3px);
}

.footer-col-list li a i {
    font-size: .7rem;
    opacity: .6;
}

.footer-col-list li a .fa-arrow-up-right-from-square {
    font-size: .65rem;
}

.footer-dc {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: var(--txt-2);
}

.footer-dc-tag {
    font-size: .65rem;
    padding: .15rem .5rem;
    background: var(--dc-blue-sm);
    color: var(--dc-blue);
    border: 1px solid rgba(114, 137, 218, .2);
    border-radius: 100px;
    font-weight: 600;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--borde);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: .8rem;
    color: var(--txt-3);
}

.footer-bottom i {
    color: var(--terra);
}

/* ══════════════════════════════════════════════════
   FOOTER GIGANTE — JS ajusta el font-size exacto
══════════════════════════════════════════════════ */
.footer-gigante {
    /* CAMBIO: Ahora el fondo del contenedor es --bg-0 */
    background: var(--bg-0);

    overflow: hidden;
    padding: 0;
    line-height: .82;
    pointer-events: none;
    user-select: none;
    border-top: 1px solid var(--borde-card);

    /* Forzar ancho completo de pantalla */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.footer-gigante-txt {
    font-family: var(--f-display);
    font-weight: 800;
    letter-spacing: -0.05em;

    /* CAMBIO CRÍTICO: inline-block para que JS mida el ancho real del texto */
    display: inline-block;
    white-space: nowrap;

    background: linear-gradient(to bottom, rgba(212, 170, 106, .14) 0%, rgba(212, 170, 106, .03) 60%, transparent 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* Centrado horizontal para inline-block */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* ══════════════════════════════════════════════════
   TRANSICIÓN DE PÁGINA
══════════════════════════════════════════════════ */
.page-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pt-panel {
    position: absolute;
    inset: 0;
    background: var(--bg-0);
    transform-origin: bottom;
    transform: scaleY(0);
}

.pt-logo {
    position: relative;
    z-index: 1;
    font-family: var(--f-display);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    color: var(--txt-0);
    opacity: 0;
    letter-spacing: -0.04em;
}

.pt-logo span {
    color: var(--gold);
}

/* ══════════════════════════════════════════════════
   CONTACTO — LINKS A SERVICIOS
══════════════════════════════════════════════════ */
.contacto-servicios-links {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borde);
    margin-bottom: 2rem;
}

.contacto-servicios-links p {
    font-size: .78rem;
    font-weight: 600;
    color: var(--txt-2);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: .85rem;
}


.contacto-srv-btns {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.contacto-srv-btn {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem 1rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--borde);
    background: var(--bg-2);
    font-size: .84rem;
    font-weight: 500;
    color: var(--txt-1);
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast), transform var(--t-fast);
    cursor: none !important;
}

.contacto-srv-btn:hover {
    border-color: var(--borde-hover);
    color: var(--txt-0);
    background: rgba(212, 170, 106, .05);
    transform: translateX(4px);
}

.contacto-srv-btn i {
    font-size: .9rem;
    color: var(--gold);
    flex-shrink: 0;
    width: 1.2rem;
    text-align: center;
}

.contacto-srv-btn.dc-btn i {
    color: var(--dc-blue);
}

.contacto-srv-btn.srv-btn i {
    color: #5ee87a;
}

.contacto-srv-btn .srv-arrow {
    margin-left: auto;
    font-size: .7rem;
    color: var(--txt-3);
    transition: transform var(--t-fast), color var(--t-fast);
}

.contacto-srv-btn:hover .srv-arrow {
    transform: translateX(3px);
    color: var(--gold);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width:1100px) {
    .svc-grid {
        grid-template-columns: 1fr 1fr;
    }

    #svc-discord {
        grid-column: 1/-1;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:900px) {
    .sobre-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .sobre-foto-wrap {
        order: -1;
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }

    .ctd-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .proyecto-featured {
        grid-template-columns: 1fr;
        gap: 3rem;
        padding: 2.5rem;
    }

    .proyecto-sec {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem;
    }

    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .proceso-inner {
        gap: 0;
    }

    .proceso-step {
        padding: 1rem;
    }
}

@media (max-width:900px) {


    .nav-links {
        display: none;
    }

    .nav-logo,
    .nav-mobile-left {
        display: none !important;
    }

    .nav.scrolled {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: none;
        box-shadow: none;
        pointer-events: none;
    }

    .nav-container {
        justify-content: flex-end;
        padding: 0;
    }

    .nav-toggle {
        display: block;
        pointer-events: all;
        width: 66px;
        height: 66px;
        padding: 0;
        border-bottom-left-radius: var(--r-md);
        transition: background .3s, backdrop-filter .3s, border .3s, box-shadow .3s;
    }

    .nav.scrolled .nav-toggle {
        background: rgba(12, 10, 8, .9);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-bottom: 1px solid var(--borde);
        border-left: 1px solid var(--borde);
        box-shadow: 0 4px 30px rgba(0, 0, 0, .4);
    }

    .hero {
        padding: 6rem 1.25rem 5rem;
    }

    .hero-title {
        font-size: clamp(4rem, 18vw, 5.5rem);
    }

    .hero-br {
        display: none;
    }

    .seccion {
        padding: 5rem 0;
    }

    .seccion-header {
        margin-bottom: 3rem;
    }

    .container {
        padding: 0 1.25rem;
    }

    .svc-grid {
        grid-template-columns: 1fr;
    }

    #svc-discord {
        grid-column: auto;
    }

    .proyecto-featured,
    .proyecto-sec {
        padding: 2rem;
    }

    .proyecto-stats {
        flex-wrap: wrap;
        gap: .5rem;
    }

    .stat-sep {
        display: none;
    }

    .form-fila {
        grid-template-columns: 1fr;
    }

    .contacto-form {
        padding: 1.75rem;
    }

    .ctd-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer-gigante {
        display: none;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .proceso-inner {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 1rem 1.25rem;
    }

    .proceso-line {
        display: none;
    }

    .hero-stats {
        flex-direction: column;
        gap: .5rem;
        padding: 1rem;
    }

    .hs-sep {
        width: 80%;
        height: 1px;
    }
}

@media (max-width:400px) {
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width:768px) {
    .bento-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: 180px;
    }

    .gallery-item.bento-tall,
    .gallery-item.bento-wide {
        grid-row: span 1;
        grid-column: span 1;
    }

    .gm-info {
        padding: 1.5rem;
    }

    .gm-info h4 {
        font-size: 1.3rem;
    }

    #showcase,
    .mobile-link[href="#showcase"],
    .nav-link[href="#showcase"] {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════
   CONTEXT MENU
══════════════════════════════════════════════════ */
.ctx-menu {
    position: fixed;
    z-index: 10000;
    width: 260px;
    background: rgba(12, 10, 8, .85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(212, 170, 106, .2);
    border-radius: var(--r-md);
    padding: 0.5rem 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity .15s, transform .15s, visibility .15s;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transform-origin: top left;
    transition: opacity .15s, transform .15s, visibility .15s;
    display: flex;
    display: none;
    flex-direction: column;
}

.ctx-menu.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.ctx-item {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--txt-1);
    cursor: none !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background .2s, color .2s;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.ctx-item i {
    font-size: 0.95rem;
    width: 16px;
    text-align: center;
    color: var(--txt-2);
    transition: color .2s;
}

.ctx-item:hover {
    background: rgba(212, 170, 106, .1);
    color: var(--txt-0);
}

.ctx-item:hover i {
    color: var(--gold);
}

.ctx-sep {
    height: 1px;
    background: rgba(212, 170, 106, .08);
    margin: 0.4rem 0;
}

/* ══════════════════════════════════════════════════
   MOBILE WARNING OVERLAY
══════════════════════════════════════════════════ */
#mobile-warning-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(12, 10, 8, 0.75);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s, visibility 0.4s;
}

#mobile-warning-overlay.show {
    opacity: 1;
    visibility: visible;
}

.mwo-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.mwo-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: orbFloat 10s infinite alternate ease-in-out;
}

.mwo-orb-1 {
    width: 300px;
    height: 300px;
    background: var(--gold);
    top: -50px;
    left: -50px;
}

.mwo-orb-2 {
    width: 250px;
    height: 250px;
    background: var(--terra);
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(50px, 50px) scale(1.2);
    }
}

.mwo-content {
    background: rgba(25, 23, 20, 0.6);
    border: 1px solid rgba(212, 170, 106, 0.3);
    padding: 2.5rem 2rem;
    border-radius: var(--r-md);
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#mobile-warning-overlay.show .mwo-content {
    transform: translateY(0);
}

.mwo-icon {
    font-size: 3rem;
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.mwo-content h3 {
    font-size: 1.5rem;
    color: var(--txt-0);
    margin-bottom: 1rem;
}

.mwo-content p {
    color: var(--txt-1);
    font-size: 0.95rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* ══════════════════════════════════════════════════
   ADVANCED SHOWCASE CARDS
══════════════════════════════════════════════════ */
.sc-advanced {
    position: relative;
    z-index: 1;
}

/* Spotlight */
.sc-spotlight {
    background: var(--bg-1);
}

.sc-spotlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(212, 170, 106, 0.15), transparent 80%);
    z-index: -1;
    pointer-events: none;
}

/* Particles Canvas */
.sc-particles {
    padding: 0;
    align-items: center;
    justify-content: center;
}

#sc-particles-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sc-particles-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
    text-align: center;
    background: rgba(12, 10, 8, 0.7);
    padding: 1rem;
    border-radius: var(--r-sm);
}

/* Invert Cursor */
.sc-invert {
    background: #fff;
    border-color: #fff;
}

.invert-text {
    color: #000;
}

/* Gooey Effect */
.sc-gooey {
    overflow: hidden;
}

.gooey-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: url('#goo');
    z-index: 0;
}

.gooey-dot {
    position: absolute;
    border-radius: 50%;
    background: var(--gold);
}

.gooey-center {
    width: 60px;
    height: 60px;
    top: 70%;
    left: 80%;
    transform: translate(-50%, -50%);
}

.gooey-cursor {
    width: 40px;
    height: 40px;
    top: -20px;
    left: -20px;
    pointer-events: none;
}

.sc-gooey-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Parallax Multicapa */
.sc-parallax {
    overflow: hidden;
}

.px-layer {
    position: absolute;
    border-radius: 50%;
    background: var(--gold);
    opacity: 0.1;
}

.px-layer-1 {
    width: 300px;
    height: 300px;
    top: -50px;
    left: -50px;
}

.px-layer-2 {
    width: 150px;
    height: 150px;
    bottom: 20px;
    right: 20px;
    opacity: 0.2;
}

.px-layer-3 {
    width: 80px;
    height: 80px;
    top: 40%;
    left: 60%;
    opacity: 0.3;
}

.sc-parallax-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* Tilt 3D Extremo */
.sc-tilt {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.tilt-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

.tilt-glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    pointer-events: none;
    transform: translateZ(1px);
}

.sc-tilt .sc-title,
.sc-tilt .sc-desc {
    transform: translateZ(30px);
}

/* Draggable Box */
.drag-box {
    width: 100px;
    height: 100px;
    background: var(--gold);
    color: var(--bg-1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    border-radius: var(--r-sm);
    cursor: none !important;
    user-select: none;
    margin-top: 1rem;
    box-shadow: 0 5px 15px rgba(212, 170, 106, 0.4);
}

.drag-box:active {
    cursor: none !important;
}

/* Marquee Eliminado */

/* ══════════════════════════════════════════════════
   SHOWCASE EXTRA CARDS
══════════════════════════════════════════════════ */
.sc-extra {
    position: relative;
    z-index: 1;
}

/* CSS Magnet Button */
.css-magnet-btn {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

.showcase-magnet:hover .css-magnet-btn {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 10px 20px rgba(212, 170, 106, 0.3);
}

/* VHS Glitch (Fijo) */
.sc-vhs {
    overflow: hidden;
    background: #111;
    position: relative;
}

.sc-vhs .sc-title,
.sc-vhs .sc-desc {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 2px 0 red, -2px 0 cyan;
}

.vhs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.05),
            rgba(255, 255, 255, 0.05) 1px,
            rgba(0, 0, 0, 0.3) 1px,
            rgba(0, 0, 0, 0.3) 2px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 2;
    /* Sobre el texto para dar efecto real */
}

.sc-vhs:hover .vhs-overlay {
    animation: vhsGlitch 0.1s infinite;
}

@keyframes vhsGlitch {
    0% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(3px);
        opacity: 0.8;
    }

    100% {
        transform: translateY(-3px);
        opacity: 0.5;
    }
}

/* Flashlight (Reverse) */
.sc-flashlight {
    background: #e0e0e0;
}

.fl-title,
.fl-desc {
    color: #111;
    transition: text-shadow 0.1s ease-out;
}

/* Stack Cards */
.sc-stack {
    perspective: 1000px;
}

.stack-wrap {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 160px;
    z-index: 0;
}

.stack-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gold);
    border-radius: var(--r-sm);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stack-2 {
    background: var(--terra);
    transform: translateZ(-20px) translateY(-10px) scale(0.95);
    opacity: 0.8;
}

.stack-3 {
    background: var(--bg-1);
    border: 2px solid var(--gold);
    transform: translateZ(-40px) translateY(-20px) scale(0.9);
    opacity: 0.6;
}

.sc-stack:hover .stack-1 {
    transform: rotate(-15deg) translateX(-40px);
}

.sc-stack:hover .stack-2 {
    transform: rotate(0deg) translateX(0) translateZ(-20px);
    opacity: 1;
}

.sc-stack:hover .stack-3 {
    transform: rotate(15deg) translateX(40px) translateZ(-40px);
    opacity: 1;
}

.sc-stack-content {
    position: relative;
    z-index: 1;
    pointer-events: none;
    margin-top: 180px;
}

/* SVG Mask Clip (Fijo) */
.sc-clip {
    position: relative;
    overflow: hidden;
    --mouse-x: 50%;
    --mouse-y: 50%;
    background: #111;
}

.clip-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gold) 0%, var(--terra) 100%);
    clip-path: circle(40px at var(--mouse-x) var(--mouse-y));
    transition: clip-path 0.1s ease-out;
    z-index: 0;
}

.sc-clip:hover .clip-bg {
    clip-path: circle(150px at var(--mouse-x) var(--mouse-y));
}

.clip-text {
    position: relative;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: difference;
    color: #fff;
}

@media (max-width: 900px) {

    /* Clavamos el botón de las 3 rayitas a la pantalla del celu */
    .nav-toggle,
    .menu-hamburguesa,
    #menu-btn {
        /* Asegurate de que sea la clase o ID de tu botón */
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        /* A 20px del borde derecho de la pantalla, inamovible */
        left: auto !important;
        /* Anulamos cualquier empuje desde la izquierda */
        transform: none !important;
        /* Evitamos que animaciones lo desplacen */
        margin: 0 !important;
        z-index: 9999999 !important;
        /* Arriba de todo */
    }

    /* Esta regla evita que toda la página sea más ancha que el celu
       (que suele ser la causa de que los botones se vayan de mambo) */
    html,
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* FIX: Deshabilitar cursor custom en celulares/pantallas táctiles */
@media (pointer: coarse) {

    .cursor,
    .cursor-follower {
        display: none !important;
    }

    * {
        cursor: auto !important;
    }
}

/* Estilos base para insignias personalizadas de Base de Datos */
.tech-custom-db {
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-block;
    user-select: none;
}

/* Insignia para SQLite */
.sqlite-badge {
    background-color: #0f4c81;
    color: #00bcd4;
    border: 1px solid #00bcd4;
}

/* Insignia para MySQL */
.mysql-badge {
    background-color: #00618a;
    color: #e49316;
    border: 1px solid #e49316;
}