/* ========================================================== POWERFIT responsive.css Adaptación para tablets y móviles ========================================================== */ /* ========================================================== 1. TABLETS GRANDES Hasta 1100px ========================================================== */ @media (max-width: 1100px) { /* ------------------------------------------------------ CONTAINER ------------------------------------------------------ */ .container { width: min( calc(100% - 50px), var(--container-width) ); } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ .nav-links { gap: 22px; } .nav-links a { font-size: 11px; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero h1 { max-width: 750px; font-size: clamp( 55px, 8vw, 82px ); } /* ------------------------------------------------------ ABOUT ------------------------------------------------------ */ .about-grid { gap: 50px; } /* ------------------------------------------------------ SERVICES ------------------------------------------------------ */ .services-grid { grid-template-columns: repeat(2, 1fr); } /* ------------------------------------------------------ PLANS ------------------------------------------------------ */ .plans-grid { grid-template-columns: repeat(2, 1fr); } .plan-card { padding: 35px; } /* ------------------------------------------------------ LOCATION ------------------------------------------------------ */ .location-grid { gap: 45px; } /* ------------------------------------------------------ CONTACT ------------------------------------------------------ */ .contact-grid { gap: 50px; } } /* ========================================================== 2. TABLETS Hasta 900px ========================================================== */ @media (max-width: 900px) { /* ------------------------------------------------------ VARIABLES ------------------------------------------------------ */ :root { --section-padding: 85px; } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ #header { height: 72px; } .nav-links { position: fixed; top: 72px; left: 0; width: 100%; height: calc(100vh - 72px); padding: 40px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; background: var(--color-black); border-top: 1px solid var(--color-border); opacity: 0; visibility: hidden; transform: translateX(100%); transition: transform 0.35s ease, opacity 0.35s ease, visibility 0.35s ease; } .nav-links.active { opacity: 1; visibility: visible; transform: translateX(0); } .nav-links li { width: 100%; } .nav-links a { display: block; width: 100%; padding: 18px 0; font-size: 16px; border-bottom: 1px solid var(--color-border); } .nav-links a::after { display: none; } .menu-toggle { display: flex; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero { min-height: 800px; background-attachment: scroll; } .hero-content { padding-top: 70px; } .hero h1 { font-size: clamp( 48px, 9vw, 72px ); letter-spacing: -3px; } .hero-info { margin-top: 50px; } /* ------------------------------------------------------ ABOUT ------------------------------------------------------ */ .about-grid { grid-template-columns: 1fr; gap: 55px; } .about-image { max-width: 700px; } .about-content { max-width: 700px; } /* ------------------------------------------------------ STATS ------------------------------------------------------ */ .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-item:nth-child(2) { border-right: none; } .stat-item:nth-child(-n + 2) { border-bottom: 1px solid var(--color-border); } /* ------------------------------------------------------ FEATURES ------------------------------------------------------ */ .features-grid { grid-template-columns: 1fr; gap: 50px; } .features-highlight { min-height: 350px; } /* ------------------------------------------------------ SCHEDULE ------------------------------------------------------ */ .schedule-wrapper { grid-template-columns: 1fr; } /* ------------------------------------------------------ LOCATION ------------------------------------------------------ */ .location-grid { grid-template-columns: 1fr; gap: 50px; } .location-content { max-width: 700px; } /* ------------------------------------------------------ CONTACT ------------------------------------------------------ */ .contact-grid { grid-template-columns: 1fr; gap: 50px; } .contact-info { max-width: 700px; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .footer-container { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* ========================================================== 3. MÓVILES GRANDES Hasta 700px ========================================================== */ @media (max-width: 700px) { /* ------------------------------------------------------ VARIABLES ------------------------------------------------------ */ :root { --section-padding: 70px; } /* ------------------------------------------------------ CONTAINER ------------------------------------------------------ */ .container { width: calc(100% - 32px); } /* ------------------------------------------------------ HEADER ------------------------------------------------------ */ #header { height: 68px; } .nav-links { top: 68px; height: calc(100vh - 68px); padding: 25px 20px; } .logo { font-size: 22px; } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero { min-height: 720px; align-items: flex-end; padding-bottom: 60px; } .hero-content { padding-top: 80px; } .hero-tag { margin-bottom: 18px; font-size: 10px; } .hero h1 { font-size: clamp( 43px, 13vw, 62px ); line-height: 0.95; letter-spacing: -2.5px; } .hero p { max-width: 450px; margin-top: 22px; font-size: 14px; } .hero-actions { flex-direction: column; align-items: stretch; margin-top: 30px; } .hero-actions .btn { width: 100%; } .hero-info { flex-direction: column; gap: 13px; margin-top: 35px; } /* ------------------------------------------------------ SECTION HEADINGS ------------------------------------------------------ */ .section-heading { margin-bottom: 40px; } .section-heading h2, .about-content h2, .features-content h2, .location-content h2, .contact-info h2 { font-size: 36px; letter-spacing: -1.5px; } /* ------------------------------------------------------ DISCIPLINES ------------------------------------------------------ */ .discipline-grid { grid-template-columns: 1fr; } .discipline-image { height: 320px; } .discipline-content { padding: 27px; } .discipline-content h3 { font-size: 24px; } /* ------------------------------------------------------ ABOUT ------------------------------------------------------ */ .about-image::after { right: -10px; bottom: -10px; width: 80px; height: 80px; } /* ------------------------------------------------------ STATS ------------------------------------------------------ */ .stats { padding: 35px 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-item { padding: 20px 10px; } .stat-item strong { font-size: 38px; } .stat-item span { font-size: 8px; } /* ------------------------------------------------------ SERVICES ------------------------------------------------------ */ .services-grid { grid-template-columns: 1fr; } .service-card { min-height: auto; padding: 30px; } /* ------------------------------------------------------ FEATURES ------------------------------------------------------ */ .feature-list { grid-template-columns: 1fr; } .features-highlight { min-height: 300px; padding: 40px; } .features-highlight strong { font-size: 52px; letter-spacing: -2px; } /* ------------------------------------------------------ SCHEDULE ------------------------------------------------------ */ .schedule-table { min-width: 550px; } .schedule-table th, .schedule-table td { padding: 14px; } .functional-schedule { padding: 30px; } /* ------------------------------------------------------ PLANS ------------------------------------------------------ */ .plans-grid { grid-template-columns: 1fr; } .plan-card { padding: 30px; } .plan-price { font-size: 40px; } /* ------------------------------------------------------ PROMOTION ------------------------------------------------------ */ .promotion { min-height: 500px; } .promotion-content h2 { font-size: 48px; letter-spacing: -2px; } .promotion-offer strong { font-size: 52px; } /* ------------------------------------------------------ INSTAGRAM ------------------------------------------------------ */ .instagram { padding: 55px 0; } .instagram-content { flex-direction: column; align-items: flex-start; gap: 25px; } .instagram h2 { font-size: 34px; } /* ------------------------------------------------------ LOCATION ------------------------------------------------------ */ .map-container, .map-container iframe { min-height: 350px; height: 350px; } /* ------------------------------------------------------ CONTACT ------------------------------------------------------ */ .contact-form-container { padding: 25px; } .form-row { grid-template-columns: 1fr; } .form-submit { width: 100%; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .footer-container { grid-template-columns: 1fr; gap: 40px; padding: 55px 0; } .footer-brand { grid-column: auto; } .footer-bottom .container { flex-direction: column; align-items: flex-start; gap: 8px; } /* ------------------------------------------------------ FLOATING BUTTONS ------------------------------------------------------ */ #whatsapp-button { right: 16px; bottom: 16px; width: 52px; height: 52px; font-size: 24px; } #backToTop { right: 16px; bottom: 80px; width: 40px; height: 40px; } } /* ========================================================== 4. MÓVILES PEQUEÑOS Hasta 480px ========================================================== */ @media (max-width: 480px) { /* ------------------------------------------------------ CONTAINER ------------------------------------------------------ */ .container { width: calc(100% - 28px); } /* ------------------------------------------------------ HERO ------------------------------------------------------ */ .hero { min-height: 680px; padding-bottom: 45px; } .hero h1 { font-size: 42px; } .hero-info div { font-size: 9px; } /* ------------------------------------------------------ SECTION HEADINGS ------------------------------------------------------ */ .section-heading h2, .about-content h2, .features-content h2, .location-content h2, .contact-info h2 { font-size: 32px; } /* ------------------------------------------------------ DISCIPLINES ------------------------------------------------------ */ .discipline-image { height: 260px; } .discipline-content { padding: 23px; } .discipline-content h3 { font-size: 21px; } .discipline-content p { font-size: 13px; } /* ------------------------------------------------------ STATS ------------------------------------------------------ */ .stat-item strong { font-size: 32px; } .stat-item span { font-size: 7px; letter-spacing: 0.5px; } /* ------------------------------------------------------ FEATURES ------------------------------------------------------ */ .features-highlight { min-height: 260px; padding: 30px; } .features-highlight strong { font-size: 43px; } /* ------------------------------------------------------ SCHEDULE ------------------------------------------------------ */ .functional-schedule { padding: 25px; } .functional-schedule h3 { font-size: 21px; } .class-time { flex-direction: column; align-items: flex-start; gap: 5px; } /* ------------------------------------------------------ PLANS ------------------------------------------------------ */ .plan-card { padding: 27px 23px; } /* ------------------------------------------------------ PROMOTION ------------------------------------------------------ */ .promotion { min-height: 460px; } .promotion-content h2 { font-size: 41px; } .promotion-offer strong { font-size: 45px; } /* ------------------------------------------------------ LOCATION ------------------------------------------------------ */ .location-detail { gap: 10px; } .location-detail span { font-size: 12px; } .map-container, .map-container iframe { height: 300px; min-height: 300px; } /* ------------------------------------------------------ CONTACT ------------------------------------------------------ */ .contact-form-container { padding: 20px; } /* ------------------------------------------------------ FOOTER ------------------------------------------------------ */ .footer-bottom p { font-size: 9px; } } /* ========================================================== 5. PANTALLAS CON POCA ALTURA ========================================================== */ @media (max-height: 700px) and (min-width: 701px) { .hero { min-height: 650px; } .hero-info { margin-top: 35px; } } /* ========================================================== 6. REDUCIR ANIMACIONES Usuarios con preferencias de movimiento reducido ========================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero { background-attachment: scroll; } }