:root {
          --color-primary: #8C7B6C;
          --color-primary-dark: #736558;
          --color-gold: #D4AF37;
          --color-venezuela: #B8860B;
          --color-europa: #556B2F;
          --color-bg: #F8F5F2;
          --mystic-purple: #6A0DAD;
          --mystic-lila: #C084FC;
          --mystic-dark: #111;
          --mystic-light: #F3F4F6;
          --glass-bg: rgba(255, 255, 255, 0.05);
          --glass-border: rgba(255, 255, 255, 0.1);
          --accent-venezuela: #B8860B;
          --accent-gold: #D4AF37;
          --text-light: #4A4A4A;
        }

        body {
          font-family: 'Inter', sans-serif;
          background-color: var(--color-bg);
          color: #4A4A4A;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          font-family: 'Playfair Display', serif;
        }

        .mystic-gradient {
          background: linear-gradient(135deg, var(--mystic-purple) 0%, var(--color-primary) 50%, var(--color-gold) 100%);
          background-size: 400% 400%;
          animation: gradientShift 8s ease infinite;
        }

        @keyframes gradientShift {
          0% {
            background-position: 0% 50%;
          }

          50% {
            background-position: 100% 50%;
          }

          100% {
            background-position: 0% 50%;
          }
        }

        .btn-mystic {
          padding: 0.75rem 2rem;
          /* Stronger contrast: Deep Amber to Burnt Orange (Terracota-ish) */
          background: linear-gradient(135deg, #D97706, #C2410C);
          color: #fff;
          font-weight: 700;
          letter-spacing: 0.05em;
          border-radius: 9999px;
          border: 1px solid rgba(255, 255, 255, 0.2);
          transition: all 0.3s ease;
          box-shadow: 0 4px 15px rgba(194, 65, 12, 0.4);
        }

        .btn-mystic:hover {
          transform: translateY(-2px) scale(1.05);
          /* Brighter on hover */
          background: linear-gradient(135deg, #F59E0B, #EA580C);
          box-shadow: 0 8px 30px rgba(245, 158, 11, 0.6);
          border-color: rgba(255, 255, 255, 0.4);
        }

        .card-3d {
          transform-style: preserve-3d;
          transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .card-3d:hover {
          transform: rotateX(5deg) rotateY(-5deg) translateY(-8px);
        }

        .carousel-track {
          display: flex;
          gap: 1.5rem;
          width: max-content;
          animation: scroll 30s linear infinite;
          position: relative;
        }

        .carousel-track::before,
        .carousel-track::after {
          content: '';
          position: absolute;
          top: 0;
          width: 100px;
          height: 100%;
          pointer-events: none;
          z-index: 10;
        }

        .carousel-track::before {
          left: 0;
          background: linear-gradient(to right, rgba(17, 4, 39, 1), rgba(17, 4, 39, 0));
        }

        .carousel-track::after {
          right: 0;
          background: linear-gradient(to left, rgba(17, 4, 39, 1), rgba(17, 4, 39, 0));
        }

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

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

        /* Estilos para tarjetas de carrusel con efecto flip */
        .flip-card-container {
          perspective: 1000px;
          width: 280px;
          height: 320px;
        }

        .flip-content {
          position: relative;
          width: 100%;
          height: 100%;
          transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transform-style: preserve-3d;
        }

        .flip-card-container:hover .flip-content,
        .flip-card-container.flipped .flip-content {
          transform: rotateY(180deg);
        }

        .flip-front,
        .flip-back {
          position: absolute;
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 12px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        .flip-front {
          transform: rotateY(0deg);
          padding: 0;
          /* No padding for image cards */
          overflow: hidden;
        }

        .flip-back {
          transform: rotateY(180deg);
          flex-wrap: wrap;
          padding: 1.5rem;
          /* Keep padding for content back */
        }

        /* Estilos para carruseles tradicionales (cursos y coaches) */
        .carousel-slide {
          min-width: 100%;
          display: none;
          opacity: 0;
          transition: opacity 0.5s ease-in-out;
        }

        .carousel-slide.active {
          display: block;
          opacity: 1;
        }

        #courses-carousel-wrapper,
        #coaches-carousel-wrapper {
          position: relative;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 400px;
        }

        .oracle-modal {
          position: fixed;
          inset: 0;
          z-index: 10000;
          display: none;
          align-items: center;
          justify-content: center;
          background-color: rgba(0, 0, 0, 0.85);
          backdrop-filter: blur(5px);
        }

        .oracle-modal.flex {
          display: flex;
        }

        .oracle-container {
          position: relative;
          width: 300px;
          height: 480px;
          transform: scale(0.9);
          opacity: 0;
          transition: all 0.5s ease;
          perspective: 1000px;
        }

        .oracle-container.scale-100 {
          transform: scale(1);
          opacity: 1;
        }

        .oracle-card {
          position: relative;
          width: 100%;
          height: 100%;
          cursor: pointer;
          transform-style: preserve-3d;
          transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .oracle-card.flipped {
          transform: rotateY(180deg);
        }

        .oracle-face {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          border-radius: 20px;
          backface-visibility: hidden;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          overflow: hidden;
        }

        .oracle-front {
          transform: rotateY(0deg);
        }

        .oracle-back {
          transform: rotateY(180deg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-end;
          padding: 2rem;
          text-align: center;
          color: white;
          position: relative;
        }

        /* Capa oscura para legibilidad del texto sobre imagen */
        .oracle-back::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 70%;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
          z-index: 1;
          border-radius: 20px;
        }

        /* Asegurar que el contenido está sobre la capa oscura */
        #oracle-title,
        #oracle-message,
        .oracle-share-btn {
          position: relative;
          z-index: 2;
        }

        #oracle-title {
          color: var(--color-gold);
          text-transform: uppercase;
          letter-spacing: 2px;
        }

        #oracle-message {
          font-size: 1.1rem;
          line-height: 1.6;
          font-style: italic;
        }

        .oracle-share-btn {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          padding: 0.75rem 1.5rem;
          background-color: rgba(212, 175, 55, 0.2);
          color: white;
          border: 1px solid var(--color-gold);
          border-radius: 9999px;
          transition: all 0.3s;
          backdrop-filter: blur(5px);
          margin-top: auto;
        }

        .oracle-share-btn:hover {
          background-color: var(--color-gold);
          color: #1a1a1a;
        }

        /* Toast de notificación para compartir */
        .oracle-toast {
          position: fixed;
          bottom: 20px;
          left: 50%;
          transform: translateX(-50%) translateY(150px);
          background: rgba(212, 175, 55, 0.95);
          color: white;
          padding: 1rem 1.5rem;
          border-radius: 9999px;
          box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
          z-index: 10001;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          backdrop-filter: blur(10px);
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.95rem;
          white-space: nowrap;
        }

        .oracle-toast.show {
          transform: translateX(-50%) translateY(0);
        }

        /* Estado de carga para imágenes de arcanos */
        .oracle-back.image-loading {
          background: linear-gradient(45deg, rgba(212, 175, 55, 0.1) 25%, transparent 25%, transparent 50%, rgba(212, 175, 55, 0.1) 50%, rgba(212, 175, 55, 0.1) 75%, transparent 75%, transparent);
          background-size: 50px 50px;
          animation: imageLoadingAnimation 1.5s linear infinite;
        }

        @keyframes imageLoadingAnimation {
          0% {
            background-position: 0 0;
          }

          100% {
            background-position: 50px 50px;
          }
        }

        /* Video de fondo fijo en TODAS las secciones */
        #bg-video {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: -1;
        }

        /* Overlay oscuro sobre el video */
        .video-overlay {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(17, 4, 39, 0.6) 100%);
          z-index: 0;
        }

        /* Todas las secciones quedan sobre el video */
        section {
          position: relative;
          z-index: 1;
        }

        /* Scrollbar Styles moved from services page */
        ::-webkit-scrollbar {
          width: 8px;
        }

        ::-webkit-scrollbar-track {
          background: #050505;
        }

        ::-webkit-scrollbar-thumb {
          background: #333;
          border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
          background: #FFD700;
        }