* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'EB Garamond', serif;
     background: #000000;
     color: #ffffff;
     overflow-x: hidden;
 }

 .hero {
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 /* Video de fondo */
 .background-video {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translate(-50%, -50%);
     z-index: 0;
     opacity: 0.15;
     filter: grayscale(100%) brightness(0.5);
     display: none;
 }

 /* Galería de fotos de fondo */
 .background-gallery {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
     padding: 0 5%;
 }

 .bg-photo {
     height: 70vh;
     width: auto;
     object-fit: cover;
     border-radius: 30px;

     transition: all 0.6s ease;
     opacity: 100;
     transform: rotate(0deg);
 }

 .bg-photo:nth-child(1) {
     transform: rotate(-8deg) translateY(-20px);
     z-index: 1;
 }

 .bg-photo:nth-child(2) {
     transform: rotate(4deg) translateY(30px);
     z-index: 2;
 }

 .bg-photo:nth-child(3) {
     transform: rotate(-3deg) translateY(-10px);
     z-index: 3;
 }

 .bg-photo:nth-child(4) {
     transform: rotate(6deg) translateY(20px);
     z-index: 2;
 }

 .bg-photo:nth-child(5) {
     transform: rotate(-5deg) translateY(-25px);
     z-index: 1;
 }

 .bg-photo:hover {
     filter: grayscale(20%) brightness(0.6) contrast(1.3);
     transform: scale(1.05) rotate(0deg) !important;
     opacity: 0.7;
     z-index: 10 !important;
 }

 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(circle at center, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.85) 100%);
     z-index: 1;
 }

 .content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 0 40px;
 }

 .logo {
     font-size: 1rem;
     letter-spacing: 4px;
     color: #00FFA3;
     margin-bottom: 60px;
     font-weight: 500;
     opacity: 0;
     animation: fadeInDown 1s ease 0.3s forwards;
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-title {
     font-size: clamp(3rem, 10vw, 8rem);
     font-weight: 900;
     line-height: 0.9;
     margin-bottom: 30px;
     letter-spacing: -4px;
     opacity: 0;
     animation: fadeInUp 1s ease 0.5s forwards;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(50px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .hero-subtitle {
     font-size: clamp(1.2rem, 3vw, 2rem);
     font-weight: 300;
     color: #a0a0a0;
     margin-bottom: 60px;
     letter-spacing: 2px;
     opacity: 0;
     animation: fadeInUp 1s ease 0.7s forwards;
 }

 .cta-button {
     display: inline-block;
     padding: 20px 50px;
     background: transparent;
     border: 2px solid #00FFA3;
     color: #ffffff;
     text-decoration: none;
     font-size: 1rem;
     font-weight: 600;
     letter-spacing: 2px;
     text-transform: uppercase;
     transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
     position: relative;
     overflow: hidden;
     opacity: 0;
     animation: fadeInUp 1s ease 0.9s forwards;
 }

 .cta-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #00FFA3 0%, #00D98A 100%);
     transition: all 0.4s ease;
     z-index: -1;
 }

 .cta-button:hover::before {
     left: 0;
 }

 .cta-button:hover {
     border-color: #00FFA3;
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 255, 163, 0.3);
 }

 /* Grid decorativo */
 .grid {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
     background-size: 100px 100px;
     z-index: 1;
     pointer-events: none;
 }

 /* Navegación */
 nav {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     padding: 40px 60px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     z-index: 100;
     opacity: 0;
     animation: fadeInDown 1s ease 0.2s forwards;
 }

 .nav-logo {
     font-size: 1.2rem;
     font-weight: 700;
     letter-spacing: 2px;
 }

 .nav-links {
     display: flex;
     gap: 40px;
     list-style: none;
 }

 .nav-links a {
     color: #ffffff;
     text-decoration: none;
     font-size: 0.9rem;
     font-weight: 500;
     letter-spacing: 1px;
     text-transform: uppercase;
     transition: color 0.3s ease;
     position: relative;
 }

 .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: #00FFA3;
     transition: width 0.3s ease;
 }

 .nav-links a:hover {
     color: #00FFA3;
 }

 .nav-links a:hover::after {
     width: 100%;
 }

 /* Redes sociales lateral */
 .social-sidebar {
     position: fixed;
     right: 40px;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     flex-direction: column;
     gap: 30px;
     z-index: 100;
     opacity: 0;
     animation: fadeInRight 1s ease 1s forwards;
 }

 @keyframes fadeInRight {
     from {
         opacity: 0;
         transform: translateY(-50%) translateX(30px);
     }

     to {
         opacity: 1;
         transform: translateY(-50%) translateX(0);
     }
 }

 .social-sidebar a {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     color: #ffffff;
     transition: all 0.3s ease;
 }

 .social-sidebar a:hover {
     border-color: #00FFA3;
     background: rgba(0, 255, 163, 0.1);
     transform: scale(1.1);
 }

 .social-sidebar svg {
     width: 18px;
     height: 18px;
     fill: currentColor;
 }

 /* Partículas flotantes */
 .particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     pointer-events: none;
 }

 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(0, 255, 163, 0.5);
     border-radius: 50%;
     animation: float 15s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0) translateX(0);
         opacity: 0;
     }

     25% {
         opacity: 1;
     }

     50% {
         transform: translateY(-100vh) translateX(50px);
         opacity: 0.5;
     }

     75% {
         opacity: 1;
     }
 }

 /* Responsive */
 @media (max-width: 768px) {
     nav {
         padding: 30px;
     }

     .nav-links {
         display: none;
     }

     .social-sidebar {
         right: 20px;
         gap: 20px;
     }

     .hero-title {
         letter-spacing: -2px;
     }

     .cta-button {
         padding: 16px 40px;
         font-size: 0.9rem;
     }

     body {
         cursor: auto;
     }
 }