/* ======================================== MEDIA QUERIES RESPONSIVE MOBILE Agregar en el de cada template ======================================== */ @media (max-width: 768px) { /* GENERAL */ * { margin: 0; padding: 0; box-sizing: border-box; } /* PROMO BAR */ .promo-bar { padding: 8px 16px !important; flex-direction: column; gap: 8px; font-size: 11px; } .promo-bar__left, .promo-bar__right { width: 100%; } .pse-button { padding: 10px !important; } .pse-button img { height: 112px !important; } /* NAVEGACIÓN */ nav { padding: 8px 16px !important; height: auto; flex-direction: column; gap: 12px; } .nav-logo img { height: 160px !important; width: auto; } .nav-menu { gap: 12px !important; flex-wrap: wrap; justify-content: center; } .nav-menu a { font-size: 13px; } .btn-primary { padding: 10px 16px !important; font-size: 13px !important; white-space: nowrap; } /* HERO */ .hero { margin: 20px 16px !important; padding: 24px 16px !important; grid-template-columns: 1fr !important; gap: 20px; border-radius: 16px; } .hero h1 { font-size: 24px !important; } .hero p { font-size: 14px !important; } .hero-cta { padding: 10px 20px !important; font-size: 14px !important; } .hero img { max-width: 100%; height: auto; } /* SECCIONES */ .quick-actions, .credit-lines, .learn, .cta-band { padding: 24px 16px !important; margin: 20px 16px !important; } /* CARDS */ .cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .action-card { padding: 16px !important; } .card h3 { font-size: 16px !important; } .card p { font-size: 13px !important; } /* FORMULARIO */ .formulario-simulador { margin: 20px 16px !important; padding: 20px 16px !important; } .formulario-simulador h3 { font-size: 18px !important; } .formulario-simulador p { font-size: 13px !important; } #formulario-contacto { max-width: 100% !important; } .form-row { grid-template-columns: 1fr !important; gap: 12px !important; } .form-row.full { grid-template-columns: 1fr !important; } .form-input-group { width: 100%; } .form-input-group label { font-size: 13px !important; } .form-input-group input, .form-input-group select { padding: 10px 12px !important; font-size: 13px !important; } .form-buttons { flex-direction: column !important; gap: 10px !important; } .form-btn-submit, .form-btn-cancel { padding: 12px 16px !important; font-size: 14px !important; width: 100%; } .form-disclaimer { font-size: 11px !important; } /* SIMULADOR */ .simulador-container { margin: 20px 16px !important; padding: 20px 16px !important; } .monto-display, .cuota-display { font-size: 18px !important; } .plazo-buttons { gap: 8px !important; } .plazo-btn { padding: 8px 12px !important; font-size: 12px !important; } /* FOOTER */ footer { padding: 24px 16px !important; } footer h4 { font-size: 12px !important; } footer ul li a { font-size: 12px !important; } /* GRID LAYOUTS */ .grid-2 { grid-template-columns: 1fr !important; } .grid-3 { grid-template-columns: 1fr !important; } /* ACORDEONES */ .acordeon-titulo { padding: 12px 14px !important; font-size: 14px !important; } .acordeon-contenido { padding: 12px 14px !important; } .acordeon-contenido p { font-size: 12px !important; } /* TABLAS */ table { font-size: 12px !important; } th, td { padding: 8px !important; } /* ESPACIADO GENERAL */ h1 { font-size: 22px !important; } h2 { font-size: 18px !important; } h3 { font-size: 16px !important; } h4 { font-size: 14px !important; } h5 { font-size: 13px !important; } p { font-size: 13px !important; } /* MÁRGENES */ section { margin: 16px 0 !important; } /* BOTONES */ .btn { padding: 10px 16px !important; font-size: 13px !important; } /* IMÁGENES */ img { max-width: 100%; height: auto; } /* CONTAINERS */ .contenedor-principal { margin: 0 !important; } } @media (max-width: 480px) { /* MEGA PEQUEÑO */ nav { padding: 6px 12px !important; } .promo-bar { padding: 6px 12px !important; font-size: 10px; } .nav-logo img { height: 152px !important; width: auto; } .pse-button { padding: 8px !important; } .pse-button img { height: 104px !important; width: auto !important; } .hero { margin: 12px 12px !important; padding: 16px 12px !important; } .hero h1 { font-size: 18px !important; } .quick-actions, .credit-lines, .learn { padding: 16px 12px !important; margin: 12px 12px !important; } .cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .action-card { padding: 14px !important; } .formulario-simulador { margin: 12px 12px !important; padding: 16px 12px !important; } .form-row { gap: 10px !important; } .form-input-group input, .form-input-group select { padding: 8px 10px !important; font-size: 12px !important; } h1 { font-size: 18px !important; } h2 { font-size: 16px !important; } h3 { font-size: 14px !important; } p { font-size: 12px !important; } .btn-primary { padding: 8px 12px !important; font-size: 12px !important; } footer { padding: 16px 12px !important; } }