/* ===== BASE ===== */
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

/* Scrollbar personalizada estilo Apple Dark Mode */
html {
  overflow-y: auto;
  background: linear-gradient(135deg, #01070f 0%, #04020e 100%);
}
/* Scrollbar Webkit (Chrome, Safari, Edge) - Estilo macOS */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 6px;
border: 2px solid transparent;
background-clip: content-box;
transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.25);
}

::-webkit-scrollbar-thumb:active {
background: rgba(255, 255, 255, 0.35);
}

/* Firefox - Scrollbar delgada estilo Apple */
* {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: linear-gradient(135deg, #01070f1a 0%, #04020e0c 100%);
background-attachment: fixed;
min-height: 100vh;
color: #e5e5e7;
overflow-x: hidden;
}

body.no-scroll { 
overflow: hidden; 
}
section{
  padding-top: 8dvh !important;
}
/* Scrollbar en dialogs con estilo Apple */
dialog::-webkit-scrollbar,
.dialog-content::-webkit-scrollbar {
width: 8px;
}

dialog::-webkit-scrollbar-track,
.dialog-content::-webkit-scrollbar-track {
background: transparent;
}

dialog::-webkit-scrollbar-thumb,
.dialog-content::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 4px;
border: 1px solid transparent;
background-clip: content-box;
}

dialog::-webkit-scrollbar-thumb:hover,
.dialog-content::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.22);
}

/* ===== ANIMATIONS ===== */
.wave {
display: inline-block;
animation: wave 2s infinite ease-in-out;
transform-origin: 70% 70%;
}

@keyframes wave {
0%, 100% { transform: rotate(0deg); }
20% { transform: rotate(20deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(15deg); }
80% { transform: rotate(-5deg); }
}

/* Configuración del Canvas de fondo */
#particle-canvas {
    position: fixed;      /* Se queda fijo mientras haces scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;          /* Se coloca DETRÁS de todo el contenido */
    pointer-events: none; /* Permite dar clic a los botones que estén encima */
    
}

/* IMPORTANTE: Asegúrate de que tus secciones no tengan fondo sólido */
body {
    background-color: transparent; /* Deja que se vea el canvas */
}

section {
    position: relative;
    z-index: 1;
}
body {
    background-color: transparent !important; /* Deja ver el canvas que está detrás */
    /* O simplemente borra la línea de background-color */
}
.homesection {
    background-color: transparent !important; /* O el color que tengas */
}




/* Ajuste para móviles si quieres que ocupe más espacio en pantallas pequeñas */
@media (max-width: 768px) {
    #contentmysection {
        width: 95%;
        padding: 20px;
    }
}