:root {
    --runa-primary: #D47500;
    --runa-secondary: #0072CE;
    --slider-track-color: rgba(255, 255, 255, 0.75);
}
html { scroll-behavior: smooth; }

/* Light Theme */
html:not(.dark) body { background-color: #FDFBF8; color: #3a2e2a; }
html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4 { color: #2c221f; }
html:not(.dark) .translucent-menu { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(0,0,0,0.1); }
html:not(.dark) .section-bg { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(0,0,0,0.1); }
html:not(.dark) footer { background-color: #F4F1ED; }
html:not(.dark) .mixer-icon-button { background-color: #F4F1ED; border-color: #E2E8F0; }
html:not(.dark) .mixer-icon-button.active { border-color: var(--runa-primary); }
html:not(.dark) input[type="range"] { --track-background: #E2E8F0; }
html:not(.dark) .cart-modal-content { background-color: rgba(255, 255, 255, 0.75); border: 1px solid rgba(0, 0, 0, 0.1); }
html:not(.dark) .video-list-button.active { background-color: rgba(0,0,0,0.1); }
html:not(.dark) .ghost-button { border-color: var(--runa-primary); color: var(--runa-primary); }
html:not(.dark) .ghost-button:hover { background-color: var(--runa-primary); color: white; }

/* Dark Theme */
html.dark body { background-color: #111; color: #E2E8F0; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: #FFFFFF; }
html.dark .translucent-menu { background-color: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.1); }
html.dark .section-bg { background-color: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.1); }
html.dark footer { background-color: rgba(0, 0, 0, 0.5); }
html.dark .mixer-icon-button { background-color: #2D3748; border-color: #4A5568; }
html.dark .mixer-icon-button.active { border-color: var(--runa-primary); }
html.dark input[type="range"] { --track-background: #4A5568; }
html.dark .cart-modal-content { background-color: rgba(17, 17, 17, 0.75); border: 1px solid rgba(255, 255, 255, 0.1); }
html.dark .video-list-button.active { background-color: rgba(255,255,255,0.15); }
html.dark .ghost-button { border-color: rgba(255, 255, 255, 0.8); color: white; }
html.dark .ghost-button:hover { background-color: rgba(255, 255, 255, 0.9); color: #111; }

body { font-family: 'Poppins', sans-serif; transition: background-color 0.4s ease, color 0.4s ease; }

#main-background-video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
#hero { position: relative; overflow: hidden; }
#hero-video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: opacity 0.5s ease-in-out; }
.translucent-menu, .section-bg, footer, .cart-modal-content, .whatsapp-fab, #auth-modal .modal-content-bg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
#video-intro { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 10000; transition: opacity 0.75s ease-out, visibility 0.75s; }
#video-intro.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#page-content { opacity: 0; transition: opacity 0.75s ease-in; transition-delay: 0.2s; visibility: hidden; position: relative; z-index: 10; }
#page-content.loaded { opacity: 1; visibility: visible; }
.modal-enter { animation: fadeIn 0.3s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
#cart-icon-wrapper { position: relative; }
#cart-counter { position: absolute; top: 0; right: 0; transform: translate(25%, -25%); width: 1.25rem; height: 1.25rem; background-color: #DC2626; color: white; font-size: 0.75rem; font-weight: bold; display: flex; align-items: center; justify-content: center; border-radius: 0.25rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 5px; outline: none; background: transparent; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: var(--runa-primary); cursor: pointer; border-radius: 50%; border: 2px solid; border-color: #FDFBF8; margin-top: -6px; }
html.dark input[type="range"]::-webkit-slider-thumb { border-color: #111; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; background: var(--runa-primary); cursor: pointer; border-radius: 50%; border: 2px solid; border-color: #FDFBF8; }
html.dark input[type="range"]::-moz-range-thumb { border-color: #111; }
input[type="range"]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; border-radius: 5px; background: linear-gradient(to right, var(--slider-track-color) var(--value-percent, 0%), var(--track-background) var(--value-percent, 0%)); }
input[type="range"]::-moz-range-track { width: 100%; height: 8px; cursor: pointer; border-radius: 5px; background: linear-gradient(to right, var(--slider-track-color) var(--value-percent, 0%), var(--track-background) var(--value-percent, 0%)); }
.mixer-icon-button { border: 2px solid; transition: border-color 0.3s ease; display: flex; align-items: center; justify-content: center; }
.mixer-icon-button img { width: 100%; height: 100%; object-fit: cover; }
.book-viewer-container { position: relative; width: 100%; max-width: 350px; height: 500px; margin: 0 auto; cursor: grab; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.book-viewer-container:hover { transform: scale(1.05); }
.book-viewer-container:active { cursor: grabbing; }
#book-viewer { width: 100%; height: 100%; border-radius: 0.75rem; background-color: transparent; --poster-color: transparent; }
html:not(.dark) .whatsapp-fab { background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.1); }
html.dark .whatsapp-fab { background-color: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); }
.payment-logo { filter: grayscale(100%); transition: filter 0.3s ease; opacity: 0.7; }
.payment-logo:hover { filter: grayscale(0%); opacity: 1; }
#ar-viewer::part(ar-button) { border-width: 2px; border-radius: 0.5rem; background: transparent; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.125rem; padding: 0.75rem 2rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); transition: all 0.3s ease; position: absolute; bottom: 1rem; right: 1rem; }
#ar-viewer::part(ar-button):hover { transform: scale(1.05); }
html.dark #ar-viewer::part(ar-button) { border-color: rgba(255, 255, 255, 0.8); color: white; }
html.dark #ar-viewer::part(ar-button):hover { background-color: rgba(255, 255, 255, 0.9); color: #111; }
html:not(.dark) #ar-viewer::part(ar-button) { border-color: var(--runa-primary); color: var(--runa-primary); }
html:not(.dark) #ar-viewer::part(ar-button):hover { background-color: var(--runa-primary); color: white; }

#slider-track {
    cursor: grab;
}

#slider-track:active {
    cursor: grabbing;
}

#text-swipe-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    animation: text-swipe-animation 3s ease-in-out infinite;
}

#text-swipe-hint.text-swipe-hint-hidden {
    opacity: 0;
    display: none;
}

@keyframes text-swipe-animation {
    0%, 100% {
        transform: translateX(-50%) scale(1);
    }
    50% {
        transform: translateX(-50%) scale(1.05);
    }
}

/* --- ESTILOS DEL ARO DE LUZ EXTERIOR (VERSIÓN FINAL) --- */
#user-profile-button {
    position: relative;
    /* Aseguramos que el brillo no se corte */
    overflow: visible;
    border: none !important; /* Quitamos bordes previos */
}

.auth-icon-ring {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /* El aro es más grande que el botón para que se vea por fuera */
    width: 140%;
    height: 140%;
    /* Se coloca detrás de la imagen */
    z-index: -1;
}

/* Animación de rotación para Google */
@keyframes rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Animación de brillo intenso para Facebook */
@keyframes glow-neon-blue {
    0%, 100% {
        box-shadow: 0 0 4px #1877F2, 0 0 8px #1877F2, 0 0 12px #00d5ff, 0 0 16px #00d5ff;
    }
    50% {
        box-shadow: 0 0 6px #00d5ff, 0 0 12px #00d5ff, 0 0 18px #1877F2, 0 0 24px #1877F2;
    }
}

/* Animación de brillo intenso para Apple */
@keyframes glow-white-halo {
    0%, 100% {
        box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #eee;
    }
    50% {
        box-shadow: 0 0 8px #fff, 0 0 16px #fff, 0 0 24px #eee;
    }
}

/* Google: Aro con gradiente de colores, desenfocado y en rotación */
.auth-icon-ring.ring-google {
    background: conic-gradient(from 0deg, #EA4335, #FBBC05, #34A853, #4285F4, #EA4335);
    animation: rotate 3s linear infinite;
    filter: blur(6px); /* ESTA es la clave para el brillo de neón */
    box-shadow: none; /* No necesita sombra adicional */
}

/* Facebook: Aro transparente con sombra azul animada */
.auth-icon-ring.ring-facebook {
    background: transparent;
    animation: glow-neon-blue 2s ease-in-out infinite;
    filter: none;
}

/* Apple: Aro transparente con sombra blanca animada */
.auth-icon-ring.ring-apple {
    background: transparent;
    animation: glow-white-halo 2s ease-in-out infinite;
    filter: none;
}

#user-profile-picture.zoom-fb-carousel {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover !important;
}