:root{
    /* Paleta Paula Romanka - Nude/Rosa */

    /* Fondos */
    --rm-bg-primary: #F8DFD9;       /* Fondo principal rosa nude */
    --rm-bg-secondary: #FAFAFA;     /* Fondo secundario claro */

    /* Acentos */
    --rm-accent-primary: #DFABA6;   /* Rosa principal */
    --rm-accent-hover: #c19e9b;     /* Rosa hover */

    /* Textos */
    --rm-text-primary: #1A1C26;     /* Texto principal oscuro */
    --rm-text-dark: #2D2926;        /* Texto oscuro cálido */
    --rm-text-secondary: #2F3344;   /* Texto secundario */

    /* Botones */
    --rm-button-dark: #2F3344;      /* Botón oscuro */
    --rm-button-outline: #2D2926;   /* Botón outline */
}

 h1,h2,h3,h4,h5,h6{
            font-family: "ivymode", sans-serif;
            font-weight: 400;
            font-style: normal;
        }
        .canvas-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Asegúrate de que el canvas esté detrás del contenido */
        }
        .canvas-container::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: radial-gradient(circle at center, transparent 0%, transparent 50%, rgba(26, 28, 38, 0.5) 100%);
            z-index: 1;
        }
        body {
            margin: 0;
            overflow: hidden; /* Evita el scroll de la página */
        }
        .dg.ac {
            z-index: 9999 !important;
            position: fixed !important;
            top: 0 !important;
            right: 0 !important;
            }
        /* Botón con efecto blur/glassmorphism */
        .btn-blur {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            background: rgba(255, 255, 255, 0.15);
        }
        .btn-blur:hover {
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

        /* Hamburger menu */
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            z-index: 50;
            width: 30px;
            height: 24px;
            background: none;
            border: none;
            padding: 0;
        }
        .hamburger span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: #1A1C26;
            transition: transform 0.3s ease, opacity 0.3s ease;
            transform-origin: center;
        }
        .hamburger.active span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* Mobile menu overlay */
        .mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background: radial-gradient(ellipse at center, rgba(248, 223, 217, 0.97) 40%, rgba(200, 170, 165, 0.97) 100%);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 40;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .mobile-menu.open {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }
        .mobile-menu ul {
            list-style: none;
            padding: 0;
            text-align: center;
        }
        .mobile-menu ul li {
            margin: 1.25rem 0;
        }
        .mobile-menu ul li a {
            font-size: 1.5rem;
            text-decoration: none;
            font-family: "ivymode", sans-serif;
        }

        /* Active nav link */
        .nav-link.active, .mobile-nav-link.active {
            color: #b5a09b !important;
        }
        .mobile-nav-link {
            transition: color 0.3s ease;
        }
        .mobile-nav-link:not(.active) {
            color: #1A1C26;
        }

        /* Scroll indicator */
        .scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
            opacity: 0.5;
            animation: scrollBounce 2s ease-in-out infinite;
        }
        .scroll-indicator span {
            display: block;
            width: 20px;
            height: 20px;
            border-right: 2px solid #1A1C26;
            border-bottom: 2px solid #1A1C26;
            transform: rotate(45deg);
        }
        .scroll-indicator span:nth-child(2) {
            opacity: 0.5;
        }
        @keyframes scrollBounce {
            0%, 100% { transform: translateX(-50%) translateY(0); }
            50% { transform: translateX(-50%) translateY(8px); }
        }

        @media (max-width: 767px) {
            .hamburger { display: flex; }
            .desktop-nav { display: none !important; }
        }

/* Fix scroll en móvil - override del overflow:hidden del body */
@media (max-width: 767px) {
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    html, body {
        max-width: 100vw;
    }

    /* Más espacio entre secciones en móvil */
    section[id]:not(#hero) {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }
}

/* Modal de Contacto */
#contactModal .modal-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#contactModal .modal-content {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#contactModal .modal-overlay.opacity-100 {
    opacity: 1;
}

#contactModal .modal-content.scale-100 {
    transform: translate(-50%, -50%) scale(1);
}

#contactModal .modal-content.opacity-100 {
    opacity: 1;
}

/* Scrollbar personalizado para el modal */
#contactModal .modal-content::-webkit-scrollbar {
    width: 6px;
}

#contactModal .modal-content::-webkit-scrollbar-track {
    background: rgba(223, 171, 166, 0.3);
    border-radius: 3px;
}

#contactModal .modal-content::-webkit-scrollbar-thumb {
    background: #DFABA6;
    border-radius: 3px;
}

#contactModal .modal-content::-webkit-scrollbar-thumb:hover {
    background: #c19e9b;
}