:root {
--bg-color: #0d1b1e;
--card-bg: #153238;
--neon-green: #39FF14;
--neon-cyan: #00E5FF;
--accent-red: #FF3366;
--text-primary: #FFFFFF;
--text-secondary: #B0C4C7;
--header-bg: rgba(13, 27, 30, 0.9);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
color: var(--text-primary);
background-attachment: fixed;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#body-inicio { background-image: url('images/vp%20inicio%201.png'); }
#body-nosotros { background-image: url('images/vp%20nosotros%201.png'); }
#body-seguimiento { background-image: url('images/vp%20seguimiento%201.png'); }
#body-contacto { background-image: url('images/vp%20terminos%201.png'); }
body#body-contacto::before { background: rgba(10, 10, 10, 0.55); }
#body-terminos { background-image: url('images/vp%20terminos%201.png'); }
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 10, 10, 0.7);
z-index: -1;
}
header {
background: var(--header-bg);
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
backdrop-filter: blur(10px);
}
.logo {
font-size: 1.5rem;
font-weight: 900;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 1px;
}
.logo span {
color: var(--neon-green);
}
nav ul {
list-style: none;
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
}
nav a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
nav a:hover {
color: var(--neon-cyan);
}
.btn {
background: linear-gradient(45deg, var(--neon-cyan), #007bb5);
color: white;
padding: 1rem 2.5rem;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: transform 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5);
}
.btn-green {
background: linear-gradient(45deg, var(--neon-green), #22aa0b);
color: #081b1d;
box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
}
.btn-green:hover {
box-shadow: 0 6px 20px rgba(57, 255, 20, 0.5);
color: #000;
}
.btn-red {
background: linear-gradient(45deg, var(--accent-red), #cc0033);
box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3);
}
.btn-red:hover {
box-shadow: 0 6px 20px rgba(255, 51, 102, 0.5);
}
.hero {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4rem;
padding: 6rem 2rem 4rem;
max-width: 1200px;
margin: 0 auto;
}
.hero-content { flex: 1; min-width: 300px; }
.hero-buttons { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.hero-image {
flex: 1;
min-width: 300px;
position: relative;
display: flex;
justify-content: center;
}
.hero-image img, .hero-image video {
max-width: 100%;
height: auto;
border-radius: 20px;
-webkit-mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
mask-image: radial-gradient(circle at center, black 50%, transparent 100%);
filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.4)) saturate(1.1);
transition: transform 0.4s ease;
}
.hero-image img:hover, .hero-image video:hover { transform: scale(1.02); }
.hero h1 {
font-size: 3.5rem;
line-height: 1.2;
margin-bottom: 1.5rem;
background: linear-gradient(to right, var(--neon-cyan), var(--neon-green));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
font-size: 1.3rem;
color: var(--text-secondary);
margin-bottom: 3rem;
line-height: 1.6;
}
.benefits {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.card {
background: var(--card-bg);
border: 1px solid rgba(0, 229, 255, 0.2);
border-radius: 12px;
padding: 2.5rem 2rem;
flex: 1;
min-width: 300px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
transition: transform 0.3s, border-color 0.3s;
}
.card:hover {
transform: translateY(-5px);
border-color: var(--neon-green);
}
.card h3 {
color: var(--neon-cyan);
margin-top: 0;
font-size: 1.5rem;
}
.card p {
color: var(--text-secondary);
line-height: 1.6;
font-size: 1.1rem;
margin-bottom: 0;
}
.map-container {
max-width: 900px;
margin: 5rem auto;
border-radius: 16px;
overflow: hidden;
border: 2px solid var(--neon-green);
box-shadow: 0 10px 40px rgba(57, 255, 20, 0.1);
}
.map-header {
padding: 1.5rem;
background: var(--card-bg);
border-bottom: 2px solid var(--neon-green);
}
.map-header h3 {
margin: 0;
color: var(--neon-green);
text-align: center;
font-size: 1.4rem;
}
.iframe-wrapper iframe {
width: 100%;
height: 450px;
border: 0;
display: block;
}
.checkout-container {
max-width: 650px;
margin: 4rem auto 6rem;
background: var(--card-bg);
border-radius: 16px;
padding: 3rem 4rem;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
border: 1px solid rgba(57, 255, 20, 0.3);
}
.checkout-container h2 {
color: var(--neon-green);
text-align: center;
margin-top: 0;
font-size: 2.2rem;
margin-bottom: 2.5rem;
}
.step-title {
color: var(--neon-cyan);
margin-top: 2.5rem;
border-bottom: 1px solid rgba(0, 229, 255, 0.2);
padding-bottom: 0.8rem;
font-size: 1.4rem;
}
.checkbox-group {
margin: 1.5rem 0;
background: rgba(0, 0, 0, 0.2);
padding: 1.5rem;
border-radius: 12px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 1.2rem;
font-size: 1.05rem;
cursor: pointer;
line-height: 1.4;
}
.checkbox-label:last-child { margin-bottom: 0; }
.checkbox-label input {
width: 20px;
height: 20px;
accent-color: var(--neon-green);
cursor: pointer;
}
.checkbox-label span { flex: 1; }
.checkbox-label a {
color: var(--neon-cyan);
text-decoration: underline;
font-weight: 500;
}
.checkbox-label a:hover { color: var(--neon-green); }
.important-box {
background: rgba(255, 51, 102, 0.1);
border-left: 5px solid var(--accent-red);
padding: 1.5rem 2rem;
border-radius: 0 12px 12px 0;
margin: 2rem 0;
}
.important-box h4 {
color: var(--accent-red);
margin-top: 0;
font-size: 1.4rem;
margin-bottom: 0.8rem;
}
.important-box p {
color: var(--text-primary);
line-height: 1.6;
margin: 0;
font-size: 1.1rem;
}
.hidden-data {
max-height: 0;
overflow: hidden;
opacity: 0;
margin-top: 0;
padding: 0 2rem;
background: #081b1d;
border-radius: 12px;
border: 1px dashed transparent;
transition: max-height 0.4s ease-out, opacity 0.4s ease-in, margin-top 0.4s ease-out, padding 0.4s ease-out;
}
.hidden-data.show-data {
max-height: 800px;
opacity: 1;
margin-top: 2rem;
padding: 2rem;
border-color: var(--neon-cyan);
box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.05);
}
.hidden-data p {
margin: 0.8rem 0;
font-family: monospace;
font-size: 1.3rem;
}
.actions {
display: flex;
gap: 1.5rem;
margin-top: 2.5rem;
}
@media (max-width: 768px) {
header { flex-direction: column; gap: 1rem; }
nav ul { flex-wrap: wrap; justify-content: center; gap: 1rem; }
.hero { text-align: center; padding: 4rem 1rem 2rem; gap: 2rem; }
.hero-buttons { justify-content: center; }
.hero-image { order: -1; }
.hero h1 { font-size: 2.5rem; }
.checkout-container { padding: 2rem; margin: 2rem 1rem; }
.actions { flex-direction: column; }
.btn { width: 100%; text-align: center; }
}
.table-responsive { overflow-x: auto; margin: 2rem 0; }
.pricing-table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(0, 229, 255, 0.2);
}
.pricing-table th {
background: rgba(0, 229, 255, 0.1);
color: var(--neon-cyan);
font-size: 1.2rem;
padding: 1.5rem 1rem;
text-align: left;
border-bottom: 2px solid var(--neon-cyan);
}
.pricing-table td {
padding: 1.2rem 1rem;
color: var(--text-secondary);
border-bottom: 1px solid rgba(0, 229, 255, 0.1);
vertical-align: middle;
}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:hover { background: rgba(255, 255, 255, 0.03); }
.price-highlight { color: var(--neon-green); font-weight: bold; font-size: 1.2rem; }
.transfer-card {
background: rgba(0, 0, 0, 0.4);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid rgba(0, 229, 255, 0.3);
}
.transfer-card p {
font-size: 1.1rem !important;
font-family: 'Inter', sans-serif !important;
margin: 0.8rem 0 !important;
color: var(--text-primary) !important;
word-break: break-all;
}
.btn-copy {
background: transparent;
color: var(--neon-cyan);
border: 2px solid var(--neon-cyan);
transition: all 0.3s ease;
padding: 1rem 1.5rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
margin-top: 1.5rem;
}
.btn-copy:hover {
background: rgba(0, 229, 255, 0.1);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 229, 255, 0.2);
}
.btn-copied-success {
background: var(--neon-green) !important;
color: #000 !important;
border-color: var(--neon-green) !important;
box-shadow: 0 4px 15px rgba(57, 255, 20, 0.4) !important;
}
.universal-footer {
background: var(--header-bg);
padding: 1.5rem 2rem;
border-top: 1px solid rgba(0, 229, 255, 0.2);
margin-top: 4rem;
}
.universal-footer .footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 3rem;
align-items: center;
flex-wrap: wrap;
}
.universal-footer .footer-link {
color: var(--text-secondary);
text-decoration: none;
font-size: 1.1rem;
display: flex;
align-items: center;
gap: 0.5rem;
transition: color 0.3s;
}
.universal-footer .footer-link:hover { color: var(--neon-cyan); }
.universal-footer .icon { font-size: 1.3rem; }
.checkout-bg {
background-image: linear-gradient(rgba(13, 27, 30, 0.85), rgba(13, 27, 30, 0.85)), url('servicio.png');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.liquid-bg {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: -2;
overflow: hidden;
filter: blur(120px);
}
.sphere {
position: absolute;
border-radius: 50%;
opacity: 0.7;
animation: LiquidMotion 25s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.sphere-cyan {
width: 60vw; height: 60vw;
background: #00E5FF;
top: -20%; left: -10%;
animation-delay: 0s;
}
.sphere-green {
width: 50vw; height: 50vw;
background: #39FF14;
bottom: -15%; right: -20%;
animation-delay: -5s;
}
.sphere-purple {
width: 70vw; height: 70vw;
background: #7000FF;
top: 25%; left: 45%;
animation-delay: -10s;
}
.sphere-pink {
width: 55vw; height: 55vw;
background: #FF007F;
bottom: 15%; left: -10%;
animation-delay: -15s;
}
@keyframes LiquidMotion {
0% { transform: translate(0, 0) scale(1); }
33% { transform: translate(15vw, 10vh) scale(1.1); }
66% { transform: translate(-10vw, 20vh) scale(0.9); }
100% { transform: translate(0, 0) scale(1); }
}
@keyframes Reveal {
0% { opacity: 0; transform: translateY(30px); }
100% { opacity: 1; transform: translateY(0); }
}