/* Tablets */
@media (max-width: 1024px) {
    :root { --margin-horizontal: 8%; }
    
    .hero-container, .hero-video .hero-container { padding-bottom: 30px; }
    .hero-tagline { font-size: 1.2rem; padding: 8px 20px; }
    .hero, .hero-video { height: 500px; }
    
    .reinforcement-title { font-size: 2.2rem; }
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.6rem; }
    
    .block-container { gap: 40px; }
    .block-image img { width: 90%; }
    
    .contact-wrapper { gap: 40px; }
    .contact-form, .contact-info { padding: 30px; }
    .contact-form h3, .contact-info h3 { font-size: 1.6rem; }
}

/* Móviles */
@media (max-width: 768px) {
    :root { --margin-horizontal: 16px; }
    
    .header { height: 80px; }
    .menu-toggle { display: flex; }
    
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--white);
        transition: 0.3s ease;
        z-index: 999;
    }
    .nav-menu.active { left: 0; }
    .nav-list { flex-direction: column; align-items: center; padding: 40px 0; gap: 30px; }
    
    .hero, .hero-video { height: 450px; margin-top: 80px; }
    .hero-bg, .hero-bg-fallback { background-attachment: scroll; }
    .hero-container, .hero-video .hero-container { padding-bottom: 25px; }
    .hero-tagline { font-size: 1rem; padding: 6px 16px; }
    
    .preloader-logo-img { width: 120px; height: 120px; }
    .logo-beat img { animation: gentleBeat 5s ease-in-out infinite; }
    
    .reinforcement { margin-bottom: 40px; }
    .reinforcement .container { padding: 30px var(--margin-horizontal); }
    .reinforcement-title { font-size: 1.8rem; }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.6rem; }
    h3 { font-size: 1.4rem; }
    
    .section { padding: 50px 0; }
    .block-container { flex-direction: column; gap: 30px; }
    .reverse-order .block-container { flex-direction: column; }
    .block-image { order: 1; }
    .block-text { order: 2; }
    .block-image img { width: 100%; padding: 10px; }
    .block-text p { font-size: 1rem; }
    
    .footer-container { flex-direction: column; align-items: center; text-align: center; }
    .footer-nav-center { width: 100%; }
    .footer-nav { flex-direction: column; gap: 15px; align-items: center; }
    .footer-legal ul { flex-direction: column; gap: 12px; align-items: center; }
    
    .contact-wrapper { flex-direction: column; gap: 30px; }
    .contact-call { padding: 20px 0 0; }
    .call-text p { font-size: 1rem; }
    .contact-section { padding: 40px 0 60px; }
    .contact-form, .contact-info { padding: 25px; }
    .contact-form h3, .contact-info h3 { font-size: 1.4rem; margin-bottom: 20px; }
    .detail-item { padding-left: 15px; }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    :root { --margin-horizontal: 12px; }
    
    .hero, .hero-video { height: 400px; }
    .hero-tagline { font-size: 0.9rem; padding: 5px 12px; }
    
    .preloader-logo-img { width: 100px; height: 100px; }
    
    .reinforcement-title { font-size: 1.5rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
    
    .contact-form, .contact-info { padding: 20px; }
    .contact-form h3, .contact-info h3 { font-size: 1.3rem; }
    .form-group input, .form-group textarea { padding: 10px 14px; }
    .btn-primary { padding: 12px 20px; }
    .detail-item span { font-size: 0.9rem; }
}