/* ===== TECHNOLOGY PAGES STYLES ===== */
/* Estilos comunes para todas las páginas de tecnología */

/* Base styles for technology pages */
body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-secondary);
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Ensure container works properly on all pages */
.javascript-page .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Technology Header Styles */
.tech-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.tech-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: techFloat 8s ease-in-out infinite;
}

@keyframes techFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(2deg); }
    50% { transform: translateY(-5px) rotate(-1deg); }
    75% { transform: translateY(-25px) rotate(1deg); }
}

.tech-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
    animation: techPulse 3s ease-in-out infinite;
    position: relative;
}

.tech-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: techRipple 4s ease-out infinite;
}

@keyframes techPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes techRipple {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.header-content {
    text-align: center;
    animation: fadeInUp 1.2s ease-out;
}

.header-content h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.header-content p {
    font-size: 1.3rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Elements */
.tech-floating-element {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: techElementFloat 10s ease-in-out infinite;
}

.tech-floating-element:nth-child(1) {
    width: 12px;
    height: 12px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.tech-floating-element:nth-child(2) {
    width: 8px;
    height: 8px;
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.tech-floating-element:nth-child(3) {
    width: 15px;
    height: 15px;
    bottom: 30%;
    left: 25%;
    animation-delay: 4s;
}

.tech-floating-element:nth-child(4) {
    width: 6px;
    height: 6px;
    top: 40%;
    right: 35%;
    animation-delay: 6s;
}

@keyframes techElementFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    25% { 
        transform: translateY(-30px) rotate(90deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(-15px) rotate(180deg);
        opacity: 0.8;
    }
    75% { 
        transform: translateY(-40px) rotate(270deg);
        opacity: 0.4;
    }
}

/* Main Content */
.main-content {
    padding: 4rem 0;
}

.section {
    background: var(--bg-primary);
    border-radius: var(--border-radius);
    padding: 3rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
}

.section h2 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.section p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.7;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-card {
    background: var(--bg-secondary);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.feature-card p {
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.stat-card {
    text-align: center;
    padding: 2.5rem;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Code Examples */
.code-example {
    background: #1e293b;
    color: #e2e8f0;
    padding: 2rem;
    border-radius: var(--border-radius);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.code-example .keyword {
    color: #f87171;
}

.code-example .string {
    color: #34d399;
}

.code-example .comment {
    color: #6b7280;
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.resource-card {
    background: var(--bg-secondary);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
}

.resource-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.resource-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.resource-card p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-align: center;
    padding: 4rem 3rem;
    border-radius: var(--border-radius);
    margin-top: 3rem;
}

.cta-section h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.cta-section p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary {
    background: white;
    color: var(--primary-color);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .tech-header {
        min-height: 30vh;
        padding: 1.5rem 0;
    }
    
    .tech-icon {
        font-size: 3.5rem;
    }
    
    .header-content h1 {
        font-size: 2rem;
    }
    
    .header-content p {
        font-size: 1.1rem;
        padding: 0 1rem;
    }
    
    .section {
        padding: 2rem 1.5rem;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .tech-floating-element {
        display: none;
    }
} 

/* ===== JAVASCRIPT PAGE SPECIFIC STYLES ===== */
/* Estilos específicos para la página de JavaScript */

/* JavaScript specific variables - scoped to avoid conflicts with components */
.javascript-page {
    --js-primary-color: #f7df1e;
    --js-secondary-color: #323330;
    --js-accent-color: #f0db4f;
    --js-text-color: #333;
    --js-light-bg: #f8f9fa;
    --js-border-color: #e9ecef;
    --js-gradient-primary: linear-gradient(135deg, #f7df1e 0%, #f0db4f 100%);
    --js-gradient-secondary: linear-gradient(135deg, #323330 0%, #4a4a4a 100%);
}

body.javascript-page {
    color: var(--js-text-color);
    background-color: #fff;
}

/* JavaScript Header */
.javascript-header {
    background: var(--js-gradient-primary);
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
}

.javascript-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(247, 223, 30, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(240, 219, 79, 0.3) 0%, transparent 50%);
    animation: float 6s ease-in-out infinite;
}

.javascript-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(90deg, transparent 98%, rgba(50, 51, 48, 0.1) 100%),
        linear-gradient(0deg, transparent 98%, rgba(50, 51, 48, 0.1) 100%);
    background-size: 50px 50px;
    animation: slide 20s linear infinite;
}

.javascript-header-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.javascript-header i {
    font-size: 4rem;
    color: var(--js-secondary-color);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    animation: pulse 2s ease-in-out infinite;
    position: relative;
}

.javascript-header i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 2px solid var(--js-secondary-color);
    border-radius: 50%;
    animation: ripple 2s ease-out infinite;
}

.javascript-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--js-secondary-color);
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.javascript-header p {
    font-size: 1.1rem;
    color: var(--js-secondary-color);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 1s ease-out;
}

/* JavaScript Content Sections */
.javascript-page .content-section h2 {
    color: var(--js-secondary-color);
}

.javascript-page .content-section h2::before {
    background: var(--js-gradient-primary);
}

.javascript-page .content-section h3 {
    color: var(--js-secondary-color);
}

/* Override base section styles for JavaScript page */
.javascript-page .section {
    background: white;
    border-radius: 12px;
    padding: 3rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ensure content sections have proper spacing */
.javascript-page .content-section {
    margin-bottom: 3rem;
}

.javascript-page .section h2 {
    color: var(--js-secondary-color);
}

.javascript-page .section h3 {
    color: var(--js-secondary-color);
}

.javascript-page .section p {
    color: var(--js-text-color);
}

.javascript-page .section ul {
    color: var(--js-text-color);
    margin-bottom: 1rem;
}

.javascript-page .section li {
    color: var(--js-text-color);
    margin-bottom: 0.5rem;
}

/* JavaScript specific components */
.highlight-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-left: 4px solid var(--js-primary-color);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.javascript-page .code-example {
    background: var(--js-secondary-color);
    color: #f8f8f2;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 1rem 0;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    position: relative;
}

.javascript-page .code-example::before {
    content: 'JavaScript';
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    background: var(--js-primary-color);
    color: var(--js-secondary-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.javascript-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.javascript-page .comparison-table th {
    background: var(--js-gradient-primary);
    color: var(--js-secondary-color);
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid var(--js-primary-color);
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.javascript-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--js-border-color);
    color: var(--js-text-color);
}

.javascript-page .comparison-table tr:hover {
    background: var(--js-light-bg);
}

.javascript-page .faq-item {
    background: white;
    border: 1px solid var(--js-border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.javascript-page .faq-question {
    background: var(--js-light-bg);
    padding: 1.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--js-secondary-color);
    transition: background-color 0.3s ease;
}

.javascript-page .faq-question:hover {
    background: #e9ecef;
}

.javascript-page .faq-answer {
    padding: 1.5rem;
    border-top: 1px solid var(--js-border-color);
    display: none;
}

.javascript-page .faq-answer.active {
    display: block;
}

/* JavaScript CTA Section */
.javascript-page .cta-section {
    background: linear-gradient(135deg, var(--js-primary-color), var(--js-secondary-color));
    color: white;
    text-align: center;
    padding: 4rem 3rem;
    border-radius: 8px;
    margin-top: 3rem;
}

.javascript-page .btn-primary {
    background: white;
    color: var(--js-secondary-color);
    transition: all 0.4s ease;
}

.javascript-page .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.javascript-page .btn-secondary:hover {
    background: white;
    color: var(--js-secondary-color);
}

.javascript-page .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.javascript-page .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.javascript-page .btn-secondary:hover {
    background: white;
    color: var(--js-secondary-color);
}

/* JavaScript specific animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

@keyframes slide {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-50px) translateY(-50px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes ripple {
    0% {
        width: 60px;
        height: 60px;
        opacity: 1;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
    }
}

/* JavaScript responsive design */
@media (max-width: 768px) {
    .javascript-header h1 {
        font-size: 2rem;
    }

    .javascript-header p {
        font-size: 1rem;
    }

    .javascript-page .main-content {
        padding: 2rem 1rem;
    }

    .javascript-page .content-section h2 {
        font-size: 1.75rem;
    }

    .javascript-page .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
} 

/* ========================================
   ESTILOS ESPECÍFICOS PARA WORDPRESS
   ======================================== */

/* WordPress Header con efecto diferente */
.wordpress-header {
    background: linear-gradient(135deg, #21759b 0%, #464646 50%, #21759b 100%);
    color: white;
    padding: 2rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.wordpress-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: wordpressFloat 8s ease-in-out infinite;
}

@keyframes wordpressFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(2deg); }
    50% { transform: translateY(-5px) rotate(-1deg); }
    75% { transform: translateY(-25px) rotate(1deg); }
}

.wordpress-icon {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
    animation: wordpressPulse 3s ease-in-out infinite;
    position: relative;
}

.wordpress-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: wordpressRipple 4s ease-out infinite;
}

@keyframes wordpressPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes wordpressRipple {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* Elementos flotantes específicos de WordPress */
.wp-floating-element {
    position: absolute;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: wpFloat 10s ease-in-out infinite;
}

.wp-floating-element:nth-child(1) {
    width: 12px;
    height: 12px;
    top: 20%;
    left: 15%;
    animation-delay: 0s;
}

.wp-floating-element:nth-child(2) {
    width: 8px;
    height: 8px;
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.wp-floating-element:nth-child(3) {
    width: 15px;
    height: 15px;
    bottom: 30%;
    left: 25%;
    animation-delay: 4s;
}

.wp-floating-element:nth-child(4) {
    width: 6px;
    height: 6px;
    top: 40%;
    right: 35%;
    animation-delay: 6s;
}

@keyframes wpFloat {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    25% { 
        transform: translateY(-30px) rotate(90deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(-15px) rotate(180deg);
        opacity: 0.8;
    }
    75% { 
        transform: translateY(-40px) rotate(270deg);
        opacity: 0.4;
    }
}

/* Estilos específicos para secciones de WordPress */
.wordpress-page .section h2 {
    color: #21759b;
}

.wordpress-page .feature-card h4 {
    color: #21759b;
}

.wordpress-page .stat-number {
    color: #21759b;
}

.wordpress-page .cta-section {
    background: linear-gradient(135deg, #21759b, #464646);
}

.wordpress-page .btn-primary {
    color: #21759b;
    transition: all 0.4s ease;
}

.wordpress-page .btn-secondary:hover {
    color: #21759b;
}

/* Responsive para WordPress */
@media (max-width: 768px) {
    .wordpress-header {
        min-height: 30vh;
        padding: 1.5rem 0;
    }
    
    .wordpress-icon {
        font-size: 3.5rem;
    }
    
    .wp-floating-element {
        display: none;
    }
} 

/* ========================================
   ESTILOS ESPECÍFICOS PARA PHP
   ======================================== */

/* PHP Header con efecto diferente */
.php-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
    min-height: 30vh;
    display: flex;
    align-items: center;
    margin-top: 80px;
}

.php-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
    animation: phpFloat 6s ease-in-out infinite;
}

.php-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.2;
    animation: phpSlide 20s linear infinite;
}

@keyframes phpFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-20px) rotate(1deg); }
    66% { transform: translateY(10px) rotate(-1deg); }
}

@keyframes phpSlide {
    0% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(-10px) translateY(-10px); }
}

.php-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ff6b6b;
    text-shadow: 0 0 30px rgba(255, 107, 107, 0.5);
    animation: phpPulse 2s ease-in-out infinite;
    position: relative;
}

.php-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: phpRipple 3s ease-out infinite;
}

@keyframes phpPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes phpRipple {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Elementos flotantes específicos de PHP */
.php-floating-element {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: phpFloatElement 8s ease-in-out infinite;
    z-index: 1;
}

.php-floating-element:nth-child(2) {
    width: 8px;
    height: 8px;
    background: rgba(255, 107, 107, 0.7);
}

.php-floating-element:nth-child(3) {
    width: 4px;
    height: 4px;
    background: rgba(120, 219, 255, 0.8);
}

.php-floating-element:nth-child(4) {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
}

@keyframes phpFloatElement {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    25% { 
        transform: translateY(-20px) rotate(90deg);
        opacity: 1;
    }
    50% { 
        transform: translateY(-10px) rotate(180deg);
        opacity: 0.8;
    }
    75% { 
        transform: translateY(-30px) rotate(270deg);
        opacity: 0.4;
    }
}

/* Estilos específicos para secciones de PHP */
.php-page .section h2 {
    color: var(--primary-color);
}

.php-page .feature-card h4 {
    color: var(--primary-color);
}

.php-page .stat-number {
    color: var(--primary-color);
}

.php-page .cta-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

.php-page .btn-primary {
    color: var(--primary-color);
}

.php-page .btn-secondary:hover {
    color: var(--primary-color);
}

/* PHP Comparison Table Styles */
.php-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.php-page .comparison-table th {
    background: linear-gradient(135deg, #777bb4 0%, #6c5ce7 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #777bb4;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.php-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.php-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para PHP */
@media (max-width: 768px) {
    .php-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .php-icon {
        font-size: 3rem;
    }
    
    .php-floating-element {
        display: none;
    }
    
    .php-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .php-page .comparison-table th,
    .php-page .comparison-table td {
        padding: 0.75rem;
    }
} 

/* Responsive para JavaScript */
@media (max-width: 768px) {
    .javascript-header {
        min-height: 25vh;
        padding: 1rem;
        margin-top: 70px;
    }
    
    .javascript-header i {
        font-size: 3rem;
    }
    
    .javascript-header h1 {
        font-size: 2rem;
    }
    
    .javascript-header p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .javascript-page .section {
        padding: 2rem 1.5rem;
    }
    
    .javascript-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .javascript-page .comparison-table th,
    .javascript-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* WordPress Comparison Table Styles */
.wordpress-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wordpress-page .comparison-table th {
    background: linear-gradient(135deg, #21759b 0%, #0073aa 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #21759b;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.wordpress-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.wordpress-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para WordPress */
@media (max-width: 768px) {
    .wordpress-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .wordpress-icon {
        font-size: 3rem;
    }
    
    .wp-floating-element {
        display: none;
    }
    
    .wordpress-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .wordpress-page .comparison-table th,
    .wordpress-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* PrestaShop Header Styles */
.prestashop-header {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.prestashop-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="90" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.ps-floating-element {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.ps-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.ps-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.ps-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.ps-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.prestashop-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.prestashop-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.prestashop-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* PrestaShop Page Styles */
.prestashop-page .section h2 {
    color: #ff6b35;
}

.prestashop-page .btn-primary {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border: none;
    transition: all 0.4s ease;
}

.prestashop-page .btn-primary:hover {
    background: linear-gradient(135deg, #f7931e 0%, #ff6b35 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.prestashop-page .btn-secondary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    transition: all 0.3s ease;
}

.prestashop-page .btn-primary {
    color: white;
}

.prestashop-page .btn-secondary:hover {
    background: #FB7D2A;
    border-color: #FB7D2A;
    color: white;
}

/* PrestaShop Comparison Table Styles */
.prestashop-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.prestashop-page .comparison-table th {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #ff6b35;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.prestashop-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.prestashop-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para PrestaShop */
@media (max-width: 768px) {
    .prestashop-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .prestashop-icon {
        font-size: 3rem;
    }
    
    .ps-floating-element {
        display: none;
    }
    
    .prestashop-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .prestashop-page .comparison-table th,
    .prestashop-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* SQL Header Styles */
.sql-header {
    background: linear-gradient(135deg, #336791 0%, #1e3a8a 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.sql-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="10" y="10" width="8" height="8" fill="rgba(255,255,255,0.1)"/><rect x="30" y="25" width="6" height="6" fill="rgba(255,255,255,0.1)"/><rect x="60" y="15" width="10" height="10" fill="rgba(255,255,255,0.1)"/><rect x="80" y="35" width="7" height="7" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.sql-floating-element {
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    animation: float 15s ease-in-out infinite;
}

.sql-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.sql-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.sql-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.sql-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

/* Partículas de datos SQL */
.data-particle {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(51, 103, 145, 0.2);
    padding: 0.3rem 0.6rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    animation: dataFloat 8s ease-in-out infinite;
    z-index: 1;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.data-particle::before {
    content: attr(data-text);
}

.data-particle:nth-child(1) { top: 10%; left: 3%; animation-delay: 0s; }
.data-particle:nth-child(2) { top: 20%; right: 5%; animation-delay: 1s; }
.data-particle:nth-child(3) { top: 30%; left: 8%; animation-delay: 2s; }
.data-particle:nth-child(4) { top: 40%; right: 8%; animation-delay: 3s; }
.data-particle:nth-child(5) { top: 50%; left: 5%; animation-delay: 4s; }
.data-particle:nth-child(6) { top: 60%; right: 3%; animation-delay: 5s; }
.data-particle:nth-child(7) { top: 70%; left: 10%; animation-delay: 6s; }
.data-particle:nth-child(8) { top: 80%; right: 10%; animation-delay: 7s; }
.data-particle:nth-child(9) { top: 15%; left: 85%; animation-delay: 8s; }
.data-particle:nth-child(10) { top: 25%; right: 85%; animation-delay: 9s; }
.data-particle:nth-child(11) { top: 35%; left: 90%; animation-delay: 10s; }
.data-particle:nth-child(12) { top: 45%; right: 90%; animation-delay: 11s; }
.data-particle:nth-child(13) { top: 55%; left: 88%; animation-delay: 12s; }
.data-particle:nth-child(14) { top: 65%; right: 88%; animation-delay: 13s; }
.data-particle:nth-child(15) { top: 75%; left: 85%; animation-delay: 14s; }
.data-particle:nth-child(16) { top: 85%; right: 85%; animation-delay: 15s; }
.data-particle:nth-child(17) { top: 90%; left: 92%; animation-delay: 16s; }

@keyframes dataFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
        background: rgba(51, 103, 145, 0.2);
    }
    25% {
        transform: translateY(-10px) rotate(2deg);
        opacity: 0.9;
        background: rgba(51, 103, 145, 0.4);
    }
    50% {
        transform: translateY(-5px) rotate(-1deg);
        opacity: 0.8;
        background: rgba(51, 103, 145, 0.3);
    }
    75% {
        transform: translateY(-15px) rotate(1deg);
        opacity: 0.6;
        background: rgba(51, 103, 145, 0.2);
    }
}

/* Efecto hover en las partículas */
.data-particle:hover {
    transform: scale(1.1);
    background: rgba(51, 103, 145, 0.6);
    color: white;
    box-shadow: 0 4px 20px rgba(51, 103, 145, 0.4);
    transition: all 0.3s ease;
}

.sql-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: databasePulse 3s ease-in-out infinite;
}

.sql-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: databaseGlow 4s ease-in-out infinite;
    z-index: -1;
}

.sql-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: databaseRing 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes databasePulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.2);
    }
}

@keyframes databaseGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes databaseRing {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

.sql-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.sql-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* SQL Page Styles */
.sql-page .section h2 {
    color: #336791;
}

.sql-page .btn-primary {
    background: linear-gradient(135deg, #336791 0%, #1e3a8a 100%);
    border: none;
    color: white;
    transition: all 0.4s ease;
}

.sql-page .btn-primary:hover {
    background: linear-gradient(135deg, #1e3a8a 0%, #336791 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(51, 103, 145, 0.3);
}

.sql-page .btn-secondary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    transition: all 0.3s ease;
}

.sql-page .btn-secondary:hover {
    background: #264C8D;
    border-color: #264C8D;
    color: white;
}

/* SQL Comparison Table Styles */
.sql-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sql-page .comparison-table th {
    background: linear-gradient(135deg, #336791 0%, #1e3a8a 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #336791;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.sql-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.sql-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para SQL */
@media (max-width: 768px) {
    .sql-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .sql-icon {
        font-size: 3rem;
    }
    
    .sql-floating-element {
        display: none;
    }
    
    .data-particle {
        display: none;
    }
    
    .sql-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .sql-page .comparison-table th,
    .sql-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* Laravel Header Styles */
.laravel-header {
    background: linear-gradient(135deg, #ff2d20 0%, #f4645f 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.laravel-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 L30,30 L40,20 L50,30 L60,20 L70,30 L80,20" stroke="rgba(255,255,255,0.1)" fill="none" stroke-width="2"/><path d="M25,40 L35,50 L45,40 L55,50 L65,40 L75,50" stroke="rgba(255,255,255,0.1)" fill="none" stroke-width="2"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.laravel-floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.laravel-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.laravel-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.laravel-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.laravel-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.laravel-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: laravelFloat 4s ease-in-out infinite;
}



.laravel-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: laravelGlow 6s ease-in-out infinite;
    z-index: -1;
}

@keyframes laravelFloat {
    0%, 100% {
        transform: scale(1) translateY(0px);
        filter: brightness(1) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    }
    25% {
        transform: scale(1.05) translateY(-5px);
        filter: brightness(1.1) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    }
    50% {
        transform: scale(1.1) translateY(-8px);
        filter: brightness(1.2) drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
    }
    75% {
        transform: scale(1.05) translateY(-3px);
        filter: brightness(1.1) drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.4));
    }
}

@keyframes laravelGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.3);
    }
}

.laravel-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.laravel-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Laravel Page Styles */
.laravel-page .section h2 {
    color: #ff2d20;
}

.laravel-page .btn-primary {
    background: linear-gradient(135deg, #ff2d20 0%, #f4645f 100%);
    border: none;
    color: white;
    transition: all 0.4s ease;
}

.laravel-page .btn-primary:hover {
    background: linear-gradient(135deg, #f4645f 0%, #ff2d20 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 45, 32, 0.3);
}

.laravel-page .btn-secondary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    transition: all 0.3s ease;
}

.laravel-page .btn-secondary:hover {
    background: #FB4035;
    border-color: #FB4035;
    color: white;
}

/* Laravel Comparison Table Styles */
.laravel-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.laravel-page .comparison-table th {
    background: linear-gradient(135deg, #ff2d20 0%, #f4645f 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #ff2d20;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.laravel-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.laravel-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para Laravel */
@media (max-width: 768px) {
    .laravel-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .laravel-icon {
        font-size: 3rem;
    }
    
    .laravel-floating-element {
        display: none;
    }
    
    .laravel-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .laravel-page .comparison-table th,
    .laravel-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* React Header Styles */
.react-header {
    background: linear-gradient(135deg, #61dafb 0%, #282c34 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.react-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="rgba(97,218,251,0.2)"/><circle cx="80" cy="30" r="2" fill="rgba(97,218,251,0.2)"/><circle cx="40" cy="70" r="2.5" fill="rgba(97,218,251,0.2)"/><circle cx="70" cy="80" r="2" fill="rgba(97,218,251,0.2)"/><circle cx="10" cy="60" r="1.5" fill="rgba(97,218,251,0.2)"/><circle cx="90" cy="10" r="1.5" fill="rgba(97,218,251,0.2)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.react-floating-element {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(97, 218, 251, 0.2);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.react-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.react-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.react-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.react-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.react-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: reactSpin 8s linear infinite;
}

.react-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(97,218,251,0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: reactGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes reactSpin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes reactGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.react-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.react-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* React Page Styles */
.react-page .section h2 {
    color: #61dafb;
}

.react-page .btn-primary {
    background: linear-gradient(135deg, #61dafb 0%, #282c34 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
}

.react-page .btn-primary:hover {
    background: linear-gradient(135deg, #7de8ff 0%, #3a4a5a 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 218, 251, 0.3);
}

.react-page .btn-secondary {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    transition: all 0.3s ease;
}

.react-page .btn-secondary:hover {
    background: #3E5464;
    border-color: #3E5464;
    color: white;
}

/* React Comparison Table Styles */
.react-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.react-page .comparison-table th {
    background: linear-gradient(135deg, #61dafb 0%, #282c34 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #61dafb;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.react-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.react-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para React */
@media (max-width: 768px) {
    .react-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .react-icon {
        font-size: 3rem;
    }
    
    .react-floating-element {
        display: none;
    }
    
    .react-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .react-page .comparison-table th,
    .react-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* Python Header Styles */
.python-header {
    background: linear-gradient(135deg, #3776ab 0%, #ffd43b 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.python-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M5,15 Q25,5 45,15 T85,15" stroke="rgba(255,212,59,0.15)" fill="none" stroke-width="1"/><path d="M15,25 Q35,15 55,25 T95,25" stroke="rgba(255,212,59,0.15)" fill="none" stroke-width="1"/><path d="M10,75 Q30,65 50,75 T90,75" stroke="rgba(255,212,59,0.15)" fill="none" stroke-width="1"/><path d="M20,85 Q40,75 60,85 T100,85" stroke="rgba(255,212,59,0.15)" fill="none" stroke-width="1"/><path d="M5,45 Q25,35 45,45 T85,45" stroke="rgba(255,212,59,0.15)" fill="none" stroke-width="1"/><path d="M15,55 Q35,45 55,55 T95,55" stroke="rgba(255,212,59,0.15)" fill="none" stroke-width="1"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.python-floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 212, 59, 0.2);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.python-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.python-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.python-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.python-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.python-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: pythonBounce 3s ease-in-out infinite;
}

.python-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,212,59,0.3) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pythonGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes pythonBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes pythonGlow {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.python-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.python-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Python Page Styles */
.python-page .section h2 {
    color: #3776ab;
}

.python-page .btn-primary {
    background: linear-gradient(135deg, #658C92 0%, #829980 50%, #8C9E7C 100%);
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.python-page .btn-primary:hover {
    background: linear-gradient(135deg, #8C9E7C 0%, #829980 50%, #658C92 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(101, 140, 146, 0.4);
}

.python-page .btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.python-page .btn-secondary:hover {
    background: #E5C84A;
    border-color: #E5C84A;
    color: white;
}

/* Python Comparison Table Styles */
.python-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.python-page .comparison-table th {
    background: linear-gradient(135deg, #3776ab 0%, #ffd43b 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #3776ab;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.python-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.python-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Responsive para Python */
@media (max-width: 768px) {
    .python-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .python-icon {
        font-size: 3rem;
    }
    
    .python-floating-element {
        display: none;
    }
    
    .python-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .python-page .comparison-table th,
    .python-page .comparison-table td {
        padding: 0.75rem;
    }
}

/* Java Header Styles */
.java-header {
    background: linear-gradient(135deg, #CA3132 0%, #e17055 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.java-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="30" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="15" cy="70" r="2.5" fill="rgba(255,255,255,0.1)"/><circle cx="85" cy="80" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="15" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="70" cy="60" r="2.5" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.java-floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.java-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.java-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.java-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.java-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.java-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: javaBounce 3s ease-in-out infinite;
}

.java-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: javaGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes javaBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes javaGlow {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.java-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.java-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Java Page Styles */
.java-page .section h2 {
    color: #CA3132;
}

.java-page .btn-primary {
    background: linear-gradient(135deg, #CA3132 0%, #3174B9 100%);
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.java-page .btn-primary:hover {
    background: linear-gradient(135deg, #3174B9 0%, #CA3132 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(202, 49, 50, 0.4);
}

.java-page .btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.java-page .btn-secondary:hover {
    background: #3174B9;
    border-color: #3174B9;
    color: white;
}

/* Java Comparison Table Styles */
.java-page .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.java-page .comparison-table th {
    background: linear-gradient(135deg, #CA3132 0%, #e17055 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #CA3132;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.java-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.java-page .comparison-table tr:hover {
    background: #f8fafc;
}



.java-page .btn-primary {
    background: white;
    color: #3174B9;
    transition: all 0.3s ease;
}

.java-page .btn-primary:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(202, 49, 50, 0.4);
}

.java-page .btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
    transition: all 0.3s ease;
}

.java-page .btn-secondary:hover {
    background: white;
    border: 2px solid white;
    color: #3174B9;
}

/* Java CTA Section */
.java-page .cta-section {
    background: linear-gradient(135deg, #CA3132 0%, #e17055 100%);
}

/* Responsive para Java */
@media (max-width: 768px) {
    .java-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .java-icon {
        font-size: 3rem;
    }
    
    .java-floating-element {
        display: none;
    }
    
    .java-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .java-page .comparison-table th,
    .java-page .comparison-table td {
        padding: 0.75rem;
    }
    
    .java-page .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Angular Header Styles */
.angular-header {
    background: linear-gradient(135deg, #dd0031 0%, #c3002f 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.angular-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,10 60,40 90,40 65,60 75,90 50,70 25,90 35,60 10,40 40,40" fill="rgba(255,255,255,0.1)"/><polygon points="20,20 25,35 40,35 30,45 35,60 20,50 5,60 10,45 0,35 15,35" fill="rgba(255,255,255,0.1)"/><polygon points="80,20 85,35 100,35 90,45 95,60 80,50 65,60 70,45 60,35 75,35" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.angular-floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.angular-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.angular-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.angular-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.angular-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.angular-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: angularSpin 3s ease-in-out infinite;
}

.angular-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: angularGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes angularSpin {
    0%, 100% {
        transform: scale(1) rotate(0deg);
    }
    50% {
        transform: scale(1.1) rotate(180deg);
    }
}

@keyframes angularGlow {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.angular-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.angular-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Angular Page Styles */
.angular-page .section h2 {
    color: #dd0031;
}

.angular-page .btn-primary {
    background: white;
    border: 2px solid white;
    color: #dd0031;
    transition: all 0.3s ease;
}

.angular-page .btn-primary:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(221, 0, 49, 0.4);
}

.angular-page .btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.angular-page .btn-secondary:hover {
    background: white;
    border-color: white;
    color: #dd0031;
}

/* Angular Comparison Table Styles */
.angular-page .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.angular-page .comparison-table th {
    background: linear-gradient(135deg, #dd0031 0%, #c3002f 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #dd0031;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.angular-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.angular-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Angular CTA Section */
.angular-page .cta-section {
    background: linear-gradient(135deg, #dd0031 0%, #c3002f 100%);
}

/* Responsive para Angular */
@media (max-width: 768px) {
    .angular-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .angular-icon {
        font-size: 3rem;
    }
    
    .angular-floating-element {
        display: none;
    }
    
    .angular-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .angular-page .comparison-table th,
    .angular-page .comparison-table td {
        padding: 0.75rem;
    }
    
    .angular-page .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Seguridad Header Styles */
.seguridad-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.seguridad-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="20" width="60" height="60" rx="10" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.2)" stroke-width="2"/><rect x="30" y="30" width="40" height="40" rx="5" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/><circle cx="50" cy="50" r="8" fill="rgba(255,255,255,0.2)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.seguridad-floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.seguridad-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.seguridad-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.seguridad-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.seguridad-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.seguridad-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    animation: seguridadPulse 3s ease-in-out infinite;
}

.seguridad-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: seguridadGlow 4s ease-in-out infinite;
    z-index: -1;
}

@keyframes seguridadPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes seguridadGlow {
    0%, 100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(0.8);
    }
    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.seguridad-header h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.seguridad-header p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Seguridad Page Styles */
.seguridad-page .section h2 {
    color: #2c3e50;
}

.seguridad-page .btn-primary {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.seguridad-page .btn-primary:hover {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.4);
}

.seguridad-page .btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.seguridad-page .btn-secondary:hover {
    background: white;
    border-color: white;
    color: #2c3e50;
}

/* Seguridad Comparison Table Styles */
.seguridad-page .comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.seguridad-page .comparison-table th {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #2c3e50;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.seguridad-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.seguridad-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Seguridad CTA Section */
.seguridad-page .cta-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

/* Responsive para Seguridad */
@media (max-width: 768px) {
    .seguridad-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .seguridad-icon {
        font-size: 3rem;
    }
    
    .seguridad-floating-element {
        display: none;
    }
    
    .seguridad-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .seguridad-page .comparison-table th,
    .seguridad-page .comparison-table td {
        padding: 0.75rem;
    }
    
    .seguridad-page .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Etiqueta de Tecnología */
.tech-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.tech-tag .tag-icon {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.tech-tag .tag-text {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Componente: También te puede interesar */
.related-tech-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 4rem 0;
    margin: 3rem 0;
    border-radius: 12px;
}

.related-tech-title {
    text-align: center;
    color: #1f2937;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.related-tech-title i {
    color: #f59e0b;
    margin-right: 0.5rem;
}

.related-tech-subtitle {
    text-align: center;
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.related-tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.related-tech-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    position: relative;
    overflow: hidden;
}

.related-tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.related-tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: #667eea;
}

.tech-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.tech-icon {
    font-size: 2.5rem;
    color: #667eea;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tech-tag-small {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 500;
}

.tech-tag-small i {
    margin-right: 0.25rem;
    font-size: 0.7rem;
}

.tech-card-content h3 {
    color: #1f2937;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.tech-card-content p {
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tech-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feature-tag {
    background: #f3f4f6;
    color: #374151;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}

.tech-card-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

.tech-link {
    display: inline-flex;
    align-items: center;
    color: #667eea;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.tech-link:hover {
    color: #5a67d8;
    transform: translateX(4px);
}

.tech-link i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.tech-link:hover i {
    transform: translateX(4px);
}

/* Responsive para el componente */
@media (max-width: 768px) {
    .related-tech-section {
        padding: 2rem 0;
        margin: 2rem 0;
    }
    
    .related-tech-title {
        font-size: 2rem;
    }
    
    .related-tech-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .related-tech-card {
        padding: 1.25rem;
    }
    
    .tech-icon {
        font-size: 2rem;
    }
}

/* Legal Page Styles */
.legal-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    text-align: center;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.legal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="20" y="20" width="10" height="10" fill="rgba(255,255,255,0.1)"/><rect x="70" y="40" width="8" height="8" fill="rgba(255,255,255,0.1)"/><rect x="40" y="70" width="12" height="12" fill="rgba(255,255,255,0.1)"/><rect x="80" y="80" width="6" height="6" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s ease-in-out infinite;
}

.legal-floating-element {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite;
}

.legal-floating-element:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.legal-floating-element:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 3s;
}

.legal-floating-element:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 6s;
}

.legal-floating-element:nth-child(4) {
    top: 40%;
    right: 30%;
    animation-delay: 9s;
}

.legal-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: legalPulse 3s ease-in-out infinite;
}

@keyframes legalPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.legal-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.legal-header p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
    opacity: 0.9;
}

.legal-page .section h2 {
    color: #2c3e50;
}

.legal-page .btn-primary {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.legal-page .btn-primary:hover {
    background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.4);
}

.legal-page .btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
    transition: all 0.3s ease;
}

.legal-page .btn-secondary:hover {
    background: white;
    border-color: white;
    color: #2c3e50;
}

/* Legal Comparison Table Styles */
.legal-page .comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    margin: 2rem 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legal-page .comparison-table th {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    font-weight: 600;
    padding: 1rem;
    text-align: center;
    border-bottom: 2px solid #2c3e50;
    width: 25%;
    border-radius: 8px 8px 0 0;
}

.legal-page .comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    color: #1f2937;
}

.legal-page .comparison-table tr:hover {
    background: #f8fafc;
}

/* Legal CTA Section */
.legal-page .cta-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

/* Responsive para Legal */
@media (max-width: 768px) {
    .legal-header {
        min-height: 25vh;
        padding: 1.5rem 0;
    }
    
    .legal-icon {
        font-size: 3rem;
    }
    
    .legal-floating-element {
        display: none;
    }
    
    .legal-page .comparison-table {
        font-size: 0.9rem;
    }
    
    .legal-page .comparison-table th,
    .legal-page .comparison-table td {
        padding: 0.75rem;
    }
    
    .legal-page .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

/* Estilos para contenido legal */
.legal-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-top: 1rem;
}

.legal-content h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 2rem 0 1rem 0;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.legal-content h3:first-child {
    margin-top: 0;
}

.legal-content h4 {
    color: #374151;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem 0;
}

.legal-content p {
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.legal-content ul {
    color: #4b5563;
    line-height: 1.7;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content strong {
    color: #2c3e50;
    font-weight: 600;
}

/* Responsive para contenido legal */
@media (max-width: 768px) {
    .legal-content {
        padding: 1.5rem;
    }
    
    .legal-content h3 {
        font-size: 1.2rem;
    }
    
    .legal-content h4 {
        font-size: 1rem;
    }
}

/* Scroll suave para anclas */
html {
    scroll-behavior: smooth;
}

/* Ajuste para el header fijo */
section[id] {
    scroll-margin-top: 100px;
}