/* ============================================================
ClobalAi - Estilos Minimalistas, Profesionales e Innovadores
Paleta de Colores Futurista
============================================================ */
/* Estilos para la página de Paquetes */
.pricing-section {
padding: 6rem 0;
background: var(--bg-dark);
}
.section-title {
text-align: center;
margin-bottom: 4rem;
}
.section-title .sub-title {
color: var(--accent-cyan);
font-size: 1.1rem;
font-weight: 600;
display: block;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 2px;
}
.section-title h2 {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: 1rem;
color: #fff;
line-height: 1.2;
text-rendering: optimizeSpeed;
will-change: transform;
background: linear-gradient(90deg, #fff 0%, var(--accent-cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pricing-item {
background: var(--bg-card);
border-radius: 12px;
padding: 2.5rem;
margin-bottom: 2rem;
transition: all 0.3s ease;
height: 100%;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-item:hover {
transform: translateY(-10px);
box-shadow: var(--glow-cyan);
border-color: var(--accent-cyan);
}
.pricing-item.featured {
border: 2px solid var(--accent-cyan);
position: relative;
overflow: hidden;
}
.pricing-badge {
position: absolute;
right: -35px;
background: var(--accent-cyan);
color: var(--bg-dark);
padding: 0.25rem 2.5rem;
transform: rotate(45deg);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
}
.pricing-header {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-header .title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.pricing-header .price {
margin: 1.5rem 0;
}
.pricing-header .price h2 {
font-size: 3rem;
font-weight: 800;
color: var(--accent-cyan);
margin: 0;
line-height: 1;
}
.pricing-header .price h2 span {
font-size: 1rem;
font-weight: 400;
color: var(--text-muted);
}
.pricing-header .price .d-block {
font-size: 1rem;
color: var(--text-muted);
margin-top: 0.5rem;
}
.pricing-header p {
color: var(--text-muted);
margin: 1rem 0 0;
line-height: 1.6;
font-size: 1rem;
}
/* Mejorar line-height general para todas las etiquetas p */
.pricing-section p,
.custom-package-section p,
.faq-section p,
.service-cta-section p {
line-height: 1.6;
font-size: 1rem;
}
.pricing-section .section-title p,
.custom-package-section .section-description,
.faq-section .section-title p {
line-height: 1.5;
font-size: 1rem;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.pricing-body ul {
list-style: none;
padding: 0;
margin: 0 0 2rem;
}
.pricing-body ul li {
padding: 0.6rem 0;
color: var(--text-secondary);
display: flex;
align-items: center;
font-size: 1rem;
line-height: 1.6;
}
.pricing-body ul li i {
color: var(--accent-cyan);
margin-right: 0.75rem;
font-size: 0.9rem;
}
.main-btn {
display: inline-block;
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 8px;
transition: all 0.3s ease;
text-align: center;
width: 100%;
}
.btn-filled {
background: var(--gradient-primary);
color: var(--bg-dark) !important;
border: none;
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-filled:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--gradient-primary);
z-index: -1;
transition: all 0.3s ease;
opacity: 0;
transform: scale(0.8);
}
.btn-filled:hover:before {
opacity: 1;
transform: scale(1);
}
/* Sección de Personalización de Paquetes */
.custom-package-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.03) 0%, rgba(124, 58, 237, 0.03) 100%);
position: relative;
}
.custom-package-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.custom-package-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
margin-bottom: 4rem;
}
.custom-package-card {
background: var(--bg-card);
border-radius: 16px;
padding: 2.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.custom-package-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.custom-package-card:hover::before {
transform: scaleX(1);
}
.custom-package-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 212, 255, 0.15);
border-color: var(--accent-cyan);
}
.card-icon {
width: 80px;
height: 80px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-size: 2.5rem;
color: var(--accent-cyan);
transition: all 0.3s ease;
}
.custom-package-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 100%);
color: var(--bg-dark);
}
.card-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
text-align: center;
}
.card-description {
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 2rem;
text-align: center;
font-size: 1rem;
}
.card-features {
list-style: none;
padding: 0;
margin: 0;
}
.card-features li {
padding: 0.75rem 0;
color: var(--text-muted);
position: relative;
padding-left: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.95rem;
}
.card-features li:last-child {
border-bottom: none;
}
.card-features li i {
position: absolute;
left: 0;
color: var(--accent-cyan);
font-size: 0.875rem;
}
.custom-package-cta {
text-align: center;
background: var(--bg-card);
border-radius: 16px;
padding: 3rem;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.custom-package-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
pointer-events: none;
}
.custom-package-cta h3 {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
position: relative;
}
.custom-package-cta p {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
position: relative;
}
.btn-outline-custom {
background: transparent;
color: var(--accent-cyan);
border: 2px solid var(--accent-cyan);
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.75rem;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.btn-outline-custom:hover {
background: var(--accent-cyan);
color: var(--bg-dark);
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3);
}
.btn-primary-custom i,
.btn-outline-custom i {
font-size: 1rem;
}
/* Sección de Servicios Adicionales */
.additional-services {
padding: 5rem 0;
}
.service-card {
background: var(--bg-card);
border-radius: 12px;
padding: 2.5rem;
height: 100%;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--glow-cyan);
border-color: var(--accent-cyan);
}
.service-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 212, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-size: 2rem;
color: var(--accent-cyan);
transition: all 0.3s ease;
}
.service-card:hover .service-icon {
background: var(--accent-cyan);
color: var(--bg-dark);
transform: scale(1.1);
}
/* Tag "Más popular" en tarjeta de servicio */
.service-card-popular {
border-color: rgba(0, 212, 255, 0.25);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.08);
}
.service-card-popular::before {
transform: scaleX(1);
}
.service-badge {
position: absolute;
top: 1rem;
right: 1rem;
display: inline-block;
padding: 0.35rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--bg-dark);
background: var(--gradient-primary);
border-radius: 9999px;
z-index: 1;
box-shadow: 0 2px 8px rgba(0, 212, 255, 0.35);
}
.service-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
text-align: center;
}
.service-price {
color: var(--accent-cyan);
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 1.5rem;
text-align: center;
}
.service-features {
list-style: none;
padding: 0;
margin: 1.5rem 0 2rem;
}
.service-features li {
padding: 0.5rem 0;
color: var(--text-muted);
position: relative;
padding-left: 1.5rem;
font-size: 0.95rem;
}
.service-features li:before {
content: '✓';
color: var(--accent-cyan);
position: absolute;
left: 0;
font-weight: bold;
}
.btn-outline {
background: transparent;
color: var(--accent-cyan);
border: 2px solid var(--accent-cyan);
padding: 0.75rem 2rem;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
text-align: center;
width: 100%;
}
.btn-outline:hover {
background: var(--accent-cyan);
color: var(--bg-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}
/* Sección de Preguntas Frecuentes */
.faq-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(124, 58, 237, 0.15) 100%);
position: relative;
}
.faq-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.faq-section .content-block {
position: relative;
z-index: 1;
}
.accordion .card {
background: var(--bg-card);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 1rem;
border-radius: 16px;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}
.accordion .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.accordion .card:hover::before {
transform: scaleX(1);
}
.accordion .card:hover {
border-color: var(--accent-cyan);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
transform: translateY(-2px);
}
.accordion .card-header {
background: transparent;
border: none;
padding: 0;
}
.accordion .btn-link {
display: block;
width: 100%;
text-align: left;
padding: 1.75rem 2.5rem;
color: var(--text-primary);
text-decoration: none;
font-weight: 600;
position: relative;
background: transparent;
border: none;
transition: all 0.3s ease;
font-size: 1.15rem;
line-height: 1.4;
}
.accordion .btn-link:not(.collapsed) {
color: var(--accent-cyan);
background: rgba(0, 212, 255, 0.05);
}
.accordion .btn-link:hover {
color: var(--accent-cyan);
background: rgba(0, 212, 255, 0.02);
padding-left: 2.75rem;
}
.accordion .btn-link:after {
content: '+';
position: absolute;
right: 2.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.75rem;
color: var(--accent-cyan);
transition: all 0.3s ease;
font-weight: 300;
}
.accordion .btn-link:not(.collapsed):after {
content: '−';
transform: translateY(-50%) rotate(180deg);
}
.accordion .btn-link:hover:after {
transform: translateY(-50%) scale(1.1);
}
.accordion .btn-link:not(.collapsed):hover:after {
transform: translateY(-50%) rotate(180deg) scale(1.1);
}
.accordion .card-body {
padding: 0 2.5rem 2rem;
color: var(--text-muted);
background: transparent;
font-size: 1.05rem;
line-height: 1.7;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* Efecto de expansión suave */
.accordion .collapse {
transition: height 0.4s ease, opacity 0.3s ease;
}
/* Sección CTA */
.service-cta-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
position: relative;
}
.service-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.service-cta-content {
text-align: center;
position: relative;
z-index: 1;
}
.service-cta-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
}
.service-cta-subtitle {
font-size: 1.25rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.service-cta-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary-custom {
background: var(--gradient-primary);
color: var(--bg-dark);
padding: 1rem 3rem;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
border: none;
font-size: 1.1rem;
position: relative;
overflow: hidden;
}
.btn-primary-custom:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
color: var(--bg-dark);
}
.btn-large {
padding: 1.25rem 3.5rem;
font-size: 1.2rem;
}
/* Responsive */
@media (max-width: 991px) {
.pricing-section {
padding: 4rem 0;
}
.section-title h2 {
font-size: 2rem;
}
.pricing-header .price h2 {
font-size: 2.5rem;
}
.service-cta-title {
font-size: 2rem;
}
.service-cta-subtitle {
font-size: 1.1rem;
}
.additional-services {
padding: 4rem 0;
}
.faq-section {
padding: 4rem 0;
}
.service-cta-section {
padding: 4rem 0;
}
.custom-package-section {
padding: 4rem 0;
}
.custom-package-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.custom-package-card {
padding: 2rem;
}
.card-icon {
width: 70px;
height: 70px;
font-size: 2rem;
}
.card-title {
font-size: 1.25rem;
}
.custom-package-cta {
padding: 2.5rem;
}
.custom-package-cta h3 {
font-size: 1.75rem;
}
.custom-package-cta p {
font-size: 1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary-custom,
.btn-outline-custom {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 767px) {
.pricing-item {
margin-bottom: 2rem;
}
.pricing-badge {
right: -30px;
padding: 0.2rem 2rem;
}
.service-card {
padding: 2rem;
}
.service-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.service-title {
font-size: 1.25rem;
}
.service-cta-title {
font-size: 1.75rem;
}
.service-cta-subtitle {
font-size: 1rem;
}
.service-cta-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary-custom {
width: 100%;
max-width: 300px;
}
.accordion .btn-link {
padding: 1.25rem 1.5rem;
font-size: 1rem;
}
.accordion .btn-link:after {
right: 1.5rem;
font-size: 1.25rem;
}
.accordion .card-body {
padding: 0 1.5rem 1.25rem;
font-size: 1rem;
}
.faq-section {
padding: 4rem 0;
}
.custom-package-section {
padding: 3rem 0;
}
.custom-package-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.custom-package-card {
padding: 1.5rem;
}
.card-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.card-title {
font-size: 1.125rem;
}
.card-description {
font-size: 0.95rem;
}
.card-features li {
font-size: 0.9rem;
padding: 0.5rem 0;
}
.custom-package-cta {
padding: 2rem;
}
.custom-package-cta h3 {
font-size: 1.5rem;
}
.custom-package-cta p {
font-size: 0.95rem;
}
}
@media (max-width: 575px) {
.section-title h2 {
font-size: 1.75rem;
}
.pricing-header .price h2 {
font-size: 2.25rem;
}
.pricing-item {
padding: 2rem 1.5rem;
}
.service-card {
padding: 1.5rem;
}
.service-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.service-title {
font-size: 1.125rem;
}
.service-price {
font-size: 1rem;
}
.service-cta-title {
font-size: 1.5rem;
}
.service-cta-subtitle {
font-size: 0.95rem;
}
.additional-services {
padding: 3rem 0;
}
.faq-section {
padding: 3rem 0;
}
.accordion .btn-link {
padding: 1rem 1.25rem;
font-size: 0.95rem;
}
.accordion .btn-link:after {
right: 1.25rem;
font-size: 1.125rem;
}
.accordion .card-body {
padding: 0 1.25rem 1rem;
font-size: 0.95rem;
}
.accordion .card {
border-radius: 12px;
}
.service-cta-section {
padding: 3rem 0;
}
.custom-package-section {
padding: 2.5rem 0;
}
.custom-package-card {
padding: 1.25rem;
}
.card-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.card-title {
font-size: 1rem;
}
.card-description {
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.card-features li {
font-size: 0.85rem;
padding: 0.4rem 0;
}
.custom-package-cta {
padding: 1.5rem;
}
.custom-package-cta h3 {
font-size: 1.25rem;
}
.custom-package-cta p {
font-size: 0.9rem;
margin-bottom: 2rem;
}
}
/* Toggle de Precios Mensual/Anual */
.pricing-toggle-container {
margin: 2rem 0 3rem;
display: flex;
justify-content: center;
}
.pricing-toggle {
display: flex;
align-items: center;
gap: 1.5rem;
background: var(--bg-card);
padding: 0.75rem 1.5rem;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.toggle-label {
font-size: 1rem;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.toggle-label.active {
color: var(--accent-cyan);
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
.toggle-label .discount-badge {
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
color: var(--bg-dark);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 10px rgba(0, 212, 255, 0.3);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 32px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
transition: all 0.4s ease;
border-radius: 34px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.toggle-slider:before {
position: absolute;
content: "";
height: 24px;
width: 24px;
left: 4px;
bottom: 3px;
background: linear-gradient(135deg, #fff, #f0f0f0);
transition: all 0.4s ease;
border-radius: 50%;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
input:checked + .toggle-slider {
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
border-color: var(--accent-cyan);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}
input:checked + .toggle-slider:before {
transform: translateX(28px);
background: linear-gradient(135deg, #fff, #f8f8f8);
box-shadow: 0 2px 15px rgba(0, 212, 255, 0.5);
}
/* Efectos hover del toggle */
.toggle-slider:hover {
box-shadow: 0 0 15px rgba(0, 212, 255, 0.2);
}
input:checked + .toggle-slider:hover {
box-shadow: 0 0 25px rgba(0, 212, 255, 0.6);
}
/* Animación de precios */
.price h2 {
transition: all 0.4s ease;
}
.price .d-block {
transition: all 0.4s ease;
}
.price-period {
transition: all 0.4s ease;
}
/* Responsive para toggle */
@media (max-width: 768px) {
.pricing-toggle {
gap: 1rem;
padding: 0.5rem 1rem;
}
.toggle-label {
font-size: 0.9rem;
}
.toggle-switch {
width: 50px;
height: 28px;
}
.toggle-slider:before {
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
}
input:checked + .toggle-slider:before {
transform: translateX(22px);
}
.toggle-label .discount-badge {
font-size: 0.65rem;
padding: 0.2rem 0.5rem;
}
}
@media (max-width: 576px) {
.pricing-toggle-container {
margin: 1.5rem 0 2rem;
}
.pricing-toggle {
flex-direction: column;
gap: 1rem;
padding: 1rem;
border-radius: 16px;
}
.toggle-label {
font-size: 0.95rem;
}
}
#loading-area {
width: 100%;
height: 100%;
background: var(--bg-dark);
position: fixed;
left: 0;
top: 0;
opacity: 1;
z-index: 999999999;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#loading-area::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
animation: pulseBg 3s ease-in-out infinite;
}
@keyframes pulseBg {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Loader personalizado con animación futurista */
#loading-area::after {
content: '';
position: relative;
width: 80px;
height: 80px;
border: 3px solid rgba(0, 212, 255, 0.1);
border-top: 3px solid var(--accent-cyan);
border-radius: 50%;
animation: spin 1s linear infinite;
box-shadow:
0 0 20px rgba(0, 212, 255, 0.3),
inset 0 0 20px rgba(0, 212, 255, 0.1);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Logo animado durante carga */
#loading-area .logo-loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: var(--logo-loader-url) no-repeat center;
background-size: contain;
animation: logoPulse 2s ease-in-out infinite;
z-index: 10;
}
@keyframes logoPulse {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 1;
}
}
/* Texto de carga */
#loading-area .loading-text {
position: absolute;
bottom: 30%;
left: 50%;
transform: translateX(-50%);
color: var(--accent-cyan);
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
animation: textGlow 2s ease-in-out infinite;
}
@keyframes textGlow {
0%, 100% {
opacity: 0.6;
text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
50% {
opacity: 1;
text-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
}
}
/* Partículas animadas */
#loading-area .particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
#loading-area .particle {
position: absolute;
width: 2px;
height: 2px;
background: var(--accent-cyan);
border-radius: 50%;
animation: float 4s linear infinite;
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) rotate(720deg);
opacity: 0;
}
}
/* Ocultar loading */
#loading-area.hide {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
/* Responsive para móviles */
@media (max-width: 768px) {
#loading-area::after {
width: 60px;
height: 60px;
}
#loading-area .logo-loader {
width: 45px;
height: 45px;
}
#loading-area .loading-text {
font-size: 1rem;
bottom: 25%;
}
}
:root {
/* Colores Principales */
--bg-dark: #0a0e27; /* Fondo oscuro principal */
--bg-darker: #050811; /* Fondo más oscuro */
--bg-card: #1a1f3a; /* Fondo de tarjetas */
--bg-card-hover: #232847; /* Hover de tarjetas */
/* Acentos Brillantes */
--accent-cyan: #00d4ff; /* Cyan brillante principal */
--accent-cyan-light: #06b6d4; /* Cyan más claro */
--accent-purple: #7c3aed; /* Púrpura */
--accent-blue: #3b82f6; /* Azul */
/* Texto */
--text-primary: #ffffff; /* Texto principal blanco */
--text-secondary: #e5e7eb; /* Texto secundario gris claro */
--text-muted: #9ca3af; /* Texto atenuado */
/* Gradientes */
--gradient-primary: linear-gradient(135deg, #00d4ff 0%, #7c3aed 100%);
--gradient-dark: linear-gradient(180deg, #0a0e27 0%, #050811 100%);
/* Efectos */
--glow-cyan: 0 0 30px rgba(0, 212, 255, 0.5);
--glow-purple: 0 0 30px rgba(124, 58, 237, 0.5);
}
/* Animación Especial para Automatización con IA */
.ai-automation-showcase {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
position: relative;
overflow: hidden;
}
.ai-automation-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 25% 25%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
pointer-events: none;
}
.showcase-header {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 1;
}
.showcase-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.showcase-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
/* Flujo de Automatización */
.automation-flow {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rem;
position: relative;
z-index: 1;
}
.flow-step {
flex: 1;
text-align: center;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
.flow-step:nth-child(1) { animation-delay: 0.2s; }
.flow-step:nth-child(3) { animation-delay: 0.4s; }
.flow-step:nth-child(5) { animation-delay: 0.6s; }
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.step-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--bg-dark);
position: relative;
animation: pulse 2s infinite;
}
.step-icon::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: var(--gradient-primary);
border-radius: 50%;
opacity: 0.3;
animation: ringPulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes ringPulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.1; }
}
.step-content h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.step-content p {
color: var(--text-muted);
font-size: 1rem;
}
.flow-connector {
flex: 0 0 100px;
height: 2px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.connector-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
position: relative;
overflow: hidden;
}
.connector-line::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
animation: flowPulse 2s infinite;
}
@keyframes flowPulse {
to { left: 100%; }
}
.connector-pulse {
width: 12px;
height: 12px;
background: var(--accent-cyan);
border-radius: 50%;
position: absolute;
animation: connectorMove 2s infinite;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
}
@keyframes connectorMove {
0% { left: 0; }
50% { left: calc(100% - 12px); }
100% { left: 0; }
}
/* Visualización de IA */
.ai-visualization {
display: flex;
justify-content: space-between;
align-items: center;
gap: 3rem;
position: relative;
z-index: 1;
}
/* Stream de Datos */
.data-stream {
flex: 1;
display: flex;
flex-direction: column;
gap: 1rem;
}
.stream-particle {
width: 8px;
height: 8px;
background: var(--accent-cyan);
border-radius: 50%;
animation: dataFlow 3s infinite;
animation-delay: var(--delay);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
@keyframes dataFlow {
0% {
transform: translateX(0) scale(0);
opacity: 0;
}
20% {
transform: translateX(50px) scale(1);
opacity: 1;
}
80% {
transform: translateX(200px) scale(1);
opacity: 1;
}
100% {
transform: translateX(250px) scale(0);
opacity: 0;
}
}
/* Cerebro IA */
.ai-brain {
flex: 0 0 200px;
height: 200px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.brain-core {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
position: relative;
z-index: 3;
animation: brainPulse 3s infinite;
}
@keyframes brainPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.brain-ring {
position: absolute;
border: 2px solid var(--accent-cyan);
border-radius: 50%;
opacity: 0.6;
}
.ring-1 {
width: 120px;
height: 120px;
animation: rotate 10s linear infinite;
}
.ring-2 {
width: 160px;
height: 160px;
animation: rotate 15s linear infinite reverse;
}
.ring-3 {
width: 200px;
height: 200px;
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.neural-network {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
}
.neural-node {
position: absolute;
width: 6px;
height: 6px;
background: var(--accent-cyan);
border-radius: 50%;
left: var(--x);
top: var(--y);
animation: neuralPulse 2s infinite;
box-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
}
@keyframes neuralPulse {
0%, 100% {
transform: scale(1);
opacity: 0.6;
}
50% {
transform: scale(1.5);
opacity: 1;
}
}
/* Output Stream */
.output-stream {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.output-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
opacity: 0;
transform: translateX(30px);
animation: slideInRight 0.8s ease forwards;
animation-delay: var(--delay);
}
.output-item i {
color: var(--accent-cyan);
font-size: 1.2rem;
}
.output-item span {
color: var(--text-primary);
font-weight: 500;
}
@keyframes slideInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive */
@media (max-width: 991px) {
.automation-flow {
flex-direction: column;
gap: 2rem;
}
.flow-connector {
width: 100%;
height: 50px;
flex: none;
}
.connector-line {
width: 2px;
height: 100%;
}
.connector-line::after {
left: 0;
top: -100%;
width: 100%;
height: 100%;
animation: flowPulseVertical 2s infinite;
}
@keyframes flowPulseVertical {
to { top: 100%; }
}
.connector-pulse {
top: 0;
left: 50%;
transform: translateX(-50%);
animation: connectorMoveVertical 2s infinite;
}
@keyframes connectorMoveVertical {
0% { top: 0; }
50% { top: calc(100% - 12px); }
100% { top: 0; }
}
.ai-visualization {
flex-direction: column;
gap: 2rem;
}
.data-stream,
.output-stream {
flex: none;
flex-direction: row;
justify-content: center;
}
.stream-particle {
animation: dataFlowVertical 3s infinite;
}
@keyframes dataFlowVertical {
0% {
transform: translateY(0) scale(0);
opacity: 0;
}
20% {
transform: translateY(30px) scale(1);
opacity: 1;
}
80% {
transform: translateY(120px) scale(1);
opacity: 1;
}
100% {
transform: translateY(150px) scale(0);
opacity: 0;
}
}
}
@media (max-width: 576px) {
.ai-automation-showcase {
padding: 3rem 0;
}
.showcase-header {
margin-bottom: 2rem;
}
.automation-flow {
margin-bottom: 2rem;
}
.step-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.ai-brain {
flex: 0 0 150px;
height: 150px;
}
.brain-core {
width: 60px;
height: 60px;
}
.ring-1 { width: 90px; height: 90px; }
.ring-2 { width: 120px; height: 120px; }
.ring-3 { width: 150px; height: 150px; }
}
/* Animación Especial para Desarrollo Web Profesional */
.web-dev-showcase {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.06) 0%, rgba(124, 58, 237, 0.06) 100%);
position: relative;
overflow: hidden;
}
.web-dev-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.web-dev-showcase .showcase-title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.web-dev-showcase .showcase-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
/* Proceso de Desarrollo */
.dev-process {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rem;
position: relative;
z-index: 1;
}
.dev-process .process-step {
flex: 1;
text-align: center;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
.dev-process .process-step:nth-child(1) { animation-delay: 0.2s; }
.dev-process .process-step:nth-child(3) { animation-delay: 0.4s; }
.dev-process .process-step:nth-child(5) { animation-delay: 0.6s; }
.dev-process .process-step .step-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--bg-dark);
position: relative;
animation: pulse 2s infinite;
}
.dev-process .process-step .step-icon::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: var(--gradient-primary);
border-radius: 50%;
opacity: 0.3;
animation: ringPulse 2s infinite;
}
.dev-process .process-step .step-content h3 {
font-size: 1.3rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.dev-process .process-step .step-content p {
color: var(--text-muted);
font-size: 1rem;
}
.process-connector {
flex: 0 0 100px;
height: 2px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.process-connector .connector-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
position: relative;
overflow: hidden;
}
.process-connector .code-flow {
width: 12px;
height: 12px;
background: var(--accent-cyan);
border-radius: 50%;
position: absolute;
animation: codeFlow 2s infinite;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.6);
}
@keyframes codeFlow {
0% { left: 0; }
50% { left: calc(100% - 12px); }
100% { left: 0; }
}
/* Visualización Web */
.web-visualization {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
position: relative;
z-index: 1;
}
/* Fase de Diseño */
.design-phase {
flex: 1;
}
.design-canvas {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.canvas-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.window-controls {
display: flex;
gap: 0.5rem;
}
.control {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }
.canvas-title {
color: var(--text-muted);
font-size: 0.9rem;
font-family: 'Courier New', monospace;
}
.canvas-content {
padding: 2rem;
height: 300px;
position: relative;
}
.wireframe-element {
position: absolute;
background: rgba(0, 212, 255, 0.1);
border: 2px solid var(--accent-cyan);
border-radius: 8px;
width: var(--width);
height: var(--height);
top: var(--top);
left: var(--left);
opacity: 0;
animation: wireframeAppear 1s ease forwards;
animation-delay: calc(var(--delay, 0s) + 0.5s);
}
.wireframe-element:nth-child(1) { --delay: 0s; }
.wireframe-element:nth-child(2) { --delay: 0.2s; }
.wireframe-element:nth-child(3) { --delay: 0.4s; }
.wireframe-element:nth-child(4) { --delay: 0.6s; }
@keyframes wireframeAppear {
to {
opacity: 1;
transform: scale(1);
}
from {
opacity: 0;
transform: scale(0.8);
}
}
/* Editor de Código */
.code-editor {
flex: 1;
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.editor-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.file-tabs {
display: flex;
gap: 0.5rem;
}
.tab {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px 6px 0 0;
color: var(--text-muted);
font-size: 0.85rem;
font-family: 'Courier New', monospace;
cursor: pointer;
transition: all 0.3s ease;
}
.tab.active {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
.editor-content {
padding: 1.5rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
background: #1e1e1e;
color: #d4d4d4;
height: 300px;
overflow: hidden;
}
.code-line {
opacity: 0;
transform: translateX(-20px);
animation: codeAppear 0.5s ease forwards;
animation-delay: var(--delay);
margin-bottom: 0.5rem;
}
@keyframes codeAppear {
to {
opacity: 1;
transform: translateX(0);
}
}
.code-tag {
color: #569cd6;
}
.code-text {
color: #ce9178;
}
.typing-cursor::after {
content: '|';
animation: blink 1s infinite;
color: #ffffff;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Vista Previa Mejorada */
.live-preview {
flex: 1;
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.preview-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.browser-bar {
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.url-bar {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.85rem;
}
.url-bar i {
color: #28ca42;
}
.preview-content {
padding: 1rem;
background: #ffffff;
color: #333;
min-height: 350px;
position: relative;
}
/* Website Showcase */
.website-showcase {
position: relative;
height: 280px;
}
.site-type {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: scale(0.95);
transition: all 0.5s ease;
}
.site-type.active {
opacity: 1;
transform: scale(1);
}
/* Site Previews */
.site-preview {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* Site Previews */
.site-preview .site-header {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
color: white;
padding: 0.75rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.site-preview .site-logo {
font-weight: 700;
font-size: 1rem;
}
.site-preview .site-nav {
display: flex;
gap: 1rem;
font-size: 0.8rem;
}
.site-hero {
padding: 1.5rem;
text-align: center;
background: #f8f9fa;
}
.site-hero h2 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: #333;
}
.site-hero p {
color: #666;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.site-cta {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.site-cta:hover {
transform: translateY(-2px);
}
/* Corporate Site */
.site-features {
padding: 1rem;
display: flex;
justify-content: space-around;
background: white;
}
.feature-item {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.feature-item .feature-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 50%;
}
.feature-item span {
font-size: 0.75rem;
color: #666;
}
/* Ecommerce Site */
.site-products {
padding: 1rem;
display: flex;
justify-content: space-around;
background: white;
}
.product-card {
text-align: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
transition: transform 0.3s ease;
}
.product-card:hover {
transform: translateY(-3px);
}
.product-img {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 8px;
margin: 0 auto 0.5rem;
}
.product-name {
display: block;
font-size: 0.75rem;
color: #333;
margin-bottom: 0.25rem;
}
.product-price {
display: block;
font-size: 0.85rem;
font-weight: 700;
color: #00d4ff;
}
/* Portfolio Site */
.site-gallery {
padding: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
background: white;
}
.gallery-item {
aspect-ratio: 1;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 8px;
opacity: 0;
transform: scale(0.8);
animation: galleryAppear 0.5s ease forwards;
animation-delay: var(--delay);
}
@keyframes galleryAppear {
to {
opacity: 1;
transform: scale(1);
}
}
/* Site Selector */
.site-selector {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.selector-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: all 0.3s ease;
}
.selector-dot.active {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
transform: scale(1.2);
}
/* Animación automática de sitios */
@keyframes siteRotate {
0%, 33% { opacity: 1; transform: scale(1); }
34%, 100% { opacity: 0; transform: scale(0.95); }
}
.site-type:nth-child(1) {
animation: siteRotate 9s infinite;
}
.site-type:nth-child(2) {
animation: siteRotate 9s infinite 3s;
}
.site-type:nth-child(3) {
animation: siteRotate 9s infinite 6s;
}
/* Animación de Aplicaciones Móviles */
.mobile-app-showcase {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(124, 58, 237, 0.05));
position: relative;
overflow: hidden;
}
.mobile-app-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.showcase-header {
text-align: center;
margin-bottom: 4rem;
}
.showcase-title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 800;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.showcase-subtitle {
font-size: clamp(1rem, 2.5vw, 1.25rem);
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
/* Proceso de Desarrollo de Apps */
.app-development-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 4rem;
position: relative;
}
.flow-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 200px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
.flow-step:nth-child(1) { animation-delay: 0.2s; }
.flow-step:nth-child(3) { animation-delay: 0.4s; }
.flow-step:nth-child(5) { animation-delay: 0.6s; }
.flow-step .step-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: white;
margin-bottom: 1.5rem;
position: relative;
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}
.flow-step .step-icon::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: var(--gradient-primary);
border-radius: 50%;
opacity: 0.3;
z-index: -1;
animation: pulse 2s ease-in-out infinite;
}
.flow-step h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.flow-step p {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.flow-connector {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.1);
position: relative;
max-width: 100px;
}
.connector-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
position: relative;
overflow: hidden;
}
.code-flow {
position: absolute;
top: -4px;
left: 0;
width: 12px;
height: 10px;
background: var(--accent-cyan);
border-radius: 50%;
animation: codeFlow 2s ease-in-out infinite;
}
@keyframes codeFlow {
0% { left: 0; }
50% { left: calc(100% - 12px); }
100% { left: 0; }
}
/* Visualización Móvil */
.mobile-visualization {
display: grid;
grid-template-columns: 1fr 1fr 1.2fr;
gap: 3rem;
align-items: start;
}
/* Fase de Diseño */
.design-phase {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.canvas-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.window-controls {
display: flex;
gap: 0.5rem;
}
.control {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }
.canvas-title {
color: var(--text-muted);
font-size: 0.9rem;
font-family: 'Courier New', monospace;
}
.canvas-content {
padding: 2rem;
height: 350px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.mobile-frame {
width: 180px;
height: 320px;
background: #1a1a1a;
border-radius: 30px;
padding: 10px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
position: relative;
}
.phone-screen {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 20px;
overflow: hidden;
position: relative;
}
.app-header {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
color: white;
padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.7rem;
}
.app-nav-icon,
.app-menu-icon {
width: 16px;
height: 16px;
background: rgba(255, 255, 255, 0.8);
border-radius: 4px;
}
.app-content {
padding: 1rem 0.5rem;
}
.hero-section {
text-align: center;
margin-bottom: 1rem;
}
.hero-image {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 12px;
margin: 0 auto 0.5rem;
}
.hero-text {
font-size: 0.8rem;
font-weight: 700;
color: #333;
}
.feature-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.feature-card {
background: #f8f9fa;
border-radius: 8px;
padding: 0.5rem;
text-align: center;
}
.feature-card .feature-icon {
width: 20px;
height: 20px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 50%;
margin: 0 auto 0.25rem;
}
.feature-card span {
font-size: 0.6rem;
color: #666;
}
/* Fase de Código */
.code-phase {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.editor-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.editor-tabs {
display: flex;
gap: 1rem;
}
.tab {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px 8px 0 0;
font-size: 0.85rem;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
}
.tab.active {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
.code-content {
padding: 1.5rem;
background: #1e1e1e;
color: #d4d4d4;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
line-height: 1.6;
min-height: 320px;
position: relative;
}
.code-line {
opacity: 0;
transform: translateX(-20px);
animation: slideInLeft 0.5s ease forwards;
}
.code-comment { color: #6a9955; }
.code-keyword { color: #569cd6; }
.code-string { color: #ce9178; }
.code-function { color: #dcdcaa; }
.code-tag { color: #4fc1ff; }
.code-cursor {
position: absolute;
bottom: 1.5rem;
left: 2rem;
color: #ffffff;
animation: blink 1s infinite;
}
/* Preview de Apps */
.app-preview {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.preview-devices {
display: flex;
justify-content: space-around;
margin-bottom: 2rem;
}
.device {
display: flex;
flex-direction: column;
align-items: center;
}
.device-frame {
width: 140px;
height: 240px;
background: #2a2a2a;
border-radius: 20px;
padding: 8px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
position: relative;
}
.ios-device .device-frame {
background: #000;
border-radius: 25px;
}
.android-device .device-frame {
background: #1a1a1a;
border-radius: 15px;
}
.device-screen {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.status-bar {
background: #f8f9fa;
padding: 0.25rem 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.6rem;
color: #333;
}
.status-icons {
display: flex;
gap: 0.25rem;
}
.signal, .wifi, .battery {
width: 12px;
height: 8px;
background: #333;
border-radius: 2px;
}
.app-screen {
height: calc(100% - 20px);
background: #ffffff;
}
.app-screen .app-header {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
color: white;
padding: 0.5rem;
text-align: center;
font-size: 0.7rem;
font-weight: 600;
}
.app-screen .app-content {
padding: 0.75rem 0.5rem;
}
.welcome-card {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(124, 58, 237, 0.1));
border-radius: 12px;
padding: 1rem 0.5rem;
text-align: center;
margin-bottom: 1rem;
}
.welcome-card h5 {
font-size: 0.8rem;
font-weight: 700;
color: #333;
margin-bottom: 0.25rem;
}
.welcome-card p {
font-size: 0.6rem;
color: #666;
margin-bottom: 0.5rem;
}
.app-button {
background: linear-gradient(135deg, #00d4ff, #7c3aed);
color: white;
border: none;
padding: 0.4rem 1rem;
border-radius: 15px;
font-size: 0.6rem;
font-weight: 600;
cursor: pointer;
}
.app-features {
display: flex;
justify-content: space-around;
}
.app-feature {
text-align: center;
}
.app-feature .feature-icon {
width: 24px;
height: 24px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 50%;
margin: 0 auto 0.25rem;
}
.app-feature span {
font-size: 0.5rem;
color: #666;
}
.device-label {
margin-top: 0.75rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-primary);
}
/* Store Badges */
.store-badges {
display: flex;
justify-content: center;
gap: 1rem;
}
.store-badge {
display: flex;
align-items: center;
gap: 0.75rem;
background: #000;
padding: 0.75rem 1.25rem;
border-radius: 10px;
cursor: pointer;
transition: transform 0.3s ease;
}
.store-badge:hover {
transform: translateY(-2px);
}
.app-store {
background: #000;
}
.google-play {
background: #000;
}
.badge-icon {
width: 30px;
height: 30px;
background: linear-gradient(135deg, #00d4ff, #7c3aed);
border-radius: 6px;
}
.badge-text {
display: flex;
flex-direction: column;
}
.badge-small {
font-size: 0.6rem;
color: #888;
}
.badge-large {
font-size: 0.9rem;
font-weight: 600;
color: white;
}
/* Animaciones */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.5; }
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Animación de SEO Web */
.seo-showcase {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(124, 58, 237, 0.05));
position: relative;
overflow: hidden;
}
.seo-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Proceso SEO */
.seo-process-flow {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
margin-bottom: 4rem;
position: relative;
}
.seo-process-flow .process-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 200px;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
.seo-process-flow .process-step:nth-child(1) { animation-delay: 0.2s; }
.seo-process-flow .process-step:nth-child(3) { animation-delay: 0.4s; }
.seo-process-flow .process-step:nth-child(5) { animation-delay: 0.6s; }
.seo-process-flow .process-step .step-icon {
width: 80px;
height: 80px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: white;
margin-bottom: 1.5rem;
position: relative;
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}
.seo-process-flow .process-step .step-icon::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background: var(--gradient-primary);
border-radius: 50%;
opacity: 0.3;
z-index: -1;
animation: pulse 2s ease-in-out infinite;
}
.seo-process-flow .process-step h3 {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.seo-process-flow .process-step p {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
.process-connector {
flex: 1;
height: 2px;
background: rgba(255, 255, 255, 0.1);
position: relative;
max-width: 100px;
}
.connector-line {
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
position: relative;
overflow: hidden;
}
.ranking-flow {
position: absolute;
top: -4px;
left: 0;
width: 12px;
height: 10px;
background: var(--accent-cyan);
border-radius: 50%;
animation: rankingFlow 2s ease-in-out infinite;
}
@keyframes rankingFlow {
0% { left: 0; }
50% { left: calc(100% - 12px); }
100% { left: 0; }
}
/* Visualización SEO */
.seo-visualization {
display: grid;
grid-template-columns: 1.2fr 1fr 1.3fr;
gap: 3rem;
align-items: start;
}
/* Análisis de Búsqueda */
.search-analysis {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.dashboard-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.window-controls {
display: flex;
gap: 0.5rem;
}
.control {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }
.dashboard-title {
color: var(--text-muted);
font-size: 0.9rem;
font-family: 'Courier New', monospace;
}
.dashboard-content {
padding: 1.5rem;
}
.metrics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 2rem;
}
.metric-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 1rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.metric-value {
font-size: 1.8rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.25rem;
}
.metric-label {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.metric-progress {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--gradient-primary);
border-radius: 2px;
width: var(--progress);
animation: progressGrow 1.5s ease-out;
}
.metric-arrow {
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 8px solid #00d4ff;
margin: 0 auto;
}
.metric-arrow.up {
transform: rotate(0deg);
}
.metric-arrow.down {
transform: rotate(180deg);
border-bottom-color: #ff4444;
}
@keyframes progressGrow {
from { width: 0; }
to { width: var(--progress); }
}
/* Análisis de Keywords */
.keyword-analysis {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 1rem;
}
.analysis-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.keyword-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.keyword-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-left: 3px solid var(--accent-cyan);
opacity: 0;
transform: translateX(-20px);
animation: slideInLeft 0.5s ease forwards;
animation-delay: calc(var(--position) * 0.1s);
}
.keyword-position {
font-weight: 700;
color: var(--accent-cyan);
font-size: 0.9rem;
min-width: 30px;
}
.keyword-text {
flex: 1;
color: var(--text-primary);
font-size: 0.85rem;
margin: 0 1rem;
}
.keyword-traffic {
color: var(--text-muted);
font-size: 0.8rem;
font-weight: 600;
}
/* Trabajo de Optimización */
.optimization-work {
display: flex;
flex-direction: column;
gap: 2rem;
}
.code-optimizer {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.optimizer-header {
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.editor-tabs {
display: flex;
gap: 1rem;
}
.tab {
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px 8px 0 0;
font-size: 0.85rem;
color: var(--text-muted);
cursor: pointer;
transition: all 0.3s ease;
}
.tab.active {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: none;
}
.optimizer-content {
padding: 1.5rem;
background: #1e1e1e;
color: #d4d4d4;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
line-height: 1.6;
min-height: 280px;
position: relative;
}
.code-line {
opacity: 0;
transform: translateX(-20px);
animation: slideInLeft 0.5s ease forwards;
}
.code-comment { color: #6a9955; }
.code-tag { color: #569cd6; }
.code-text { color: #ce9178; }
.code-cursor {
position: absolute;
bottom: 1.5rem;
left: 2rem;
color: #ffffff;
animation: blink 1s infinite;
}
/* Checklist de Optimización */
.optimization-checklist {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.checklist-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1rem;
}
.checklist-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.checklist-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
font-size: 0.9rem;
color: var(--text-primary);
transition: all 0.3s ease;
}
.checklist-item.completed {
border-left: 3px solid #28ca42;
}
.checklist-item.in-progress {
border-left: 3px solid #ffbd2e;
}
.checklist-item.pending {
border-left: 3px solid #888;
opacity: 0.7;
}
.check-icon {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
.checklist-item.completed .check-icon {
background: #28ca42;
color: white;
}
.checklist-item.in-progress .check-icon {
background: #ffbd2e;
color: white;
}
.checklist-item.pending .check-icon {
background: #888;
color: white;
}
/* Resultados de Búsqueda */
.search-results {
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.search-bar {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.search-input {
flex: 1;
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-primary);
font-size: 0.9rem;
}
.search-input i {
color: var(--accent-cyan);
}
.search-button {
background: var(--gradient-primary);
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: transform 0.3s ease;
}
.search-button:hover {
transform: translateY(-1px);
}
/* Lista de Resultados */
.results-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.result-item {
display: flex;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 0.5s ease forwards;
animation-delay: calc(var(--rank) * 0.1s);
}
.result-item:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateY(-2px);
}
.result-item.featured {
background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(124, 58, 237, 0.1));
border: 1px solid rgba(0, 212, 255, 0.3);
}
.result-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 50px;
}
.rank-number {
font-size: 1.2rem;
font-weight: 800;
color: var(--accent-cyan);
}
.rank-label {
font-size: 0.6rem;
color: var(--accent-cyan);
font-weight: 600;
margin-top: 0.25rem;
}
.result-content {
flex: 1;
}
.result-url {
font-size: 0.8rem;
color: #00d4ff;
margin-bottom: 0.25rem;
}
.result-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
}
.result-description {
font-size: 0.85rem;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 0.5rem;
}
.result-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--text-muted);
}
.meta-item {
display: flex;
align-items: center;
}
/* Métricas de Performance */
.performance-metrics {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
padding: 1.5rem;
}
.metric-chart {
text-align: center;
}
.chart-title {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 1.5rem;
}
.chart-bars {
display: flex;
justify-content: space-around;
align-items: end;
height: 120px;
gap: 0.5rem;
}
.chart-bar {
width: 30px;
height: var(--height);
background: var(--gradient-primary);
border-radius: 4px 4px 0 0;
position: relative;
opacity: 0;
transform: scaleY(0);
transform-origin: bottom;
animation: growBar 0.8s ease forwards;
animation-delay: calc(var(--rank) * 0.1s);
}
.chart-bar::after {
content: attr(--month);
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 0.7rem;
color: var(--text-muted);
}
@keyframes growBar {
to {
opacity: 1;
transform: scaleY(1);
}
}
/* Animaciones */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(1.1); opacity: 0.5; }
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
/* Animación de Hosting Web */
.hosting-showcase {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(124, 58, 237, 0.05));
position: relative;
overflow: hidden;
}
.hosting-showcase::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Infraestructura de Hosting */
.hosting-infrastructure {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: stretch;
}
/* Server Rack */
.server-rack {
background: var(--bg-card);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.rack-header {
background: rgba(255, 255, 255, 0.05);
padding: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.rack-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--text-primary);
}
.status-indicators {
display: flex;
gap: 1.5rem;
}
.indicator {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: var(--text-muted);
}
.indicator-light {
width: 8px;
height: 8px;
border-radius: 50%;
animation: pulse 2s infinite;
}
.indicator.online .indicator-light {
background: #28ca42;
box-shadow: 0 0 10px rgba(40, 202, 66, 0.5);
}
.indicator.uptime .indicator-light {
background: var(--accent-cyan);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}
/* Servers Grid */
.servers-grid {
padding: 1.5rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
}
.server-unit {
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
position: relative;
transition: all 0.3s ease;
}
.server-unit:hover {
border-color: var(--accent-cyan);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
}
.server-front {
padding: 1rem;
display: flex;
gap: 1rem;
align-items: center;
}
.server-status {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.server-status.active {
background: #28ca42;
box-shadow: 0 0 15px rgba(40, 202, 66, 0.6);
animation: statusPulse 2s infinite;
}
.server-info {
flex: 1;
}
.server-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.server-specs {
font-size: 0.8rem;
color: var(--text-muted);
font-family: 'Courier New', monospace;
}
.server-metrics {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 100px;
}
.metric-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.metric-label {
font-size: 0.7rem;
color: var(--text-muted);
text-transform: uppercase;
font-weight: 600;
}
.metric-bar {
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
}
.metric-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
border-radius: 2px;
width: var(--fill);
animation: metricGrow 1.5s ease-out;
}
.server-back {
background: rgba(0, 0, 0, 0.2);
padding: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.port-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.port {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.port.active {
background: var(--accent-cyan);
box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
}
/* Network Visualization */
.network-visualization {
background: var(--bg-card);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem;
position: relative;
min-height: 350px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.network-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.core-hub {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.hub-ring {
width: 60px;
height: 60px;
border: 3px solid var(--accent-cyan);
border-radius: 50%;
animation: hubRotate 10s linear infinite;
}
.hub-core {
width: 45px;
height: 45px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}
.hub-label {
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
}
.connection-nodes {
position: relative;
width: 100%;
height: 100%;
}
.node {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
opacity: 0;
animation: nodeAppear 0.8s ease forwards;
}
.node[data-node="1"] { top: 20%; left: 15%; animation-delay: 0.2s; }
.node[data-node="2"] { top: 20%; right: 15%; animation-delay: 0.4s; }
.node[data-node="3"] { bottom: 20%; left: 15%; animation-delay: 0.6s; }
.node[data-node="4"] { bottom: 20%; right: 15%; animation-delay: 0.8s; }
.node[data-node="5"] { top: 50%; left: 5%; animation-delay: 1s; }
.node[data-node="6"] { top: 50%; right: 5%; animation-delay: 1.2s; }
.node-icon {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-cyan);
font-size: 0.8rem;
border: 2px solid var(--accent-cyan);
transition: all 0.3s ease;
}
.node:hover .node-icon {
background: var(--accent-cyan);
color: white;
transform: scale(1.1);
}
.node-label {
font-size: 0.7rem;
color: var(--text-muted);
text-align: center;
font-weight: 600;
}
.connection-line {
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 100px;
background: linear-gradient(to bottom, transparent, var(--accent-cyan), transparent);
transform-origin: top center;
opacity: 0.3;
animation: connectionPulse 3s infinite;
}
.node[data-node="1"] .connection-line { transform: rotate(-45deg); }
.node[data-node="2"] .connection-line { transform: rotate(45deg); }
.node[data-node="3"] .connection-line { transform: rotate(-135deg); }
.node[data-node="4"] .connection-line { transform: rotate(135deg); }
.node[data-node="5"] .connection-line { transform: rotate(-90deg); }
.node[data-node="6"] .connection-line { transform: rotate(90deg); }
/* Data Packets */
.data-packets {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.packet {
position: absolute;
width: 6px;
height: 6px;
background: var(--accent-cyan);
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}
.packet-1 {
animation: packetMove1 4s linear infinite;
}
.packet-2 {
animation: packetMove2 4s linear infinite 1s;
}
.packet-3 {
animation: packetMove3 4s linear infinite 2s;
}
.packet-4 {
animation: packetMove4 4s linear infinite 3s;
}
/* Hosting Features */
.hosting-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.feature-panel {
background: var(--bg-card);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.feature-panel:hover {
transform: translateY(-5px);
border-color: var(--accent-cyan);
}
.panel-header {
background: rgba(255, 255, 255, 0.05);
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-icon {
width: 40px;
height: 40px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.panel-title {
font-size: 1.1rem;
font-weight: 600;
color: var(--text-primary);
}
.panel-content {
padding: 1rem;
}
/* Security Panel */
.security-features {
display: flex;
flex-direction: column;
gap: 1rem;
}
.security-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-left: 3px solid transparent;
transition: all 0.3s ease;
}
.security-item.active {
border-left-color: #28ca42;
background: rgba(40, 202, 66, 0.1);
}
.security-item.scanning {
border-left-color: #ffbd2e;
background: rgba(255, 189, 46, 0.1);
}
.security-icon {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--accent-cyan);
font-size: 0.9rem;
}
.security-item.active .security-icon {
background: #28ca42;
color: white;
}
.security-item.scanning .security-icon {
background: #ffbd2e;
color: white;
animation: scanPulse 2s infinite;
}
.security-text {
flex: 1;
}
.security-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.security-status {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Performance Panel */
.performance-metrics {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.perf-metric {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.metric-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.metric-name {
font-size: 0.9rem;
color: var(--text-muted);
}
.metric-value {
font-size: 1rem;
font-weight: 700;
color: var(--accent-cyan);
}
.metric-chart {
height: 40px;
background: rgba(255, 255, 255, 0.05);
border-radius: 4px;
overflow: hidden;
position: relative;
}
.chart-line {
width: 100%;
height: var(--height);
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
border-radius: 4px;
position: absolute;
bottom: 0;
animation: chartGrow 1.5s ease-out;
}
/* Support Panel */
.support-team {
display: flex;
flex-direction: column;
gap: 1rem;
}
.support-agent {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-left: 3px solid transparent;
transition: all 0.3s ease;
}
.support-agent.active {
border-left-color: #28ca42;
background: rgba(40, 202, 66, 0.1);
}
.support-agent.busy {
border-left-color: #ffbd2e;
background: rgba(255, 189, 46, 0.1);
}
.agent-avatar {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: 0.9rem;
}
.support-agent.active .agent-avatar {
background: #28ca42;
color: white;
}
.agent-info {
flex: 1;
}
.agent-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.agent-status {
font-size: 0.8rem;
color: var(--text-muted);
}
.agent-response {
font-size: 0.8rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 4px;
color: var(--text-muted);
}
.support-agent.active .agent-response {
background: rgba(40, 202, 66, 0.2);
color: #28ca42;
}
.support-agent.busy .agent-response {
background: rgba(255, 189, 46, 0.2);
color: #ffbd2e;
}
/* Animaciones */
@keyframes statusPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
@keyframes metricGrow {
from { width: 0; }
to { width: var(--fill); }
}
@keyframes hubRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes nodeAppear {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes connectionPulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
@keyframes packetMove1 {
0% { top: 20%; left: 15%; }
50% { top: 50%; left: 50%; }
100% { top: 80%; right: 15%; }
}
@keyframes packetMove2 {
0% { top: 20%; right: 15%; }
50% { top: 50%; left: 50%; }
100% { top: 80%; left: 15%; }
}
@keyframes packetMove3 {
0% { bottom: 20%; left: 15%; }
50% { top: 50%; left: 50%; }
100% { top: 20%; right: 15%; }
}
@keyframes packetMove4 {
0% { bottom: 20%; right: 15%; }
50% { top: 50%; left: 50%; }
100% { top: 20%; left: 15%; }
}
@keyframes scanPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
@keyframes chartGrow {
from { height: 0; }
to { height: var(--height); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.2); opacity: 0.8; }
}
/* Sección de Combos Populares */
.service-combos-section {
padding: 6rem 0;
background: linear-gradient(135deg, rgba(0, 212, 255, 0.03), rgba(124, 58, 237, 0.03));
position: relative;
}
.service-combos-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* Grid de Combos */
.combos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
/* Combo Cards */
.combo-card {
background: var(--bg-card);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
position: relative;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.combo-card:hover {
transform: translateY(-8px);
border-color: var(--accent-cyan);
box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
}
.combo-card.featured {
border-color: var(--accent-purple);
box-shadow: 0 15px 35px rgba(124, 58, 237, 0.3);
}
.combo-card.featured:hover {
box-shadow: 0 25px 50px rgba(124, 58, 237, 0.4);
}
/* Combo Badge */
.combo-badge {
position: absolute;
top: 1.5rem;
right: 1.5rem;
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}
/* Combo Header */
.combo-header {
padding: 2rem 2rem 1rem;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.combo-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.combo-savings {
display: flex;
align-items: center;
gap: 0.5rem;
}
.savings-label {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 500;
}
.savings-amount {
font-size: 1.8rem;
font-weight: 800;
color: #28ca42;
text-shadow: 0 0 20px rgba(40, 202, 66, 0.3);
}
/* Combo Services */
.combo-services {
padding: 1.5rem 2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.combo-service {
display: flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.05);
padding: 0.75rem 1rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
transition: all 0.3s ease;
}
.combo-service i {
color: var(--accent-cyan);
font-size: 0.9rem;
}
.combo-plus {
font-size: 1.2rem;
font-weight: 700;
color: var(--accent-purple);
opacity: 0.7;
}
/* Combo Benefits */
.combo-benefits {
padding: 0 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.9rem;
color: var(--text-muted);
}
.benefit-item i {
color: #28ca42;
font-size: 0.9rem;
flex-shrink: 0;
}
/* Combo Footer */
.combo-footer {
padding: 1.5rem 2rem;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
align-items: center;
justify-content: space-between;
}
.combo-price {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.price-label {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
}
.price-amount {
font-size: 2rem;
font-weight: 800;
color: var(--accent-cyan);
text-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
.price-equivalent {
font-size: 0.85rem;
color: var(--text-muted);
font-weight: 500;
opacity: 0.8;
margin-left: 0.5rem;
}
.price-period {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 500;
}
.combo-cta {
background: var(--gradient-primary);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
}
.combo-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}
.combo-cta:active {
transform: translateY(0);
}
/* Combo CTA Section */
.combo-cta-section {
background: var(--bg-card);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3rem;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.cta-content {
max-width: 600px;
margin: 0 auto;
}
.cta-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.cta-description {
font-size: 1rem;
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 2rem;
}
.cta-button {
background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
}
.cta-button:active {
transform: translateY(0);
}
/* Responsive para Combos */
@media (max-width: 1200px) {
.combos-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.service-combos-section {
padding: 3rem 0;
}
.combos-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.combo-header {
padding: 1.5rem 1.5rem 1rem;
}
.combo-title {
font-size: 1.3rem;
}
.combo-services {
padding: 1rem 1.5rem;
flex-direction: column;
gap: 0.75rem;
}
.combo-service {
justify-content: center;
}
.combo-plus {
display: none;
}
.combo-benefits {
padding: 0 1.5rem 1rem;
}
.combo-footer {
padding: 1rem 1.5rem;
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.combo-cta {
width: 100%;
padding: 1rem;
}
.combo-cta-section {
padding: 2rem 1.5rem;
}
.cta-title {
font-size: 1.5rem;
}
.cta-description {
font-size: 0.95rem;
}
.cta-button {
width: 100%;
padding: 1rem;
justify-content: center;
}
}
@media (max-width: 480px) {
.combo-badge {
top: 1rem;
right: 1rem;
padding: 0.4rem 0.8rem;
font-size: 0.7rem;
}
.price-amount {
font-size: 1.6rem;
}
.savings-amount {
font-size: 1.5rem;
}
}
/* Reset y Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Sobrescribir estilos del template - Optimizado para Core Web Vitals */
body,
body#bg,
.page-wraper {
background: var(--bg-dark) !important;
background-image:
radial-gradient(circle at 20% 50%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.1) 0%, transparent 50%) !important;
color: var(--text-primary) !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif !important;
line-height: 1.6;
overflow-x: hidden;
/* Prevenir layout shift */
min-height: 100vh;
/* Optimización de renderizado */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Eliminar fondo blanco del page-content */
.page-content.bg-white {
background: transparent !important;
}
/* Contenedor Principal - Prevenir CLS */
.page-content {
background: transparent;
min-height: 100vh;
padding: 0;
padding-top: 80px; /* Espacio para navbar fijo - valor fijo para prevenir CLS */
/* Reservar espacio para evitar layout shift */
contain: layout style paint;
}
.content-block {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Hero Section */
.hero-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
padding: 4rem 2rem;
}
.hero-content {
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.hero-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 0.8s ease-out;
}
.hero-title .highlight {
color: var(--accent-cyan);
-webkit-text-fill-color: var(--accent-cyan);
text-shadow: var(--glow-cyan);
}
.hero-subtitle {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 300;
color: var(--text-secondary);
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero-description {
font-size: clamp(1rem, 2vw, 1.125rem);
color: var(--text-muted);
max-width: 600px;
margin: 0 auto 3rem;
line-height: 1.8;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.hero-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
animation: fadeInUp 0.8s ease-out 0.6s both;
}
/* Botones */
.btn-primary-custom {
display: inline-block;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--text-primary);
background: var(--gradient-primary);
border: none;
border-radius: 50px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out 0.6s both;
}
.btn-primary-custom::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-primary-custom:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
}
.btn-primary-custom:hover::before {
left: 100%;
}
.btn-secondary-custom {
display: inline-block;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
color: var(--accent-cyan);
background: transparent;
border: 2px solid var(--accent-cyan);
border-radius: 50px;
cursor: pointer;
text-decoration: none;
transition: all 0.3s ease;
margin-left: 1rem;
animation: fadeInUp 0.8s ease-out 0.6s both;
}
.btn-secondary-custom:hover {
background: var(--accent-cyan);
color: var(--bg-dark);
box-shadow: var(--glow-cyan);
}
/* Patrón de Fondo Animado */
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(0, 212, 255, 0.15) 1px, transparent 0);
background-size: 40px 40px;
opacity: 0.5;
animation: patternMove 20s linear infinite;
z-index: 1;
}
@keyframes patternMove {
0% { transform: translate(0, 0); }
100% { transform: translate(40px, 40px); }
}
/* Animaciones */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.hero-section {
min-height: 90vh;
padding: 2rem 1rem;
}
.btn-secondary-custom {
margin-left: 0;
margin-top: 1rem;
display: block;
}
}
/* Efectos de Brillo Sutil */
.glowing-element {
position: relative;
}
.glowing-element::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
animation: pulse 3s ease-in-out infinite;
pointer-events: none;
}
@keyframes pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.1); }
}
/* ============================================================
DROPDOWN MENU - ESTILOS MEJORADOS
============================================================ */
.navbar-nav .dropdown {
position: relative;
}
.navbar-nav .dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: rgba(26, 31, 58, 0.98);
border: 1px solid rgba(0, 212, 255, 0.15);
border-radius: 8px;
padding: 0.5rem 0;
margin-top: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(15px);
transform: translateY(10px);
opacity: 0;
visibility: hidden;
display: block;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
min-width: 240px;
z-index: 1001;
}
.navbar-nav .dropdown:hover > .dropdown-menu {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.dropdown-item {
color: var(--text-secondary);
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
font-weight: 500;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
background: rgba(0, 212, 255, 0.1) !important;
color: var(--accent-cyan) !important;
padding-left: 1.75rem;
}
.dropdown-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 3px;
background: var(--gradient-primary);
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
z-index: 1;
}
.dropdown-item:hover::before {
transform: scaleY(1);
}
/* Flecha del dropdown */
.navbar-nav .dropdown-toggle::after {
display: inline-block;
margin-left: 0.5em;
vertical-align: 0.2em;
content: "\f078";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-size: 0.7em;
border: none;
transition: transform 0.3s ease;
}
.navbar-nav .dropdown:hover > .dropdown-toggle::after {
transform: rotate(180deg);
}
/* ============================================================
NAVBAR MEJORADO - CENTRADO Y OPTIMIZADO
============================================================ */
/* Header siempre en modo compacto y uniforme (sin dinámica con scroll) */
.clobalai-navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(10, 14, 39, 0.98);
backdrop-filter: blur(25px) saturate(200%);
border-bottom: 1px solid rgba(0, 212, 255, 0.2);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.clobalai-navbar .main-bar {
display: flex;
align-items: center;
min-height: 70px;
}
/* Contenedor del navbar: space-between, ancho completo con padding lateral (no centrado ni max-width que apriete) */
.clobalai-navbar .main-bar .container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 100%;
height: 100%;
margin: 0;
padding-left: 1.5rem;
padding-right: 1.5rem;
box-sizing: border-box;
}
.clobalai-navbar .main-bar .container.clearfix::after {
display: none;
}
.clobalai-navbar .main-bar .container .logo-header,
.clobalai-navbar .main-bar .container .navbar-toggler {
flex-shrink: 0;
}
/* Logo header - Centrado vertical */
.clobalai-navbar .logo-header {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
margin: 0;
padding: 0;
flex-shrink: 0;
}
.logo-text {
font-size: 1.5rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-decoration: none;
}
/* Estilos para logo en imagen */
.logo-link {
display: inline-block;
transition: all 0.3s ease;
position: relative;
}
.logo-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.4s ease;
z-index: -1;
}
.logo-link:hover::before {
width: 120%;
height: 120%;
}
/* Logo: tamaño grande y adaptativo para Core Web Vitals (LCP, CLS) */
.clobalai-navbar .logo-img {
height: clamp(56px, 5.5vw + 32px, 76px);
width: auto;
max-width: min(260px, 92%);
object-fit: contain;
display: block;
transition: transform 0.3s ease, filter 0.3s ease;
transform-origin: center center;
aspect-ratio: 260 / 72;
}
.logo-link:hover .logo-img {
transform: scale(1.05) translateY(-1px);
filter: drop-shadow(0 3px 12px rgba(0, 212, 255, 0.3));
}
/* Logo responsive: tamaños más grandes en todos los breakpoints */
@media (max-width: 768px) {
.clobalai-navbar .main-bar {
padding: 0.5rem 0;
}
.clobalai-navbar .main-bar .container {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.clobalai-navbar .logo-img {
height: clamp(50px, 9vw, 64px);
max-width: min(240px, 88%);
}
.logo-link:hover .logo-img {
transform: scale(1.03) translateY(-0.5px);
}
.mobile-logo {
margin-bottom: 1.5rem;
text-align: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}
}
@media (max-width: 576px) {
.clobalai-navbar .logo-img {
height: clamp(46px, 11vw, 58px);
max-width: min(210px, 85%);
}
}
@media (max-width: 400px) {
.clobalai-navbar .logo-img {
height: clamp(42px, 12vw, 52px);
max-width: min(190px, 80%);
}
.logo-link:hover .logo-img {
transform: scale(1.02) translateY(-0.5px);
}
.clobalai-navbar .main-bar .container {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Navegación mejorada - Centrada verticalmente y legible */
.clobalai-navbar .header-nav {
display: flex;
align-items: center;
gap: 1.5rem;
height: 100%;
}
.clobalai-navbar .nav.navbar-nav {
display: flex;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
height: 100%;
}
.clobalai-navbar .nav.navbar-nav .nav-item {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.clobalai-navbar .nav.navbar-nav .nav-link {
color: #1e40af;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
line-height: 1.5;
padding: 0.875rem 1.5rem;
border-radius: 8px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
overflow: hidden;
letter-spacing: 0.01em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.clobalai-navbar .nav.navbar-nav .nav-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(30, 64, 175, 0.1);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 8px;
}
.clobalai-navbar .nav.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: #1e40af;
transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
}
.clobalai-navbar .nav.navbar-nav .nav-link:hover,
.clobalai-navbar .nav.navbar-nav .nav-link.active {
color: #1e40af;
transform: translateY(-1px);
}
.clobalai-navbar .nav.navbar-nav .nav-link:hover::before,
.clobalai-navbar .nav.navbar-nav .nav-link.active::before {
opacity: 1;
}
.clobalai-navbar .nav.navbar-nav .nav-link:hover::after,
.clobalai-navbar .nav.navbar-nav .nav-link.active::after {
width: 60%;
}
.nav-text {
position: relative;
z-index: 1;
}
/* Botón CTA mejorado - Centrado verticalmente y legible */
.header-cta {
margin-left: 1.5rem;
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.btn-nav-cta {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 2rem;
background: var(--gradient-primary);
color: #ffffff;
border-radius: 50px;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
border: 1px solid rgba(0, 212, 255, 0.3);
letter-spacing: 0.02em;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
.btn-nav-cta::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.btn-nav-cta:hover::before {
left: 100%;
}
.btn-nav-cta:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 212, 255, 0.5), 0 0 30px rgba(124, 58, 237, 0.3);
border-color: rgba(0, 212, 255, 0.5);
}
.btn-nav-cta:active {
transform: translateY(-1px) scale(1);
}
.btn-text {
position: relative;
z-index: 1;
}
.btn-icon {
position: relative;
z-index: 1;
transition: transform 0.3s ease;
font-size: 0.875rem;
}
.btn-nav-cta:hover .btn-icon {
transform: translateX(4px);
}
/* Menú lateral (sidebar) desde 1091.98px hacia abajo — evita que los enlaces se partan en dos líneas */
@media (max-width: 1091.98px) {
.clobalai-navbar .main-bar {
min-height: 70px;
}
.clobalai-navbar .header-nav.navbar-collapse {
display: none !important;
}
.clobalai-navbar .navbar-toggler {
display: flex !important;
}
}
@media (min-width: 1092px) {
.clobalai-navbar .header-nav.navbar-collapse {
display: flex !important;
}
.clobalai-navbar .navbar-toggler {
display: none !important;
}
}
/* ============================================================
Sidebar lateral izquierdo (offcanvas) - Responsive
Según HEADER_RESPONSIVE_ESTILOS.md: width 85%, max 20rem, 100vh
============================================================ */
.clobalai-sidebar-nav.offcanvas {
width: 85%;
max-width: 20rem;
height: 100vh;
background: rgba(10, 14, 39, 0.99);
backdrop-filter: blur(25px);
border-right: 1px solid rgba(0, 212, 255, 0.2);
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.4);
overflow-y: auto;
transition: transform 0.3s ease;
}
.clobalai-sidebar-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(0, 212, 255, 0.15);
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
}
.clobalai-sidebar-header .sidebar-logo-link {
display: block;
}
.clobalai-sidebar-header .sidebar-logo-img {
height: 44px;
width: auto;
max-width: 160px;
object-fit: contain;
}
.clobalai-sidebar-nav .btn-close-sidebar {
filter: invert(1) brightness(2);
opacity: 0.9;
padding: 0.5rem;
border: none;
background: transparent;
}
.clobalai-sidebar-nav .btn-close-sidebar:hover {
opacity: 1;
color: var(--accent-cyan);
}
.clobalai-sidebar-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sidebar-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav-list > li {
margin-bottom: 0.25rem;
}
.sidebar-nav-link {
display: block;
padding: 0.875rem 1rem;
margin: 0.25rem 0;
color: #e2e8f0;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
border-radius: 0.5rem;
transition: background 0.2s ease, color 0.2s ease;
}
.sidebar-nav-link:hover {
background: rgba(30, 64, 175, 0.25);
color: var(--accent-cyan);
}
.sidebar-nav-label {
display: block;
padding: 0.75rem 1rem;
color: rgba(226, 232, 240, 0.8);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sidebar-nav-sublist {
list-style: none;
margin: 0 0 0.5rem 0;
padding: 0 0 0 0.75rem;
border-left: 2px solid rgba(0, 212, 255, 0.3);
}
.sidebar-nav-sublist li {
margin-bottom: 0.15rem;
}
.sidebar-nav-sublist .sidebar-nav-link {
padding: 0.6rem 0.75rem;
margin: 0.15rem 0;
font-size: 0.95rem;
font-weight: 500;
}
.sidebar-cta {
margin-top: auto;
padding-top: 1rem;
padding-bottom: 0.5rem;
border-top: 1px solid rgba(0, 212, 255, 0.15);
}
.btn-sidebar-cta {
width: 100%;
justify-content: center;
padding: 1rem 1.25rem;
font-size: 1rem;
}
/* Sidebar responsive: menos padding en tablet/móvil (doc) */
@media (max-width: 768px) {
.clobalai-sidebar-header {
padding: 1rem 1.25rem;
}
.clobalai-sidebar-body {
padding: 1rem 1.25rem;
}
.sidebar-nav-link {
padding: 0.75rem 1rem;
}
}
@media (max-width: 576px) {
.clobalai-sidebar-header .sidebar-logo-img {
height: 35px;
max-width: 140px;
}
.clobalai-sidebar-body {
padding: 1rem;
}
.sidebar-cta {
padding: 1rem 1.25rem 0 0;
}
.btn-sidebar-cta {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
}
@media (max-width: 400px) {
.clobalai-sidebar-header .sidebar-logo-img {
height: 30px;
max-width: 120px;
}
}
/* Botón hamburguesa (doc: sin borde, focus sin anillo por defecto) */
.clobalai-navbar .navbar-toggler {
border: none;
padding: 0.5rem;
background: transparent;
position: relative;
z-index: 1001;
}
.clobalai-navbar .navbar-toggler:focus {
box-shadow: none;
outline: none;
}
.clobalai-navbar .navbar-toggler:focus-visible {
outline: 2px solid rgba(0, 212, 255, 0.5);
outline-offset: 2px;
}
/* Impresión: ocultar header y sidebar (doc) */
@media print {
.site-header.clobalai-navbar,
.clobalai-navbar,
.clobalai-sidebar-nav.offcanvas,
.offcanvas-backdrop {
display: none !important;
visibility: hidden !important;
}
}
.navbar-toggler .navicon span {
display: block;
width: 25px;
height: 3px;
background: var(--accent-cyan);
margin: 5px 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 212, 255, 0.3);
}
.navbar-toggler:not(.collapsed) .navicon span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
background: var(--accent-cyan);
}
.navbar-toggler:not(.collapsed) .navicon span:nth-child(2) {
opacity: 0;
}
.navbar-toggler:not(.collapsed) .navicon span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
background: var(--accent-cyan);
}
/* Animación de entrada para items del menú */
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.clobalai-navbar .nav.navbar-nav .nav-item {
animation: slideInDown 0.3s ease backwards;
}
.clobalai-navbar .nav.navbar-nav .nav-item:nth-child(1) { animation-delay: 0.1s; }
.clobalai-navbar .nav.navbar-nav .nav-item:nth-child(2) { animation-delay: 0.15s; }
.clobalai-navbar .nav.navbar-nav .nav-item:nth-child(3) { animation-delay: 0.2s; }
.clobalai-navbar .nav.navbar-nav .nav-item:nth-child(4) { animation-delay: 0.25s; }
/* ============================================================
SECCIONES COMUNES
============================================================ */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1rem;
color: var(--text-primary);
}
.section-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
/* ============================================================
SECCIÓN EL PROBLEMA
============================================================ */
.problem-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.problem-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.problem-card {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
text-align: center;
transition: all 0.3s ease;
border: 1px solid rgba(0, 212, 255, 0.1);
}
.problem-card:hover {
transform: translateY(-10px);
background: var(--bg-card-hover);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.problem-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-primary);
}
.problem-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.problem-description {
color: var(--text-muted);
line-height: 1.8;
}
/* ============================================================
SECCIÓN PROCESO
============================================================ */
.process-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.process-timeline {
display: flex;
flex-direction: column;
gap: 3rem;
margin-top: 3rem;
position: relative;
}
/* Específico para el home - mayor especificidad */
.process-section .process-step {
display: flex;
gap: 2rem;
align-items: flex-start;
position: relative;
opacity: 1;
transform: none;
animation: none;
}
.process-section .step-number {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
flex-shrink: 0;
}
.process-section .step-content {
flex: 1;
}
.process-section .step-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--text-primary);
}
.process-section .step-description {
color: var(--text-muted);
line-height: 1.8;
font-size: 1.125rem;
}
/* ============================================================
SECCIÓN SERVICIOS
============================================================ */
.services-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-card {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
transition: all 0.3s ease;
border: 1px solid rgba(0, 212, 255, 0.1);
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-10px);
background: var(--bg-card-hover);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.service-icon {
width: 70px;
height: 70px;
margin-bottom: 1.5rem;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-primary);
}
.service-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.service-description {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.5rem;
flex-grow: 1;
}
.service-link {
color: var(--accent-cyan);
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.service-link:hover {
gap: 1rem;
color: var(--accent-cyan-light);
}
/* ============================================================
SECCIÓN DEMO
============================================================ */
.demo-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.demo-container {
max-width: 800px;
margin: 0 auto;
margin-top: 3rem;
}
.demo-input-container {
margin-bottom: 2rem;
}
.demo-input {
width: 100%;
padding: 1.5rem;
background: var(--bg-card);
border: 2px solid rgba(0, 212, 255, 0.2);
border-radius: 12px;
color: var(--text-primary);
font-size: 1rem;
resize: vertical;
font-family: inherit;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
}
.demo-input:focus {
outline: none;
border-color: var(--accent-cyan);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}
.demo-response {
background: var(--bg-card);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 12px;
padding: 2rem;
margin-top: 2rem;
}
.demo-response-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--accent-cyan);
font-weight: 600;
}
.demo-response-content {
color: var(--text-secondary);
line-height: 1.8;
}
/* ============================================================
CTA FINAL
============================================================ */
.cta-final-section {
padding: 6rem 0;
background: var(--bg-darker);
text-align: center;
}
.cta-final-content {
max-width: 700px;
margin: 0 auto;
}
.cta-final-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1rem;
color: var(--text-primary);
}
.cta-final-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-muted);
margin-bottom: 2.5rem;
}
.btn-large {
padding: 1.25rem 3rem;
font-size: 1.25rem;
}
/* ============================================================
FOOTER
============================================================ */
.clobalai-footer {
background: #2a2a2a;
border-top: 1px solid rgba(0, 212, 255, 0.1);
}
.footer-content {
padding: 4rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
}
.footer-column {
display: flex;
flex-direction: column;
}
.footer-logo {
margin-bottom: 1.5rem;
}
.footer-logo-img {
height: 80px;
width: auto;
max-width: 250px;
object-fit: contain;
}
.footer-description {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.footer-social {
display: flex;
gap: 1rem;
}
.footer-social .social-icon {
width: 40px;
height: 40px;
background: var(--bg-card);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
text-decoration: none;
transition: all 0.3s ease;
}
.footer-social .social-icon:hover {
background: var(--gradient-primary);
color: var(--text-primary);
transform: translateY(-3px);
}
.footer-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: var(--text-muted);
text-decoration: none;
transition: all 0.3s ease;
}
.footer-links a:hover {
color: var(--accent-cyan);
padding-left: 0.5rem;
}
.footer-bottom {
padding: 2rem 0;
border-top: 1px solid rgba(0, 212, 255, 0.1);
}
.footer-bottom-content {
text-align: center;
}
.copyright {
color: var(--text-muted);
font-size: 0.875rem;
}
/* ============================================================
DETALLE DE SERVICIO
============================================================ */
/* Hero del Servicio */
.service-detail-hero {
padding: 8rem 0 4rem;
background: var(--bg-darker);
position: relative;
}
.service-detail-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.service-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.service-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.breadcrumb-link {
color: var(--text-muted);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-link:hover {
color: var(--accent-cyan);
}
.breadcrumb-separator {
color: var(--text-muted);
}
.breadcrumb-current {
color: var(--text-secondary);
}
.service-hero-icon {
width: 120px;
height: 120px;
margin: 0 auto 2rem;
background: var(--gradient-primary);
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: var(--text-primary);
box-shadow: var(--glow-cyan);
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.service-detail-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
line-height: 1;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-detail-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.5rem);
color: var(--text-muted);
line-height: 1.6;
margin-bottom: 2rem;
}
/* Descripción del Servicio */
.service-description-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.service-description-grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 4rem;
align-items: start;
}
.section-subtitle-small {
font-size: 1rem;
font-weight: 700;
color: var(--accent-cyan);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.5rem;
}
.description-text {
color: var(--text-secondary);
line-height: 1.9;
font-size: 1.125rem;
margin-bottom: 1.5rem;
text-align: left; /* Evitar justificación que crea "ríos" de espacio */
max-width: 100%;
}
.description-text p {
margin-bottom: 1.5rem;
color: var(--text-secondary);
line-height: 1.9;
}
.description-text p:last-child {
margin-bottom: 0;
}
.description-text strong {
color: var(--text-primary);
font-weight: 700;
}
/* Lista de características del servicio */
.service-features-list {
list-style: none;
padding: 0;
margin: 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.service-features-list li {
position: relative;
padding: 1rem 1.5rem 1rem 3.5rem;
color: var(--text-secondary);
line-height: 1.8;
font-size: 1.125rem;
background: rgba(0, 212, 255, 0.05);
border-left: 3px solid var(--accent-cyan);
border-radius: 8px;
transition: all 0.3s ease;
}
.service-features-list li:hover {
background: rgba(0, 212, 255, 0.1);
transform: translateX(5px);
border-left-color: var(--accent-cyan-light);
}
.service-features-list li::before {
content: '\f00c'; /* Icono check de FontAwesome */
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
left: 1rem;
top: 1.15rem;
color: var(--accent-cyan);
font-size: 1rem;
background: rgba(0, 212, 255, 0.15);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.service-features-list li strong {
color: var(--text-primary);
font-weight: 700;
display: inline-block;
margin-right: 0.5rem;
font-size: 1.125rem;
}
.description-highlight {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.highlight-card {
background: var(--bg-card);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid rgba(0, 212, 255, 0.1);
display: flex;
gap: 1rem;
align-items: center;
transition: all 0.3s ease;
}
.highlight-card:hover {
border-color: var(--accent-cyan);
transform: translateX(10px);
box-shadow: var(--glow-cyan);
}
.highlight-icon {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--text-primary);
flex-shrink: 0;
}
.highlight-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.25rem;
}
.highlight-text {
color: var(--text-muted);
font-size: 0.95rem;
}
/* Características del Servicio */
.service-features-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.feature-card {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid rgba(0, 212, 255, 0.1);
position: relative;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-10px);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.feature-number {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 2.5rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.3;
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
color: var(--text-primary);
margin-bottom: 1.5rem;
}
.feature-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.feature-description {
color: var(--text-muted);
line-height: 1.8;
}
/* Proceso de Implementación */
.service-process-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.process-steps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.process-step-detail {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid rgba(0, 212, 255, 0.1);
transition: all 0.3s ease;
}
.process-step-detail:hover {
border-color: var(--accent-cyan);
transform: translateY(-5px);
box-shadow: var(--glow-cyan);
}
.step-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.step-number-large {
width: 50px;
height: 50px;
background: var(--gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
color: var(--text-primary);
flex-shrink: 0;
}
.step-title-large {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
}
.step-description-large {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.step-list {
list-style: none;
padding: 0;
margin: 0;
}
.step-list li {
color: var(--text-muted);
padding-left: 1.5rem;
margin-bottom: 0.75rem;
position: relative;
}
.step-list li::before {
content: '→';
position: absolute;
left: 0;
color: var(--accent-cyan);
font-weight: 700;
}
/* Casos de Uso */
.service-use-cases-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.use-case-card {
background: var(--bg-card);
padding: 2rem;
border-radius: 16px;
text-align: center;
border: 1px solid rgba(0, 212, 255, 0.1);
transition: all 0.3s ease;
}
.use-case-card:hover {
transform: translateY(-10px);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.use-case-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-primary);
}
.use-case-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.use-case-description {
color: var(--text-muted);
line-height: 1.7;
}
/* CTA del Servicio */
.service-cta-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
position: relative;
}
.service-cta-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.service-cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.service-cta-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1rem;
color: var(--text-primary);
}
.service-cta-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-muted);
margin-bottom: 2.5rem;
}
.service-cta-buttons {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
/* Servicios Relacionados */
.related-services-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.related-services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
/* ============================================================
TEMPLATE NOSOTROS
============================================================ */
/* Hero Nosotros */
.about-hero-section {
padding: 8rem 0 4rem;
background: var(--bg-darker);
position: relative;
}
.about-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.about-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.about-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.about-hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
margin-bottom: 1.5rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-hero-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.75rem);
color: var(--text-muted);
line-height: 1.6;
}
/* Misión y Visión */
.mission-vision-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.mission-vision-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
}
.mission-card,
.vision-card {
background: var(--bg-card);
padding: 3rem;
border-radius: 20px;
border: 1px solid rgba(0, 212, 255, 0.15);
text-align: center;
transition: all 0.3s ease;
}
.mission-card:hover,
.vision-card:hover {
transform: translateY(-10px);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.mission-icon,
.vision-icon {
width: 100px;
height: 100px;
margin: 0 auto 2rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--text-primary);
}
.mission-title,
.vision-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
.mission-text,
.vision-text {
color: var(--text-secondary);
line-height: 1.8;
font-size: 1.125rem;
}
/* Valores */
.values-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.value-card {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid rgba(0, 212, 255, 0.1);
text-align: center;
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-10px);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.value-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-primary);
}
.value-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.value-description {
color: var(--text-muted);
line-height: 1.8;
}
/* Por qué Elegirnos */
.why-us-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.why-us-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.why-us-item {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid rgba(0, 212, 255, 0.1);
position: relative;
transition: all 0.3s ease;
}
.why-us-item:hover {
transform: translateY(-10px);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.why-us-number {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 3rem;
font-weight: 800;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0.3;
}
.why-us-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.why-us-text {
color: var(--text-muted);
line-height: 1.8;
}
/* CTA Nosotros */
.about-cta-section {
padding: 6rem 0;
background: var(--bg-darker);
position: relative;
}
.about-cta-section::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
pointer-events: none;
}
.about-cta-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.about-cta-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
margin-bottom: 1rem;
color: var(--text-primary);
}
.about-cta-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-muted);
margin-bottom: 2.5rem;
}
.about-cta-buttons {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
/* ============================================================
TEMPLATE SERVICIOS
============================================================ */
.service-hero-section {
padding: 8rem 0 4rem;
background: var(--bg-darker);
position: relative;
}
.service-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.service-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.service-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.95rem;
}
.service-hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
margin-bottom: 1.5rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.service-hero-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.75rem);
color: var(--text-muted);
line-height: 1.6;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.btn-secondary-custom {
margin-left: 0;
}
.problem-cards,
.services-grid {
grid-template-columns: 1fr;
}
.dev-process .process-step,
.seo-process-flow .process-step {
flex-direction: column;
text-align: center;
}
.clobalai-navbar .nav.navbar-nav {
flex-direction: column;
gap: 1rem;
}
.header-cta {
margin-left: 0;
margin-top: 1rem;
}
/* Detalle de Servicio - Responsive */
.service-detail-hero {
padding: 6rem 0 3rem;
}
.service-hero-icon {
width: 90px;
height: 90px;
font-size: 2.5rem;
}
.service-description-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.features-grid,
.process-steps-grid,
.use-cases-grid,
.related-services-grid {
grid-template-columns: 1fr;
}
.service-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.service-cta-buttons .btn-secondary-custom {
margin-left: 0;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
.service-description-grid {
grid-template-columns: 1fr;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-steps-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Template Nosotros - Responsive */
.mission-vision-grid {
grid-template-columns: 1fr;
}
.values-grid,
.why-us-grid {
grid-template-columns: 1fr;
}
.about-cta-buttons {
flex-direction: column;
align-items: stretch;
}
.about-cta-buttons .btn-secondary-custom {
margin-left: 0;
}
}
/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
.mission-vision-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
PÁGINAS LEGALES
============================================================ */
.legal-hero-section {
padding: 8rem 0 4rem;
background: var(--bg-darker);
position: relative;
}
.legal-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.legal-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.legal-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.95rem;
flex-wrap: wrap;
}
.legal-breadcrumb .breadcrumb-link {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.3s ease;
}
.legal-breadcrumb .breadcrumb-link:hover {
color: var(--accent-cyan);
}
.legal-breadcrumb .breadcrumb-separator {
color: var(--text-muted);
}
.legal-breadcrumb .breadcrumb-current {
color: var(--text-primary);
font-weight: 600;
}
.legal-hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
margin-bottom: 1rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.legal-hero-subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--text-muted);
line-height: 1.6;
}
/* Contenido Legal */
.legal-content-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.legal-content-wrapper {
max-width: 900px;
margin: 0 auto;
}
.legal-section {
margin-bottom: 3rem;
}
.legal-section:last-child {
margin-bottom: 0;
}
.legal-section-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(0, 212, 255, 0.2);
}
.legal-subsection-title {
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 600;
color: var(--text-primary);
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-text {
color: var(--text-secondary);
line-height: 1.9;
font-size: 1.125rem;
margin-bottom: 1.5rem;
text-align: left;
}
.legal-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.legal-list li {
position: relative;
padding-left: 1.75rem;
color: var(--text-secondary);
line-height: 1.8;
font-size: 1.125rem;
}
.legal-list li::before {
content: '•';
position: absolute;
left: 0;
color: var(--accent-cyan);
font-weight: bold;
font-size: 1.5rem;
line-height: 1;
}
.legal-link {
color: var(--accent-cyan);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.legal-link:hover {
color: var(--accent-cyan-light);
text-decoration: underline;
}
/* Responsive Legal Pages */
@media (max-width: 768px) {
.legal-hero-section {
padding: 6rem 0 3rem;
}
.legal-content-section {
padding: 4rem 0;
}
.legal-content-wrapper {
padding: 0 1rem;
}
.legal-section {
margin-bottom: 2.5rem;
}
.legal-text {
font-size: 1rem;
}
.legal-list li {
font-size: 1rem;
}
}
/* ============================================================
PÁGINA AGENDAR DEMO
============================================================ */
.demo-hero-section {
padding: 8rem 0 4rem;
background: var(--bg-darker);
position: relative;
}
.demo-hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.demo-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.demo-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
font-size: 0.95rem;
flex-wrap: wrap;
}
.demo-breadcrumb .breadcrumb-link {
color: var(--text-secondary);
text-decoration: none;
transition: color 0.3s ease;
}
.demo-breadcrumb .breadcrumb-link:hover {
color: var(--accent-cyan);
}
.demo-breadcrumb .breadcrumb-separator {
color: var(--text-muted);
}
.demo-breadcrumb .breadcrumb-current {
color: var(--text-primary);
font-weight: 600;
}
.demo-hero-title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 800;
margin-bottom: 1.5rem;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.demo-hero-subtitle {
font-size: clamp(1.125rem, 2.5vw, 1.75rem);
color: var(--text-muted);
line-height: 1.6;
}
/* Beneficios de la Demo */
.demo-benefits-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.demo-benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.demo-benefit-card {
background: var(--bg-card);
padding: 2.5rem;
border-radius: 16px;
border: 1px solid rgba(0, 212, 255, 0.1);
text-align: center;
transition: all 0.3s ease;
}
.demo-benefit-card:hover {
transform: translateY(-10px);
border-color: var(--accent-cyan);
box-shadow: var(--glow-cyan);
}
.demo-benefit-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--text-primary);
}
.demo-benefit-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
.demo-benefit-text {
color: var(--text-secondary);
line-height: 1.8;
}
/* Formulario de Demo */
.demo-form-section {
padding: 6rem 0;
background: var(--bg-darker);
}
.demo-form-wrapper {
max-width: 800px;
margin: 0 auto;
background: var(--bg-card);
padding: 3rem;
border-radius: 20px;
border: 1px solid rgba(0, 212, 255, 0.15);
}
.demo-form-header {
text-align: center;
margin-bottom: 2.5rem;
}
.demo-form-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.demo-form-subtitle {
color: var(--text-muted);
font-size: 1.125rem;
}
.demo-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group-full {
grid-column: 1 / -1;
}
.form-label {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.5rem;
font-size: 0.95rem;
}
.form-label .required {
color: var(--accent-cyan);
margin-left: 0.25rem;
}
.form-control {
background: var(--bg-darker);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 8px;
padding: 0.875rem 1rem;
color: var(--text-primary);
font-size: 1rem;
transition: all 0.3s ease;
width: 100%;
}
.form-control:focus {
outline: none;
border-color: var(--accent-cyan);
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}
.form-control::placeholder {
color: var(--text-muted);
}
/* Estados de validación UX (contacto / demo) */
.form-group.is-invalid .form-control,
.form-control.is-invalid,
.form-group.is-invalid .phone-input-wrapper {
border-color: #ea4335;
box-shadow: 0 0 0 2px rgba(234, 67, 53, 0.15);
}
.form-group.is-invalid .form-control:focus,
.form-control.is-invalid:focus {
border-color: #ea4335;
box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.2);
}
.form-group.is-valid .form-control,
.form-control.is-valid {
border-color: rgba(52, 168, 83, 0.5);
}
.field-error {
display: block;
font-size: 0.8125rem;
color: #ea4335;
margin-top: 0.375rem;
min-height: 1.25rem;
line-height: 1.3;
}
.field-error:empty {
display: none;
}
.form-group.is-invalid .checkbox-label {
color: rgba(234, 67, 53, 0.95);
}
.form-group.checkbox-group.is-invalid .field-error {
margin-top: 0.5rem;
}
.phone-input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg-darker);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 8px;
padding: 0.5rem;
}
.country-select {
background: transparent;
border: none;
color: var(--text-primary);
font-size: 1rem;
padding: 0.5rem;
cursor: pointer;
outline: none;
}
.phone-prefix {
color: var(--text-secondary);
font-weight: 600;
padding: 0 0.5rem;
border-right: 1px solid rgba(0, 212, 255, 0.2);
}
.phone-input {
flex: 1;
border: none;
background: transparent;
color: var(--text-primary);
font-size: 1rem;
padding: 0.5rem;
outline: none;
}
/* Selects = mismo estilo que los input: fondo oscuro, borde, focus sin cambiar a claro */
.demo-form-section select,
.demo-form-section .demo-form select,
#servicio_interes_demo,
#pais_telefono_demo {
background-color: var(--bg-darker) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b9cad' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 12px !important;
color: var(--text-primary) !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
border: 1px solid rgba(0, 212, 255, 0.2) !important;
border-radius: 8px;
padding: 0.875rem 2.25rem 0.875rem 1rem;
cursor: pointer;
font-size: 1rem;
width: 100%;
min-height: 3rem;
box-sizing: border-box;
}
.demo-form-section select:focus,
.demo-form-section select:active,
.demo-form-section .demo-form select:focus,
.demo-form-section .demo-form select:active,
#servicio_interes_demo:focus,
#servicio_interes_demo:active,
#pais_telefono_demo:focus,
#pais_telefono_demo:active {
background-color: var(--bg-darker) !important;
color: var(--text-primary) !important;
border-color: var(--accent-cyan) !important;
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
outline: none;
}
.demo-form-section select option,
#servicio_interes_demo option,
#pais_telefono_demo option {
background-color: #1a2332 !important;
color: var(--text-primary) !important;
}
/* Bloque Teléfono: mismo aspecto que un solo input (todo oscuro) */
.demo-form-section .phone-input-wrapper {
display: flex;
align-items: stretch;
gap: 0;
background: var(--bg-darker);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 8px;
padding: 0;
min-height: 3rem;
box-sizing: border-box;
}
.demo-form-section .phone-input-wrapper:focus-within {
border-color: var(--accent-cyan);
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}
/* Select país dentro del bloque teléfono: mismo estilo que input, sin borde derecho para unir con prefijo */
.demo-form-section .phone-input-wrapper .country-select {
background-color: var(--bg-darker) !important;
border: none !important;
border-right: 1px solid rgba(0, 212, 255, 0.2) !important;
border-radius: 8px 0 0 8px;
padding-left: 1rem;
padding-right: 2rem;
min-width: 7rem;
flex-shrink: 0;
}
.demo-form-section .phone-prefix {
color: var(--text-secondary);
font-weight: 600;
padding: 0 1rem;
display: flex;
align-items: center;
border-right: 1px solid rgba(0, 212, 255, 0.2);
background: transparent;
}
.demo-form-section .phone-input-wrapper .phone-input {
border: none;
border-radius: 0 8px 8px 0;
padding-left: 1rem;
}
.checkbox-group {
flex-direction: row;
align-items: flex-start;
gap: 0.75rem;
}
.checkbox-label {
position: relative;
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
color: var(--text-primary);
font-size: 0.95rem;
line-height: 1.6;
}
/* Checkboxes visibles en tema oscuro: input oculto + cuadro visual */
.demo-form-section .checkbox-label input.checkbox-input-visual {
position: absolute;
left: 0;
top: 0.2rem;
opacity: 0;
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
z-index: 2;
}
.demo-form-section .checkbox-visual {
flex-shrink: 0;
width: 22px;
height: 22px;
min-width: 22px;
min-height: 22px;
margin-top: 0.15rem;
border: 2px solid rgba(0, 212, 255, 0.7);
background-color: var(--bg-darker, #1a2332);
border-radius: 4px;
display: inline-block;
vertical-align: middle;
transition: background-color 0.2s ease, border-color 0.2s ease;
}
.demo-form-section .checkbox-label input:focus + .checkbox-visual {
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.3);
}
.demo-form-section .checkbox-label input:checked + .checkbox-visual {
background-color: var(--accent-cyan);
border-color: var(--accent-cyan);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a2332' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
}
.demo-form-section .checkbox-label .required {
color: var(--accent-cyan);
margin-left: 0.15rem;
}
.checkbox-label input[type="checkbox"] {
margin-top: 0.25rem;
cursor: pointer;
width: 18px;
height: 18px;
accent-color: var(--accent-cyan);
}
.legal-link-inline {
color: var(--accent-cyan);
text-decoration: none;
transition: color 0.3s ease;
}
.legal-link-inline:hover {
color: var(--accent-cyan-light);
text-decoration: underline;
}
.btn-submit-demo {
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
}
.btn-submit-demo:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.dzFormMsg {
margin-top: 1rem;
}
.dzFormMsg .alert {
padding: 1rem;
border-radius: 8px;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
}
.dzFormMsg .alert-success {
background: rgba(52, 168, 83, 0.1);
border: 1px solid rgba(52, 168, 83, 0.3);
color: #34a853;
}
.dzFormMsg .alert-danger {
background: rgba(234, 67, 53, 0.1);
border: 1px solid rgba(234, 67, 53, 0.3);
color: #ea4335;
}
/* Modal de éxito (contacto / demo) */
.success-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.success-modal-overlay.is-visible {
opacity: 1;
visibility: visible;
}
.success-modal {
background: linear-gradient(145deg, rgba(26, 32, 44, 0.98), rgba(20, 25, 35, 0.98));
border: 1px solid rgba(52, 168, 83, 0.35);
border-radius: 12px;
padding: 2rem 2.5rem;
max-width: 420px;
width: 100%;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.success-modal-overlay.is-visible .success-modal {
transform: scale(1);
}
.success-modal-icon {
color: #34a853;
font-size: 3rem;
margin-bottom: 1rem;
line-height: 1;
}
.success-modal-title {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.75rem;
}
.success-modal-message {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.85);
margin: 0;
line-height: 1.5;
}
/* Información Adicional */
.demo-info-section {
padding: 6rem 0;
background: rgba(255, 255, 255, 0.02);
}
.demo-info-content {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.demo-info-title {
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: 2.5rem;
color: var(--text-primary);
}
.demo-info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
text-align: left;
}
.demo-info-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-card);
border-radius: 12px;
border: 1px solid rgba(0, 212, 255, 0.1);
transition: all 0.3s ease;
}
.demo-info-item:hover {
border-color: var(--accent-cyan);
transform: translateX(5px);
}
.demo-info-item i {
color: var(--accent-cyan);
font-size: 1.25rem;
margin-top: 0.25rem;
flex-shrink: 0;
}
.demo-info-item p {
color: var(--text-secondary);
margin: 0;
line-height: 1.6;
}
/* Responsive Demo Page */
@media (max-width: 768px) {
.demo-hero-section {
padding: 6rem 0 3rem;
}
.demo-benefits-section,
.demo-form-section,
.demo-info-section {
padding: 4rem 0;
}
.demo-form-wrapper {
padding: 2rem 1.5rem;
}
.form-row {
grid-template-columns: 1fr;
}
.demo-benefits-grid {
grid-template-columns: 1fr;
}
.demo-info-grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.demo-info-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ============================================================
Estilos para Servicios Personalizados y Mejoras de Pricing
============================================================ */
/* Nota informativa sobre precios */
.pricing-note {
margin: 2rem 0;
padding: 1.5rem;
background: rgba(0, 212, 255, 0.1);
border-left: 4px solid var(--accent-cyan);
border-radius: 8px;
}
.pricing-note .note-text {
color: var(--text-secondary);
font-size: 0.95rem;
margin: 0;
line-height: 1.6;
}
.pricing-note .note-text i {
color: var(--accent-cyan);
margin-right: 0.5rem;
}
.pricing-note .note-text a {
color: var(--accent-cyan);
text-decoration: underline;
font-weight: 600;
}
.pricing-note .note-text a:hover {
color: #fff;
}
/* Indicador "Desde" para precios personalizados */
.price-from {
display: block;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
.price-note {
display: block;
font-size: 0.85rem;
color: var(--text-muted);
font-style: italic;
margin-top: 0.5rem;
line-height: 1.4;
}
/* Acciones de pricing (botones múltiples) */
.pricing-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.btn-link-custom {
display: block;
text-align: center;
color: var(--accent-cyan);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding: 0.5rem 0;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;
}
.btn-link-custom:hover {
color: #fff;
border-bottom-color: var(--accent-cyan);
}
/* Sección de servicios personalizados */
.custom-services-section {
padding: 4rem 0;
margin-top: 4rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.custom-service {
position: relative;
}
.custom-service .service-icon-large {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 212, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2.5rem;
color: var(--accent-cyan);
transition: all 0.3s ease;
}
.custom-service:hover .service-icon-large {
background: var(--accent-cyan);
color: var(--bg-dark);
transform: scale(1.1) rotate(5deg);
}
/* Ajustes para precios "Desde" */
.custom-service .price h2 {
font-size: 2.5rem;
margin: 0.5rem 0;
}
.custom-service .price .d-block {
font-size: 0.9rem;
margin-top: 0.5rem;
}
/* Responsive para servicios personalizados */
@media (max-width: 768px) {
.pricing-note {
padding: 1rem;
font-size: 0.85rem;
}
.pricing-actions {
gap: 0.5rem;
}
.btn-link-custom {
font-size: 0.85rem;
}
.custom-services-section {
padding: 3rem 0;
margin-top: 3rem;
}
.custom-service .service-icon-large {
width: 60px;
height: 60px;
font-size: 2rem;
}
.custom-service .price h2 {
font-size: 2rem;
}
.price-from {
font-size: 0.75rem;
}
.price-note {
font-size: 0.8rem;
}
}