/* BLOG ARTICLE - ESTILOS BONITOS Y MODERNOS */
.blog-article-page {
    padding-top: 70px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
    min-height: 100vh;
}

/* Contenedor principal con efectos glassmorphism */
.blog-article-container {
    max-width: 90%;
    margin: 0 auto;
    padding: 2rem;
    animation: fadeIn 0.8s ease-out;
}

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

/* Breadcrumb estilizado */
.article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 0;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.article-breadcrumb a {
    color: #4a5568;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.article-breadcrumb a:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: #3498db;
    border-color: #3498db;
}

.article-breadcrumb i {
    font-size: 0.8rem;
    color: #a0aec0;
}

.article-breadcrumb .current {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}

/* Header del artículo con gradiente */
.article-header {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 3rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.08),
        0 1px 3px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255,255,255,0.8);
    position: relative;
    overflow: hidden;
}

.article-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2c3e50, #3498db);
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Categoría con chip moderno */
.article-category {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
}

.article-category::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 20%,
        rgba(255,255,255,0.3) 50%,
        transparent 80%
    );
    transform: rotate(30deg);
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}

/* Título con efecto de gradiente de texto */
.article-title {
    font-size: 2.75rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #2c3e50, #4a5568);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    position: relative;
    padding-bottom: 1rem;
}

.article-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #3498db, transparent);
    border-radius: 2px;
}

/* Meta información estilizada */
.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    margin-bottom: 2rem;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
}

.author-avatar::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3) 0%, transparent 70%);
}

.author-details {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 0.25rem;
}

.author-role {
    font-size: 0.9rem;
    color: #718096;
    font-weight: 500;
}

.article-stats {
    display: flex;
    gap: 2rem;
}

.article-stats .stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #718096;
    font-size: 0.95rem;
    font-weight: 500;
}

.article-stats i {
    color: #3498db;
    font-size: 1.1rem;
    background: rgba(52, 152, 219, 0.1);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen destacada con efecto de vidrio */
.article-featured-image {
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 3rem;
    box-shadow: 
        0 25px 50px -12px rgba(0,0,0,0.15),
        0 1px 3px rgba(0,0,0,0.1);
    position: relative;
    transform: perspective(1000px) rotateX(1deg);
    transition: transform 0.5s ease;
}

.article-featured-image:hover {
    transform: perspective(1000px) rotateX(0deg);
}

.article-featured-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.article-featured-image:hover img {
    transform: scale(1.05);
}

.image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    color: white;
    padding: 1.5rem;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    font-weight: 500;
}

/* Contenido del artículo */
.article-content {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: 
        0 20px 40px rgba(0,0,0,0.08),
        0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.article-section {
    margin-bottom: 3rem;
    opacity: 0;
    animation: slideUp 0.6s ease forwards;
}

.article-section:nth-child(1) { animation-delay: 0.1s; }
.article-section:nth-child(2) { animation-delay: 0.2s; }
.article-section:nth-child(3) { animation-delay: 0.3s; }
.article-section:nth-child(4) { animation-delay: 0.4s; }
.article-section:nth-child(5) { animation-delay: 0.5s; }

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

.section-title {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #2c3e50;
    font-weight: 700;
    position: relative;
    padding-left: 1.5rem;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 32px;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    border-radius: 4px;
}

/* Párrafo destacado */
.lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: #4a5568;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), rgba(44, 62, 80, 0.05));
    border-radius: 16px;
    border-left: 4px solid #3498db;
    margin: 2rem 0;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.lead::before {
    content: '💡';
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    opacity: 0.2;
}

/* Cajas de información premium */
.info-box {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(44, 62, 80, 0.05));
    border-radius: 16px;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid rgba(52, 152, 219, 0.2);
    position: relative;
    overflow: hidden;
}

.info-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #3498db, #2c3e50);
}

.info-box.important {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.05));
    border-color: rgba(231, 76, 60, 0.3);
}

.info-box.important::before {
    background: linear-gradient(180deg, #e74c3c, #c0392b);
}

.info-box-icon {
    font-size: 2rem;
    color: #3498db;
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 12px;
}

.info-box.important .info-box-icon {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.info-box-content h4 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Timeline estilizado */
.implementation-timeline {
    position: relative;
    padding-left: 2rem;
    margin: 3rem 0;
}

.implementation-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3498db, #2c3e50, #3498db);
    background-size: 100% 200%;
    animation: flow 3s infinite linear;
    border-radius: 1.5px;
}

@keyframes flow {
    0% { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

.timeline-step {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 2rem;
}

.timeline-step:last-child {
    margin-bottom: 0;
}

.step-number {
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    z-index: 2;
    border: 3px solid white;
}

.step-content {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.3s ease;
}

.step-content:hover {
    transform: translateX(8px);
}

.step-content h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* Grid de características tipo tarjetas premium */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.feature-card {
    background: linear-gradient(135deg, white, #f8fafc);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2c3e50);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(5deg);
}

.feature-card h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* Checklist con animaciones */
.checklist-container {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 3rem 0;
    color: white;
    box-shadow: 0 20px 40px rgba(44, 62, 80, 0.3);
}

.checklist-header {
    text-align: center;
    margin-bottom: 2rem;
}

.checklist-header h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.checklist-progress {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255,255,255,0.2);
    border-radius: 50px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.checklist-items {
    margin-bottom: 2rem;
}

.checklist-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.checklist-item:hover {
    background: rgba(255,255,255,0.2);
    transform: translateX(8px);
}

.checklist-item input {
    display: none;
}

.checkmark {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    margin-right: 1rem;
    position: relative;
    transition: all 0.3s ease;
}

.checklist-item input:checked + .checkmark {
    background: #2ecc71;
    border-color: #2ecc71;
}

.checklist-item input:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
}

/* ROI Calculator estilo dashboard */
.roi-calculator {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 3rem 0;
    color: white;
    box-shadow: 0 25px 50px -12px rgba(102, 126, 234, 0.4);
}

.roi-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.roi-header h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.roi-inputs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    opacity: 0.9;
}

.input-group input {
    width: 100%;
    padding: 1rem;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 12px;
    color: rgb(0, 0, 0);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.input-group input:focus {
    outline: none;
    background: rgba(255,255,255,0.25);
    border-color: white;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1);
}

.roi-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.roi-result {
    background: rgba(255,255,255,0.15);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
    transition: transform 0.3s ease;
}

.roi-result:hover {
    transform: translateY(-4px);
}

.roi-result.highlight {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.4), rgba(39, 174, 96, 0.6));
    border-color: rgba(46, 204, 113, 0.4);
}

.result-label {
    display: block;
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.result-value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
}

.roi-note {
    background: rgba(255,255,255,0.1);
    border-left: 4px solid #fbbf24;
}

/* Conclusión con efecto vidrio */
.conclusion {
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248, 250, 252, 0.9));
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 3rem;
    margin: 3rem 0;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.cta-box {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 2.5rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
}

.cta-box h3 {
    color: white;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    position: relative;
    z-index: 1;
}

.cta-buttons .btn {
    padding: 1rem 2rem;
    font-weight: 600;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 200px;
    justify-content: center;
}

.btn-primary {
    background: white;
    color: #3498db;
    border: none;
}

.btn-primary:hover {
    background: #f8fafc;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.btn-secondary {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 2px solid rgba(255,255,255,0.4);
}

