/* ============================================
VARIABLES Y CONFIGURACIÓN BASE
============================================ */
:root {
--color-primary: #08182b;
--color-secondary: #ff931e;
--color-accent: #a6ce32;
--color-white: #ffffff;
--color-light-gray: #f8f9fa;
--color-dark-gray: #6c757d;
--transition-speed: 0.3s;
--shadow-sm: 0 2px 4px rgba(8, 24, 43, 0.1);
--shadow-md: 0 4px 12px rgba(8, 24, 43, 0.15);
--shadow-lg: 0 8px 24px rgba(8, 24, 43, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: var(--color-primary);
background-color: var(--color-white);
line-height: 1.6;
overflow-x: hidden;
}
/* ============================================
NAVEGACIÓN PRINCIPAL
============================================ */
.navbar {
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1f38 100%);
padding: 0.8rem 0;
box-shadow: var(--shadow-md);
transition: all var(--transition-speed) ease;
}
.navbar.scrolled {
padding: 0.5rem 0;
box-shadow: var(--shadow-lg);
}
.navbar-brand {
display: flex;
align-items: center;
padding: 0;
transition: transform var(--transition-speed) ease;
}
.navbar-brand:hover {
transform: scale(1.05);
}
.logo-img {
height: 120px;
width: auto;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* ============================================
ELEMENTOS DE NAVEGACIÓN
============================================ */
.navbar-nav {
gap: 0.5rem;
}
.nav-link {
color: var(--color-white) !important;
font-weight: 500;
font-size: 0.95rem;
padding: 0.6rem 1rem !important;
border-radius: 8px;
transition: all var(--transition-speed) ease;
position: relative;
display: flex;
align-items: center;
}
.nav-link i {
font-size: 1.1rem;
transition: transform var(--transition-speed) ease;
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
}
.nav-link:hover i {
transform: scale(1.15);
}
.nav-link.active {
background-color: var(--color-secondary);
color: var(--color-white) !important;
}
/* ============================================
DROPDOWNS ESTÁNDAR
============================================ */
.dropdown-menu-custom {
background-color: var(--color-white);
border: none;
border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 0.5rem;
margin-top: 0.5rem;
min-width: 250px;
animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-item {
padding: 0.7rem 1rem;
border-radius: 8px;
color: var(--color-primary);
font-weight: 500;
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.dropdown-item i {
color: var(--color-secondary);
font-size: 1.2rem;
transition: transform var(--transition-speed) ease;
}
.dropdown-item:hover {
background: linear-gradient(135deg, var(--color-accent) 0%, #b8db4a 100%);
color: var(--color-white);
transform: translateX(5px);
}
.dropdown-item:hover i {
color: var(--color-white);
transform: scale(1.2);
}
/* ============================================
MEGA MENU PARA LICENCIAS
============================================ */
.dropdown-mega {
position: static;
}
.dropdown-menu-mega {
width: 100%;
max-width: 1200px;
left: 50% !important;
transform: translateX(-50%) !important;
background-color: var(--color-white);
border: none;
border-radius: 16px;
box-shadow: var(--shadow-lg);
margin-top: 0.5rem;
animation: fadeInDown 0.4s ease;
}
.licencias-grid {
max-height: 500px;
overflow-y: auto;
padding: 1rem;
}
/* Scrollbar personalizado para mega menu */
.licencias-grid::-webkit-scrollbar {
width: 8px;
}
.licencias-grid::-webkit-scrollbar-track {
background: var(--color-light-gray);
border-radius: 10px;
}
.licencias-grid::-webkit-scrollbar-thumb {
background: var(--color-secondary);
border-radius: 10px;
}
.licencias-grid::-webkit-scrollbar-thumb:hover {
background: var(--color-accent);
}
/* ============================================
TARJETAS DE LICENCIAS
============================================ */
.license-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem 1rem;
background-color: var(--color-white);
border: 2px solid var(--color-light-gray);
border-radius: 12px;
text-decoration: none;
color: var(--color-primary);
transition: all var(--transition-speed) ease;
height: 140px;
text-align: center;
}
.license-card:hover {
border-color: var(--color-secondary);
background: linear-gradient(135deg, var(--color-light-gray) 0%, #fff 100%);
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.license-logo {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.8rem;
transition: transform var(--transition-speed) ease;
}
.license-card:hover .license-logo {
transform: scale(1.15);
}
.license-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(20%);
transition: filter var(--transition-speed) ease;
}
.license-card:hover .license-logo img {
filter: grayscale(0%);
}
.license-card span {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
transition: color var(--transition-speed) ease;
}
.license-card:hover span {
color: var(--color-secondary);
}
/* ============================================
BOTONES DE ACCIÓN
============================================ */
/* Botón Outline Custom - MEJORADO */
.btn-outline-custom {
color: var(--color-primary);
border: 2px solid var(--color-primary);
background-color: var(--color-white);
font-weight: 600;
transition: all var(--transition-speed) ease;
}
.btn-outline-custom:hover {
color: var(--color-white);
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-color: var(--color-secondary);
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(255, 147, 30, 0.3);
}
.btn-outline-custom:focus,
.btn-outline-custom:active {
color: var(--color-white);
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-color: var(--color-secondary);
box-shadow: 0 0 0 0.25rem rgba(255, 147, 30, 0.25);
}
.btn-primary-custom {
background: linear-gradient(135deg, var(--color-secondary) 0%, #ff8000 100%);
border: none;
color: var(--color-white);
padding: 0.6rem 1.2rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
transition: all var(--transition-speed) ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 12px rgba(255, 147, 30, 0.3);
}
.btn-primary-custom:hover {
background: linear-gradient(135deg, #ff8000 0%, var(--color-secondary) 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 147, 30, 0.4);
}
/* ============================================
RESPONSIVE - MÓVIL
============================================ */
@media (max-width: 1199px) {
.navbar-nav {
margin-top: 1rem;
margin-bottom: 1rem;
}
.nav-link {
padding: 0.8rem 1rem !important;
}
.dropdown-menu-mega {
position: relative !important;
transform: none !important;
left: 0 !important;
width: 100%;
max-width: 100%;
}
.licencias-grid {
max-height: 400px;
}
.license-card {
height: 120px;
padding: 1rem 0.5rem;
}
.license-logo {
width: 50px;
height: 50px;
}
.license-card span {
font-size: 0.85rem;
}
}
@media (max-width: 768px) {
.logo-img {
height: 40px;
}
.btn-outline-custom,
.btn-primary-custom {
width: 100%;
justify-content: center;
}
.license-card {
height: 100px;
}
.license-logo {
width: 40px;
height: 40px;
margin-bottom: 0.5rem;
}
.license-card span {
font-size: 0.8rem;
}
}
/* ============================================
UTILIDADES GENERALES
============================================ */
.container-custom {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
section {
padding: 4rem 0;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(
90deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 2px;
}
.section-subtitle {
font-size: 1.1rem;
color: var(--color-dark-gray);
margin-bottom: 2.5rem;
}
/* Animación suave para scroll */
html {
scroll-behavior: smooth;
}
/* Mejora para accesibilidad */
a:focus,
button:focus {
outline: 3px solid var(--color-accent);
outline-offset: 2px;
}
/* ============================================
INDEX - HERO SECTION PRINCIPAL
============================================ */
.hero-main {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
#0d2847 50%,
#112f5a 100%
);
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.hero-main::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 50px 50px;
opacity: 0.3;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(166, 206, 50, 0.2);
border: 1px solid var(--color-accent);
padding: 0.5rem 1rem;
border-radius: 50px;
color: var(--color-accent);
font-weight: 600;
font-size: 0.9rem;
animation: fadeInDown 0.8s ease;
}
.hero-title-main {
font-size: 3.5rem;
font-weight: 800;
color: var(--color-white);
line-height: 1.2;
margin-bottom: 1.5rem;
animation: fadeInUp 1s ease;
}
.hero-subtitle-main {
font-size: 1.4rem;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
line-height: 1.5;
animation: fadeInUp 1.2s ease;
}
.hero-cta-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-top: 2rem;
animation: fadeInUp 1.4s ease;
}
.btn-outline-hero {
background-color: transparent;
border: 2px solid var(--color-white);
color: var(--color-white);
padding: 0.8rem 1.5rem;
border-radius: 8px;
font-weight: 600;
transition: all var(--transition-speed) ease;
}
.btn-outline-hero:hover {
background-color: var(--color-white);
color: var(--color-primary);
}
.hero-image-container {
position: relative;
animation: fadeInRight 1s ease;
}
.hero-img {
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ============================================
MÉTRICAS
============================================ */
.metrics-section {
padding: 4rem 0;
background: linear-gradient(
to bottom,
var(--color-light-gray) 0%,
var(--color-white) 100%
);
}
.metric-card {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
text-align: center;
box-shadow: var(--shadow-sm);
transition: all var(--transition-speed) ease;
border: 2px solid transparent;
}
.metric-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--color-secondary);
}
.metric-icon {
font-size: 3rem;
color: var(--color-secondary);
margin-bottom: 1rem;
}
.metric-number {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 0.5rem;
background: linear-gradient(
135deg,
var(--color-primary) 0%,
var(--color-secondary) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.metric-label {
font-size: 1rem;
color: var(--color-dark-gray);
margin: 0;
}
/* ============================================
QUÉ HACEMOS
============================================ */
.que-hacemos-section {
padding: 5rem 0;
background-color: var(--color-white);
}
.section-header {
max-width: 800px;
margin: 0 auto;
}
.section-title-custom {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.section-title-custom::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(
90deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 2px;
}
.section-description {
font-size: 1.15rem;
color: var(--color-dark-gray);
line-height: 1.7;
}
.feature-card {
background: var(--color-light-gray);
padding: 2rem 1.5rem;
border-radius: 16px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid transparent;
}
.feature-card:hover {
background: var(--color-white);
border-color: var(--color-accent);
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.feature-icon {
font-size: 3rem;
color: var(--color-secondary);
margin-bottom: 1rem;
}
.feature-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.feature-text {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.6;
}
/* ============================================
ACERCA DE LA EMPRESA
============================================ */
.acerca-section {
padding: 5rem 0;
background: linear-gradient(
135deg,
var(--color-light-gray) 0%,
var(--color-white) 100%
);
}
.about-image-container {
position: relative;
}
.about-img {
border-radius: 20px;
box-shadow: var(--shadow-lg);
}
.about-overlay-badge {
position: absolute;
bottom: 20px;
left: 20px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
padding: 1rem 1.5rem;
border-radius: 12px;
color: var(--color-white);
font-weight: 700;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow-md);
}
.about-overlay-badge i {
font-size: 1.5rem;
}
.about-content {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-sm);
}
.about-text {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.about-highlight {
background: linear-gradient(135deg, var(--color-primary) 0%, #0d2847 100%);
padding: 1.5rem;
border-radius: 12px;
color: var(--color-white);
border-left: 4px solid var(--color-accent);
margin-top: 2rem;
}
.about-highlight i {
font-size: 2rem;
color: var(--color-accent);
margin-bottom: 0.5rem;
}
.about-highlight p {
margin: 0;
font-size: 1.1rem;
font-style: italic;
line-height: 1.6;
}
/* ============================================
MISIÓN Y VISIÓN
============================================ */
.mision-vision-section {
padding: 5rem 0;
background-color: var(--color-white);
}
.mv-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
box-shadow: var(--shadow-md);
transition: all var(--transition-speed) ease;
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.mv-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(
90deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.mv-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.mision-card {
border-color: var(--color-secondary);
}
.vision-card {
border-color: var(--color-accent);
}
.mv-icon {
font-size: 4rem;
color: var(--color-secondary);
margin-bottom: 1.5rem;
text-align: center;
}
.mv-title {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
text-align: center;
}
.mv-text {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.8;
text-align: justify;
}
/* ============================================
POR QUÉ NOSOTROS
============================================ */
.por-que-section {
padding: 5rem 0;
background: linear-gradient(135deg, var(--color-primary) 0%, #0d2847 100%);
color: var(--color-white);
}
.por-que-section .section-title-custom {
color: var(--color-white);
}
.por-que-section .section-title-custom::after {
background: linear-gradient(
90deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.porque-content {
background: rgba(255, 255, 255, 0.1);
padding: 2rem;
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.porque-text-large {
font-size: 1.4rem;
font-weight: 600;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.porque-text {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 1rem;
}
.porque-image-container {
position: relative;
}
.porque-img {
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* ============================================
NUESTROS 7 VALORES
============================================ */
.valores-section {
padding: 5rem 0;
background-color: var(--color-light-gray);
}
.valores-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.valor-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
transition: all var(--transition-speed) ease;
border-left: 5px solid var(--color-secondary);
position: relative;
}
.valor-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-left-color: var(--color-accent);
}
.valor-number {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 800;
}
.valor-icon {
font-size: 3rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.valor-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.valor-description {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.valor-list {
list-style: none;
padding: 0;
margin: 0;
}
.valor-list li {
font-size: 0.95rem;
color: var(--color-dark-gray);
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
line-height: 1.6;
}
.valor-list li::before {
content: "\F26A";
font-family: "Bootstrap Icons";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: bold;
}
/* ============================================
NUESTRO EQUIPO
============================================ */
.equipo-section {
padding: 5rem 0;
background-color: var(--color-white);
}
.team-card {
background: var(--color-white);
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-speed) ease;
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.team-image {
width: 100%;
height: 350px;
overflow: hidden;
position: relative;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-speed) ease;
}
.team-card:hover .team-image img {
transform: scale(1.1);
}
.team-info {
padding: 2rem;
text-align: center;
background: linear-gradient(
to bottom,
var(--color-white) 0%,
var(--color-light-gray) 100%
);
}
.team-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.team-role {
font-size: 1rem;
color: var(--color-secondary);
font-weight: 600;
margin-bottom: 1rem;
}
.team-social {
display: flex;
gap: 1rem;
justify-content: center;
}
.team-social-link {
width: 40px;
height: 40px;
background-color: var(--color-primary);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
}
.team-social-link:hover {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
transform: scale(1.15);
}
/* ============================================
SOLUCIONES
============================================ */
.soluciones-section {
padding: 5rem 0;
background: linear-gradient(
to bottom,
var(--color-light-gray) 0%,
var(--color-white) 100%
);
}
.solution-card {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
box-shadow: var(--shadow-sm);
transition: all var(--transition-speed) ease;
height: 100%;
border: 2px solid transparent;
display: flex;
flex-direction: column;
}
.solution-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--color-secondary);
}
.solution-icon {
font-size: 3rem;
color: var(--color-secondary);
margin-bottom: 1rem;
}
.solution-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.solution-text {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.6;
flex-grow: 1;
margin-bottom: 1rem;
}
.solution-link {
color: var(--color-secondary);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all var(--transition-speed) ease;
}
.solution-link:hover {
color: var(--color-accent);
gap: 1rem;
}
/* ============================================
SECTORES
============================================ */
.sectores-section {
padding: 5rem 0;
background-color: var(--color-white);
}
.sector-card {
background: var(--color-light-gray);
padding: 2rem 1rem;
border-radius: 16px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid transparent;
height: 100%;
}
.sector-card:hover {
background: var(--color-white);
border-color: var(--color-accent);
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.sector-icon {
font-size: 3rem;
color: var(--color-secondary);
margin-bottom: 1rem;
}
.sector-name {
font-size: 1rem;
font-weight: 600;
color: var(--color-primary);
margin: 0;
}
/* ============================================
PARTNERS
============================================ */
.partners-section {
padding: 5rem 0;
background: linear-gradient(
to bottom,
var(--color-light-gray) 0%,
var(--color-white) 100%
);
}
.partner-card {
background: var(--color-white);
padding: 2rem 1rem;
border-radius: 16px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}
.partner-card:hover {
border-color: var(--color-secondary);
transform: translateY(-8px);
box-shadow: var(--shadow-md);
}
.partner-logo {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.partner-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(100%);
transition: filter var(--transition-speed) ease;
}
.partner-card:hover .partner-logo img {
filter: grayscale(0%);
}
.partner-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--color-primary);
margin: 0;
}
/* ============================================
BENEFICIOS
============================================ */
.beneficios-section {
padding: 5rem 0;
background-color: var(--color-white);
}
.beneficio-card {
background: var(--color-light-gray);
padding: 2rem 1rem;
border-radius: 16px;
text-align: center;
transition: all var(--transition-speed) ease;
}
.beneficio-card:hover {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
transform: translateY(-8px);
box-shadow: var(--shadow-md);
}
.beneficio-card:hover .beneficio-icon,
.beneficio-card:hover .beneficio-title {
color: var(--color-white);
}
.beneficio-icon {
font-size: 3rem;
color: var(--color-secondary);
margin-bottom: 1rem;
transition: color var(--transition-speed) ease;
}
.beneficio-title {
font-size: 1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
transition: color var(--transition-speed) ease;
}
/* ============================================
CONTACTO + PASOS
============================================ */
.contacto-section {
padding: 5rem 0;
background: linear-gradient(
135deg,
var(--color-light-gray) 0%,
var(--color-white) 100%
);
}
.contacto-subtitle {
font-size: 1.1rem;
color: var(--color-dark-gray);
line-height: 1.7;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-info-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--color-white);
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.contact-info-item i {
font-size: 1.5rem;
color: var(--color-secondary);
}
.contact-info-item a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.contact-info-item a:hover {
color: var(--color-secondary);
}
.contact-form {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
box-shadow: var(--shadow-md);
}
.form-label {
font-weight: 600;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.form-control {
border: 2px solid var(--color-light-gray);
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all var(--transition-speed) ease;
}
.form-control:focus {
border-color: var(--color-secondary);
box-shadow: 0 0 0 0.2rem rgba(255, 147, 30, 0.25);
}
/* Pasos */
.pasos-container {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
box-shadow: var(--shadow-lg);
}
.pasos-title {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
text-align: center;
}
.paso-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 2px dashed var(--color-light-gray);
}
.paso-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.paso-number {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
font-weight: 800;
flex-shrink: 0;
box-shadow: var(--shadow-md);
}
.paso-content {
flex: 1;
}
.paso-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.paso-description {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.6;
margin: 0;
}
.pasos-image-container {
border-radius: 16px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.pasos-img {
width: 100%;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 991px) {
.hero-title-main {
font-size: 2.5rem;
}
.hero-subtitle-main {
font-size: 1.2rem;
}
.section-title-custom {
font-size: 2rem;
}
.valores-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.hero-main {
padding: 60px 0 40px;
}
.hero-title-main {
font-size: 2rem;
}
.hero-subtitle-main {
font-size: 1rem;
}
.hero-cta-buttons {
flex-direction: column;
}
.hero-cta-buttons .btn {
width: 100%;
justify-content: center;
}
.metric-number {
font-size: 2.5rem;
}
.section-title-custom {
font-size: 1.8rem;
}
}
/* ============================================
FOOTER
============================================ */
.footer-main {
background: linear-gradient(
135deg,
var(--color-primary) 0%,
#0a1f38 50%,
#08182b 100%
);
color: var(--color-white);
position: relative;
overflow: hidden;
}
.footer-main::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: 50px 50px;
opacity: 0.5;
}
/* Footer Top */
.footer-top {
padding: 4rem 0 3rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 1;
}
.footer-brand {
margin-bottom: 1rem;
}
.footer-logo {
height: 60px;
width: auto;
margin-bottom: 1rem;
filter: brightness(0) invert(1);
}
.footer-tagline {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-accent);
margin-bottom: 1rem;
}
.footer-description {
font-size: 0.95rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
}
.footer-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.8rem;
}
.footer-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(
90deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 2px;
}
/* Footer Links */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.95rem;
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-links a i {
font-size: 0.7rem;
color: var(--color-accent);
transition: transform var(--transition-speed) ease;
}
.footer-links a:hover {
color: var(--color-secondary);
padding-left: 8px;
}
.footer-links a:hover i {
transform: translateX(3px);
}
/* Footer Contact */
.footer-contact {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
}
.footer-contact li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
font-size: 0.95rem;
}
.footer-contact i {
font-size: 1.2rem;
color: var(--color-secondary);
margin-top: 2px;
flex-shrink: 0;
}
.footer-contact a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color var(--transition-speed) ease;
}
.footer-contact a:hover {
color: var(--color-accent);
}
/* Redes Sociales */
.footer-social {
margin-top: 2rem;
}
.footer-social-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 1rem;
}
.social-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.social-link {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.2rem;
transition: all var(--transition-speed) ease;
text-decoration: none;
}
.social-link:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.social-link.facebook:hover {
background: #1877f2;
border-color: #1877f2;
}
.social-link.twitter:hover {
background: #000000;
border-color: #000000;
}
.social-link.linkedin:hover {
background: #0a66c2;
border-color: #0a66c2;
}
.social-link.instagram:hover {
background: linear-gradient(
135deg,
#405de6,
#5851db,
#833ab4,
#c13584,
#e1306c,
#fd1d1d
);
border-color: transparent;
}
.social-link.youtube:hover {
background: #ff0000;
border-color: #ff0000;
}
/* Footer Middle - Newsletter */
.footer-middle {
padding: 3rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 1;
}
.newsletter-content {
display: flex;
align-items: center;
gap: 1.5rem;
}
.newsletter-icon {
font-size: 3rem;
color: var(--color-accent);
flex-shrink: 0;
}
.newsletter-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 0.3rem;
}
.newsletter-text {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
margin: 0;
}
.newsletter-form .input-group {
box-shadow: var(--shadow-lg);
}
.newsletter-input {
background: var(--color-white);
border: 2px solid var(--color-white);
padding: 0.8rem 1.2rem;
font-size: 1rem;
border-radius: 8px 0 0 8px;
}
.newsletter-input:focus {
border-color: var(--color-accent);
box-shadow: none;
}
.btn-newsletter {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border: none;
color: var(--color-white);
padding: 0.8rem 1.5rem;
font-weight: 600;
border-radius: 0 8px 8px 0;
transition: all var(--transition-speed) ease;
white-space: nowrap;
}
.btn-newsletter:hover {
background: linear-gradient(
135deg,
var(--color-accent) 0%,
var(--color-secondary) 100%
);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(255, 147, 30, 0.4);
}
/* Footer Bottom */
.footer-bottom {
padding: 2rem 0;
position: relative;
z-index: 1;
}
.footer-copyright {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.footer-credits {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
margin: 0;
}
.footer-credits i {
color: #ff0000;
animation: heartbeat 1.5s infinite;
}
@keyframes heartbeat {
0%,
100% {
transform: scale(1);
}
25% {
transform: scale(1.2);
}
50% {
transform: scale(1);
}
}
.credits-link {
color: var(--color-accent);
text-decoration: none;
transition: all var(--transition-speed) ease;
font-weight: 600;
}
.credits-link:hover {
color: var(--color-secondary);
text-decoration: underline;
}
/* Enlaces Legales */
.footer-legal {
text-align: center;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-legal a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9rem;
transition: color var(--transition-speed) ease;
}
.footer-legal a:hover {
color: var(--color-accent);
}
.footer-legal .separator {
color: rgba(255, 255, 255, 0.3);
margin: 0 0.8rem;
}
/* ============================================
BOTÓN SCROLL TO TOP
============================================ */
.scroll-top-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
border: none;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: all var(--transition-speed) ease;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.scroll-top-btn.active {
opacity: 1;
visibility: visible;
}
.scroll-top-btn:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.4);
}
/* ============================================
RESPONSIVE FOOTER
============================================ */
@media (max-width: 991px) {
.footer-top {
padding: 3rem 0 2rem;
}
.footer-middle {
padding: 2rem 0;
}
.newsletter-content {
flex-direction: column;
text-align: center;
}
.footer-title::after {
left: 50%;
transform: translateX(-50%);
}
}
@media (max-width: 768px) {
.footer-logo {
height: 50px;
}
.footer-title {
text-align: center;
margin-bottom: 1.2rem;
}
.footer-links,
.footer-contact {
text-align: center;
}
.footer-links a,
.footer-contact li {
justify-content: center;
}
.social-links {
justify-content: center;
}
.newsletter-form .input-group {
flex-direction: column;
}
.newsletter-input {
border-radius: 8px;
margin-bottom: 0.5rem;
}
.btn-newsletter {
border-radius: 8px;
width: 100%;
}
.footer-copyright,
.footer-credits {
text-align: center !important;
}
.footer-legal {
flex-direction: column;
gap: 0.5rem;
}
.footer-legal .separator {
display: none;
}
.scroll-top-btn {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.footer-top {
padding: 2rem 0 1.5rem;
}
.footer-middle {
padding: 1.5rem 0;
}
.footer-bottom {
padding: 1.5rem 0;
}
.newsletter-icon {
font-size: 2.5rem;
}
.newsletter-title {
font-size: 1.1rem;
}
}
/* ============================================
PÁGINA SOPORTE TÉCNICO
============================================ */
/* Hero Slider Soporte */
.hero-slider-soporte {
position: relative;
margin-top: 0;
}
.hero-slider-soporte .carousel-inner {
height: 65vh;
min-height: 500px;
}
.hero-slider-soporte .carousel-item {
height: 100%;
}
.hero-slider-soporte .carousel-item img {
object-fit: cover;
height: 100%;
width: 100%;
}
.carousel-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(8, 24, 43, 0.85) 0%,
rgba(13, 40, 71, 0.7) 100%
);
z-index: 1;
}
.hero-slider-soporte .carousel-caption {
z-index: 2;
bottom: 20%;
left: 10%;
right: 10%;
text-align: left;
}
.hero-slider-soporte .carousel-caption h1 {
text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem;
}
.hero-slider-soporte .carousel-caption .lead {
font-size: 1.4rem;
text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.3);
color: rgba(255, 255, 255, 0.95);
}
.hero-slider-soporte .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(255, 147, 30, 0.5);
background-color: transparent;
transition: all var(--transition-speed) ease;
}
.hero-slider-soporte .carousel-indicators button.active {
background-color: var(--color-secondary);
border-color: var(--color-secondary);
box-shadow: 0 0 12px rgba(255, 147, 30, 0.6);
}
/* Sección Beneficios */
.seccion-beneficios {
padding: 5rem 0;
background: linear-gradient(
to bottom,
var(--color-white) 0%,
var(--color-light-gray) 100%
);
}
.text-gme-orange {
color: var(--color-secondary);
}
.text-gme-green {
color: var(--color-accent);
}
.beneficios-grid {
display: grid;
gap: 1.5rem;
margin-top: 2.5rem;
}
.beneficio-item {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.5rem;
border-radius: 12px;
background: var(--color-white);
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
}
.beneficio-item:hover {
border-color: var(--color-secondary);
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.beneficio-icon {
flex-shrink: 0;
width: 65px;
height: 65px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
box-shadow: 0 4px 12px rgba(255, 147, 30, 0.25);
transition: all var(--transition-speed) ease;
}
.beneficio-item:hover .beneficio-icon {
transform: scale(1.08) rotate(-3deg);
box-shadow: 0 6px 16px rgba(255, 147, 30, 0.35);
}
.beneficio-item h5 {
color: var(--color-primary);
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.imagen-beneficios img {
border-radius: 20px;
box-shadow: var(--shadow-lg);
transition: all var(--transition-speed) ease;
}
.imagen-beneficios img:hover {
transform: scale(1.02);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.2);
}
/* Sección Liderazgo */
.seccion-liderazgo {
padding: 5rem 0;
background: linear-gradient(
135deg,
var(--color-light-gray) 0%,
var(--color-white) 100%
);
}
.imagen-liderazgo {
text-align: center;
}
.imagen-liderazgo img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 10px 30px rgba(8, 24, 43, 0.15));
transition: all var(--transition-speed) ease;
}
.imagen-liderazgo img:hover {
transform: translateY(-8px);
filter: drop-shadow(0 15px 40px rgba(8, 24, 43, 0.2));
}
.btn-gme-accent {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
font-weight: 600;
border: none;
padding: 0.8rem 2rem;
border-radius: 8px;
transition: all var(--transition-speed) ease;
box-shadow: 0 4px 12px rgba(255, 147, 30, 0.3);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-gme-accent:hover {
background: linear-gradient(
135deg,
var(--color-accent) 0%,
var(--color-secondary) 100%
);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 147, 30, 0.4);
color: var(--color-white);
}
/* ============================================
SERVICIOS GRID INTERACTIVA + CAROUSEL
============================================ */
.seccion-servicios-grid {
padding: 5rem 0;
background: linear-gradient(
to bottom,
var(--color-white) 0%,
var(--color-light-gray) 100%
);
}
/* DESKTOP: Grid con efecto flip */
.servicios-grid-desktop {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 3rem;
}
.servicio-grid-card {
perspective: 1000px;
height: 400px;
}
.servicio-card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
.servicio-grid-card:hover .servicio-card-inner {
transform: rotateY(180deg);
}
.servicio-card-front,
.servicio-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 16px;
padding: 2rem;
box-shadow: var(--shadow-md);
}
.servicio-card-front {
background: var(--color-white);
border: 2px solid var(--color-light-gray);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all var(--transition-speed) ease;
}
.servicio-grid-card:hover .servicio-card-front {
border-color: var(--color-secondary);
}
.servicio-number {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 800;
box-shadow: 0 4px 12px rgba(255, 147, 30, 0.3);
}
.servicio-icon-wrapper {
width: 100px;
height: 100px;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
margin-bottom: 1.5rem;
transition: all var(--transition-speed) ease;
}
.servicio-grid-card:hover .servicio-icon-wrapper {
transform: scale(1.1);
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.2) 0%,
rgba(166, 206, 50, 0.2) 100%
);
}
.servicio-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.servicio-excerpt {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.servicio-hover-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-secondary);
font-weight: 600;
font-size: 0.9rem;
}
/* Card Back */
.servicio-card-back {
background: linear-gradient(135deg, var(--color-primary) 0%, #0d2847 100%);
color: var(--color-white);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
}
.servicio-card-back h4 {
color: var(--color-white);
font-weight: 700;
font-size: 1.3rem;
}
.servicio-features-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}
.servicio-features-list li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.9);
}
.servicio-features-list li::before {
content: "\F26A";
font-family: "Bootstrap Icons";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: bold;
}
/* CTA Card Especial */
.servicio-cta-special {
height: 400px;
}
.cta-card-content {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 16px;
padding: 3rem 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow: var(--shadow-lg);
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.cta-card-content:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(255, 147, 30, 0.4);
}
.cta-icon {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.cta-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 1rem;
}
.cta-text {
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2rem;
}
/* MOBILE: Carousel */
.servicios-carousel-mobile {
margin-top: 3rem;
}
.servicio-mobile-card {
background: var(--color-white);
border: 2px solid var(--color-light-gray);
border-radius: 16px;
padding: 2rem;
margin: 0 1rem;
box-shadow: var(--shadow-md);
min-height: 500px;
}
.mobile-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.mobile-number {
width: 50px;
height: 50px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
font-weight: 800;
}
.mobile-icon {
width: 80px;
height: 80px;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.15) 0%,
rgba(166, 206, 50, 0.15) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
}
.mobile-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.mobile-description {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.mobile-features {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.mobile-features li {
padding: 0.6rem 0;
padding-left: 1.8rem;
position: relative;
font-size: 0.9rem;
color: var(--color-dark-gray);
}
.mobile-features li::before {
content: "\F26A";
font-family: "Bootstrap Icons";
position: absolute;
left: 0;
color: var(--color-accent);
font-weight: bold;
font-size: 1.1rem;
}
/* Mobile CTA Card */
.servicio-mobile-cta {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border: none;
color: var(--color-white);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mobile-cta-icon {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.mobile-cta-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-white);
margin-bottom: 1rem;
}
.mobile-cta-text {
font-size: 1rem;
color: rgba(255, 255, 255, 0.95);
margin-bottom: 2rem;
}
/* Carousel Controls Mobile */
.servicios-carousel-mobile .carousel-control-prev,
.servicios-carousel-mobile .carousel-control-next {
width: 50px;
height: 50px;
background: var(--color-secondary);
border-radius: 50%;
opacity: 1;
top: 50%;
transform: translateY(-50%);
}
.servicios-carousel-mobile .carousel-control-prev {
left: -15px;
}
.servicios-carousel-mobile .carousel-control-next {
right: -15px;
}
.servicios-carousel-mobile .carousel-indicators {
bottom: -40px;
}
.servicios-carousel-mobile .carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--color-light-gray);
border: 2px solid var(--color-secondary);
opacity: 1;
}
.servicios-carousel-mobile .carousel-indicators button.active {
background-color: var(--color-secondary);
}
/* ============================================
RESPONSIVE
============================================ */
/* Tablet Large */
@media (max-width: 1199.98px) {
.servicios-grid-desktop {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* Tablet */
@media (max-width: 991.98px) {
.hero-slider-soporte .carousel-caption {
text-align: center;
left: 5%;
right: 5%;
bottom: 15%;
}
.hero-slider-soporte .carousel-inner {
height: 55vh;
min-height: 450px;
}
}
/* Mobile */
@media (max-width: 767.98px) {
.hero-slider-soporte .carousel-inner {
height: 50vh;
min-height: 400px;
}
.hero-slider-soporte .carousel-caption h1 {
font-size: 2rem;
}
.hero-slider-soporte .carousel-caption .lead {
font-size: 1.1rem;
}
.beneficio-item {
flex-direction: column;
text-align: center;
align-items: center;
}
.beneficio-icon {
width: 60px;
height: 60px;
}
.servicio-mobile-card {
min-height: 550px;
padding: 1.5rem;
}
.mobile-title {
font-size: 1.3rem;
}
.servicios-carousel-mobile .carousel-control-prev,
.servicios-carousel-mobile .carousel-control-next {
width: 40px;
height: 40px;
}
}
/* Extra Small Mobile */
@media (max-width: 575.98px) {
.hero-slider-soporte .carousel-caption h1 {
font-size: 1.6rem;
}
.hero-slider-soporte .carousel-caption .lead {
font-size: 1rem;
}
.servicio-mobile-card {
margin: 0 0.5rem;
}
}
/* ============================================
COMPAÑÍA / NOSOTROS
============================================ */
/* Hero Compañía */
.hero-compania {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0 3rem;
position: relative;
overflow: hidden;
}
.scroll-indicator {
margin-top: 3rem;
animation: bounce 2s infinite;
}
.scroll-indicator i {
font-size: 2rem;
color: var(--color-secondary);
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-15px);
}
60% {
transform: translateY(-7px);
}
}
/* Timeline */
.seccion-timeline {
position: relative;
padding: 4rem 0;
}
.timeline-container {
position: relative;
}
.timeline-container::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 100%;
background: linear-gradient(
180deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 10px;
}
.timeline-item {
position: relative;
margin-bottom: 4rem;
}
.timeline-content {
background: var(--color-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.1);
position: relative;
transition: all var(--transition-speed) ease;
}
.timeline-content:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.timeline-badge {
position: absolute;
top: -15px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.5rem;
font-weight: 800;
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.4);
z-index: 2;
}
.timeline-title {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.timeline-text {
font-size: 1.1rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
.timeline-image {
position: relative;
}
.timeline-image img {
transition: all var(--transition-speed) ease;
}
.timeline-content:hover .timeline-image img {
transform: scale(1.05);
}
/* Banner Por qué nosotros */
.seccion-porque-nosotros {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1828 100%);
overflow: hidden;
padding: 6rem 0;
}
.porque-nosotros-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: bottom;
opacity: 0.3;
}
.porque-nosotros-content {
position: relative;
z-index: 2;
}
.porque-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.porque-badge i {
font-size: 1.5rem;
}
/* Floating Shapes */
.floating-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.3) 0%,
rgba(166, 206, 50, 0.3) 100%
);
animation: float 20s infinite ease-in-out;
}
.shape-1 {
width: 300px;
height: 300px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.shape-2 {
width: 200px;
height: 200px;
bottom: 20%;
right: 15%;
animation-delay: 3s;
}
.shape-3 {
width: 150px;
height: 150px;
top: 50%;
right: 25%;
animation-delay: 6s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) translateX(0) scale(1);
}
33% {
transform: translateY(-30px) translateX(30px) scale(1.1);
}
66% {
transform: translateY(30px) translateX(-30px) scale(0.9);
}
}
/* Valores */
.valor-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid transparent;
height: 100%;
}
.valor-card:hover {
border-color: var(--color-secondary);
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.valor-icon {
width: 90px;
height: 90px;
margin: 0 auto 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.valor-card:hover .valor-icon {
transform: scale(1.1) rotate(-5deg);
}
.eficacia-icon {
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}
.pasion-icon {
background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
}
.integridad-icon {
background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
}
.calidad-icon {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.valor-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.valor-description {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Equipo */
.equipo-image-container {
position: relative;
}
.equipo-badge {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
}
.equipo-badge i {
font-size: 1.5rem;
}
/* ADN */
.adn-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
color: var(--color-secondary);
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
border: 2px solid var(--color-secondary);
}
.adn-badge i {
font-size: 1.3rem;
}
.adn-features {
display: flex;
flex-direction: column;
gap: 1rem;
}
.adn-feature-item {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1.1rem;
color: var(--color-dark-gray);
}
.adn-feature-item i {
font-size: 1.5rem;
}
/* Responsive Mobile */
@media (max-width: 992px) {
.timeline-container::before {
left: 30px;
}
.timeline-badge {
left: 0;
right: auto;
}
.timeline-left .timeline-content,
.timeline-right .timeline-content {
margin-left: 80px;
}
.seccion-porque-nosotros {
min-height: auto;
padding: 4rem 0;
}
.shape {
display: none;
}
}
@media (max-width: 768px) {
.timeline-title {
font-size: 1.5rem;
}
.timeline-text {
font-size: 1rem;
}
.valor-card {
padding: 2rem 1.5rem;
}
.valor-icon {
width: 70px;
height: 70px;
font-size: 2rem;
}
}
/* ============================================
POR QUÉ NOSOTROS
============================================ */
/* Hero Por Qué Nosotros */
.hero-por-que-nosotros {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.hero-image-container img {
filter: drop-shadow(0 15px 40px rgba(8, 24, 43, 0.15));
}
/* Diferencial */
.diferencial-image {
position: relative;
}
.diferencial-badge {
position: absolute;
bottom: 30px;
right: 30px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
}
.diferencial-badge i {
font-size: 1.5rem;
}
/* Pilares */
.pilar-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
position: relative;
overflow: hidden;
}
.pilar-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(
90deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
transform: scaleX(0);
transition: transform var(--transition-speed) ease;
}
.pilar-card:hover::before {
transform: scaleX(1);
}
.pilar-card:hover {
border-color: var(--color-secondary);
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.pilar-number {
position: absolute;
top: 20px;
right: 20px;
font-size: 3rem;
font-weight: 800;
color: rgba(8, 24, 43, 0.05);
line-height: 1;
}
.pilar-icon {
width: 90px;
height: 90px;
margin: 0 auto 2rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.pilar-card:hover .pilar-icon {
transform: scale(1.1) rotate(-5deg);
}
.soluciones-icon {
background: linear-gradient(135deg, #9c27b0 0%, #673ab7 100%);
}
.calidad-icon {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.soporte-icon {
background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
}
.pilar-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.pilar-description {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Cómo lo Hacemos - Banner */
.seccion-como-lo-hacemos {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1828 100%);
overflow: hidden;
padding: 6rem 0;
}
.como-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: bottom;
opacity: 0.3;
}
.como-content {
position: relative;
z-index: 2;
}
.como-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.como-badge i {
font-size: 1.5rem;
}
/* Floating Shapes */
.como-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.como-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.3) 0%,
rgba(166, 206, 50, 0.3) 100%
);
animation: floatShape 20s infinite ease-in-out;
}
.como-shape-1 {
width: 400px;
height: 400px;
top: 5%;
left: 5%;
animation-delay: 0s;
}
.como-shape-2 {
width: 250px;
height: 250px;
bottom: 15%;
right: 10%;
animation-delay: 4s;
}
.como-shape-3 {
width: 180px;
height: 180px;
top: 50%;
right: 30%;
animation-delay: 8s;
}
@keyframes floatShape {
0%,
100% {
transform: translateY(0) translateX(0) scale(1);
}
33% {
transform: translateY(-40px) translateX(40px) scale(1.15);
}
66% {
transform: translateY(40px) translateX(-40px) scale(0.85);
}
}
/* Impacto */
.impacto-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
}
.impacto-card:hover {
border-color: var(--color-secondary);
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.impacto-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
}
.impacto-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 1rem;
}
.impacto-symbol {
font-size: 2.5rem;
font-weight: 700;
}
.impacto-label {
font-size: 1rem;
color: var(--color-dark-gray);
margin: 0;
font-weight: 600;
}
/* Team Members */
.team-member-card {
background: var(--color-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.1);
transition: all var(--transition-speed) ease;
height: 100%;
}
.team-member-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.2);
}
.team-member-image {
position: relative;
overflow: hidden;
height: 350px;
}
.team-member-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all var(--transition-speed) ease;
}
.team-member-card:hover .team-member-image img {
transform: scale(1.1);
}
.team-member-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(8, 24, 43, 0.9) 0%,
rgba(255, 147, 30, 0.9) 100%
);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all var(--transition-speed) ease;
}
.team-member-card:hover .team-member-overlay {
opacity: 1;
}
.team-social {
display: flex;
gap: 1rem;
}
.team-social-link {
width: 50px;
height: 50px;
background: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 1.5rem;
transition: all var(--transition-speed) ease;
text-decoration: none;
}
.team-social-link:hover {
background: var(--color-secondary);
color: var(--color-white);
transform: scale(1.1);
}
.team-member-info {
padding: 2rem;
text-align: center;
}
.team-member-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.team-member-role {
font-size: 1rem;
color: var(--color-secondary);
font-weight: 600;
margin-bottom: 1rem;
}
.team-member-description {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.6;
margin: 0;
}
/* Partners Grid */
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
align-items: center;
}
.partner-logo-item {
display: flex;
align-items: center;
justify-content: center;
}
.partner-logo-container {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.partner-logo-container:hover {
border-color: var(--color-secondary);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(8, 24, 43, 0.1);
}
.partner-logo-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.6;
transition: all var(--transition-speed) ease;
}
.partner-logo-container:hover img {
filter: grayscale(0%);
opacity: 1;
}
/* Responsive */
@media (max-width: 768px) {
.hero-por-que-nosotros {
padding: 2rem 0;
}
.seccion-como-lo-hacemos {
min-height: auto;
padding: 4rem 0;
}
.como-shape {
display: none;
}
.impacto-number {
font-size: 2.5rem;
}
.team-member-image {
height: 280px;
}
.partners-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.partner-logo-container {
height: 120px;
padding: 1.5rem;
}
}
/* ============================================
EQUIPO
============================================ */
/* Hero Equipo */
.hero-equipo {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0 3rem;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--color-dark-gray);
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
}
/* Integrantes */
.equipo-member-card {
background: var(--color-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.1);
transition: all var(--transition-speed) ease;
height: 100%;
}
.equipo-member-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.2);
}
.equipo-member-image {
position: relative;
overflow: hidden;
height: 400px;
}
.equipo-member-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all var(--transition-speed) ease;
}
.equipo-member-card:hover .equipo-member-image img {
transform: scale(1.1);
}
.equipo-member-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
rgba(8, 24, 43, 0.95) 0%,
rgba(255, 147, 30, 0.95) 100%
);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all var(--transition-speed) ease;
}
.equipo-member-card:hover .equipo-member-overlay {
opacity: 1;
}
.equipo-social {
display: flex;
gap: 1.5rem;
}
.equipo-social-link {
width: 60px;
height: 60px;
background: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary);
font-size: 1.8rem;
transition: all var(--transition-speed) ease;
text-decoration: none;
}
.equipo-social-link:hover {
background: var(--color-secondary);
color: var(--color-white);
transform: scale(1.15) rotate(5deg);
}
.equipo-member-info {
padding: 2.5rem 2rem;
text-align: center;
}
.equipo-member-name {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.equipo-member-role {
font-size: 1.1rem;
color: var(--color-secondary);
font-weight: 600;
margin-bottom: 1.5rem;
}
.equipo-member-description {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.7;
margin-bottom: 2rem;
}
/* Modales Personalizados */
.modal-content {
border-radius: 20px;
border: none;
}
.modal-header {
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1828 100%);
color: var(--color-white);
border-radius: 20px 20px 0 0;
padding: 1.5rem 2rem;
}
.modal-title {
font-size: 1.3rem;
}
.modal-header .btn-close {
filter: invert(1);
opacity: 1;
}
.modal-body {
padding: 2.5rem;
}
.modal-footer {
border-top: 1px solid var(--color-light-gray);
padding: 1.5rem 2rem;
}
/* Grandes Pasos */
.seccion-grandes-pasos {
background: var(--color-white);
}
.grandes-pasos-image {
position: relative;
}
.grandes-pasos-badge {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
}
.grandes-pasos-badge i {
font-size: 1.8rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-equipo {
padding: 3rem 0 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.equipo-member-image {
height: 320px;
}
.equipo-social {
gap: 1rem;
}
.equipo-social-link {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.modal-body {
padding: 1.5rem;
}
.grandes-pasos-badge {
font-size: 0.9rem;
padding: 0.8rem 1.5rem;
}
}
/* ============================================
CARRERA
============================================ */
/* Hero Carrera */
.hero-carrera {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.carrera-hero-image {
position: relative;
}
.carrera-badge {
position: absolute;
bottom: 30px;
right: 30px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
}
.carrera-badge i {
font-size: 1.5rem;
}
/* Construimos */
.construimos-icon-container {
margin-bottom: 2rem;
}
.construimos-icon {
width: 100px;
height: 100px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 3rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.3);
}
.construimos-features {
display: flex;
flex-direction: column;
gap: 2rem;
}
.construimos-feature-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(8, 24, 43, 0.08);
transition: all var(--transition-speed) ease;
}
.construimos-feature-item:hover {
transform: translateX(10px);
box-shadow: 0 10px 30px rgba(8, 24, 43, 0.12);
}
.feature-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
font-size: 1.8rem;
}
/* Unimos Ideas */
.seccion-unimos-ideas {
background: var(--color-white);
}
.unimos-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
rgba(166, 206, 50, 0.1) 0%,
rgba(255, 147, 30, 0.1) 100%
);
color: var(--color-secondary);
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
border: 2px solid var(--color-accent);
}
.unimos-badge i {
font-size: 1.3rem;
}
.unimos-stats {
margin-top: 3rem;
}
.stat-item {
text-align: center;
padding: 2rem 1rem;
background: var(--color-light-gray);
border-radius: 16px;
transition: all var(--transition-speed) ease;
}
.stat-item:hover {
background: var(--color-white);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(8, 24, 43, 0.1);
}
.stat-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.8rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.95rem;
color: var(--color-dark-gray);
font-weight: 600;
}
/* Beneficios Carrera */
.beneficio-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid transparent;
height: 100%;
}
.beneficio-card:hover {
border-color: var(--color-secondary);
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.beneficio-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.beneficio-card:hover .beneficio-icon {
transform: scale(1.1) rotate(-5deg);
}
/* Iconos específicos por beneficio */
.colaborativo-icon {
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}
.innovacion-icon {
background: linear-gradient(135deg, #ff9800 0%, #e65100 100%);
}
.seguridad-icon {
background: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
}
.tecnologia-icon {
background: linear-gradient(135deg, #9c27b0 0%, #4a148c 100%);
}
.productividad-icon {
background: linear-gradient(135deg, #00bcd4 0%, #006064 100%);
}
.costos-icon {
background: linear-gradient(135deg, #8bc34a 0%, #33691e 100%);
}
.soporte-icon {
background: linear-gradient(135deg, #ff5722 0%, #bf360c 100%);
}
.personalizadas-icon {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.beneficio-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.beneficio-description {
font-size: 0.95rem;
color: var(--color-dark-gray);
line-height: 1.7;
margin: 0;
}
/* Conoce Más */
.seccion-conoce-mas {
position: relative;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1828 100%);
overflow: hidden;
padding: 6rem 0;
}
.conoce-mas-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: bottom;
opacity: 0.3;
}
.conoce-mas-content {
position: relative;
z-index: 2;
}
.conoce-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.conoce-badge i {
font-size: 1.5rem;
}
/* Floating Shapes */
.conoce-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.conoce-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.3) 0%,
rgba(166, 206, 50, 0.3) 100%
);
animation: floatKnow 20s infinite ease-in-out;
}
.conoce-shape-1 {
width: 350px;
height: 350px;
top: 8%;
left: 8%;
animation-delay: 0s;
}
.conoce-shape-2 {
width: 220px;
height: 220px;
bottom: 18%;
right: 12%;
animation-delay: 5s;
}
.conoce-shape-3 {
width: 170px;
height: 170px;
top: 48%;
right: 28%;
animation-delay: 10s;
}
@keyframes floatKnow {
0%,
100% {
transform: translateY(0) translateX(0) scale(1);
}
33% {
transform: translateY(-35px) translateX(35px) scale(1.12);
}
66% {
transform: translateY(35px) translateX(-35px) scale(0.88);
}
}
/* Responsive */
@media (max-width: 768px) {
.hero-carrera {
padding: 2rem 0;
}
.carrera-badge {
font-size: 0.9rem;
padding: 0.8rem 1.5rem;
}
.construimos-features {
gap: 1.5rem;
}
.construimos-feature-item {
padding: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.beneficio-card {
padding: 2rem 1.5rem;
}
.seccion-conoce-mas {
min-height: auto;
padding: 4rem 0;
}
.conoce-shape {
display: none;
}
}
/* ============================================
SOCIOS Y CERTIFICACIONES
============================================ */
/* Hero Socios */
.hero-socios {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0 3rem;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.3);
}
.hero-badge i {
font-size: 1.5rem;
}
/* Imagen Certificaciones */
.certificaciones-image-container {
position: relative;
}
.cert-badge {
position: absolute;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 1.8rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
animation: floatBadge 3s ease-in-out infinite;
}
.cert-badge i {
font-size: 1.5rem;
}
.cert-badge-1 {
top: 30px;
left: 30px;
}
.cert-badge-2 {
bottom: 30px;
right: 30px;
animation-delay: 1.5s;
}
@keyframes floatBadge {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
/* Credenciales */
.credenciales-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.credencial-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.credencial-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.8rem;
}
.credenciales-image {
position: relative;
}
.credenciales-stats {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 2rem;
z-index: 2;
}
.stat-box {
background: var(--color-white);
padding: 1.5rem 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.15);
min-width: 180px;
}
.stat-box .stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-box .stat-label {
font-size: 0.9rem;
color: var(--color-dark-gray);
font-weight: 600;
}
/* Timeline Aliados */
.aliados-timeline-container {
position: relative;
padding: 2rem 0;
}
.aliado-timeline-item {
position: relative;
margin-bottom: 4rem;
}
.aliado-timeline-content {
background: var(--color-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.1);
transition: all var(--transition-speed) ease;
}
.aliado-timeline-content:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.aliado-image {
position: relative;
border-radius: 16px;
overflow: hidden;
}
.aliado-logo-overlay {
position: absolute;
top: 20px;
left: 20px;
background: rgba(255, 255, 255, 0.95);
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.aliado-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: var(--color-white);
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.aliado-badge i {
font-size: 1.2rem;
}
.google-badge {
background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
}
.microsoft-badge {
background: linear-gradient(135deg, #00a4ef 0%, #7fba00 100%);
}
.acronis-badge {
background: linear-gradient(135deg, #ff6600 0%, #d14900 100%);
}
.adobe-badge {
background: linear-gradient(135deg, #ff0000 0%, #b30000 100%);
}
.aliado-title {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.aliado-description {
font-size: 1rem;
color: var(--color-dark-gray);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.aliado-tags {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.aliado-tags .badge {
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 600;
}
/* Por qué Aliados - Banner */
.seccion-por-que-aliados {
position: relative;
min-height: 600px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1828 100%);
overflow: hidden;
padding: 6rem 0;
}
.por-que-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
background-position: bottom;
opacity: 0.3;
}
.por-que-content {
position: relative;
z-index: 2;
}
.por-que-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.por-que-badge i {
font-size: 1.5rem;
}
/* Floating Shapes */
.por-que-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.por-que-shape {
position: absolute;
border-radius: 50%;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.3) 0%,
rgba(166, 206, 50, 0.3) 100%
);
animation: floatPorQue 20s infinite ease-in-out;
}
.por-que-shape-1 {
width: 380px;
height: 380px;
top: 5%;
left: 5%;
animation-delay: 0s;
}
.por-que-shape-2 {
width: 250px;
height: 250px;
bottom: 12%;
right: 8%;
animation-delay: 4s;
}
.por-que-shape-3 {
width: 180px;
height: 180px;
top: 45%;
right: 25%;
animation-delay: 8s;
}
@keyframes floatPorQue {
0%,
100% {
transform: translateY(0) translateX(0) scale(1);
}
33% {
transform: translateY(-40px) translateX(40px) scale(1.15);
}
66% {
transform: translateY(40px) translateX(-40px) scale(0.85);
}
}
/* Responsive */
@media (max-width: 992px) {
.credenciales-stats {
position: static;
transform: none;
justify-content: center;
margin-top: 2rem;
}
.stat-box {
min-width: 150px;
}
}
@media (max-width: 768px) {
.hero-socios {
padding: 3rem 0 2rem;
}
.cert-badge {
font-size: 0.85rem;
padding: 0.8rem 1.3rem;
}
.cert-badge-1,
.cert-badge-2 {
position: static;
margin: 1rem auto;
display: inline-flex;
}
.credenciales-stats {
flex-direction: column;
gap: 1rem;
}
.aliado-timeline-content {
padding: 2rem 1.5rem;
}
.aliado-title {
font-size: 1.5rem;
}
.seccion-por-que-aliados {
min-height: auto;
padding: 4rem 0;
}
.por-que-shape {
display: none;
}
}
/* ============================================
PROGRAME VISITA / CONTACTOS
============================================ */
/* Hero Contactos */
.hero-contactos {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.contacto-rapido {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contacto-rapido-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.contacto-rapido-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.8rem;
}
.contacto-link {
color: var(--color-secondary);
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
transition: all var(--transition-speed) ease;
}
.contacto-link:hover {
color: var(--color-primary);
text-decoration: underline;
}
.contacto-hero-image {
position: relative;
}
.contacto-badge {
position: absolute;
bottom: 30px;
right: 30px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
}
.contacto-badge i {
font-size: 1.5rem;
}
/* Ubicación */
.ubicacion-card {
background: var(--color-white);
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.1);
display: flex;
flex-direction: column;
}
.ubicacion-header {
text-align: center;
margin-bottom: 2rem;
}
.ubicacion-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 2.5rem;
}
.ubicacion-ciudad {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.ubicacion-subtitulo {
color: var(--color-secondary);
font-weight: 600;
font-size: 1.1rem;
margin: 0;
}
.ubicacion-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.ubicacion-info-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.ubicacion-info-item i {
flex-shrink: 0;
font-size: 1.5rem;
color: var(--color-secondary);
margin-top: 0.2rem;
}
.ubicacion-info-item strong {
display: block;
color: var(--color-primary);
margin-bottom: 0.3rem;
}
.ubicacion-info-item p {
color: var(--color-dark-gray);
line-height: 1.6;
}
.ubicacion-info-item a {
color: var(--color-secondary);
text-decoration: none;
transition: all var(--transition-speed) ease;
}
.ubicacion-info-item a:hover {
color: var(--color-primary);
text-decoration: underline;
}
.ubicacion-actions {
display: flex;
flex-direction: column;
gap: 0.8rem;
}
/* Mapa */
.mapa-container {
width: 100%;
height: 100%;
min-height: 600px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.1);
}
/* Cobertura Nacional */
.cobertura-nacional {
background: var(--color-white);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.08);
}
.ciudad-badge {
background: var(--color-light-gray);
padding: 1rem 1.5rem;
border-radius: 12px;
text-align: center;
font-weight: 600;
color: var(--color-primary);
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.ciudad-badge i {
color: var(--color-accent);
font-size: 1.2rem;
}
.ciudad-badge:hover {
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(8, 24, 43, 0.1);
}
/* Redes Sociales */
.social-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
text-align: center;
text-decoration: none;
display: block;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
}
.social-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.social-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.social-card:hover .social-icon {
transform: scale(1.1) rotate(5deg);
}
.facebook-card {
border-color: transparent;
}
.facebook-card:hover {
border-color: #1877f2;
}
.facebook-card .social-icon {
background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%);
}
.instagram-card {
border-color: transparent;
}
.instagram-card:hover {
border-color: #e4405f;
}
.instagram-card .social-icon {
background: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);
}
.linkedin-card {
border-color: transparent;
}
.linkedin-card:hover {
border-color: #0a66c2;
}
.linkedin-card .social-icon {
background: linear-gradient(135deg, #0a66c2 0%, #004182 100%);
}
.whatsapp-card {
border-color: transparent;
}
.whatsapp-card:hover {
border-color: #25d366;
}
.whatsapp-card .social-icon {
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}
.social-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.social-description {
color: var(--color-dark-gray);
margin: 0;
}
/* Responsive */
@media (max-width: 992px) {
.mapa-container {
min-height: 400px;
}
}
@media (max-width: 768px) {
.hero-contactos {
padding: 2rem 0;
}
.contacto-rapido-item {
flex-direction: column;
text-align: center;
}
.contacto-rapido-icon {
margin: 0 auto;
}
.contacto-badge {
font-size: 0.9rem;
padding: 0.8rem 1.5rem;
}
.ubicacion-card {
padding: 2rem 1.5rem;
}
.mapa-container {
min-height: 300px;
}
.cobertura-nacional {
padding: 2rem 1.5rem;
}
.social-card {
padding: 2rem 1.5rem;
}
.social-icon {
width: 60px;
height: 60px;
font-size: 2rem;
}
}
/* ============================================
FAQ
============================================ */
/* Hero FAQ */
.hero-faq {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0 3rem;
}
.faq-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.3);
}
.faq-badge i {
font-size: 1.5rem;
}
.faq-search-box {
position: relative;
max-width: 600px;
margin: 2rem auto 0;
}
.faq-search-box input {
padding-left: 3.5rem;
border-radius: 50px;
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
}
.faq-search-box input:focus {
border-color: var(--color-secondary);
box-shadow: 0 0 0 0.25rem rgba(255, 147, 30, 0.15);
}
.faq-search-box .search-icon {
position: absolute;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.3rem;
color: var(--color-dark-gray);
}
/* Categorías FAQ */
.categoria-card {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
text-align: center;
text-decoration: none;
display: block;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
}
.categoria-card:hover {
border-color: var(--color-secondary);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(8, 24, 43, 0.1);
}
.categoria-icon {
width: 70px;
height: 70px;
margin: 0 auto 1rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 2rem;
transition: all var(--transition-speed) ease;
}
.categoria-card:hover .categoria-icon {
transform: scale(1.1) rotate(-5deg);
}
.categoria-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.categoria-count {
font-size: 0.9rem;
color: var(--color-dark-gray);
}
/* Category Sections */
.faq-category-section {
scroll-margin-top: 100px;
}
.faq-category-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--color-secondary);
}
.faq-category-icon {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.8rem;
}
.faq-category-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
/* Accordion Personalizado */
.faq-item {
border: 2px solid var(--color-light-gray);
border-radius: 12px;
margin-bottom: 1rem;
overflow: hidden;
transition: all var(--transition-speed) ease;
}
.faq-item:hover {
border-color: var(--color-secondary);
box-shadow: 0 5px 20px rgba(8, 24, 43, 0.08);
}
.faq-item .accordion-button {
font-weight: 600;
font-size: 1.1rem;
color: var(--color-primary);
background: var(--color-white);
padding: 1.5rem;
border: none;
display: flex;
align-items: center;
}
.faq-item .accordion-button:not(.collapsed) {
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
color: var(--color-primary);
box-shadow: none;
}
.faq-item .accordion-button:focus {
box-shadow: none;
border: none;
}
.faq-item .accordion-button::after {
background-image: none;
content: "\F282";
font-family: "bootstrap-icons";
font-size: 1.5rem;
color: var(--color-secondary);
transition: transform var(--transition-speed) ease;
}
.faq-item .accordion-button:not(.collapsed)::after {
transform: rotate(180deg);
}
.faq-item .accordion-button i {
color: var(--color-secondary);
font-size: 1.3rem;
}
.faq-item .accordion-body {
padding: 2rem 1.5rem;
background: var(--color-white);
line-height: 1.8;
color: var(--color-dark-gray);
}
/* FAQ Tags */
.faq-tags {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.faq-tags .badge {
padding: 0.5rem 1rem;
font-size: 0.85rem;
font-weight: 600;
}
/* FAQ CTA Buttons */
.faq-cta {
margin-top: 1.5rem;
}
/* Benefit Boxes */
.benefit-box,
.web-type-box {
background: var(--color-light-gray);
padding: 1rem;
border-radius: 8px;
text-align: center;
}
.benefit-box i,
.web-type-box i {
font-size: 1.5rem;
margin-right: 0.5rem;
}
/* Pricing Preview */
.faq-pricing-preview {
margin-top: 1.5rem;
}
.pricing-box {
background: var(--color-light-gray);
padding: 1.5rem;
border-radius: 8px;
text-align: center;
}
.pricing-box h6 {
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
/* CTA Section */
.cta-icon {
width: 100px;
height: 100px;
margin: 0 auto;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 3rem;
}
/* Smooth Scroll */
html {
scroll-behavior: smooth;
}
/* Responsive */
@media (max-width: 768px) {
.hero-faq {
padding: 3rem 0 2rem;
}
.faq-category-header {
flex-direction: column;
text-align: center;
}
.faq-category-title {
font-size: 1.5rem;
}
.faq-item .accordion-button {
font-size: 1rem;
padding: 1.2rem;
}
.faq-item .accordion-body {
padding: 1.5rem 1.2rem;
}
.categoria-card {
padding: 1.5rem 1rem;
}
}
/* ============================================
CONTACTO
============================================ */
/* Hero Contacto */
.hero-contacto {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 5rem 0 3rem;
}
.contacto-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.3);
}
.contacto-hero-badge i {
font-size: 1.5rem;
}
/* Canales de Contacto */
.canal-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
display: flex;
flex-direction: column;
}
.canal-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.telefono-card:hover {
border-color: #4caf50;
}
.email-card:hover {
border-color: #2196f3;
}
.whatsapp-card:hover {
border-color: #25d366;
}
.oficina-card:hover {
border-color: var(--color-secondary);
}
.canal-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.canal-card:hover .canal-icon {
transform: scale(1.1) rotate(-5deg);
}
.telefono-card .canal-icon {
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}
.email-card .canal-icon {
background: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
}
.whatsapp-card .canal-icon {
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
}
.oficina-card .canal-icon {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.canal-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.canal-description {
color: var(--color-dark-gray);
margin-bottom: 1.5rem;
}
.canal-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1rem;
}
.canal-link {
color: var(--color-secondary);
font-weight: 600;
text-decoration: none;
transition: all var(--transition-speed) ease;
}
.canal-link:hover {
color: var(--color-primary);
text-decoration: underline;
}
.canal-horario {
font-size: 0.9rem;
color: var(--color-dark-gray);
font-style: italic;
}
/* Por qué contactar */
.contactar-image {
position: relative;
}
.contactar-badge {
position: absolute;
bottom: 30px;
left: 30px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 1rem 2rem;
border-radius: 50px;
display: flex;
align-items: center;
gap: 0.8rem;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 10px 30px rgba(255, 147, 30, 0.4);
}
.contactar-badge i {
font-size: 1.5rem;
}
.razones-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.razon-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.razon-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.8rem;
}
/* Estadísticas */
.stat-contacto-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
}
.stat-contacto-card:hover {
border-color: var(--color-secondary);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(8, 24, 43, 0.12);
}
.stat-contacto-card .stat-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 2rem;
}
.stat-contacto-card .stat-number {
font-size: 3rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-contacto-card .stat-label {
font-size: 1rem;
color: var(--color-dark-gray);
font-weight: 600;
}
/* Servicios Contacto */
.servicio-contacto-card {
background: var(--color-white);
padding: 2.5rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
display: flex;
flex-direction: column;
}
.servicio-contacto-card:hover {
border-color: var(--color-secondary);
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(8, 24, 43, 0.12);
}
.servicio-icon-badge {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-secondary);
font-size: 2rem;
transition: all var(--transition-speed) ease;
}
.servicio-contacto-card:hover .servicio-icon-badge {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
transform: scale(1.1) rotate(-5deg);
}
.servicio-contacto-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.servicio-contacto-description {
color: var(--color-dark-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
flex: 1;
}
/* Ubicación Detalles */
.ubicacion-detalles {
display: flex;
flex-direction: column;
gap: 2rem;
}
.ubicacion-detalle-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.ubicacion-detalle-item i {
flex-shrink: 0;
font-size: 1.8rem;
color: var(--color-secondary);
margin-top: 0.2rem;
}
.ubicacion-detalle-item strong {
display: block;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.mapa-wrapper {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(8, 24, 43, 0.15);
}
/* Garantía */
.pasos-garantia {
background: linear-gradient(
135deg,
rgba(76, 175, 80, 0.1) 0%,
rgba(46, 125, 50, 0.1) 100%
);
padding: 1.5rem;
border-radius: 16px;
border: 2px solid #4caf50;
}
.garantia-badge {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.garantia-badge i {
font-size: 2rem;
color: #4caf50;
flex-shrink: 0;
}
.garantia-badge strong {
display: block;
color: var(--color-primary);
margin-bottom: 0.3rem;
}
.garantia-badge p {
color: var(--color-dark-gray);
}
/* Responsive */
@media (max-width: 768px) {
.hero-contacto {
padding: 3rem 0 2rem;
}
.canal-card {
padding: 2rem 1.5rem;
}
.contactar-badge {
font-size: 0.9rem;
padding: 0.8rem 1.5rem;
left: 20px;
bottom: 20px;
}
.razones-list {
gap: 1.5rem;
}
.stat-contacto-card {
padding: 2rem 1.5rem;
}
.stat-contacto-card .stat-number {
font-size: 2.5rem;
}
.servicio-contacto-card {
padding: 2rem 1.5rem;
}
}
/* ============================================
ATENCIÓN AL CLIENTE
============================================ */
/* Hero Atención */
.hero-atencion {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 4rem 0;
}
.atencion-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.3);
}
.atencion-badge i {
font-size: 1.5rem;
}
.hero-description {
font-size: 1.05rem;
line-height: 1.8;
color: var(--color-dark-gray);
}
.hero-stats-mini {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-top: 2rem;
}
.stat-mini-item {
display: flex;
align-items: center;
gap: 0.8rem;
color: var(--color-primary);
font-weight: 600;
}
.stat-mini-item i {
font-size: 1.5rem;
color: var(--color-secondary);
}
.atencion-hero-image {
position: relative;
}
.atencion-floating-badge {
position: absolute;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
color: var(--color-white);
padding: 1.2rem 1.8rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4);
animation: pulse 2s ease-in-out infinite;
}
.atencion-floating-badge i {
font-size: 2rem;
}
.atencion-floating-badge strong {
display: block;
font-size: 1rem;
margin-bottom: 0.2rem;
}
.atencion-floating-badge span {
display: block;
font-size: 0.85rem;
opacity: 0.9;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Canales de Soporte */
.soporte-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
position: relative;
overflow: hidden;
}
.soporte-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.telefono-soporte:hover {
border-color: #4caf50;
}
.email-soporte:hover {
border-color: #2196f3;
}
.faq-soporte:hover {
border-color: var(--color-secondary);
}
.soporte-prioridad {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, #ff5722 0%, #d32f2f 100%);
color: var(--color-white);
padding: 0.5rem 1.2rem;
border-bottom-left-radius: 12px;
font-size: 0.85rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.4rem;
}
.soporte-prioridad i {
font-size: 0.9rem;
}
.prioridad-media {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}
.prioridad-baja {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.soporte-icon {
width: 80px;
height: 80px;
margin: 2rem auto 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.telefono-soporte .soporte-icon {
background: linear-gradient(135deg, #4caf50 0%, #2e7d32 100%);
}
.email-soporte .soporte-icon {
background: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
}
.faq-soporte .soporte-icon {
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.soporte-card:hover .soporte-icon {
transform: scale(1.1) rotate(-5deg);
}
.soporte-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.soporte-description {
color: var(--color-dark-gray);
margin-bottom: 2rem;
}
.soporte-info-box {
background: var(--color-light-gray);
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 1rem;
}
.soporte-info-box .info-item {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.8rem;
}
.soporte-info-box .info-item:last-child {
margin-bottom: 0;
}
.soporte-info-box i {
color: var(--color-secondary);
font-size: 1.2rem;
}
.soporte-info-box a {
color: var(--color-primary);
font-weight: 600;
text-decoration: none;
}
.soporte-horario,
.soporte-tiempo {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--color-dark-gray);
font-size: 0.9rem;
margin-top: 0.8rem;
}
.soporte-horario i,
.soporte-tiempo i {
color: var(--color-secondary);
}
/* Tipos de Soporte */
.tipo-soporte-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
}
.tipo-soporte-card:hover {
border-color: var(--color-secondary);
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(8, 24, 43, 0.12);
}
.tipo-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--color-white);
}
.incidente-icon {
background: linear-gradient(135deg, #f44336 0%, #c62828 100%);
}
.consulta-icon {
background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
}
.mantenimiento-icon {
background: linear-gradient(135deg, #ff9800 0%, #e65100 100%);
}
.capacitacion-icon {
background: linear-gradient(135deg, #9c27b0 0%, #6a1b9a 100%);
}
.tipo-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.tipo-description {
color: var(--color-dark-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.tipo-sla {
background: linear-gradient(
135deg,
rgba(255, 147, 30, 0.1) 0%,
rgba(166, 206, 50, 0.1) 100%
);
color: var(--color-secondary);
padding: 0.6rem 1.2rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
display: inline-block;
}
/* Proceso Timeline */
.proceso-timeline {
position: relative;
padding: 2rem 0;
}
.proceso-step {
display: flex;
gap: 2rem;
margin-bottom: 3rem;
position: relative;
}
.proceso-step:last-child {
margin-bottom: 0;
}
.proceso-step:not(:last-child)::after {
content: "";
position: absolute;
left: 34px;
top: 70px;
width: 3px;
height: calc(100% + 20px);
background: linear-gradient(
180deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
}
.proceso-number {
flex-shrink: 0;
width: 70px;
height: 70px;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 2rem;
font-weight: 800;
box-shadow: 0 8px 20px rgba(255, 147, 30, 0.3);
}
.proceso-content {
flex: 1;
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(8, 24, 43, 0.08);
}
.proceso-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.proceso-description {
color: var(--color-dark-gray);
line-height: 1.8;
margin-bottom: 1.5rem;
}
.proceso-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-light-gray);
color: var(--color-primary);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 600;
}
.success-badge {
background: linear-gradient(
135deg,
rgba(76, 175, 80, 0.2) 0%,
rgba(46, 125, 50, 0.2) 100%
);
color: #2e7d32;
}
/* Niveles de Soporte */
.nivel-card {
background: var(--color-white);
border-radius: 20px;
overflow: hidden;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
position: relative;
}
.nivel-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(8, 24, 43, 0.15);
}
.nivel-destacado {
border-color: var(--color-secondary);
box-shadow: 0 10px 40px rgba(255, 147, 30, 0.2);
}
.nivel-popular {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: var(--color-white);
padding: 0.5rem 1.5rem;
border-bottom-left-radius: 12px;
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.4rem;
z-index: 2;
}
.nivel-header {
background: linear-gradient(135deg, var(--color-primary) 0%, #0a1828 100%);
color: var(--color-white);
padding: 2.5rem 2rem;
text-align: center;
}
.nivel-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 0.4rem 1rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1rem;
}
.nivel-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0;
}
.nivel-body {
padding: 2.5rem 2rem;
}
.nivel-features {
list-style: none;
padding: 0;
margin: 0 0 2rem 0;
}
.nivel-features li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.8rem 0;
border-bottom: 1px solid var(--color-light-gray);
}
.nivel-features li:last-child {
border-bottom: none;
}
.nivel-features i {
color: #4caf50;
font-size: 1.3rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.nivel-precio {
text-align: center;
font-size: 1.8rem;
font-weight: 800;
color: var(--color-primary);
padding: 1.5rem;
background: var(--color-light-gray);
border-radius: 12px;
}
/* Recursos de Ayuda */
.recurso-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
text-align: center;
text-decoration: none;
display: block;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
}
.recurso-card:hover {
border-color: var(--color-secondary);
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(8, 24, 43, 0.12);
}
.recurso-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--color-secondary) 0%,
var(--color-accent) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 2rem;
transition: all var(--transition-speed) ease;
}
.recurso-card:hover .recurso-icon {
transform: scale(1.1) rotate(-5deg);
}
.recurso-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.recurso-description {
color: var(--color-dark-gray);
margin: 0;
}
/* Info Box Lateral */
.soporte-info-box-lateral {
background: var(--color-light-gray);
padding: 3rem;
border-radius: 20px;
}
.info-checklist {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.checklist-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.checklist-item i {
color: #4caf50;
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.garantia-soporte {
background: linear-gradient(
135deg,
rgba(76, 175, 80, 0.1) 0%,
rgba(46, 125, 50, 0.1) 100%
);
padding: 2rem;
border-radius: 16px;
border: 2px solid #4caf50;
display: flex;
gap: 1.5rem;
}
.garantia-icon {
flex-shrink: 0;
}
.garantia-icon i {
font-size: 3rem;
color: #4caf50;
}
.soporte-stats-lateral {
display: flex;
gap: 2rem;
justify-content: space-around;
}
.stat-lateral {
text-align: center;
}
.stat-lateral .stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-lateral .stat-label {
font-size: 0.9rem;
color: var(--color-dark-gray);
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.hero-atencion {
padding: 2rem 0;
}
.hero-stats-mini {
flex-direction: column;
gap: 1rem;
}
.atencion-floating-badge {
font-size: 0.85rem;
padding: 1rem 1.3rem;
}
.soporte-card {
padding: 2rem 1.5rem;
}
.proceso-step {
flex-direction: column;
gap: 1rem;
}
.proceso-step::after {
left: 34px;
}
.nivel-card {
margin-bottom: 2rem;
}
.soporte-info-box-lateral {
padding: 2rem 1.5rem;
}
.soporte-stats-lateral {
flex-direction: column;
gap: 1rem;
}
}
/* Info Box Lateral para Soporte */
.soporte-info-box-lateral {
background: var(--color-light-gray);
padding: 3rem;
border-radius: 20px;
}
.info-checklist {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.checklist-item {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.checklist-item i {
color: #4caf50;
font-size: 1.5rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.garantia-soporte {
background: linear-gradient(
135deg,
rgba(76, 175, 80, 0.1) 0%,
rgba(46, 125, 50, 0.1) 100%
);
padding: 2rem;
border-radius: 16px;
border: 2px solid #4caf50;
display: flex;
gap: 1.5rem;
}
.garantia-icon {
flex-shrink: 0;
}
.garantia-icon i {
font-size: 3rem;
color: #4caf50;
}
.soporte-stats-lateral {
display: flex;
gap: 2rem;
justify-content: space-around;
}
.stat-lateral {
text-align: center;
}
.stat-lateral .stat-number {
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-lateral .stat-label {
font-size: 0.9rem;
color: var(--color-dark-gray);
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.soporte-info-box-lateral {
padding: 2rem 1.5rem;
}
.soporte-stats-lateral {
flex-direction: column;
gap: 1rem;
}
}
/* ============================================
GOOGLE WORKSPACE
============================================ */
/* Colores oficiales de Google */
:root {
--google-blue: #4285f4;
--google-red: #ea4335;
--google-yellow: #fbbc04;
--google-green: #34a853;
--google-light: #f8f9fa;
}
/* Clases de colores */
.google-blue {
color: var(--google-blue);
}
.google-red {
color: var(--google-red);
}
.google-yellow {
color: var(--google-yellow);
}
.google-green {
color: var(--google-green);
}
/* Hero Google Workspace */
.hero-google-workspace {
background: linear-gradient(135deg, #f8f9fa 0%, #e8eaed 100%);
padding: 4rem 0;
}
.google-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-green) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(66, 133, 244, 0.3);
}
.google-badge i {
font-size: 1.5rem;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--color-dark-gray);
}
/* Botones Google */
.btn-google-primary {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-green) 100%
);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-google-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(66, 133, 244, 0.4);
color: var(--color-white);
}
.btn-google-outline {
border: 2px solid var(--google-blue);
color: var(--google-blue);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-google-outline:hover {
background: var(--google-blue);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(66, 133, 244, 0.3);
}
/* Fondos */
.bg-google-light {
background: var(--google-light);
}
.bg-google-gradient {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-red) 50%,
var(--google-yellow) 100%
);
}
/* Partner Premier */
.partner-premier-card {
background: var(--color-white);
padding: 3rem;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 3px solid var(--google-blue);
}
.partner-benefits {
display: flex;
flex-direction: column;
gap: 1rem;
}
.benefit-item {
display: flex;
align-items: center;
gap: 1rem;
font-size: 1rem;
}
.benefit-item i {
font-size: 1.5rem;
}
/* Apps Grid */
.google-app-card {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
text-align: center;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
height: 100%;
position: relative;
}
.google-app-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border-color: var(--google-blue);
}
.google-app-card.featured {
border-color: var(--google-blue);
background: linear-gradient(
135deg,
rgba(66, 133, 244, 0.05) 0%,
rgba(52, 168, 83, 0.05) 100%
);
}
.app-icon {
width: 70px;
height: 70px;
margin: 0 auto 1rem;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--color-white);
}
.gmail-icon {
background: linear-gradient(135deg, var(--google-red) 0%, #c5221f 100%);
}
.drive-icon {
background: linear-gradient(
135deg,
var(--google-yellow) 0%,
var(--google-blue) 50%,
var(--google-green) 100%
);
}
.meet-icon {
background: linear-gradient(135deg, var(--google-blue) 0%, #1a73e8 100%);
}
.calendar-icon {
background: linear-gradient(135deg, var(--google-blue) 0%, #1967d2 100%);
}
.chat-icon {
background: linear-gradient(135deg, var(--google-green) 0%, #0f9d58 100%);
}
.gemini-icon {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-red) 25%,
var(--google-yellow) 50%,
var(--google-green) 75%
);
animation: rainbow-pulse 3s ease-in-out infinite;
}
.docs-icon {
background: linear-gradient(135deg, var(--google-blue) 0%, #1a73e8 100%);
}
.sheets-icon {
background: linear-gradient(135deg, var(--google-green) 0%, #0f9d58 100%);
}
.slides-icon {
background: linear-gradient(135deg, var(--google-yellow) 0%, #f9ab00 100%);
}
.vids-icon {
background: linear-gradient(135deg, var(--google-red) 0%, #c5221f 100%);
}
.keep-icon {
background: linear-gradient(135deg, var(--google-yellow) 0%, #f9ab00 100%);
}
.sites-icon {
background: linear-gradient(135deg, var(--google-blue) 0%, #1967d2 100%);
}
.forms-icon {
background: linear-gradient(135deg, #9334e6 0%, #7028be 100%);
}
.notebooklm-icon {
background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 50%, #ffd700 100%);
}
.appsheet-icon {
background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
}
@keyframes rainbow-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.app-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
margin: 0;
}
.app-badge {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(
135deg,
var(--google-red) 0%,
var(--google-yellow) 100%
);
color: var(--color-white);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 700;
}
/* Características */
.caracteristica-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
}
.caracteristica-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: var(--google-blue);
}
.caracteristica-icon {
width: 80px;
height: 80px;
margin: 0 auto 2rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
}
.google-gradient-1 {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-green) 100%
);
}
.google-gradient-2 {
background: linear-gradient(
135deg,
var(--google-green) 0%,
var(--google-yellow) 100%
);
}
.google-gradient-3 {
background: linear-gradient(
135deg,
var(--google-red) 0%,
var(--google-blue) 100%
);
}
.caracteristica-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.caracteristica-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Gemini Acordeón */
.gemini-badge-large {
display: inline-flex;
align-items: center;
gap: 1rem;
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-red) 25%,
var(--google-yellow) 50%,
var(--google-green) 75%
);
color: var(--color-white);
padding: 1rem 3rem;
border-radius: 50px;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 10px 30px rgba(66, 133, 244, 0.4);
}
.gemini-badge-large i {
font-size: 2rem;
}
.gemini-accordion-item {
border: 2px solid var(--color-light-gray);
border-radius: 16px;
margin-bottom: 1.5rem;
overflow: hidden;
transition: all var(--transition-speed) ease;
}
.gemini-accordion-item:hover {
border-color: var(--google-blue);
box-shadow: 0 10px 30px rgba(66, 133, 244, 0.15);
}
.gemini-accordion-item .accordion-button {
font-weight: 700;
font-size: 1.3rem;
color: var(--color-primary);
background: var(--color-white);
padding: 1.8rem 2rem;
}
.gemini-accordion-item .accordion-button:not(.collapsed) {
background: linear-gradient(
135deg,
rgba(66, 133, 244, 0.1) 0%,
rgba(52, 168, 83, 0.1) 100%
);
color: var(--google-blue);
}
.gemini-accordion-item .accordion-button i {
font-size: 1.8rem;
}
.gemini-accordion-item .accordion-body {
padding: 2.5rem;
}
.gemini-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.gemini-features-list li {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem 0;
font-size: 1.05rem;
}
.gemini-features-list i {
font-size: 1.3rem;
}
.video-container {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
/* Seguridad Cards */
.seguridad-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
}
.seguridad-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
border-color: var(--google-green);
}
.seguridad-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--google-green) 0%,
var(--google-blue) 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
}
.seguridad-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.seguridad-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Email Profesional */
.email-box {
background: var(--color-light-gray);
padding: 2rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: 1.5rem;
border: 2px solid var(--google-blue);
}
.email-box i {
font-size: 3rem;
}
/* Estadísticas Google */
.stat-google {
padding: 2rem;
}
.stat-google .stat-number {
font-size: 4rem;
font-weight: 800;
line-height: 1;
margin-bottom: 1rem;
}
.stat-google .stat-label {
font-size: 1.2rem;
font-weight: 600;
}
/* CTA Planes */
.cta-planes-box {
background: var(--color-white);
padding: 4rem 3rem;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 3px solid var(--google-blue);
}
.cta-feature {
padding: 2rem 1.5rem;
background: var(--color-light-gray);
border-radius: 16px;
text-align: center;
}
.cta-feature i {
font-size: 3rem;
margin-bottom: 1rem;
}
.cta-feature h5 {
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-google-workspace {
padding: 2rem 0;
}
.partner-premier-card {
padding: 2rem 1.5rem;
}
.google-app-card {
padding: 1.5rem 1rem;
}
.caracteristica-card,
.seguridad-card {
padding: 2rem 1.5rem;
}
.gemini-accordion-item .accordion-button {
font-size: 1.1rem;
padding: 1.5rem 1rem;
}
.gemini-accordion-item .accordion-body {
padding: 1.5rem;
}
.cta-planes-box {
padding: 2.5rem 2rem;
}
.stat-google .stat-number {
font-size: 3rem;
}
}
/* ============================================
PRECIOS GOOGLE WORKSPACE
============================================ */
/* Hero Precios */
.hero-precios-google {
background: linear-gradient(135deg, #f8f9fa 0%, #e8eaed 100%);
padding: 4rem 0;
}
/* Plan Cards */
.plan-card {
background: var(--color-white);
border-radius: 24px;
overflow: hidden;
transition: all var(--transition-speed) ease;
border: 3px solid var(--color-light-gray);
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.plan-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
border-color: var(--google-blue);
}
.plan-popular {
border-color: var(--google-blue);
box-shadow: 0 15px 50px rgba(66, 133, 244, 0.3);
}
.plan-enterprise {
border-color: var(--google-red);
}
.popular-badge {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(
135deg,
var(--google-yellow) 0%,
var(--google-red) 100%
);
color: var(--color-white);
padding: 0.5rem 1.5rem;
border-bottom-left-radius: 12px;
font-weight: 700;
font-size: 0.85rem;
z-index: 2;
}
.enterprise-badge {
position: absolute;
top: 0;
right: 0;
background: linear-gradient(
135deg,
var(--google-red) 0%,
var(--google-yellow) 100%
);
color: var(--color-white);
padding: 0.5rem 1.5rem;
border-bottom-left-radius: 12px;
font-weight: 700;
font-size: 0.85rem;
z-index: 2;
display: flex;
align-items: center;
gap: 0.5rem;
}
.plan-header {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-green) 100%
);
color: var(--color-white);
padding: 2.5rem 2rem 2rem;
text-align: center;
}
.plan-popular .plan-header {
padding-top: 3rem;
}
.plan-enterprise .plan-header {
background: linear-gradient(
135deg,
var(--google-red) 0%,
var(--google-yellow) 100%
);
padding-top: 3rem;
}
.plan-name {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
}
.plan-complemento {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.85rem;
opacity: 0.95;
}
.plan-body {
padding: 2.5rem 2rem;
flex: 1;
}
.plan-storage {
background: var(--color-light-gray);
padding: 1.5rem;
border-radius: 16px;
text-align: center;
margin-bottom: 2rem;
}
.plan-storage i {
font-size: 2.5rem;
margin-bottom: 0.8rem;
display: block;
}
.plan-storage strong {
display: block;
font-size: 2.5rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.plan-storage span {
color: var(--color-dark-gray);
font-size: 0.9rem;
}
.plan-features {
display: flex;
flex-direction: column;
gap: 1rem;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.8rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.feature-item:hover {
background: var(--color-light-gray);
}
.feature-item.highlight {
background: linear-gradient(
135deg,
rgba(66, 133, 244, 0.1) 0%,
rgba(52, 168, 83, 0.1) 100%
);
border: 2px solid var(--google-blue);
font-weight: 700;
}
.feature-item i {
font-size: 1.3rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.feature-item span {
font-size: 0.95rem;
line-height: 1.5;
}
.plan-footer {
padding: 0 2rem 2.5rem;
}
/* Pricing Notes */
.pricing-notes {
background: var(--color-white);
padding: 2.5rem;
border-radius: 20px;
border: 2px solid var(--google-blue);
}
.pricing-notes h5 {
color: var(--color-primary);
}
.notes-list {
list-style: none;
padding: 0;
margin: 0;
}
.notes-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.8rem 0;
border-bottom: 1px solid var(--color-light-gray);
}
.notes-list li:last-child {
border-bottom: none;
}
.notes-list i {
color: var(--google-green);
font-size: 1.3rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
/* Tabla Comparativa */
.comparison-section {
margin-bottom: 3rem;
}
.comparison-category {
font-size: 1.8rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
.comparison-category i {
font-size: 2rem;
}
.comparison-table {
background: var(--color-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
.comparison-table thead {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-green) 100%
);
color: var(--color-white);
}
.comparison-table thead th {
padding: 1.5rem 1rem;
font-weight: 700;
text-align: center;
border: none;
}
.comparison-table thead th:first-child {
text-align: left;
}
.comparison-table tbody tr {
border-bottom: 1px solid var(--color-light-gray);
transition: all 0.2s ease;
}
.comparison-table tbody tr:hover {
background: var(--color-light-gray);
}
.comparison-table tbody tr:last-child {
border-bottom: none;
}
.comparison-table tbody td {
padding: 1.2rem 1rem;
text-align: center;
vertical-align: middle;
}
.comparison-table tbody td:first-child {
text-align: left;
font-weight: 600;
}
.comparison-table i.bi-check-circle-fill {
font-size: 1.5rem;
}
.comparison-table i.bi-dash-circle {
font-size: 1.5rem;
color: var(--color-dark-gray);
opacity: 0.3;
}
.badge-limited {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: var(--color-white);
padding: 0.4rem 1rem;
border-radius: 20px;
font-weight: 700;
font-size: 0.85rem;
}
.badge-advanced {
background: linear-gradient(
135deg,
var(--google-blue) 0%,
var(--google-green) 100%
);
color: var(--color-white);
padding: 0.4rem 1rem;
border-radius: 20px;
font-weight: 700;
font-size: 0.85rem;
}
/* CTA Final */
.cta-final-box {
background: var(--color-white);
padding: 4rem 3rem;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 3px solid var(--google-blue);
}
.cta-final-box .cta-icon {
font-size: 5rem;
color: var(--google-blue);
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 992px) {
.plan-card {
margin-bottom: 2rem;
}
.comparison-table {
font-size: 0.85rem;
}
.comparison-table thead th,
.comparison-table tbody td {
padding: 1rem 0.5rem;
}
}
@media (max-width: 768px) {
.plan-header {
padding: 2rem 1.5rem;
}
.plan-body {
padding: 2rem 1.5rem;
}
.plan-name {
font-size: 1.5rem;
}
.plan-storage strong {
font-size: 2rem;
}
.comparison-category {
font-size: 1.3rem;
}
.comparison-table {
font-size: 0.75rem;
}
.cta-final-box {
padding: 2.5rem 2rem;
}
.pricing-notes {
padding: 2rem 1.5rem;
}
}
/* ============================================
ROCKETBOT RPA
============================================ */
/* Colores Rocketbot */
:root {
--rocketbot-red: #e31e24;
--rocketbot-dark: #1a1a1a;
--rocketbot-black: #000000;
--rocketbot-light: #f8f9fa;
}
/* Clases de colores */
.rocketbot-red {
color: var(--rocketbot-red);
}
.rocketbot-dark-text {
color: var(--rocketbot-dark);
}
.bg-rocketbot-dark {
background: var(--rocketbot-dark);
}
/* Hero Rocketbot */
.hero-rocketbot {
background: linear-gradient(135deg, var(--rocketbot-light) 0%, #e9ecef 100%);
padding: 4rem 0;
}
.rocketbot-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(227, 30, 36, 0.3);
}
.rocketbot-badge i {
font-size: 1.5rem;
}
.hero-rocketbot-subtitle {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
.rocketbot-floating-badge {
position: absolute;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
color: var(--color-white);
padding: 1.2rem 1.8rem;
border-radius: 16px;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 10px 30px rgba(227, 30, 36, 0.4);
animation: pulse-rocketbot 2s ease-in-out infinite;
}
@keyframes pulse-rocketbot {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.rocketbot-floating-badge i {
font-size: 2rem;
}
.rocketbot-floating-badge strong {
display: block;
font-size: 1rem;
margin-bottom: 0.2rem;
}
.rocketbot-floating-badge span {
display: block;
font-size: 0.85rem;
opacity: 0.9;
}
/* Botones Rocketbot */
.btn-rocketbot-primary {
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-rocketbot-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(227, 30, 36, 0.4);
color: var(--color-white);
}
.btn-rocketbot-outline {
border: 2px solid var(--rocketbot-red);
color: var(--rocketbot-red);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-rocketbot-outline:hover {
background: var(--rocketbot-red);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(227, 30, 36, 0.3);
}
/* Estadísticas Rocketbot */
.stat-rocketbot {
padding: 2rem;
}
.stat-rocketbot .stat-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
}
.stat-rocketbot .stat-number {
font-size: 4rem;
font-weight: 800;
line-height: 1;
margin-bottom: 1rem;
}
.stat-rocketbot .stat-label {
font-size: 1.2rem;
font-weight: 600;
}
/* Feature Cards */
.rocketbot-feature-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 3px solid var(--color-light-gray);
text-align: center;
}
.rocketbot-feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(227, 30, 36, 0.15);
border-color: var(--rocketbot-red);
}
.feature-icon-rocketbot {
width: 90px;
height: 90px;
margin: 0 auto 2rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--color-white);
}
.agil-icon {
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
}
.flexible-icon {
background: linear-gradient(135deg, var(--rocketbot-dark) 0%, #3a3a3a 100%);
}
.escalable-icon {
background: linear-gradient(
135deg,
var(--rocketbot-red) 0%,
var(--rocketbot-dark) 100%
);
}
.feature-rocketbot-title {
font-size: 1.8rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
}
.feature-rocketbot-description {
color: var(--color-dark-gray);
line-height: 1.8;
font-size: 1.05rem;
}
/* Beneficios RPA Cards */
.beneficio-rpa-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
position: relative;
}
.beneficio-rpa-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(227, 30, 36, 0.15);
border-color: var(--rocketbot-red);
}
.beneficio-number {
position: absolute;
top: 15px;
right: 15px;
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
color: var(--color-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 1.2rem;
}
.beneficio-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: var(--color-light-gray);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--rocketbot-red);
transition: all var(--transition-speed) ease;
}
.beneficio-rpa-card:hover .beneficio-icon {
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
color: var(--color-white);
transform: scale(1.1);
}
.beneficio-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
min-height: 50px;
}
.beneficio-description {
color: var(--color-dark-gray);
line-height: 1.6;
font-size: 0.95rem;
}
/* Acordeón Rocketbot */
.rocketbot-accordion-item {
border: 3px solid var(--color-light-gray);
border-radius: 16px;
margin-bottom: 1.5rem;
overflow: hidden;
transition: all var(--transition-speed) ease;
}
.rocketbot-accordion-item:hover {
border-color: var(--rocketbot-red);
box-shadow: 0 10px 30px rgba(227, 30, 36, 0.15);
}
.rocketbot-accordion-item .accordion-button {
font-weight: 700;
font-size: 1.3rem;
color: var(--color-primary);
background: var(--color-white);
padding: 1.8rem 2rem;
position: relative;
}
.rocketbot-accordion-item .accordion-button .accordion-number {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--rocketbot-red) 0%, #b71518 100%);
color: var(--color-white);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
margin-right: 1rem;
}
.rocketbot-accordion-item .accordion-button:not(.collapsed) {
background: linear-gradient(
135deg,
rgba(227, 30, 36, 0.1) 0%,
rgba(183, 21, 24, 0.1) 100%
);
color: var(--rocketbot-red);
}
.rocketbot-accordion-item .accordion-button i {
font-size: 1.8rem;
}
.rocketbot-accordion-item .accordion-body {
padding: 2.5rem;
}
.rocketbot-benefits-list {
list-style: none;
padding: 0;
margin: 0;
}
.rocketbot-benefits-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.8rem 0;
font-size: 1.05rem;
}
.rocketbot-benefits-list i {
color: var(--rocketbot-red);
font-size: 1.3rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.video-container-rocketbot {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
border: 3px solid var(--rocketbot-red);
}
.highlight-box-rocketbot {
background: linear-gradient(
135deg,
rgba(227, 30, 36, 0.1) 0%,
rgba(183, 21, 24, 0.1) 100%
);
padding: 1.5rem;
border-radius: 12px;
border-left: 4px solid var(--rocketbot-red);
display: flex;
gap: 1rem;
align-items: flex-start;
}
.highlight-box-rocketbot i {
font-size: 2rem;
color: var(--rocketbot-red);
flex-shrink: 0;
}
.highlight-box-rocketbot strong {
display: block;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
/* Alert Rocketbot */
.alert-rocketbot-info {
background: linear-gradient(
135deg,
rgba(227, 30, 36, 0.1) 0%,
rgba(183, 21, 24, 0.05) 100%
);
border: 2px solid var(--rocketbot-red);
padding: 1.5rem;
border-radius: 12px;
display: flex;
gap: 1rem;
align-items: flex-start;
}
.alert-rocketbot-info i {
font-size: 2rem;
color: var(--rocketbot-red);
flex-shrink: 0;
}
/* Icono grande */
.rocketbot-icon-large {
font-size: 6rem;
color: var(--rocketbot-red);
}
/* CTA Final */
.cta-rocketbot-box {
background: var(--color-white);
padding: 4rem 3rem;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
border: 3px solid var(--rocketbot-red);
}
.cta-rocketbot-icon {
font-size: 5rem;
color: var(--rocketbot-red);
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-rocketbot {
padding: 2rem 0;
}
.rocketbot-floating-badge {
font-size: 0.85rem;
padding: 1rem 1.3rem;
}
.rocketbot-feature-card {
padding: 2rem 1.5rem;
}
.beneficio-rpa-card {
padding: 2rem 1.5rem;
}
.rocketbot-accordion-item .accordion-button {
font-size: 1.1rem;
padding: 1.5rem 1rem;
}
.rocketbot-accordion-item .accordion-body {
padding: 1.5rem;
}
.stat-rocketbot .stat-number {
font-size: 3rem;
}
.cta-rocketbot-box {
padding: 2.5rem 2rem;
}
}
/* ============================================
cPanel
============================================ */
/* Colores cPanel */
:root {
--cpanel-orange: #ff6c2c;
--cpanel-dark: #2d3e50;
--cpanel-light: #f8f9fa;
}
/* Clases de colores */
.cpanel-orange {
color: var(--cpanel-orange);
}
.bg-cpanel-light {
background: var(--cpanel-light);
}
.bg-cpanel-gradient {
background: linear-gradient(135deg, var(--cpanel-orange) 0%, #e85a1f 100%);
}
/* Hero cPanel */
.hero-cpanel {
background: linear-gradient(135deg, #ffffff 0%, var(--cpanel-light) 100%);
padding: 4rem 0;
}
.cpanel-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(135deg, var(--cpanel-orange) 0%, #e85a1f 100%);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(255, 108, 44, 0.3);
}
.cpanel-badge i {
font-size: 1.5rem;
}
.hero-cpanel-subtitle {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
/* Botones cPanel */
.btn-cpanel-primary {
background: linear-gradient(135deg, var(--cpanel-orange) 0%, #e85a1f 100%);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-cpanel-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 108, 44, 0.4);
color: var(--color-white);
}
.btn-cpanel-outline {
border: 2px solid var(--cpanel-orange);
color: var(--cpanel-orange);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-cpanel-outline:hover {
background: var(--cpanel-orange);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(255, 108, 44, 0.3);
}
.btn-white-cpanel {
background: var(--color-white);
color: var(--cpanel-orange);
border: none;
font-weight: 700;
transition: all var(--transition-speed) ease;
}
.btn-white-cpanel:hover {
background: var(--cpanel-light);
color: var(--cpanel-orange);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.btn-cpanel-outline-white {
border: 2px solid var(--color-white);
color: var(--color-white);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-cpanel-outline-white:hover {
background: var(--color-white);
color: var(--cpanel-orange);
transform: translateY(-3px);
}
/* Feature Boxes */
.cpanel-feature-box {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
}
.cpanel-feature-box:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(255, 108, 44, 0.15);
border-color: var(--cpanel-orange);
}
.cpanel-feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--cpanel-orange) 0%, #e85a1f 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.cpanel-feature-box:hover .cpanel-feature-icon {
transform: scale(1.1) rotate(5deg);
}
.cpanel-feature-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.cpanel-feature-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Funcionalidades */
.funcionalidad-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(
135deg,
rgba(255, 108, 44, 0.1) 0%,
rgba(232, 90, 31, 0.1) 100%
);
color: var(--cpanel-orange);
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-weight: 600;
border: 2px solid var(--cpanel-orange);
}
.funcionalidad-badge i {
font-size: 1.2rem;
}
.funcionalidad-title {
font-size: 2rem;
font-weight: 800;
color: var(--color-primary);
line-height: 1.3;
}
.funcionalidad-description {
font-size: 1.1rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
.funcionalidad-list {
list-style: none;
padding: 0;
margin: 0;
}
.funcionalidad-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.8rem 0;
font-size: 1.05rem;
}
.funcionalidad-list i {
font-size: 1.4rem;
flex-shrink: 0;
margin-top: 0.2rem;
}
.funcionalidad-image {
position: relative;
}
.funcionalidad-image img {
border: 4px solid var(--cpanel-orange);
}
/* Beneficios Cards */
.beneficio-cpanel-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
}
.beneficio-cpanel-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(255, 108, 44, 0.15);
border-color: var(--cpanel-orange);
}
.beneficio-cpanel-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--cpanel-light);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--cpanel-orange);
transition: all var(--transition-speed) ease;
}
.beneficio-cpanel-card:hover .beneficio-cpanel-icon {
background: linear-gradient(135deg, var(--cpanel-orange) 0%, #e85a1f 100%);
color: var(--color-white);
transform: scale(1.1);
}
.beneficio-cpanel-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.beneficio-cpanel-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Estadísticas cPanel */
.stat-cpanel {
padding: 2rem;
}
.stat-cpanel-number {
font-size: 4rem;
font-weight: 800;
color: var(--cpanel-orange);
line-height: 1;
margin-bottom: 1rem;
}
.stat-cpanel-label {
font-size: 1.2rem;
font-weight: 600;
color: var(--color-dark-gray);
}
/* CTA Final */
.cta-cpanel-box {
padding: 4rem 3rem;
}
.cta-cpanel-icon {
font-size: 5rem;
color: var(--color-white);
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-cpanel {
padding: 2rem 0;
}
.funcionalidad-title {
font-size: 1.5rem;
}
.funcionalidad-description {
font-size: 1rem;
}
.cpanel-feature-box,
.beneficio-cpanel-card {
padding: 2rem 1.5rem;
}
.stat-cpanel-number {
font-size: 3rem;
}
.cta-cpanel-box {
padding: 2.5rem 2rem;
}
.funcionalidad-image img {
border-width: 2px;
}
}
/* ============================================
ACRONIS CYBER PROTECT
============================================ */
/* Colores Acronis */
:root {
--acronis-blue: #0b5cba;
--acronis-dark-blue: #073b7a;
--acronis-light-blue: #e6f2ff;
}
/* Clases de colores */
.acronis-blue {
color: var(--acronis-blue);
}
.bg-acronis-light {
background: var(--acronis-light-blue);
}
.bg-acronis-gradient {
background: linear-gradient(
135deg,
var(--acronis-blue) 0%,
var(--acronis-dark-blue) 100%
);
}
/* Hero Acronis */
.hero-acronis {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 4rem 0;
}
.acronis-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--acronis-blue) 0%,
var(--acronis-dark-blue) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(11, 92, 186, 0.3);
}
.acronis-badge i {
font-size: 1.5rem;
}
.hero-acronis-subtitle {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
/* Botones Acronis */
.btn-acronis-primary {
background: linear-gradient(
135deg,
var(--acronis-blue) 0%,
var(--acronis-dark-blue) 100%
);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-acronis-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(11, 92, 186, 0.4);
color: var(--color-white);
}
.btn-acronis-outline {
border: 2px solid var(--acronis-blue);
color: var(--acronis-blue);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-acronis-outline:hover {
background: var(--acronis-blue);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(11, 92, 186, 0.3);
}
.btn-white-acronis {
background: var(--color-white);
color: var(--acronis-blue);
border: none;
font-weight: 700;
transition: all var(--transition-speed) ease;
}
.btn-white-acronis:hover {
background: var(--acronis-light-blue);
color: var(--acronis-blue);
transform: translateY(-3px);
}
.btn-acronis-outline-white {
border: 2px solid var(--color-white);
color: var(--color-white);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-acronis-outline-white:hover {
background: var(--color-white);
color: var(--acronis-blue);
transform: translateY(-3px);
}
/* Características Cards */
.caracteristica-acronis-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
}
.caracteristica-acronis-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(11, 92, 186, 0.15);
border-color: var(--acronis-blue);
}
.caracteristica-acronis-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--acronis-blue) 0%,
var(--acronis-dark-blue) 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.caracteristica-acronis-card:hover .caracteristica-acronis-icon {
transform: scale(1.1) rotate(5deg);
}
.caracteristica-acronis-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.caracteristica-acronis-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Acordeón Acronis */
.acronis-accordion-item {
border: 3px solid var(--color-light-gray);
border-radius: 16px;
margin-bottom: 1.5rem;
overflow: hidden;
transition: all var(--transition-speed) ease;
}
.acronis-accordion-item:hover {
border-color: var(--acronis-blue);
box-shadow: 0 10px 30px rgba(11, 92, 186, 0.15);
}
.acronis-accordion-item .accordion-button {
font-weight: 700;
font-size: 1.3rem;
color: var(--color-primary);
background: var(--color-white);
padding: 1.8rem 2rem;
}
.acronis-accordion-item .accordion-button:not(.collapsed) {
background: linear-gradient(
135deg,
rgba(11, 92, 186, 0.1) 0%,
rgba(7, 59, 122, 0.1) 100%
);
color: var(--acronis-blue);
}
.acronis-accordion-item .accordion-button i {
font-size: 1.8rem;
}
.acronis-accordion-item .accordion-body {
padding: 2.5rem;
}
.acronis-feature-badge {
background: var(--acronis-light-blue);
padding: 1rem 1.5rem;
border-radius: 12px;
border-left: 4px solid var(--acronis-blue);
display: flex;
align-items: center;
gap: 1rem;
}
.acronis-feature-badge i {
color: var(--acronis-blue);
font-size: 1.5rem;
flex-shrink: 0;
}
/* Tabs Acronis */
.acronis-tabs {
background: var(--color-white);
padding: 1rem;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
justify-content: center;
gap: 1rem;
}
.acronis-tabs .nav-link {
background: var(--color-white) !important;
border: 3px solid var(--acronis-blue) !important;
color: #1a1a1a !important; /* NEGRO FORZADO con !important */
font-weight: 700 !important;
padding: 1.2rem 2.5rem;
border-radius: 12px;
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0.25rem;
box-shadow: 0 4px 15px rgba(11, 92, 186, 0.15);
}
.acronis-tabs .nav-link i {
font-size: 1.3rem;
font-weight: bold;
color: var(--acronis-blue) !important; /* Iconos azules FORZADOS */
}
.acronis-tabs .nav-link:hover {
background: var(--acronis-blue) !important;
border-color: var(--acronis-blue) !important;
color: var(--color-white) !important; /* Blanco al hover */
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(11, 92, 186, 0.4);
}
.acronis-tabs .nav-link:hover i {
color: var(--color-white) !important; /* Iconos blancos al hover */
}
.acronis-tabs .nav-link.active {
background: linear-gradient(
135deg,
var(--acronis-blue) 0%,
var(--acronis-dark-blue) 100%
) !important;
color: var(--color-white) !important; /* Blanco cuando está activo */
border-color: var(--acronis-dark-blue) !important;
box-shadow: 0 10px 35px rgba(11, 92, 186, 0.5);
transform: scale(1.05);
}
.acronis-tabs .nav-link.active i {
color: var(--color-white) !important; /* Iconos blancos cuando está activo */
}
.acronis-tab-content {
background: var(--color-white);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
margin-top: 1.5rem;
}
.acronis-tab-title {
font-size: 2rem;
font-weight: 800;
color: var(--color-primary);
}
/* Responsive Tabs */
@media (max-width: 992px) {
.acronis-tabs {
flex-direction: column;
}
.acronis-tabs .nav-link {
justify-content: center;
width: 100%;
}
}
@media (max-width: 768px) {
.acronis-tabs .nav-link {
padding: 1rem 1.5rem;
font-size: 0.95rem;
}
.acronis-tab-content {
padding: 2rem 1.5rem;
}
.acronis-tab-title {
font-size: 1.5rem;
}
}
/* Reconocimientos */
.reconocimiento-box {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
height: 100%;
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
text-align: center;
}
.reconocimiento-box:hover {
border-color: var(--acronis-blue);
box-shadow: 0 8px 25px rgba(11, 92, 186, 0.1);
transform: translateY(-5px);
}
.reconocimiento-text {
color: var(--color-dark-gray);
font-weight: 600;
margin: 0;
font-size: 0.95rem;
}
/* Servicios Cards */
.servicio-acronis-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
}
.servicio-acronis-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(11, 92, 186, 0.15);
border-color: var(--acronis-blue);
}
.servicio-acronis-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--acronis-light-blue);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--acronis-blue);
transition: all var(--transition-speed) ease;
}
.servicio-acronis-card:hover .servicio-acronis-icon {
background: linear-gradient(
135deg,
var(--acronis-blue) 0%,
var(--acronis-dark-blue) 100%
);
color: var(--color-white);
transform: scale(1.1);
}
.servicio-acronis-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.servicio-acronis-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Sistemas Cards */
.sistema-card {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
height: 100%;
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
}
.sistema-card:hover {
border-color: var(--acronis-blue);
box-shadow: 0 10px 30px rgba(11, 92, 186, 0.1);
}
.sistema-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.8rem;
}
.sistema-title i {
font-size: 1.8rem;
}
.sistema-list {
list-style: none;
padding: 0;
margin: 0;
}
.sistema-list li {
padding: 0.5rem 0;
color: var(--color-dark-gray);
border-bottom: 1px solid var(--color-light-gray);
}
.sistema-list li:last-child {
border-bottom: none;
}
/* CTA Final */
.cta-acronis-box {
padding: 4rem 3rem;
}
.cta-acronis-icon {
font-size: 5rem;
color: var(--color-white);
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 992px) {
.acronis-tabs {
flex-direction: column;
}
.acronis-tabs .nav-link {
justify-content: center;
}
}
@media (max-width: 768px) {
.hero-acronis {
padding: 2rem 0;
}
.caracteristica-acronis-card,
.servicio-acronis-card {
padding: 2rem 1.5rem;
}
.acronis-accordion-item .accordion-button {
font-size: 1.1rem;
padding: 1.5rem 1rem;
}
.acronis-accordion-item .accordion-body {
padding: 1.5rem;
}
.acronis-tab-content {
padding: 2rem 1.5rem;
}
.acronis-tab-title {
font-size: 1.5rem;
}
.cta-acronis-box {
padding: 2.5rem 2rem;
}
}
/* ============================================
MANAGEENGINE
============================================ */
/* Colores ManageEngine */
:root {
--me-rojo: #e53935;
--me-verde: #43a047;
--me-azul: #1e88e5;
--me-amarillo: #fdd835;
--me-gris: #37474f;
}
/* Gradiente de texto ManageEngine */
.manageengine-gradient-text {
background: linear-gradient(
135deg,
var(--me-rojo) 0%,
var(--me-verde) 25%,
var(--me-azul) 50%,
var(--me-amarillo) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.bg-manageengine-gradient {
background: linear-gradient(135deg, var(--me-azul) 0%, var(--me-gris) 100%);
}
/* Hero ManageEngine */
.hero-manageengine {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 4rem 0;
}
.manageengine-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--me-rojo) 0%,
var(--me-verde) 50%,
var(--me-azul) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(30, 136, 229, 0.3);
}
.manageengine-badge i {
font-size: 1.5rem;
}
.hero-manageengine-subtitle {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
/* Botones ManageEngine */
.btn-manageengine-primary {
background: linear-gradient(135deg, var(--me-azul) 0%, var(--me-gris) 100%);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-manageengine-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(30, 136, 229, 0.4);
color: var(--color-white);
}
.btn-manageengine-outline {
border: 2px solid var(--me-azul);
color: var(--me-azul);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-manageengine-outline:hover {
background: var(--me-azul);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(30, 136, 229, 0.3);
}
.btn-white-manageengine {
background: var(--color-white);
color: var(--me-azul);
border: none;
font-weight: 700;
transition: all var(--transition-speed) ease;
}
.btn-white-manageengine:hover {
background: var(--color-light-gray);
color: var(--me-azul);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.btn-manageengine-outline-white {
border: 2px solid var(--color-white);
color: var(--color-white);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-manageengine-outline-white:hover {
background: var(--color-white);
color: var(--me-azul);
transform: translateY(-3px);
}
/* Soluciones Cards */
.solucion-manageengine-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 3px solid transparent;
position: relative;
overflow: hidden;
}
.solucion-manageengine-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
transition: all var(--transition-speed) ease;
}
.solucion-manageengine-card.color-rojo::before {
background: var(--me-rojo);
}
.solucion-manageengine-card.color-verde::before {
background: var(--me-verde);
}
.solucion-manageengine-card.color-azul::before {
background: var(--me-azul);
}
.solucion-manageengine-card.color-amarillo::before {
background: var(--me-amarillo);
}
.solucion-manageengine-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.solucion-manageengine-card:hover::before {
height: 100%;
opacity: 0.05;
}
.solucion-manageengine-card.color-rojo:hover {
border-color: var(--me-rojo);
}
.solucion-manageengine-card.color-verde:hover {
border-color: var(--me-verde);
}
.solucion-manageengine-card.color-azul:hover {
border-color: var(--me-azul);
}
.solucion-manageengine-card.color-amarillo:hover {
border-color: var(--me-amarillo);
}
.solucion-manageengine-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.solucion-manageengine-card.color-rojo .solucion-manageengine-icon {
background: var(--me-rojo);
}
.solucion-manageengine-card.color-verde .solucion-manageengine-icon {
background: var(--me-verde);
}
.solucion-manageengine-card.color-azul .solucion-manageengine-icon {
background: var(--me-azul);
}
.solucion-manageengine-card.color-amarillo .solucion-manageengine-icon {
background: var(--me-amarillo);
}
.solucion-manageengine-card:hover .solucion-manageengine-icon {
transform: scale(1.1) rotate(5deg);
}
.solucion-manageengine-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1.5rem;
text-align: center;
}
.solucion-manageengine-list {
list-style: none;
padding: 0;
margin: 0;
}
.solucion-manageengine-list li {
padding: 0.6rem 0;
color: var(--color-dark-gray);
border-bottom: 1px solid var(--color-light-gray);
font-size: 0.95rem;
}
.solucion-manageengine-list li:last-child {
border-bottom: none;
}
/* Para Quién Cards */
.para-quien-card {
background: var(--color-white);
padding: 3rem 2.5rem;
border-radius: 20px;
height: 100%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: all var(--transition-speed) ease;
border-left: 5px solid var(--me-azul);
}
.para-quien-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}
.para-quien-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--me-azul) 0%, var(--me-gris) 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--color-white);
margin-bottom: 1.5rem;
}
.para-quien-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.para-quien-description {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
/* Control Cards */
.control-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}
.control-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}
.control-icon {
width: 70px;
height: 70px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--color-white);
margin-bottom: 1.5rem;
transition: all var(--transition-speed) ease;
}
.control-icon.color-rojo {
background: var(--me-rojo);
}
.control-icon.color-verde {
background: var(--me-verde);
}
.control-icon.color-azul {
background: var(--me-azul);
}
.control-icon.color-amarillo {
background: var(--me-amarillo);
}
.control-card:hover .control-icon {
transform: scale(1.1) rotate(5deg);
}
.control-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 1rem;
}
.control-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Tabs ManageEngine */
.manageengine-tabs {
background: var(--color-white);
padding: 1rem;
border-radius: 16px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
justify-content: center;
gap: 1rem;
}
.manageengine-tabs .nav-link {
background: var(--color-white) !important;
border: 3px solid var(--me-azul) !important;
color: #1a1a1a !important;
font-weight: 700 !important;
padding: 1.2rem 2rem;
border-radius: 12px;
transition: all var(--transition-speed) ease;
display: flex;
align-items: center;
gap: 0.7rem;
margin: 0.25rem;
box-shadow: 0 4px 15px rgba(30, 136, 229, 0.15);
}
.manageengine-tabs .nav-link i {
font-size: 1.3rem;
font-weight: bold;
color: var(--me-azul) !important;
}
.manageengine-tabs .nav-link:hover {
background: var(--me-azul) !important;
border-color: var(--me-azul) !important;
color: var(--color-white) !important;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(30, 136, 229, 0.4);
}
.manageengine-tabs .nav-link:hover i {
color: var(--color-white) !important;
}
.manageengine-tabs .nav-link.active {
background: linear-gradient(
135deg,
var(--me-azul) 0%,
var(--me-gris) 100%
) !important;
color: var(--color-white) !important;
border-color: var(--me-gris) !important;
box-shadow: 0 10px 35px rgba(30, 136, 229, 0.5);
transform: scale(1.05);
}
.manageengine-tabs .nav-link.active i {
color: var(--color-white) !important;
}
.manageengine-tab-content {
background: var(--color-white);
padding: 3rem;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
margin-top: 1.5rem;
}
.tab-manageengine-box {
text-align: center;
}
.tab-icon-manageengine {
width: 100px;
height: 100px;
margin: 0 auto 2rem;
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3.5rem;
color: var(--color-white);
}
.tab-icon-manageengine.color-rojo {
background: var(--me-rojo);
}
.tab-icon-manageengine.color-verde {
background: var(--me-verde);
}
.tab-icon-manageengine.color-azul {
background: var(--me-azul);
}
.tab-icon-manageengine.color-amarillo {
background: var(--me-amarillo);
}
.tab-manageengine-title {
font-size: 2rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 1rem;
}
/* Compromisos Boxes */
.compromiso-box {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
height: 100%;
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
text-align: center;
}
.compromiso-box:hover {
border-color: var(--me-azul);
box-shadow: 0 10px 30px rgba(30, 136, 229, 0.15);
transform: translateY(-5px);
}
.compromiso-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
background: linear-gradient(135deg, var(--me-azul) 0%, var(--me-gris) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--color-white);
}
.compromiso-box h5 {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.compromiso-box p {
color: var(--color-dark-gray);
font-size: 0.95rem;
line-height: 1.6;
margin: 0;
}
/* Carrusel de Logos */
.logo-reconocimiento {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--color-light-gray);
transition: all var(--transition-speed) ease;
}
.logo-reconocimiento:hover {
border-color: var(--me-azul);
box-shadow: 0 8px 25px rgba(30, 136, 229, 0.15);
transform: scale(1.05);
}
.logo-reconocimiento img {
max-height: 60px;
width: auto;
filter: grayscale(100%);
opacity: 0.7;
transition: all var(--transition-speed) ease;
}
.logo-reconocimiento:hover img {
filter: grayscale(0%);
opacity: 1;
}
#carouselLogos .carousel-control-prev-icon,
#carouselLogos .carousel-control-next-icon {
background-color: var(--me-azul);
border-radius: 50%;
padding: 20px;
}
/* CTA Final */
.cta-manageengine-box {
padding: 4rem 3rem;
}
.cta-manageengine-icon {
font-size: 5rem;
color: var(--color-white);
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 992px) {
.manageengine-tabs {
flex-direction: column;
}
.manageengine-tabs .nav-link {
justify-content: center;
width: 100%;
}
}
@media (max-width: 768px) {
.hero-manageengine {
padding: 2rem 0;
}
.solucion-manageengine-card,
.control-card {
padding: 2rem 1.5rem;
}
.para-quien-card {
padding: 2rem 1.5rem;
}
.manageengine-tabs .nav-link {
padding: 1rem 1.5rem;
font-size: 0.95rem;
}
.manageengine-tab-content {
padding: 2rem 1.5rem;
}
.tab-manageengine-title {
font-size: 1.5rem;
}
.tab-icon-manageengine {
width: 80px;
height: 80px;
font-size: 2.5rem;
}
.cta-manageengine-box {
padding: 2.5rem 2rem;
}
.logo-reconocimiento {
height: 100px;
padding: 1.5rem;
}
.logo-reconocimiento img {
max-height: 50px;
}
}
/* ============================================
FORTINET
============================================ */
/* Colores Fortinet */
:root {
--fortinet-red: #e02020;
--fortinet-dark: #1a1a1a;
--fortinet-gray: #4a4a4a;
--fortinet-light-gray: #f5f5f5;
}
/* Clases de colores */
.fortinet-red {
color: var(--fortinet-red);
}
.bg-fortinet-dark {
background: var(--fortinet-dark);
}
.bg-fortinet-gradient {
background: linear-gradient(
135deg,
var(--fortinet-red) 0%,
var(--fortinet-dark) 100%
);
}
/* Hero Fortinet */
.hero-fortinet {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 4rem 0;
}
.fortinet-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--fortinet-red) 0%,
var(--fortinet-dark) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(224, 32, 32, 0.3);
}
.fortinet-badge i {
font-size: 1.5rem;
}
.hero-fortinet-subtitle {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
.fortinet-video-container {
position: relative;
}
.fortinet-video-container iframe {
border: 4px solid var(--fortinet-red);
}
/* Botones Fortinet */
.btn-fortinet-primary {
background: linear-gradient(
135deg,
var(--fortinet-red) 0%,
var(--fortinet-dark) 100%
);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-fortinet-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(224, 32, 32, 0.4);
color: var(--color-white);
}
.btn-fortinet-outline {
border: 2px solid var(--fortinet-red);
color: var(--fortinet-red);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-fortinet-outline:hover {
background: var(--fortinet-red);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(224, 32, 32, 0.3);
}
.btn-white-fortinet {
background: var(--color-white);
color: var(--fortinet-red);
border: none;
font-weight: 700;
transition: all var(--transition-speed) ease;
}
.btn-white-fortinet:hover {
background: var(--fortinet-light-gray);
color: var(--fortinet-red);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.btn-fortinet-outline-white {
border: 2px solid var(--color-white);
color: var(--color-white);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-fortinet-outline-white:hover {
background: var(--color-white);
color: var(--fortinet-red);
transform: translateY(-3px);
}
/* Cards Flip - Plataformas */
.fortinet-flip-card {
background-color: transparent;
width: 100%;
height: 450px;
perspective: 1000px;
}
.fortinet-flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.fortinet-flip-card:hover .fortinet-flip-card-inner {
transform: rotateY(180deg);
}
.fortinet-flip-card-front,
.fortinet-flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.fortinet-flip-card-front {
background: linear-gradient(
135deg,
var(--fortinet-red) 0%,
var(--fortinet-dark) 100%
);
color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
}
.fortinet-flip-icon {
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--color-white);
margin-bottom: 2rem;
backdrop-filter: blur(10px);
}
.fortinet-flip-title {
font-size: 2rem;
font-weight: 800;
margin-bottom: 1rem;
}
.fortinet-flip-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 2rem;
}
.fortinet-flip-arrow {
font-size: 3rem;
opacity: 0.7;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
}
.fortinet-flip-card-back {
background: var(--color-white);
color: var(--fortinet-dark);
transform: rotateY(180deg);
padding: 3rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
border: 3px solid var(--fortinet-red);
}
.fortinet-flip-card-back h4 {
color: var(--fortinet-red);
font-weight: 700;
font-size: 1.5rem;
}
.fortinet-flip-list {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}
.fortinet-flip-list li {
padding: 0.5rem 0;
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1rem;
font-weight: 500;
}
.fortinet-flip-list i {
color: var(--fortinet-red);
font-size: 1.2rem;
flex-shrink: 0;
}
/* Innovación Cards */
.innovacion-fortinet-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 3px solid var(--color-light-gray);
text-align: center;
}
.innovacion-fortinet-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(224, 32, 32, 0.15);
border-color: var(--fortinet-red);
}
.innovacion-fortinet-icon {
width: 90px;
height: 90px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--fortinet-red) 0%,
var(--fortinet-dark) 100%
);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.innovacion-fortinet-card:hover .innovacion-fortinet-icon {
transform: scale(1.1) rotate(5deg);
}
.innovacion-fortinet-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.innovacion-fortinet-description {
color: var(--color-dark-gray);
line-height: 1.7;
font-size: 0.95rem;
}
/* Confianza Cards */
.confianza-fortinet-card {
background: var(--color-white);
padding: 3rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.confianza-fortinet-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(255, 255, 255, 0.1);
border-color: var(--fortinet-red);
}
.confianza-fortinet-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: var(--fortinet-red);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.confianza-fortinet-card:hover .confianza-fortinet-icon {
transform: scale(1.1) rotate(-5deg);
background: var(--color-white);
color: var(--fortinet-red);
}
.confianza-fortinet-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--fortinet-red);
margin-bottom: 1rem;
}
.confianza-fortinet-description {
color: var(--color-dark-gray);
line-height: 1.7;
}
/* Productos */
.categoria-productos {
margin-bottom: 3rem;
}
.categoria-productos-title {
font-size: 1.8rem;
font-weight: 800;
color: var(--fortinet-dark);
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--fortinet-red);
display: flex;
align-items: center;
gap: 1rem;
}
.categoria-productos-title i {
color: var(--fortinet-red);
font-size: 2rem;
}
.producto-fortinet-card {
background: var(--color-white);
padding: 2rem 1.5rem;
border-radius: 16px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.producto-fortinet-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(224, 32, 32, 0.15);
border-color: var(--fortinet-red);
}
.producto-fortinet-icon {
width: 60px;
height: 60px;
background: linear-gradient(
135deg,
var(--fortinet-red) 0%,
var(--fortinet-dark) 100%
);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--color-white);
margin-bottom: 1rem;
transition: all var(--transition-speed) ease;
}
.producto-fortinet-card:hover .producto-fortinet-icon {
transform: scale(1.1) rotate(5deg);
}
.producto-fortinet-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--fortinet-dark);
margin-bottom: 0.8rem;
}
.producto-fortinet-description {
font-size: 0.9rem;
color: var(--color-dark-gray);
line-height: 1.6;
margin: 0;
}
/* CTA Final */
.cta-fortinet-box {
padding: 4rem 3rem;
}
.cta-fortinet-icon {
font-size: 5rem;
color: var(--color-white);
margin-bottom: 2rem;
}
/* Responsive */
@media (max-width: 768px) {
.hero-fortinet {
padding: 2rem 0;
}
.fortinet-flip-card {
height: 400px;
}
.fortinet-flip-card-front,
.fortinet-flip-card-back {
padding: 2rem 1.5rem;
}
.fortinet-flip-icon {
width: 100px;
height: 100px;
font-size: 3rem;
margin-bottom: 1.5rem;
}
.fortinet-flip-title {
font-size: 1.5rem;
}
.fortinet-flip-subtitle {
font-size: 1rem;
}
.fortinet-flip-list li {
font-size: 0.9rem;
}
.innovacion-fortinet-card,
.confianza-fortinet-card {
padding: 2rem 1.5rem;
}
.innovacion-fortinet-icon {
width: 70px;
height: 70px;
font-size: 2.5rem;
}
.confianza-fortinet-icon {
width: 70px;
height: 70px;
font-size: 2rem;
}
.categoria-productos-title {
font-size: 1.4rem;
}
.producto-fortinet-card {
padding: 1.5rem 1rem;
}
.producto-fortinet-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.cta-fortinet-box {
padding: 2.5rem 2rem;
}
.fortinet-video-container iframe {
border-width: 2px;
}
}
/* Animación adicional para cards flip en móvil */
@media (max-width: 768px) {
.fortinet-flip-card {
height: auto;
min-height: 350px;
}
/* En móvil, mostrar el reverso al hacer clic */
.fortinet-flip-card.active .fortinet-flip-card-inner {
transform: rotateY(180deg);
}
}
/* Estados de hover mejorados */
.fortinet-flip-card-front::after {
content: "Click para ver más";
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
font-size: 0.85rem;
opacity: 0.7;
font-weight: 600;
}
@media (min-width: 769px) {
.fortinet-flip-card-front::after {
content: "Hover para ver más";
}
}
/* Efecto de brillo en iconos */
.producto-fortinet-icon::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.5s;
}
.producto-fortinet-card:hover .producto-fortinet-icon::before {
left: 100%;
}
/* ============================================
FOGATA BOT
============================================ */
/* Colores Fogata Bot */
:root {
--fogata-purple: #9f5dff;
--fogata-teal: #1dd5a2;
--fogata-dark: #1a1a2e;
--fogata-light: #f8f9fa;
}
/* Clases de colores */
.fogata-purple {
color: var(--fogata-purple);
}
.fogata-teal {
color: var(--fogata-teal);
}
.bg-fogata-dark {
background: var(--fogata-dark);
}
.bg-fogata-gradient {
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
}
/* Hero Fogata Bot */
.hero-fogata-bot {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
padding: 4rem 0;
}
.fogata-badge {
display: inline-flex;
align-items: center;
gap: 0.8rem;
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
color: var(--color-white);
padding: 0.8rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 8px 20px rgba(159, 93, 255, 0.3);
}
.fogata-badge i {
font-size: 1.5rem;
}
.hero-fogata-subtitle {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
.fogata-video-container {
position: relative;
}
.fogata-video-container iframe {
border: 4px solid var(--fogata-teal);
border-radius: 16px;
}
/* Botones Fogata Bot */
.btn-fogata-primary {
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
color: var(--color-white);
border: none;
transition: all var(--transition-speed) ease;
}
.btn-fogata-primary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(159, 93, 255, 0.4);
color: var(--color-white);
}
.btn-fogata-outline {
border: 2px solid var(--fogata-purple);
color: var(--fogata-purple);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-fogata-outline:hover {
background: var(--fogata-purple);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(159, 93, 255, 0.3);
}
.btn-fogata-white {
background: var(--color-white);
color: var(--fogata-purple);
border: none;
font-weight: 700;
transition: all var(--transition-speed) ease;
}
.btn-fogata-white:hover {
background: var(--fogata-light);
color: var(--fogata-teal);
transform: translateY(-3px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.btn-fogata-outline-white {
border: 2px solid var(--color-white);
color: var(--color-white);
background: transparent;
transition: all var(--transition-speed) ease;
}
.btn-fogata-outline-white:hover {
background: var(--color-white);
color: var(--fogata-purple);
transform: translateY(-3px);
}
/* Canales Integrados */
.canal-fogata-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 20px;
height: 100%;
transition: all var(--transition-speed) ease;
border: 2px solid var(--color-light-gray);
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.canal-fogata-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(159, 93, 255, 0.15);
border-color: var(--fogata-purple);
}
.canal-fogata-icon {
width: 100px;
height: 100px;
margin: 0 auto 1.5rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.canal-fogata-icon.whatsapp {
background: #25d366;
}
.canal-fogata-icon.facebook {
background: #1877f2;
}
.canal-fogata-icon.instagram {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.canal-fogata-icon.telegram {
background: #0088cc;
}
.canal-fogata-icon.email {
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
}
.canal-fogata-icon.sms {
background: #ff6b35;
}
.canal-fogata-card:hover .canal-fogata-icon {
transform: scale(1.15) rotate(5deg);
}
.canal-fogata-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.canal-fogata-description {
color: var(--color-dark-gray);
font-size: 0.95rem;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.canal-fogata-image {
width: 100%;
height: 200px;
background: var(--fogata-light);
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-speed) ease;
}
.canal-fogata-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-speed) ease;
}
.canal-fogata-card:hover .canal-fogata-image img {
transform: scale(1.05);
}
/* Solución Fogata */
.solucion-fogata-image {
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.beneficios-fogata {
margin-top: 2rem;
}
.beneficio-fogata-item {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
background: var(--fogata-light);
border-radius: 16px;
border-left: 4px solid var(--fogata-teal);
transition: all var(--transition-speed) ease;
}
.beneficio-fogata-item:hover {
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
color: var(--color-white);
transform: translateX(10px);
}
.beneficio-fogata-item:hover .beneficio-fogata-title,
.beneficio-fogata-item:hover .text-muted {
color: var(--color-white);
}
.beneficio-fogata-icon {
font-size: 2rem;
color: var(--fogata-teal);
flex-shrink: 0;
margin-top: 0.3rem;
}
.beneficio-fogata-item:hover .beneficio-fogata-icon {
color: var(--color-white);
}
.beneficio-fogata-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.3rem;
}
/* Cobertura Fogata */
.cobertura-fogata-card {
background: var(--color-white);
padding: 3.5rem 3rem;
border-radius: 25px;
text-align: center;
border: 2px solid var(--fogata-purple);
box-shadow: 0 10px 40px rgba(159, 93, 255, 0.1);
transition: all var(--transition-speed) ease;
}
.cobertura-fogata-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 60px rgba(159, 93, 255, 0.2);
}
.cobertura-fogata-icon {
font-size: 4rem;
color: var(--fogata-teal);
margin-bottom: 1.5rem;
}
.cobertura-fogata-title {
font-size: 2rem;
font-weight: 800;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.cobertura-fogata-subtitle {
font-size: 1.3rem;
color: var(--fogata-purple);
font-weight: 600;
}
.cobertura-fogata-description {
font-size: 1.05rem;
color: var(--color-dark-gray);
line-height: 1.8;
}
.cobertura-fogata-highlight {
font-size: 1.1rem;
color: var(--color-primary);
font-weight: 600;
padding: 1.5rem;
background: var(--fogata-light);
border-radius: 12px;
border-left: 4px solid var(--fogata-teal);
}
/* Ventajas Grid */
.ventaja-fogata-card {
background: linear-gradient(
135deg,
rgba(159, 93, 255, 0.05) 0%,
rgba(29, 213, 162, 0.05) 100%
);
padding: 2.5rem 2rem;
border-radius: 16px;
height: 100%;
text-align: center;
border: 2px solid var(--fogata-light);
transition: all var(--transition-speed) ease;
}
.ventaja-fogata-card:hover {
transform: translateY(-8px);
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
border-color: transparent;
color: var(--color-white);
}
.ventaja-fogata-icon {
width: 70px;
height: 70px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.ventaja-fogata-card:hover .ventaja-fogata-icon {
transform: scale(1.2) rotate(-5deg);
background: var(--color-white);
color: var(--fogata-purple);
}
.ventaja-fogata-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.ventaja-fogata-card:hover .ventaja-fogata-title {
color: var(--color-white);
}
.ventaja-fogata-description {
color: var(--color-dark-gray);
line-height: 1.6;
font-size: 0.95rem;
}
.ventaja-fogata-card:hover .ventaja-fogata-description {
color: rgba(255, 255, 255, 0.9);
}
/* Características */
.caracteristica-fogata-card {
background: var(--color-white);
padding: 2.5rem 2rem;
border-radius: 16px;
height: 100%;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all var(--transition-speed) ease;
border: 2px solid transparent;
}
.caracteristica-fogata-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(159, 93, 255, 0.2);
border-color: var(--fogata-teal);
}
.caracteristica-fogata-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(
135deg,
var(--fogata-purple) 0%,
var(--fogata-teal) 100%
);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--color-white);
transition: all var(--transition-speed) ease;
}
.caracteristica-fogata-card:hover .caracteristica-fogata-icon {
transform: scale(1.15) rotate(10deg);
}
.caracteristica-fogata-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.8rem;
}
.caracteristica-fogata-description {
color: var(--color-dark-gray);
line-height: 1.7;
font-size: 0.95rem;
}
/* CTA Final */
.cta-fogata-box {
padding: 4rem 3rem;
}
.cta-fogata-icon {
font-size: 5rem;
color: var(--color-white);
margin-bottom: 2rem;
}
/* Animaciones especiales */
.hero-fogata-bot h1 {
animation: slideInDown 0.8s ease;
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.hero-fogata-bot {
padding: 2rem 0;
}
.canal-fogata-card {
padding: 2rem 1.5rem;
}
.canal-fogata-icon {
width: 80px;
height: 80px;
font-size: 2rem;
margin-bottom: 1rem;
}
.canal-fogata-image {
height: 150px;
}
.cobertura-fogata-card {
padding: 2.5rem 2rem;
}
.cobertura-fogata-title {
font-size: 1.5rem;
}
.cobertura-fogata-subtitle {
font-size: 1.1rem;
}
.beneficio-fogata-item {
gap: 1rem;
padding: 1rem;
border-left-width: 3px;
}
.beneficio-fogata-icon {
font-size: 1.5rem;
}
.caracteristica-fogata-card {
padding: 2rem 1.5rem;
}
.caracteristica-fogata-icon {
width: 70px;
height: 70px;
font-size: 2rem;
}
.ventaja-fogata-card {
padding: 2rem 1.5rem;
}
.ventaja-fogata-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
}
.cta-fogata-box {
padding: 2.5rem 2rem;
}
.cta-fogata-icon {
font-size: 3.5rem;
}
.fogata-video-container iframe {
border-width: 2px;
}
}
@media (max-width: 576px) {
.canal-fogata-card {
padding: 1.5rem 1rem;
}
.canal-fogata-title {
font-size: 1.1rem;
}
.canal-fogata-description {
font-size: 0.85rem;
}
.ventaja-fogata-title {
font-size: 1rem;
}
.hero-actions .btn {
width: 100%;
margin-bottom: 0.5rem;
}
}
/* Efecto de pulse en iconos de canales */
@keyframes pulse-fogata {
0% {
box-shadow: 0 0 0 0 rgba(159, 93, 255, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(159, 93, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(159, 93, 255, 0);
}
}
.canal-fogata-icon {
animation: pulse-fogata 2s infinite;
}
.canal-fogata-card:hover .canal-fogata-icon {
animation: none;
}
/* Tema claro para secciones alternas */
.seccion-solucion-fogata {
background: linear-gradient(
135deg,
rgba(159, 93, 255, 0.02) 0%,
rgba(29, 213, 162, 0.02) 100%
);
}
.seccion-caracteristicas-fogata {
background: linear-gradient(
135deg,
rgba(159, 93, 255, 0.03) 0%,
rgba(29, 213, 162, 0.03) 100%
);
}
/* ============================================
LOGIN / INGRESO ADMINISTRADOR
Paleta: #fefe01 | #000000 | #ffffff
Fuentes: Montserrat / Hind
============================================ */
/* Sección base */
.login-section {
min-height: calc(100vh - 160px);
display: flex;
align-items: stretch;
background: #f5f5f5;
padding: 0;
}
/* Wrapper dividido en dos paneles */
.login-wrapper {
display: flex;
width: 100%;
min-height: 100%;
}
/* ---- PANEL IZQUIERDO (decorativo) ---- */
.login-panel-left {
flex: 1 1 45%;
background: #000000;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 3rem 3rem 2rem;
position: relative;
overflow: hidden;
}
/* Efecto de fondo decorativo */
.login-panel-left::before {
content: "";
position: absolute;
top: -80px;
right: -80px;
width: 300px;
height: 300px;
background: rgba(254, 254, 1, 0.08);
border-radius: 50%;
}
.login-panel-left::after {
content: "";
position: absolute;
bottom: -60px;
left: -60px;
width: 220px;
height: 220px;
background: rgba(254, 254, 1, 0.06);
border-radius: 50%;
}
/* Logo en panel izquierdo */
.login-brand {
width: 100%;
text-align: center;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.login-logo {
max-height: 75px;
width: auto;
filter: brightness(0) invert(1); /* Logo blanco sobre negro */
}
/* Contenido central del panel izquierdo */
.login-panel-content {
text-align: center;
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.login-panel-icon {
font-size: 5rem;
color: #fefe01;
margin-bottom: 1.5rem;
animation: pulseIcon 2.5s ease-in-out infinite;
}
@keyframes pulseIcon {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.85;
}
}
.login-panel-left h2 {
color: #fefe01;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 1rem;
}
.login-panel-left p {
color: rgba(255, 255, 255, 0.75);
font-family: Hind, sans-serif;
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2rem;
max-width: 340px;
}
/* Lista de características */
.login-features {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 340px;
}
.login-features li {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.7rem 1rem;
margin-bottom: 0.5rem;
background: rgba(254, 254, 1, 0.07);
border-radius: 8px;
border-left: 3px solid #fefe01;
color: rgba(255, 255, 255, 0.9);
font-family: Hind, sans-serif;
font-size: 0.95rem;
transition:
background 0.3s ease,
transform 0.3s ease;
}
.login-features li:hover {
background: rgba(254, 254, 1, 0.15);
transform: translateX(5px);
}
.login-features li i {
color: #fefe01;
font-size: 1.1rem;
flex-shrink: 0;
}
/* Pie del panel izquierdo */
.login-panel-footer {
display: flex;
align-items: center;
gap: 0.6rem;
color: rgba(255, 255, 255, 0.4);
font-family: Hind, sans-serif;
font-size: 0.82rem;
position: relative;
z-index: 1;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
width: 100%;
justify-content: center;
}
.login-panel-footer i {
color: rgba(254, 254, 1, 0.5);
}
/* ---- PANEL DERECHO (formulario) ---- */
.login-panel-right {
flex: 1 1 55%;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
padding: 3rem 2rem;
}
.login-form-container {
width: 100%;
max-width: 420px;
}
/* Encabezado del formulario */
.login-form-header {
text-align: center;
margin-bottom: 2.5rem;
}
.login-avatar {
width: 90px;
height: 90px;
background: #000000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.8rem;
color: #fefe01;
margin: 0 auto 1.2rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
transition: transform 0.3s ease;
}
.login-avatar:hover {
transform: scale(1.08) rotate(-5deg);
}
.login-form-header h3 {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1.8rem;
color: #000000;
margin-bottom: 0.3rem;
}
.login-form-header p {
color: #666;
font-family: Hind, sans-serif;
font-size: 0.98rem;
}
/* Alertas */
.login-alert {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1.2rem;
border-radius: 8px;
margin-bottom: 1.5rem;
font-family: Hind, sans-serif;
font-size: 0.95rem;
font-weight: 600;
animation: slideDown 0.4s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.login-alert-error {
background: #fff0f0;
border-left: 4px solid #e53935;
color: #b71c1c;
}
.login-alert-error i {
color: #e53935;
font-size: 1.2rem;
}
.login-alert-success {
background: #f0fff4;
border-left: 4px solid #43a047;
color: #1b5e20;
}
.login-alert-success i {
color: #43a047;
font-size: 1.2rem;
}
/* Campos del formulario */
.login-field {
margin-bottom: 1.5rem;
}
.login-field label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.95rem;
color: #000000;
margin-bottom: 0.6rem;
user-select: none;
}
.login-field label i {
color: #000000;
font-size: 1rem;
}
.login-input-wrapper {
position: relative;
}
.login-input-wrapper input {
width: 100%;
padding: 14px 50px 14px 18px;
border: 1.5px solid #cccccc;
border-radius: 10px;
font-family: Hind, sans-serif;
font-size: 1rem;
color: #000000;
background: #fafafa;
transition:
border-color 0.3s ease,
box-shadow 0.3s ease,
background 0.3s ease;
box-sizing: border-box;
}
.login-input-wrapper input:focus {
outline: none;
border-color: #000000;
background: #ffffff;
box-shadow: 0 0 0 4px rgba(254, 254, 1, 0.4);
}
.login-input-wrapper input:focus + .login-input-icon {
color: #000000;
}
/* Ícono decorativo dentro del input */
.login-input-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: #aaaaaa;
font-size: 1.1rem;
pointer-events: none;
transition: color 0.3s ease;
}
/* Toggle de contraseña (pointer-events activo) */
.toggle-password {
pointer-events: all;
cursor: pointer;
transition:
color 0.3s ease,
transform 0.2s ease;
}
.toggle-password:hover {
color: #000000;
transform: translateY(-50%) scale(1.15);
}
/* Recordar sesión */
.login-remember {
margin-bottom: 1.8rem;
}
.login-checkbox-label {
display: flex;
align-items: center;
gap: 0.7rem;
cursor: pointer;
font-family: Hind, sans-serif;
font-size: 0.95rem;
color: #333333;
user-select: none;
}
.login-checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #000000;
cursor: pointer;
flex-shrink: 0;
}
/* Botón submit (extiende .custom-button) */
.login-submit {
width: 100%;
max-width: 100% !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.7rem;
font-size: 1.05rem !important;
padding: 15px 20px !important;
margin-top: 0 !important;
}
.login-btn-text,
.login-btn-loading {
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
/* Animación de spin para el loading */
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.login-spin {
animation: spin 0.8s linear infinite;
font-size: 1.1rem;
}
/* Pie del formulario */
.login-form-footer {
text-align: center;
margin-top: 1.8rem;
padding-top: 1.5rem;
border-top: 1px solid #eeeeee;
}
.login-form-footer a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #333333;
font-family: Hind, sans-serif;
font-size: 0.95rem;
text-decoration: none;
transition: color 0.3s ease;
}
.login-form-footer a:hover {
color: #000000;
text-decoration: underline;
}
.login-form-footer a i {
font-size: 1rem;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 900px) {
.login-wrapper {
flex-direction: column;
}
.login-panel-left {
flex: none;
padding: 2.5rem 2rem 2rem;
min-height: auto;
}
.login-panel-left::before,
.login-panel-left::after {
display: none;
}
.login-panel-icon {
font-size: 3.5rem;
}
.login-panel-left h2 {
font-size: 1.3rem;
}
.login-panel-left p {
font-size: 0.9rem;
}
.login-features li {
font-size: 0.9rem;
padding: 0.6rem 0.8rem;
}
.login-panel-right {
flex: none;
padding: 2.5rem 1.5rem 3rem;
}
}
@media (max-width: 480px) {
.login-panel-left {
padding: 2rem 1.5rem 1.5rem;
}
.login-panel-icon {
font-size: 2.8rem;
margin-bottom: 1rem;
}
.login-panel-left h2 {
font-size: 1.15rem;
}
.login-features {
display: none; /* En móvil muy pequeño, ocultar la lista para simplificar */
}
.login-form-container {
max-width: 100%;
}
.login-avatar {
width: 75px;
height: 75px;
font-size: 2.2rem;
}
.login-form-header h3 {
font-size: 1.5rem;
}
.login-input-wrapper input {
padding: 12px 46px 12px 14px;
font-size: 0.95rem;
}
}
/* ============================================
REGISTRO - EXTENSIÓN DEL LOGIN
============================================ */
/* Contenedor del registro (más ancho que el login) */
.registro-form-container {
max-width: 580px;
}
/* ---- Indicador de pasos ---- */
.registro-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: 2.5rem;
padding: 1.2rem 0;
border-bottom: 1px solid #eeeeee;
}
.registro-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
position: relative;
transition: all 0.3s ease;
}
.registro-step-circle {
width: 44px;
height: 44px;
border-radius: 50%;
background: #e0e0e0;
color: #999999;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.registro-step span {
font-family: Hind, sans-serif;
font-size: 0.75rem;
color: #999999;
font-weight: 600;
white-space: nowrap;
transition: color 0.3s ease;
}
/* Paso activo */
.registro-step.active .registro-step-circle {
background: #000000;
color: #fefe01;
border-color: #fefe01;
box-shadow: 0 0 0 4px rgba(254, 254, 1, 0.25);
transform: scale(1.1);
}
.registro-step.active span {
color: #000000;
font-weight: 700;
}
/* Paso completado */
.registro-step.done .registro-step-circle {
background: #fefe01;
color: #000000;
border-color: #000000;
}
.registro-step.done span {
color: #555555;
}
/* Línea separadora entre pasos */
.registro-step-line {
flex: 1;
height: 2px;
background: #e0e0e0;
margin: 0 0.5rem;
margin-bottom: 1.4rem;
max-width: 60px;
transition: background 0.3s ease;
}
/* ---- Título de cada paso ---- */
.registro-paso-titulo {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1.05rem;
color: #000000;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
border-bottom: 2px solid #fefe01;
}
.registro-paso-titulo i {
font-size: 1.2rem;
color: #000000;
}
/* ---- Grid de 2 columnas para nombres ---- */
.registro-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1.2rem;
}
/* ---- Navegación entre pasos ---- */
.registro-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.8rem;
padding-top: 1.5rem;
border-top: 1px solid #eeeeee;
}
.registro-btn-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: transparent;
border: 1.5px solid #cccccc;
color: #555555;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.95rem;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.registro-btn-back:hover {
border-color: #000000;
color: #000000;
background: #f5f5f5;
transform: translateX(-3px);
}
.registro-btn-next {
margin: 0 !important;
padding: 10px 24px !important;
font-size: 0.95rem !important;
min-width: unset !important;
max-width: unset !important;
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
}
/* ---- Campo requerido asterisco ---- */
.campo-requerido {
color: #e53935;
font-size: 0.85rem;
margin-left: 2px;
}
/* ---- Barra de fuerza de contraseña ---- */
.pass-strength-bar {
height: 5px;
background: #e0e0e0;
border-radius: 4px;
margin-top: 0.6rem;
overflow: hidden;
}
.pass-strength-fill {
height: 100%;
width: 0%;
border-radius: 4px;
transition:
width 0.4s ease,
background-color 0.4s ease;
}
.pass-strength-text {
font-family: Hind, sans-serif;
font-size: 0.82rem;
font-weight: 600;
display: block;
margin-top: 0.3rem;
min-height: 1.2rem;
transition: color 0.3s ease;
}
/* ---- Mensaje de coincidencia ---- */
.pass-match-text {
font-family: Hind, sans-serif;
font-size: 0.82rem;
font-weight: 600;
display: block;
margin-top: 0.4rem;
min-height: 1.2rem;
transition: color 0.3s ease;
}
/* ---- Input con error ---- */
.login-input-wrapper input.input-error {
border-color: #e53935;
background: #fff5f5;
box-shadow: 0 0 0 3px rgba(229, 57, 53, 0.15);
animation: shakeInput 0.4s ease;
}
@keyframes shakeInput {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-6px);
}
40% {
transform: translateX(6px);
}
60% {
transform: translateX(-4px);
}
80% {
transform: translateX(4px);
}
}
/* ---- Toast de validación ---- */
.registro-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(20px);
background: #000000;
color: #fefe01;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.95rem;
padding: 12px 28px;
border-radius: 50px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
z-index: 9999;
white-space: nowrap;
}
.registro-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---- Responsive ---- */
@media (max-width: 900px) {
.registro-form-container {
max-width: 100%;
}
}
@media (max-width: 600px) {
.registro-grid-2 {
grid-template-columns: 1fr;
gap: 0;
}
.registro-steps {
gap: 0;
}
.registro-step-circle {
width: 36px;
height: 36px;
font-size: 1rem;
}
.registro-step span {
font-size: 0.68rem;
}
.registro-step-line {
max-width: 30px;
}
.registro-nav {
flex-direction: column;
gap: 0.8rem;
}
.registro-btn-back,
.registro-btn-next,
.login-submit {
width: 100% !important;
justify-content: center;
}
.registro-toast {
width: 90%;
text-align: center;
white-space: normal;
font-size: 0.88rem;
padding: 10px 20px;
}
}
/* =============================================
PANEL DE ADMINISTRACIÓN - GME
Paleta: #fefe01 | #000000 | #ffffff | #f5f5f5
Fuentes: Montserrat / Hind
============================================= */
/* ---- Reset body para admin ---- */
.admin-body {
background: #f0f0f0;
margin: 0;
padding: 0;
font-family: Hind, sans-serif;
}
/* =============================================
NAVBAR ADMIN
============================================= */
.navbar-admin {
position: sticky;
top: 0;
z-index: 1050;
background: #000000;
border-bottom: 3px solid #fefe01;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.navbar-admin-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 2rem;
gap: 1rem;
flex-wrap: wrap;
}
/* --- Brand / Logo --- */
.navbar-admin-brand {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
.navbar-admin-logo-link {
display: flex;
align-items: center;
}
.navbar-admin-logo {
height: 48px;
width: auto;
filter: brightness(0) invert(1);
transition: opacity 0.3s ease;
}
.navbar-admin-logo:hover {
opacity: 0.8;
}
.navbar-admin-title-group {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.navbar-admin-title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.95rem;
color: #fefe01;
letter-spacing: 0.03em;
}
.navbar-admin-page {
font-family: Hind, sans-serif;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
gap: 0.3rem;
}
.navbar-admin-page i {
font-size: 0.7rem;
}
/* --- Saludo usuario --- */
.navbar-admin-greeting {
display: flex;
align-items: center;
gap: 0.9rem;
flex: 1;
justify-content: center;
}
.navbar-admin-avatar {
width: 44px;
height: 44px;
background: #fefe01;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4rem;
color: #000000;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.navbar-admin-avatar:hover {
transform: scale(1.1) rotate(-5deg);
}
.navbar-admin-user-info {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.navbar-admin-saludo {
font-family: Hind, sans-serif;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
.navbar-admin-nombre {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1rem;
color: #ffffff;
}
/* Badges de rol */
.admin-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 2px 10px;
border-radius: 50px;
font-family: Hind, sans-serif;
font-size: 0.72rem;
font-weight: 700;
margin-top: 2px;
width: fit-content;
letter-spacing: 0.03em;
}
.badge-admin {
background: #fefe01;
color: #000000;
}
.badge-editor {
background: #e3f2fd;
color: #1565c0;
}
.badge-soporte {
background: #e8f5e9;
color: #2e7d32;
}
.badge-usuario {
background: #f5f5f5;
color: #555555;
}
/* --- Botones de acción --- */
.navbar-admin-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.btn-admin-action {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-radius: 8px;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.25s ease;
white-space: nowrap;
}
.btn-admin-action:hover,
.btn-admin-action.active {
background: #fefe01;
color: #000000;
border-color: #fefe01;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(254, 254, 1, 0.3);
text-decoration: none;
}
.btn-admin-logout {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border-radius: 8px;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.85rem;
color: #ffffff;
text-decoration: none;
background: rgba(229, 57, 53, 0.2);
border: 1px solid rgba(229, 57, 53, 0.4);
transition: all 0.25s ease;
white-space: nowrap;
}
.btn-admin-logout:hover {
background: #e53935;
color: #ffffff;
border-color: #e53935;
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(229, 57, 53, 0.35);
text-decoration: none;
}
/* =============================================
MAIN / CONTENIDO
============================================= */
.admin-main {
padding: 2rem 0 4rem;
}
.admin-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Barra de bienvenida */
.admin-welcome-bar {
display: flex;
align-items: center;
justify-content: space-between;
background: #000000;
border-radius: 16px;
padding: 1.8rem 2.5rem;
margin-bottom: 2.5rem;
border-left: 5px solid #fefe01;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.admin-welcome-title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1.9rem;
color: #fefe01;
margin: 0 0 0.3rem;
display: flex;
align-items: center;
gap: 0.7rem;
}
.admin-welcome-subtitle {
font-family: Hind, sans-serif;
font-size: 1rem;
color: rgba(255, 255, 255, 0.65);
margin: 0;
}
.admin-welcome-date {
display: flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.5);
font-family: Hind, sans-serif;
font-size: 0.9rem;
white-space: nowrap;
}
/* Etiquetas de sección */
.admin-section-label {
display: flex;
align-items: center;
gap: 0.6rem;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1rem;
color: #000000;
margin-bottom: 1.2rem;
padding-bottom: 0.7rem;
border-bottom: 2px solid #fefe01;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.admin-section-label i {
font-size: 1.1rem;
color: #000000;
}
/* =============================================
CARDS PRINCIPALES (Casos de éxito / Blog)
============================================= */
.admin-main-card {
display: flex;
align-items: center;
gap: 1.5rem;
background: #ffffff;
border-radius: 16px;
padding: 2rem 1.8rem;
text-decoration: none;
border: 2px solid #eeeeee;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
}
.admin-main-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
transition: width 0.3s ease;
}
.admin-card-casos::before {
background: #fefe01;
}
.admin-card-blog::before {
background: #000000;
}
.admin-main-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
border-color: #fefe01;
text-decoration: none;
}
.admin-main-card:hover::before {
width: 100%;
opacity: 0.04;
}
.admin-main-card-icon {
width: 80px;
height: 80px;
background: #000000;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.4rem;
color: #fefe01;
flex-shrink: 0;
transition: all 0.3s ease;
}
.admin-main-card:hover .admin-main-card-icon {
transform: scale(1.1) rotate(-5deg);
background: #fefe01;
color: #000000;
}
.admin-main-card-body {
flex: 1;
}
.admin-main-card-title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1.4rem;
color: #000000;
margin-bottom: 0.4rem;
}
.admin-main-card-desc {
font-family: Hind, sans-serif;
font-size: 0.97rem;
color: #555555;
margin-bottom: 1rem;
line-height: 1.6;
}
.admin-main-card-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.admin-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #f5f5f5;
color: #333333;
font-family: Hind, sans-serif;
font-size: 0.82rem;
font-weight: 600;
padding: 4px 12px;
border-radius: 50px;
border: 1px solid #e0e0e0;
transition: all 0.25s ease;
}
.admin-main-card:hover .admin-tag {
background: #fefe01;
color: #000000;
border-color: #fefe01;
}
.admin-main-card-arrow {
font-size: 2rem;
color: #cccccc;
flex-shrink: 0;
transition: all 0.3s ease;
}
.admin-main-card:hover .admin-main-card-arrow {
color: #fefe01;
transform: translateX(5px) scale(1.1);
}
/* =============================================
CARDS DE SERVICIOS (Banners)
============================================= */
.admin-service-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.7rem;
padding: 1.8rem 1rem;
background: #ffffff;
border-radius: 14px;
border: 2px solid #eeeeee;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
text-decoration: none;
transition: all 0.3s ease;
height: 100%;
min-height: 160px;
}
.admin-service-card:hover {
background: #000000;
border-color: #fefe01;
transform: translateY(-6px);
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
text-decoration: none;
}
.admin-service-icon {
width: 58px;
height: 58px;
background: #fefe01;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: #000000;
transition: all 0.3s ease;
}
.admin-service-card:hover .admin-service-icon {
background: #fefe01;
transform: scale(1.15) rotate(5deg);
}
.admin-service-name {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.88rem;
color: #000000;
line-height: 1.3;
transition: color 0.3s ease;
}
.admin-service-card:hover .admin-service-name {
color: #ffffff;
}
.admin-service-action {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-family: Hind, sans-serif;
font-size: 0.78rem;
font-weight: 600;
color: #888888;
background: #f5f5f5;
padding: 3px 10px;
border-radius: 50px;
transition: all 0.3s ease;
}
.admin-service-card:hover .admin-service-action {
background: #fefe01;
color: #000000;
}
/* =============================================
RESPONSIVE
============================================= */
@media (max-width: 991px) {
.navbar-admin-inner {
padding: 0.7rem 1.2rem;
gap: 0.7rem;
}
.navbar-admin-greeting {
order: 3;
flex-basis: 100%;
justify-content: flex-start;
padding: 0.5rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-admin-title-group {
display: none;
}
.admin-welcome-bar {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.admin-container {
padding: 0 1rem;
}
.navbar-admin-inner {
flex-wrap: wrap;
}
.btn-admin-action span,
.btn-admin-logout span {
display: none;
}
.btn-admin-action,
.btn-admin-logout {
padding: 0.5rem 0.7rem;
}
.admin-welcome-title {
font-size: 1.4rem;
}
.admin-main-card {
flex-direction: column;
text-align: center;
padding: 1.5rem;
}
.admin-main-card-actions {
justify-content: center;
}
.admin-main-card-arrow {
display: none;
}
.admin-main-card::before {
width: 100%;
height: 4px;
top: 0;
left: 0;
}
}
@media (max-width: 480px) {
.navbar-admin-logo {
height: 36px;
}
.navbar-admin-avatar {
width: 36px;
height: 36px;
font-size: 1.1rem;
}
.navbar-admin-nombre {
font-size: 0.88rem;
}
.admin-main-card-icon {
width: 65px;
height: 65px;
font-size: 2rem;
}
}
/* =============================================
CONTACTOS
============================================= */
/* Cards de contadores en indexadmin */
.admin-contact-card {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 1.5rem 1.8rem;
border-radius: 14px;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
height: 100%;
border: 2px solid transparent;
}
.admin-contact-card:hover {
transform: translateY(-5px);
text-decoration: none;
}
.admin-contact-total {
background: #000000;
border-color: #fefe01;
}
.admin-contact-total .admin-contact-icon {
color: #fefe01;
}
.admin-contact-total .admin-contact-count,
.admin-contact-total .admin-contact-label {
color: #ffffff;
}
.admin-contact-total:hover {
box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25);
}
.admin-contact-pendiente {
background: #ffffff;
border-color: #fb8c00;
}
.admin-contact-pendiente .admin-contact-icon {
color: #fb8c00;
}
.admin-contact-pendiente:hover {
box-shadow: 0 14px 36px rgba(251, 140, 0, 0.2);
border-color: #fb8c00;
}
.admin-contact-aprobado {
background: #ffffff;
border-color: #43a047;
}
.admin-contact-aprobado .admin-contact-icon {
color: #43a047;
}
.admin-contact-aprobado:hover {
box-shadow: 0 14px 36px rgba(67, 160, 71, 0.2);
border-color: #43a047;
}
.admin-contact-descartado {
background: #ffffff;
border-color: #e53935;
}
.admin-contact-descartado .admin-contact-icon {
color: #e53935;
}
.admin-contact-descartado:hover {
box-shadow: 0 14px 36px rgba(229, 57, 53, 0.2);
border-color: #e53935;
}
.admin-contact-icon {
font-size: 2.2rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.admin-contact-card:hover .admin-contact-icon {
transform: scale(1.2) rotate(-5deg);
}
.admin-contact-info {
display: flex;
flex-direction: column;
flex: 1;
}
.admin-contact-count {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 2rem;
line-height: 1;
color: #000000;
}
.admin-contact-label {
font-family: Hind, sans-serif;
font-size: 0.88rem;
color: #666666;
font-weight: 600;
margin-top: 2px;
}
.admin-contact-arrow {
font-size: 1.5rem;
color: rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
}
.admin-contact-card:hover .admin-contact-arrow {
color: #fefe01;
transform: translateX(4px);
}
/* Punto rojo en pendientes con registros */
.admin-contact-badge-dot {
position: absolute;
top: 12px;
right: 12px;
width: 12px;
height: 12px;
background: #e53935;
border-radius: 50%;
animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.4);
opacity: 0.7;
}
}
/* ── Filtros en admin-contactos ── */
.contactos-filtros {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.contactos-filtro-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.3rem;
border-radius: 50px;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.88rem;
text-decoration: none;
border: 2px solid transparent;
transition: all 0.25s ease;
background: #ffffff;
color: #555555;
border-color: #e0e0e0;
}
.contactos-filtro-btn:hover {
transform: translateY(-2px);
text-decoration: none;
}
.contactos-filtro-btn.activo {
transform: translateY(-2px);
}
.contactos-filtro-count {
background: rgba(0, 0, 0, 0.08);
padding: 1px 8px;
border-radius: 50px;
font-size: 0.8rem;
}
.filtro-todos.activo {
background: #000000;
color: #fefe01;
border-color: #000000;
}
.filtro-pendiente.activo {
background: #fb8c00;
color: #ffffff;
border-color: #fb8c00;
}
.filtro-aprobado.activo {
background: #43a047;
color: #ffffff;
border-color: #43a047;
}
.filtro-descartado.activo {
background: #e53935;
color: #ffffff;
border-color: #e53935;
}
.filtro-todos:hover {
background: #000000;
color: #fefe01;
border-color: #000000;
}
.filtro-pendiente:hover {
background: #fb8c00;
color: #ffffff;
border-color: #fb8c00;
}
.filtro-aprobado:hover {
background: #43a047;
color: #ffffff;
border-color: #43a047;
}
.filtro-descartado:hover {
background: #e53935;
color: #ffffff;
border-color: #e53935;
}
/* ── Tabla de contactos ── */
.contactos-tabla-wrap {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
overflow-x: auto;
}
.contactos-tabla {
width: 100%;
border-collapse: collapse;
font-family: Hind, sans-serif;
font-size: 0.95rem;
}
.contactos-tabla thead tr {
background: #000000;
color: #fefe01;
}
.contactos-tabla thead th {
padding: 1rem 1.2rem;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.06em;
white-space: nowrap;
}
.contactos-tabla thead th i {
margin-right: 0.35rem;
}
.contactos-tabla tbody tr {
border-bottom: 1px solid #f0f0f0;
transition: background 0.2s ease;
cursor: pointer;
}
.contactos-tabla tbody tr:hover {
background: #fffde7;
}
.contactos-tabla tbody td {
padding: 0.9rem 1.2rem;
color: #333333;
vertical-align: middle;
}
.contacto-id {
font-weight: 700;
color: #999999 !important;
font-size: 0.85rem;
}
.contacto-fecha {
font-size: 0.85rem;
color: #888888 !important;
white-space: nowrap;
}
.contacto-servicio-tag {
background: #f5f5f5;
color: #333333;
padding: 3px 10px;
border-radius: 50px;
font-size: 0.82rem;
font-weight: 600;
white-space: nowrap;
}
/* Badges de estado */
.contacto-estado-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 4px 12px;
border-radius: 50px;
font-family: Montserrat, sans-serif;
font-size: 0.78rem;
font-weight: 700;
white-space: nowrap;
}
.estado-pendiente {
background: #fff3e0;
color: #e65100;
border: 1px solid #ffcc80;
}
.estado-aprobado {
background: #e8f5e9;
color: #1b5e20;
border: 1px solid #a5d6a7;
}
.estado-descartado {
background: #ffebee;
color: #b71c1c;
border: 1px solid #ef9a9a;
}
/* Botones de acción en tabla */
.contacto-acciones {
display: flex;
gap: 0.4rem;
align-items: center;
}
.btn-accion {
width: 34px;
height: 34px;
border-radius: 8px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.25s ease;
text-decoration: none;
}
.btn-ver {
background: #e3f2fd;
color: #1565c0;
}
.btn-editar {
background: #fff8e1;
color: #e65100;
}
.btn-estado {
background: #f3e5f5;
color: #6a1b9a;
}
.btn-eliminar {
background: #ffebee;
color: #b71c1c;
}
.btn-ver:hover {
background: #1565c0;
color: #ffffff;
transform: scale(1.1);
}
.btn-editar:hover {
background: #e65100;
color: #ffffff;
transform: scale(1.1);
text-decoration: none;
}
.btn-estado:hover {
background: #6a1b9a;
color: #ffffff;
transform: scale(1.1);
}
.btn-eliminar:hover {
background: #b71c1c;
color: #ffffff;
transform: scale(1.1);
}
/* Empty state */
.contactos-empty {
text-align: center;
padding: 5rem 2rem;
color: #aaaaaa;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.contactos-empty i {
font-size: 4rem;
display: block;
margin-bottom: 1rem;
}
.contactos-empty p {
font-family: Hind, sans-serif;
font-size: 1.1rem;
margin: 0;
}
/* ── Modales admin ── */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 2000;
align-items: center;
justify-content: center;
padding: 1rem;
backdrop-filter: blur(4px);
}
.modal-overlay.activo {
display: flex;
animation: fadeInModal 0.25s ease;
}
@keyframes fadeInModal {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-admin {
background: #ffffff;
border-radius: 20px;
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
animation: slideUpModal 0.3s ease;
}
.modal-admin-sm {
max-width: 420px;
}
@keyframes slideUpModal {
from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.modal-admin-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.3rem 1.8rem;
border-bottom: 2px solid #fefe01;
background: #000000;
border-radius: 20px 20px 0 0;
}
.modal-admin-header h4 {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 1.1rem;
color: #fefe01;
margin: 0;
display: flex;
align-items: center;
gap: 0.6rem;
}
.modal-danger-header {
border-bottom-color: #e53935;
}
.modal-danger-header h4 {
color: #ffffff;
}
.modal-admin-close {
background: rgba(255, 255, 255, 0.1);
border: none;
color: #ffffff;
width: 34px;
height: 34px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.2s ease;
}
.modal-admin-close:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
.modal-admin-body {
padding: 1.8rem;
}
.modal-admin-footer {
padding: 1.2rem 1.8rem;
border-top: 1px solid #eeeeee;
display: flex;
gap: 0.8rem;
justify-content: flex-end;
flex-wrap: wrap;
}
/* Detalle grid */
.detalle-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
}
.detalle-item {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.detalle-item-full {
grid-column: 1 / -1;
}
.detalle-label {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.78rem;
color: #888888;
text-transform: uppercase;
letter-spacing: 0.05em;
display: flex;
align-items: center;
gap: 0.4rem;
}
.detalle-valor {
font-family: Hind, sans-serif;
font-size: 1rem;
color: #222222;
}
.detalle-link {
color: #1565c0;
text-decoration: underline;
}
.detalle-mensaje {
background: #f5f5f5;
padding: 1rem;
border-radius: 10px;
line-height: 1.7;
border-left: 3px solid #fefe01;
white-space: pre-wrap;
}
/* Botones de modal */
.btn-whatsapp-modal {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #25d366;
color: #ffffff;
padding: 0.6rem 1.3rem;
border-radius: 10px;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-whatsapp-modal:hover {
background: #1ebe57;
color: #ffffff;
transform: translateY(-2px);
text-decoration: none;
}
.btn-accion-email {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #e3f2fd;
color: #1565c0;
padding: 0.6rem 1.3rem;
border-radius: 10px;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-accion-email:hover {
background: #1565c0;
color: #ffffff;
transform: translateY(-2px);
text-decoration: none;
}
.btn-accion-danger {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #b71c1c;
color: #ffffff;
padding: 0.6rem 1.3rem;
border-radius: 10px;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.25s ease;
}
.btn-accion-danger:hover {
background: #e53935;
color: #ffffff;
transform: translateY(-2px);
text-decoration: none;
}
/* Eliminar icono modal */
.eliminar-icon-wrap {
font-size: 3.5rem;
color: #e53935;
margin-bottom: 1rem;
}
/* Cambio de estado opciones */
.estado-opciones {
display: flex;
flex-direction: column;
gap: 0.7rem;
}
.estado-opcion {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.9rem 1.2rem;
border-radius: 10px;
cursor: pointer;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.25s ease;
border: 2px solid transparent;
}
.estado-opcion input[type="radio"] {
width: 18px;
height: 18px;
accent-color: #000000;
flex-shrink: 0;
}
.estado-opcion-pendiente {
background: #fff3e0;
color: #e65100;
border-color: #ffcc80;
}
.estado-opcion-aprobado {
background: #e8f5e9;
color: #1b5e20;
border-color: #a5d6a7;
}
.estado-opcion-descartado {
background: #ffebee;
color: #b71c1c;
border-color: #ef9a9a;
}
.estado-opcion:hover {
transform: translateX(5px);
}
/* ── Formulario editar contacto ── */
.admin-form-card {
background: #ffffff;
border-radius: 16px;
padding: 2.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid #eeeeee;
}
.admin-edit-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.admin-edit-field {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.admin-edit-field-full {
grid-column: 1 / -1;
}
.admin-edit-field label {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.88rem;
color: #000000;
display: flex;
align-items: center;
gap: 0.4rem;
}
.admin-edit-field input,
.admin-edit-field select,
.admin-edit-field textarea {
padding: 12px 16px;
border: 1.5px solid #cccccc;
border-radius: 10px;
font-family: Hind, sans-serif;
font-size: 1rem;
color: #000000;
background: #fafafa;
transition:
border-color 0.3s,
box-shadow 0.3s;
resize: vertical;
}
.admin-edit-field input:focus,
.admin-edit-field select:focus,
.admin-edit-field textarea:focus {
outline: none;
border-color: #000000;
box-shadow: 0 0 0 4px rgba(254, 254, 1, 0.35);
background: #ffffff;
}
.admin-edit-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #eeeeee;
flex-wrap: wrap;
}
.btn-accion-cancel {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #f5f5f5;
color: #555555;
padding: 12px 24px;
border-radius: 8px;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.25s ease;
border: 1.5px solid #e0e0e0;
}
.btn-accion-cancel:hover {
background: #e0e0e0;
color: #000000;
transform: translateY(-2px);
text-decoration: none;
}
/* =============================================
FOOTER ADMIN
============================================= */
.footer-admin {
background: #000000;
border-top: 3px solid #fefe01;
margin-top: auto;
padding: 1.5rem 0;
}
.footer-admin-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-admin-brand {
display: flex;
align-items: center;
gap: 0.8rem;
}
.footer-admin-logo {
height: 36px;
width: auto;
filter: brightness(0) invert(1);
opacity: 0.85;
}
.footer-admin-brand-text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.footer-admin-title {
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.88rem;
color: #fefe01;
}
.footer-admin-subtitle {
font-family: Hind, sans-serif;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.45);
}
/* Tech stack */
.footer-admin-dev {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.footer-admin-dev-label {
font-family: Hind, sans-serif;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
gap: 0.4rem;
}
.footer-admin-tech-stack {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
justify-content: center;
}
.footer-tech-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: rgba(254, 254, 1, 0.1);
color: #fefe01;
border: 1px solid rgba(254, 254, 1, 0.2);
padding: 3px 10px;
border-radius: 50px;
font-family: Hind, sans-serif;
font-size: 0.76rem;
font-weight: 600;
transition: all 0.25s ease;
}
.footer-tech-tag:hover {
background: #fefe01;
color: #000000;
transform: translateY(-2px);
}
/* Info del sistema */
.footer-admin-info {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.3rem;
}
.footer-admin-version,
.footer-admin-copy,
.footer-admin-session {
font-family: Hind, sans-serif;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.45);
display: flex;
align-items: center;
gap: 0.35rem;
}
.footer-admin-version i {
color: #fefe01;
}
.footer-admin-session i {
color: #43a047;
}
.footer-admin-session strong {
color: rgba(255, 255, 255, 0.75);
}
/* ── Responsive contactos y modales ── */
@media (max-width: 768px) {
.detalle-grid {
grid-template-columns: 1fr;
}
.admin-edit-grid {
grid-template-columns: 1fr;
}
.footer-admin-inner {
flex-direction: column;
text-align: center;
}
.footer-admin-info {
align-items: center;
}
.footer-admin-brand {
justify-content: center;
}
.modal-admin-footer {
justify-content: center;
}
.admin-edit-actions {
justify-content: center;
}
}
@media (max-width: 480px) {
.contactos-tabla {
font-size: 0.82rem;
}
.contactos-tabla thead th,
.contactos-tabla tbody td {
padding: 0.7rem 0.8rem;
}
.btn-accion {
width: 30px;
height: 30px;
font-size: 0.8rem;
}
.modal-admin-body {
padding: 1.2rem;
}
.admin-form-card {
padding: 1.5rem;
}
}
/* ── Botón descarga CV en tabla ── */
.btn-cv-download {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: #fff3e0;
color: #e65100;
padding: 4px 10px;
border-radius: 6px;
font-family: Hind, sans-serif;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
border: 1px solid #ffcc80;
transition: all 0.25s ease;
}
.btn-cv-download:hover {
background: #e65100;
color: #ffffff;
border-color: #e65100;
transform: translateY(-2px);
text-decoration: none;
}
/* ── Botón CV en modal ── */
.btn-cv-modal {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #fff3e0;
color: #e65100;
padding: 0.6rem 1.3rem;
border-radius: 10px;
font-family: Montserrat, sans-serif;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
border: 1.5px solid #ffcc80;
transition: all 0.25s ease;
}
.btn-cv-modal:hover {
background: #e65100;
color: #ffffff;
transform: translateY(-2px);
text-decoration: none;
}
/* ── CV no disponible ── */
.cv-no-disponible {
display: inline-flex;
align-items: center;
gap: 0.3rem;
color: #bbbbbb;
font-size: 0.85rem;
}
/* ── Banner CV actual en editar ── */
.cv-actual-banner {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
border-radius: 10px;
margin-bottom: 2rem;
font-family: Hind, sans-serif;
font-size: 0.95rem;
}
.cv-actual-banner i {
font-size: 2rem;
}
.cv-disponible {
background: #fff3e0;
color: #e65100;
border: 1.5px solid #ffcc80;
}
.cv-no-disponible-banner {
background: #ffebee;
color: #b71c1c;
border: 1.5px solid #ef9a9a;
}
.cv-download-link {
margin-left: 0.8rem;
background: #e65100;
color: #ffffff;
padding: 3px 12px;
border-radius: 6px;
font-size: 0.82rem;
font-weight: 700;
text-decoration: none;
transition: all 0.25s ease;
}
.cv-download-link:hover {
background: #bf360c;
color: #ffffff;
text-decoration: none;
}
/* ── Mensajes flash ── */
.admin-flash {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1rem 1.5rem;
border-radius: 10px;
margin-bottom: 1.5rem;
font-family: Montserrat, sans-serif;
font-weight: 600;
font-size: 0.95rem;
animation: fadeInModal 0.4s ease;
}
.admin-flash-success {
background: #e8f5e9;
color: #1b5e20;
border: 1.5px solid #a5d6a7;
}
.admin-flash-error {
background: #ffebee;
color: #b71c1c;
border: 1.5px solid #ef9a9a;
}
/* Dropdown con scroll cuando hay muchos ítems */
.dropdown-menu-custom {
max-height: 80vh;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #fefe01 #f0f0f0;
}
.dropdown-menu-custom::-webkit-scrollbar {
width: 5px;
}
.dropdown-menu-custom::-webkit-scrollbar-track {
background: #f0f0f0;
border-radius: 4px;
}
.dropdown-menu-custom::-webkit-scrollbar-thumb {
background: #fefe01;
border-radius: 4px;
}
/* Divider con color acorde */
.dropdown-menu-custom .dropdown-divider {
border-color: #e0e0e0;
margin: 4px 0;
}