    
 <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
			font-family: 'Inter', sans-serif;
			color: #fff;
			/*background: #000;*/
			overflow-x: hidden;
			background: #000;
    		letter-spacing: 0.2px;
        }
        /* Fullscreen Slider */
        .slider {
            position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh; /* 🔥 clave */
			overflow: hidden;
			z-index: -1;
        }
        .slide {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            opacity: 0;
            animation: slideShow 40s infinite;
			transition: opacity 1.5s ease-in-out;
			will-change: opacity;
			transform: scale(1.05);
			filter: brightness(1.05) contrast(1.05);
		}
		.slider::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			background: linear-gradient(
				rgba(0,0,0,0.25),
				rgba(0,0,0,0.65)
			);
			top: 0;
			left: 0;
		
        }
        .slide:nth-child(1) { animation-delay: 0s; }
        .slide:nth-child(2) { animation-delay: 10s; }
        .slide:nth-child(3) { animation-delay: 20s; }
        .slide:nth-child(4) { animation-delay: 30s; }

        @keyframes slideShow {
			0% { opacity: 0; transform: scale(1.05); }
			10% { opacity: 1; transform: scale(1); }
			40% { opacity: 1; transform: scale(1); }
			50% { opacity: 0; transform: scale(1.05); }
			100% { opacity: 0; transform: scale(1.05); }
		}

        /* Main Content */
        .container {
            position: relative;
            margin: auto;
            padding: 0px;
            text-align: left;

        }
		.box {
			display: flex;
			justify-content: space-between;
			gap: 0px; /* separación entre columnas */
			padding: 0px;
		}

		/* Columnas */
		.box-izq, .box-der {
			flex: 1;                /* ambas ocupan el mismo espacio */
			padding: 30px;
			border-radius: 8px;
		}

		/* Para el cuadro central */
	    .box-central {
			width: 100%;
			padding: 20px 60px;
			border-radius: 8px;
			text-align: left;
			animation: fadeUp 1.2s ease;
		}

		/* RESPONSIVE: en pantallas pequeñas se apilan */
		@media (max-width: 768px) {
			.box {
				flex-direction: column;
			}
		}
		@keyframes fadeUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
        h1 { 
			
			font-family: 'Urbanist', sans-serif;
			font-size: 3.2rem;
			font-weight: 700;
			letter-spacing: -1px;
			text-transform: none;
			color: #FFD00C;			

			text-shadow:
				1px 1px 2px black,
				0 0 1em black,
				0 0 0.2em black;
			margin: auto;
			animation: lights 5s 750ms linear infinite;
            border-radius: 12px;
			background: linear-gradient(90deg, #fff 0%, #e8e8e8 40%, #cbcbcb 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

        h3 { 
			font-family: 'Poppins', sans-serif;
			font-weight: 600;
    		letter-spacing: -0.1px;
			text-shadow:1px 1px 2px black,
				0 0 1em black,
				0 0 0.2em black;
			font-size: 1.1rem; 
			opacity: 0.8; 
			margin-bottom: 20px; 
			text-align: left;
		}
		h2{ 
			font-family: 'Poppins', sans-serif;
			font-weight: 550;
    		letter-spacing: 0.5px;
			text-shadow:1px 1px 2px black,
				0 0 1em black,
				0 0 0.2em black;
			font-size: 1rem; 
			opacity: 0.8; 
			margin-bottom: 15px; 
		}
		h1, h2, h3 {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		
		
		.hero-tagline {
			font-family: 'Poppins', sans-serif;
			font-size: 1.25rem;
			font-weight: 400;
			letter-spacing: -0.3px;
			line-height: 1.7;
			opacity: 0.85;
			margin-top: 10px;
			margin-bottom: 25px;
 			backdrop-filter: blur(2px);
			color: rgba(255,255,255,0.85);

    		text-shadow: 0 2px 12px rgba(0,0,0,0.55);
    		max-width: 580px;
		}
		@media (max-width: 768px) {
			.hero-tagline {
				font-size: 1rem;
				line-height: 1.5;
				padding: 0 10px;
			}
		}
		.highlight {
			color: #FFD00C;
			font-weight: 600;
			letter-spacing: 0.5px;
		}
        p {  
			text-shadow:0 2px 6px rgba(0,0,0,0.4);
			color: white; 
			font-family: 'Inter', sans-serif;
    		line-height: 1.5;
	    	font-size: 0.95rem;
			
		}
		.pscrow {
			margin-top: 15px;
			padding: 10px 16px;
			border-radius: 30px;
			font-size: 0.85rem;
			background: rgba(212,175,55,0.08);
			border: 0.5px solid rgba(212,175,55,0.4);
			color: #f5d27a;
			text-align: center;
			letter-spacing: 0.5px;
			text-shadow:0 2px 6px rgba(247,172,11,0.40);
			}
		.badges span {			
			display: inline-block;
			padding: 7px 20px;
			margin: 6px;
			border-radius: 20px;
			font-size: 0.85rem;
			background: rgba(255,255,255,0.05);
			border: 1px solid rgba(255, 208, 12, 0.25);
			backdrop-filter: blur(6px);
			transition: all 0.25s ease;
		}
		.badges span:hover {
			box-shadow:
				0 0 10px rgba(255, 208, 12, 0.4),
				0 8px 25px rgba(0,0,0,0.4);
		}
		.badges span {
			opacity: 0;
			transform: translateY(10px);
			animation: badgeFade 0.6s ease forwards;
		}

		.badges span:nth-child(1) { animation-delay: 0.2s; }
		.badges span:nth-child(2) { animation-delay: 0.3s; }
		.badges span:nth-child(3) { animation-delay: 0.4s; }
		.badges span:nth-child(4) { animation-delay: 0.5s; }
		.badges span:nth-child(5) { animation-delay: 0.6s; }

		@keyframes badgeFade {
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}		
		@media (max-width: 768px) {
			.badges span:active {
				background: rgba(255, 208, 12, 0.2);
			}
		}		
		.badges span i {
			margin-right: 6px;
			font-size: 0.8rem;
			opacity: 0.9;
		}		
		.badges span.active {
			background: linear-gradient(135deg, #FFD00C, #F5B634);
			color: #222;
			border: none;

			box-shadow: 0 8px 25px rgba(0,0,0,0.4);
		}		
		.badges span:hover i {
			transform: scale(1.2);
			transition: 0.2s;
		}		
		
		.badges span.active {
			background: linear-gradient(135deg, #FFD00C, #F5B634);
			color: #2a2a2a !important; /* 🔥 fuerza el color */
			border: none;

			box-shadow: 0 8px 25px rgba(0,0,0,0.4);
		}

		@keyframes pulseGlow {
			0% { box-shadow: 0 0 0 rgba(255,208,12,0.4); }
			50% { box-shadow: 0 0 12px rgba(255,208,12,0.6); }
			100% { box-shadow: 0 0 0 rgba(255,208,12,0.4); }
		}		
	
        /* Contact Form */
        form {
            background: rgba(255,255,255,0.08);
            padding: 25px;
            border-radius: 10px;
            margin-top: 20px;
        }
        input, textarea {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border-radius: 8px;
            border: none;
      		background: rgba(255,255,255,0.08);
			color: #fff;
			border: 1px solid rgba(255,255,255,0.3);
		}

		input::placeholder,
		textarea::placeholder {
			color: rgba(255,255,255,0.5);
		}
	button {
		width: 100%;
		padding: 14px 20px;

		background: linear-gradient(135deg, #FFD00C, #F5B634);
		color: #2a2a2a;

		font-weight: 600;
		font-size: 0.95rem;
		letter-spacing: 0.6px;

		border: none;
		border-radius: 10px;

		cursor: pointer;
		transition: all 0.25s ease;

		box-shadow: 0 8px 25px rgba(0,0,0,0.35);
	}
	button:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 30px rgba(0,0,0,0.45);
	}	
	button:active {
		transform: scale(0.98);
	}

		.appstrategicos,
		.whydomain {
			background: rgba(0,0,0,0.35);
			backdrop-filter: blur(10px) saturate(120%);
			border-radius: 14px;

			padding: 25px 25px;
			margin-bottom: 25px;

			border: 1px solid rgba(255, 208, 12, 0.25);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			box-shadow: 0 10px 30px rgba(0,0,0,0.4);
		}		
		.appstrategicos:hover,
		.whydomain:hover {
			transform: translateY(-3px);
			box-shadow: 0 20px 50px rgba(0,0,0,0.5);
		}		
		.appstrategicos h2,
		.whydomain h2 {
			font-size: 1.15rem;
			margin-bottom: 15px;
			letter-spacing: 0.6px;
			color: #FFD00C;
			text-transform: none;
			font-weight: 600;
		}		

		.appstrategicos strong {
			display: block;
			margin-top: 12px;
			font-weight: 600;
			color: #fff;
		}

		.appstrategicos p {
			margin-left: 10px;
			margin-bottom: 10px;
			opacity: 0.75;
		}		
		.whydomain p {
			margin: 6px 0;
			padding-left: 14px;
			position: relative;
			opacity: 0.8;
		}
		.appstrategicos p,
		.whydomain p {
			font-size: 0.95rem;
			line-height: 1.65;
		}
		.whydomain p::before {
			color: #FFD00C;
			font-size: 0.9rem;
		}	

		.appstrategicos strong:hover,
		.whydomain p:hover {
			color: #FFD00C;
			transition: 0.3s;
		}		

		@media (max-width: 768px) {

			.appstrategicos,
			.whydomain {
				margin: 20px 12px;
				padding: 20px 18px;
			}

		}		

        /* Footer */
		footer {
			margin-top: 5px;
			padding: 40px 20px;
			text-align: center;
			font-size: 0.9rem;
			color: rgba(255,255,255,0.7);
			background: rgba(0,0,0,0.34);
			backdrop-filter: blur(8px);
			border-top: 1px solid rgba(255,255,255,0.1);
		}
		footer a {
			color: #F5B634;
			text-decoration: none;
			font-weight: 600;
		}
		footer a:hover {
			opacity: 0.8;
		}
		/* texto h1 aurora */		
		@keyframes lights {
		  0% {
			color: hsl(230, 90%, 80%);
			text-shadow:
			  0 0 1em hsla(50,100%,50%,0.20),
			  0 0 0.125em hsla(320, 100%, 60%, 0.3),
			  -1em -0.125em 0.5em hsla(40, 100%, 60%, 0),
			  1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
		  }

		  30% { 
			color: hsla(56,97%,50%,1.00);
			text-shadow:
			  0 0 1em hsla(52,100%,50%,0.50),
			  0 0 0.125em hsla(48,100%,60%,0.50),
			  -0.5em -0.125em 0.25em hsla(304,97%,50%,0.20),
			  0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
		  }

		  40% { 
			color: hsla(50,95%,44%,1.00);
			text-shadow:
			  0 0 1em hsla(24,100%,50%,0.50),
			  0 0 0.125em hsla(320, 100%, 90%, 0.5),
			  -0.25em -0.125em 0.125em hsla(40, 100%, 60%, 0.2),
			  0.25em 0.125em 0.125em hsla(200, 100%, 60%, 0.4);
		  }

		  70% {
			color: hsl(230, 80%, 90%);
			text-shadow:
			  0 0 1em hsla(48,100%,50%,0.50),
			  0 0 0.125em hsla(56,100%,60%,0.50),
			  0.5em -0.125em 0.25em hsla(40, 100%, 60%, 0.2),
			  -0.5em 0.125em 0.25em hsla(200, 100%, 60%, 0.4);
		  }

		  100% {
			color: hsla(359,94%,50%,1.00);
			text-shadow:
			  0 0 1em hsla(320, 100%, 50%, 0.2),
			  0 0 0.125em hsla(320, 100%, 60%, 0.3),
			  1em -0.125em 0.5em hsla(48,100%,60%,0.00),
			  -1em 0.125em 0.5em hsla(200, 100%, 60%, 0);
		  }

		}
		/* texto h1 aurora */

		.dropping-texts {
		  display: inline-block;
		  width: 180px;
		  text-align: left;
		  height: 36px;
		  vertical-align: -18px;
		}

		.dropping-texts > div {
		  font-size:0px;
		  animation: fadeSlide 22s infinite;
		  opacity:0;
		  margin-left:-30px;
		  position:absolute;
		  font-weight:600;   
		  
	box-shadow: 0px 15px 20px -10px rgba(0,0,0,0.15);	
		}
	.dropping-texts > div:nth-child(1) {
	  animation: roll 18s ease-in-out infinite 0s;
	}
	.dropping-texts > div:nth-child(2) {
	  animation: roll 18s ease-in-out infinite 3s;
	}
	.dropping-texts > div:nth-child(3) {
	  animation: roll 18s ease-in-out infinite 6s;
	}
	.dropping-texts > div:nth-child(4) {
	  animation: roll2 18s ease-in-out infinite 9s;
	}

		.social-proof{
		margin-top:18px;
		opacity:0.85;
		font-size:0.85rem;
		margin-bottom:20px;
		text-align:left;
		}
		.social-links{
		margin:6px 0 0 30px;
		}
		.social-links a{
		display:inline-block;
		margin:4px 8px;
		padding:5px 12px;
		border:1px solid rgba(255,255,255,0.25);
		border-radius:14px;
		text-decoration:none;
		color:#fff;
		font-size:0.8rem;
		transition:0.3s;
		}
		.social-links a:hover{
		background:rgba(255,255,255,0.1);
		}		
		.social-message{
		font-size:0.9rem;
		opacity:0.85;
		margin-bottom:8px;
		}
		.social-icons span{
		display:inline-block;
		margin:4px 6px;
		padding:4px 10px;
		border:1px solid rgba(255,255,255,0.25);

		border-radius:12px;
		font-size:0.8rem;
		opacity:0.8;
		}
		.contact-invite{
		margin-top:10px;
		font-size:0.85rem;
		opacity:0.75;
		}	
		@keyframes roll {
		  0% {
			font-size:0px;
			opacity:0;
			margin-left:-30px;
			margin-top:0px;
			transform: translateY(-20px);
		  }
		  3% {
			opacity:1;
			transform: translateY(0px);
		  }
		  5% {
			font-size:inherit;
			opacity:1;
			margin-left:0px;
			margin-top:0px;
		  }
		  20% {
			font-size:inherit;
			opacity:1;
			margin-left:0px;
			margin-top:0px;
			transform: translateY(0px);
		  }
		  27% {
			font-size:0px;
			opacity:0.5;
			margin-left:20px;
			margin-top:100px;
		  }
		  100% {
			font-size:0px;
			opacity:0;
			margin-left:-30px;
			margin-top:0px;
			transform: translateY(20px);
		  }
		}

		@keyframes roll2 {
		  0% {
			font-size:0px;
			opacity:0;
			margin-left:-30px;
			margin-top:0px;
			transform: translateY(-20px);
		  }
		  3% {
			opacity:1;
			transform: translateY(0px);
		  }
		  5% {
			font-size:inherit;
			opacity:1;
			margin-left:0px;
			margin-top:0px;
		  }
		  30% {
			font-size:inherit;
			opacity:1;
			margin-left:0px;
			margin-top:0px;
			transform: translateY(0px);
		  }
		  37% {
			font-size:1500px;
			opacity:0;
			margin-left:-1000px;
			margin-top:-800px;
		  }
		  100% {
			font-size:0px;
			opacity:0;
			margin-left:-30px;
			margin-top:0px;
			transform: translateY(20px);
		  }
		}

		@keyframes bg {
		  0% {background: #ff0075;}
		  3% {background: #0094ff;}
		  20% {background: #0094ff;}
		  23% {background: #b200ff;}
		  40% {background: #b200ff;}
		  43% {background: #8BC34A;}
		  60% {background: #8BC34A;}
		  63% {background: #F44336;}
		  80% {background: #F44336;}
		  83% {background: #F44336;}
		  100% {background: #F44336;}
		}
	@media (max-width: 768px) {

    .box-central {
        padding: 40px 20px;
        text-align: center;
    }

    h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    h2 {
        font-size: 0.9rem;
    }

    h3 {
        font-size: 0.95rem;
        text-align: center;
    }

    .dropping-texts {
        width: 140px;
        height: 28px;
    }

    .box {
        padding: 0 20px;
    }

}
	@media (max-width: 768px) {
    .badges span {
        font-size: 0.75rem;
        padding: 5px 14px;
    }
}
    </style>