@import url('https://fonts.googleapis.com/css2?family=Alumni+Sans+SC:ital,wght@0,100..900;1,100..900&family=Big+Shoulders+Stencil:opsz,wght@10..72,100..900&family=Bungee+Spice&family=My+Soul&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shadows+Into+Light&family=Silkscreen:wght@400;700&family=Six+Caps&family=Smooch&family=Smooch+Sans:wght@100..900&family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
/* modo base */
:root {
--color-background: #0f0f0f;
--color-background-header:#0c0c0c;
--color-principal-textos: #e6dede;
--color-secundario-textos: #1806bb;
--color-secundario-sombras-hover:#1806bb;
--color-cuarto-efect: #131212;
--color-terciario-bordes-hover: #000000;
--hover-blanco:rgb(255, 255, 255);
--color-inverso:rgb(255, 255, 255);
--color-inverso-textos:rgb(0, 0, 0);
}
body{
background: var(--color-background);
font-family: "Roboto", sans-serif;
overflow-x: hidden;
margin: 0;
position: relative;
}
/* Barra general */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: var(--color-background-header);
}
/* Thumb */
::-webkit-scrollbar-thumb {
background: var(--color-secundario-sombras-hover);
border-radius: 10px;
}
/* Flechas superior e inferior — visibles */
::-webkit-scrollbar-button {
height: 10px;
background: var(--color-background-header);
display: block;
}
/* Flecha superior */
::-webkit-scrollbar-button:single-button:vertical:decrement {
background: var(--color-background-headers)
url("data:image/svg+xml;utf8,")
center no-repeat;
background-size: 7px;
}
/* Flecha inferior */
::-webkit-scrollbar-button:single-button:vertical:increment {
background: var(--color-background-headers)
url("data:image/svg+xml;utf8,")
center no-repeat;
background-size: 7px;
}
/* //////////////////// preloader /////////////// */
/* Contenedor del preloader */
.contenedor-carga {
background-color: #000000;
background-image: linear-gradient(
0deg,
);
height: 100vh;
width: 100vw;
position: fixed;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden !important;
opacity: 1;
visibility: visible;
z-index: 100002;
transition: opacity 1s ease-in-out, visibility 0s 1s;
will-change: opacity, visibility;
margin-top: -100px;
}
/* Clase que activa el fondo translúcido */
.contenedor-carga.fondo-translucido {
background-color: rgba(0, 0, 0, 0.7) !important;
background-image: none !important;
}
/* Bola rebotando con efecto neón */
.bola img {
width: 50px;
height: 50px;
background-color: transparent;
border-radius: 0%;
animation: rebotar 2s ease infinite, pulse-neon 1s infinite;
margin-bottom: 50px;
}
/* Texto principal animado */
.loading-text {
position: relative;
font-family: 'Orbitron', sans-serif;
font-size: 40px;
font-weight: bold;
letter-spacing: 0px;
color: #1806bb;
animation: glitch 0.7s infinite;
text-shadow: 0 0 5px rgb(0, 0, 0), 0 0 10px rgb(0, 0, 0);
z-index: 2;
overflow: hidden;
}
@keyframes glitch {
0% { text-shadow: 2px 0 #1806bb, -2px 0 white; }
20% { text-shadow: -2px 0 #1806bb, 2px 0 white; }
40% { text-shadow: 2px 0 #1806bb, -2px 0 white; }
60% { text-shadow: -1px 0 #1806bb, 1px 0 white; }
80% { text-shadow: 1px 0 #1806bb, -1px 0 white; }
100% { text-shadow: 0 0 5px #1806bb, 0 0 10px #1806bb; }
}
.loading-text::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(120deg, transparent, transparent, transparent);
animation: shineSweep .3s infinite;
mix-blend-mode: screen;
}
@keyframes shineSweep {
0% { left: -100%; }
50% { left: 100%; }
100% { left: 100%; }
}
/* Porcentaje de carga */
.porcentaje-carga {
font-size: 140px;
color: #2c2b2b;
font-weight: bold;
margin-top: 20px;
letter-spacing: 2px;
}
/* Lluvia binaria */
.chips-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.chip {
position: absolute;
color: #1806bb;
font-family: 'Courier New', monospace;
font-size: 24px;
font-weight: bold;
opacity: 1;
animation: chipScroll linear infinite;
white-space: nowrap;
pointer-events: none;
margin-top: -25px;
}
@keyframes chipScroll {
0% {
transform: translateY(-100%);
opacity: 0;
}
30% {
opacity: 0.3;
}
70% {
opacity: 0.5;
}
100% {
transform: translateY(100vh);
opacity: 0;
}
}
/* Efecto de desvanecimiento */
.desvanecer {
opacity: 0;
visibility: hidden;
transition: visibility 0s 1.5s, opacity 1.5s ease;
}
/* Párpados */
.parpado {
position: fixed;
background-color: #1806bb;
background-image: linear-gradient(
1deg,
#0e0d0d,
#030303,
#080808,
#000000
);
width: 100%;
height: 50%;
transition: transform 1.5s ease-in-out 0.3s;
will-change: transform;
z-index: 10003;
border-bottom: 2px solid #1806bb;
}
.parpado.arriba {
top: 0;
transform: translateY(0);
}
.parpado.abajo {
bottom: 0;
transform: translateY(0);
}
.abrir .parpado.arriba {
transform: translateY(-100%);
}
.abrir .parpado.abajo {
transform: translateY(100%);
}
/* Contenido oculto pero accesible para fondo translúcido */
.contenido {
opacity: 0;
pointer-events: none;
transition: opacity 1.5s ease;
}
.activar-transicion {
opacity: 1;
pointer-events: auto;
}
/* Letras animadas */
.letra-animada {
display: inline-block;
opacity: 0;
transform: translateY(30px);
animation: aparecerLetra 0.6s ease-out forwards;
font-size: 30px;
font-family: 'Orbitron', sans-serif;
font-weight: bold;
letter-spacing: 16px;
color: rgb(255, 255, 255);
display: none;
}
@keyframes aparecerLetra {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Botón INICIAR con efecto glow */
.btn-empezar {
margin-top: 0px;
padding: 16px 40px;
font-size: 20px;
font-family: 'Orbitron', sans-serif;
background: linear-gradient(135deg, #1806bb, #1806bb);
color: white;
border: none;
border-radius: 10px;
box-shadow: 0 0 10px #000000, 0 0 20px #000000;
cursor: pointer;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
z-index: 10;
}
.btn-empezar:hover {
box-shadow:
0 0 10px #1806bb,
0 0 20px #1806bb,
0 0 30px #000000;
transform: scale(1.05);
}
.btn-empezar.mostrar {
opacity: 1;
transform: scale(1);
}
.oculto {
display: none;
}
/* Limpieza visual al terminar carga */
.contenedor-carga.limpiar .bola,
.contenedor-carga.limpiar .loading-text,
.contenedor-carga.limpiar .porcentaje-carga,
.contenedor-carga.limpiar .chips-container {
display: none !important;
}
.loader-contenedor {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 20px;
z-index: 2;
}
.loader-texto {
font-family: 'Orbitron', sans-serif;
font-size: 16px;
color: #cccccc;
letter-spacing: 2px;
text-shadow: 0 0 2px #000;
opacity: 0.85;
}
.loader-spinner {
width: 48px;
height: 48px;
border: 2px solid rgba(37, 37, 37, 0.2);
border-top: 2px solid #1806bb;
border-radius: 50%;
animation: girar 1s linear infinite;
background-color: transparent;
}
@keyframes girar {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ////////////////// barra de navegacion y encabezado //////////////////////////// */
/* HEADER */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #050505;
z-index: 2000;
overflow: hidden;
}
/* ILUMINACIÓN PREMIUM — ULTRA SUTIL (10–18px máximo) */
.header-light {
position: absolute;
inset: 0;
/* Glow MÁS angosto, MUCHÍSIMO más pro */
background:
radial-gradient(
circle at var(--x, 50%) 100%,
rgba(255,255,255,0.30) 0%,
rgba(255,255,255,0.18) 2%,
rgba(255,255,255,0.12) 4%,
rgba(255,255,255,0.05) 7%,
rgba(255,255,255,0.0) 11%
);
opacity: 0;
pointer-events: none;
transition: opacity 0.12s linear;
}
/* PUNTO LUMINOSO — Minimalista */
.scanner-dot {
position: absolute;
bottom: 0;
height: 2px;
width: 6px;
background: white;
border-radius: 30px;
/* Mucho menos blur, más profesional */
box-shadow:
0 0 6px rgba(255,255,255,0.9),
0 0 12px rgba(255,0,0,0.4);
}
/* LÁSER PRINCIPAL — Estilo High-end */
.scanner-laser {
position: absolute;
top: -1px;
height: 2px;
width: 50px;
background: rgb(255,255,255);
box-shadow:
0 0 3px rgba(255,255,255,0.85),
0 0 8px rgba(255,255,255,0.45),
0 0 14px rgba(255,60,60,0.20);
opacity: 0.95;
pointer-events: none;
}
header nav {
height: 100px;
display: flex;
justify-content:space-between;
align-items: center;
}
.icono{
display: none;
}
.enlaces {
display: flex;
height: 100%;
width: calc(100% /2);
align-items: center;
justify-content: center;
}
.enlaces a {
flex: 1;
margin: 0px;
background-color: transparent;
color: var(--color-principal-textos);
padding: 20px 50px;
border-radius: 0px;
font-size: 18px;
position: relative;
overflow: hidden;
text-align: center;
transition: color 0.5s ease-in-out;
--mouse-x: 50%; /* Valor por defecto */
--mouse-y: 50%; /* Valor por defecto */
text-transform: capitalize;
opacity: 0.4;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.enlaces a:hover {
color: var(--hover-blanco);
opacity: 1;
}
.enlaces a::before {
content: '';
position: absolute;
top: var(--mouse-y);
left: var(--mouse-x);
width: 10px;
height: 10px;
background: radial-gradient(circle, var(--color-secundario-sombras-hover), var(--color-background-header));
border-radius: 10%;
transform: scale(0);
transition: transform 0.5s ease-out;
z-index: -1;
pointer-events: none;
}
.enlaces a.animate-hover::before {
transform: scale(40);
}
nav .enlace-activo{
background-color: var(--color-secundario-sombras-hover);
color: var(--hover-blanco);
opacity: 1;
}
nav .logo {
display: flex;
align-items: center;
justify-content: center;
}
nav .logo img{
width: 140px;
height: 90px;
object-fit: scale-down;
margin-left: 50px;
}
nav .logo p{
color: var(--color-principal-textos);
font-size: 16px;
font-weight: 900;
margin-left: 20px;
text-transform: uppercase;
}
.login-btn{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 150px;
color: var(--color-principal-textos);
}
.login-btn a{
text-decoration: none;
color: var(--color-principal-textos);
text-transform: uppercase;
font-size: 16px;
}
.login-btn i{
font-size: 30px;
margin-left: 0px;
color: var(--color-principal-textos);
}
.login-btn:hover i{
color: var(--color-secundario-textos);
transition: 0.3s ease;
}
/* //////////////////// section principal //*/
/* titulo vertical canvas y objeto 3d */
.titulo-principal-objeto {
height: 90vh; /* importante para permitir scroll interno */
position: relative;
overflow: visible;
display: flex;
justify-content: space-evenly;
z-index: 10; /* asegura que el contenido esté arriba del fondo */
margin-top: 100px;
isolation: isolate;
}
/* ===== FONDO NEGRO + HALO AZUL SUTIL MEJORADO ===== */
.titulo-principal-objeto::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
pointer-events: none;
opacity: 1;
background:
radial-gradient(
circle at 22% 50%,
rgba(24, 6, 187, 0.28) 0%,
rgba(24, 6, 187, 0.18) 20%,
rgba(24, 6, 187, 0.08) 40%,
rgba(24, 6, 187, 0.03) 55%,
transparent 70%
),
linear-gradient(
to right,
#000000 0%,
#050505 50%,
#000000 100%
);
}
/* ===== RED NEURONAL ===== */
.titulo-principal-objeto .neural-network-main {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
opacity: 0.9;
}
#modelo3D {
width: 55vw;
height: 100vh;
position: relative;
z-index: 92000;
overflow: hidden;
margin:auto;
background-color: transparent;
pointer-events: none;
}
#modelo3D canvas{
margin-top:0px ;
pointer-events: none;
}
/* //////////// contenedor-parrafos-texto-principal parte derecha del width //////////////////////// */
.contenedor-texto-portada {
width: 100%;
color: var(--color-principal);
text-align: center;
overflow: hidden;
}
/* ============================
H1 - Aparición con entrada suave
============================ */
.contenedor-texto-portada h1 {
font-size: 5.5rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 2px;
font-family: "Roboto Condensed", sans-serif;
margin-top: 120px;
font-weight: 600;
color: var(--color-principal-textos);
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1.5s ease-out forwards;
}
/* Animación de aparición genérica */
@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================
H3 - Aparición en cascada
============================ */
.contenedor-texto-portada h3 {
text-align: center;
color: var(--color-principal-textos);
margin-top: 20px;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1.2s ease-out forwards 1.2s;
}
.contenedor-texto-portada h3 span {
color: var(--color-principal);
}
.contenedor-texto-portada h3 .detalle {
color: var(--color-principal);
font-size: 2rem;
text-transform: uppercase;
font-weight: 200;
font-family: "Big Shoulders Stencil", sans-serif;
display: inline-block;
}
/* ============================
Imagen del logo (entrada en cascada)
============================ */
.contenedor-img-redes {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
flex-direction: column;
}
.contenedor-img-redes .logo-text {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
pointer-events: none;
margin-top: 20px;
opacity: 0;
animation: fadeUp 1.2s ease-out forwards 1.7s;
}
.contenedor-img-redes .logo-text img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================
H4 - Aparición final (sin loop)
============================ */
.texto-info h4 {
margin-top: 20px;
font-size: 0.8rem;
font-weight: 200;
color: var(--color-principal-textos);
opacity: 0;
animation: fadeUp 1s ease-out forwards 2s;
}
/* ============================
Redes Sociales (entrada final)
============================ */
.redes {
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
width: 100%;
flex-wrap: wrap;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1.2s ease-out forwards 2.8s;
}
/* Contenedor del ícono */
.icono-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Enlace principal */
.redes a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--color-principal-textos);
position: relative;
}
/* Ícono dentro de un círculo */
.redes i {
font-size: 1.2rem;
width: 55px;
height: 55px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-secundario-sombras-hover);
backdrop-filter: blur(6px);
transition: all 0.4s ease;
cursor: pointer;
}
/* Hover: crece y brilla */
.icono-container:hover i {
transform: scale(1.25);
background: var(--color-background);
color: var(--color-secundario-textos);
}
/* Ocultar texto si lo dejás en el HTML */
.redes a span {
display: none !important;
}
/* === Banner infinito en la portada === */
.banner-infinito {
position: absolute; /* se posiciona dentro de la sección principal */
bottom: 0px;
left: 0;
width: 100%;
background: var(--color-secundario-sombras-hover); /* blanco casi sólido, podés bajarlo a 0.8 si querés ver el fondo */
overflow: hidden;
white-space: nowrap;
z-index: 20; /* sobre el video pero debajo de overlays */
height: 60px;
display: flex;
align-items: center;
justify-content: flex-start;
backdrop-filter: blur(4px); /* le da un toque moderno si el fondo tiene video */
z-index: -1;
}
/* Pista animada de texto */
.banner-track {
display: inline-flex;
align-items: center;
animation: scrollText 25s linear infinite;
will-change: transform;
}
/* Palabras del banner */
.banner-track span {
font-family: "Big Shoulders Stencil", sans-serif;
font-size: 1.6rem;
font-weight: 600;
text-transform: uppercase;
color: var(--color-principal-textos);
margin: 0 60px;
letter-spacing: 3px;
opacity: 0.9;
}
/* Animación de desplazamiento */
@keyframes scrollText {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Ajuste responsive *//*
@media (max-width: 768px) {
.banner-track span {
font-size: 1rem;
margin: 0 35px;
}
.banner-infinito {
height: 45px;
}
}
*/
.scroll-video-wrapper {
height: 100vh;
position: relative;
padding-left: 5%;
padding-right: 45%;
background: #000000;
color: white;
overflow: hidden;
z-index: 1;
--mouse-x: 60%;
--mouse-y: 50%;
--bg-x: 50%;
--bg-y: 50%;
}
/* ===== FONDO NEGRO + HALO AZUL COHERENTE CON CTA ===== */
.scroll-video-wrapper::before {
content: "";
position: absolute;
inset: 0;
z-index: -4;
background:
/* Halo principal profundo */
radial-gradient(
circle at 78% 50%,
rgba(24, 6, 187, 0.30) 0%,
rgba(24, 6, 187, 0.20) 20%,
rgba(24, 6, 187, 0.10) 40%,
rgba(24, 6, 187, 0.04) 55%,
transparent 70%
),
/* Halo secundario celeste (más abierto y suave) */
radial-gradient(
circle at 82% 50%,
rgba(70, 120, 255, 0.20) 0%,
rgba(70, 120, 255, 0.12) 25%,
rgba(70, 120, 255, 0.05) 45%,
transparent 70%
),
/* Base negra */
linear-gradient(
to left,
#000000 0%,
#050505 50%,
#000000 100%
);
}
/* ===== RED NEURONAL 100% WIDTH ===== */
.scroll-video-wrapper .neural-network {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -2;
opacity: 0.2;
}
/* ===== LÍNEAS ELÉCTRICAS SUAVES ===== */
.scroll-video-wrapper .electric-lines {
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
opacity: 0.15;
background:
repeating-linear-gradient(
90deg,
transparent,
transparent 80px,
rgb(10, 44, 199) 81px,
transparent 83px
);
animation: electricFlow 6s linear infinite;
}
@keyframes electricFlow {
from { background-position: 0 0; }
to { background-position: 300px 0; }
}
/* asegúrate de que el contenido quede por encima */
.scroll-video-wrapper > * {
position: relative;
z-index: 1;
}
.contenedor-texto-scroll {
text-align: center;
padding-top: 11vh;
}
/* ===================================================== */
/* TITULO — DESARROLLO WEB & APLICACIONES */
/* ===================================================== */
.titulo-ola {
position: relative;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
/* Tamaño original respetado */
font-size: clamp(2.3rem, 1vw, 3rem);
background: linear-gradient(
120deg,
#ffffff 0%,
#ffffff 20%,
#b8c6ff 40%,
#6d82ff 60%,
#3f54d9 80%,
#ffffff 100%
);
background-size: 300% 300%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
-webkit-font-smoothing: antialiased;
animation: tituloWebShift 8s ease-in-out infinite alternate;
}
@keyframes tituloWebShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* ===================================================== */
/* PÁRRAFO */
/* ===================================================== */
.contenedor-texto-scroll p {
max-width: 680px;
margin: 32px auto 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: rgba(220, 228, 255, 0.88);
font-size: 0.95rem;
line-height: 1.95;
letter-spacing: 0.04em;
text-align: center;
text-wrap: balance;
}
/* ===================================================== */
/* STRONG DEL PÁRRAFO — CORREGIDO Y VISIBLE */
/* ===================================================== */
.contenedor-texto-scroll p strong {
color: #9fb3ff; /* Celeste premium visible */
font-weight: 500;
letter-spacing: 0.07em;
}
/* GALERIAS 3D */
/* ********************* seccion ofertas ************* */
.div-1{
margin-top:0vh;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-perspective: 1000px;
perspective: 1870px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
padding-bottom: 0vh ;
}
/* ///////////////////////////////////////// carrousel principal ////////////////////////// /*/
#drag-container, #spin-container{
width: 100%;
height: 500px;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: rotateX(-10deg);
transform: rotateX(0deg);
}
#drag-container img, #drag-container video {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
line-height: 00px;
font-size: 30px;
text-align: center;
-webkit-box-reflect: below 10px linear-gradient(transparent, transparent, black);
object-fit: cover;
}
/* Animación del borde neón normal */
@keyframes neonBorder {
0% {
border-image: linear-gradient(45deg, white, var(--color-hover), white) 1;
box-shadow: 0 0 5px white;
}
25% {
border-image: linear-gradient(135deg, white, var(--color-hover), white) 1;
box-shadow: 0 0 8px white;
}
50% {
border-image: linear-gradient(225deg, white, var(--color-hover), white) 1;
box-shadow: 0 0 5px white;
}
75% {
border-image: linear-gradient(315deg, white, var(--color-hover), white) 1;
box-shadow: 0 0 8px white;
}
100% {
border-image: linear-gradient(45deg, white, var(--color-hover), white) 1;
box-shadow: 0 0 5px white;
}
}
/* Animación del borde neón al hacer hover */
@keyframes neonBorderHover {
0% {
border-image: linear-gradient(45deg, var(--color-secundario-textos), var(--color-hover), var(--color-secundario-textos)) 1;
box-shadow: 0 0 10px var(--color-secundario-textos), 0 0 20px var(--color-secundario-textos);
}
25% {
border-image: linear-gradient(135deg, var(--color-secundario-textos), var(--color-hover), var(--color-secundario-textos)) 1;
box-shadow: 0 0 15px var(--color-secundario-textos), 0 0 25px var(--color-secundario-textos);
}
50% {
border-image: linear-gradient(225deg, var(--color-secundario-textos), var(--color-hover), var(--color-secundario-textos)) 1;
box-shadow: 0 0 10px var(--color-secundario-textos), 0 0 20px var(--color-secundario-textos);
}
75% {
border-image: linear-gradient(315deg, var(--color-secundario-textos), var(--color-hover), var(--color-secundario-textos)) 1;
box-shadow: 0 0 15px var(--color-secundario-textos), 0 0 25px var(--color-secundario-textos);
}
100% {
border-image: linear-gradient(45deg, var(--color-secundario-textos), var(--color-hover), var(--color-secundario-textos)) 1;
box-shadow: 0 0 10px var(--color-secundario-textos), 0 0 20px var(--color-principal-textos);
}
}
#drag-container p{
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50% - 50%) rotateX(90deg);
transform: translate(-50% - 50%) rotateX(90deg);
}
#ground{
width: 100%;
height: 900%;
position: absolute;
top: 100%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotateX(90deg);
transform: translate(-50%, -50%) rotateX(90deg);
background: -webkit-radial-gradient(center center, farthest-side, transparent);
}
@-webkit-keyframes spin{
from{
-webkit-transform: rotateY(0deg);
transform:rotateY(0deg);
}
to{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spin{
from{
-webkit-transform: rotateY(0deg);
transform:rotateY(0deg);
}
to{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@-webkit-keyframes spinRevert{
from{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
to{
-webkit-transform: rotateY(0deg);
transform:rotateY(0deg);
}
}
@keyframes spinRevert{
from{
-webkit-transform: rotateY(360deg);
transform: rotateY(360deg);
}
to{
-webkit-transform: rotateY(0deg);
transform:rotateY(0deg);
}
}
/* ****************************** MODAL ********************** */
/* Modal Styles */
.modal {
display: none; /* Oculta el modal por defecto */
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(5px);
/* Centrado con flexbox */
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
/* Cuando el modal está activo */
.modal.active {
display: flex;
}
.modal-content {
max-width: 90vw;
max-height: 80vh;
width: auto;
height: auto;
border-radius: 10px;
object-fit: contain;
/* Centrado adicional */
display: block;
margin: 0 auto;
}
.close {
position: fixed;
top: 20px;
right: 30px;
color: var(--color-principal-textos);
font-size: 40px;
font-weight: bold;
cursor: pointer;
z-index: 10001;
background: var(--color-secundario-textos);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
border: 2px solid #fff;
transition: all 0.3s ease;
}
.close:hover {
background: rgba(255, 255, 255, 0.9);
color: var(--color-secundario-textos);
transform: scale(1.1);
}
/* Animaciones */
.modal.active {
animation: fadeIn 0.3s ease-out;
}
.modal-content {
animation: zoomIn 0.3s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* call to action */
.calltoaction{
display: flex;
align-items: center;
justify-content: center;
margin-top: 0vh;
}
.bton{
position: relative;
padding: 10px 30px;
text-decoration: none;
color: white !important;
letter-spacing: 2px;
transition: all 0.6s ease;
font-size: 1rem;
padding-left: 40px;
margin: 20px;
background-color: transparent !important;
font-size: 15px !important;
}
.btn-hover {
position: relative;
font-size: 22px;
padding: 10px 35px;
text-decoration: none;
color: var(--color-principal-textos);
background: transparent;
letter-spacing: 5px;
border: none;
outline: none;
cursor: pointer;
z-index: 1;
overflow: hidden;
transition: background-color 0.4s ease, color 0.4s ease;
}
/* Hover: cambia fondo al color principal */
.btn-hover:hover {
background-color: rgb(8, 2, 32) !important;
color: var(--color-principal-textos) !important; /* Cambia a negro si querés más contraste */
transition: all 0.3s ease;
}
/* base para todos los bordes */
.btn-hover span {
position: absolute;
background-color: var(--color-secundario-textos);
display: block;
}
/* Top border */
.btn-hover .top {
top: 0;
left: 0;
width: 0;
height: 3px;
animation: animateTop 2s ease-in-out infinite;
border: 1px solid rgb(252, 250, 250);
}
/* Right border */
.btn-hover .right {
top: 0;
right: 0;
width: 3px;
height: 0;
animation: animateRight 2s ease-in-out infinite;
animation-delay: 0.5s;
border: 1px solid rgb(252, 250, 250);
}
/* Bottom border */
.btn-hover .bottom {
bottom: 0;
right: 0;
width: 0;
height: 3px;
animation: animateBottom 2s ease-in-out infinite;
animation-delay: 1s;
border: 1px solid rgb(252, 250, 250);
}
/* Left border */
.btn-hover .left {
bottom: 0;
left: 0;
width: 3px;
height: 0;
animation: animateLeft 2s ease-in-out infinite;
animation-delay: 1.5s;
border: 1px solid rgb(252, 250, 250);
}
@keyframes animateTop {
0% { width: 0; }
100% { width: 100%; }
}
@keyframes animateRight {
0% { height: 0; }
100% { height: 100%; }
}
@keyframes animateBottom {
0% { width: 0; right: 0; }
100% { width: 100%; right: 0; }
}
@keyframes animateLeft {
0% { height: 0; }
100% { height: 100%; }
}
/* ===================================================== */
/* CTA WEB & APPS — VERSION MAS PROTAGONISTA */
/* ===================================================== */
.scroll-video-wrapper .btn-hover {
position: relative;
font-size: 20px;
padding: 14px 48px;
letter-spacing: 6px;
/* Fondo leve SIEMPRE activo */
background: linear-gradient(
120deg,
rgba(24, 6, 187, 0.18),
rgba(70, 120, 255, 0.18)
) !important;
border: 1px solid rgba(120, 150, 255, 0.6);
/* Glow muy sutil constante */
box-shadow:
0 0 12px rgba(24, 6, 187, 0.25),
inset 0 0 10px rgba(70, 120, 255, 0.15);
transition: all 0.4s ease;
}
/* Texto más atractivo en reposo */
.scroll-video-wrapper .btn-hover {
background-clip: padding-box;
}
.scroll-video-wrapper .btn-hover {
color: #ffffff !important;
}
/* Hover — más intenso pero coherente */
.scroll-video-wrapper .btn-hover:hover {
background: linear-gradient(
120deg,
rgba(24, 6, 187, 0.35),
rgba(70, 120, 255, 0.35)
) !important;
border-color: rgba(160, 185, 255, 0.9);
box-shadow:
0 0 24px rgba(24, 6, 187, 0.45),
inset 0 0 18px rgba(90, 140, 255, 0.35);
transform: translateY(-2px);
}
/* Bordes animados más visibles */
.scroll-video-wrapper .btn-hover span {
background: linear-gradient(
90deg,
#6d82ff,
#b3c2ff
);
}
/* ==================== */
/* 8 CAJAS ADICIONALES */
/* ==================== */
/* Secciones caja izquierda - Modelo a la IZQUIERDA */
.section-caja-izquierda {
height: 100vh;
position: relative;
padding-left: 40%;
padding-right: 1%;
overflow: hidden;
z-index: 1;
}
/* ===== FONDO NEGRO + HALO AZUL WP CORREGIDO ===== */
.section-caja-izquierda::before {
content: "";
position: absolute;
inset: 0;
z-index: -4;
background:
radial-gradient(
circle at 22% 50%,
rgba(33, 100, 170, 0.32) 0%,
rgba(33, 100, 170, 0.20) 20%,
rgba(33, 100, 170, 0.10) 40%,
rgba(33, 100, 170, 0.04) 55%,
transparent 70%
),
linear-gradient(
to right,
#000000 0%,
#050505 50%,
#000000 100%
);
}
/* CANVAS */
.section-caja-izquierda .neural-network-wp {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.3;
}
/* Secciones caja derecha - Modelo a la DERECHA */
.section-caja-derecha {
height: 100vh;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 5%;
padding-right: 45%;
}
/* Contenido de las cajas */ /* caja izquierda */
.section-caja-izquierda .contenido-caja {
width: 100%;
color: white;
height: 100%;
text-align: center;
overflow: hidden;
margin-top: 10vh;
}
/* ===================================================== */
/* TITULO WORDPRESS — VERSION SUAVIZADA Y EQUILIBRADA */
/* ===================================================== */
.section-caja-izquierda .contenido-caja h2 {
position: relative;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: clamp(2.3rem, 1vw, 3rem);
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 18%,
#a8d8ff 38%,
#4f8ecf 60%,
#2f6fa8 78%,
#ffffff 100%
);
background-size: 320% 320%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
-webkit-font-smoothing: antialiased;
animation: wpTextShift 9s ease-in-out infinite alternate;
}
/* Strong dentro del título */
.section-caja-izquierda .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.11em;
background: linear-gradient(
115deg,
#ffffff 0%,
#a8d8ff 45%,
#4f8ecf 75%
);
background-size: 220% 220%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: wpStrongShift 7s ease-in-out infinite alternate;
}
/* ===================================================== */
/* PÁRRAFO AJUSTADO */
/* ===================================================== */
.section-caja-izquierda .contenido-caja p {
position: relative;
max-width: 680px;
margin: 32px auto 0;
color: rgba(220, 235, 250, 0.88);
font-size: 0.96rem;
line-height: 1.9;
letter-spacing: 0.055em;
font-weight: 300;
font-family: "Roboto", sans-serif;
text-align: center;
text-wrap: balance;
}
/* Strong ahora en celeste elegante */
.section-caja-izquierda .contenido-caja p strong {
color: #a8d8ff;
font-weight: 500;
letter-spacing: 0.07em;
}
/* ===================================================== */
/* LINEA SUTIL DEBAJO DEL PÁRRAFO (estilo 3D adaptado) */
/* ===================================================== */
.section-caja-izquierda .contenido-caja p::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -18px;
width: 120px;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#a8d8ff,
#4f8ecf,
transparent
);
opacity: 0.7;
border-radius: 2px;
animation: wpLinePulse 4s ease-in-out infinite;
}
/* ===================================================== */
/* ANIMACIONES */
/* ===================================================== */
@keyframes wpTextShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes wpStrongShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes wpLinePulse {
0% { opacity: 0.4; width: 90px; }
50% { opacity: 0.85; width: 130px; }
100% { opacity: 0.4; width: 90px; }
}
/* siwper*/
/* --- Swiper 3D --- */
.swiper-container {
width: 100%;
max-width: 900px;
height: 400px;
margin: 2rem auto;
perspective: 1000px; /* sensación 3D */
margin-top: 10vh;
}
.swiper-wrapper {
display: flex;
align-items: center;
}
.swiper-slide {
position: relative;
width: 300px;
height: 380px;
transition: transform 0.6s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
cursor: pointer;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px;
display: block;
}
.swiper-slide::after {
content: "";
position: absolute;
bottom: -40%;
left: 0;
width: 100%;
height: 100%;
background: inherit;
transform: scaleY(-1);
opacity: 0.2;
filter: blur(4px);
border-radius: 14px;
}
.swiper-slide-active {
transform: scale(1.05) rotateY(0deg);
}
.swiper-button-next,
.swiper-button-prev {
color: #fff;
}
.swiper-pagination-bullet {
background: #fff;
}
/* ===================================================== */
/* BOTÓN WORDPRESS — MODELO B (SWEEP INTERNO) */
/* ===================================================== */
.section-caja-izquierda .cta-wp-alt-1 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 6vh;
}
/* BOTÓN BASE */
.btn-wp-alt-2 {
position: relative;
display: inline-block;
padding: 15px 44px;
font-size: 15px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
background: linear-gradient(
135deg,
#1e5c9c,
#2164aa
);
border-radius: 10px;
overflow: hidden;
transition: all 0.4s ease;
}
/* Overlay animado interno */
.btn-wp-alt-2::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 120%;
height: 100%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,0.25) 50%,
transparent 100%
);
transition: all 0.6s ease;
}
/* Hover */
.btn-wp-alt-2:hover {
transform: translateY(-3px);
box-shadow:
0 10px 25px rgba(33, 100, 170, 0.35),
0 0 18px rgba(33, 100, 170, 0.25);
}
/* Sweep al hover */
.btn-wp-alt-2:hover::before {
left: 120%;
}
/* --- Modal exclusivo para swiper --- */
.modal-swiper {
display: none; /* oculto por defecto */
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
flex-direction: column;
justify-content: center;
align-items: center;
}
.modal-swiper img {
max-width: 100%;
max-height: 60%;
border-radius: 10px;
border: 1px solid var(--color-secundario-textos);
box-shadow: 0 0 20px var(--color-secundario-textos);
}
.modal-swiper-close {
position: absolute;
top: 130px;
right: 50px;
color: white;
font-size: 40px;
cursor: pointer;
transition: 0.3s;
}
.modal-swiper-close:hover {
color: #ccc;
}
/* Asegurar que todas las imágenes reciban clicks */
.swiper-3d .swiper-slide img {
pointer-events: auto !important;
position: relative;
z-index: 1;
}
/* Asegurar que los slides no bloqueen los eventos */
.swiper-3d .swiper-slide {
pointer-events: none !important;
}
.swiper-3d .swiper-slide-active {
pointer-events: auto !important;
}
.swiper-3d .swiper-slide-visible {
pointer-events: auto !important;
}
/* ============================= */
/* CAJA DERECHA - SOFTWARE */
/* ============================= */
.caja-derecha-dos {
position: relative;
overflow: hidden;
z-index: 1;
}
/* ===== FONDO NEGRO + HALO VERDE (DERECHA) ===== */
.caja-derecha-dos::before {
content: "";
position: absolute;
inset: 0;
z-index: -4;
background:
/* Halo verde desde la derecha */
radial-gradient(
circle at 78% 50%,
rgba(0, 200, 120, 0.28) 0%,
rgba(0, 200, 120, 0.18) 20%,
rgba(0, 200, 120, 0.08) 40%,
rgba(0, 200, 120, 0.03) 55%,
transparent 70%
),
/* Base negra profunda (intacta) */
linear-gradient(
to left,
#000000 0%,
#050505 50%,
#000000 100%
);
}
/* ===== GLOW INTERACTIVO MÁS SUTIL ===== */
.caja-derecha-dos::after {
content: "";
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
background:
radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
rgba(0, 68, 255, 0.15),
transparent 55%
);
transition: background 0.2s ease;
}
/* ===== SCANNER VERDE TECH ===== */
.caja-derecha-dos .scan-line {
position: absolute;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(
to right,
transparent,
rgba(0, 230, 140, 0.85),
transparent
);
box-shadow:
0 0 8px rgba(0, 230, 140, 0.85),
0 0 18px rgba(0, 230, 140, 0.45);
opacity: 0.75;
pointer-events: none;
animation: scanMove 6s linear infinite;
}
/* rastro suave - verde tech más fuerte */
.caja-derecha-dos .scan-line::after {
content: "";
position: absolute;
top: -8px;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(
to bottom,
rgba(0, 230, 140, 0.22),
transparent
);
opacity: 0.5;
}
/* animación */
@keyframes scanMove {
0% { top: -5%; opacity: 0; }
10% { opacity: 0.7; }
90% { opacity: 0.7; }
100% { top: 105%; opacity: 0; }
}
.caja-derecha-dos .contenido-caja{
display: flex;
flex-direction: column;
width: 100%;
color: white;
height: 100%;
text-align: center;
overflow: hidden;
}
/* ===================================================== */
/* TITULO SOFTWARE VERDE — VERSION FINAL */
/* ===================================================== */
.caja-derecha-dos .contenido-caja h2 {
position: relative;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: clamp(2.3rem, 1vw, 3rem);
margin-top: 10vh;
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 20%,
#bfffe6 40%,
#00e68c 60%,
#00e68c 80%,
#ffffff 100%
);
background-size: 300% 300%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: greenShift 8s ease-in-out infinite alternate;
}
/* Glow sutil al entrar en viewport */
.caja-derecha-dos.visible-3d .contenido-caja h2 {
text-shadow:
0 0 10px rgba(0, 230, 140, 0.35),
0 0 22px rgba(0, 230, 140, 0.15);
}
/* STRONG EN TITULO */
.caja-derecha-dos .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.11em;
background: linear-gradient(
115deg,
#ffffff 0%,
#00e68c 50%,
#00e68c 100%
);
background-size: 200% 200%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: strongGreenShift 6s ease-in-out infinite alternate;
}
/* ===================================================== */
/* LINEA FRAGMENTADA */
/* ===================================================== */
.caja-derecha-dos .contenido-caja h2::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 65%;
height: 2px;
background:
repeating-linear-gradient(
90deg,
#00e68c 0px,
#00e68c 5px,
transparent 5px,
transparent 14px
);
background-size: 150% 100%;
animation: dataFlow 12s linear infinite;
opacity: 0.75;
}
/* CURSOR TRAIL */
.caja-derecha-dos .contenido-caja h2::before {
content: "";
position: absolute;
bottom: -13px;
left: 17.5%;
width: 18px;
height: 7px;
background: linear-gradient(
to right,
#00e68c 0%,
rgba(0, 230, 140, 0.75) 40%,
rgba(0, 230, 140, 0.35) 70%,
transparent 100%
);
border-radius: 2px;
box-shadow:
0 0 6px rgba(0, 230, 140, 0.55),
0 0 14px rgba(0, 230, 140, 0.25);
animation:
cursorMove 12s linear infinite,
cursorBlink 1.6s ease-in-out infinite;
}
/* ===================================================== */
/* PARRAFO */
/* ===================================================== */
.caja-derecha-dos .contenido-caja p {
max-width: 680px;
margin: 32px auto 0;
color: rgba(230,235,245,0.85);
font-size: 0.95rem;
line-height: 1.85;
letter-spacing: 0.06em;
font-weight: 300;
font-family: "Roboto", sans-serif;
text-align: center;
text-wrap: balance;
}
/* Strong dentro del párrafo */
.caja-derecha-dos .contenido-caja p strong {
color: #00e68c;
font-weight: 500;
letter-spacing: 0.08em;
}
/* ===================================================== */
/* ANIMACIONES */
/* ===================================================== */
@keyframes greenShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes strongGreenShift {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes dataFlow {
from { background-position: 0 0; }
to { background-position: 150% 0; }
}
@keyframes cursorMove {
0% { left: 17.5%; }
95% { left: 82.5%; }
100% { left: 82.5%; }
}
@keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.65; }
}
/* CONTENEDOR GRID */
.galeria-flip {
margin-top: 60px;
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
perspective: 1400px;
}
/* ITEM */
.flip-item {
aspect-ratio: 3 / 4;
}
/* CARD */
.flip-card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
cursor: pointer;
overflow: hidden;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.87),
0 0 20px rgb(3, 7, 4);
will-change: transform;
background-color: transparent;
}
.matrix-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
/* Contenido encima del canvas */
.flip-card > *:not(.matrix-bg) {
position: relative;
z-index: 1;
}
/* Elevación sutil hover */
.flip-card:hover {
transform: translateY(-6px);
}
/* Rotación real */
.flip-card.is-rotating {
transform: rotateY(180deg);
}
/* IMAGEN */
.flip-face {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ============================= */
/* OVERLAY INDICADOR */
/* ============================= */
.flip-card::after {
content: "Click para ver más";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 500;
color: #ffffff;
background: linear-gradient(
to top,
rgba(0,0,0,0.55),
rgba(0,0,0,0.15),
rgba(0,0,0,0.0)
);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 80;
}
/* Mostrar en hover (desktop) */
@media (hover: hover) {
.flip-card:hover::after {
opacity: 1;
}
}
/* call to action software
/* ============================================= */
/* CTA SOFTWARE - VERSION VERDE SISTEMA */
/* ============================================= */
/* CONTENEDOR */
.caja-derecha-dos .cta-soft-1 {
display: flex;
justify-content: center;
align-items: center;
margin-top: 8vh;
}
/* BOTÓN BASE */
.btn-soft-2 {
position: relative;
display: inline-block;
padding: 14px 42px;
font-size: 15px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
color: #00e68c;
background: rgba(0, 230, 140, 0.06);
border: 1px solid rgba(0, 230, 140, 0.4);
border-radius: 6px;
overflow: hidden;
transition: all 0.35s ease;
}
/* Hover */
.btn-soft-2:hover {
background: rgba(0, 230, 140, 0.12);
box-shadow:
0 0 12px rgba(0, 230, 140, 0.6),
0 0 28px rgba(0, 230, 140, 0.25);
transform: translateY(-3px);
}
/* ============================================= */
/* LÍNEAS ANIMADAS TIPO SISTEMA */
/* ============================================= */
.btn-soft-2 span {
position: absolute;
display: block;
}
/* TOP */
.edge-3 {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#00e68c,
transparent
);
animation: softLine1 2.4s linear infinite;
}
/* RIGHT */
.edge-4 {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(
180deg,
transparent,
#00e68c,
transparent
);
animation: softLine2 2.4s linear infinite;
animation-delay: 0.6s;
}
/* BOTTOM */
.edge-5 {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(
270deg,
transparent,
#00e68c,
transparent
);
animation: softLine3 2.4s linear infinite;
animation-delay: 1.2s;
}
/* LEFT */
.edge-6 {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(
360deg,
transparent,
#00e68c,
transparent
);
animation: softLine4 2.4s linear infinite;
animation-delay: 1.8s;
}
/* KEYFRAMES */
@keyframes softLine1 {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes softLine2 {
0% { top: -100%; }
100% { top: 100%; }
}
@keyframes softLine3 {
0% { right: -100%; }
100% { right: 100%; }
}
@keyframes softLine4 {
0% { bottom: -100%; }
100% { bottom: 100%; }
}
/* cajaizquierda 2 modelado 3d*/
/* ============================= */
/* SECCIÓN MODELADO 3D PURPLE */
/* ============================= */
.caja-izquierda-dos {
position: relative;
overflow: hidden;
z-index: 1;
}
/* ===== FONDO NEGRO + HALO PÚRPURA IZQUIERDA ===== */
.caja-izquierda-dos::before {
content: "";
position: absolute;
inset: 0;
z-index: -4;
background:
radial-gradient(
circle at 22% 50%,
rgba(150, 70, 255, 0.38) 0%,
rgba(120, 50, 220, 0.25) 20%,
rgba(90, 30, 170, 0.14) 40%,
rgba(70, 20, 130, 0.06) 55%,
transparent 70%
),
linear-gradient(
to right,
#120018 0%, /* púrpura oscuro izquierda */
#0a0010 40%,
#000000 100% /* negro profundo derecha */
);
}
/* ===== CANVAS RED NEURONAL ===== */
.caja-izquierda-dos .neural-network-3d {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
opacity: 0.2;
}
/* ================================================= */
/* SECTION MODELO 3D - AISLADA */
/* ================================================= */
.caja-izquierda-dos .contenido-3d {
position: relative;
transition: transform 0.6s ease;
}
/* ============================= */
/* TITULO */
/* ============================= */
.caja-izquierda-dos .contenido-3d h2.titulo-3d {
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: clamp(2.3rem, 1vw, 3rem);
/* Empieza blanco y luego aparece el púrpura */
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 35%,
#c084ff 55%,
#8f2bff 75%,
#5b00d4 100%
);
background-size: 300% 300%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: gradientMove3D 8s ease-in-out infinite;
-webkit-font-smoothing: antialiased;
position: relative;
}
/* Animación suave blanco → púrpura → blanco */
@keyframes gradientMove3D {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ============================= */
/* PÁRRAFO */
/* ============================= */
.caja-izquierda-dos .contenido-3d p.texto-3d {
max-width: 680px;
margin: 32px auto 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 0.95rem;
line-height: 1.85;
letter-spacing: 0.06em;
text-align: center;
text-wrap: balance;
color: rgba(255, 255, 255, 0.82);
}
/* Destacados */
.caja-izquierda-dos .contenido-3d p.texto-3d strong {
font-weight: 500;
color: #b266ff;
letter-spacing: 0.04em;
}
/* ================================================= */
/* MEJORAS PRO */
/* ================================================= */
/* Glow al entrar en viewport */
.caja-izquierda-dos.visible-3d .titulo-3d {
text-shadow:
0 0 15px rgba(160, 0, 255, 0.4),
0 0 35px rgba(120, 0, 255, 0.25);
}
/* Línea escáner */
.caja-izquierda-dos .titulo-3d::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
#8f2bff,
#c084ff,
transparent
);
transition: width 0.6s ease;
}
.caja-izquierda-dos.visible-3d .titulo-3d::after {
width: 70%;
}
/* Micro profundidad */
.caja-izquierda-dos.visible-3d .contenido-3d {
transform: translateY(-4px);
}
/* ============================= */
/* CONTENEDOR 3D */
/* ============================= */
.showcase-modelado {
position: relative;
margin: 60px auto 0;
width: 100%;
max-width: 900px;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
perspective: 1600px;
transform-style: preserve-3d;
margin-top: 14vh;
}
/* ============================= */
/* ITEM */
/* ============================= */
.cover-item {
position: absolute;
width: 340px;
height: 500px;
border-radius: 22px;
overflow: hidden;
transition: transform 0.7s cubic-bezier(.2,.8,.2,1),
opacity 0.5s ease;
cursor: pointer;
transform-style: preserve-3d;
}
/* ============================= */
/* IMAGEN */
/* ============================= */
.cover-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 22px;
box-shadow: 0 25px 60px rgba(0,0,0,0.45);
transition: transform 0.25s ease, box-shadow 0.25s ease;
transform-style: preserve-3d;
will-change: transform;
}
/* Glow imagen activa */
.cover-item.active img {
box-shadow: 0 30px 70px rgba(170, 90, 255, 0.35);
}
/* call to action modelo 3d */
/* ============================= */
/* CTA MODELO 1 - PURPURA TECH */
/* ============================= */
/* CONTENEDOR */
.caja-izquierda-dos .cta-1 {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16vh;
}
/* BOTÓN BASE */
.btn-2 {
position: relative;
display: inline-block;
padding: 14px 42px;
font-size: 16px;
font-weight: 600;
letter-spacing: 3px;
text-decoration: none;
text-transform: uppercase;
color: #ffffff;
overflow: hidden;
border-radius: 8px;
background: linear-gradient(
135deg,
#6a00ff,
#8f2bff,
#5b00d4
);
box-shadow:
0 0 12px rgba(140, 0, 255, 0.6),
inset 0 0 10px rgba(255, 255, 255, 0.06);
transition: all 0.4s ease;
z-index: 1;
}
/* Elevación */
.btn-2:hover {
transform: translateY(-5px);
box-shadow:
0 0 25px rgba(160, 0, 255, 0.9),
0 12px 30px rgba(80, 0, 180, 0.6);
}
/* Overlay interno dinámico */
.btn-2::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.18),
transparent 70%
);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.btn-2:hover::before {
opacity: 1;
}
/* ============================= */
/* BORDES ANIMADOS */
/* ============================= */
.btn-2 span {
position: absolute;
display: block;
}
/* TOP */
.line-3 {
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #ffffff);
animation: anim-1 2s linear infinite;
}
/* RIGHT */
.line-4 {
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #ffffff);
animation: anim-2 2s linear infinite;
animation-delay: 0.5s;
}
/* BOTTOM */
.line-5 {
bottom: 0;
right: -100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #ffffff);
animation: anim-3 2s linear infinite;
animation-delay: 1s;
}
/* LEFT */
.line-6 {
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #ffffff);
animation: anim-4 2s linear infinite;
animation-delay: 1.5s;
}
/* ============================= */
/* KEYFRAMES */
/* ============================= */
@keyframes anim-1 {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes anim-2 {
0% { top: -100%; }
100% { top: 100%; }
}
@keyframes anim-3 {
0% { right: -100%; }
100% { right: 100%; }
}
@keyframes anim-4 {
0% { bottom: -100%; }
100% { bottom: 100%; }
}
/* CARACTERS EXPLICATION */
.caja-derecha-tres {
position: relative;
overflow: hidden;
z-index: 1;
}
/* ===== FONDO NEGRO + HALOS TECNOLÓGICOS ===== */
.caja-derecha-tres::before {
content: "";
position: absolute;
inset: 0;
z-index: -4;
background:
/* Halo azul principal (derecha centro) */
radial-gradient(
circle at 82% 50%,
rgba(0, 120, 255, 0.22) 0%,
rgba(0, 120, 255, 0.15) 20%,
rgba(0, 120, 255, 0.08) 40%,
rgba(0, 120, 255, 0.03) 60%,
transparent 75%
),
/* Halo verde inferior */
radial-gradient(
circle at 65% 85%,
rgba(0, 200, 120, 0.18) 0%,
rgba(0, 200, 120, 0.10) 30%,
rgba(0, 200, 120, 0.05) 50%,
transparent 75%
),
/* Halo púrpura superior */
radial-gradient(
circle at 75% 15%,
rgba(140, 0, 255, 0.18) 0%,
rgba(140, 0, 255, 0.10) 30%,
rgba(140, 0, 255, 0.04) 50%,
transparent 75%
),
/* Base negra dominante */
linear-gradient(
to left,
#000000 0%,
#050505 45%,
#000000 100%
);
}
.caja-derecha-tres .contenido-caja{
display: flex;
flex-direction: column;
width: 100%;
color: white;
height: 100%;
text-align: center;
overflow: hidden;
align-items: center;
}
/* ===================================================== */
/* TITULO — CENTRADO + BLANCO CELESTE PREMIUM */
/* ===================================================== */
.caja-derecha-tres .contenido-caja h2 {
position: relative;
display: block;
max-width: 760px;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.07em;
line-height: 1.15;
font-size: clamp(2.2rem, 4vw, 3rem);
margin: 20vh 0 24px 0;
/* --- CAMBIO REALIZADO AQUÍ --- */
text-align: center;
/* ---------------------------- */
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 35%,
#dff4ff 50%,
#bfeaff 65%,
#ffffff 85%
);
background-size: 220% 220%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: shimmerSoft 8s ease-in-out infinite;
-webkit-font-smoothing: antialiased;
}
/* Shimmer más sutil y premium */
@keyframes shimmerSoft {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ===================================================== */
/* STRONG EN TITULO */
/* ===================================================== */
.caja-derecha-tres .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.09em;
background: linear-gradient(
120deg,
#ffffff 0%,
#c8f0ff 50%,
#ffffff 100%
);
background-size: 180% 180%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: shimmerStrongSoft 6s ease-in-out infinite;
}
@keyframes shimmerStrongSoft {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* ===================================================== */
/* PÁRRAFO ALINEADO AL CENTRO */
/* ===================================================== */
.caja-derecha-tres .contenido-caja p {
max-width: 860px;
margin: 88px 0 0 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 2.1;
letter-spacing: 0.035em;
padding: 0;
/* --- CAMBIO REALIZADO AQUÍ --- */
text-align: center;
/* ---------------------------- */
color: rgba(255, 255, 255, 0.92);
opacity: 0;
transform: translateY(20px);
animation: fadeParagraph 1.2s ease forwards;
animation-delay: 0.4s;
}
/* Strong */
.caja-derecha-tres .contenido-caja p strong {
font-weight: 500;
color: #d6f3ff;
letter-spacing: 0.02em;
}
/* Animación */
@keyframes fadeParagraph {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Strong dentro del párrafo */
.caja-derecha-tres .contenido-caja p strong {
font-weight: 500;
color: #bfeaff;
letter-spacing: 0.05em;
}
/* ===================================================== */
/* EFECTOS PRO */
/* ===================================================== */
/* Glow celeste al entrar en viewport */
.caja-derecha-tres.visible-3d .contenido-caja h2 {
text-shadow:
0 0 15px rgba(191,234,255,0.45),
0 0 35px rgba(191,234,255,0.25);
}
/* Línea escáner blanca-celeste */
.caja-derecha-tres .contenido-caja h2::after {
content: "";
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 2px;
background: linear-gradient(
90deg,
transparent,
rgba(191,234,255,0.9),
rgba(255,255,255,0.7),
transparent
);
transition: width 0.6s ease;
}
.caja-derecha-tres.visible-3d .contenido-caja h2::after {
width: 70%;
}
/* Micro profundidad al activarse */
.caja-derecha-tres.visible-3d .contenido-caja {
transform: translateY(-4px);
transition: transform 0.6s ease;
}
/* ============================= */
/* CTA ALPHA — VERSION EDITORIAL */
/* ============================= */
/* CONTENEDOR */
.wrap-cta-alpha {
display: flex;
justify-content: flex-start; /* izquierda */
align-items: center;
margin-top: 12vh;
}
/* BOTÓN BASE */
.btn-alpha {
position: relative;
display: inline-block;
padding: 14px 42px;
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
border-radius: 4px;
overflow: hidden;
background: linear-gradient(
135deg,
#000000,
#0d111a,
#000000
);
border: 1px solid rgba(0, 180, 255, 0.35);
box-shadow:
0 0 12px rgba(0, 170, 255, 0.25),
inset 0 0 8px rgba(0, 170, 255, 0.08);
transition: all 0.35s ease;
}
/* HOVER */
.btn-alpha:hover {
transform: translateY(-3px);
box-shadow:
0 0 28px rgba(0, 180, 255, 0.6),
0 8px 20px rgba(0, 80, 160, 0.5);
}
/* Overlay interno más elegante */
.btn-alpha::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 30% 50%,
rgba(0, 180, 255, 0.25),
transparent 70%
);
opacity: 0;
transition: opacity 0.4s ease;
}
.btn-alpha:hover::before {
opacity: 1;
}
/* ============================= */
/* BORDES ANIMADOS MÁS SUTILES */
/* ============================= */
.edge {
position: absolute;
display: block;
pointer-events: none;
}
/* TOP */
.edge-top {
top: 0;
left: -100%;
width: 100%;
height: 1.5px;
background: linear-gradient(90deg, transparent, #00b4ff);
animation: move-top 2.6s linear infinite;
}
/* RIGHT */
.edge-right {
top: -100%;
right: 0;
width: 1.5px;
height: 100%;
background: linear-gradient(180deg, transparent, #00b4ff);
animation: move-right 2.6s linear infinite;
animation-delay: .65s;
}
/* BOTTOM */
.edge-bottom {
bottom: 0;
right: -100%;
width: 100%;
height: 1.5px;
background: linear-gradient(270deg, transparent, #00b4ff);
animation: move-bottom 2.6s linear infinite;
animation-delay: 1.3s;
}
/* LEFT */
.edge-left {
bottom: -100%;
left: 0;
width: 1.5px;
height: 100%;
background: linear-gradient(360deg, transparent, #00b4ff);
animation: move-left 2.6s linear infinite;
animation-delay: 1.95s;
}
/* ============================= */
/* KEYFRAMES */
/* ============================= */
@keyframes move-top {
0% { left: -100%; }
100% { left: 100%; }
}
@keyframes move-right {
0% { top: -100%; }
100% { top: 100%; }
}
@keyframes move-bottom {
0% { right: -100%; }
100% { right: 100%; }
}
@keyframes move-left {
0% { bottom: -100%; }
100% { bottom: 100%; }
}
/* ============================= */
/* FOOTER SaaS PREMIUM */
/* ============================= */
.footer {
position: relative;
z-index: -20;
background: linear-gradient(to bottom, #000000 0%, #05070d 100%);
color: #fff;
padding: 90px 0 35px;
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
/* Glow decorativo */
.footer::before {
content: "";
position: absolute;
top: -250px;
right: -250px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(0,191,255,0.08) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* ============================= */
/* GRID */
/* ============================= */
.footer-container {
width: 90%;
max-width: 1400px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 90px;
position: relative;
z-index: 1;
}
.footer-col {
display: flex;
flex-direction: column;
}
/* ============================= */
/* COLUMNA 1 */
/* ============================= */
.footer-logo {
width: 120px;
margin-bottom: 25px;
opacity: 0.9;
transition: 0.4s ease;
}
.footer-logo:hover {
opacity: 1;
transform: translateY(-4px);
}
.footer-legend {
font-size: 14px;
color: #9aa4b2;
margin-bottom: 40px;
line-height: 1.7;
max-width: 320px;
}
.footer-contact p {
margin: 12px 0;
font-size: 14px;
color: #8e99a8;
}
/* ============================= */
/* COLUMNA 2 */
/* ============================= */
.footer-center {
align-items: flex-start; /* ← alineado izquierda */
text-align: left;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 45px;
align-items: flex-start; /* ← alineado izquierda */
}
/* LINKS PREMIUM */
.footer-links a {
display: inline-block;
width: fit-content;
color: #d6dce5;
text-decoration: none;
font-size: 15px;
position: relative;
transition: color 0.3s ease;
}
/* Línea desde el centro */
.footer-links a::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
width: 0%;
height: 1.5px;
background: #00bfff;
transform: translateX(-50%);
transition: width 0.35s ease, opacity 0.35s ease;
opacity: 0;
}
.footer-links a:hover {
color: #ffffff;
}
.footer-links a:hover::after {
width: 100%;
opacity: 1;
}
/* Redes */
.footer-social {
display: flex;
gap: 18px;
margin-bottom: 40px;
justify-content: flex-start; /* ← izquierda */
}
.footer-social a {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: #8e99a8;
transition: all 0.35s ease;
}
.footer-social a:hover {
color: #00bfff;
transform: translateY(-4px);
border-color: rgba(0,191,255,0.4);
box-shadow: 0 0 18px rgba(0,191,255,0.25);
}
/* Privacidad */
.footer-privacy {
text-align: left; /* ← izquierda */
}
.footer-privacy a {
font-size: 13px;
color: #6f7b8a;
text-decoration: none;
transition: 0.3s ease;
}
.footer-privacy a:hover {
color: #00bfff;
}
/* ============================= */
/* COLUMNA 3 - NEWSLETTER */
/* ============================= */
.footer-right h4 {
font-size: 19px;
font-weight: 600;
margin-bottom: 16px;
position: relative;
display: inline-block;
}
.footer-right h4::after {
content: "";
display: block;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #00bfff, transparent);
margin-top: 8px;
border-radius: 2px;
}
.footer-right > p {
font-size: 14px;
color: #9aa4b2;
margin-bottom: 32px;
line-height: 1.7;
max-width: 320px;
}
/* Form */
.footer-newsletter {
display: flex;
align-items: stretch;
gap: 12px;
position: relative;
margin-bottom: 14px;
}
.newsletter-field {
flex: 1;
position: relative;
z-index: 5;
}
.newsletter-field input {
width: 100%;
padding: 15px 18px;
background: #0b111b;
border: 1px solid #1c2736;
color: #ffffff;
border-radius: 6px;
outline: none;
font-size: 14px;
transition: all 0.3s ease;
position: relative;
z-index: 10;
}
.newsletter-field input:hover {
border-color: #00bfff;
}
.newsletter-field input:focus {
border-color: #00bfff;
box-shadow: 0 0 0 1px rgba(0,191,255,0.4),
0 0 12px rgba(0,191,255,0.15);
}
.newsletter-field input::placeholder {
color: #6e7b8a;
transition: 0.3s ease;
}
.newsletter-field input:focus::placeholder {
color: #00bfff;
opacity: 0.7;
}
.footer-newsletter button {
padding: 15px 24px;
border: 1px solid #00bfff;
background: transparent;
color: #00bfff;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
z-index: 10;
}
.footer-newsletter button:hover {
background: #00bfff;
color: #000;
box-shadow: 0 0 18px rgba(0,191,255,0.35);
}
.newsletter-message {
margin-top: 14px;
font-size: 13px;
height: 18px;
color: #6f7b8a;
}
/* ============================= */
/* DIVIDER */
/* ============================= */
.footer-divider {
width: 95%;
height: 1px;
margin: 70px auto 30px;
background: linear-gradient(90deg, transparent, #00bfff, transparent);
opacity: 0.5;
}
/* ============================= */
/* BOTTOM */
/* ============================= */
.footer-bottom {
text-align: center;
font-size: 13px;
color: #6e7b8a;
}
/* ///////////////////////////////////// resposnive ///////////////////////////////// */
/* Ajustes para móvil (≤1450px) */
@media (max-width: 1400px){
/* header y nav */
.enlaces {
display: flex;
height: 100%;
width: calc(100% /2);
align-items: center;
justify-content: center;
}
.enlaces a {
flex: 1;
margin: 0px;
background-color: transparent;
color: var(--color-principal-textos);
padding: 10px 30px;
border-radius: 0px;
font-size: 15px;
}
.enlaces a:hover {
color: var(--hover-blanco);
opacity: 1;
}
.enlaces a::before {
content: '';
position: absolute;
top: var(--mouse-y);
left: var(--mouse-x);
width: 10px;
height: 10px;
background: radial-gradient(circle, var(--color-secundario-sombras-hover), var(--color-background-header));
border-radius: 10%;
transform: scale(0);
transition: transform 0.5s ease-out;
z-index: -1;
pointer-events: none;
}
.enlaces a.animate-hover::before {
transform: scale(40);
}
nav .enlace-activo{
background-color: var(--color-secundario-sombras-hover);
color: var(--hover-blanco);
opacity: 1;
}
nav .logo img{
width: 80px;
height: 90px;
object-fit: scale-down;
margin-left: 50px;
}
nav .logo p{
color: var(--color-principal-textos);
font-size: 16px;
font-weight: 900;
margin-left: 20px;
text-transform: uppercase;
}
.login-btn{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-right: 150px;
color: var(--color-principal-textos);
}
.login-btn a{
text-decoration: none;
color: var(--color-principal-textos);
text-transform: uppercase;
font-size: 12px;
}
.login-btn i{
font-size: 18px;
margin-left: 0px;
color: var(--color-principal-textos);
}
.login-btn:hover i{
color: var(--color-secundario-textos);
transition: 0.3s ease;
}
/* titulo y modelo 3d principal */
.contenedor-texto-portada{
padding-top: 60px;
}
.contenedor-texto-portada h1 {
font-size: 3rem;
letter-spacing: 5px;
}
.contenedor-texto-portada h3 {
font-size: 60px;
margin-top: -20px;
}
.contenedor-texto-portada h3 .detalle {
font-size: 1.4rem;
}
/* redes y logo */
/* ============================
Imagen del logo (entrada en cascada)
============================ */
.contenedor-img-redes {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
flex-direction: column;
}
.contenedor-img-redes .logo-text {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 60px;
pointer-events: none;
margin-top: 20px;
opacity: 0;
animation: fadeUp 1.2s ease-out forwards 1.7s;
}
.contenedor-img-redes .logo-text img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* canvas */
#modelo3D canvas{
margin-top:-20px ;
}
}
/* Ajustes para móvil (≤1300px) */
@media (max-width: 1300px) {
.scroll-video-wrapper,
.section-caja-izquierda,
.section-caja-derecha {
padding-left: 5%;
padding-right: 5%;
justify-content: center;
}
.contenido-caja {
width: 80%;
}
/* galeria 3d*/
#drag-container, #spin-container {
height: 700px;
}
.div-1 {
margin-top: -3vh;
}
/* canvas */
#modelo3D canvas{
margin-top:-100px ;
}
}
@media (max-width: 1200px) {
body{
overflow-x: hidden;
}
.contenedor-carga {
margin-top: 0;
overflow-x: hidden;
}
/* header y boton */
.icono {
display: block;
width: 100%;
font-size: 55px;
margin-right: 0px;
cursor: pointer;
z-index: 3000;
color: var(--color-principal-textos);
text-align: center;
}
.icono span{
display: flex;
align-items: center;
justify-content: center;
margin-top: -14px;
}
.enlaces {
flex-direction: column;
position: fixed;
top: 0;
right: -310px;
width: 310px;
height: 100vh;
background: linear-gradient(145deg, var(--color-background), var(--color-background), var(--color-background));
justify-content: center;
align-items: center;
padding-top: 100px;
transition: right 0.3s ease-in-out;
z-index: 4500;
}
.enlaces a {
width: 100%;
text-align: center;
margin: 20px 0;
flex: 0;
height: auto;
z-index: 4000;
padding: 20px;
}
.enlaces.activo {
right: 0;
}
nav {
position: relative;
z-index: 3000;
}
.logo {
top: 0px;
left: 0px;
bottom: 0;
z-index: 3000;
}
nav .logo img{
width: 100px;
height: 70px;
object-fit: scale-down;
margin-left: 50px;
}
.login-btn {
bottom: 0px;
right: 0px;
top: 0;
z-index: 3000;
color: var(--color-principal-textos);
}
.titulo-principal-objeto{
flex-direction: column;
margin: 0;
background-color: var(--background-color-responsive);
height: 100vh;
}
.titulo-principal-objeto::before {
content: "";
position: absolute;
inset: 0;
background:
/* glow azul sutil */
radial-gradient(
circle,
rgba(0, 120, 255, 0.18),
rgba(0, 0, 0, 0) 260px
),
/* líneas diagonales tech */
repeating-linear-gradient(
135deg,
rgba(0, 80, 160, 0.08),
rgba(0, 80, 160, 0.08) 1px,
rgba(0, 0, 0, 0) 1px,
rgba(0, 0, 0, 0) 14px
),
/* base oscura */
linear-gradient(
to bottom,
#050505,
#020814,
#000000
);
background-size: auto;
background-position: center;
z-index: -1;
pointer-events: none;
opacity: 0.5;
}
#modelo3D{
width: 100vw;
height: 100vh;
position: relative;
z-index: 1;
overflow: hidden;
margin:0;
}
.contenedor-texto-portada{
width: 100%;
color: var(--color-principal);
height: 30vh;
margin-left: 0px;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.dot-grid-container{
display: none;
}
.div-1{
overflow: hidden;
}
.contenedor-texto-portada h1{
font-size: 3rem;
font-weight: 400;
text-align: center;
font-family: "Six Caps", sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: -80px;
}
.contenedor-texto-portada h3{
font-size: 1rem;
font-family: "Big Shoulders Stencil", sans-serif;
text-align: center;
letter-spacing: 0px;
margin-top: 10px;
}
.contenedor-texto-portada h3 span{
color: var(--color-principal);
}
.contenedor-texto-portada h3 .detalle{
color: var(--color-principal);
font-size: 1rem;
text-transform: uppercase;
font-weight: 100;
}
/* logo i leyenda*/
.contenedor-img-redes{
margin-top: 0;
margin-bottom: 120px;
}
.texto-info{
display: none;
}
/* redes */
.redes-social-media{
display: none;
}
.scroll-video-wrapper,
.section-caja-izquierda,
.section-caja-derecha {
padding-left: 5%;
padding-right: 5%;
justify-content: center;
}
.contenido-caja {
width: 80%;
}
#modelo3D canvas{
margin-top:0px ;
}
.footer-container {
gap: 50px;
}
.footer-logo {
width: 70px;
}
}
@media (max-width: 1000px) {
/* ////////////////// claro oscuro //////////////////////////// */
/* textos principales */
.contenedor-texto-portada{
margin-left: 30px;
}
.contenedor-texto-portada h1{
font-size: 60px;
letter-spacing: 10px;
}
.contenedor-texto-portada h3{
font-size: 20px;
}
.contenedor-texto-portada h3 .detalle{
font-size: 20px;
}
/* botones */
/* botones principales */
.contenedor-botones-principales {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
margin-top: 2vh;
}
.contenedor-botones-principales .boton-1 {
border-radius: 0px;
background-color: var(--color-terciario);
padding: 5px 0px 7px 0px;
}
.contenedor-botones-principales .boton-1 a {
color: white;
font-size: 11px;
letter-spacing: 0px;
}
/* explorer */
.contenedor-explorer {
width: 20%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1vh;
}
.contenedor-explorer .explorer {
padding: 5px 10px 5px 10px;
background-color: var(--color-terciario);
border-radius: 0;
}
.contenedor-explorer .explorer a {
color: var(--color-principal);
font-size: 11px;
}
/* Scroll video wrapper - FIX del scroll MANTENIENDO FONDO */
.scroll-video-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
min-height: 100vh !important;
width: 100% !important;
padding: 0 3% !important;
position: relative !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
background: black !important; /* Base negra */
color: white !important;
z-index: 1 !important;
}
/* RESTAURAR EL FONDO TECH AZUL */
.scroll-video-wrapper::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background:
radial-gradient(
circle,
rgba(0, 120, 255, 0.35),
rgba(0, 0, 0, 0) 300px
),
repeating-linear-gradient(
135deg,
rgba(0, 90, 180, 0.12),
rgba(0, 90, 180, 0.12) 1px,
rgba(0, 0, 0, 0) 1px,
rgba(0, 0, 0, 0) 16px
),
linear-gradient(
to bottom,
#021024,
#031b3d,
#000814
) !important;
background-size: auto !important;
background-position: center !important;
opacity: 0.55 !important;
z-index: -3 !important; /* Cambiado para que quede detrás de todo */
filter: blur(0px) !important;
pointer-events: none !important;
}
/* ===== RED NEURONAL - CORREGIDA ===== */
.scroll-video-wrapper .neural-network {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: -2 !important; /* Por encima del fondo pero debajo del contenido */
opacity: 0.18 !important; /* Un poco más visible que antes */
object-fit: cover !important; /* Para imágenes */
}
/* Si la red neuronal contiene canvas o SVG */
.scroll-video-wrapper .neural-network canvas,
.scroll-video-wrapper .neural-network svg {
width: 100% !important;
height: 100% !important;
display: block !important;
}
/* Asegurar que el contenido quede por encima */
.scroll-video-wrapper > * {
position: relative !important;
z-index: 1 !important;
overscroll-behavior-y: contain;
scroll-behavior: smooth;
}
/* Contenedor del texto */
.contenedor-texto-scroll {
padding-top: 16vh !important;
padding-bottom: 4vh !important;
width: 100% !important;
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
}
.contenedor-texto-scroll h2 {
font-size: 2.6rem !important;
margin-bottom: 25px !important;
color: white !important;
font-family: "Roboto", sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.contenedor-texto-scroll h2 span {
color: rgb(144, 205, 233) !important;
font-family: "Big Shoulders Stencil", sans-serif !important;
}
.contenedor-texto-scroll p {
color: rgb(255, 255, 255) !important;
font-size: 1rem !important;
line-height: 1.5 !important;
margin-bottom: 20px !important;
}
/* Contenedor principal - OPTIMIZADO */
.div-1 {
all: unset !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding: 20px 0 40px 0 !important;
margin-top: 0 !important;
min-height: auto !important;
flex-grow: 1 !important;
overflow: hidden !important;
}
/* Contenedor de imágenes - MÁS ANCHO */
#drag-container, #spin-container {
all: unset !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
padding: 10px 0 30px 0 !important;
gap:10px !important;
}
/* IMÁGENES 60px MÁS ANCHAS */
#drag-container img, #drag-container video {
all: unset !important;
width: 100% !important;
max-width: 90% !important;
height: auto !important;
min-height: 300px !important;
max-height: 560px !important;
object-fit: cover !important;
border-radius: 12px !important;
display: block !important;
transition: transform 0.25s ease !important;
cursor: pointer !important;
}
/* Efecto táctil optimizado */
#drag-container img:active, #drag-container video:active {
transform: scale(0.98) !important;
}
/* Mejorar rendimiento de scroll */
#drag-container, #spin-container,
#drag-container img, #drag-container video {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
}
/* Hover para tablets que soportan hover */
@media (hover: hover) and (pointer: fine) {
#drag-container img:hover, #drag-container video:hover {
transform: scale(1.01) !important;
box-shadow: 0 7px 22px rgba(0,0,0,0.45) !important;
}
}
/* Ocultar ground completamente */
#ground {
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* Modal responsive */
.modal-content {
width: 90% !important;
max-width: 560px !important;
}
.caja-derecha-dos {
overflow-x: visible;
height: 100%;
}
/* galeria giratoria */
.galeria-flip {
grid-template-columns: 1fr; /* 1 sola imagen */
gap: 40px; /* más aire vertical */
max-width: 500px; /* no demasiado ancha */
}
.flip-item {
aspect-ratio: 1 / 1;
}
.flip-card {
transition: transform 0.8s ease;
}
/* reducimos hover en pantallas táctiles */
.flip-card:hover {
transform: none;
}
.flip-card::after {
opacity: 1;
font-size: 12px;
}
}
@media (max-width: 992px) {
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 50px 40px;
}
.footer-right {
grid-column: span 2;
max-width: 500px;
}
}
@media (max-width: 768px){
/* header y boton */
.icono {
display: block;
width: 100%;
font-size: 55px;
margin-right: 0px;
cursor: pointer;
z-index: 5000;
color: white;
text-align: center;
}
.enlaces {
flex-direction: column;
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100vh;
background: linear-gradient(145deg, var(--color-background), var(--color-background), var(--color-background));
justify-content: center;
align-items: center;
padding-top: 100px;
transition: right 0.3s ease-in-out;
z-index: 4500;
}
.login-btn{
margin-right: 90px;
}
.login-btn a{
text-decoration: none;
color: var(--color-principal);
text-transform: uppercase;
font-size: 12px;
}
nav .logo img{
width: 70px;
height: 70px;
object-fit: scale-down;
margin-left: 30px;
}
/* textos principales */
.contenedor-texto-portada{
margin-left: 0px;
}
.contenedor-texto-portada h1{
font-size: 40px;
letter-spacing: 3px;
}
.contenedor-texto-portada h3{
font-size: 20px;
}
.contenedor-texto-portada h3 .detalle{
font-size: 20px;
}
/* titulos secction html */
/* Contenedor del texto */
.contenedor-texto-scroll {
padding-top: 16vh !important;
padding-bottom: 4vh !important;
width: 100% !important;
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
}
.contenedor-texto-scroll h2 {
font-size: 2.3rem !important;
margin-bottom: 25px !important;
}
.contenedor-texto-scroll h2 span {
color: rgb(144, 205, 233) !important;
font-family: "Big Shoulders Stencil", sans-serif !important;
}
.contenedor-texto-scroll p {
color: rgb(255, 255, 255) !important;
font-size: 0.9rem !important;
line-height: 2.0 !important;
margin-bottom: 20px !important;
}
/* galeria 3d */
#drag-container, #spin-container {
height: 500px;
transform: rotateX(0deg);
}
.div-1 {
margin-top: 0vh;
padding-bottom: 5vh;
}
/* Mejorar el modal para móviles */
.modal {
padding-top: 50px;
}
.modal-content {
width: 95%;
max-width: 350px;
}
.close {
top: 20px;
right: 25px;
font-size: 40px;
}
/* Reducir efectos 3D para mejor performance en móviles */
#drag-container img, #drag-container video {
-webkit-box-reflect: below 5px linear-gradient(transparent, transparent, #0003);
box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}
/* //////////////// WORDPRESS ////////////////////// */
.section-caja-izquierda .contenido-caja h2 {
position: relative;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: 2.3rem;
}
/* Strong dentro del título */
.section-caja-izquierda .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.11em;
background: linear-gradient(
115deg,
#ffffff 0%,
#a8d8ff 45%,
#4f8ecf 75%
);
background-size: 220% 220%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: wpStrongShift 7s ease-in-out infinite alternate;
}
/* ===================================================== */
/* PÁRRAFO AJUSTADO */
/* ===================================================== */
.section-caja-izquierda .contenido-caja p {
position: relative;
max-width: 680px;
margin: 42px auto 0;
color: rgba(220, 235, 250, 0.88);
font-size: 0.9rem;
line-height: 1.9;
letter-spacing: 0.055em;
font-weight: 300;
font-family: "Roboto", sans-serif;
text-align: center;
text-wrap: balance;
}
/* Strong ahora en celeste elegante */
.section-caja-izquierda .contenido-caja p strong {
color: #a8d8ff;
font-weight: 500;
letter-spacing: 0.07em;
}
/* siwper*/
/* --- Swiper 3D --- */
.swiper-container {
width: 100%;
max-width: 250px;
height: 400px;
margin: 2rem auto;
perspective: 3000px; /* sensación 3D */
margin-top: 10vh;
}
.swiper-wrapper {
display: flex;
align-items: center;
}
.swiper-slide {
position: relative;
width: 300px;
height: 300px;
transition: transform 0.6s ease, box-shadow 0.3s ease;
transform-style: preserve-3d;
cursor: pointer;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 14px;
display: block;
}
.swiper-slide::after {
content: "";
position: absolute;
bottom: -40%;
left: 0;
width: 100%;
height: 100%;
background: inherit;
transform: scaleY(-1);
opacity: 0.2;
filter: blur(4px);
border-radius: 14px;
}
.swiper-slide-active {
transform: scale(1.05) rotateY(0deg);
}
.swiper-button-next,
.swiper-button-prev {
color: #fff;
}
.swiper-pagination-bullet {
background: #fff;
}
/* ///////////////// software /////////////// */
/* //////////////// FOOOOTER /////////////// */
.footer {
padding: 50px 0 25px;
}
.footer-logo {
width: 100px;
}
.footer-links a {
font-size: 14px;
}
.footer-legend,
.footer-contact p,
.footer-right p {
font-size: 13px;
}
.footer-divider {
width: 92%;
}
}
@media (max-width: 478px){
nav .logo img{
width: 40px;
height: 40px;
object-fit: scale-down;
margin-left: 30px;
}
.icono {
display: block;
width: 100%;
font-size: 35px;
}
.login-btn{
margin-right: 40px;
}
.login-btn a{
font-size: 10px;
}
.contenedor-texto-scroll {
padding-top: 16vh !important;
padding-bottom: 4vh !important;
width: 100% !important;
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
}
.contenedor-texto-scroll h2 {
font-size: 2rem !important;
margin-bottom: 25px !important;
color: white !important;
font-family: "Roboto", sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
.contenedor-texto-scroll h2 span {
color: rgb(144, 205, 233) !important;
font-family: "Big Shoulders Stencil", sans-serif !important;
}
.contenedor-texto-scroll p {
color: rgb(255, 255, 255) !important;
font-size: 0.9rem !important;
line-height: 2.0 !important;
margin-bottom: 20px !important;
}
/* Contenedor principal - OPTIMIZADO */
.div-1 {
all: unset !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
padding: -20px 0 40px 0 !important;
margin-top: 0 !important;
min-height: auto !important;
flex-grow: 1 !important;
}
/* Contenedor de imágenes - MÁS ANCHO */
#drag-container, #spin-container {
all: unset !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 300px !important;
margin: 0 auto !important;
padding: 0px 0 0px 0 !important;
gap:10px !important;
}
/* IMÁGENES 60px MÁS ANCHAS */
#drag-container img, #drag-container video {
all: unset !important;
width: 100% !important;
max-width: 90% !important;
height: auto !important;
min-height: 300px !important;
max-height: 480px !important;
object-fit: cover !important;
border-radius: 12px !important;
display: block !important;
transition: transform 0.25s ease !important;
cursor: pointer !important;
}
/* Efecto táctil optimizado */
#drag-container img:active, #drag-container video:active {
transform: scale(0.98) !important;
}
/* Mejorar rendimiento de scroll */
#drag-container, #spin-container,
#drag-container img, #drag-container video {
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
}
/* //////////////// WORDPRESS ////////////////////// */
.section-caja-izquierda .contenido-caja h2 {
position: relative;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: 2rem;
}
/* Strong dentro del título */
.section-caja-izquierda .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.11em;
background: linear-gradient(
115deg,
#ffffff 0%,
#a8d8ff 45%,
#4f8ecf 75%
);
background-size: 220% 220%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: wpStrongShift 7s ease-in-out infinite alternate;
}
/* ===================================================== */
/* PÁRRAFO AJUSTADO */
/* ===================================================== */
.section-caja-izquierda .contenido-caja p {
position: relative;
max-width: 680px;
margin: 42px auto 0;
color: rgba(220, 235, 250, 0.88);
font-size: 0.8rem;
line-height: 1.9;
letter-spacing: 0.055em;
font-weight: 300;
font-family: "Roboto", sans-serif;
text-align: center;
text-wrap: balance;
}
/* Strong ahora en celeste elegante */
.section-caja-izquierda .contenido-caja p strong {
color: #a8d8ff;
font-weight: 500;
letter-spacing: 0.07em;
}
/* software */
/* ===================================================== */
/* TITULO SOFTWARE VERDE — VERSION FINAL */
/* ===================================================== */
.caja-derecha-dos .contenido-caja h2 {
position: relative;
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: 2rem;
margin-top: 10vh;
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 20%,
#bfffe6 40%,
#00e68c 60%,
#00e68c 80%,
#ffffff 100%
);
background-size: 300% 300%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: greenShift 8s ease-in-out infinite alternate;
}
/* Glow sutil al entrar en viewport */
.caja-derecha-dos.visible-3d .contenido-caja h2 {
text-shadow:
0 0 10px rgba(0, 230, 140, 0.35),
0 0 22px rgba(0, 230, 140, 0.15);
}
/* STRONG EN TITULO */
.caja-derecha-dos .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.11em;
background: linear-gradient(
115deg,
#ffffff 0%,
#00e68c 50%,
#00e68c 100%
);
background-size: 200% 200%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: strongGreenShift 6s ease-in-out infinite alternate;
}
/* ===================================================== */
/* PARRAFO */
/* ===================================================== */
.caja-derecha-dos .contenido-caja p {
max-width: 680px;
margin: 32px auto 0;
color: rgba(230,235,245,0.85);
font-size: 0.8rem;
line-height: 1.85;
letter-spacing: 0.06em;
font-weight: 300;
font-family: "Roboto", sans-serif;
text-align: center;
text-wrap: balance;
}
/* modelado 3d */
/* ============================= */
/* TITULO */
/* ============================= */
.caja-izquierda-dos .contenido-3d h2.titulo-3d {
display: inline-block;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
line-height: 1.05;
font-size: 2rem;
/* Empieza blanco y luego aparece el púrpura */
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 35%,
#c084ff 55%,
#8f2bff 75%,
#5b00d4 100%
);
background-size: 300% 300%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: gradientMove3D 8s ease-in-out infinite;
-webkit-font-smoothing: antialiased;
position: relative;
}
/* Animación suave blanco → púrpura → blanco */
@keyframes gradientMove3D {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ============================= */
/* PÁRRAFO */
/* ============================= */
.caja-izquierda-dos .contenido-3d p.texto-3d {
max-width: 680px;
margin: 32px auto 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 0.8rem;
line-height: 1.85;
letter-spacing: 0.06em;
text-align: center;
text-wrap: balance;
color: rgba(255, 255, 255, 0.82);
}
/* Destacados */
.caja-izquierda-dos .contenido-3d p.texto-3d strong {
font-weight: 500;
color: #b266ff;
letter-spacing: 0.04em;
}
/* ============================= */
/* CONTENEDOR 3D */
/* ============================= */
.showcase-modelado {
position: relative;
margin: 60px auto 0;
width: 100%;
max-width: 900px;
height: 240px;
display: flex;
justify-content: center;
align-items: center;
perspective: 1600px;
transform-style: preserve-3d;
margin-top: 14vh;
}
/* ============================= */
/* ITEM */
/* ============================= */
.cover-item {
position: absolute;
width: 250px;
height: 400px;
border-radius: 22px;
overflow: hidden;
transition: transform 0.7s cubic-bezier(.2,.8,.2,1),
opacity 0.5s ease;
cursor: pointer;
transform-style: preserve-3d;
}
/* ============================= */
/* IMAGEN */
/* ============================= */
.cover-item img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 22px;
box-shadow: 0 25px 60px rgba(0,0,0,0.45);
transition: transform 0.25s ease, box-shadow 0.25s ease;
transform-style: preserve-3d;
will-change: transform;
}
/* Glow imagen activa */
.cover-item.active img {
box-shadow: 0 30px 70px rgba(170, 90, 255, 0.35);
}
/* ultima section */
/* ===================================================== */
/* TITULO — CENTRADO + BLANCO CELESTE PREMIUM */
/* ===================================================== */
.caja-derecha-tres .contenido-caja h2 {
position: relative;
display: block;
max-width: 760px;
font-family: "Roboto", sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.07em;
line-height: 1.15;
font-size: 2rem;
margin: 20vh 0 24px 0;
/* --- CAMBIO REALIZADO AQUÍ --- */
text-align: center;
/* ---------------------------- */
background: linear-gradient(
115deg,
#ffffff 0%,
#ffffff 35%,
#dff4ff 50%,
#bfeaff 65%,
#ffffff 85%
);
background-size: 220% 220%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: shimmerSoft 8s ease-in-out infinite;
-webkit-font-smoothing: antialiased;
}
/* Shimmer más sutil y premium */
@keyframes shimmerSoft {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* ===================================================== */
/* STRONG EN TITULO */
/* ===================================================== */
.caja-derecha-tres .contenido-caja h2 strong {
font-weight: 900;
letter-spacing: 0.09em;
background: linear-gradient(
120deg,
#ffffff 0%,
#c8f0ff 50%,
#ffffff 100%
);
background-size: 180% 180%;
background-position: 0% 50%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
animation: shimmerStrongSoft 6s ease-in-out infinite;
}
@keyframes shimmerStrongSoft {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
/* ===================================================== */
/* PÁRRAFO ALINEADO AL CENTRO */
/* ===================================================== */
.caja-derecha-tres .contenido-caja p {
max-width: 860px;
margin: 88px 0 0 0;
font-family: "Roboto", sans-serif;
font-weight: 300;
font-size: 1.05rem;
line-height: 2.1;
letter-spacing: 0.035em;
padding: 0;
/* --- CAMBIO REALIZADO AQUÍ --- */
text-align: center;
/* ---------------------------- */
color: rgba(255, 255, 255, 0.92);
opacity: 0;
transform: translateY(20px);
animation: fadeParagraph 1.2s ease forwards;
animation-delay: 0.4s;
}
/* Strong */
.caja-derecha-tres .contenido-caja p strong {
font-weight: 500;
color: #d6f3ff;
letter-spacing: 0.02em;
}
.footer {
padding: 45px 0 20px;
}
.footer-logo {
width: 90px;
}
.footer-newsletter input {
font-size: 14px;
padding: 10px 12px;
}
.footer-newsletter button {
padding: 10px;
font-size: 14px;
}
.footer-links a {
font-size: 13px;
}
.footer-divider {
width: 90%;
}
}