/* * SAT Perú — Responsive Overrides & Adaptations * Cargado al final del ; prevalece sobre la plantilla base. * Sistema: Barlow + Open Sans · Carmín #a00048 · Navy #142441 */ /* ================================================================ 1. VIEWPORT FIT — notch / home indicator ================================================================ */ .sticky-header, .mobile-menu { padding-top: env(safe-area-inset-top, 0); } .main-footer { padding-bottom: max(40px, calc(40px + env(safe-area-inset-bottom, 0px))); } /* ================================================================ 2. FOCUS RINGS (browser surfaces) Reemplaza el anillo de foco por defecto del navegador con el Sello Carmín del sistema. Invisible a usuarios de ratón (solo aparece con keyboard / switch access). ================================================================ */ :focus-visible { outline: 2px solid #a00048; outline-offset: 3px; border-radius: 3px; } /* ================================================================ 3. SELECCIÓN DE TEXTO ================================================================ */ ::selection { background: #a00048; color: #fff; } ::-moz-selection { background: #a00048; color: #fff; } /* ================================================================ 4. HERO — ADMIN-BOX La plantilla posiciona ambas cajas con position:absolute bottom:95px. Usamos la clase .admin-box--top (aplicada en home.php al primer bloque) para elevar esa tarjeta sin recurrir a inline !important. ================================================================ */ .banner-section.style-four .image-box .admin-box--top { bottom: 260px; } /* En tablets (≤1399px) la plantilla ya hace position:relative + margin-top:30px. Reseteamos cualquier offset residual en ambas cajas. */ @media only screen and (max-width: 1399px) { .banner-section.style-four .image-box .admin-box, .banner-section.style-four .image-box .admin-box--top { bottom: auto !important; margin-top: 0 !important; } } /* ================================================================ 5. BOTÓN FLOTANTE WHATSAPP Desktop 100×100 px · Móvil (≤767px) 70×70 px. Posición safe-area consolidada aquí junto al tamaño. ================================================================ */ .btn-whatsapp { width: 100px !important; height: 100px !important; bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important; right: max(20px, env(safe-area-inset-right, 20px)) !important; } .btn-whatsapp a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .btn-whatsapp img { width: 100px !important; height: 100px !important; object-fit: contain; } @media only screen and (max-width: 767px) { .btn-whatsapp { width: 70px !important; height: 70px !important; } .btn-whatsapp img { width: 70px !important; height: 70px !important; } } /* ================================================================ 6. HERO TIPOGRAFÍA — fluid scaling Los sliders secundarios usan inline style="font-size:50px" que no se puede sobreescribir sin !important desde CSS externo. ================================================================ */ @media only screen and (max-width: 991px) { .banner-section .content-box h1, .banner-section .content-box .h1-style-forced { font-size: clamp(1.8rem, 6vw, 2.8rem) !important; line-height: 1.25 !important; margin-bottom: 20px !important; } .banner-section .content-box p { font-size: 15px; } .banner-section .content-box .btn-box { display: flex; flex-wrap: wrap; gap: 12px; } .banner-section .content-box .btn-box a { flex: 1 1 auto; text-align: center; } } @media only screen and (max-width: 575px) { .banner-section .content-box h1, .banner-section .content-box .h1-style-forced { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.3 !important; } .banner-section { padding-top: calc(env(safe-area-inset-top, 0px) + 80px) !important; } } /* ================================================================ 7. SECCIÓN TITLES — fluid ================================================================ */ @media only screen and (max-width: 767px) { .sec-title h2 { font-size: clamp(1.5rem, 6.5vw, 2.2rem); line-height: 1.25; } .sec-title h6 { font-size: 12px; letter-spacing: 0.06em; } } /* ================================================================ 8. ANIMACIONES — mobile performance Las formas rotantes (rotate-me) generan compositing layers innecesarias en dispositivos de gama media/baja. ================================================================ */ @media only screen and (max-width: 767px) { .rotate-me { animation: none !important; } .anim-icon { display: none; } /* Ocultar shapes decorativos del hero en móvil */ .banner-section .shape-1, .banner-section .shape-2 { display: none !important; } } /* ================================================================ 9. NAVEGACIÓN MÓVIL — touch targets Los toggler y botón de cierre deben tener al menos 44×44 px. ================================================================ */ .menu-area .mobile-nav-toggler { min-height: 44px; min-width: 44px; padding: 10px; cursor: pointer; } .mobile-menu .close-btn { min-height: 48px; min-width: 48px; display: flex !important; align-items: center; justify-content: center; cursor: pointer; } /* Links de redes sociales en menú móvil — hit area */ .mobile-menu .social-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* ================================================================ 10. SERVICE TABS — layout en pantallas pequeñas ================================================================ */ @media only screen and (max-width: 575px) { .service-style-four .tab-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .service-style-four .tab-btns li { width: 100% !important; margin-bottom: 0 !important; } } /* ================================================================ 11. TABLA DE ANÁLISIS — scroll horizontal El wrapper .table-responsive ya existe en analisis.php; esto asegura scroll suave en iOS y elimina el desbordamiento. ================================================================ */ .table-responsive { scroll-behavior: smooth; overflow-x: auto; } @media only screen and (max-width: 767px) { .table-responsive table { min-width: 480px; } } /* ================================================================ 12. IMÁGENES EN CONTENIDO DE DETALLE Blog, páginas estáticas y servicios — evita overflow. ================================================================ */ .details-content img, .blog-details-content img, .content-side img { max-width: 100%; height: auto; } /* Tablas embebidas en contenido CMS */ .details-content table { display: block; overflow-x: auto; scroll-behavior: smooth; max-width: 100%; } /* ================================================================ 13. FORMULARIO DE CONTACTO — mejoras móvil ================================================================ */ @media only screen and (max-width: 767px) { .future-member .info-box { margin-bottom: 30px; } /* El select de área tiene appearance:select (no estándar). Forzamos el comportamiento nativo en móvil. */ #area { -webkit-appearance: auto !important; -moz-appearance: auto !important; appearance: auto !important; } } /* ================================================================ 14. FOOTER CTA — stacking en móvil ================================================================ */ @media only screen and (max-width: 575px) { .cta-style-two .inner-box { text-align: center; padding: 40px 20px !important; } .cta-style-two .text { float: none !important; display: block; margin-bottom: 20px; } .cta-style-two .text h2 br { display: none; } .cta-style-two .btn-box { float: none !important; display: block; } } /* ================================================================ 15. BOTONES — mínimo táctil 44 px en móvil ================================================================ */ @media only screen and (max-width: 767px) { .theme-btn-one, .banner-btn, .banner-btn-two, .theme-btn-two { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ================================================================ 16. CAROUSEL DOTS — indicador de posición en móvil La plantilla oculta los dots en .owl-dots-none. Mostramos los dots de navegación solo en el banner principal. ================================================================ */ @media only screen and (max-width: 767px) { .banner-carousel.owl-carousel .owl-dots { display: flex !important; justify-content: center; margin-top: 16px; padding-bottom: 8px; } .banner-carousel .owl-dot span { background: rgba(160, 0, 72, 0.3); width: 8px; height: 8px; border-radius: 50%; margin: 0 4px; transition: background 0.3s ease; } .banner-carousel .owl-dot.active span { background: #a00048; } } /* ================================================================ 17. HEADER LOGO — tamaño reducido en móvil ================================================================ */ @media only screen and (max-width: 1200px) { .main-header .logo-box figure.logo img { max-height: 100px; width: auto; height: auto; } } @media only screen and (max-width: 767px) { .main-header .logo-box figure.logo img { max-height: 55px !important; width: auto; } } /* ================================================================ 18. HERO ADMIN-BOX — oculto en móvil En pantallas ≤767 px las tarjetas "Llamanos" y "WhatsApp" del hero se ocultan; el contacto está disponible en footer y menú. ================================================================ */ @media only screen and (max-width: 767px) { .banner-section.style-four .image-box .admin-box, .banner-section.style-four .image-box .admin-box--top { display: none !important; } } /* ================================================================ 19. FOOTER LOGO — tamaño en móvil ================================================================ */ @media only screen and (max-width: 767px) { .main-footer .footer-logo .logo img { width: 100px !important; object-fit: contain; } } /* ================================================================ 20. FOOTER COLUMNAS — layout 2 columnas en móvil Bootstrap 4 usa flexbox en .col-sm-12 (flex: 0 0 100%). Sobrescribimos las columnas 2 y 3 (Informacion + SatPeru) a 50 % y eliminamos el margin-left artificial ml-70 de sus widgets. ================================================================ */ @media only screen and (max-width: 767px) { /* Informacion y SatPeru: mitad del ancho cada una */ .main-footer .footer-top .footer-column:nth-child(2), .main-footer .footer-top .footer-column:nth-child(3) { flex: 0 0 50% !important; max-width: 50% !important; } /* Quitar margen izquierdo de plantilla */ .main-footer .footer-widget.post-widget, .main-footer .footer-widget.links-widget { margin-left: 0 !important; padding-left: 0; } /* Logo widget centrado */ .main-footer .logo-widget { text-align: center; } } /* ================================================================ 21. FOOTER REDES SOCIALES — fila centrada en móvil ================================================================ */ @media only screen and (max-width: 767px) { .main-footer .subscribe-widget .widget-content ul.nav { display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: flex-start; gap: 20px; padding-top: 10px; } .main-footer .subscribe-widget .widget-content ul.nav li { margin: 0 !important; } } /* ================================================================ 22. HEADER MÓVIL — fila flex (logo izq. · hamburger der.) responsive.css pone outer-box a display:block en ≤991px, lo que apila el logo arriba y el hamburger debajo. Lo corregimos a flex. ================================================================ */ @media only screen and (max-width: 991px) { .main-header.style-four .header-lower .outer-box { display: flex !important; align-items: center; justify-content: space-between; padding: 6px 15px; } .main-header.style-four .header-lower .logo-box { text-align: left !important; padding-right: 0 !important; float: none; flex: 0 0 auto; } .main-header.style-four .header-lower .menu-area { float: none; flex: 0 0 auto; display: flex; align-items: center; } /* menu-right-content está vacío; ocultarlo evita que su position:absolute interfiera con el nuevo layout flex */ .main-header.style-four .header-lower .menu-right-content { display: none !important; } } /* ================================================================ 23. BANNER HERO — padding-top reducido en móvil Con el header compacto (~67 px total) ya no se necesitan los 210 px que la plantilla establece en ≤991px. ================================================================ */ @media only screen and (max-width: 767px) { .banner-section.style-four { padding-top: 100px !important; padding-bottom: 60px !important; } } /* ================================================================ 25. CARDS DE SERVICIOS — imagen uniforme y altura igualada event-block-one en servicios.php: las imágenes tienen distintos aspect ratios → se fija la altura del contenedor a 240 px con object-fit:cover. Los cards de cada fila se igualan con flexbox. ================================================================ */ /* Altura fija + recorte centrado para todas las imágenes */ .events-style-two .event-block-one .inner-box .image-box { height: 240px; overflow: hidden; border-radius: 20px 20px 0 0; /* clipa las esquinas superiores del card */ } .events-style-two .event-block-one .inner-box .image-box img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; } /* Igualar altura de tarjetas dentro de cada fila Bootstrap */ .events-style-two .event-block { display: flex; } .events-style-two .event-block-one { width: 100%; display: flex; flex-direction: column; } .events-style-two .event-block-one .inner-box { display: flex !important; flex-direction: column; flex: 1; } .events-style-two .event-block-one .inner-box .lower-content { flex: 1; } /* Ícono del círculo perfectamente centrado (anula padding + line-height inline) */ .events-style-two .event-block-one .inner-box .post-date { display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .events-style-two .event-block-one .inner-box .post-date span { display: flex !important; align-items: center; justify-content: center; line-height: 1 !important; width: 100%; height: 100%; } /* Título uniforme — anula el inline style font-size:22px del PHP */ .events-style-two .event-block-one .inner-box h3, .events-style-two .event-block-one .inner-box h3 a { font-size: 20px !important; line-height: 1.4 !important; font-weight: 700 !important; font-family: 'Barlow', sans-serif !important; color: #142441 !important; } /* ================================================================ 24. SECCIÓN ESPACIADOS — reducir grandes paddings en móvil La plantilla usa valores de escritorio (100–145 px) que no se anulan en el breakpoint ≤767px; los bajamos a 55–65 px. ================================================================ */ @media only screen and (max-width: 767px) { /* Blog / artículos: 100px top · 145px bottom → 55px / 55px */ .news-section { padding-top: 55px !important; padding-bottom: 55px !important; } /* Quitar margen-bottom extra de cada tarjeta de blog */ .news-block-one .inner-box { margin-bottom: 0 !important; } /* Secciones genéricas que no tienen override móvil propio */ .about-section { padding-top: 60px !important; padding-bottom: 60px !important; } .service-style-four, .chooseus-section, .video-section { padding-top: 55px !important; padding-bottom: 55px !important; } }