/* assets/css/style.css - DISEÑO AZUL CORPORATIVO */
/* Variables CSS Corporativas */
:root {
--primary-color: #1E40AF;
--primary-hover: #1D4ED8;
--primary-light: #DBEAFE;
--secondary-color: #6b7280;
--success-color: #059669;
--danger-color: #dc2626;
--warning-color: #d97706;
--info-color: #0891b2;
--light-color: #f8fafc;
--dark-color: #1f2937;
--primary-gradient: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--border-radius: 12px;
--box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
--box-shadow-lg: 0 10px 25px rgba(30, 64, 175, 0.1);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Reset y Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--dark-color);
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
position: relative;
overflow-x: hidden;
}
/* Floating Dots Background */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(2px 2px at 20px 30px, rgba(30, 64, 175, 0.1), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(59, 130, 246, 0.1), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(30, 64, 175, 0.1), transparent),
radial-gradient(1px 1px at 130px 80px, rgba(59, 130, 246, 0.1), transparent);
background-repeat: repeat;
background-size: 150px 100px;
animation: floating-dots 20s linear infinite;
z-index: -1;
pointer-events: none;
}
@keyframes floating-dots {
0% { transform: translateX(0) translateY(0); }
100% { transform: translateX(-150px) translateY(-100px); }
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
}
/* Utilidades */
.min-vh-75 {
min-height: 75vh;
}
/* Shimmer Effect */
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
/* Corporate Pulse */
@keyframes corporate-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(30, 64, 175, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 0 10px rgba(30, 64, 175, 0);
transform: scale(1.05);
}
}
/* Header Styles con Glassmorphism */
.main-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(30, 64, 175, 0.1);
transition: var(--transition);
}
.main-header.scrolled {
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 8px 32px rgba(30, 64, 175, 0.1);
border-bottom: 1px solid rgba(30, 64, 175, 0.2);
}
/* Top Bar */
.top-bar {
background: var(--primary-gradient);
padding: 10px 0;
font-size: 0.875rem;
position: relative;
overflow: hidden;
}
.top-bar::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shimmer 3s infinite;
}
.top-bar-text {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: 0 4px;
background: var(--glass-bg);
color: #fff;
border-radius: 50%;
font-size: 0.875rem;
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
transition: var(--transition);
}
.social-link:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-2px) scale(1.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.user-link {
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
padding: 6px 12px;
border-radius: var(--border-radius);
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
transition: var(--transition);
font-weight: 500;
}
.user-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}
/* Navigation */
.navbar-brand .logo {
max-height: 45px;
width: auto;
filter: drop-shadow(0 2px 8px rgba(30, 64, 175, 0.3));
}
.logo-text {
font-size: 1.75rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
}
.logo-text::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
background-size: 200% 100%;
animation: shimmer 3s infinite;
z-index: -1;
}
.navbar-nav .nav-link {
padding: 14px 18px;
font-weight: 600;
color: var(--dark-color);
transition: var(--transition);
position: relative;
border-radius: var(--border-radius);
}
.navbar-nav .nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: var(--primary-gradient);
transition: var(--transition);
transform: translateX(-50%);
border-radius: 2px;
}
.navbar-nav .nav-link:hover {
color: var(--primary-color);
background: var(--primary-light);
}
.navbar-nav .nav-link:hover::before {
width: 80%;
}
.search-box .form-control {
border: 2px solid rgba(30, 64, 175, 0.1);
border-right: none;
border-radius: var(--border-radius) 0 0 var(--border-radius);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
transition: var(--transition);
}
.search-box .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.search-box .btn {
border: 2px solid var(--primary-color);
border-left: none;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
background: var(--primary-gradient);
color: white;
transition: var(--transition);
}
.search-box .btn:hover {
transform: scale(1.05);
box-shadow: var(--box-shadow-lg);
}
/* Hero Section Corporativo */
.hero-carousel-section {
background: var(--primary-gradient);
color: #fff;
height: 500px;
min-height: 500px;
position: relative;
overflow: hidden;
}
.hero-slide {
height: 500px;
position: relative;
/* display: flex; */
align-items: center;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-gradient);
opacity: 0.6;
z-index: 2;
}
.hero-content {
position: relative;
z-index: 3;
color: white;
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1.5rem;
line-height: 1.2;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
color: #dbeafe;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
display: inline-block;
padding: 0.5rem 1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: var(--border-radius);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}
.hero-subtitle::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
animation: shimmer 2s infinite;
}
.hero-description {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.95;
line-height: 1.6;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
max-width: 600px;
}
.hero-actions .btn {
padding: 15px 30px;
font-weight: 600;
border-radius: var(--border-radius);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.95rem;
margin-right: 1rem;
margin-bottom: 0.5rem;
position: relative;
overflow: hidden;
transition: var(--transition);
}
.hero-actions .btn-primary {
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
backdrop-filter: blur(10px);
}
.hero-actions .btn-primary:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.hero-actions .btn-outline-light {
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.5);
color: white;
position: relative;
overflow: hidden;
}
.hero-actions .btn-outline-light::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: left 0.4s ease;
z-index: -1;
}
.hero-actions .btn-outline-light:hover::before {
left: 0;
}
.hero-actions .btn-outline-light:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
transform: translateY(-3px);
}
/* Floating Cards Corporativos */
.hero-image {
position: relative;
height: 450px;
z-index: 3;
}
.floating-card {
position: absolute;
background: var(--glass-bg);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 1.5rem;
border-radius: var(--border-radius);
border: 1px solid var(--glass-border);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
text-align: center;
color: white;
max-width: 220px;
transition: var(--transition);
animation: floatUp 6s ease-in-out infinite;
}
.floating-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.floating-card:nth-child(1) {
top: 10%;
right: 10%;
}
.floating-card:nth-child(2) {
top: 50%;
right: 50%;
animation-delay: -2s;
}
.floating-card:nth-child(3) {
bottom: 10%;
right: 20%;
animation-delay: -4s;
}
.floating-card h5 {
margin-bottom: 0.5rem;
font-weight: 700;
color: white;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.floating-card p {
margin-bottom: 0;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.4;
}
@keyframes floatUp {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Controles del carousel corporativos */
.carousel-control-prev,
.carousel-control-next {
width: 60px;
height: 60px;
top: 50%;
transform: translateY(-50%);
background: var(--glass-bg);
backdrop-filter: blur(15px);
border-radius: 50%;
border: 2px solid var(--glass-border);
transition: var(--transition);
opacity: 0.8;
}
.carousel-control-prev {
left: 30px;
}
.carousel-control-next {
right: 30px;
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) scale(1.1);
opacity: 1;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.carousel-control-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
}
.carousel-indicators {
bottom: 30px;
z-index: 4;
}
.carousel-indicators button {
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
background: transparent;
transition: var(--transition);
margin: 0 6px;
}
.carousel-indicators button.active {
background: white;
border-color: white;
transform: scale(1.3);
animation: corporate-pulse 2s infinite;
}
/* Sections */
.section-title {
font-size: 2.75rem;
font-weight: 800;
margin-bottom: 1rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
}
.section-subtitle {
font-size: 1.25rem;
color: var(--secondary-color);
margin-bottom: 3rem;
text-align: center;
font-weight: 500;
}
/* Category Cards Corporativos */
.category-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border-radius: var(--border-radius);
padding: 2.5rem 2rem;
text-align: center;
border: 1px solid rgba(30, 64, 175, 0.1);
transition: var(--transition);
height: 100%;
position: relative;
overflow: hidden;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.category-card:hover::before {
transform: scaleX(1);
}
.category-card:hover {
transform: translateY(-8px);
box-shadow: var(--box-shadow-lg);
border-color: var(--primary-color);
}
.category-icon {
width: 90px;
height: 90px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-gradient);
border-radius: 50%;
color: #fff;
font-size: 2.5rem;
position: relative;
animation: corporate-pulse 3s infinite;
}
.category-icon img {
width: 55px;
height: 55px;
object-fit: cover;
border-radius: 50%;
}
.category-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--dark-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.category-description {
color: var(--secondary-color);
margin-bottom: 1.5rem;
line-height: 1.5;
}
.product-count {
font-size: 0.875rem;
color: var(--primary-color);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Product Cards Corporativos */
.product-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid rgba(30, 64, 175, 0.1);
transition: var(--transition);
/* height: 100%; */
position: relative;
}
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.3s ease;
z-index: 2;
}
.product-card:hover::before {
transform: scaleX(1);
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: var(--box-shadow-lg);
border-color: var(--primary-color);
}
.product-image {
position: relative;
height: 220px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.product-card:hover .product-image img {
transform: scale(1.08);
}
.no-image {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--light-color) 0%, #e2e8f0 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
font-size: 3rem;
}
.product-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(30, 64, 175, 0.9);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition);
}
.product-card:hover .product-overlay {
opacity: 1;
}
.product-badge {
position: absolute;
top: 15px;
right: 15px;
padding: 6px 12px;
border-radius: var(--border-radius);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
z-index: 3;
letter-spacing: 0.5px;
}
.product-badge.free {
background: var(--success-color);
color: #fff;
animation: corporate-pulse 2s infinite;
}
.product-info {
padding: 1.75rem;
}
.product-category {
font-size: 0.75rem;
color: var(--primary-color);
text-transform: uppercase;
font-weight: 700;
margin-bottom: 0.75rem;
letter-spacing: 1px;
}
.product-title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--dark-color);
line-height: 1.3;
}
.product-description {
color: var(--secondary-color);
font-size: 0.9rem;
margin-bottom: 1.5rem;
line-height: 1.5;
}
.product-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-price .price {
font-size: 1.5rem;
font-weight: 800;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.product-price .price-free {
font-size: 1.25rem;
font-weight: 700;
color: var(--success-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-actions {
display: flex;
gap: 0.75rem;
}
.product-actions .btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
border: 2px solid;
}
.product-actions .btn:hover {
transform: scale(1.1);
animation: corporate-pulse 1s infinite;
}
/* Stats Section Tech Corporativo */
.stats-section {
background: var(--primary-gradient);
position: relative;
overflow: hidden;
height: 180px;
display: flex;
align-items: center;
margin: 4rem 0;
}
.stats-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
animation: floating-dots 15s linear infinite;
}
.stats-container {
position: relative;
z-index: 2;
width: 100%;
}
.stat-card {
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--border-radius);
padding: 1.5rem;
height: 140px;
display: flex;
align-items: center;
gap: 1.5rem;
position: relative;
overflow: hidden;
transition: var(--transition);
cursor: pointer;
}
.stat-card:hover {
transform: translateY(-8px) scale(1.02);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.stat-icon {
flex-shrink: 0;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
transition: var(--transition);
position: relative;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.stat-card:hover .stat-icon {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1) rotate(5deg);
animation: corporate-pulse 1s infinite;
}
.stat-content {
flex: 1;
text-align: left;
}
.stat-number {
font-size: 2.5rem;
font-weight: 800;
color: white;
margin: 0;
font-family: 'Inter', sans-serif;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: color 0.3s ease;
}
.stat-card:hover .stat-number {
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.stat-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
margin: 0.3rem 0 0 0;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.stat-code {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-family: 'Inter', sans-serif;
margin-top: 0.3rem;
opacity: 0.8;
transition: all 0.3s ease;
}
.stat-card:hover .stat-code {
color: white;
opacity: 1;
}
/* Footer Corporativo */
.main-footer {
background: linear-gradient(135deg, var(--dark-color) 0%, #111827 100%);
color: #fff;
margin-top: 5rem;
position: relative;
}
.main-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
}
.footer-content {
padding: 4rem 0 2rem;
}
.footer-title {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #fff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-description {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
color: rgba(255, 255, 255, 0.8);
transition: var(--transition);
}
.contact-item:hover {
color: white;
transform: translateX(5px);
}
.contact-item a {
color: rgba(255, 255, 255, 0.8);
transition: var(--transition);
}
.contact-item a:hover {
color: #dbeafe;
}
.social-links {
display: flex;
gap: 0.75rem;
}
.social-links .social-link {
width: 45px;
height: 45px;
font-size: 1.1rem;
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(10px);
}
.social-links .social-link:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-3px) scale(1.1);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
transition: var(--transition);
position: relative;
padding-left: 0;
}
.footer-links a::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 0;
height: 2px;
background: var(--primary-color);
transition: width 0.3s ease;
transform: translateY(-50%);
}
.footer-links a:hover {
color: #dbeafe;
padding-left: 15px;
}
.footer-links a:hover::before {
width: 10px;
}
.newsletter-form .form-control {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: #fff;
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
}
.newsletter-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-form .form-control:focus {
border-color: var(--primary-light);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}
.newsletter-form .btn {
border: 2px solid var(--primary-color);
background: var(--primary-gradient);
border-radius: var(--border-radius);
}
.newsletter-form .btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
}
.footer-bottom {
background: rgba(0, 0, 0, 0.3);
padding: 1.5rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-bottom-links a {
color: rgba(255, 255, 255, 0.8);
margin: 0 0.75rem;
transition: var(--transition);
text-decoration: none;
}
.footer-bottom-links a:hover {
color: #dbeafe;
}
.separator {
color: rgba(255, 255, 255, 0.4);
}
/* Back to Top Corporativo */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 55px;
height: 55px;
background: var(--primary-gradient);
color: #fff;
border: none;
border-radius: 50%;
font-size: 1.25rem;
cursor: pointer;
transition: var(--transition);
opacity: 0;
visibility: hidden;
z-index: 1000;
box-shadow: var(--box-shadow-lg);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px) scale(1.1);
animation: corporate-pulse 1s infinite;
}
/* Loading Bar Animation */
@keyframes loading-bar {
0% { width: 0%; }
100% { width: 100%; }
}
.loading-bar {
height: 3px;
background: var(--primary-gradient);
animation: loading-bar 2s ease-in-out infinite;
}
/* Responsive Design */
@media (max-width: 991.98px) {
.hero-title {
font-size: 2.75rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
.section-title {
font-size: 2.25rem;
}
.floating-card {
display: none;
}
.hero-image {
display: none;
}
.hero-carousel-section,
.hero-slide {
height: 400px;
min-height: 400px;
}
}
@media (max-width: 575.98px) {
.hero-title {
font-size: 2.25rem;
}
.hero-subtitle {
font-size: 1.1rem;
}
.hero-actions .btn {
display: block;
width: 100%;
margin-bottom: 1rem;
margin-right: 0;
}
.product-card .product-footer {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.stats-section {
height: 200px;
}
.stat-card {
height: 120px;
padding: 1rem;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}
.stat-number {
font-size: 2rem;
}
.hero-carousel-section,
.hero-slide {
height: 350px;
min-height: 350px;
}
}
/* Fade In Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease forwards;
}
/* Glow Line Animation */
@keyframes glow-line {
0%, 100% {
box-shadow: 0 0 10px rgba(30, 64, 175, 0.5);
}
50% {
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
}
}
/* Corporate Buttons */
.btn-corporate {
background: var(--primary-gradient);
border: none;
color: white;
padding: 12px 24px;
border-radius: var(--border-radius);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.btn-corporate::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 ease;
}
.btn-corporate:hover::before {
left: 100%;
}
.btn-corporate:hover {
transform: translateY(-2px);
box-shadow: var(--box-shadow-lg);
color: white;
}
/* Custom Scrollbar Corporativo */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: var(--light-color);
}
::-webkit-scrollbar-thumb {
background: var(--primary-gradient);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-hover);
}
/* ===================================================================
ESTILOS ADICIONALES PARA HEADER ELEGANTE Y ORDENADO
================================================================== */
/* === QUOTE BAR SIMPLE === */
.quote-bar {
background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
color: #ffffff;
padding: 8px 0;
border-bottom: 1px solid rgba(30, 64, 175, 0.1);
}
.quote-content-simple {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 0.9rem;
}
.quote-icon-simple {
color: var(--primary-color);
font-size: 1rem;
}
.quote-text-simple {
font-style: italic;
color: #e5e7eb;
font-weight: 500;
}
/* === TOP BAR ELEGANTE === */
.contact-info-simple {
display: flex;
align-items: center;
gap: 2rem;
}
.contact-item-simple {
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
}
.contact-item-simple i {
color: rgba(255, 255, 255, 0.7);
}
/* === SOCIAL LINKS SIMPLE === */
.social-links-simple {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-right: 2rem;
}
/* === USER MENU SIMPLE === */
.user-menu-simple {
display: inline-flex;
align-items: center;
gap: 1rem;
}
.user-menu-simple .user-link {
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
padding: 6px 12px;
border-radius: var(--border-radius);
transition: var(--transition);
font-weight: 500;
text-decoration: none;
}
.user-menu-simple .user-link:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);
}
/* === RESPONSIVE PARA HEADER ELEGANTE === */
@media (max-width: 991.98px) {
.quote-content-simple {
font-size: 0.8rem;
}
.contact-info-simple {
gap: 1rem;
}
}
@media (max-width: 767.98px) {
.quote-bar {
padding: 6px 0;
}
.quote-content-simple {
font-size: 0.75rem;
gap: 0.5rem;
}
.contact-item-simple {
font-size: 0.8rem;
}
}
@media (max-width: 575.98px) {
.quote-bar {
display: none;
}
}
/* ===================================================================
ESTILOS PROFESIONALES PARA NAVEGACIÓN
Agregar al final del archivo style.css existente
================================================================== */
/* === NAVEGACIÓN PROFESIONAL === */
.navbar-nav .nav-link {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.3px;
text-transform: none;
color: var(--dark-color);
padding: 14px 20px;
transition: var(--transition);
position: relative;
border-radius: 6px;
}
.navbar-nav .nav-link:hover {
color: var(--primary-color);
background: var(--primary-light);
transform: translateY(-1px);
}
.navbar-nav .nav-link i {
font-size: 0.9rem;
opacity: 0.8;
}
/* === DROPDOWN PROFESIONAL === */
.dropdown-menu {
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: 8px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.98);
padding: 8px;
margin-top: 4px;
}
.dropdown-item {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.2px;
color: var(--dark-color);
padding: 12px 16px;
border-radius: 6px;
transition: var(--transition);
display: flex;
align-items: center;
}
.dropdown-item:hover {
background: var(--primary-light);
color: var(--primary-color);
transform: translateX(3px);
}
.dropdown-item i {
font-size: 0.85rem;
opacity: 0.7;
width: 18px;
}
/* === LOGO PROFESIONAL === */
.logo-text {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-weight: 800;
font-size: 1.6rem;
letter-spacing: -0.5px;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* === NAVEGACIÓN RESPONSIVE === */
@media (max-width: 991.98px) {
.navbar-nav .nav-link {
font-size: 0.9rem;
padding: 12px 16px;
}
.dropdown-item {
font-size: 0.85rem;
padding: 10px 14px;
}
}
@media (max-width: 767.98px) {
.navbar-nav .nav-link {
font-size: 0.88rem;
padding: 10px 14px;
letter-spacing: 0.2px;
}
.logo-text {
font-size: 1.4rem;
}
}
/* ===================================================================
ESTILOS FOOTER LIMPIO Y ORDENADO
================================================================== */
/* === FOOTER LIMPIO === */
.clean-footer {
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
color: #ffffff;
margin-top: 5rem;
position: relative;
}
.clean-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-gradient);
}
/* === FOOTER CONTENT === */
.footer-content {
padding: 4rem 0 2rem;
}
/* === FOOTER BRAND === */
.footer-brand {
margin-bottom: 1.5rem;
}
.brand-name {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1.8rem;
font-weight: 800;
margin-bottom: 0.5rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.brand-tagline {
font-size: 0.9rem;
color: #9ca3af;
margin: 0;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* === FOOTER DESCRIPTION === */
.footer-description {
color: #d1d5db;
margin-bottom: 2rem;
line-height: 1.6;
font-size: 0.95rem;
}
/* === FOOTER CONTACT === */
.footer-contact {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: #d1d5db;
font-size: 0.9rem;
}
.contact-item i {
width: 18px;
color: var(--primary-color);
font-size: 0.9rem;
}
/* === FOOTER TITLES === */
.footer-title {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.footer-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 30px;
height: 2px;
background: var(--primary-color);
border-radius: 1px;
}
/* === FOOTER LINKS === */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: #d1d5db;
text-decoration: none;
transition: var(--transition);
font-size: 0.9rem;
font-weight: 500;
}
.footer-links a:hover {
color: #ffffff;
transform: translateX(5px);
}
/* === NEWSLETTER === */
.newsletter-text {
color: #d1d5db;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.newsletter-form {
margin-bottom: 2rem;
}
.newsletter-form .input-group {
border-radius: var(--border-radius);
overflow: hidden;
}
.newsletter-form .form-control {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
border-right: none;
}
.newsletter-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.newsletter-form .form-control:focus {
background: rgba(255, 255, 255, 0.15);
border-color: var(--primary-color);
box-shadow: none;
color: #ffffff;
}
.newsletter-form .btn {
border: 2px solid var(--primary-color);
border-left: none;
background: var(--primary-gradient);
}
.newsletter-form .btn:hover {
transform: scale(1.05);
}
/* === FOOTER SOCIAL === */
.footer-social {
display: flex;
gap: 1rem;
}
.footer-social .social-link {
width: 45px;
height: 45px;
background: #2959ca;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.8);
transition: var(--transition);
text-decoration: none;
}
.footer-social .social-link:hover {
color: #ffffff;
transform: translateY(-3px);
background: var(--primary-gradient);
border-color: var(--primary-color);
}
/* === FOOTER BOTTOM === */
.footer-bottom {
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 1.5rem 0;
}
.copyright {
margin: 0;
color: #9ca3af;
font-size: 0.9rem;
}
.footer-legal {
display: flex;
align-items: center;
gap: 1rem;
}
.footer-legal a {
color: #9ca3af;
text-decoration: none;
transition: var(--transition);
font-size: 0.9rem;
}
.footer-legal a:hover {
color: #ffffff;
}
.footer-legal span {
color: rgba(255, 255, 255, 0.3);
}
/* === RESPONSIVE === */
@media (max-width: 991.98px) {
.footer-content {
padding: 3rem 0 1.5rem;
}
.footer-title::after {
left: 50%;
transform: translateX(-50%);
}
.footer-links,
.footer-social {
justify-content: center;
text-align: center;
}
.footer-social {
justify-content: center;
}
}
@media (max-width: 767.98px) {
.footer-content {
padding: 2.5rem 0 1rem;
text-align: center;
}
.brand-name {
font-size: 1.5rem;
}
.footer-contact {
justify-content: center;
align-items: center;
}
.footer-legal {
justify-content: center;
margin-top: 1rem;
}
.footer-social {
gap: 0.75rem;
}
}
@media (max-width: 575.98px) {
.footer-content {
padding: 2rem 0 1rem;
}
.footer-legal {
flex-direction: column;
gap: 0.5rem;
}
.footer-legal span {
display: none;
}
}
/* ===================================================================
HERO MOBILE RESPONSIVE - AGREGAR A STYLE.CSS
================================================================== */
/* === HERO RESPONSIVE MEJORADO === */
/* Tablet (hasta 991px) */
@media (max-width: 991.98px) {
.hero-carousel-section,
.hero-slide {
height: 400px;
min-height: 400px;
}
.hero-content {
text-align: center;
padding: 2rem 0;
}
.hero-title {
font-size: 2.5rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.hero-subtitle {
font-size: 1.3rem;
margin-bottom: 1rem;
padding: 0.4rem 0.8rem;
}
.hero-description {
font-size: 1.1rem;
margin-bottom: 1.5rem;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
justify-content: center;
gap: 1rem;
}
.hero-actions .btn {
padding: 12px 24px;
font-size: 0.9rem;
}
.floating-card {
display: none;
}
.hero-image {
display: none;
}
}
/* Mobile Large (hasta 767px) */
@media (max-width: 767.98px) {
.hero-carousel-section,
.hero-slide {
height: 350px;
min-height: 350px;
}
.hero-content {
padding: 1.5rem 0;
text-align: center;
}
.hero-title {
font-size: 2rem;
margin-bottom: 0.8rem;
line-height: 1.2;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.1rem;
margin-bottom: 0.8rem;
padding: 0.3rem 0.6rem;
font-weight: 500;
}
.hero-description {
font-size: 1rem;
margin-bottom: 1.2rem;
line-height: 1.5;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
flex-direction: column;
align-items: center;
gap: 0.8rem;
}
.hero-actions .btn {
width: 100%;
max-width: 280px;
padding: 12px 20px;
font-size: 0.85rem;
margin-right: 0;
margin-bottom: 0;
}
}
/* Mobile Small (hasta 575px) */
@media (max-width: 575.98px) {
.hero-carousel-section,
.hero-slide {
height: 320px;
min-height: 320px;
}
.hero-content {
padding: 1rem 0;
}
.hero-title {
font-size: 1.8rem;
margin-bottom: 0.6rem;
line-height: 1.2;
font-weight: 700;
}
.hero-subtitle {
font-size: 1rem;
margin-bottom: 0.6rem;
padding: 0.25rem 0.5rem;
font-weight: 500;
}
.hero-description {
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.4;
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.hero-actions .btn {
width: 100%;
max-width: 250px;
padding: 10px 16px;
font-size: 0.8rem;
letter-spacing: 0.3px;
}
}
/* Mobile Extra Small (hasta 480px) */
@media (max-width: 480px) {
.hero-carousel-section,
.hero-slide {
height: 300px;
min-height: 300px;
}
.hero-content {
padding: 6rem 0;
}
.hero-title {
font-size: 1.6rem;
margin-bottom: 0.5rem;
line-height: 1.1;
}
.hero-subtitle {
font-size: 0.9rem;
margin-bottom: 0.5rem;
padding: 0.2rem 0.4rem;
}
.hero-description {
font-size: 0.85rem;
margin-bottom: 0.8rem;
line-height: 1.3;
max-width: 280px;
}
.hero-actions .btn {
max-width: 220px;
padding: 8px 14px;
font-size: 0.75rem;
}
}
/* === AJUSTES PARA CONTENEDOR EN MOBILE === */
@media (max-width: 767.98px) {
.hero-slide .container {
padding-left: 1rem;
padding-right: 1rem;
}
.hero-slide .row {
margin: 0;
}
.hero-slide .col-lg-6 {
padding: 0;
}
}
/* === AJUSTES PARA CAROUSEL CONTROLS EN MOBILE === */
@media (max-width: 767.98px) {
.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
}
.carousel-control-prev {
left: 15px;
}
.carousel-control-next {
right: 15px;
}
.carousel-control-icon {
width: 16px;
height: 16px;
font-size: 14px;
}
.carousel-indicators {
bottom: 15px;
}
.carousel-indicators button {
width: 10px;
height: 10px;
margin: 0 4px;
}
}
/* === MEJORAR LEGIBILIDAD EN MOBILE === */
@media (max-width: 575.98px) {
.hero-title,
.hero-subtitle,
.hero-description {
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.hero-overlay {
background: linear-gradient(135deg, rgba(30, 64, 175, 0.85) 0%, rgba(59, 130, 246, 0.75) 100%);
}
}
/* ===================================================================
ESTILOS SECCIONES EMPRESARIALES ÚNICAS
================================================================== */
/* === 1. OFERTAS EMPRESARIALES === */
.promotion-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
.promotion-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
animation: floating-dots 15s linear infinite;
}
.promo-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 2.5rem 2rem;
text-align: center;
position: relative;
overflow: hidden;
transition: var(--transition);
height: 100%;
box-shadow: 0 4px 20px rgba(30, 64, 175, 0.08);
}
.promo-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.promo-card:hover::before {
transform: scaleX(1);
}
.promo-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(30, 64, 175, 0.15);
border-color: var(--primary-color);
}
.promo-image-container {
position: relative;
margin-bottom: 2rem;
border-radius: var(--border-radius);
overflow: hidden;
height: 180px;
}
.promo-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.promo-card:hover .promo-image {
transform: scale(1.05);
}
.promo-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-gradient);
opacity: 0;
transition: opacity 0.3s ease;
}
.promo-card:hover .promo-overlay {
opacity: 0.1;
}
.promo-icon {
width: 70px;
height: 70px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 1.8rem;
box-shadow: 0 8px 25px rgba(30, 64, 175, 0.3);
position: relative;
}
.promo-icon::after {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: var(--primary-gradient);
border-radius: 50%;
opacity: 0.3;
z-index: -1;
animation: corporate-pulse 2s infinite;
}
.promo-title {
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--dark-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.promo-subtitle {
font-size: 1.1rem;
color: var(--primary-color);
font-weight: 600;
margin-bottom: 1rem;
}
.promo-description {
color: var(--secondary-color);
margin-bottom: 2rem;
line-height: 1.6;
}
.btn-luxury {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary-gradient);
color: white;
padding: 12px 24px;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
position: relative;
overflow: hidden;
}
.btn-luxury::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 ease;
}
.btn-luxury:hover::before {
left: 100%;
}
.btn-luxury:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4);
color: white;
}
.promo-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(30, 64, 175, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.promo-card:hover .promo-glow {
opacity: 1;
}
/* === 2. EXPERIENCIA EMPRESARIAL === */
.hero-cards-section {
background: var(--primary-gradient);
position: relative;
overflow: hidden;
}
.hero-cards-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='60'%3E%3Cstyle%3E.text%7Bfont-family:'Courier New',monospace;font-size:24px;fill:white;opacity:0.08;%7D%3C/style%3E%3Ctext x='10' y='40' class='text' %3E%26lt%3BDevCayao/%26gt%3B%3C/text%3E%3C/svg%3E") repeat;
animation: floating-dots 20s linear infinite;
}
@keyframes moveBg {
0% { background-position: 0 0; }
100% { background-position: 1000px 1000px; }
}
.bg-gradient-luxury {
background: var(--primary-gradient);
}
.luxury-title {
font-family: 'Inter', sans-serif;
font-size: 2.8rem;
font-weight: 800;
color: white;
margin-bottom: 1rem;
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.luxury-divider {
width: 80px;
height: 4px;
background: rgba(255, 255, 255, 0.8);
margin: 0 auto 3rem;
border-radius: 2px;
position: relative;
}
.luxury-divider::before,
.luxury-divider::after {
content: '';
position: absolute;
width: 15px;
height: 15px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
top: -5.5px;
}
.luxury-divider::before { left: -25px; }
.luxury-divider::after { right: -25px; }
.hero-luxury-card {
height: 350px;
perspective: 1000px;
}
.hero-card-inner {
position: relative;
width: 100%;
height: 100%;
border-radius: var(--border-radius);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
transition: var(--transition);
color: white;
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero-card-inner:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.15);
}
.hero-card-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.hero-card-inner:hover .hero-card-glow {
opacity: 1;
}
.hero-card-content {
position: relative;
z-index: 2;
}
.hero-card-icon {
width: 80px;
height: 80px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-size: 2rem;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
transition: var(--transition);
}
.hero-card-inner:hover .hero-card-icon {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
animation: corporate-pulse 1s infinite;
}
.hero-card-title {
font-family: 'Inter', sans-serif;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-card-subtitle {
color: rgba(255, 255, 255, 0.8);
font-size: 1rem;
margin-bottom: 1rem;
}
.hero-card-description {
opacity: 0.9;
margin-bottom: 2rem;
line-height: 1.5;
}
.hero-card-btn {
display: inline-block;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hero-card-btn:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
transform: translateY(-2px);
}
.hero-card-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
opacity: 0.1;
z-index: 1;
}
/* === 3. SOLUCIONES ESPECIALIZADAS === */
.crystal-banners-section {
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%);
position: relative;
}
.crystal-banners-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
animation: floating-dots 12s linear infinite;
}
.crystal-title {
font-family: 'Inter', sans-serif;
font-size: 2.5rem;
font-weight: 800;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.crystal-divider {
width: 60px;
height: 3px;
background: var(--primary-gradient);
margin: 0 auto 3rem;
border-radius: 2px;
}
.crystal-card {
height: 400px;
}
.crystal-inner {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
overflow: hidden;
height: 100%;
position: relative;
transition: var(--transition);
box-shadow: 0 4px 20px rgba(30, 64, 175, 0.08);
}
.crystal-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--primary-gradient);
transform: scaleX(0);
transition: transform 0.4s ease;
z-index: 3;
}
.crystal-inner:hover::before {
transform: scaleX(1);
}
.crystal-inner:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(30, 64, 175, 0.12);
border-color: var(--primary-color);
}
.crystal-glow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(30, 64, 175, 0.05) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.crystal-inner:hover .crystal-glow {
opacity: 1;
}
.crystal-image {
position: relative;
height: 180px;
overflow: hidden;
}
.crystal-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.crystal-inner:hover .crystal-image img {
transform: scale(1.08);
}
.crystal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--primary-gradient);
opacity: 0;
transition: opacity 0.3s ease;
}
.crystal-inner:hover .crystal-overlay {
opacity: 0.1;
}
.crystal-content {
padding: 2rem;
text-align: center;
position: relative;
z-index: 2;
}
.crystal-title-small {
font-family: 'Inter', sans-serif;
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--dark-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.crystal-subtitle {
color: var(--primary-color);
font-weight: 600;
margin-bottom: 1rem;
}
.crystal-description {
color: var(--secondary-color);
margin-bottom: 1.5rem;
font-size: 0.9rem;
line-height: 1.5;
}
.crystal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--primary-gradient);
color: white;
text-decoration: none;
border-radius: var(--border-radius);
font-weight: 600;
transition: var(--transition);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.crystal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(30, 64, 175, 0.3);
color: white;
}
/* === RESPONSIVE PARA SECCIONES EMPRESARIALES === */
@media (max-width: 768px) {
.promo-card,
.crystal-card {
height: auto;
margin-bottom: 2rem;
}
.hero-luxury-card {
height: 300px;
margin-bottom: 2rem;
}
.luxury-title {
font-size: 2rem;
}
.crystal-title {
font-size: 2rem;
}
.promo-title {
font-size: 1.3rem;
}
.hero-card-title {
font-size: 1.3rem;
}
.crystal-title-small {
font-size: 1.2rem;
}
.promo-card,
.crystal-inner {
padding: 2rem 1.5rem;
}
.promo-image-container,
.crystal-image {
height: 150px;
}
}
@media (max-width: 575.98px) {
.luxury-title,
.crystal-title {
font-size: 1.8rem;
}
.promo-card,
.crystal-inner {
padding: 1.5rem 1rem;
}
.hero-card-inner {
padding: 1.5rem;
}
.promo-icon,
.hero-card-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
/* ===================================================================
STATS SECTION MOBILE RESPONSIVE - AGREGAR A STYLE.CSS
================================================================== */
/* === STATS RESPONSIVE MEJORADO === */
/* Tablet (hasta 991px) */
@media (max-width: 991.98px) {
.stats-section {
height: auto;
min-height: 200px;
padding: 3rem 0;
}
.stats-container {
padding: 0 1rem;
}
.stat-card {
height: 140px;
padding: 1.5rem 1rem;
margin-bottom: 1rem;
gap: 1rem;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
flex-shrink: 0;
}
.stat-number {
font-size: 2.2rem;
margin-bottom: 0.3rem;
}
.stat-label {
font-size: 0.95rem;
margin-top: 0.3rem;
}
.stat-code {
font-size: 0.7rem;
margin-top: 0.2rem;
}
}
/* Mobile Large (hasta 767px) */
@media (max-width: 767.98px) {
.stats-section {
height: auto;
min-height: 180px;
padding: 2.5rem 0;
}
.stats-container .row {
justify-content: center;
}
.stat-card {
height: 120px;
padding: 1.2rem 1rem;
margin-bottom: 1rem;
flex-direction: row;
text-align: left;
gap: 1rem;
max-width: 280px;
margin-left: auto;
margin-right: auto;
}
.stat-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
flex-shrink: 0;
}
.stat-content {
flex: 1;
text-align: left;
}
.stat-number {
font-size: 1.8rem;
margin-bottom: 0.2rem;
line-height: 1;
}
.stat-label {
font-size: 0.85rem;
margin-top: 0.2rem;
line-height: 1.2;
}
.stat-code {
font-size: 0.65rem;
margin-top: 0.1rem;
opacity: 0.8;
}
/* Ajustar grid para móvil - 2 por fila */
.stats-section .row.g-3 > .col-md-3 {
flex: 0 0 auto;
width: 50%;
max-width: 50%;
}
}
/* Mobile Small (hasta 575px) */
@media (max-width: 575.98px) {
.stats-section {
height: auto;
min-height: 160px;
padding: 2rem 0;
}
.stats-container {
padding: 0 0.5rem;
}
.stat-card {
height: 100px;
padding: 1rem 0.8rem;
margin-bottom: 0.8rem;
gap: 0.8rem;
max-width: 260px;
}
.stat-icon {
width: 45px;
height: 45px;
font-size: 1.3rem;
border-radius: 8px;
}
.stat-number {
font-size: 1.6rem;
margin-bottom: 0.1rem;
}
.stat-label {
font-size: 0.8rem;
margin-top: 0.1rem;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.stat-code {
font-size: 0.6rem;
margin-top: 0.1rem;
display: none; /* Ocultar en móviles muy pequeños */
}
/* Grid completo - 1 por fila en móviles muy pequeños */
.stats-section .row.g-3 > .col-md-3 {
width: 50%;
max-width: 50%;
padding: 0 0.5rem;
}
}
/* Mobile Extra Small (hasta 480px) */
@media (max-width: 480px) {
.stats-section {
padding: 1.5rem 0;
min-height: 140px;
}
.stat-card {
height: 90px;
padding: 0.8rem 0.6rem;
margin-bottom: 0.6rem;
gap: 0.6rem;
max-width: 240px;
}
.stat-icon {
width: 40px;
height: 40px;
font-size: 1.1rem;
}
.stat-number {
font-size: 1.4rem;
font-weight: 800;
}
.stat-label {
font-size: 0.75rem;
line-height: 1.1;
}
.stat-code {
display: none;
}
}
/* === AJUSTES ESPECÍFICOS PARA LAYOUT MÓVIL === */
@media (max-width: 767.98px) {
/* Centrar las estadísticas */
.stats-section .container {
max-width: 600px;
}
/* Mejorar hover en móvil */
.stat-card:hover {
transform: translateY(-3px) scale(1.01);
}
/* Ajustar partículas de fondo */
.code-particles-bg .particle {
font-size: 0.8rem;
animation-duration: 6s;
}
/* Simplificar efectos en móvil */
.stat-card:hover .stat-icon {
transform: scale(1.05);
animation: none;
}
}
/* === OPTIMIZACIÓN PARA PANTALLAS MUY PEQUEÑAS === */
@media (max-width: 360px) {
.stat-card {
height: 85px;
padding: 0.6rem 0.5rem;
gap: 0.5rem;
max-width: 220px;
}
.stat-icon {
width: 35px;
height: 35px;
font-size: 1rem;
}
.stat-number {
font-size: 1.3rem;
}
.stat-label {
font-size: 0.7rem;
}
.stats-section {
padding: 1rem 0;
}
}
/* === MEJORAS DE ACCESIBILIDAD MÓVIL === */
@media (max-width: 767.98px) {
/* Aumentar área de toque */
.stat-card {
min-height: 100px;
cursor: default;
}
/* Mejorar contraste en móvil */
.stat-number {
text-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
}
.stat-label {
color: rgba(255, 255, 255, 0.95);
}
/* Simplificar glassmorphism en móviles */
.stat-card {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.12);
}
}
/* === AJUSTES PARA ORIENTACIÓN LANDSCAPE EN MÓVIL === */
@media (max-width: 767.98px) and (orientation: landscape) {
.stats-section {
padding: 1.5rem 0;
min-height: 120px;
}
.stat-card {
height: 80px;
padding: 0.8rem;
}
.stat-icon {
width: 35px;
height: 35px;
font-size: 1.2rem;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.75rem;
}
}
/* === LOADING STATES PARA CONTADORES EN MÓVIL === */
@media (max-width: 767.98px) {
.stat-number[data-counter]:not([data-animated]) {
opacity: 0.7;
}
.stat-number[data-animated="true"] {
opacity: 1;
animation: fadeInScale 0.6s ease;
}
}
@keyframes fadeInScale {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ===================================================================
CSS CORREGIDO PARA CARRITO
================================================================== */
/* === PÁGINA DE CARRITO CORREGIDA === */
.cart-page {
min-height: 70vh;
}
.cart-item {
padding: 2rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
transition: var(--transition);
border-left: 4px solid var(--primary-color);
}
.cart-item:hover {
transform: translateY(-2px);
box-shadow: var(--box-shadow-lg);
border-color: var(--primary-color);
}
/* === IMÁGENES DE PRODUCTOS FIJAS === */
.cart-item .product-image {
width: 80px !important;
height: 80px !important;
object-fit: cover;
border-radius: 8px;
border: 2px solid var(--primary-light);
flex-shrink: 0;
display: block;
}
.cart-item .no-image {
width: 80px !important;
height: 80px !important;
background: var(--light-color);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--primary-light);
flex-shrink: 0;
}
.cart-item .no-image i {
font-size: 1.5rem;
color: var(--secondary-color);
}
/* === CONTROLES DE CANTIDAD MEJORADOS === */
.quantity-controls {
max-width: 100%;
}
.quantity-controls .form-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--dark-color);
margin-bottom: 0.5rem;
}
.quantity-controls .input-group {
max-width: 140px;
}
.quantity-controls .form-control {
border-color: var(--primary-color);
font-weight: 600;
text-align: center;
padding: 0.5rem 0.25rem;
}
.quantity-controls .form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.quantity-controls .btn {
border-color: var(--primary-color);
color: var(--primary-color);
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}
.quantity-controls .btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
transform: scale(1.05);
}
.quantity-controls .btn i {
font-size: 0.8rem;
}
/* === INFORMACIÓN DEL PRODUCTO === */
.cart-item .product-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-color);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.cart-item .product-title a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.cart-item .product-title a:hover {
color: var(--primary-hover);
}
.cart-item .product-category {
color: var(--secondary-color);
font-size: 0.85rem;
}
.cart-item .product-category i {
color: var(--primary-color);
}
/* === PRECIOS Y SUBTOTALES === */
.cart-item .item-subtotal .price {
color: var(--primary-color);
font-size: 1.3rem;
font-weight: 800;
}
.cart-item .item-subtotal .price-free {
color: var(--success-color);
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* === BOTÓN ELIMINAR === */
.cart-item .remove-item {
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
border-radius: 6px;
transition: var(--transition);
}
.cart-item .remove-item:hover {
background: var(--danger-color);
border-color: var(--danger-color);
color: white;
transform: scale(1.05);
}
/* === RESUMEN DEL CARRITO === */
.cart-summary {
background: linear-gradient(135deg, var(--light-color) 0%, var(--primary-light) 100%);
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
padding: 2rem;
position: sticky;
top: 20px;
box-shadow: var(--box-shadow);
}
.cart-summary h4 {
color: var(--primary-color);
font-weight: 700;
}
/* === CARRITO VACÍO === */
.empty-cart {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, var(--light-color) 0%, #e2e8f0 100%);
border-radius: var(--border-radius);
border: 2px solid var(--primary-light);
}
/* === ACCIONES DEL CARRITO === */
.cart-actions {
background: rgba(255, 255, 255, 0.9);
padding: 1.5rem;
border-radius: var(--border-radius);
border: 1px solid var(--primary-light);
margin-top: 2rem;
}
/* === RESPONSIVE PARA CARRITO === */
@media (max-width: 991.98px) {
.cart-item {
padding: 1.5rem;
}
.cart-summary {
margin-top: 2rem;
position: static;
}
.quantity-controls .input-group {
max-width: 120px;
}
}
@media (max-width: 767.98px) {
.cart-item {
padding: 1rem;
}
/* Hacer responsive el layout del item */
.cart-item .row {
align-items: flex-start !important;
}
.cart-item .col-md-2 {
flex: 0 0 auto;
width: auto;
margin-right: 1rem;
margin-bottom: 1rem;
}
.cart-item .col-md-4 {
flex: 1;
min-width: 0;
margin-bottom: 1rem;
}
.cart-item .col-md-3 {
width: 100%;
margin-bottom: 1rem;
}
.cart-item .col-md-3:last-child {
text-align: left !important;
}
/* Ajustar controles de cantidad en móvil */
.quantity-controls {
max-width: 100%;
}
.quantity-controls .input-group {
max-width: 100%;
width: 100%;
}
.quantity-controls .form-control {
min-width: 60px;
}
.quantity-controls .btn {
min-width: 40px;
padding: 0.5rem 0.5rem;
}
/* Layout horizontal para cantidad y eliminar */
.cart-item .col-md-3:last-child {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.cart-item .item-subtotal {
order: 1;
margin-bottom: 0 !important;
}
.cart-item .remove-item {
order: 2;
margin-left: auto;
}
}
@media (max-width: 575.98px) {
.cart-item {
padding: 0.75rem;
}
/* Layout en columna para móviles pequeños */
.cart-item .row {
flex-direction: column;
}
.cart-item .col-md-2,
.cart-item .col-md-4,
.cart-item .col-md-3 {
width: 100%;
margin-right: 0;
margin-bottom: 1rem;
text-align: center;
}
.cart-item .col-md-2 {
display: flex;
align-items: center;
gap: 1rem;
}
.cart-item .col-md-3:last-child {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.cart-item .item-subtotal,
.cart-item .remove-item {
order: unset;
margin: 0;
text-align: center;
}
.quantity-controls .input-group {
justify-content: center;
max-width: 160px;
margin: 0 auto;
}
/* Ajustar imágenes para móviles muy pequeños */
.cart-item .product-image,
.cart-item .no-image {
width: 60px !important;
height: 60px !important;
}
.cart-item .no-image i {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.cart-item {
padding: 0.5rem;
}
.cart-item .product-title {
font-size: 1rem;
}
.cart-item .item-subtotal .price {
font-size: 1.1rem;
}
.quantity-controls .input-group {
max-width: 140px !important;
}
.quantity-controls .btn {
min-width: 35px;
padding: 0.4rem 0.4rem;
}
.quantity-controls .btn i {
font-size: 0.7rem;
}
}
/* === MEJORAS DE ACCESIBILIDAD === */
.cart-item:focus-within {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.quantity-controls .form-control:focus {
z-index: 3;
}
.quantity-controls .btn:focus {
z-index: 4;
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.2);
}
/* === ANIMACIONES === */
@keyframes cart-item-appear {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cart-item {
animation: cart-item-appear 0.5s ease forwards;
}
.cart-item:nth-child(2) { animation-delay: 0.1s; }
.cart-item:nth-child(3) { animation-delay: 0.2s; }
.cart-item:nth-child(4) { animation-delay: 0.3s; }
/* === ESTADOS DE LOADING === */
.cart-item.updating {
opacity: 0.7;
pointer-events: none;
}
.cart-item.updating::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
}
/* === EFECTOS HOVER MEJORADOS === */
.cart-item .product-image:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.2);
}
.cart-item .quantity-btn:hover {
animation: corporate-pulse 0.3s ease;
}
/* === COMPATIBILIDAD CON ESTILOS EXISTENTES === */
.proceed-buttons {
margin-top: 2rem;
}
.continue-shopping {
border-color: var(--secondary-color);
color: var(--secondary-color);
}
.continue-shopping:hover {
background: var(--secondary-color);
color: white;
}
/* ===================================================================
CSS PARA CHECKOUT Y CONTACT - AGREGAR AL FINAL DE STYLE.CSS
================================================================== */
/* === CHECKOUT PAGE === */
.checkout-page {
min-height: 70vh;
}
.checkout-step {
padding: 2rem;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
margin-bottom: 2rem;
box-shadow: var(--box-shadow);
transition: var(--transition);
border-left: 4px solid var(--primary-color);
}
.checkout-step:hover {
transform: translateY(-2px);
box-shadow: var(--box-shadow-lg);
}
.step-header {
border-bottom: 1px solid rgba(30, 64, 175, 0.1);
padding-bottom: 1rem;
margin-bottom: 1.5rem;
}
.step-number {
width: 40px;
height: 40px;
background: var(--primary-gradient);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 1rem;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.checkout-form .form-group {
margin-bottom: 1.5rem;
}
.checkout-form .form-control,
.checkout-form .form-select {
border: 2px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
transition: var(--transition);
}
.checkout-form .form-control:focus,
.checkout-form .form-select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
/* === PAYMENT METHODS === */
.payment-method {
border: 2px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1rem;
cursor: pointer;
transition: var(--transition);
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
.payment-method:hover {
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: var(--box-shadow);
}
.payment-method.selected {
border-color: var(--primary-color);
background: var(--primary-light);
box-shadow: var(--box-shadow-lg);
}
.payment-method input[type="radio"] {
margin-right: 1rem;
}
.payment-logo {
height: 30px;
width: auto;
}
.payment-form {
display: none;
padding-top: 1.5rem;
border-top: 1px solid rgba(30, 64, 175, 0.1);
margin-top: 1rem;
}
.payment-form.active {
display: block;
}
.payment-button-container {
min-height: 50px;
background: var(--light-color);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 1rem;
}
/* === INDICADOR DE YAPE === */
.yape-indicator {
display: flex;
align-items: center;
gap: 0.5rem;
}
.yape-indicator .badge {
font-size: 0.75rem;
padding: 4px 8px;
border-radius: 12px;
animation: yape-pulse 2s infinite;
}
.yape-indicator small {
font-weight: 600;
font-size: 0.8rem;
}
@keyframes yape-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 0 5px rgba(40, 167, 69, 0);
}
}
/* === ICONOS DE PAGO MEJORADOS === */
.payment-method[data-method="mercadopago"] .payment-logo {
display: flex;
align-items: center;
gap: 5px;
}
.payment-method[data-method="mercadopago"]:hover .yape-indicator .badge {
animation: yape-pulse 1s infinite;
background: #28a745 !important;
}
.stripe-element {
background-color: white;
padding: 12px 16px;
border-radius: var(--border-radius);
border: 2px solid rgba(30, 64, 175, 0.1);
transition: var(--transition);
}
.stripe-element:focus-within {
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
border-color: var(--primary-color);
}
/* === ORDER SUMMARY === */
.order-summary {
background: linear-gradient(135deg, var(--light-color) 0%, var(--primary-light) 100%);
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
padding: 2rem;
position: sticky;
top: 20px;
box-shadow: var(--box-shadow);
}
.order-summary h4 {
color: var(--primary-color);
font-weight: 700;
}
.order-item {
padding: 1rem 0;
border-bottom: 1px solid rgba(30, 64, 175, 0.1);
}
.order-item:last-child {
border-bottom: none;
}
.order-item-image {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 5px;
border: 1px solid var(--primary-light);
}
.order-item-image.no-image {
background: var(--light-color);
display: flex;
align-items: center;
justify-content: center;
}
.order-totals {
margin-top: 2rem;
padding-top: 1rem;
border-top: 2px solid var(--primary-color);
}
.order-benefits {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid rgba(30, 64, 175, 0.1);
background: rgba(255, 255, 255, 0.1);
padding: 1.5rem;
border-radius: var(--border-radius);
}
.security-badges {
text-align: center;
margin-top: 3rem;
padding: 2rem;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
border: 1px solid rgba(30, 64, 175, 0.1);
}
.security-badge {
display: inline-block;
margin: 0 1rem;
opacity: 0.8;
transition: var(--transition);
}
.security-badge:hover {
opacity: 1;
transform: translateY(-3px);
}
.processing-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
color: white;
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* === CONTACT PAGE === */
.contact-section {
padding: 60px 0;
}
.contact-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
transition: var(--transition);
height: 100%;
overflow: hidden;
border-left: 4px solid var(--primary-color);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-lg);
}
.contact-card-header {
background: var(--primary-gradient);
color: white;
padding: 25px;
text-align: center;
position: relative;
}
.contact-card-header h3 {
margin: 0;
font-weight: 700;
}
.contact-card-body {
padding: 30px;
}
.contact-info-item {
display: flex;
align-items: center;
margin-bottom: 20px;
padding: 15px;
background: var(--light-color);
border-radius: var(--border-radius);
transition: var(--transition);
border: 1px solid rgba(30, 64, 175, 0.1);
}
.contact-info-item:hover {
background: var(--primary-light);
transform: translateX(5px);
border-color: var(--primary-color);
}
.contact-icon {
width: 50px;
height: 50px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
margin-right: 15px;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.contact-details h6 {
margin: 0;
font-weight: 700;
color: var(--dark-color);
}
.contact-details p {
margin: 5px 0 0 0;
color: var(--secondary-color);
}
.contact-details a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.contact-details a:hover {
color: var(--primary-hover);
}
/* === SOCIAL LINKS PARA CONTACTO === */
.social-links-contact {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
.social-link-contact {
width: 50px;
height: 50px;
background: var(--light-color);
border: 2px solid rgba(30, 64, 175, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--secondary-color);
font-size: 1.2rem;
text-decoration: none;
transition: var(--transition);
}
.social-link-contact:hover {
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.social-link-contact.facebook:hover { background: #3b5998; border-color: #3b5998; }
.social-link-contact.twitter:hover { background: #1da1f2; border-color: #1da1f2; }
.social-link-contact.instagram:hover { background: #e4405f; border-color: #e4405f; }
.social-link-contact.linkedin:hover { background: #0077b5; border-color: #0077b5; }
.social-link-contact.youtube:hover { background: #ff0000; border-color: #ff0000; }
/* === ALERTAS PERSONALIZADAS === */
.alert-custom {
border: none;
border-radius: var(--border-radius);
padding: 20px;
margin-bottom: 30px;
border-left: 4px solid;
}
.alert.alert-success {
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
color: #155724;
border-left-color: #28a745;
}
.alert.alert-danger {
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
color: #721c24;
border-left-color: #dc3545;
}
/* === CAPTCHA === */
.captcha-container {
background: var(--light-color);
border: 2px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 20px;
text-align: center;
margin-bottom: 20px;
}
.captcha-question {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 15px;
}
.captcha-input {
width: 80px !important;
margin: 0 auto !important;
text-align: center;
border: 2px solid var(--primary-color) !important;
}
.captcha-help {
display: block;
margin-top: 10px;
color: var(--secondary-color);
}
.security-info {
background: var(--primary-light);
border: 2px solid var(--primary-color);
border-radius: var(--border-radius);
padding: 15px;
margin-bottom: 20px;
font-size: 0.9rem;
color: var(--primary-color);
}
.honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
/* === BOTÓN ENVIAR === */
.btn-send {
background: var(--primary-gradient);
border: none;
border-radius: 50px;
padding: 15px 40px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.btn-send:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(30, 64, 175, 0.4);
color: white;
}
.btn-send::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 ease;
}
.btn-send:hover::before {
left: 100%;
}
/* === RESPONSIVE PARA CHECKOUT Y CONTACT === */
@media (max-width: 991.98px) {
.checkout-step {
padding: 1.5rem;
}
.order-summary {
position: static;
margin-top: 2rem;
}
.contact-card-body {
padding: 20px;
}
.contact-info-item {
padding: 12px;
}
}
@media (max-width: 767.98px) {
.checkout-step {
padding: 1rem;
}
.step-number {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.payment-method {
padding: 1rem;
}
.order-summary {
padding: 1.5rem;
}
.contact-card-body {
padding: 15px;
}
.contact-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}
.social-links-contact {
gap: 10px;
}
.social-link-contact {
width: 40px;
height: 40px;
font-size: 1rem;
}
.security-badges {
padding: 1rem;
}
.security-badge {
margin: 0 0.5rem;
font-size: 0.8rem;
}
}
@media (max-width: 575.98px) {
.checkout-step {
padding: 0.75rem;
}
.step-header {
flex-direction: column;
text-align: center;
}
.step-number {
margin: 0 auto 1rem;
}
.payment-method {
padding: 0.75rem;
}
.order-summary {
padding: 1rem;
}
.order-item-image {
width: 40px;
height: 40px;
}
.contact-info-item {
flex-direction: column;
text-align: center;
gap: 10px;
}
.contact-icon {
margin-right: 0;
margin-bottom: 10px;
}
.captcha-container {
padding: 15px;
}
.btn-send {
width: 100%;
border-radius: var(--border-radius);
}
}
/* === MEJORAS DE ACCESIBILIDAD === */
.checkout-step:focus-within,
.contact-card:focus-within {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
.payment-method:focus-within {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.contact-info-item:focus-within {
border-color: var(--primary-color);
background: var(--primary-light);
}
/* === ANIMACIONES === */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.checkout-step,
.contact-card {
animation: slideInUp 0.6s ease forwards;
}
.checkout-step:nth-child(2) { animation-delay: 0.1s; }
.checkout-step:nth-child(3) { animation-delay: 0.2s; }
.checkout-step:nth-child(4) { animation-delay: 0.3s; }
/* ===================================================================
CSS ADICIONAL PARA DASHBOARD -
================================================================== */
/* === DASHBOARD COMPACTO === */
.dashboard-header-compact {
background: var(--primary-gradient);
color: white;
padding: 2rem 0;
position: relative;
overflow: hidden;
}
.dashboard-header-compact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
animation: floating-dots 15s linear infinite;
}
.dashboard-welcome {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--border-radius);
padding: 1.5rem;
position: relative;
z-index: 2;
}
.dashboard-avatar {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-right: 1rem;
flex-shrink: 0;
border: 2px solid rgba(255, 255, 255, 0.3);
}
/* === ESTADÍSTICAS COMPACTAS === */
.dashboard-stats {
margin: 2rem 0;
}
.stats-card-compact {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
transition: var(--transition);
height: 100%;
border-left: 4px solid var(--primary-color);
}
.stats-card-compact:hover {
transform: translateY(-3px);
box-shadow: var(--box-shadow-lg);
border-color: var(--primary-color);
}
.stats-icon-compact {
width: 50px;
height: 50px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
margin: 0 auto 1rem;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.stats-number-compact {
font-size: 1.8rem;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 0.5rem;
line-height: 1;
}
.stats-label-compact {
color: var(--secondary-color);
font-size: 0.9rem;
font-weight: 600;
margin: 0;
}
/* === ACCIONES RÁPIDAS COMPACTAS === */
.quick-actions-compact {
margin: 2rem 0;
}
.action-card-compact {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 1.5rem;
text-align: center;
text-decoration: none;
color: var(--dark-color);
transition: var(--transition);
height: 100%;
display: block;
border-left: 4px solid var(--primary-color);
}
.action-card-compact:hover {
color: var(--primary-color);
transform: translateY(-3px);
box-shadow: var(--box-shadow-lg);
border-color: var(--primary-color);
}
.action-icon-compact {
width: 50px;
height: 50px;
background: var(--primary-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 1.2rem;
margin: 0 auto 1rem;
transition: var(--transition);
}
.action-card-compact:hover .action-icon-compact {
background: var(--primary-gradient);
color: white;
transform: scale(1.1);
}
.action-title-compact {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: inherit;
}
.action-description-compact {
font-size: 0.85rem;
color: var(--secondary-color);
margin: 0;
line-height: 1.4;
}
/* === SECCIONES PRINCIPALES === */
.dashboard-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
margin-bottom: 2rem;
box-shadow: var(--box-shadow);
border-left: 4px solid var(--primary-color);
}
.dashboard-section:hover {
transform: translateY(-2px);
box-shadow: var(--box-shadow-lg);
}
.section-header-compact {
padding: 1.5rem;
border-bottom: 1px solid rgba(30, 64, 175, 0.1);
background: rgba(30, 64, 175, 0.02);
}
.section-body-compact {
padding: 1.5rem;
}
.section-title-compact {
font-size: 1.25rem;
font-weight: 700;
color: var(--dark-color);
margin: 0;
display: flex;
align-items: center;
}
.section-icon-compact {
width: 35px;
height: 35px;
background: var(--primary-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
margin-right: 1rem;
flex-shrink: 0;
}
/* === PRODUCTOS DEL USUARIO === */
.user-product-item {
background: var(--light-color);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
padding: 1.5rem;
margin-bottom: 1rem;
transition: var(--transition);
}
.user-product-item:hover {
background: rgba(255, 255, 255, 0.9);
border-color: var(--primary-color);
transform: translateX(3px);
}
.product-image-compact {
width: 60px;
height: 60px;
border-radius: 8px;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
flex-shrink: 0;
border: 2px solid var(--primary-light);
}
.product-image-compact img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
.product-info-compact {
flex: 1;
}
.product-title-compact {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--dark-color);
}
.product-title-compact a {
color: var(--primary-color);
text-decoration: none;
transition: var(--transition);
}
.product-title-compact a:hover {
color: var(--primary-hover);
}
.product-meta-compact {
font-size: 0.85rem;
color: var(--secondary-color);
margin-bottom: 1rem;
}
.license-info-compact {
background: rgba(30, 64, 175, 0.05);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: 6px;
padding: 0.75rem;
font-size: 0.85rem;
margin-top: 1rem;
}
/* === SIDEBAR COMPACTO === */
.sidebar-card-compact {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(15px);
border: 1px solid rgba(30, 64, 175, 0.1);
border-radius: var(--border-radius);
margin-bottom: 1.5rem;
box-shadow: var(--box-shadow);
border-left: 4px solid var(--primary-color);
}
.sidebar-header-compact {
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(30, 64, 175, 0.1);
background: rgb(30 64 175 / 34%);
}
.sidebar-body-compact {
padding: 1.5rem;
}
.order-item-compact {
padding: 1rem;
border: 1px solid #e9ecef;
border-radius: 6px;
margin-bottom: 1rem;
transition: var(--transition);
}
.order-item-compact:hover {
border-color: var(--primary-color);
background: rgba(30, 64, 175, 0.02);
}
.recommended-item-compact {
display: flex;
align-items: center;
padding: 1rem;
border: 1px solid #e9ecef;
border-radius: 6px;
margin-bottom: 1rem;
transition: var(--transition);
text-decoration: none;
color: inherit;
}
.recommended-item-compact:hover {
border-color: var(--primary-color);
background: rgba(30, 64, 175, 0.02);
color: inherit;
transform: translateX(3px);
}
.recommended-image-compact {
width: 40px;
height: 40px;
border-radius: 6px;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
flex-shrink: 0;
}
.recommended-image-compact img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
}
.empty-state-compact {
text-align: center;
padding: 2rem 1rem;
color: var(--secondary-color);
}
.empty-icon-compact {
width: 60px;
height: 60px;
background: var(--light-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin: 0 auto 1rem;
color: var(--secondary-color);
}
/* === RESPONSIVE === */
@media (max-width: 991.98px) {
.dashboard-header-compact {
padding: 1.5rem 0;
}
.dashboard-welcome {
padding: 1rem;
}
.dashboard-avatar {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.stats-card-compact,
.action-card-compact {
padding: 1rem;
margin-bottom: 1rem;
}
.stats-icon-compact,
.action-icon-compact {
width: 40px;
height: 40px;
font-size: 1rem;
}
.stats-number-compact {
font-size: 1.5rem;
}
}
@media (max-width: 767.98px) {
.dashboard-header-compact {
padding: 1rem 0;
}
.dashboard-welcome {
padding: 0.75rem;
text-align: center;
}
.dashboard-welcome .d-flex {
flex-direction: column;
align-items: center;
}
.dashboard-avatar {
margin-right: 0;
margin-bottom: 1rem;
}
.section-header-compact,
.section-body-compact,
.sidebar-header-compact,
.sidebar-body-compact {
padding: 1rem;
}
.user-product-item {
padding: 1rem;
}
.product-image-compact {
width: 50px;
height: 50px;
}
.stats-number-compact {
font-size: 1.3rem;
}
.stats-label-compact {
font-size: 0.8rem;
}
}
@media (max-width: 575.98px) {
.dashboard-header-compact {
padding: 0.75rem 0;
}
.stats-card-compact,
.action-card-compact {
padding: 0.75rem;
margin-bottom: 0.75rem;
}
.stats-icon-compact,
.action-icon-compact {
width: 35px;
height: 35px;
font-size: 0.9rem;
margin-bottom: 0.75rem;
}
.stats-number-compact {
font-size: 1.2rem;
}
.action-title-compact {
font-size: 0.9rem;
}
.action-description-compact {
font-size: 0.8rem;
}
.user-product-item .d-flex {
flex-direction: column;
text-align: center;
}
.product-image-compact {
margin: 0 auto 1rem;
}
}
/* === ANIMACIONES === */
@keyframes dashboardFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dashboard-section,
.stats-card-compact,
.action-card-compact,
.sidebar-card-compact {
animation: dashboardFadeIn 0.6s ease forwards;
}
.stats-card-compact:nth-child(2) { animation-delay: 0.1s; }
.stats-card-compact:nth-child(3) { animation-delay: 0.2s; }
.stats-card-compact:nth-child(4) { animation-delay: 0.3s; }
.stats-card-compact:nth-child(5) { animation-delay: 0.4s; }
.action-card-compact:nth-child(2) { animation-delay: 0.1s; }
.action-card-compact:nth-child(3) { animation-delay: 0.2s; }
.action-card-compact:nth-child(4) { animation-delay: 0.3s; }
.action-card-compact:nth-child(5) { animation-delay: 0.4s; }
/* === SOLUCIÓN EXTREMA PARA DROPDOWN === */
.user-menu-simple .dropdown-menu {
position: fixed !important;
z-index: 9999 !important;
top: auto !important;
/* right: 20px !important; */
left: auto !important;
transform: none !important;
}
/* Calcular posición correcta del dropdown */
.user-menu-simple .dropdown.show .dropdown-menu {
position: fixed !important;
top: 60px !important; /* Ajusta según la altura de tu header */
right: 20px !important;
z-index: 9999 !important;
display: block !important;
}
/* Asegurar que todo el header esté por encima */
.main-header * {
position: relative;
/* z-index: 9998 !important; */
}
/* Forzar que todo lo demás esté por debajo */
/* .container:not(.main-header .container),
.dashboard-header-compact,
.hero-carousel-section,
body > *:not(.main-header) {
z-index: 0 !important;
} */
/* ===================================================================
CSS COMPACTO PARA CONTENIDO DE USUARIO - AGREGAR A STYLE.CSS
================================================================== */
/* === CONTENIDO DE PÁGINAS DINÁMICAS COMPACTO === */
.user-content {
font-size: 1rem;
line-height: 1.6;
color: var(--dark-color);
}
.user-content h1,
.user-content h2,
.user-content h3,
.user-content h4,
.user-content h5,
.user-content h6 {
color: var(--dark-color);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-weight: 700;
}
.user-content h1 {
border-bottom: 2px solid var(--primary-color);
padding-bottom: 0.5rem;
font-size: 1.75rem;
}
.user-content h2 {
border-left: 3px solid var(--primary-color);
padding-left: 1rem;
font-size: 1.5rem;
}
.user-content h3 {
font-size: 1.25rem;
color: var(--primary-color);
}
.user-content h4 {
font-size: 1.1rem;
}
.user-content h5,
.user-content h6 {
font-size: 1rem;
}
.user-content p {
margin-bottom: 1rem;
text-align: justify;
}
.user-content ul,
.user-content ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.user-content li {
margin-bottom: 0.25rem;
}
.user-content blockquote {
border-left: 3px solid var(--primary-color);
background: var(--light-color);
padding: 1rem;
margin: 1rem 0;
font-style: italic;
border-radius: var(--border-radius);
}
.user-content img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
margin: 1rem 0;
}
.user-content table {
width: 100%;
margin: 1rem 0;
border-collapse: collapse;
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--box-shadow);
font-size: 0.9rem;
}
.user-content table th,
.user-content table td {
padding: 0.75rem;
border: 1px solid rgba(30, 64, 175, 0.1);
text-align: left;
}
.user-content table th {
background: var(--primary-light);
font-weight: 600;
color: var(--primary-color);
}
.user-content code {
background: var(--light-color);
padding: 2px 4px;
border-radius: 3px;
font-family: 'Courier New', monospace;
color: var(--primary-color);
border: 1px solid rgba(30, 64, 175, 0.1);
font-size: 0.9rem;
}
.user-content pre {
background: var(--light-color);
padding: 1rem;
border-radius: var(--border-radius);
overflow-x: auto;
margin: 1rem 0;
border: 1px solid rgba(30, 64, 175, 0.1);
font-size: 0.9rem;
}
.user-content pre code {
background: none;
padding: 0;
border: none;
}
.user-content a {
color: var(--primary-color);
transition: var(--transition);
}
.user-content a:hover {
color: var(--primary-hover);
}
/* === HACER EL CONTENIDO MÁS COMPACTO === */
.user-content > *:first-child {
margin-top: 0;
}
.user-content > *:last-child {
margin-bottom: 0;
}
/* === RESPONSIVE COMPACTO === */
@media (max-width: 768px) {
.user-content {
font-size: 0.95rem;
line-height: 1.5;
}
.user-content h1 {
font-size: 1.5rem;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.user-content h2 {
font-size: 1.3rem;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.user-content h3 {
font-size: 1.1rem;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
.user-content h4,
.user-content h5,
.user-content h6 {
font-size: 1rem;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
.user-content p {
text-align: left;
margin-bottom: 0.75rem;
}
.user-content ul,
.user-content ol {
margin-bottom: 0.75rem;
}
.user-content blockquote {
padding: 0.75rem;
margin: 0.75rem 0;
}
.user-content table th,
.user-content table td {
padding: 0.5rem;
}
.user-content pre {
padding: 0.75rem;
margin: 0.75rem 0;
}
}
/* === SOLUCIÓN SIMPLE PARA PÁGINAS SIN CONFLICTOS === */
.page-content-wrapper {
margin-bottom: 100px; /* Espacio antes del footer */
}
.main-page-container {
padding-bottom: 50px; /* Padding extra */
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.page-content-wrapper {
margin-bottom: 80px;
}
.main-page-container {
padding-bottom: 30px;
}
}