.intro-blog {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 35px;
    font-size: 1.05rem;
    color: #666;
    line-height: 1.6;
}

/* Estadísticas del blog */
.estadisticas-blog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px;
    margin: 35px 0;
    text-align: center;
}

.estadistica {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.estadistica .numero {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.estadistica .texto {
    font-size: 0.85rem;
    opacity: 0.9;
}

/* Filtro de categorías */
.filtro-categorias {
    margin: 35px 0;
    text-align: center;
}

.filtro-categorias h3 {
    color: #2a5298;
    margin-bottom: 12px;
    font-size: 1.3rem;
}

.categorias-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.btn-categoria {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    padding: 8px 16px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.btn-categoria:hover {
    background: #e9ecef;
    border-color: #2a5298;
}

.btn-categoria.active {
    background: #2a5298;
    color: white;
    border-color: #2a5298;
}

/* Grid de artículos */
.grid-articulos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
    margin: 35px 0;
}

.card-articulo {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-articulo:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Contenedor de imagen */
.articulo-imagen {
    position: relative;
    height: 200px;
    width: 100%;
    overflow: hidden;
    background: #f8f9fa;
}

.articulo-imagen {
    position: relative;
    height: 200px;
    width: 100%;
    background: #f8f9fa; /* fondo visible si sobra espacio */
    display: flex;
    align-items: center;
    justify-content: center;
}

.articulo-imagen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.card-articulo:hover .articulo-imagen img {
    transform: scale(1.05);
}

/* Badges de categoría */
.categoria-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    z-index: 2;
}

.categoria-badge.mantenimiento { background: #28a745; }
.categoria-badge.reparacion { background: #dc3545; }
.categoria-badge.guias-compra { background: #ffc107; color: #000; }
.categoria-badge.tutoriales { background: #17a2b8; }
.categoria-badge.problemas-comunes { background: #6f42c1; }
.categoria-badge.guias-tecnicas { background: #fd7e14; }

.icono-articulo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #2a5298;
    z-index: 2;
}

.articulo-contenido {
    padding: 18px;
}

.articulo-contenido h2 {
    margin: 0 0 12px 0;
    font-size: 1.2rem;
    line-height: 1.2;
}

.articulo-contenido h2 a {
    color: #2a5298;
    text-decoration: none;
}

.articulo-contenido h2 a:hover {
    color: #1e3c72;
    text-decoration: underline;
}

.articulo-resumen {
    color: #666;
    line-height: 1.6;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.articulo-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #888;
}

.articulo-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.articulo-puntos {
    margin: 12px 0;
    padding-left: 18px;
}

.articulo-puntos li {
    margin-bottom: 6px;
    color: #555;
    line-height: 1.4;
    font-size: 0.9rem;
}

.btn-leer-mas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #2a5298;
    color: white;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
    font-size: 0.9rem;
}

.btn-leer-mas:hover {
    background: #1e3c72;
    color: white;
    text-decoration: none;
}

/* Paginación */
.paginacion {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 35px 0;
}

.btn-pagina {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-decoration: none;
    color: #2a5298;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.btn-pagina:hover,
.btn-pagina.active {
    background: #2a5298;
    color: white;
    border-color: #2a5298;
}

/* Suscripción al blog */
.suscripcion-blog {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 10px;
    margin: 35px 0;
    text-align: center;
}

.suscripcion-contenido h3 {
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.suscripcion-contenido > p {
    margin-bottom: 18px;
    opacity: 0.9;
    font-size: 0.95rem;
}

.form-suscripcion {
    display: flex;
    gap: 8px;
    max-width: 400px;
    margin: 0 auto 12px;
}

.form-suscripcion input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 0.95rem;
}

.form-suscripcion button {
    background: #ffc107;
    color: #000;
    border: none;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease;
    font-size: 0.95rem;
}

.form-suscripcion button:hover {
    background: #e0a800;
}

.texto-pequeno {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* CTA FAQ */
.cta-faq {
    text-align: center;
    padding: 25px;
    background: #f8f9fa;
    border-radius: 10px;
    margin: 35px 0;
}

.cta-faq h3 {
    color: #2a5298;
    margin-bottom: 8px;
    font-size: 1.3rem;
}

.cta-faq p {
    margin-bottom: 18px;
    color: #666;
    font-size: 0.95rem;
}

.btn-faq {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #28a745;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s ease;
    font-size: 0.9rem;
}

.btn-faq:hover {
    background: #218838;
    color: white;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .grid-articulos {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .estadisticas-blog {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .categorias-list {
        justify-content: flex-start;
    }
    
    .form-suscripcion {
        flex-direction: column;
    }
    
    .articulo-meta {
        flex-direction: column;
        gap: 4px;
    }
    
    .articulo-imagen {
        height: 180px;
    }
    
    .titulo-principal {
        font-size: 1.6rem;
    }
    
    .suscripcion-blog {
        padding: 25px;
        margin: 30px 0;
    }
    
    .cta-faq {
        padding: 20px;
        margin: 30px 0;
    }
}

@media (max-width: 480px) {
    .titulo-principal {
        font-size: 1.4rem;
    }
    
    .estadisticas-blog {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .estadistica {
        padding: 15px;
    }
    
    .estadistica .numero {
        font-size: 1.5rem;
    }
    
    .articulo-imagen {
        height: 160px;
    }
    
    .articulo-contenido {
        padding: 15px;
    }
}

/* Estilos de respaldo para imágenes */
.articulo-imagen img:not([src]) {
    display: none;
}

.articulo-imagen:has(img[style*="display: none"]) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.articulo-imagen:has(img[style*="display: none"])::after {
    content: "Imagen no disponible";
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
}
/* ============================================
   ESTILOS MEJORADOS PARA ARTÍCULOS DEL BLOG
   ============================================ */

/* Breadcrumb elegante */
.breadcrumb {
    background: #f8f9fa;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    border-left: 4px solid #2a5298;
}

.breadcrumb a {
    color: #2a5298;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #1e3c72;
    text-decoration: underline;
}

.breadcrumb span {
    color: #666;
    font-weight: 500;
}

.breadcrumb i {
    margin: 0 8px;
    color: #999;
    font-size: 0.8rem;
}

/* Header del artículo */
.articulo-header {
    margin-bottom: 40px;
    text-align: center;
}

.articulo-header h1 {
    color: #1e3c72;
    font-size: 2.2rem;
    line-height: 1.3;
    margin: 25px 0 20px 0;
    font-weight: 700;
    text-align: center;
}

/* Badge de categoría mejorado */
.categoria-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    text-transform: uppercase;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    border: 2px solid transparent;
}

.categoria-badge.mantenimiento { 
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
}

.categoria-badge.reparacion { 
    background: linear-gradient(135deg, #dc3545, #fd7e14);
    color: white;
}

.categoria-badge.guias-compra { 
    background: linear-gradient(135deg, #ffc107, #ff9f1c);
    color: #000;
}

.categoria-badge.tutoriales { 
    background: linear-gradient(135deg, #17a2b8, #20c997);
    color: white;
}

.categoria-badge.problemas-comunes { 
    background: linear-gradient(135deg, #6f42c1, #9b59b6);
    color: white;
}

.categoria-badge.guias-tecnicas { 
    background: linear-gradient(135deg, #fd7e14, #e74c3c);
    color: white;
}

/* Imagen del artículo - REDUCIDA 25% */
.articulo-imagen-container {
    margin: 30px auto;
    max-width: 900px; /* Reducido de 1200px */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    position: relative;
    background: #f8f9fa;
}

.articulo-imagen-pequena {
    max-width: 300px; /* 25% más pequeña que 1200px */
}

.articulo-imagen-principal {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.articulo-imagen-container:hover .articulo-imagen-principal {
    transform: scale(1.02);
}

.articulo-imagen-pie {
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 0;
}

/* Contenido del artículo mejorado */
.contenido-articulo {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Introducción destacada */
.intro-articulo {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 40px;
    border-left: 5px solid #2a5298;
    font-size: 1.1rem;
    color: #333;
}

.intro-articulo p {
    margin: 0;
    font-style: italic;
}

/* Encabezados dentro del artículo */
.contenido-articulo h2 {
    color: #2a5298;
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid #e9ecef;
    font-weight: 600;
    font-size: 1.6rem;
}

.contenido-articulo h3 {
    color: #1e3c72;
    margin: 30px 0 15px 0;
    font-weight: 600;
    font-size: 1.3rem;
}

.contenido-articulo h4 {
    color: #2a5298;
    margin: 25px 0 12px 0;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Párrafos y texto */
.contenido-articulo p {
    margin-bottom: 20px;
    color: #444;
    text-align: justify;
}

/* Listas elegantes */
.contenido-articulo ul,
.contenido-articulo ol {
    margin: 20px 0 25px 30px;
    padding-left: 0;
}

.contenido-articulo li {
    margin-bottom: 12px;
    color: #444;
    position: relative;
    padding-left: 10px;
}

.contenido-articulo ul li:before {
    content: "✓";
    color: #28a745;
    font-weight: bold;
    position: absolute;
    left: -20px;
}

/* Tabla de contenidos */
.tabla-contenido {
    background: linear-gradient(135deg, #edf2f7 0%, #e2e8f0 100%);
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
    border: 1px solid #cbd5e0;
}

.tabla-contenido h2 {
    margin-top: 0;
    color: #2d3748;
}

.tabla-contenido ul {
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.tabla-contenido li {
    margin-bottom: 0.75rem;
    break-inside: avoid;
}

.tabla-contenido a {
    color: #2c5282;
    text-decoration: none;
    display: block;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.tabla-contenido a:hover {
    background-color: rgba(45, 55, 72, 0.05);
    text-decoration: underline;
}

/* Checklist de mantenimiento */
.checklist-mantenimiento {
    background: #f8fafc;
    border-left: 4px solid #2c5282;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.checklist-mantenimiento h3 {
    margin-top: 0;
    color: #2c5282;
}

.checklist-mantenimiento ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0 0;
}

.checklist-mantenimiento li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
}

.checklist-mantenimiento input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.btn-checklist-reset {
    margin-top: 1rem; 
    padding: 0.5rem 1rem; 
    background: #4a5568; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer;
}

.btn-checklist-reset:hover {
    background: #2d3748;
}

/* Consejos y advertencias */
.articulo-consejo {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-radius: 0 4px 4px 0;
}

.articulo-advertencia {
    background: #f8d7da;
    border-left-color: #dc3545;
}

/* CTA intermedio */
.articulo-cta {
    background: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin: 3rem 0;
    text-align: center;
}

.articulo-cta .btn-primary {
    background: #e53e3e;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-block;
    margin-top: 1rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

.articulo-cta .btn-primary:hover {
    background: #c53030;
}

.telefono-cta {
    margin-top: 1rem; 
    font-size: 0.9rem; 
    opacity: 0.9;
}

/* Etiquetas del artículo */
.articulo-etiquetas {
    background: #f8f9fa;
    padding: 15px 20px;
    border-radius: 8px;
    margin: 30px 0;
    border-left: 4px solid #2a5298;
}

.articulo-etiquetas span {
    font-weight: 600;
    color: #2a5298;
    margin-right: 10px;
}

.articulo-etiquetas a {
    display: inline-block;
    background: white;
    color: #2a5298;
    padding: 5px 12px;
    margin: 0 5px 5px 0;
    border-radius: 15px;
    text-decoration: none;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.articulo-etiquetas a:hover {
    background: #2a5298;
    color: white;
    border-color: #2a5298;
}

/* Compartir en redes sociales */
.articulo-compartir {
    background: white;
    padding: 25px;
    border-radius: 10px;
    margin: 30px 0;
    border: 1px solid #e9ecef;
    text-align: center;
}

.articulo-compartir span {
    display: block;
    color: #2a5298;
    margin-bottom: 20px;
    font-weight: 600;
}

.articulo-compartir a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #f8f9fa;
    color: #2a5298;
    border-radius: 50%;
    margin: 0 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.articulo-compartir a:hover {
    background: #2a5298;
    color: white;
    transform: translateY(-3px);
}

/* Navegación entre artículos */
.articulo-navegacion {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    gap: 20px;
}

.articulo-anterior,
.articulo-siguiente {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 10px;
    text-decoration: none;
    color: #2a5298;
    border: 2px solid #e9ecef;
    transition: all 0.3s ease;
}

.articulo-anterior:hover,
.articulo-siguiente:hover {
    border-color: #2a5298;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(42, 82, 152, 0.1);
}

.articulo-anterior.disabled,
.articulo-siguiente.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.articulo-anterior i {
    margin-right: 15px;
    font-size: 1.2rem;
}

.articulo-siguiente i {
    margin-left: 15px;
    font-size: 1.2rem;
}

.nav-label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 5px;
}

.nav-title {
    display: block;
    font-weight: 600;
    font-size: 1rem;
}

/* Volver al blog */
.volver-blog {
    text-align: center;
    margin: 30px 0;
}

.btn-volver {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2a5298;
    color: white;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-volver:hover {
    background: #1e3c72;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(42, 82, 152, 0.2);
}

/* FAQ Items */
.faq-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: #2a5298;
    box-shadow: 0 3px 10px rgba(42, 82, 152, 0.1);
}

.faq-item h3 {
    color: #2a5298;
    margin-top: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.faq-item h3:after {
    content: "+";
    font-size: 1.5rem;
    font-weight: normal;
}

.faq-item.active h3:after {
    content: "-";
}

/* Responsive para artículos */
@media (max-width: 768px) {
    .articulo-header h1 {
        font-size: 1.8rem;
    }
    
    .articulo-imagen-container {
        max-width: 100%;
        margin: 20px 0;
    }
    
    .articulo-imagen-pequena {
        max-width: 100%;
    }
    
    .tabla-contenido ul {
        columns: 1;
    }
    
    .articulo-navegacion {
        flex-direction: column;
    }
    
    .articulo-anterior,
    .articulo-siguiente {
        width: 100%;
    }
    
    .contenido-articulo {
        padding: 20px;
    }
    
    .articulo-consejo,
    .articulo-advertencia {
        padding: 15px;
    }
    
    .checklist-mantenimiento {
        padding: 20px;
    }
    
    .articulo-cta {
        padding: 25px 20px;
    }
    
    .articulo-etiquetas a {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
    
    .articulo-compartir a {
        width: 35px;
        height: 35px;
        line-height: 35px;
        margin: 0 5px;
    }
}

@media (max-width: 480px) {
    .articulo-header h1 {
        font-size: 1.5rem;
    }
    
    .breadcrumb {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
    
    .categoria-badge {
        font-size: 0.75rem;
        padding: 6px 15px;
    }
    
    .contenido-articulo h2 {
        font-size: 1.3rem;
    }
    
    .contenido-articulo h3 {
        font-size: 1.1rem;
    }
    
    .articulo-imagen-pie {
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

/* Clases para accesibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Animaciones sutiles */
.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo h4 {
    position: relative;
    padding-left: 15px;
}

.contenido-articulo h2:before,
.contenido-articulo h3:before,
.contenido-articulo h4:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #2a5298, #1e3c72);
    border-radius: 2px;
}

/* Mejoras de legibilidad */
.contenido-articulo strong {
    color: #2a5298;
    font-weight: 600;
}

.contenido-articulo em {
    color: #666;
    font-style: italic;
}

/* Separadores decorativos */
.contenido-articulo hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, #e9ecef, transparent);
    margin: 40px 0;
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA ARTÍCULO DE FILTROS DE ACEITE
   ============================================ */

/* Mejoras para la tabla de contenidos específica */
.tabla-contenido.especifica {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-left: 4px solid #27ae60;
    padding: 1.5rem;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.tabla-contenido.especifica h2 {
    margin-top: 0;
    color: #27ae60;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.tabla-contenido.especifica ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
}

.tabla-contenido.especifica li {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.tabla-contenido.especifica li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: #27ae60;
}

.tabla-contenido.especifica a {
    color: #2d3748;
    text-decoration: none;
    transition: color 0.3s;
}

.tabla-contenido.especifica a:hover {
    color: #27ae60;
    text-decoration: underline;
}

/* Tipos de filtros */
.tipos-filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.tipo-filtro {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.tipo-filtro:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.tipo-filtro h3 {
    color: #27ae60;
    margin-top: 0;
}

/* Tabla de intervalos */
.tabla-intervalos {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.tabla-intervalos th {
    background: #27ae60;
    color: white;
    padding: 1rem;
    text-align: left;
}

.tabla-intervalos td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.tabla-intervalos tr:hover {
    background: #f8fafc;
}

/* Consejo importante */
.consejo-importante {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 1.5rem;
    margin: 2rem 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.consejo-importante i {
    font-size: 1.5rem;
    color: #ffc107;
}

/* Señales de alerta */
.señales-alerta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.señal {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.señal:hover {
    border-color: #e74c3c;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.1);
}

.señal i {
    font-size: 2rem;
    margin-bottom: 1rem;
}

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

.marca-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
}

.marca-item:hover {
    background: white;
    border-color: #27ae60;
    transform: translateY(-2px);
}

.marca-item h4 {
    color: #27ae60;
    margin-top: 0;
}

/* Comparativa original vs compatible */
.comparativa-original-compatible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.opcion {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.opcion:hover {
    border-color: #27ae60;
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.1);
}

.opcion h3 {
    color: #27ae60;
    margin-top: 0;
    text-align: center;
}

.opcion ul {
    list-style: none;
    padding-left: 0;
}

.opcion li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f1f1;
}

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

/* CTA repuestos */
.cta-repuestos {
    background: linear-gradient(135deg, #27ae60 0%, #219653 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    margin: 3rem 0;
    text-align: center;
}

.cta-botones {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.btn-buscar-grande {
    background: white;
    color: #27ae60;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.btn-buscar-grande:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-tutoriales {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s;
}

.btn-tutoriales:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

/* Responsive específico */
@media (max-width: 768px) {
    .tipos-filtros,
    .señales-alerta,
    .marcas-recomendadas,
    .comparativa-original-compatible {
        grid-template-columns: 1fr;
    }
    
    .cta-botones {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-buscar-grande,
    .btn-tutoriales {
        width: 100%;
        justify-content: center;
    }
    
    .tabla-intervalos {
        display: block;
        overflow-x: auto;
    }
}

/* Navegación mejorada para artículo específico */
.articulo-navegacion.especifica {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    gap: 1rem;
}

.articulo-anterior.especifica,
.articulo-siguiente.especifica {
    flex: 1;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 6px;
    text-decoration: none;
    color: #2d3748;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.articulo-anterior.especifica:hover,
.articulo-siguiente.especifica:hover {
    background: #27ae60;
    color: white;
    border-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
}

.articulo-indice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    background: #e2e8f0;
    border-radius: 6px;
    text-decoration: none;
    color: #2d3748;
    transition: all 0.3s;
}

.articulo-indice:hover {
    background: #cbd5e0;
    transform: translateY(-2px);
}

.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Botón de imprimir */
.btn-imprimir {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: none;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-imprimir:hover {
    background: #219653;
    transform: translateY(-2px);
}

/* Barra de progreso de lectura */
.reading-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    background-color: #27ae60;
    width: 0%;
    z-index: 1000;
    transition: width 0.3s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    opacity: 0;
}

/* Meta información simplificada */
.articulo-meta-simplificada {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1rem 0 2rem 0;
    color: #666;
    font-size: 0.9rem;
}

.articulo-meta-simplificada .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.articulo-meta-simplificada i {
    color: #27ae60;
}
/* ============================================
   ESTILOS PARA ARTÍCULO "MOTOR NO ARRANCA"
   ============================================ */

/* Checklist de diagnóstico rápido */
.checklist-diagnostico {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.paso-diagnostico {
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
    padding: 0.8rem;
    background: white;
    border-radius: 6px;
    transition: all 0.3s;
}

.paso-diagnostico:hover {
    background: #edf2f7;
    transform: translateX(5px);
}

.paso-diagnostico input[type="checkbox"] {
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 1rem;
    cursor: pointer;
    accent-color: #2c5282;
}

.paso-diagnostico label {
    flex: 1;
    font-weight: 500;
    color: #2d3748;
    cursor: pointer;
}

.paso-diagnostico input[type="checkbox"]:checked + label {
    text-decoration: line-through;
    color: #718096;
    opacity: 0.7;
}

/* Diagnóstico por síntomas */
.diagnostico-sintomas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.sintoma-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.sintoma-item:hover {
    border-color: #2c5282;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.sintoma-item h3 {
    color: #2c5282;
    margin-top: 0;
    font-size: 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #edf2f7;
}

.sintoma-item p strong {
    color: #e53e3e;
    font-size: 1.1rem;
}

.sintoma-item ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.sintoma-item li {
    margin-bottom: 0.5rem;
    color: #4a5568;
    position: relative;
    padding-left: 0.5rem;
}

.sintoma-item li:before {
    content: "•";
    color: #2c5282;
    font-weight: bold;
    position: absolute;
    left: -1rem;
}

.solucion-recomendada {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.solucion-recomendada h4 {
    color: #38a169;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.solucion-recomendada p {
    margin-bottom: 1rem;
    color: #4a5568;
    font-size: 0.95rem;
}

.btn-solucion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #2c5282;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 0.9rem;
}

.btn-solucion:hover {
    background: #1a365d;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(44, 82, 130, 0.2);
}

/* Pasos eléctricos */
.pasos-electricos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.paso-electrico {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s;
}

.paso-electrico:hover {
    border-color: #2c5282;
    box-shadow: 0 5px 15px rgba(44, 82, 130, 0.1);
}

.paso-electrico h4 {
    color: #2c5282;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.paso-electrico i {
    color: #e53e3e;
    font-size: 1.2rem;
}

.paso-electrico p {
    color: #4a5568;
    margin: 0.8rem 0;
}

.paso-electrico ul, .paso-electrico ol {
    margin: 0.8rem 0;
    padding-left: 1.5rem;
}

.paso-electrico li {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

/* Pasos de combustible */
.pasos-combustible {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
    counter-reset: paso;
}

.pasos-combustible li {
    counter-increment: paso;
    margin-bottom: 1.5rem;
    padding-left: 3rem;
    position: relative;
    list-style: none;
}

.pasos-combustible li:before {
    content: counter(paso);
    position: absolute;
    left: 0;
    top: 0;
    background: #2c5282;
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
}

.pasos-combustible strong {
    display: block;
    color: #2c5282;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

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

/* Repuestos solución */
.repuestos-solucion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.repuesto-sol {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.repuesto-sol:hover {
    border-color: #e53e3e;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(229, 62, 62, 0.1);
}

.repuesto-sol i {
    font-size: 2.5rem;
    color: #e53e3e;
    margin-bottom: 1rem;
}

.repuesto-sol h4 {
    color: #2c5282;
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.repuesto-sol p {
    color: #4a5568;
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.repuesto-sol p strong {
    color: #e53e3e;
}

.btn-repuesto {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #e53e3e;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.btn-repuesto:hover {
    background: #c53030;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 62, 62, 0.2);
}

/* Consejo final */
.consejo-final {
    background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%);
    border: 2px solid #fc8181;
    border-radius: 10px;
    padding: 2rem;
    margin: 3rem 0;
    text-align: center;
}

.consejo-final h3 {
    color: #c53030;
    margin-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.4rem;
}

.consejo-final p {
    color: #4a5568;
    margin: 1rem 0 1.5rem 0;
    font-size: 1.05rem;
}

.consejo-final ul {
    text-align: left;
    max-width: 600px;
    margin: 1.5rem auto;
    padding-left: 2rem;
}

.consejo-final li {
    margin-bottom: 0.8rem;
    color: #4a5568;
}

.btn-contacto-expertos {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
    color: white;
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    font-size: 1rem;
    box-shadow: 0 4px 15px rgba(229, 62, 62, 0.3);
}

.btn-contacto-expertos:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(229, 62, 62, 0.4);
}

/* Responsive específico */
@media (max-width: 768px) {
    .diagnostico-sintomas,
    .pasos-electricos,
    .repuestos-solucion {
        grid-template-columns: 1fr;
    }
    
    .pasos-combustible {
        padding: 1.5rem;
    }
    
    .pasos-combustible li {
        padding-left: 2.5rem;
    }
    
    .consejo-final {
        padding: 1.5rem;
    }
    
    .sintoma-item h3 {
        font-size: 1.1rem;
    }
    
    .btn-contacto-expertos {
        padding: 0.7rem 1.5rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .checklist-diagnostico {
        padding: 1rem;
    }
    
    .paso-diagnostico {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    .sintoma-item {
        padding: 1.2rem;
    }
    
    .repuesto-sol {
        padding: 1.2rem;
    }
    
    .consejo-final h3 {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}
/* ===== ESTILOS ESPECÍFICOS PARA ARTÍCULO DE BUJÍAS ===== */

/* Definiciones */
.definiciones-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .definiciones-container {
        grid-template-columns: 1fr;
    }
}

.definicion-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.definicion-card:hover {
    transform: translateY(-5px);
}

.definicion-card.original .definicion-header {
    background: linear-gradient(135deg, #3182ce, #2c5282);
    color: white;
    padding: 1.5rem;
}

.definicion-card.compatible .definicion-header {
    background: linear-gradient(135deg, #38a169, #2f855a);
    color: white;
    padding: 1.5rem;
}

.definicion-body {
    padding: 1.5rem;
    background: white;
}

/* Tabla comparativa */
.tabla-comparativa-container {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tabla-comparativa-bujias {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.tabla-comparativa-bujias th {
    background: linear-gradient(135deg, #4a5568, #2d3748);
    color: white;
    padding: 1rem;
    text-align: center;
    font-weight: 600;
}

.tabla-comparativa-bujias td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.tabla-comparativa-bujias tr:nth-child(even) {
    background-color: #f7fafc;
}

.tabla-comparativa-bujias tr:hover {
    background-color: #edf2f7;
}

/* Marcas compatibles */
.marcas-compatibles-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.marca-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-top: 4px solid #3182ce;
}

.marca-card:nth-child(2) {
    border-top-color: #38a169;
}

.marca-card:nth-child(3) {
    border-top-color: #e53e3e;
}

.marca-card:nth-child(4) {
    border-top-color: #805ad5;
}

.marca-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.rating {
    color: #f6ad55;
    font-size: 1rem;
}

/* Recomendaciones */
.recomendaciones-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .recomendaciones-container {
        grid-template-columns: 1fr;
    }
}

.recomendacion-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.recomendacion-card.original {
    border-left: 5px solid #3182ce;
}

.recomendacion-card.compatible {
    border-left: 5px solid #38a169;
}

.recomendacion-card h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.recomendacion-card ul {
    list-style: none;
    padding-left: 0;
}

.recomendacion-card li {
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.recomendacion-card li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #38a169;
    font-weight: bold;
}

.recomendacion-card.original li:before {
    color: #3182ce;
}

/* Riesgos */
.riesgos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.riesgo-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-left: 4px solid #e53e3e;
}

.riesgo-icon {
    color: #e53e3e;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Intervalos */
.intervalos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.intervalo-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #3182ce;
}

.intervalo-card:nth-child(2) {
    border-top-color: #38a169;
}

.intervalo-card:nth-child(3) {
    border-top-color: #d69e2e;
}

/* Consejo experto */
.consejo-experto {
    background: linear-gradient(135deg, #f7fafc, #edf2f7);
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 5px solid #3182ce;
}

.consejo-experto h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.consejo-content p {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.consejo-autor {
    font-style: italic;
    color: #718096;
    text-align: right;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* CTA final */
.cta-final {
    background: linear-gradient(135deg, #4a5568, #2d3748);
    color: white;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.cta-container h3 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.cta-container p {
    color: #cbd5e0;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

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

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-cta.original {
    background: #3182ce;
    color: white;
}

.btn-cta.original:hover {
    background: #2c5282;
    transform: translateY(-2px);
}

.btn-cta.compatible {
    background: #38a169;
    color: white;
}

.btn-cta.compatible:hover {
    background: #2f855a;
    transform: translateY(-2px);
}

/* FAQ */
.faq-item {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.faq-item h3 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.faq-item ul, .faq-item ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.faq-item li {
    margin-bottom: 0.5rem;
}

/* Estilos generales del artículo */
.articulo-consejo {
    background: #e6fffa;
    border-left: 4px solid #38a169;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 5px 5px 0;
}

.articulo-advertencia {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
}
/* ===== ESTILOS ESPECÍFICOS PARA ARTÍCULO DE CAMBIO DE IMPELLER ===== */

/* Advertencia */
.articulo-advertencia {
    background: linear-gradient(135deg, #fff5f5, #fed7d7);
    border-left: 5px solid #e53e3e;
    border-radius: 0 10px 10px 0;
    padding: 1.5rem;
    margin: 2rem 0;
}

.articulo-advertencia h3 {
    color: #c53030;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.articulo-advertencia p {
    color: #742a2a;
    font-size: 1rem;
    line-height: 1.6;
}

/* Señales de cambio */
.señales-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.señal-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-top: 4px solid #3182ce;
}

.señal-card:nth-child(2) {
    border-top-color: #4299e1;
}

.señal-card:nth-child(3) {
    border-top-color: #ed8936;
}

.señal-card:nth-child(4) {
    border-top-color: #38a169;
}

.señal-icon {
    color: #3182ce;
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.señal-content h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.señal-content p {
    color: #718096;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Herramientas */
.herramientas-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .herramientas-container {
        grid-template-columns: 1fr;
    }
}

.herramientas-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.herramientas-header {
    background: linear-gradient(135deg, #4a5568, #2d3748);
    color: white;
    padding: 1.5rem;
}

.herramientas-header h4 {
    margin: 0;
    font-size: 1.2rem;
}

.herramientas-body {
    padding: 1.5rem;
}

.herramientas-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.herramientas-body li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-left: 1.5rem;
}

.herramientas-body li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #38a169;
    font-weight: bold;
}

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

/* Checklist interactivo */
.checklist-herramientas {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid #e2e8f0;
}

.checklist-herramientas h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.checklist-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.checklist-item input[type="checkbox"] {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checklist-item label {
    cursor: pointer;
    font-size: 1rem;
    color: #4a5568;
    transition: all 0.3s ease;
}

.btn-checklist-reset {
    background: #4a5568;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s ease;
}

.btn-checklist-reset:hover {
    background: #2d3748;
}

/* Pasos detallados */
.pasos-container {
    margin: 2rem 0;
}

.paso-detallado {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-left: 5px solid #3182ce;
}

@media (max-width: 768px) {
    .paso-detallado {
        flex-direction: column;
        gap: 1rem;
    }
}

.paso-numero {
    background: linear-gradient(135deg, #3182ce, #2c5282);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

.paso-content {
    flex: 1;
}

.paso-content h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

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

.paso-content li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    color: #4a5568;
    line-height: 1.6;
}

.paso-content li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3182ce;
    font-size: 1.5rem;
    line-height: 1;
}

/* Verificación */
.verificacion-container {
    background: #f0fff4;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 5px solid #38a169;
}

.verificacion-container ol {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.verificacion-container li {
    margin-bottom: 1.5rem;
    padding-left: 2.5rem;
    position: relative;
    counter-increment: step-counter;
}

.verificacion-container li:before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    background: #38a169;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.verificacion-container strong {
    color: #2d3748;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}

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

/* Errores comunes */
.errores-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.error-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-top: 4px solid #e53e3e;
}

.error-icon {
    color: #e53e3e;
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.error-content h4 {
    color: #c53030;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.error-content p {
    color: #718096;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Repuestos */
.repuestos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.repuesto-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #3182ce;
}

.repuesto-card:nth-child(2) {
    border-top-color: #38a169;
}

.repuesto-card:nth-child(3) {
    border-top-color: #ed8936;
}

.repuesto-icon {
    color: #3182ce;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.repuesto-content h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.repuesto-content p {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.repuesto-detail {
    font-size: 0.9rem !important;
    color: #a0aec0 !important;
    font-style: italic;
    margin-bottom: 1rem !important;
}

.btn-repuesto {
    display: inline-block;
    background: #3182ce;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-repuesto:hover {
    background: #2c5282;
    transform: translateY(-2px);
}

/* CTA final */
.cta-final {
    background: linear-gradient(135deg, #2d3748, #1a202c);
    color: white;
    border-radius: 10px;
    padding: 2.5rem;
    margin: 2rem 0;
    text-align: center;
}

.cta-container h3 {
    color: white;
    margin-bottom: 0.75rem;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.cta-container p {
    color: #cbd5e0;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    background: #3182ce;
    color: white;
}

.btn-cta:hover {
    background: #2b6cb0;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-cta:nth-child(2) {
    background: #38a169;
}

.btn-cta:nth-child(2):hover {
    background: #2f855a;
}

/* Estilos generales del artículo */
.articulo-consejo {
    background: #e6fffa;
    border-left: 4px solid #38a169;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 5px 5px 0;
}

.articulo-advertencia {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
}
/* ===== ESTILOS ESPECÍFICOS PARA ARTÍCULO DE TRANSMISIÓN ===== */

/* Síntomas */
.sintomas-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.sintoma-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-top: 4px solid #805ad5;
}

.sintoma-card:nth-child(2) {
    border-top-color: #d53f8c;
}

.sintoma-card:nth-child(3) {
    border-top-color: #3182ce;
}

.sintoma-card:nth-child(4) {
    border-top-color: #dd6b20;
}

.sintoma-icon {
    color: #805ad5;
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.sintoma-content h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.sintoma-content p {
    color: #718096;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Diagnóstico específico */
.diagnostico-container {
    margin: 2rem 0;
}

.problema-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.problema-header {
    background: linear-gradient(135deg, #4a5568, #2d3748);
    color: white;
    padding: 1.5rem;
}

.problema-header h3 {
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.problema-body {
    padding: 1.5rem;
}

.problema-body ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.problema-body li {
    margin-bottom: 0.75rem;
    color: #4a5568;
    line-height: 1.6;
}

.solucion-rapida {
    background: #f0fff4;
    border-left: 4px solid #38a169;
    padding: 1rem;
    margin-top: 1.5rem;
    border-radius: 0 5px 5px 0;
}

.solucion-rapida h4 {
    color: #2f855a;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.solucion-rapida p {
    color: #276749;
    margin: 0;
    line-height: 1.6;
}

/* Mantenimiento preventivo */
.mantenimiento-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tarea-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tarea-header {
    background: linear-gradient(135deg, #3182ce, #2c5282);
    color: white;
    padding: 1.5rem;
}

.tarea-header h4 {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tarea-body {
    padding: 1.5rem;
}

.tarea-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.tarea-body li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    line-height: 1.6;
}

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

.tarea-body strong {
    color: #2d3748;
}

/* Checklist mantenimiento */
.checklist-mantenimiento {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid #e2e8f0;
}

.checklist-mantenimiento h4 {
    color: #2d3748;
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checklist-mantenimiento p {
    color: #718096;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Tabla de aceites */
.tabla-container {
    overflow-x: auto;
    margin: 2rem 0;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.tabla-aceites {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.tabla-aceites th {
    background: linear-gradient(135deg, #805ad5, #6b46c1);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.tabla-aceites td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.tabla-aceites tr:nth-child(even) {
    background-color: #f7fafc;
}

.tabla-aceites tr:hover {
    background-color: #edf2f7;
}

.tabla-aceites strong {
    color: #2d3748;
}

/* Repuestos */
.repuestos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.repuesto-card {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 4px solid #805ad5;
}

.repuesto-card:nth-child(2) {
    border-top-color: #3182ce;
}

.repuesto-card:nth-child(3) {
    border-top-color: #38a169;
}

.repuesto-card:nth-child(4) {
    border-top-color: #dd6b20;
}

.repuesto-icon {
    color: #805ad5;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.repuesto-content h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.repuesto-content p {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.repuesto-detail {
    font-size: 0.9rem !important;
    color: #a0aec0 !important;
    font-style: italic;
    margin-bottom: 1rem !important;
}

.btn-repuesto {
    display: inline-block;
    background: #805ad5;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-repuesto:hover {
    background: #6b46c1;
    transform: translateY(-2px);
}

/* Decisión reparar vs reemplazar */
.decision-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .decision-container {
        grid-template-columns: 1fr;
    }
}

.opcion-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.opcion-card.reparar .opcion-header {
    background: linear-gradient(135deg, #38a169, #2f855a);
}

.opcion-card.reemplazar .opcion-header {
    background: linear-gradient(135deg, #3182ce, #2c5282);
}

.opcion-header {
    color: white;
    padding: 1.5rem;
}

.opcion-header h3 {
    margin: 0;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.opcion-body {
    padding: 1.5rem;
}

.opcion-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5rem 0;
}

.opcion-body li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-left: 1.5rem;
    color: #4a5568;
    line-height: 1.6;
}

.opcion-body li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #3182ce;
    font-size: 1.5rem;
    line-height: 1;
}

.opcion-card.reparar li:before {
    color: #38a169;
}

.opcion-card.reemplazar li:before {
    color: #3182ce;
}

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

.opcion-body strong {
    color: #2d3748;
}

.opcion-ventajas {
    background: #f7fafc;
    border-radius: 5px;
    padding: 1rem;
    margin-top: 1rem;
}

.opcion-ventajas h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.opcion-ventajas p {
    color: #718096;
    margin: 0;
    font-size: 0.95rem;
}

/* Calculadora de decisión */
.calculadora-decision {
    background: white;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 2px solid #e2e8f0;
}

.calculadora-decision h4 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    color: #4a5568;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.input-group input {
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #805ad5;
    box-shadow: 0 0 0 3px rgba(128, 90, 213, 0.1);
}

.btn-calcular {
    background: #805ad5;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    align-self: end;
}

.btn-calcular:hover {
    background: #6b46c1;
}

.resultado-calculadora {
    background: #f7fafc;
    border-radius: 5px;
    padding: 1.5rem;
    margin-top: 1rem;
    border-left: 4px solid #805ad5;
}

.resultado-calculadora h5 {
    margin: 0 0 0.75rem 0;
    font-size: 1.3rem;
}

.recomendacion.reparar {
    color: #38a169;
}

.recomendacion.reemplazar {
    color: #e53e3e;
}

.recomendacion.evaluar {
    color: #d69e2e;
}

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

.resultado-calculadora .error {
    color: #e53e3e;
}

/* Soporte experto */
.soporte-experto {
    background: linear-gradient(135deg, #f7fafc, #edf2f7);
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
    border-left: 5px solid #805ad5;
}

.soporte-experto h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.soporte-content p {
    color: #4a5568;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.soporte-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1.5rem 0;
}

.soporte-content li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-left: 1.5rem;
    color: #4a5568;
    line-height: 1.6;
}

.soporte-content li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #38a169;
    font-weight: bold;
}

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

.soporte-content strong {
    color: #2d3748;
}

.soporte-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-soporte {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-soporte.buscar {
    background: #805ad5;
    color: white;
}

.btn-soporte.buscar:hover {
    background: #6b46c1;
    transform: translateY(-3px);
}

.btn-soporte.contacto {
    background: #3182ce;
    color: white;
}

.btn-soporte.contacto:hover {
    background: #2c5282;
    transform: translateY(-3px);
}

/* Estilos generales del artículo */
.articulo-consejo {
    background: #e6fffa;
    border-left: 4px solid #38a169;
    padding: 1rem;
    margin: 1.5rem 0;
    border-radius: 0 5px 5px 0;
}

.articulo-advertencia {
    background: #fff5f5;
    border-left: 4px solid #e53e3e;
    border-radius: 0 10px 10px 0;
    padding: 1.5rem;
    margin: 2rem 0;
}

.articulo-advertencia h3 {
    color: #c53030;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.articulo-advertencia p, .articulo-advertencia ul {
    color: #742a2a;
}

.articulo-advertencia ul {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

.articulo-advertencia li {
    margin-bottom: 0.5rem;
}
/* =============================================
   ESTILOS ESPECÍFICOS PARA MANTENIMIENTO HÉLICES
   ============================================= */

/* Tipos de hélices */
.tipos-helices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tipo-helice {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tipo-helice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #4299e1, #2b6cb0);
}

.tipo-helice h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.tipo-helice ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.tipo-helice li {
    padding: 0.25rem 0;
    color: #4a5568;
}

.tipo-helice li strong {
    color: #2d3748;
}

/* Señales de problemas */
.señales-helice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.señal-helice {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.señal-helice i {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.señal-helice h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.señal-helice p {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.señal-gravedad {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
}

.señal-gravedad[data-gravedad="alta"] {
    background: #fed7d7;
    color: #c53030;
}

.señal-gravedad[data-gravedad="media"] {
    background: #feebc8;
    color: #d69e2e;
}

.señal-gravedad[data-gravedad="baja"] {
    background: #c6f6d5;
    color: #38a169;
}

/* Checklist de inspección */
.checklist-inspeccion {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.item-inspeccion {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.item-inspeccion:hover {
    background: #edf2f7;
}

.item-inspeccion input[type="checkbox"] {
    margin-right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.item-inspeccion label {
    flex: 1;
    cursor: pointer;
    color: #2d3748;
    transition: all 0.3s ease;
}

.btn-checklist-reset {
    background: #4a5568;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s ease;
    margin-top: 1rem;
}

.btn-checklist-reset:hover {
    background: #2d3748;
}

/* Elección de hélice */
.eleccion-helice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.concepto-helice {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
}

.concepto-helice h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.concepto-helice p {
    color: #4a5568;
    margin-bottom: 1rem;
}

.concepto-detalle {
    background: #f7fafc;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.concepto-detalle h4 {
    color: #2d3748;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.concepto-detalle ul {
    list-style: none;
    padding: 0;
}

.concepto-detalle li {
    padding: 0.25rem 0;
    color: #718096;
    font-size: 0.9rem;
}

/* Regla de selección */
.regla-seleccion {
    background: #ebf8ff;
    border: 2px solid #4299e1;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
}

.regla-principal {
    text-align: center;
    margin-bottom: 2rem;
}

.regla-principal h3 {
    color: #2c5282;
    font-style: italic;
    margin-bottom: 1rem;
}

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

.escenario-rpm {
    background: #fff;
    border-radius: 8px;
    padding: 1.5rem;
    border-top: 4px solid #4299e1;
}

.escenario-rpm h4 {
    color: #2d3748;
    margin-bottom: 1rem;
}

.escenario-rpm p {
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.consejo-rpm {
    background: #c6f6d5;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center;
}

.consejo-rpm p {
    color: #22543d;
    margin: 0;
}

.btn-solucion-pequeno {
    display: inline-block;
    background: #4299e1;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    margin-top: 0.5rem;
    transition: background 0.3s ease;
}

.btn-solucion-pequeno:hover {
    background: #3182ce;
}

/* Tabla de decisión */
.tabla-decision {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tabla-decision th {
    background: #2c5282;
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.tabla-decision td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
}

.tabla-decision tbody tr:hover {
    background: #f7fafc;
}

.tabla-decision td:first-child {
    font-weight: 600;
    color: #2d3748;
}

/* Accesorios */
.accesorios-helices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.accesorio {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.accesorio i {
    font-size: 2rem;
    color: #4299e1;
    margin-bottom: 1rem;
}

.accesorio h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.accesorio p {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.btn-repuesto {
    display: inline-block;
    background: #48bb78;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 1rem;
    transition: background 0.3s ease;
}

.btn-repuesto:hover {
    background: #38a169;
}

/* CTA hélices */
.cta-helices {
    background: linear-gradient(135deg, #2c5282, #4299e1);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin: 2rem 0;
}

.cta-helices h3 {
    color: white;
    margin-bottom: 0.5rem;
}

.cta-helices p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

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

.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-cta.aluminio {
    background: #e53e3e;
    color: white;
}

.btn-cta.aluminio:hover {
    background: #c53030;
    transform: translateY(-2px);
}

.btn-cta.inox {
    background: #718096;
    color: white;
}

.btn-cta.inox:hover {
    background: #4a5568;
    transform: translateY(-2px);
}

.btn-cta.kit {
    background: #d69e2e;
    color: white;
}

.btn-cta.kit:hover {
    background: #b7791f;
    transform: translateY(-2px);
}

/* Comparación palas */
.comparacion-palas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.comparacion-palas > div {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.5rem;
}

.comparacion-palas h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .tipos-helices,
    .señales-helice,
    .accesorios-helices {
        grid-template-columns: 1fr;
    }
    
    .eleccion-helice,
    .escenarios-rpm {
        grid-template-columns: 1fr;
    }
    
    .cta-opciones {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-cta {
        width: 100%;
        justify-content: center;
    }
}
/* =============================================
   ESTILOS ESPECÍFICOS PARA SISTEMA COMBUSTIBLE MARINO
   ============================================= */

/* Componentes del sistema */
.componentes-sistema {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.componente {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.componente::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #e53e3e, #c53030);
}

.componente:nth-child(2)::before {
    background: linear-gradient(to bottom, #38a169, #2f855a);
}

.componente:nth-child(3)::before {
    background: linear-gradient(to bottom, #4299e1, #3182ce);
}

.componente:nth-child(4)::before {
    background: linear-gradient(to bottom, #d69e2e, #b7791f);
}

.componente h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.componente ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.componente li {
    padding: 0.25rem 0;
    color: #4a5568;
    font-size: 0.95rem;
    position: relative;
    padding-left: 1.5rem;
}

.componente li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #38a169;
    font-weight: bold;
}

.componente p {
    color: #718096;
    font-size: 0.9rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Problemas comunes */
.problemas-combustible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.problema-comb {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.problema-comb h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.problema-comb p {
    color: #4a5568;
    margin-bottom: 1rem;
    font-weight: 600;
}

.problema-comb ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.problema-comb li {
    padding: 0.25rem 0;
    color: #4a5568;
}

.repuestos-solucion {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.btn-repuesto-peq {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #4299e1;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.3s ease;
}

.btn-repuesto-peq:hover {
    background: #3182ce;
}

/* Mantenimiento preventivo */
.mantenimiento-combustible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tarea-comb {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.tarea-comb h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tarea-comb ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.tarea-comb li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
}

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

.tiempo-estimado {
    background: #ebf8ff;
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c5282;
    font-size: 0.9rem;
}

/* Checklist de mantenimiento */
.checklist-mantenimiento {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.checklist-mantenimiento h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-checklist {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.item-checklist:hover {
    background: #edf2f7;
}

.item-checklist input[type="checkbox"] {
    margin-right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.item-checklist label {
    flex: 1;
    cursor: pointer;
    color: #2d3748;
    transition: all 0.3s ease;
}

/* Comparativa combustible */
.comparativa-combustible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.diferencia {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.diferencia h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.diferencia ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
}

.diferencia li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
}

.diferencia li strong {
    color: #2d3748;
}

.ventaja, .desventaja {
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ventaja {
    background: #c6f6d5;
    color: #22543d;
}

.desventaja {
    background: #fed7d7;
    color: #742a2a;
}

.consejo-importante {
    background: #fffaf0;
    border: 2px solid #d69e2e;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.consejo-importante i {
    color: #d69e2e;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.consejo-importante strong {
    color: #744210;
}

/* Problemas con etanol */
.problema-ethanol {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 2rem;
    margin: 2rem 0;
}

.riesgos-ethanol h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.riesgos-ethanol ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.riesgos-ethanol li {
    padding: 0.75rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
}

.riesgos-ethanol li strong {
    color: #2d3748;
}

.soluciones-ethanol h4 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.estrategia {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.estrategia h5 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.estrategia p {
    color: #718096;
    font-size: 0.9rem;
    line-height: 1.5;
}

.recomendacion-final {
    background: #ebf8ff;
    border-radius: 6px;
    padding: 1rem;
    color: #2c5282;
}

/* Repuestos esenciales */
.repuestos-combustible {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.repuesto-comb {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.repuesto-comb i {
    font-size: 2rem;
    color: #e53e3e;
    margin-bottom: 1rem;
    display: block;
}

.repuesto-comb h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.repuesto-comb p {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.btn-repuesto {
    display: inline-block;
    background: #e53e3e;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 1rem;
    transition: background 0.3s ease;
}

.btn-repuesto:hover {
    background: #c53030;
}

/* Guía de diagnóstico */
.guia-diagnostico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.paso-diagnostico {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.paso-diagnostico::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #4299e1, #38a169);
}

.paso-diagnostico:nth-child(2)::before {
    background: linear-gradient(to right, #38a169, #d69e2e);
}

.paso-diagnostico:nth-child(3)::before {
    background: linear-gradient(to right, #d69e2e, #e53e3e);
}

.paso-diagnostico h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.paso-diagnostico ul {
    list-style: none;
    padding: 0;
}

.paso-diagnostico li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
}

.herramientas-recomendadas {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.herramientas-recomendadas h4 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.herramienta {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.herramienta h5 {
    color: #2d3748;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.herramienta p {
    color: #718096;
    font-size: 0.85rem;
}

/* Razones limpieza inyectores */
.razones-limpieza {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 1rem 0;
}

.razones-limpieza > div h5 {
    color: #2d3748;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.razones-limpieza ul {
    list-style: none;
    padding: 0;
}

.razones-limpieza li {
    padding: 0.25rem 0;
    color: #4a5568;
    font-size: 0.9rem;
}

.razones-limpieza li strong {
    color: #2d3748;
}

/* Especialidades */
.especialidades {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.especialidad {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s ease;
}

.especialidad i {
    font-size: 1.5rem;
    color: #4299e1;
    margin-bottom: 0.75rem;
    display: block;
}

.especialidad p {
    color: #4a5568;
    font-size: 0.9rem;
}

/* Tabla intervalos */
.tabla-intervalos {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tabla-intervalos th {
    background: #2c5282;
    color: white;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.tabla-intervalos td {
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 0.9rem;
}

.tabla-intervalos tbody tr:hover {
    background: #f7fafc;
}

/* CTA grande */
.btn-cta-grande {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: linear-gradient(135deg, #e53e3e, #c53030);
    color: white;
    padding: 1.25rem 2.5rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 2rem auto;
    width: 100%;
    max-width: 500px;
}

.btn-cta-grande:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(229, 62, 62, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
    .componentes-sistema,
    .problemas-combustible,
    .mantenimiento-combustible,
    .comparativa-combustible,
    .repuestos-combustible,
    .guia-diagnostico {
        grid-template-columns: 1fr;
    }
    
    .estrategias-grid,
    .herramientas-grid,
    .especialidades {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
    
    .consejo-importante {
        flex-direction: column;
        text-align: center;
    }
    
    .btn-cta-grande {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
}
/* =============================================
   ESTILOS ESPECÍFICOS PARA ELECTRÓNICA BÁSICA MOTORES
   ============================================= */

/* Componentes electrónicos */
.componentes-electronicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.componente-electronico {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.componente-electronico::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #805ad5, #6b46c1);
}

.componente-electronico:nth-child(2)::before {
    background: linear-gradient(to bottom, #4299e1, #3182ce);
}

.componente-electronico:nth-child(3)::before {
    background: linear-gradient(to bottom, #38a169, #2f855a);
}

.componente-electronico h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.componente-electronico p {
    color: #4a5568;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.componente-electronico ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.componente-electronico li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
    position: relative;
    padding-left: 1.5rem;
}

.componente-electronico li:before {
    content: '⚡';
    position: absolute;
    left: 0;
    color: #805ad5;
}

.componente-electronico li strong {
    color: #2d3748;
}

.especificaciones {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.especificacion {
    background: #f7fafc;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Tabla de sensores */
.tabla-sensores {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.tabla-sensores th {
    background: linear-gradient(135deg, #805ad5, #6b46c1);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
}

.tabla-sensores td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 0.9rem;
}

.tabla-sensores tbody tr:hover {
    background: #faf5ff;
}

.tabla-sensores td:first-child {
    font-weight: 600;
    color: #2d3748;
}

.consejo-sensores {
    background: #f0fff4;
    border: 2px solid #38a169;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.consejo-sensores h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.consejo-sensores ol {
    padding-left: 1.5rem;
    margin: 0;
}

.consejo-sensores li {
    padding: 0.5rem 0;
    color: #4a5568;
}

/* Diagnóstico electrónico */
.diagnostico-electronico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.problema-electronico {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.problema-electronico h3 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pasos-diagnostico {
    margin-bottom: 1.5rem;
}

.paso-diagnostico {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f7fafc;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.paso-diagnostico:hover {
    background: #edf2f7;
}

.numero-paso {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #805ad5;
    color: white;
    border-radius: 50%;
    font-weight: bold;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.contenido-paso {
    flex: 1;
}

.texto-paso {
    display: block;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.detalle-paso {
    display: block;
    color: #718096;
    font-size: 0.85rem;
    line-height: 1.5;
}

.repuestos-recomendados {
    background: #f0fff4;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.repuestos-recomendados h5 {
    color: #2d3748;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.repuestos-lista {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-repuesto-peq {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #805ad5;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.btn-repuesto-peq:hover {
    background: #6b46c1;
    transform: translateY(-2px);
}

.consejo-diagnostico {
    background: #fffaf0;
    border: 1px solid #d69e2e;
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.consejo-diagnostico p {
    color: #744210;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Herramientas electrónicas */
.herramientas-electronicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.herramienta {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.herramienta i {
    font-size: 2.5rem;
    color: #805ad5;
    margin-bottom: 1rem;
    display: block;
    transition: all 0.3s ease;
}

.herramienta h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.herramienta p {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.especificaciones-herramienta {
    background: #f7fafc;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.especificaciones-herramienta span {
    display: block;
    font-size: 0.85rem;
    color: #4a5568;
    margin-bottom: 0.25rem;
    text-align: left;
}

.uso-tipico {
    background: #f0fff4;
    border-radius: 6px;
    padding: 0.75rem;
    color: #22543d;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kit-herramientas {
    background: #f7fafc;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.kit-herramientas h4 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kit-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.item-kit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.item-kit i {
    color: #38a169;
    flex-shrink: 0;
}

.item-kit span {
    color: #4a5568;
    font-size: 0.9rem;
}

.kit-precio {
    text-align: center;
    color: #2d3748;
    font-weight: 600;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Protección contra corrosión */
.proteccion-corrosion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.medida-proteccion {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.medida-proteccion h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.medida-proteccion ul, .medida-proteccion ol {
    padding-left: 1.5rem;
}

.medida-proteccion li {
    padding: 0.5rem 0;
    color: #4a5568;
    font-size: 0.9rem;
}

.checklist-proteccion {
    background: #f7fafc;
    border-radius: 10px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.checklist-proteccion h4 {
    color: #2d3748;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.item-checklist-pro {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: #fff;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.item-checklist-pro:hover {
    background: #edf2f7;
}

.item-checklist-pro input[type="checkbox"] {
    margin-right: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.item-checklist-pro label {
    flex: 1;
    cursor: pointer;
    color: #2d3748;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

/* Mantenimiento electrónico */
.mantenimiento-electronico {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.frecuencia-mantenimiento {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
}

.frecuencia-mantenimiento h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.frecuencia-mantenimiento ul {
    list-style: none;
    padding: 0;
}

.frecuencia-mantenimiento li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
    position: relative;
    padding-left: 1.5rem;
}

.frecuencia-mantenimiento li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #38a169;
    font-weight: bold;
}

/* Repuestos electrónicos */
.repuestos-electronicos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.repuesto-electronico {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
}

.repuesto-electronico i {
    font-size: 2.5rem;
    color: #805ad5;
    margin-bottom: 1rem;
    display: block;
    transition: all 0.3s ease;
}

.repuesto-electronico h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
}

.repuesto-electronico p {
    color: #718096;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.detalles-repuesto {
    background: #f7fafc;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.detalles-repuesto span {
    display: block;
    font-size: 0.85rem;
    color: #4a5568;
    margin-bottom: 0.5rem;
    text-align: left;
}

.btn-repuesto {
    display: inline-block;
    background: #805ad5;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-repuesto:hover {
    background: #6b46c1;
    transform: translateY(-2px);
}

.consejo-profesional {
    background: linear-gradient(135deg, #faf5ff, #e9d8fd);
    border: 2px solid #805ad5;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
}

.consejo-profesional h3 {
    color: #2d3748;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.consejo-profesional ol {
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.consejo-profesional li {
    padding: 0.5rem 0;
    color: #4a5568;
}

.consejo-profesional li strong {
    color: #2d3748;
}

.consejo-profesional p {
    color: #4a5568;
    line-height: 1.6;
}

/* Protección por capas */
.proteccion-capas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

.capa {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.capa h5 {
    color: #2d3748;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.capa ul {
    list-style: none;
    padding: 0;
}

.capa li {
    padding: 0.25rem 0;
    color: #4a5568;
    font-size: 0.9rem;
}

/* Tabla multímetro */
.tabla-multimetro {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tabla-multimetro th {
    background: #805ad5;
    color: white;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
}

.tabla-multimetro td {
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    color: #4a5568;
    font-size: 0.9rem;
}

.tabla-multimetro tbody tr:hover {
    background: #faf5ff;
}

/* Comparación piezas */
.comparacion-piezas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 1rem 0;
}

.comparacion-piezas > div {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.5rem;
}

.comparacion-piezas h5 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comparacion-piezas ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.comparacion-piezas li {
    padding: 0.5rem 0;
    color: #4a5568;
    border-bottom: 1px solid #f7fafc;
}

.comparacion-piezas li strong {
    color: #2d3748;
}

.ventaja, .desventaja {
    padding: 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ventaja {
    background: #c6f6d5;
    color: #22543d;
}

.desventaja {
    background: #fed7d7;
    color: #742a2a;
}

/* Intervalos mantenimiento */
.intervalos-mantenimiento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1rem 0;
}

.intervalo {
    background: #f7fafc;
    border-radius: 8px;
    padding: 1.25rem;
}

.intervalo h5 {
    color: #2d3748;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.intervalo ul {
    list-style: none;
    padding: 0;
}

.intervalo li {
    padding: 0.25rem 0;
    color: #4a5568;
    font-size: 0.9rem;
}

.intervalo li strong {
    color: #2d3748;
}

/* Especialidades electrónica */
.especialidades-electronica {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 1.5rem 0;
}

.especialidad-electronica {
    background: #faf5ff;
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    transition: all 0.3s ease;
}

.especialidad-electronica i {
    font-size: 1.5rem;
    color: #805ad5;
    margin-bottom: 0.75rem;
    display: block;
}

.especialidad-electronica p {
    color: #4a5568;
    font-size: 0.9rem;
}

/* CTA electrónica */
.cta-electronica {
    background: linear-gradient(135deg, #805ad5, #6b46c1);
    color: white;
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.cta-electronica h4 {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.cta-electronica p {
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

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

.btn-buscar, .btn-contacto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    min-width: 200px;
}

.btn-buscar {
    background: white;
    color: #805ad5;
}

.btn-buscar:hover {
    background: #f7fafc;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

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

.btn-contacto:hover {
    background: white;
    color: #805ad5;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
    .componentes-electronicos,
    .diagnostico-electronico,
    .herramientas-electronicas,
    .proteccion-corrosion,
    .mantenimiento-electronico,
    .repuestos-electronicos {
        grid-template-columns: 1fr;
    }
    
    .proteccion-capas,
    .comparacion-piezas,
    .intervalos-mantenimiento,
    .especialidades-electronica {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .cta-botones {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-buscar, .btn-contacto {
        width: 100%;
        max-width: 300px;
    }
    
    .tabla-sensores,
    .tabla-multimetro {
        display: block;
        overflow-x: auto;
    }
}
/* ============================================
   ESTILOS ESPECÍFICOS PARA PREPARACIÓN TEMPORADA
   ============================================ */

/* Banner importante */
.advertencia-importante {
    background: linear-gradient(135deg, #2b6cb0 0%, #3182ce 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(43, 108, 176, 0.2);
    border-left: 5px solid #63b3ed;
}

.icono-advertencia {
    font-size: 2.5rem;
    margin-right: 1.5rem;
    color: #90cdf4;
}

.texto-advertencia h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.4rem;
    color: white;
}

.texto-advertencia p {
    margin: 0;
    opacity: 0.9;
    font-size: 1rem;
}

/* Timeline de preparación */
.timeline-preparacion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.semana-preparacion {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.semana-preparacion:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.12);
}

.semana-header {
    background: #2c5282;
    color: white;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.numero-semana {
    font-size: 2rem;
    font-weight: bold;
    background: white;
    color: #2c5282;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.semana-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.tareas-semana {
    padding: 1.5rem;
}

.tareas-semana h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tareas-semana ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tareas-semana li {
    padding: 0.6rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-bottom: 1px solid #f7fafc;
}

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

.tareas-semana input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.tareas-semana label {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

/* Verificación de refrigeración */
.verificacion-refrigeracion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.paso-verificacion {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.paso-verificacion h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.paso-verificacion ul {
    margin: 1rem 0;
    padding-left: 1.2rem;
    color: #4a5568;
}

.paso-verificacion li {
    margin-bottom: 0.5rem;
}

.btn-verificacion {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #4299e1;
    color: white;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    margin-top: 1rem;
    transition: background 0.3s ease;
}

.btn-verificacion:hover {
    background: #3182ce;
}

/* Checklist de seguridad */
.checklist-seguridad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.categoria-seguridad {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.categoria-seguridad h4 {
    color: #2d3748;
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.categoria-seguridad ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categoria-seguridad li {
    padding: 0.6rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-bottom: 1px solid #f7fafc;
}

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

.categoria-seguridad input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.categoria-seguridad label {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

/* Repuestos para temporada */
.repuestos-temporada {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.repuesto-temp {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.repuesto-temp i {
    font-size: 2.5rem;
    color: #4299e1;
    margin-bottom: 1rem;
}

.repuesto-temp h4 {
    color: #2d3748;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.repuesto-temp p {
    color: #718096;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.btn-repuesto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #38a169;
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.btn-repuesto:hover {
    background: #2f855a;
}

/* Protocolo de arranque */
.protocolo-arranque {
    margin: 2rem 0;
}

.paso-arranque {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.numero-paso {
    background: #2c5282;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    flex-shrink: 0;
}

.contenido-paso {
    flex: 1;
}

.contenido-paso h4 {
    color: #2d3748;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}

.contenido-paso p {
    color: #4a5568;
    margin-bottom: 1rem;
}

.contenido-paso ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #4a5568;
}

.contenido-paso li {
    margin-bottom: 0.5rem;
}

/* Descargable útil */
.descargable-util {
    background: linear-gradient(135deg, #f0fff4 0%, #e6fffa 100%);
    border: 1px solid #c6f6d5;
    border-radius: 12px;
    padding: 2rem;
    margin: 2.5rem 0;
    text-align: center;
}

.descargable-util h3 {
    color: #2f855a;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.descargable-util p {
    color: #4a5568;
    margin-bottom: 1.5rem;
}

.btn-descargar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #38a169;
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(56, 161, 105, 0.2);
}

.btn-descargar:hover {
    background: #2f855a;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(56, 161, 105, 0.3);
}

.descargable-info {
    margin-top: 1rem;
    color: #718096 !important;
    font-style: italic;
}

/* CTA temporada */
.cta-temporada {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%);
    color: white;
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    margin: 3rem 0;
    box-shadow: 0 10px 25px rgba(43, 108, 176, 0.2);
}

.cta-temporada h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.cta-temporada p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.btn-cta-kit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: white;
    color: #2b6cb0;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-cta-asesor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: #38a169;
    color: white;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-cta-kit:hover {
    background: #f7fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.btn-cta-asesor:hover {
    background: #2f855a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Botones de reset */
.btn-checklist-reset {
    background: #4a5568;
    color: white;
    border: none;
    padding: 0.8rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.3s ease;
}

.btn-checklist-reset:hover {
    background: #2d3748;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline-preparacion {
        grid-template-columns: 1fr;
    }
    
    .verificacion-refrigeracion,
    .checklist-seguridad,
    .repuestos-temporada {
        grid-template-columns: 1fr;
    }
    
    .paso-arranque {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .numero-paso {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .cta-botones-grandes {
        flex-direction: column;
    }
    
    .cta-temporada {
        padding: 1.5rem;
    }
    
    .advertencia-importante {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .icono-advertencia {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .semana-header {
        flex-direction: column;
        gap: 0.8rem;
        text-align: center;
    }
    
    .tareas-semana,
    .categoria-seguridad,
    .paso-verificacion {
        padding: 1rem;
    }
    
    .btn-cta-kit,
    .btn-cta-asesor {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }
}
/* Estilos específicos para el artículo de cambio de aceite */

/* Contenedores específicos */
.tipos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tipo-card {
    background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.tipo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    border-color: #4299e1;
}

.tipo-header {
    background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
    color: white;
    padding: 1.2rem 1.5rem;
    border-bottom: 3px solid #2b6cb0;
}

.tipo-header h4 {
    margin: 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tipo-body {
    padding: 1.5rem;
}

.tipo-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tipo-body li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
    padding-left: 1.5rem;
}

.tipo-body li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #48bb78;
    font-weight: bold;
}

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

/* Calculadora de aceite */
.calculadora-aceite {
    background: linear-gradient(135deg, #f7fafc 0%, #ebf8ff 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 2px solid #bee3f8;
}

.calculadora-aceite h4 {
    color: #2d3748;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
}

.calculadora-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calculadora-form label {
    font-weight: 600;
    color: #4a5568;
    font-size: 0.95rem;
}

.calculadora-form input,
.calculadora-form select {
    padding: 0.75rem 1rem;
    border: 2px solid #cbd5e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
}

.calculadora-form input:focus,
.calculadora-form select:focus {
    outline: none;
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
}

.btn-calcular {
    background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
    color: white;
    border: none;
    padding: 0.9rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.btn-calcular:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(56, 161, 105, 0.3);
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
}

.btn-calcular:active {
    transform: translateY(0);
}

.resultado-calculadora {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: 8px;
    border: 2px solid #c6f6d5;
    animation: fadeIn 0.5s ease;
}

.resultado-detalle {
    text-align: center;
}

.cantidad-destacada {
    font-size: 2.5rem;
    font-weight: bold;
    color: #2f855a;
    margin: 0.5rem 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.nota-calculadora {
    font-size: 0.9rem;
    color: #718096;
    margin-top: 1rem;
    padding: 0.75rem;
    background: #f0fff4;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error {
    color: #e53e3e;
    padding: 0.75rem;
    background: #fed7d7;
    border-radius: 6px;
    border: 1px solid #fc8181;
    font-weight: 500;
}

/* Indicadores para niveles de aceite */
.nivel-indicador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    padding: 1rem;
    background: #f7fafc;
    border-radius: 8px;
    border-left: 4px solid #4299e1;
}

.nivel-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nivel-titulo {
    font-weight: 600;
    color: #2d3748;
}

.nivel-descripcion {
    font-size: 0.9rem;
    color: #718096;
}

.nivel-icono {
    font-size: 1.5rem;
    color: #4299e1;
}

/* Timeline para proceso de drenaje */
.timeline-drenaje {
    position: relative;
    padding: 2rem 0;
    margin: 2rem 0;
}

.timeline-drenaje:before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #4299e1, #9f7aea);
}

.timeline-paso {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    position: relative;
}

.timeline-paso:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-contenido {
    width: 45%;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.timeline-punto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    background: #4299e1;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 0 3px #4299e1;
    z-index: 1;
}

/* Tabla comparativa de aceites */
.tabla-comparativa {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.tabla-comparativa th {
    background: linear-gradient(135deg, #4c51bf 0%, #667eea 100%);
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
}

.tabla-comparativa td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background: white;
}

.tabla-comparativa tr:nth-child(even) td {
    background: #f7fafc;
}

.tabla-comparativa tr:hover td {
    background: #ebf8ff;
}

.tabla-check {
    color: #48bb78;
    font-weight: bold;
}

.tabla-cross {
    color: #e53e3e;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .tipos-container {
        grid-template-columns: 1fr;
    }
    
    .timeline-drenaje:before {
        left: 30px;
    }
    
    .timeline-paso,
    .timeline-paso:nth-child(odd) {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 60px;
    }
    
    .timeline-contenido {
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .timeline-punto {
        left: 30px;
        transform: translateX(-50%);
    }
    
    .tabla-comparativa {
        display: block;
        overflow-x: auto;
    }
    
    .calculadora-aceite h4 {
        font-size: 1.1rem;
    }
    
    .cantidad-destacada {
        font-size: 2rem;
    }
}

/* Animaciones */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Estilos para consejos específicos de aceite */
.consejo-aceite {
    background: linear-gradient(135deg, #fffaf0 0%, #feebc8 100%);
    border-left: 4px solid #dd6b20;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
}

.consejo-aceite h4 {
    color: #dd6b20;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Indicador de peligro para aceite usado */
.peligro-aceite {
    background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
    border: 2px solid #fc8181;
    padding: 1.5rem;
    margin: 1.5rem 0;
    border-radius: 8px;
    animation: pulse 2s infinite;
}

.peligro-aceite h4 {
    color: #c53030;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Estilos para checklist interactivo */
.checklist-herramientas {
    background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 2px solid #9ae6b4;
}

.checklist-items {
    margin: 1rem 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.checklist-item:hover {
    border-color: #48bb78;
    background: #f0fff4;
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #48bb78;
}

.checklist-item label {
    flex: 1;
    cursor: pointer;
    font-weight: 500;
    color: #2d3748;
    transition: all 0.3s ease;
}

.btn-checklist-reset {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.btn-checklist-reset:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(45, 55, 72, 0.3);
}

/* Estilos para herramienta de cálculo de intervalos */
.calculadora-intervalos {
    background: linear-gradient(135deg, #e6fffa 0%, #b2f5ea 100%);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    border: 2px solid #81e6d9;
}

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

.intervalo-card {
    background: white;
    padding: 1rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.intervalo-titulo {
    font-size: 0.9rem;
    color: #718096;
    margin-bottom: 0.5rem;
}

.intervalo-valor {
    font-size: 1.5rem;
    font-weight: bold;
    color: #319795;
}

.intervalo-unidad {
    font-size: 0.8rem;
    color: #a0aec0;
    margin-left: 0.25rem;
}
/* ============================================
   ESTILOS ESPECÍFICOS PARA CAMBIO DE ACEITE DE COLA
   ============================================ */

/* Diferencia clave */
.diferencia-clave {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin: 2rem 0;
    display: flex;
    align-items: center;
    box-shadow: 0 4px 15px rgba(128, 90, 213, 0.2);
    border-left: 5px solid #9f7aea;
}

.icono-diferencia {
    font-size: 2.5rem;
    margin-right: 1.5rem;
    color: #d6bcfa;
}

.texto-diferencia h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.4rem;
    color: white;
}

.texto-diferencia p {
    margin: 0.3rem 0;
    opacity: 0.9;
}

.texto-diferencia p strong {
    color: #e9d8fd;
}

/* Comparativa aceites transmisión vs motor */
.comparativa-aceites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tipo-aceite-transmision, .tipo-aceite-motor {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.tipo-aceite-transmision {
    border-top: 4px solid #805ad5;
}

.tipo-aceite-motor {
    border-top: 4px solid #38a169;
}

.tipo-aceite-transmision h4, .tipo-aceite-motor h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tipo-aceite-transmision ul, .tipo-aceite-motor ul {
    margin: 1rem 0;
    padding-left: 1.2rem;
    color: #4a5568;
}

.tipo-aceite-transmision li, .tipo-aceite-motor li {
    margin-bottom: 0.5rem;
}

.tipo-aceite-transmision li strong, .tipo-aceite-motor li strong {
    color: #2d3748;
}

.marcas-recomendadas {
    margin-top: 1rem;
    padding: 0.8rem;
    background: #faf5ff;
    border-radius: 6px;
    border-left: 3px solid #805ad5;
}

.marcas-recomendadas p {
    margin: 0;
    font-size: 0.9rem;
    color: #553c9a;
}

/* Lista de trucos */
.trucos-lista {
    margin: 2rem 0;
}

.truco-item {
    background: #faf5ff;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1rem;
    border-left: 4px solid #805ad5;
    transition: transform 0.3s ease;
}

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

.truco-item h4 {
    color: #2d3748;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.numero-truco {
    background: #805ad5;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    margin-right: 0.5rem;
}

.truco-item p {
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.truco-item p strong {
    color: #553c9a;
}

/* Proceso cola */
.proceso-cola {
    margin: 2rem 0;
}

.paso-cola {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.paso-cola:hover {
    transform: translateX(5px);
    border-left: 4px solid #805ad5;
}

.numero-paso-cola {
    background: #805ad5;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    flex-shrink: 0;
}

.contenido-paso-cola {
    flex: 1;
}

.contenido-paso-cola h4 {
    color: #2d3748;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.contenido-paso-cola ul {
    margin: 0;
    padding-left: 1.2rem;
    color: #4a5568;
}

.contenido-paso-cola li {
    margin-bottom: 0.5rem;
}

.contenido-paso-cola li strong {
    color: #2d3748;
}

.truco-destacado {
    margin-top: 1rem;
    padding: 0.8rem;
    background: #faf5ff;
    border-radius: 6px;
    border-left: 3px solid #805ad5;
    color: #553c9a;
}

.truco-destacado i {
    color: #805ad5;
    margin-right: 0.5rem;
}

/* Tabla SAE */
.tabla-sae {
    margin: 2rem 0;
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.tabla-sae table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.tabla-sae th {
    background: #805ad5;
    color: white;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border-right: 1px solid #6b46c1;
}

.tabla-sae th:last-child {
    border-right: none;
}

.tabla-sae td {
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    border-right: 1px solid #f7fafc;
}

.tabla-sae tr:nth-child(even) {
    background: #f7fafc;
}

.tabla-sae tr:hover {
    background: #faf5ff;
}

.tabla-sae tr:last-child td {
    border-bottom: none;
}

/* Problemas y soluciones */
.problemas-soluciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.problema-item {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.problema-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.problema-item h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.problema-item h4 i {
    color: #805ad5;
}

.problema-item p {
    color: #4a5568;
    margin-bottom: 0.8rem;
}

.problema-item p strong {
    color: #2d3748;
}

/* Kit especializado */
.kit-cola-especial {
    background: linear-gradient(135deg, #faf5ff 0%, #e9d8fd 100%);
    border: 2px solid #805ad5;
    border-radius: 15px;
    padding: 2rem;
    margin: 2.5rem 0;
}

.contenido-kit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.lista-kit h4, .beneficios-kit h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lista-kit ul, .beneficios-kit ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    color: #4a5568;
}

.lista-kit li, .beneficios-kit li {
    padding: 0.5rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.lista-kit li:before, .beneficios-kit li:before {
    content: "✓";
    color: #38a169;
    font-weight: bold;
    flex-shrink: 0;
}

.lista-kit li strong, .beneficios-kit li strong {
    color: #2d3748;
}

.btn-kit-completo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #805ad5;
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    margin-top: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(128, 90, 213, 0.2);
}

.btn-kit-completo:hover {
    background: #6b46c1;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(128, 90, 213, 0.3);
}

/* CTA especializado */
.cta-especializado {
    background: linear-gradient(135deg, #805ad5 0%, #6b46c1 100%);
    color: white;
    padding: 2.5rem;
    border-radius: 15px;
    text-align: center;
    margin: 3rem 0;
    box-shadow: 0 10px 25px rgba(128, 90, 213, 0.2);
}

.cta-especializado h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.cta-especializado p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

.btn-cta-kit-cola {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: white;
    color: #805ad5;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-cta-tecnico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    background: #38a169;
    color: white;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.btn-cta-kit-cola:hover {
    background: #f7fafc;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.btn-cta-tecnico:hover {
    background: #2f855a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Checklist herramientas */
.checklist-herramientas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.categoria-herramienta {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.categoria-herramienta h4 {
    color: #2d3748;
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid #805ad5;
    padding-bottom: 0.5rem;
}

.categoria-herramienta ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categoria-herramienta li {
    padding: 0.6rem 0;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border-bottom: 1px solid #f7fafc;
}

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

.categoria-herramienta input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.categoria-herramienta label {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .comparativa-aceites,
    .contenido-kit,
    .problemas-soluciones,
    .checklist-herramientas {
        grid-template-columns: 1fr;
    }
    
    .paso-cola {
        flex-direction: column;
        gap: 1rem;
    }
    
    .numero-paso-cola {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .cta-botones-especiales {
        flex-direction: column;
    }
    
    .diferencia-clave {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .icono-diferencia {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .truco-item,
    .problema-item,
    .categoria-herramienta {
        padding: 1rem;
    }
    
    .tabla-sae {
        font-size: 0.9rem;
    }
    
    .kit-cola-especial {
        padding: 1.5rem;
    }
}
/* ============================================
   ESTILOS PARA EXPLICACIÓN DE VISCOSIDAD SAE
   ============================================ */

/* Explicación detallada de viscosidad */
.explicacion-viscosidad-detallada {
    margin: 2rem 0;
}

.definicion-sae, .significado-numeros, .comparativa-sae, .caracteristicas-80w90 {
    background: white;
    padding: 1.5rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.definicion-sae h4, .significado-numeros h4, .comparativa-sae h4, .caracteristicas-80w90 h4 {
    color: #2d3748;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 2px solid #805ad5;
    padding-bottom: 0.5rem;
}

.definicion-sae p {
    color: #4a5568;
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.definicion-sae p strong {
    color: #2d3748;
}

/* Desglose de viscosidad */
.desglose-viscosidad {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin: 1.5rem 0;
}

.numero-viscosidad {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

.numero-grande {
    font-size: 4rem;
    font-weight: bold;
    color: #805ad5;
    display: block;
    line-height: 1;
}

.letra-w {
    font-size: 2rem;
    color: #2d3748;
    font-weight: 600;
    margin-left: 0.5rem;
    vertical-align: super;
}

.explicacion-numero {
    margin-top: 1rem;
    text-align: left;
    padding: 1rem;
    background: #faf5ff;
    border-radius: 8px;
    border-left: 3px solid #805ad5;
}

.explicacion-numero strong {
    color: #2d3748;
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.explicacion-numero p {
    color: #4a5568;
    margin-bottom: 0.8rem;
}

.explicacion-numero ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.explicacion-numero li {
    padding: 0.3rem 0;
    color: #4a5568;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.explicacion-numero li:before {
    content: "•";
    color: #805ad5;
    font-weight: bold;
    flex-shrink: 0;
}

.separador-viscosidad {
    font-size: 2rem;
    color: #a0aec0;
}

/* Escala de viscosidad */
.escala-viscosidad {
    position: relative;
    height: 120px;
    margin: 2rem 0;
    background: linear-gradient(90deg, #e9d8fd 0%, #d6bcfa 50%, #b794f4 100%);
    border-radius: 10px;
    padding: 1rem;
}

.punto-viscosidad {
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    text-align: center;
}

.punto-indicador {
    width: 20px;
    height: 20px;
    background: #805ad5;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
    border: 3px solid white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.punto-indicador.activo {
    background: #fbbf24;
    width: 25px;
    height: 25px;
    border: 3px solid #805ad5;
}

.etiqueta-viscosidad {
    display: block;
    font-weight: bold;
    color: #2d3748;
    margin-bottom: 0.3rem;
    font-size: 1.1rem;
}

.desc-viscosidad {
    display: block;
    font-size: 0.9rem;
    color: #4a5568;
    line-height: 1.3;
}

/* Grid de características */
.grid-caracteristicas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.caracteristica-item {
    text-align: center;
    padding: 1.5rem;
    background: #faf5ff;
    border-radius: 10px;
    border: 1px solid #e9d8fd;
    transition: transform 0.3s ease;
}

.caracteristica-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(128, 90, 213, 0.1);
}

.caracteristica-item i {
    font-size: 2.5rem;
    color: #805ad5;
    margin-bottom: 1rem;
}

.caracteristica-item h5 {
    color: #2d3748;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
}

.caracteristica-item p {
    color: #4a5568;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Responsive para explicación de viscosidad */
@media (max-width: 768px) {
    .desglose-viscosidad {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .separador-viscosidad {
        transform: rotate(90deg);
        font-size: 1.5rem;
    }
    
    .numero-grande {
        font-size: 3rem;
    }
    
    .grid-caracteristicas {
        grid-template-columns: 1fr;
    }
    
    .escala-viscosidad {
        height: 150px;
    }
    
    .punto-viscosidad {
        width: 100px;
    }
    
    .punto-viscosidad:nth-child(1) {
        left: 15% !important;
    }
    
    .punto-viscosidad:nth-child(2) {
        left: 50% !important;
    }
    
    .punto-viscosidad:nth-child(3) {
        left: 85% !important;
    }
}

@media (max-width: 480px) {
    .definicion-sae, .significado-numeros, .comparativa-sae, .caracteristicas-80w90 {
        padding: 1rem;
    }
    
    .explicacion-numero {
        padding: 0.8rem;
    }
    
    .caracteristica-item {
        padding: 1rem;
    }
    
    .etiqueta-viscosidad {
        font-size: 0.9rem;
    }
    
    .desc-viscosidad {
        font-size: 0.8rem;
    }
}