.btn-secondary:hover {
    background: rgba(255,255,255,0.3);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Pie del artículo con tags animados */
.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 0;
    margin-top: 3rem;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.article-tags {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tag {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    color: #4a5568;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tag:hover {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #4a5568;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.share-btn.facebook:hover { background: #1877f2; color: white; }
.share-btn.twitter:hover { background: #1da1f2; color: white; }
.share-btn.linkedin:hover { background: #0077b5; color: white; }
.share-btn.whatsapp:hover { background: #25d366; color: white; }
.share-btn.copy-link:hover { background: #3498db; color: white; }

/* BOTONES DE ARTÍCULOS RELACIONADOS - ESTILO BOTÓN */
.read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    position: relative;
    overflow: hidden;
}

.read-more-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.read-more-link:hover {
    background: linear-gradient(135deg, #2980b9, #21618c);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
    gap: 1rem;
}

.read-more-link:hover::before {
    left: 100%;
}

.read-more-link i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

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

/* Si también quieres arreglar los botones "Leer más" del blog principal */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.read-more-btn:hover {
    background: linear-gradient(135deg, #2980b9, #21618c);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.4);
    gap: 1rem;
}

.read-more-btn i {
    transition: transform 0.3s ease;
}

.read-more-btn:hover i {
    transform: translateX(4px);
}

/* Y también los botones simples que dicen solo "Leer" */
.blog-post-card .read-more-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 768px) {
    .blog-article-page {
        padding-top: 60px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .blog-article-container {
        padding: 1rem;
    }
    
    .article-header,
    .article-content {
        padding: 1.5rem;
    }
    
    .article-title {
        font-size: 2rem;
    }
    
    .article-meta {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .article-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .roi-results,
    .roi-inputs {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .article-footer {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .article-tags {
        justify-content: center;
    }
    
    .share-buttons {
        justify-content: center;
    }
}

/* Efectos especiales */
.hover-lift {
    transition: transform 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.glow-effect {
    box-shadow: 0 0 20px rgba(52, 152, 219, 0.3);
}

.text-gradient {
    background: linear-gradient(135deg, #3498db, #2c3e50);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animaciones de entrada */
@keyframes floatIn {
    from {
        opacity: 0;
        transform: translateY(30px) rotateX(10deg);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

.animate-float {
    animation: floatIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ============================================ */
/* MODO OSCURO COMPLETO PARA ARTÍCULO DEL BLOG */
/* ============================================ */

/* PRIMERO: Reemplazar completamente los colores de fondo y texto */
body[data-theme="dark"] .blog-article-page,
body.dark-theme .blog-article-page {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
}

/* Contenedor principal */
body[data-theme="dark"] .blog-article-container,
body.dark-theme .blog-article-container {
    background: transparent !important;
}

/* Header del artículo */
body[data-theme="dark"] .article-header,
body.dark-theme .article-header {
    background: #1e293b !important;
    background-image: none !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

body[data-theme="dark"] .article-header::before,
body.dark-theme .article-header::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8, #3b82f6) !important;
}

/* Categoría */
body[data-theme="dark"] .article-category,
body.dark-theme .article-category {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Título del artículo */
body[data-theme="dark"] .article-title,
body.dark-theme .article-title {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body[data-theme="dark"] .article-title::after,
body.dark-theme .article-title::after {
    background: linear-gradient(90deg, #3b82f6, transparent) !important;
}

/* Información del autor */
body[data-theme="dark"] .author-avatar,
body.dark-theme .author-avatar {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

body[data-theme="dark"] .author-name,
body.dark-theme .author-name {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .author-role,
body.dark-theme .author-role {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .article-stats .stat,
body.dark-theme .article-stats .stat {
    color: #94a3b8 !important;
}

body[data-theme="dark"] .article-stats i,
body.dark-theme .article-stats i {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

/* Contenido principal del artículo */
body[data-theme="dark"] .article-content,
body.dark-theme .article-content {
    background: #1e293b !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

/* Títulos de sección */
body[data-theme="dark"] .section-title,
body.dark-theme .section-title {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .section-title::before,
body.dark-theme .section-title::before {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

/* Párrafo destacado */
body[data-theme="dark"] .lead,
body.dark-theme .lead {
    color: #cbd5e1 !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border-left: 4px solid #3b82f6 !important;
}

/* Cajas de información */
body[data-theme="dark"] .info-box,
body.dark-theme .info-box {
    background: rgba(59, 130, 246, 0.1) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

body[data-theme="dark"] .info-box.important,
body.dark-theme .info-box.important {
    background: rgba(239, 68, 68, 0.1) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

body[data-theme="dark"] .info-box.important::before,
body.dark-theme .info-box.important::before {
    background: linear-gradient(180deg, #ef4444, #dc2626) !important;
}

body[data-theme="dark"] .info-box-icon,
body.dark-theme .info-box-icon {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

body[data-theme="dark"] .info-box.important .info-box-icon,
body.dark-theme .info-box.important .info-box-icon {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

body[data-theme="dark"] .info-box-content h4,
body.dark-theme .info-box-content h4 {
    color: #f1f5f9 !important;
}

/* Timeline */
body[data-theme="dark"] .implementation-timeline::before,
body.dark-theme .implementation-timeline::before {
    background: linear-gradient(180deg, #3b82f6, #1d4ed8, #3b82f6) !important;
}

body[data-theme="dark"] .step-number,
body.dark-theme .step-number {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
    border: 3px solid #1e293b !important;
}

body[data-theme="dark"] .step-content,
body.dark-theme .step-content {
    background: #1e293b !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

body[data-theme="dark"] .step-content h3,
body.dark-theme .step-content h3 {
    color: #f1f5f9 !important;
}

/* Features grid */
body[data-theme="dark"] .feature-card,
body.dark-theme .feature-card {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2) !important;
}

body[data-theme="dark"] .feature-card:hover,
body.dark-theme .feature-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

body[data-theme="dark"] .feature-card::before,
body.dark-theme .feature-card::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
}

body[data-theme="dark"] .feature-icon,
body.dark-theme .feature-icon {
    color: #60a5fa !important;
    background: rgba(59, 130, 246, 0.15) !important;
}

body[data-theme="dark"] .feature-card h4,
body.dark-theme .feature-card h4 {
    color: #f1f5f9 !important;
}

/* Checklist */
body[data-theme="dark"] .checklist-container,
body.dark-theme .checklist-container {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

body[data-theme="dark"] .checklist-header h3,
body.dark-theme .checklist-header h3 {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .checklist-progress,
body.dark-theme .checklist-progress {
    background: rgba(255,255,255,0.15) !important;
}

body[data-theme="dark"] .checklist-item,
body.dark-theme .checklist-item {
    background: rgba(255,255,255,0.08) !important;
}

body[data-theme="dark"] .checklist-item:hover,
body.dark-theme .checklist-item:hover {
    background: rgba(255,255,255,0.15) !important;
}

body[data-theme="dark"] .checkmark,
body.dark-theme .checkmark {
    border: 2px solid rgba(255,255,255,0.4) !important;
}

body[data-theme="dark"] .checklist-item input:checked + .checkmark,
body.dark-theme .checklist-item input:checked + .checkmark {
    background: #10b981 !important;
    border-color: #10b981 !important;
}

/* ROI Calculator */
body[data-theme="dark"] .roi-calculator,
body.dark-theme .roi-calculator {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
    box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.4) !important;
}

body[data-theme="dark"] .roi-header h3,
body.dark-theme .roi-header h3 {
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .input-group input,
body.dark-theme .input-group input {
    background: rgba(255,255,255,0.1) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    color: #f1f5f9 !important;
}

body[data-theme="dark"] .input-group input:focus,
body.dark-theme .input-group input:focus {
    background: rgba(255,255,255,0.2) !important;
    border-color: #f1f5f9 !important;
}

body[data-theme="dark"] .roi-result,
body.dark-theme .roi-result {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

body[data-theme="dark"] .roi-result.highlight,
body.dark-theme .roi-result.highlight {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.4), rgba(5, 150, 105, 0.6)) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

body[data-theme="dark"] .roi-note,
body.dark-theme .roi-note {
    background: rgba(255,255,255,0.1) !important;
    border-left: 4px solid #fbbf24 !important;
}

/* Conclusión */
body[data-theme="dark"] .conclusion,
body.dark-theme .conclusion {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.9)) !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
}

body[data-theme="dark"] .cta-box,
body.dark-theme .cta-box {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a) !important;
}

body[data-theme="dark"] .cta-box h3,
body.dark-theme .cta-box h3 {
    color: #f1f5f9 !important;
}


/* Botones principales */
body[data-theme="dark"] .btn-primary,
body.dark-theme .btn-primary {
    background: #f1f5f9 !important;
    color: #1d4ed8 !important;
}

body[data-theme="dark"] .btn-primary:hover,
body.dark-theme .btn-primary:hover {
    background: #e2e8f0 !important;
}

body[data-theme="dark"] .btn-secondary,
body.dark-theme .btn-secondary {
    background: rgba(255,255,255,0.15) !important;
    color: #f1f5f9 !important;
    border: 2px solid rgba(255,255,255,0.4) !important;
}

body[data-theme="dark"] .btn-secondary:hover,
body.dark-theme .btn-secondary:hover {
    background: rgba(255,255,255,0.25) !important;
}

/* Tags */
body[data-theme="dark"] .tag,
body.dark-theme .tag {
    background: linear-gradient(135deg, #334155, #475569) !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .tag:hover,
body.dark-theme .tag:hover {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #f1f5f9 !important;
}

/* Botones de compartir */
body[data-theme="dark"] .share-btn,
body.dark-theme .share-btn {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .share-btn:hover,
body.dark-theme .share-btn:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

body[data-theme="dark"] .share-btn.facebook:hover,
body.dark-theme .share-btn.facebook:hover { background: #1877f2 !important; color: white !important; }
body[data-theme="dark"] .share-btn.twitter:hover,
body.dark-theme .share-btn.twitter:hover { background: #1da1f2 !important; color: white !important; }
body[data-theme="dark"] .share-btn.linkedin:hover,
body.dark-theme .share-btn.linkedin:hover { background: #0077b5 !important; color: white !important; }
body[data-theme="dark"] .share-btn.whatsapp:hover,
body.dark-theme .share-btn.whatsapp:hover { background: #25d366 !important; color: white !important; }
body[data-theme="dark"] .share-btn.copy-link:hover,
body.dark-theme .share-btn.copy-link:hover { background: #3b82f6 !important; color: white !important; }

/* Breadcrumb */
body[data-theme="dark"] .article-breadcrumb a,
body.dark-theme .article-breadcrumb a {
    background: rgba(30, 41, 59, 0.9) !important;
    border: 1px solid #4a5568 !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .article-breadcrumb a:hover,
body.dark-theme .article-breadcrumb a:hover {
    background: #1e293b !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

body[data-theme="dark"] .article-breadcrumb .current,
body.dark-theme .article-breadcrumb .current {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #f1f5f9 !important;
}

/* Botones de leer más */
body[data-theme="dark"] .read-more-link,
body.dark-theme .read-more-link,
body[data-theme="dark"] .read-more-btn,
body.dark-theme .read-more-btn {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

body[data-theme="dark"] .read-more-link:hover,
body.dark-theme .read-more-link:hover,
body[data-theme="dark"] .read-more-btn:hover,
body.dark-theme .read-more-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a) !important;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5) !important;
}

/* Textos generales */
body[data-theme="dark"] p,
body.dark-theme p,
body[data-theme="dark"] li,
body.dark-theme li,
body[data-theme="dark"] span,
body.dark-theme span,
body[data-theme="dark"] .es-lang,
body.dark-theme .es-lang,
body[data-theme="dark"] .en-lang,
body.dark-theme .en-lang {
    color: #cbd5e1 !important;
}

/* ============================================ */
/* SOLUCIÓN: Modo oscuro para el artículo del blog */
/* ============================================ */

/* Cuando body tiene la clase dark-mode */
body.dark-mode.blog-article-page {
    background: #0f172a !important;
    background-color: #0f172a !important;
    background-image: none !important;
}

/* Contenedor principal */
body.dark-mode .blog-article-container {
    background: transparent !important;
}

/* Header del artículo */
body.dark-mode .article-header {
    background: #1e293b !important;
    border: 1px solid #4a5568 !important;
}

/* Título del artículo */

body.dark-mode .article-title {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    -webkit-background-clip: text !important;  /* ESPACIO AQUÍ */
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Contenido principal */
body.dark-mode .article-content {
    background: #1e293b !important;
    border: 1px solid #4a5568 !important;
}

/* Párrafo destacado */
body.dark-mode .lead {
    color: #cbd5e1 !important;
    background: rgba(59, 130, 246, 0.1) !important;
    border-left: 4px solid #3b82f6 !important;
}

/* Títulos de sección */
body.dark-mode .section-title {
    color: #f1f5f9 !important;
}

body.dark-mode .section-title::before {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}

/* Etiquetas */
body.dark-mode .tag {
    background: linear-gradient(135deg, #334155, #475569) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .tag:hover {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #f1f5f9 !important;
}

/* Botones de compartir */
body.dark-mode .share-btn {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

/* Artículos relacionados */
body.dark-mode .related-posts-section {
    background: transparent !important;
}

/* Fuerza el modo oscuro en toda la página */
body.dark-mode.blog-article-page,
body.dark-mode.blog-article-page .page-wrapper,
body.dark-mode.blog-article-page .main-content-with-sidebar {
    background: #0f172a !important;
    background-color: #0f172a !important;
}

/* Asegura que el texto sea legible */
body.dark-mode.blog-article-page p,
body.dark-mode.blog-article-page li,
body.dark-mode.blog-article-page span,
body.dark-mode.blog-article-page div {
    color: #fdfdfd !important;
}

/* ============================================ */
/* CORRECCIONES ESPECÍFICAS PARA MODO OSCURO */
/* ============================================ */

/* STEP-CONTENT - Timeline steps */
body.dark-mode .step-content {
    background: #1e293b !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    color: #cbd5e1 !important;
}

body.dark-mode .step-content h3 {
    color: #f1f5f9 !important;
}

/* FEATURE-CARD - Tarjetas de características */
body.dark-mode .feature-card {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1px solid #4a5568 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .feature-card:hover {
    background: linear-gradient(135deg, #334155, #1e293b) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

body.dark-mode .feature-card h4 {
    color: #f1f5f9 !important;
}

/* FEATURE-CARD hover con borde de color */
body.dark-mode .feature-card:hover::before {
    background: linear-gradient(90deg, #3b82f6, #1d4ed8) !important;
    opacity: 1 !important;
}

/* ARTICLE-SECTION CONCLUSION - El problema del contraste */
body.dark-mode .conclusion {
    background: #1e293b !important; /* Oscuro, no gris claro */
    border: 1px solid #4a5568 !important;
    color: #cbd5e1 !important;
}

body.dark-mode .conclusion .section-title {
    color: #f1f5f9 !important;
}

/* CTA-BOX dentro de conclusion */
body.dark-mode .cta-box {
    background: linear-gradient(135deg, #1d4ed8, #1e3a8a) !important;
    color: #f1f5f9 !important;
}

body.dark-mode .cta-box h3 {
    color: #f1f5f9 !important;
}

/* ============================================ */
/* IMÁGENES RESPONSIVAS - MOSTRAR PARTE SUPERIOR */
/* ============================================ */

/* ARTÍCULOS RELACIONADOS - Imágenes y contenedores */
body.dark-mode .related-posts-section {
    background: transparent !important;
}

body.dark-mode .related-post-card {
    background: #1e293b !important;
    border: 1px solid #4a5568 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    height: 100%; /* Para que todas las tarjetas tengan misma altura */
    display: flex;
    flex-direction: column;
}

body.dark-mode .related-post-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    border-color: #3b82f6 !important;
}

/* CONTENEDOR DE IMAGEN - RESPONSIVO */
.related-post-card .post-image {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    /* Altura responsiva proporcional al ancho */
    height: 0 !important;
    padding-bottom: 56.25% !important; /* Relación 16:9 (9/16 = 0.5625) */
}

/* IMAGEN - MOSTRAR SIEMPRE LA PARTE SUPERIOR */
.related-post-card .post-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important; /* ¡ESTO ES CLAVE! Muestra la parte superior */
    transition: transform 0.5s ease !important;
}

/* Efecto hover más sutil */
.related-post-card:hover .post-image img {
    transform: scale(1.03) !important; /* Más sutil que 1.05 */
}

/* Contenido de la tarjeta - Se expande para llenar espacio */
body.dark-mode .related-post-card .post-content {
    padding: 1.5rem !important;
    background: transparent !important;
    flex-grow: 1; /* Hace que el contenido ocupe el espacio restante */
    display: flex;
    flex-direction: column;
}

/* Categoría */
body.dark-mode .related-post-card .post-category {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    display: inline-block !important;
    padding: 0.4rem 1rem !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    margin-bottom: 1rem !important;
    align-self: flex-start; /* Se alinea a la izquierda */
}

/* Título */
body.dark-mode .related-post-card .post-title {
    color: #f1f5f9 !important;
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
    font-weight: 600 !important;
    flex-grow: 1; /* Empuja el botón hacia abajo */
}

/* Leer más link - Se queda abajo */
body.dark-mode .read-more-link {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: white !important;
    margin-top: auto; /* Empuja el botón al fondo */
    align-self: flex-start; /* Alinea a la izquierda */
}

/* ============================================ */
/* RESPONSIVE PARA DIFERENTES DISPOSITIVOS */
/* ============================================ */

/* MÓVILES (hasta 768px) */
@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .related-post-card .post-image {
        padding-bottom: 60% !important; /* Un poco más cuadrada en móviles */
    }
    
    body.dark-mode .related-post-card .post-content {
        padding: 1.25rem !important;
    }
    
    body.dark-mode .related-post-card .post-title {
        font-size: 1.1rem !important;
    }
}

/* TABLETS (769px a 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .related-post-card .post-image {
        padding-bottom: 50% !important; /* Más cuadrada en tablets */
    }
}

/* ESCRITORIO (1025px a 1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
    .related-posts-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
    
    .related-post-card .post-image {
        padding-bottom: 56.25% !important; /* 16:9 estándar */
    }
}

/* ESCRITORIO GRANDE (más de 1440px) */
@media (min-width: 1441px) {
    .related-posts-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2.5rem !important;
        max-width: 1400px !important;
        margin: 0 auto !important;
    }
    
    .related-post-card .post-image {
        padding-bottom: 50% !important; /* Un poco más cuadrada */
    }
}

/* ============================================ */
/* SOLUCIÓN ALTERNATIVA: AJUSTE POR IMAGEN */
/* ============================================ */

/* Si quieres control exacto para cada imagen, podrías usar: */

/* Para imágenes donde quieras mostrar más la parte superior */
.image-top .post-image img {
    object-position: top 25% center !important;
}

/* Para imágenes donde quieras mostrar el centro */
.image-center .post-image img {
    object-position: center center !important;
}

/* O ajustar dinámicamente con data attributes */
.post-image img[data-focus="top"] {
    object-position: top center !important;
}

.post-image img[data-focus="center"] {
    object-position: center center !important;
}

.post-image img[data-focus="bottom"] {
    object-position: bottom center !important;
}

/* ============================================ */
/* MEJORA PARA MODO CLARO TAMBIÉN */
/* ============================================ */

/* Aplicar el mismo sistema de imágenes para modo claro */
.related-post-card .post-image {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important;
}

.related-post-card .post-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transition: transform 0.5s ease !important;
}

/* Para el grid de artículos relacionados en general */
.related-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 2rem !important;
    margin-top: 3rem !important;
}

/* Asegurar que todas las tarjetas tengan misma altura */
.related-posts-grid > * {
    display: flex !important;
}

.related-post-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* ============================================ */
/* FALLBACK PARA NAVEGADORES VIEJOS */
/* ============================================ */

/* Si object-position no es soportado */
@supports not (object-position: top center) {
    .related-post-card .post-image {
        height: 200px !important; /* Altura fija como fallback */
        padding-bottom: 0 !important;
    }
    
    .related-post-card .post-image img {
        position: relative !important;
        height: auto !important;
        max-height: 200px !important;
        /* Cortar manualmente la imagen */
        margin-top: -20%; /* Muestra más la parte superior */
    }
}

/* ============================================ */
/* ANIMACIONES MEJORADAS */
/* ============================================ */

.related-post-card {
    transform-origin: center !important;
}

.related-post-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 
        0 15px 30px rgba(0,0,0,0.25),
        0 0 0 1px rgba(59, 130, 246, 0.3) !important;
}

/* Transición suave para la imagen al hover */
.related-post-card .post-image {
    transition: all 0.3s ease !important;
}

.related-post-card:hover .post-image {
    transform: translateY(-2px) !important;
}






/* ============================================ */
/* CSS ADICIONAL PARA TABLA DE MULTAS Y COMPARACIÓN */
/* ============================================ */

/* 1. CONTENEDOR DE LA TABLA DE MULTAS */
.fines-table-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-radius: 20px;
    padding: 2.5rem;
    margin: 3rem 0;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.fines-table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #e74c3c, #c0392b, #e74c3c);
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

/* CABECERA DE LA TABLA */
.table-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(231, 76, 60, 0.2);
}

.table-header h3 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.table-subtitle {
    display: block;
    color: #718096;
    font-size: 0.95rem;
    font-weight: 500;
    background: rgba(231, 76, 60, 0.1);
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    display: inline-block;
    margin-top: 0.5rem;
}

/* TABLA DE MULTAS - DISEÑO MODERNO */
.fines-table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.table-row {
    display: table-row;
    transition: all 0.3s ease;
}

.table-row:hover:not(.header) {
    background-color: rgba(231, 76, 60, 0.05);
    transform: translateX(4px);
}

.table-row.header {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.table-row.highlight {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.05));
    border-left: 4px solid #e74c3c;
}

.table-row.highlight .table-cell {
    font-weight: 700;
}

.table-cell {
    display: table-cell;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    vertical-align: middle;
}

.table-row:not(.header) .table-cell {
    color: #4a5568;
}

.table-row.header .table-cell {
    border-bottom: none;
    color: white;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Columnas específicas */
.table-cell:nth-child(1) {
    width: 45%;
    font-weight: 500;
}

.table-cell:nth-child(2) {
    width: 25%;
    text-align: center;
    font-weight: 600;
    color: #e74c3c;
}

.table-cell:nth-child(3) {
    width: 30%;
    text-align: center;
    font-weight: 700;
    color: #c0392b;
}

/* NOTA DE LA TABLA */
.table-note {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.1), rgba(192, 57, 43, 0.05));
    border-radius: 12px;
    padding: 1.5rem;
    border-left: 4px solid #e74c3c;
    margin-top: 2rem;
}

.table-note p {
    margin: 0;
    color: #4a5568;
    line-height: 1.6;
}

.table-note strong {
    color: #c0392b;
    font-weight: 700;
}

/* ============================================ */
/* 2. CUADRO DE COMPARACIÓN - COSTOS */
/* ============================================ */

.comparison-box {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5rem;
    margin: 3rem 0;
    align-items: center;
}

/* ITEMS DE COMPARACIÓN */
.comparison-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-radius: 20px;
    padding: 2.5rem;
    border: 2px solid;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.comparison-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.comparison-item.bad {
    border-color: rgba(231, 76, 60, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
}

.comparison-item.bad::before {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.comparison-item.good {
    border-color: rgba(46, 204, 113, 0.3);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
}

.comparison-item.good::before {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.comparison-item h4 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
    text-align: center;
    font-weight: 700;
    position: relative;
}

.comparison-item.bad h4 {
    color: #e74c3c;
    border-bottom-color: rgba(231, 76, 60, 0.3);
}

.comparison-item.good h4 {
    color: #2ecc71;
    border-bottom-color: rgba(46, 204, 113, 0.3);
}

.comparison-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.comparison-item li {
    padding: 0.75rem 0;
    color: #4a5568;
    position: relative;
    padding-left: 2rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.comparison-item li:last-child {
    border-bottom: none;
}

.comparison-item.bad li::before {
    content: '❌';
    position: absolute;
    left: 0;
    color: #e74c3c;
    font-size: 1rem;
}

.comparison-item.good li::before {
    content: '✅';
    position: absolute;
    left: 0;
    color: #2ecc71;
    font-size: 1rem;
}

/* CÍRCULO VS CENTRAL */
.vs-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 
        0 10px 20px rgba(52, 152, 219, 0.3),
        0 0 0 8px rgba(52, 152, 219, 0.1);
    z-index: 2;
    position: relative;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 10px 20px rgba(52, 152, 219, 0.3),
            0 0 0 8px rgba(52, 152, 219, 0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 15px 30px rgba(52, 152, 219, 0.4),
            0 0 0 12px rgba(52, 152, 219, 0.15);
    }
}

/* ============================================ */
/* 3. MODO OSCURO PARA TABLA Y COMPARACIÓN */
/* ============================================ */

/* TABLA EN MODO OSCURO */
body[data-theme="dark"] .fines-table-container,
body.dark-theme .fines-table-container,
body.dark-mode .fines-table-container {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 1px solid #4a5568 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .table-header h3,
body.dark-theme .table-header h3,
body.dark-mode .table-header h3 {
    background: linear-gradient(135deg, #f87171, #ef4444) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body[data-theme="dark"] .table-subtitle,
body.dark-theme .table-subtitle,
body.dark-mode .table-subtitle {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #cbd5e1 !important;
}

body[data-theme="dark"] .fines-table,
body.dark-theme .fines-table,
body.dark-mode .fines-table {
    background: #1e293b !important;
}

body[data-theme="dark"] .table-row.header,
body.dark-theme .table-row.header,
body.dark-mode .table-row.header {
    background: linear-gradient(135deg, #741717, #5f0707) !important;
}

body[data-theme="dark"] .table-row:not(.header) .table-cell,
body.dark-theme .table-row:not(.header) .table-cell,
body.dark-mode .table-row:not(.header) .table-cell {
    color: #cbd5e1 !important;
    border-bottom: 1px solid #4a5568 !important;
}

body[data-theme="dark"] .table-row.highlight,
body.dark-theme .table-row.highlight,
body.dark-mode .table-row.highlight {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)) !important;
}

body[data-theme="dark"] .table-note,
body.dark-theme .table-note,
body.dark-mode .table-note {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1)) !important;
    border-left: 4px solid #ef4444 !important;
}

body[data-theme="dark"] .table-note p,
body.dark-theme .table-note p,
body.dark-mode .table-note p {
    color: #cbd5e1 !important;
}

/* COMPARACIÓN EN MODO OSCURO */
body[data-theme="dark"] .comparison-item,
body.dark-theme .comparison-item,
body.dark-mode .comparison-item {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border: 2px solid !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3) !important;
}

body[data-theme="dark"] .comparison-item.bad,
body.dark-theme .comparison-item.bad,
body.dark-mode .comparison-item.bad {
    border-color: rgba(239, 68, 68, 0.4) !important;
}

body[data-theme="dark"] .comparison-item.bad::before,
body.dark-theme .comparison-item.bad::before,
body.dark-mode .comparison-item.bad::before {
    background: linear-gradient(90deg, #ef4444, #dc2626) !important;
}

body[data-theme="dark"] .comparison-item.good,
body.dark-theme .comparison-item.good,
body.dark-mode .comparison-item.good {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

body[data-theme="dark"] .comparison-item.good::before,
body.dark-theme .comparison-item.good::before,
body.dark-mode .comparison-item.good::before {
    background: linear-gradient(90deg, #10b981, #059669) !important;
}

body[data-theme="dark"] .comparison-item.bad h4,
body.dark-theme .comparison-item.bad h4,
body.dark-mode .comparison-item.bad h4 {
    color: #f87171 !important;
    border-bottom-color: rgba(239, 68, 68, 0.3) !important;
}

body[data-theme="dark"] .comparison-item.good h4,
body.dark-theme .comparison-item.good h4,
body.dark-mode .comparison-item.good h4 {
    color: #34d399 !important;
    border-bottom-color: rgba(34, 197, 94, 0.3) !important;
}

body[data-theme="dark"] .comparison-item li,
body.dark-theme .comparison-item li,
body.dark-mode .comparison-item li {
    color: #cbd5e1 !important;
    border-bottom: 1px solid #4a5568 !important;
}

body[data-theme="dark"] .vs-circle,
body.dark-theme .vs-circle,
body.dark-mode .vs-circle {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    box-shadow: 
        0 10px 20px rgba(59, 130, 246, 0.3),
        0 0 0 8px rgba(59, 130, 246, 0.1) !important;
}

/* ============================================ */
/* 4. RESPONSIVE DESIGN */
/* ============================================ */

/* TABLET */
@media (max-width: 1024px) {
    .fines-table-container {
        padding: 2rem;
    }
    
    .table-header h3 {
        font-size: 1.6rem;
    }
    
    .table-cell {
        padding: 1rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .comparison-box {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 2rem;
    }
    
    .vs-circle {
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }
}

/* MÓVIL */
@media (max-width: 768px) {
    .fines-table-container {
        padding: 1.5rem;
        margin: 2rem 0;
    }
    
    .table-header h3 {
        font-size: 1.4rem;
    }
    
    .fines-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-row {
        display: table;
        width: 100%;
        min-width: 600px;
    }
    
    .table-cell {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
    
    .table-cell:nth-child(1) {
        width: 50%;
    }
    
    .table-cell:nth-child(2) {
        width: 25%;
    }
    
    .table-cell:nth-child(3) {
        width: 25%;
    }
    
    .comparison-box {
        gap: 1.5rem;
    }
    
    .comparison-item {
        padding: 1.75rem;
    }
    
    .comparison-item h4 {
        font-size: 1.3rem;
    }
    
    .vs-circle {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }
}

/* MÓVIL PEQUEÑO */
@media (max-width: 480px) {
    .table-cell {
        padding: 0.75rem 0.875rem;
        font-size: 0.85rem;
    }
    
    .table-header h3 {
        font-size: 1.3rem;
    }
    
    .comparison-item {
        padding: 1.5rem;
    }
    
    .comparison-item h4 {
        font-size: 1.2rem;
    }
    
    .comparison-item li {
        padding-left: 1.75rem;
        font-size: 0.95rem;
    }
}

/* ============================================ */
/* 5. ANIMACIONES Y EFECTOS ESPECIALES */
/* ============================================ */

/* Animación de entrada para la tabla */
@keyframes tableSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fines-table-container {
    animation: tableSlideIn 0.6s ease-out 0.3s both;
}

/* Efecto hover para celdas de precios */
.table-row:not(.header) .table-cell:nth-child(2),
.table-row:not(.header) .table-cell:nth-child(3) {
    position: relative;
    transition: all 0.3s ease;
}

.table-row:not(.header):hover .table-cell:nth-child(2) {
    color: #e74c3c;
    transform: scale(1.05);
}

.table-row:not(.header):hover .table-cell:nth-child(3) {
    color: #c0392b;
    transform: scale(1.05);
}

/* Efecto de brillo para la fila destacada */
.table-row.highlight {
    position: relative;
    overflow: hidden;
}

.table-row.highlight::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 20%,
        rgba(231, 76, 60, 0.1) 50%,
        transparent 80%
    );
    transform: rotate(30deg);
    animation: shine 3s infinite linear;
    pointer-events: none;
}

/* Animación para items de comparación */
.comparison-item {
    animation: fadeInUp 0.8s ease-out;
}

.comparison-item.bad {
    animation-delay: 0.1s;
}

.comparison-item.good {
    animation-delay: 0.2s;
}

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


/* ============================================ */
/* ESTILOS PARA COLUMNAS DE BENEFICIOS Y EMPRESAS */
/* ============================================ */

/* CONTENEDOR DE 2 COLUMNAS */
.columns-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin: 2.5rem 0;
}

/* COLUMNA INDIVIDUAL */
.column {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.column:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: rgba(52, 152, 219, 0.3);
}

/* CABECERA DE COLUMNA */
.column h3 {
    font-size: 1.4rem;
    color: #2c3e50;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid;
    font-weight: 700;
    position: relative;
}

/* Color específico para Beneficios */
.column:first-child h3 {
    color: #27ae60;
    border-bottom-color: rgba(46, 204, 113, 0.3);
}

/* Color específico para Empresas Obligadas */
.column:last-child h3 {
    color: #3498db;
    border-bottom-color: rgba(52, 152, 219, 0.3);
}

/* LISTA ESTILIZADA */
.column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.column li {
    padding: 0.875rem 0;
    color: #4a5568;
    position: relative;
    padding-left: 2.25rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    transition: all 0.2s ease;
}

.column li:hover {
    color: #2c3e50;
    transform: translateX(5px);
}

.column li:last-child {
    border-bottom: none;
}

/* ICONOS PARA LISTAS */
/* Beneficios - Check verde */
.column:first-child li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

/* Empresas - Building azul */
.column:last-child li::before {
    content: '🏢';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: rgba(52, 152, 219, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* GESTIÓN DE IDIOMAS EN LISTAS */
.column li .es-lang,
.column li .en-lang {
    display: none;
}

/* Mostrar español cuando body tiene clase es-lang */
body.es-lang .column li .es-lang {
    display: inline;
}

/* Mostrar inglés cuando body tiene clase en-lang */
body.en-lang .column li .en-lang {
    display: inline;
}

/* Para porcentajes destacados en beneficios */
.column:first-child li .es-lang:contains("40-60%"),
.column:first-child li .es-lang:contains("15-25%"),
.column:first-child li .en-lang:contains("40-60%"),
.column:first-child li .en-lang:contains("15-25%") {
    font-weight: 700;
    color: #27ae60;
}

/* DECORACIÓN DE FONDO PARA COLUMNAS */
.column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, currentColor 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.column:hover::before {
    opacity: 1;
}

.column:first-child::before {
    color: #27ae60;
}

.column:last-child::before {
    color: #3498db;
}

/* ============================================ */
/* MODO OSCURO */
/* ============================================ */

/* COLUMNAS EN MODO OSCURO */
body[data-theme="dark"] .column,
body.dark-theme .column,
body.dark-mode .column {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid #4a5568;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

body[data-theme="dark"] .column h3,
body.dark-theme .column h3,
body.dark-mode .column h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .column:first-child h3,
body.dark-theme .column:first-child h3,
body.dark-mode .column:first-child h3 {
    color: #10b981;
    border-bottom-color: rgba(16, 185, 129, 0.3);
}

body[data-theme="dark"] .column:last-child h3,
body.dark-theme .column:last-child h3,
body.dark-mode .column:last-child h3 {
    color: #60a5fa;
    border-bottom-color: rgba(96, 165, 250, 0.3);
}

body[data-theme="dark"] .column li,
body.dark-theme .column li,
body.dark-mode .column li {
    color: #cbd5e1;
    border-bottom: 1px solid #4a5568;
}

body[data-theme="dark"] .column li:hover,
body.dark-theme .column li:hover,
body.dark-mode .column li:hover {
    color: #f1f5f9;
}

/* Iconos en modo oscuro */
body[data-theme="dark"] .column:first-child li::before,
body.dark-theme .column:first-child li::before,
body.dark-mode .column:first-child li::before {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

body[data-theme="dark"] .column:last-child li::before,
body.dark-theme .column:last-child li::before,
body.dark-mode .column:last-child li::before {
    background: rgba(59, 130, 246, 0.2);
}

/* Porcentajes destacados en modo oscuro */
body[data-theme="dark"] .column:first-child li .es-lang:contains("40-60%"),
body.dark-theme .column:first-child li .es-lang:contains("40-60%"),
body.dark-mode .column:first-child li .es-lang:contains("40-60%"),
body[data-theme="dark"] .column:first-child li .es-lang:contains("15-25%"),
body.dark-theme .column:first-child li .es-lang:contains("15-25%"),
body.dark-mode .column:first-child li .es-lang:contains("15-25%"),
body[data-theme="dark"] .column:first-child li .en-lang:contains("40-60%"),
body.dark-theme .column:first-child li .en-lang:contains("40-60%"),
body.dark-mode .column:first-child li .en-lang:contains("40-60%"),
body[data-theme="dark"] .column:first-child li .en-lang:contains("15-25%"),
body.dark-theme .column:first-child li .en-lang:contains("15-25%"),
body.dark-mode .column:first-child li .en-lang:contains("15-25%") {
    color: #34d399;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */

/* TABLETS */
@media (max-width: 1024px) {
    .columns-2 {
        gap: 2rem;
    }
    
    .column {
        padding: 1.75rem;
    }
    
    .column h3 {
        font-size: 1.3rem;
    }
    
    .column li {
        padding: 0.75rem 0;
        padding-left: 2rem;
        font-size: 0.95rem;
    }
}

/* MÓVILES */
@media (max-width: 768px) {
    .columns-2 {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .column {
        padding: 1.5rem;
    }
    
    .column h3 {
        font-size: 1.2rem;
        margin-bottom: 1.25rem;
    }
    
    .column li {
        padding: 0.625rem 0;
        padding-left: 2rem;
        font-size: 0.9rem;
    }
    
    .column li::before {
        width: 24px;
        height: 24px;
        font-size: 0.8rem;
    }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 480px) {
    .column {
        padding: 1.25rem;
    }
    
    .column h3 {
        font-size: 1.1rem;
    }
    
    .column li {
        padding: 0.5rem 0;
        padding-left: 1.75rem;
        font-size: 0.85rem;
    }
    
    .column li::before {
        width: 22px;
        height: 22px;
    }
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */

/* Animación de entrada escalonada */
.columns-2 {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
}

.column {
    opacity: 0;
    transform: translateY(20px);
}

.column:first-child {
    animation: fadeInUp 0.6s ease-out 0.4s forwards;
}

.column:last-child {
    animation: fadeInUp 0.6s ease-out 0.6s forwards;
}

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

/* Efecto de brillo al hover */
.column:hover li::before {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
    }
}

.column:last-child:hover li::before {
    animation-name: pulseBlue;
}

@keyframes pulseBlue {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(52, 152, 219, 0);
    }
}

/* ============================================ */
/* MEJORA PARA EL SISTEMA DE IDIOMAS */
/* ============================================ */

/* Clases auxiliares para manejo de idiomas */
.lang-active {
    display: inline !important;
}

.lang-hidden {
    display: none !important;
}

/* ============================================ */
/* CSS PARA 3 ELEMENTOS DIFERENTES DEL ARTÍCULO */
/* ============================================ */

/* 1. SIMULACIÓN DE TOMA DE DECISIONES */
.decision-making-demo {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2.5rem 0;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.demo-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(52, 152, 219, 0.2);
}

.demo-header h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.demo-scenario {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    border: 2px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.1);
}

.scenario-title {
    font-size: 1.2rem;
    color: #3498db;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.scenario-description {
    color: #4a5568;
    font-size: 0.95rem;
    font-weight: 500;
}

/* COMPARACIÓN DE TARJETAS */
.comparison-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.comparison-card {
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.comparison-card.negative {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.05), rgba(192, 57, 43, 0.03));
    border-color: rgba(231, 76, 60, 0.3);
}

.comparison-card.positive {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.05), rgba(39, 174, 96, 0.03));
    border-color: rgba(46, 204, 113, 0.3);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid;
}

.comparison-card.negative .card-header {
    border-color: rgba(231, 76, 60, 0.2);
}

.comparison-card.positive .card-header {
    border-color: rgba(46, 204, 113, 0.2);
}

.card-header i {
    font-size: 2rem;
}

.comparison-card.negative .card-header i {
    color: #e74c3c;
}

.comparison-card.positive .card-header i {
    color: #2ecc71;
}

.card-header h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.comparison-card.negative h4 {
    color: #c0392b;
}

.comparison-card.positive h4 {
    color: #27ae60;
}

.card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-content li {
    padding: 0.75rem 0;
    position: relative;
    padding-left: 1.75rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.card-content li:last-child {
    border-bottom: none;
}

.comparison-card.negative li::before {
    content: '✗';
    position: absolute;
    left: 0;
    color: #e74c3c;
    font-weight: bold;
}

.comparison-card.positive li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2ecc71;
    font-weight: bold;
}

/* 2. ESTADÍSTICAS DE RETENCIÓN */
.retention-stats {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2.5rem 0;
    color: white;
    box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.25);
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.stat-label {
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0.9;
}

/* ENCUESTA GENERACIONAL */
.survey-results {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 2.5rem 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.survey-results h3 {
    color: #2c3e50;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
}

.survey-items {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.survey-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.survey-label {
    flex: 0 0 250px;
    color: #4a5568;
    font-weight: 500;
    font-size: 0.95rem;
}

.survey-bar {
    flex: 1;
    height: 32px;
    background: #f1f5f9;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3498db, #2c3e50);
    border-radius: 16px;
    position: relative;
    transition: width 1.5s ease-out;
    animation-delay: 0.3s;
}

.bar-value {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Colores diferentes para cada barra */
.survey-item:nth-child(1) .bar-fill {
    background: linear-gradient(90deg, #3498db, #2980b9);
}

.survey-item:nth-child(2) .bar-fill {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.survey-item:nth-child(3) .bar-fill {
    background: linear-gradient(90deg, #9b59b6, #8e44ad);
}

.survey-item:nth-child(4) .bar-fill {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.survey-note {
    background: #fefce8;
    border-radius: 12px;
    padding: 1rem 1.5rem;
    border-left: 4px solid #fbbf24;
    font-size: 0.875rem;
    color: #78350f;
}

.survey-note p {
    margin: 0;
}

.survey-note strong {
    color: #92400e;
}

/* 3. GRID DE IMPACTO DE MARCA */
.brand-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 0;
}

.impact-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.impact-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: #3498db;
}

.impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #2c3e50);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.impact-card:hover::before {
    opacity: 1;
}

.impact-icon {
    font-size: 2.5rem;
    color: #3498db;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 16px;
    transition: transform 0.3s ease;
}

.impact-card:hover .impact-icon {
    transform: scale(1.1) rotate(5deg);
}

.impact-card h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* 4. CONCLUSION CON KEY TAKEAWAYS */
.key-takeaways {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.takeaway-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.takeaway-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.takeaway-card:nth-child(1) {
    border-color: rgba(52, 152, 219, 0.3);
}

.takeaway-card:nth-child(2) {
    border-color: rgba(46, 204, 113, 0.3);
}

.takeaway-card:nth-child(3) {
    border-color: rgba(155, 89, 182, 0.3);
}

.takeaway-icon {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
}

.takeaway-card:nth-child(1) .takeaway-icon {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
}

.takeaway-card:nth-child(2) .takeaway-icon {
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
}

.takeaway-card:nth-child(3) .takeaway-icon {
    background: rgba(155, 89, 182, 0.1);
    color: #9b59b6;
}

.takeaway-card h4 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 700;
}

.takeaway-card:nth-child(1) h4 {
    color: #2980b9;
}

.takeaway-card:nth-child(2) h4 {
    color: #27ae60;
}

.takeaway-card:nth-child(3) h4 {
    color: #8e44ad;
}

/* ============================================ */
/* MODO OSCURO PARA TODOS LOS ELEMENTOS */
/* ============================================ */

/* DECISION-MAKING DEMO */
body[data-theme="dark"] .decision-making-demo,
body.dark-theme .decision-making-demo,
body.dark-mode .decision-making-demo {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid #4a5568;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .demo-header h3,
body.dark-theme .demo-header h3,
body.dark-mode .demo-header h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .demo-scenario,
body.dark-theme .demo-scenario,
body.dark-mode .demo-scenario {
    background: #1e293b;
    border: 2px solid rgba(59, 130, 246, 0.4);
}

body[data-theme="dark"] .scenario-title,
body.dark-theme .scenario-title,
body.dark-mode .scenario-title {
    color: #60a5fa;
}

body[data-theme="dark"] .scenario-description,
body.dark-theme .scenario-description,
body.dark-mode .scenario-description {
    color: #cbd5e1;
}

/* COMPARISON CARDS */
body[data-theme="dark"] .comparison-card.negative,
body.dark-theme .comparison-card.negative,
body.dark-mode .comparison-card.negative {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.05));
    border-color: rgba(239, 68, 68, 0.4);
}

body[data-theme="dark"] .comparison-card.positive,
body.dark-theme .comparison-card.positive,
body.dark-mode .comparison-card.positive {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(21, 128, 61, 0.05));
    border-color: rgba(34, 197, 94, 0.4);
}

body[data-theme="dark"] .comparison-card.negative .card-header,
body.dark-theme .comparison-card.negative .card-header,
body.dark-mode .comparison-card.negative .card-header {
    border-color: rgba(239, 68, 68, 0.3);
}

body[data-theme="dark"] .comparison-card.positive .card-header,
body.dark-theme .comparison-card.positive .card-header,
body.dark-mode .comparison-card.positive .card-header {
    border-color: rgba(34, 197, 94, 0.3);
}

body[data-theme="dark"] .comparison-card.negative h4,
body.dark-theme .comparison-card.negative h4,
body.dark-mode .comparison-card.negative h4 {
    color: #fca5a5;
}

body[data-theme="dark"] .comparison-card.positive h4,
body.dark-theme .comparison-card.positive h4,
body.dark-mode .comparison-card.positive h4 {
    color: #86efac;
}

body[data-theme="dark"] .card-content li,
body.dark-theme .card-content li,
body.dark-mode .card-content li {
    border-bottom: 1px solid #4a5568;
    color: #cbd5e1;
}

/* RETENTION STATS */
body[data-theme="dark"] .retention-stats,
body.dark-theme .retention-stats,
body.dark-mode .retention-stats {
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
}

body[data-theme="dark"] .stat-card,
body.dark-theme .stat-card,
body.dark-mode .stat-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* SURVEY RESULTS */
body[data-theme="dark"] .survey-results,
body.dark-theme .survey-results,
body.dark-mode .survey-results {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .survey-results h3,
body.dark-theme .survey-results h3,
body.dark-mode .survey-results h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .survey-label,
body.dark-theme .survey-label,
body.dark-mode .survey-label {
    color: #cbd5e1;
}

body[data-theme="dark"] .survey-bar,
body.dark-theme .survey-bar,
body.dark-mode .survey-bar {
    background: #334155;
}

body[data-theme="dark"] .survey-note,
body.dark-theme .survey-note,
body.dark-mode .survey-note {
    background: #78350f;
    border-left: 4px solid #92400e;
    color: #fef3c7;
}

/* IMPACT GRID */
body[data-theme="dark"] .impact-card,
body.dark-theme .impact-card,
body.dark-mode .impact-card {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .impact-card h4,
body.dark-theme .impact-card h4,
body.dark-mode .impact-card h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .impact-card p,
body.dark-theme .impact-card p,
body.dark-mode .impact-card p {
    color: #cbd5e1;
}

/* KEY TAKEAWAYS */
body[data-theme="dark"] .takeaway-card,
body.dark-theme .takeaway-card,
body.dark-mode .takeaway-card {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

body[data-theme="dark"] .takeaway-card h4,
body.dark-theme .takeaway-card h4,
body.dark-mode .takeaway-card h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .takeaway-card p,
body.dark-theme .takeaway-card p,
body.dark-mode .takeaway-card p {
    color: #cbd5e1;
}

/* ============================================ */
/* RESPONSIVE DESIGN */
/* ============================================ */

/* TABLETS */
@media (max-width: 1024px) {
    .comparison-cards,
    .stats-grid,
    .brand-impact-grid,
    .key-takeaways {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .survey-label {
        flex: 0 0 200px;
    }
}

/* MÓVILES */
@media (max-width: 768px) {
    .decision-making-demo,
    .retention-stats,
    .survey-results {
        padding: 1.5rem;
    }
    
    .comparison-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .survey-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .survey-label {
        flex: none;
        width: 100%;
    }
    
    .survey-bar {
        width: 100%;
    }
    
    .brand-impact-grid,
    .key-takeaways {
        grid-template-columns: 1fr;
    }
    
    .demo-header h3 {
        font-size: 1.3rem;
    }
    
    .scenario-title {
        font-size: 1.1rem;
    }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .survey-label {
        font-size: 0.9rem;
    }
    
    .bar-value {
        font-size: 0.75rem;
    }
}

/* ============================================ */
/* ANIMACIONES Y EFECTOS */
/* ============================================ */

/* Animación de entrada para elementos */
.decision-making-demo,
.retention-stats,
.survey-results,
.brand-impact-grid,
.key-takeaways {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.decision-making-demo {
    animation-delay: 0.1s;
}

.retention-stats {
    animation-delay: 0.2s;
}

.survey-results {
    animation-delay: 0.3s;
}

.brand-impact-grid {
    animation-delay: 0.4s;
}

.key-takeaways {
    animation-delay: 0.5s;
}

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

/* Animación de barras */
@keyframes fillBar {
    from {
        width: 0%;
    }
    to {
        width: var(--target-width);
    }
}

.bar-fill {
    animation: fillBar 1.5s ease-out forwards;
}

/* Contador animado para estadísticas */
@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-number {
    animation: countUp 0.5s ease-out forwards;
}

/* Efecto de brillo para tarjetas */
.comparison-card::after,
.impact-card::after,
.takeaway-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 20%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 80%
    );
    transform: rotate(30deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.comparison-card:hover::after,
.impact-card:hover::after,
.takeaway-card:hover::after {
    opacity: 1;
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(30deg); }
    100% { transform: translateX(100%) rotate(30deg); }
}


/* ============================================ */
/* CORRECCIÓN: LÍNEA DE TIEMPO CON CÍRCULOS MÁS PEQUEÑOS */
/* ============================================ */

/* REESCRIBIR LOS ESTILOS DE LA LÍNEA DE TIEMPO */
.wellness-timeline {
    position: relative;
    padding-left: 3rem;
    margin: 3rem 0;
}

.wellness-timeline::before {
    content: '';
    position: absolute;
    left: 1.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #3498db, #9b59b6, #3498db);
    background-size: 100% 200%;
    animation: flow 4s infinite linear;
    border-radius: 1.5px;
}

/* PASOS DE LA LÍNEA DE TIEMPO - CÍRCULOS MÁS PEQUEÑOS */
.wellness-timeline .timeline-step {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
}

.wellness-timeline .timeline-step:last-child {
    margin-bottom: 0;
}

/* CÍRCULO MÁS PEQUEÑO - SOLO FECHA */
.wellness-timeline .step-number {
    position: absolute;
    left: -0.75rem; /* Ajustado para círculo más pequeño */
    top: 0;
    width: 3rem; /* Más pequeño */
    height: 3rem; /* Más pequeño */
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600; /* Más delgado */
    font-size: 0.8rem; /* Más pequeño */
    box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
    z-index: 2;
    border: 3px solid white;
    text-align: center;
    padding: 0.25rem;
    line-height: 1.2;
    white-space: pre-line; /* Permite múltiples líneas */
    word-break: break-word; /* Rompe palabras largas */
    overflow: hidden;
}

/* CONTENIDO DEL PASO - AJUSTADO */
.wellness-timeline .step-content {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    margin-left: 1.5rem; /* Espacio desde el círculo */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.3s ease;
    min-height: 120px; /* Altura mínima consistente */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wellness-timeline .step-content:hover {
    transform: translateX(8px);
}

/* TÍTULO DEL PASO */
.wellness-timeline .step-content h3 {
    font-size: 1.2rem; /* Más pequeño */
    color: #2c3e50;
    margin-bottom: 0.5rem; /* Menos espacio */
    font-weight: 700;
    line-height: 1.3;
}

/* DESCRIPCIÓN DEL PASO */
.wellness-timeline .step-content p {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ============================================ */
/* ALTERNATIVA: CÍRCULOS CON SOLO SÍMBOLOS */
/* ============================================ */

/* Si prefieres símbolos en lugar de texto largo */
.wellness-timeline.alternative .step-number {
    font-size: 1.2rem; /* Para íconos/símbolos */
    padding: 0;
}

/* Símbolos específicos para cada paso */
.wellness-timeline.alternative .timeline-step:nth-child(1) .step-number::before {
    content: "📅"; /* Calendario para Día 1-7 */
    font-size: 1.2rem;
}

.wellness-timeline.alternative .timeline-step:nth-child(2) .step-number::before {
    content: "😴"; /* Sueño para Semana 2-3 */
    font-size: 1.2rem;
}

.wellness-timeline.alternative .timeline-step:nth-child(3) .step-number::before {
    content: "😊"; /* Carita feliz para Mes 1-2 */
    font-size: 1.2rem;
}

.wellness-timeline.alternative .timeline-step:nth-child(4) .step-number::before {
    content: "✨"; /* Brillitos para Mes 3+ */
    font-size: 1.2rem;
}

/* ============================================ */
/* ALTERNATIVA 2: CÍRCULOS CON NÚMEROS */
/* ============================================ */

/* Si prefieres números en lugar de fechas */
.wellness-timeline.numbered .step-number {
    font-size: 1rem;
    font-weight: 700;
}

.wellness-timeline.numbered .timeline-step:nth-child(1) .step-number::before {
    content: "1";
}

.wellness-timeline.numbered .timeline-step:nth-child(2) .step-number::before {
    content: "2";
}

.wellness-timeline.numbered .timeline-step:nth-child(3) .step-number::before {
    content: "3";
}

.wellness-timeline.numbered .timeline-step:nth-child(4) .step-number::before {
    content: "4";
}

/* ============================================ */
/* ALTERNATIVA 3: DISEÑO HORIZONTAL RESPONSIVE */
/* ============================================ */

/* Para pantallas grandes - Timeline horizontal */
@media (min-width: 1024px) {
    .wellness-timeline.horizontal {
        display: flex;
        justify-content: space-between;
        padding: 2rem 0;
        margin: 3rem 0;
        position: relative;
    }
    
    .wellness-timeline.horizontal::before {
        content: '';
        position: absolute;
        top: 4rem;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #3498db, #9b59b6, #3498db);
        width: 100%;
        left: 0;
        right: 0;
        transform: none;
        animation: flowHorizontal 4s infinite linear;
    }
    
    .wellness-timeline.horizontal .timeline-step {
        flex: 1;
        margin: 0 0.5rem;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .wellness-timeline.horizontal .step-number {
        position: relative;
        left: 0;
        top: 0;
        margin-bottom: 1rem;
        order: 1;
    }
    
    .wellness-timeline.horizontal .step-content {
        margin-left: 0;
        order: 2;
        text-align: center;
        min-height: 150px;
    }
}

@keyframes flowHorizontal {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================ */
/* MODO OSCURO */
/* ============================================ */

body[data-theme="dark"] .wellness-timeline .step-content,
body.dark-theme .wellness-timeline .step-content,
body.dark-mode .wellness-timeline .step-content {
    background: #1e293b;
    border: 1px solid #4a5568;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .wellness-timeline .step-content h3,
body.dark-theme .wellness-timeline .step-content h3,
body.dark-mode .wellness-timeline .step-content h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .wellness-timeline .step-content p,
body.dark-theme .wellness-timeline .step-content p,
body.dark-mode .wellness-timeline .step-content p {
    color: #cbd5e1;
}

body[data-theme="dark"] .wellness-timeline::before,
body.dark-theme .wellness-timeline::before,
body.dark-mode .wellness-timeline::before {
    background: linear-gradient(180deg, #3b82f6, #8b5cf6, #3b82f6);
}

body[data-theme="dark"] .wellness-timeline .step-number,
body.dark-theme .wellness-timeline .step-number,
body.dark-mode .wellness-timeline .step-number {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border: 3px solid #1e293b;
    box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
}

/* ============================================ */
/* RESPONSIVE PARA LÍNEA DE TIEMPO */
/* ============================================ */

/* TABLETS */
@media (max-width: 1024px) {
    .wellness-timeline {
        padding-left: 2.5rem;
    }
    
    .wellness-timeline .step-number {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 0.75rem;
        left: -0.5rem;
    }
    
    .wellness-timeline .step-content {
        padding: 1.25rem;
        margin-left: 1.25rem;
        min-height: 110px;
    }
    
    .wellness-timeline .step-content h3 {
        font-size: 1.1rem;
    }
    
    .wellness-timeline .step-content p {
        font-size: 0.9rem;
    }
}

/* MÓVILES */
@media (max-width: 768px) {
    .wellness-timeline {
        padding-left: 2rem;
    }
    
    .wellness-timeline .step-number {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.7rem;
        left: -0.25rem;
        border-width: 2px;
    }
    
    .wellness-timeline .step-content {
        padding: 1rem;
        margin-left: 1rem;
        min-height: auto;
    }
    
    .wellness-timeline .step-content h3 {
        font-size: 1rem;
    }
    
    .wellness-timeline .step-content p {
        font-size: 0.85rem;
    }
    
    /* En móviles, ocultar texto largo en círculos */
    .wellness-timeline .step-number {
        display: flex;
        flex-direction: column;
    }
    
    /* Mostrar solo primera palabra o abreviatura */
    .wellness-timeline .step-number br {
        display: none;
    }
    
    .wellness-timeline .step-number::after {
        content: "";
        display: block;
        font-size: 0.6rem;
        font-weight: 400;
        margin-top: 0.1rem;
    }
    
    .wellness-timeline .timeline-step:nth-child(1) .step-number::after {
        content: "Día";
    }
    
    .wellness-timeline .timeline-step:nth-child(2) .step-number::after {
        content: "Sem";
    }
    
    .wellness-timeline .timeline-step:nth-child(3) .step-number::after {
        content: "Mes";
    }
    
    .wellness-timeline .timeline-step:nth-child(4) .step-number::after {
        content: "Mes+";
    }
}

/* MÓVILES PEQUEÑOS */
@media (max-width: 480px) {
    .wellness-timeline {
        padding-left: 1.5rem;
    }
    
    .wellness-timeline .step-number {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.65rem;
    }
    
    .wellness-timeline .step-content {
        padding: 0.875rem;
        margin-left: 0.75rem;
    }
    
    .wellness-timeline .step-content h3 {
        font-size: 0.95rem;
        margin-bottom: 0.375rem;
    }
    
    .wellness-timeline .step-content p {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* ============================================ */
/* SOLUCIÓN DE EMERGENCIA: CÍRCULOS MÁS PEQUEÑOS */
/* ============================================ */

/* Si necesitas una solución rápida sin cambiar HTML */
.wellness-timeline .step-number {
    /* Reducir tamaño del círculo */
    width: 60px !important;
    height: 60px !important;
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
    padding: 0.25rem !important;
    
    /* Asegurar que el texto se ajuste */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-break: break-word !important;
    white-space: normal !important;
    overflow: hidden !important;
}

/* Reducir aún más el tamaño si es necesario */
.wellness-timeline .step-number.smaller {
    width: 50px !important;
    height: 50px !important;
    font-size: 0.65rem !important;
}

/* Para texto muy largo, usar abreviaturas */
.wellness-timeline .step-number .long-text {
    display: none;
}

.wellness-timeline .step-number .short-text {
    display: block;
    font-size: 0.6rem;
}

/* ============================================ */
/* CSS PARA ARTÍCULO "¿TU EMPRESA ESTÁ OBLIGADA?" */
/* ============================================ */

/* 1. VERIFICADOR INTERACTIVO DE CUMPLIMIENTO */
.compliance-checker {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 2.5rem 0;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.checker-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(52, 152, 219, 0.2);
}

.checker-header h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.checker-header p {
    color: #4a5568;
    font-size: 0.95rem;
}

/* GRUPOS DE PREGUNTAS */
.checker-questions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.question-group {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.question-group h4 {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(52, 152, 219, 0.3);
    font-weight: 700;
}

.question-item {
    margin-bottom: 0.875rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: #f8fafc;
    transition: all 0.2s ease;
    cursor: pointer;
}

.question-item:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

.question-item:last-child {
    margin-bottom: 0;
}

.question-item input[type="checkbox"] {
    display: none;
}

.question-item label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4a5568;
    margin: 0;
}

.question-item label::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: white;
    margin-top: 0.125rem;
    transition: all 0.2s ease;
}

.question-item input:checked + label::before {
    background: #3498db;
    border-color: #3498db;
    content: '✓';
    color: white;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.question-item input:checked + label {
    color: #2c3e50;
    font-weight: 500;
}

.question-item label .es-lang,
.question-item label .en-lang {
    display: none;
}

body.es-lang .question-item label .es-lang {
    display: block;
}

body.en-lang .question-item label .en-lang {
    display: block;
}

/* RESULTADOS DEL VERIFICADOR */
.checker-results {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
}

.result-card {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 12px;
    color: white;
    min-width: 160px;
}

.result-score {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.result-label {
    font-size: 0.95rem;
    opacity: 0.9;
}

.result-analysis h4 {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.result-message p {
    color: #4a5568;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.result-scale {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.scale-item {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.scale-item.low {
    background: rgba(46, 204, 113, 0.1);
    color: #27ae60;
    border-color: rgba(46, 204, 113, 0.3);
}

.scale-item.medium {
    background: rgba(241, 196, 15, 0.1);
    color: #f39c12;
    border-color: rgba(241, 196, 15, 0.3);
}

.scale-item.high {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border-color: rgba(231, 76, 60, 0.3);
}

.scale-item.active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.scale-item.active.low {
    background: #2ecc71;
    color: white;
}

.scale-item.active.medium {
    background: #f1c40f;
    color: white;
}

.scale-item.active.high {
    background: #e74c3c;
    color: white;
}

.checker-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* 2. SECTORES OBLIGADOS */
.sectors-table {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 2.5rem 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.sectors-table .table-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid rgba(52, 152, 219, 0.3);
}

.sectors-table .table-header h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
}

.sector-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.sector-card {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    border: 2px solid;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.sector-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.sector-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.sector-card.high-priority {
    border-color: rgba(231, 76, 60, 0.3);
}

.sector-card.high-priority::before {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.sector-card.medium-priority {
    border-color: rgba(241, 196, 15, 0.3);
}

.sector-card.medium-priority::before {
    background: linear-gradient(90deg, #f1c40f, #f39c12);
}

.sector-card.low-priority {
    border-color: rgba(52, 152, 219, 0.3);
}

.sector-card.low-priority::before {
    background: linear-gradient(90deg, #3498db, #2980b9);
}

.sector-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #3498db;
}

.sector-card.high-priority .sector-icon {
    color: #e74c3c;
}

.sector-card.medium-priority .sector-icon {
    color: #f1c40f;
}

.sector-card h4 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 1rem;
    font-weight: 700;
}

.sector-card p {
    color: #4a5568;
    margin-bottom: 1.25rem;
    line-height: 1.5;
    font-size: 0.95rem;
}

.sector-card strong {
    color: #6bb5ff;
}

.sector-stats {
    background: #f8fafc;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
    border: 1px solid #e5e7eb;
}

.sector-card.high-priority .sector-stats {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.2);
    color: #c0392b;
}

.sector-card.medium-priority .sector-stats {
    background: rgba(241, 196, 15, 0.1);
    border-color: rgba(241, 196, 15, 0.2);
    color: #f39c12;
}

.sector-card.low-priority .sector-stats {
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.2);
    color: #2980b9;
}

/* MAPA DE INSPECCIONES */
.inspection-map {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 2.5rem 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.inspection-map h3 {
    text-align: center;
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

.map-visual {
    position: relative;
    height: 400px;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 16px;
    margin-bottom: 2rem;
    border: 2px solid #e5e7eb;
    overflow: hidden;
}

.map-sector {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 1rem;
}

.map-sector:hover {
    transform: scale(1.1);
    z-index: 10;
}

.sector-dot {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

.sector-label {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.sector-frequency {
    font-size: 0.75rem;
    opacity: 0.9;
}

.map-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #4a5568;
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
}

/* 3. EXCEPCIONES Y CASOS ESPECIALES */
.exceptions-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.exception-card {
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.exception-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.exception-card.false-myth {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-color: rgba(231, 76, 60, 0.3);
}

.exception-card.true-exception {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-color: rgba(46, 204, 113, 0.3);
}

.exception-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid;
}

.exception-card.false-myth .exception-header {
    border-color: rgba(231, 76, 60, 0.2);
}

.exception-card.true-exception .exception-header {
    border-color: rgba(46, 204, 113, 0.2);
}

.exception-header i {
    font-size: 2rem;
}

.exception-card.false-myth .exception-header i {
    color: #e74c3c;
}

.exception-card.true-exception .exception-header i {
    color: #2ecc71;
}

.exception-header h4 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin: 0;
    font-weight: 700;
}

.exception-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.exception-content li {
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    color: #4a5568;
    line-height: 1.5;
}

.exception-content li:last-child {
    border-bottom: none;
}

.exception-content strong {
    color: #6bb5ff;
    display: block;
    margin-bottom: 0.25rem;
}

/* CASOS COMPLEJOS - ACORDEÓN */
.complex-cases {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 2.5rem 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.complex-cases h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
}

.case-accordion {
    border-radius: 12px;
    overflow: hidden;
}

.case-item {
    border-bottom: 1px solid #e5e7eb;
}

.case-item:last-child {
    border-bottom: none;
}

.case-header {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border: none;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #2c3e50;
    font-size: 1rem;
    font-weight: 600;
}

.case-header:hover {
    background: #f1f5f9;
}

.case-header i:first-child {
    color: #3498db;
    font-size: 1.2rem;
}

.case-header i:last-child {
    margin-left: auto;
    transition: transform 0.3s ease;
}

.case-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    background: white;
}

.case-content.active {
    padding: 1.5rem;
    max-height: 500px;
}

.case-content p {
    color: #4a5568;
    margin: 0;
    line-height: 1.5;
}

.case-content strong {
    color: #2c3e50;
}

/* 4. LÍNEA DE TIEMPO DE CONSECUENCIAS */
.consequences-timeline {
    position: relative;
    padding-left: 2rem;
    margin: 3rem 0;
}

.consequences-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #e74c3c, #c0392b, #e74c3c);
    background-size: 100% 200%;
    animation: flow 3s infinite linear;
    border-radius: 1.5px;
}

.consequences-timeline .timeline-step {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 2rem;
}

.consequences-timeline .timeline-step:last-child {
    margin-bottom: 0;
}

.consequences-timeline .step-number {
    position: absolute;
    left: -1.5rem;
    top: 0;
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    z-index: 2;
    border: 3px solid white;
}

.consequences-timeline .step-content {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.3s ease;
}

.consequences-timeline .step-content:hover {
    transform: translateX(8px);
}

.consequences-timeline .step-content h3 {
    font-size: 1.3rem;
    color: #c0392b;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* COMPARACIÓN VISUAL DE COSTOS */
.comparison-visual {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin: 2.5rem 0;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.comparison-header h3 {
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 700;
}

.comparison-bars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.bar-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bar-label {
    flex: 0 0 200px;
    color: #4a5568;
    font-weight: 500;
    font-size: 0.95rem;
}

.bar {
    flex: 1;
    height: 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    transition: width 1.5s ease-out;
    animation-delay: 0.3s;
}

.bar.positive {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.bar.negative {
    background: linear-gradient(90deg, #e74c3c, #c0392b);
}

.bar-value {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.comparison-note {
    background: #fefce8;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #fbbf24;
    font-size: 0.95rem;
    color: #78350f;
}

.comparison-note p {
    margin: 0;
}

.comparison-note strong {
    color: #92400e;
    font-weight: 700;
}

/* 5. PASOS DE ACCIÓN */
.action-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2.5rem 0;
}

.step-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.95));
    border-radius: 20px;
    padding: 2rem;
    border: 2px solid rgba(52, 152, 219, 0.3);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-color: #3498db;
}

.step-card .step-number {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
    border: 3px solid white;
}

.step-card .step-content {
    text-align: center;
}

.step-card h4 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin: 1.5rem 0 1rem 0;
    font-weight: 700;
}

.step-card p {
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

/* ============================================ */
/* MODO OSCURO */
/* ============================================ */

/* VERIFICADOR INTERACTIVO */
body[data-theme="dark"] .compliance-checker,
body.dark-theme .compliance-checker,
body.dark-mode .compliance-checker {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .checker-header h3,
body.dark-theme .checker-header h3,
body.dark-mode .checker-header h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .question-group,
body.dark-theme .question-group,
body.dark-mode .question-group {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .question-group h4,
body.dark-theme .question-group h4,
body.dark-mode .question-group h4 {
    color: #f1f5f9;
    border-color: rgba(59, 130, 246, 0.3);
}

body[data-theme="dark"] .question-item,
body.dark-theme .question-item,
body.dark-mode .question-item {
    background: #334155;
}

body[data-theme="dark"] .question-item:hover,
body.dark-theme .question-item:hover,
body.dark-mode .question-item:hover {
    background: #475569;
}

body[data-theme="dark"] .question-item label,
body.dark-theme .question-item label,
body.dark-mode .question-item label {
    color: #cbd5e1;
}

body[data-theme="dark"] .question-item label::before,
body.dark-theme .question-item label::before,
body.dark-mode .question-item label::before {
    background: #1e293b;
    border-color: #64748b;
}

body[data-theme="dark"] .checker-results,
body.dark-theme .checker-results,
body.dark-mode .checker-results {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .result-card,
body.dark-theme .result-card,
body.dark-mode .result-card {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

body[data-theme="dark"] .result-analysis h4,
body.dark-theme .result-analysis h4,
body.dark-mode .result-analysis h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .result-message p,
body.dark-theme .result-message p,
body.dark-mode .result-message p {
    color: #cbd5e1;
}

/* SECTORES */
body[data-theme="dark"] .sectors-table,
body.dark-theme .sectors-table,
body.dark-mode .sectors-table {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .sector-card,
body.dark-theme .sector-card,
body.dark-mode .sector-card {
    background: #1e293b;
    border-color: #4a5568;
}

body[data-theme="dark"] .sector-card h4,
body.dark-theme .sector-card h4,
body.dark-mode .sector-card h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .sector-card p,
body.dark-theme .sector-card p,
body.dark-mode .sector-card p {
    color: #cbd5e1;
}

body[data-theme="dark"] .sector-stats,
body.dark-theme .sector-stats,
body.dark-mode .sector-stats {
    background: #334155;
    border-color: #4a5568;
}

/* MAPA DE INSPECCIONES */
body[data-theme="dark"] .inspection-map,
body.dark-theme .inspection-map,
body.dark-mode .inspection-map {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .inspection-map h3,
body.dark-theme .inspection-map h3,
body.dark-mode .inspection-map h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .map-visual,
body.dark-theme .map-visual,
body.dark-mode .map-visual {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border: 2px solid #4a5568;
}

body[data-theme="dark"] .map-legend .legend-item,
body.dark-theme .map-legend .legend-item,
body.dark-mode .map-legend .legend-item {
    color: #cbd5e1;
}

/* EXCEPCIONES */
body[data-theme="dark"] .exception-card.false-myth,
body.dark-theme .exception-card.false-myth,
body.dark-mode .exception-card.false-myth {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: rgba(239, 68, 68, 0.4);
}

body[data-theme="dark"] .exception-card.true-exception,
body.dark-theme .exception-card.true-exception,
body.dark-mode .exception-card.true-exception {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: rgba(34, 197, 94, 0.4);
}

body[data-theme="dark"] .exception-header h4,
body.dark-theme .exception-header h4,
body.dark-mode .exception-header h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .exception-content li,
body.dark-theme .exception-content li,
body.dark-mode .exception-content li {
    color: #cbd5e1;
    border-color: #4a5568;
}

/* CASOS COMPLEJOS */
body[data-theme="dark"] .complex-cases,
body.dark-theme .complex-cases,
body.dark-mode .complex-cases {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .complex-cases h3,
body.dark-theme .complex-cases h3,
body.dark-mode .complex-cases h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .case-header,
body.dark-theme .case-header,
body.dark-mode .case-header {
    background: #334155;
    color: #f1f5f9;
}

body[data-theme="dark"] .case-header:hover,
body.dark-theme .case-header:hover,
body.dark-mode .case-header:hover {
    background: #475569;
}

body[data-theme="dark"] .case-content,
body.dark-theme .case-content,
body.dark-mode .case-content {
    background: #1e293b;
}

body[data-theme="dark"] .case-content p,
body.dark-theme .case-content p,
body.dark-mode .case-content p {
    color: #cbd5e1;
}

/* LÍNEA DE TIEMPO */
body[data-theme="dark"] .consequences-timeline::before,
body.dark-theme .consequences-timeline::before,
body.dark-mode .consequences-timeline::before {
    background: linear-gradient(180deg, #ef4444, #dc2626, #ef4444);
}

body[data-theme="dark"] .consequences-timeline .step-content,
body.dark-theme .consequences-timeline .step-content,
body.dark-mode .consequences-timeline .step-content {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .consequences-timeline .step-content h3,
body.dark-theme .consequences-timeline .step-content h3,
body.dark-mode .consequences-timeline .step-content h3 {
    color: #fca5a5;
}

/* COMPARACIÓN VISUAL */
body[data-theme="dark"] .comparison-visual,
body.dark-theme .comparison-visual,
body.dark-mode .comparison-visual {
    background: #1e293b;
    border: 1px solid #4a5568;
}

body[data-theme="dark"] .comparison-header h3,
body.dark-theme .comparison-header h3,
body.dark-mode .comparison-header h3 {
    color: #f1f5f9;
}

body[data-theme="dark"] .bar-label,
body.dark-theme .bar-label,
body.dark-mode .bar-label {
    color: #cbd5e1;
}

body[data-theme="dark"] .comparison-note,
body.dark-theme .comparison-note,
body.dark-mode .comparison-note {
    background: #78350f;
    border-left: 4px solid #92400e;
    color: #fef3c7;
}

/* PASOS DE ACCIÓN */
body[data-theme="dark"] .step-card,
body.dark-theme .step-card,
body.dark-mode .step-card {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-color: rgba(59, 130, 246, 0.4);
}

body[data-theme="dark"] .step-card h4,
body.dark-theme .step-card h4,
body.dark-mode .step-card h4 {
    color: #f1f5f9;
}

body[data-theme="dark"] .step-card p,
body.dark-theme .step-card p,
body.dark-mode .step-card p {
    color: #cbd5e1;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */

@media (max-width: 768px) {
    /* VERIFICADOR */
    .compliance-checker {
        padding: 1.5rem;
    }
    
    .checker-questions {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .checker-results {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 1.5rem;
    }
    
    .result-scale {
        flex-direction: column;
    }
    
    /* SECTORES */
    .sector-cards {
        grid-template-columns: 1fr;
    }
    
    /* MAPA */
    .map-visual {
        height: 300px;
    }
    
    .map-sector {
        width: 90px;
        height: 90px;
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    .map-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* EXCEPCIONES */
    .exceptions-container {
        grid-template-columns: 1fr;
    }
    
    /* ACCIÓN */
    .action-steps {
        grid-template-columns: 1fr;
    }
    
    /* BARRAS DE COMPARACIÓN */
    .bar-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .bar-label {
        flex: none;
        width: 100%;
    }
    
    .bar {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .checker-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .map-sector {
        width: 70px;
        height: 70px;
        font-size: 0.7rem;
        padding: 0.25rem;
    }
    
    .sector-label,
    .sector-frequency {
        display: none;
    }
    
    .map-sector:hover .sector-label,
    .map-sector:hover .sector-frequency {
        display: block;
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        padding: 0.5rem;
        border-radius: 8px;
        width: 120px;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
    }
}

/* ============================================ */
/* ANIMACIONES */
/* ============================================ */

/* Animación de entrada */
.compliance-checker,
.sectors-table,
.inspection-map,
.exceptions-container,
.complex-cases,
.consequences-timeline,
.comparison-visual,
.action-steps {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}

.compliance-checker {
    animation-delay: 0.1s;
}

.sectors-table {
    animation-delay: 0.2s;
}

.inspection-map {
    animation-delay: 0.3s;
}

.exceptions-container {
    animation-delay: 0.4s;
}

.complex-cases {
    animation-delay: 0.5s;
}

.consequences-timeline {
    animation-delay: 0.6s;
}

.comparison-visual {
    animation-delay: 0.7s;
}

.action-steps {
    animation-delay: 0.8s;
}

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

/* Animación de checkboxes */
.question-item input:checked + label::before {
    animation: checkPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

/* Animación de puntaje */
@keyframes scoreCountUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.result-score {
    animation: scoreCountUp 0.5s ease-out;
}

/* Animación de barras de mapa */
.map-sector {
    animation: float 6s ease-in-out infinite;
}

.map-sector:nth-child(1) { animation-delay: 0s; }
.map-sector:nth-child(2) { animation-delay: 1s; }
.map-sector:nth-child(3) { animation-delay: 2s; }
.map-sector:nth-child(4) { animation-delay: 3s; }
.map-sector:nth-child(5) { animation-delay: 4s; }

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animación de acordeón */
.case-content {
    animation: accordionSlideDown 0.3s ease-out;
}

@keyframes accordionSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================ */
/* CSS CORREGIDO PARA VERIFICADOR INTERACTIVO */
/* ============================================ */

/* 1. PRIMERO: Asegurar que el texto se vea siempre */
.question-item label .es-lang,
.question-item label .en-lang {
    display: block !important;
    color: #4a5568;
    line-height: 1.5;
    font-size: 0.95rem;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 2. Mostrar español por defecto, inglés solo si hay clase en-lang */
.question-item label .en-lang {
    display: none !important;
}

/* Si el body tiene clase en-lang, mostrar inglés y ocultar español */
body.en-lang .question-item label .es-lang {
    display: none !important;
}

body.en-lang .question-item label .en-lang {
    display: block !important;
}

/* 3. Para los headers de grupos */
.question-group h4.es-lang,
.question-group h4.en-lang {
    display: block;
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(52, 152, 219, 0.3);
    font-weight: 700;
}

.question-group h4.en-lang {
    display: none;
}

body.en-lang .question-group h4.es-lang {
    display: none;
}

body.en-lang .question-group h4.en-lang {
    display: block;
}

/* 4. Para los headers del checker */
.checker-header h3.es-lang,
.checker-header h3.en-lang {
    display: block;
    color: #2c3e50;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.checker-header h3.en-lang {
    display: none;
}

.checker-header p.es-lang,
.checker-header p.en-lang {
    display: block;
    color: #4a5568;
    font-size: 0.95rem;
}

.checker-header p.en-lang {
    display: none;
}

body.en-lang .checker-header h3.es-lang,
body.en-lang .checker-header p.es-lang {
    display: none;
}

body.en-lang .checker-header h3.en-lang,
body.en-lang .checker-header p.en-lang {
    display: block;
}

/* 5. Para los resultados */
.result-label .es-lang,
.result-label .en-lang {
    display: block;
    font-size: 0.95rem;
    opacity: 0.9;
}

.result-label .en-lang {
    display: none;
}

.result-analysis h4.es-lang,
.result-analysis h4.en-lang {
    display: block;
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.result-analysis h4.en-lang {
    display: none;
}

.result-message .es-lang,
.result-message .en-lang {
    display: block;
    color: #4a5568;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.result-message .en-lang {
    display: none;
}

/* Escala */
.scale-item .es-lang,
.scale-item .en-lang {
    display: inline;
    font-size: 0.875rem;
    font-weight: 500;
}

.scale-item .en-lang {
    display: none;
}

/* Botones */
.checker-actions .es-lang,
.checker-actions .en-lang {
    display: inline;
}

.checker-actions .en-lang {
    display: none;
}

/* 6. Cambiar para inglés */
body.en-lang .result-label .es-lang,
body.en-lang .result-analysis h4.es-lang,
body.en-lang .result-message .es-lang,
body.en-lang .scale-item .es-lang,
body.en-lang .checker-actions .es-lang {
    display: none;
}

body.en-lang .result-label .en-lang,
body.en-lang .result-analysis h4.en-lang,
body.en-lang .result-message .en-lang,
body.en-lang .scale-item .en-lang,
body.en-lang .checker-actions .en-lang {
    display: inline;
}

body.en-lang .result-message .en-lang,
body.en-lang .result-label .en-lang {
    display: block;
}

/* 7. Títulos de sección */
.section-title.es-lang,
.section-title.en-lang {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    color: #2c3e50;
    font-weight: 700;
    position: relative;
    padding-left: 1.5rem;
}

.section-title.es-lang::before,
.section-title.en-lang::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 32px;
    background: linear-gradient(135deg, #3498db, #2c3e50);
    border-radius: 4px;
}

.section-title.en-lang {
    display: none;
}

body.en-lang .section-title.es-lang {
    display: none;
}

body.en-lang .section-title.en-lang {
    display: block;
}

/* ============================================ */
/* SOLUCIÓN ALTERNATIVA MÁS SIMPLE */
/* ============================================ */

/* Si todo lo anterior es demasiado complejo, prueba esto: */

/* Mostrar solo español por defecto (ocultar inglés) */
.en-lang {
    display: none !important;
}

/* Si el body tiene clase en-lang, mostrar inglés y ocultar español */
body.en-lang .es-lang {
    display: none !important;
}

body.en-lang .en-lang {
    display: block !important;
}

/* Para elementos inline (spans dentro de labels) */
body.en-lang .en-lang {
    display: inline !important;
}

/* Excepciones específicas */
body.en-lang .section-title.en-lang,
body.en-lang .question-group h4.en-lang,
body.en-lang .checker-header h3.en-lang,
body.en-lang .result-label .en-lang,
body.en-lang .result-analysis h4.en-lang {
    display: block !important;
}

body.en-lang .checker-header p.en-lang,
body.en-lang .result-message .en-lang {
    display: block !important;
}

/* ============================================ */
/* DEBUG: Para ver qué está pasando */
/* ============================================ */

/* Agrega esto temporalmente para diagnosticar */
.question-item {
    border: 1px solid #e74c3c; /* Rojo para ver contenedores */
    padding: 10px;
    margin: 5px 0;
}

.question-item label {
    border: 1px solid #3498db; /* Azul para ver labels */
    padding: 5px;
}

.question-item label span {
    border: 1px solid #2ecc71; /* Verde para ver spans */
    display: inline-block !important;
    background: rgba(46, 204, 113, 0.1);
    padding: 2px;
}

/* Quitar después de diagnosticar */
.question-item,
.question-item label,
.question-item label span {
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

/* ============================================ */
/* MODO OSCURO */
/* ============================================ */

body[data-theme="dark"] .question-item label .es-lang,
body[data-theme="dark"] .question-item label .en-lang,
body.dark-theme .question-item label .es-lang,
body.dark-theme .question-item label .en-lang,
body.dark-mode .question-item label .es-lang,
body.dark-mode .question-item label .en-lang {
    color: #cbd5e1;
}

body[data-theme="dark"] .question-item input:checked + label .es-lang,
body[data-theme="dark"] .question-item input:checked + label .en-lang,
body.dark-theme .question-item input:checked + label .es-lang,
body.dark-theme .question-item input:checked + label .en-lang,
body.dark-mode .question-item input:checked + label .es-lang,
body.dark-mode .question-item input:checked + label .en-lang {
    color: #f1f5f9;
}

/* ============================================ */
/* RESPONSIVE */
/* ============================================ */

@media (max-width: 768px) {
    .question-item label .es-lang,
    .question-item label .en-lang {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .question-group h4.es-lang,
    .question-group h4.en-lang {
        font-size: 1.1rem;
    }
    
    .checker-header h3.es-lang,
    .checker-header h3.en-lang {
        font-size: 1.3rem;
    }
    
    .section-title.es-lang,
    .section-title.en-lang {
        font-size: 1.5rem;
    }
} 

.btn-secondari{
    background: transparent;
    color: black;
    border: 2px solid #2563eb !important;
}