/* ===== GOM Solutions — Capa responsive ===== Breakpoints alineados a Bootstrap (1200 / 992 / 768 / 576) para no pelear con el CSS heredado de Porto mientras convive. Se carga DESPUÉS de styles.css. */ /* Links por defecto (fallback para enlaces que se agreguen luego) */ a{color:var(--gom-blue)}a:hover{color:var(--gom-blue-700)} /* Utilidades extraídas de estilos inline para poder responder a breakpoints */ .hero-btn-row{display:flex;gap:12px;flex-wrap:wrap} .counter-cell-lg{padding:56px 32px} .section-cta-final{padding:0 48px 96px} .mk-dash-grid{display:grid;grid-template-columns:140px 1fr;min-height:460px} /* Botón hamburguesa — oculto en escritorio */ .nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--ink);cursor:pointer;padding:0} .nav-toggle svg{width:22px;height:22px} .nav-toggle .ico-close{display:none} .nav-toggle[aria-expanded="true"] .ico-open{display:none} .nav-toggle[aria-expanded="true"] .ico-close{display:block} /* Nada se desborda horizontalmente. `clip` en vez de `hidden`: `hidden` en lo convierte en contenedor de scroll y rompe el position:sticky del header. */ html{overflow-x:clip} img{max-width:100%} /* ============ ≤1200px — laptop chica ============ */ @media (max-width:1200px){ /* El header pierde holgura antes que el contenido: apretamos padding, gaps y logo para que a 1024 quepan menú + redes + botón sin encimarse. (El usuario pidió expresamente ver el menú completo a 1024.) */ .gom-header{padding-left:24px;padding-right:24px;--logo-h:26px} .gom-header nav{gap:12px} .header-top-inner{padding:0 24px} .va-hero-grid{gap:36px} .about-grid{gap:48px} .benefits-grid{gap:44px} .feat-grid{grid-template-columns:repeat(2,1fr)} } /* ============ ≤992px — el header ya no cabe en una fila ============ */ @media (max-width:992px){ /* Header con menú desplegable */ .gom-header{position:relative;flex-wrap:wrap;padding:14px 20px;gap:10px} .nav-toggle{display:flex;order:3} .gom-header .logo{margin-right:auto} .gom-header .header-cta{order:2;margin-right:10px} .gom-header nav{order:4;flex-basis:100%;display:none;flex-direction:column;gap:0;padding-top:6px;margin-top:10px;border-top:1px solid var(--line)} .gom-header nav.open{display:flex} .gom-header nav a{padding:14px 4px;font-size:15px;border-bottom:1px solid var(--line-2)} .gom-header nav a:last-child{border-bottom:0} /* Submenú de Módulos: acordeón dentro del panel, no flotante */ .nav-drop{display:block;width:100%;border-bottom:1px solid var(--line-2)} .nav-drop-btn{width:100%;justify-content:space-between;padding:14px 4px;font-size:15px} .nav-drop-menu{position:static;display:none;min-width:0;border:0;border-radius:0;padding:0 0 10px;box-shadow:none;background:transparent;gap:0} .nav-drop-menu::before{display:none} .nav-drop.open .nav-drop-menu{display:flex} .nav-drop-menu a{padding:11px 4px 11px 10px;font-size:14px;border-bottom:0;border-left:2px solid var(--line);border-radius:0} .nav-drop-menu a:hover{background:transparent;border-left-color:var(--gom-blue)} .nav-drop-menu .ndm-ico{width:26px;height:26px} .nav-drop-menu .ndm-sep{margin:10px 0 11px 10px} .btn-sm{height:44px;padding:0 18px} .header-top-inner{padding:0 20px} .ht-left{display:none} .header-social{display:none} } /* ============ ≤992px — tablet ============ */ @media (max-width:992px){ /* Hero a una columna */ .va-hero{padding:44px 24px 64px} .va-hero-grid{grid-template-columns:1fr;gap:40px} .va-hero h1,.va-hero h2{font-size:clamp(34px,5.4vw,48px)} .va-hero .lede{max-width:none} .va-float-card{display:none} /* Sin carrusel: se queda fija la lámina 1 (Factura Electrónica) */ .va-slide,.va-slide.active{display:none} .va-slide[data-slide="0"]{display:block;opacity:1} .slider-dots{display:none} /* Secciones */ .section{padding:72px 24px} .section-cta-final{padding:0 24px 72px} .benefits-section{padding:72px 24px} .sec-head h2{font-size:clamp(28px,4.2vw,36px)} .about-grid{grid-template-columns:1fr;gap:40px} .about-grid h2{font-size:clamp(26px,3.8vw,34px)} .about-visual{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px} .about-photo{position:static;width:auto} .about-photo-main,.about-photo-small{height:260px} .about-stat-card{position:static;grid-column:1/-1;justify-self:start} .benefits-grid{grid-template-columns:1fr;gap:36px} .benefits-grid > .benefits-intro h2{font-size:clamp(26px,3.8vw,34px)} .counters-row{grid-template-columns:1fr 1fr} .counter-cell-lg{padding:36px 24px} .counter-cell{border-bottom:1px solid var(--line)} .counter-cell:nth-child(2n){border-right:0} .counter-cell:nth-last-child(-n+2){border-bottom:0} .gom-footer{padding:64px 24px 0} .footer-grid{grid-template-columns:1fr 1fr;gap:36px} /* El botón del CTA no cabe junto al texto: apilamos antes de que se apriete. */ .cta-strip{flex-direction:column;align-items:flex-start;gap:22px} } /* ============ ≤768px — teléfono ============ */ @media (max-width:768px){ .section{padding:56px 20px} .section-cta-final{padding:0 20px 56px} .benefits-section{padding:56px 20px} .va-hero{padding:32px 20px 52px} .va-hero h1,.va-hero h2{font-size:clamp(30px,7.6vw,38px)} .va-hero .lede{font-size:16px} .va-hero .trustline{flex-direction:column;align-items:flex-start;gap:10px;margin-top:26px} .va-hero .trustline .pill-row{flex-wrap:wrap} .slider-dots{bottom:16px} .hero-btn-row .btn{flex:1 1 auto;justify-content:center} .home-intro-strip{padding:24px 20px} .home-intro-strip .container-w{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .platform-grid{grid-template-columns:1fr} .about-visual{grid-template-columns:1fr} .cta-strip{flex-direction:column;align-items:stretch;padding:32px 24px;gap:22px} .cta-strip h3{font-size:22px} .testimonial-card{padding:32px 22px} .testimonial-card blockquote{font-size:18px} .testimonial-card .quote-mark{font-size:56px;top:16px;left:18px} .gom-footer{padding:56px 20px 0} .footer-grid{grid-template-columns:1fr;gap:32px;padding-bottom:36px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px} .footer-bottom-links{flex-wrap:wrap;gap:16px} .wa-float{width:52px;height:52px;bottom:18px;right:18px} .wa-card{bottom:82px;right:18px;left:18px;width:auto;max-width:none} .sec-head h2 br{display:none} .sec-head h2{font-size:clamp(26px,6.4vw,32px)} .sec-head p{font-size:15px} .header-top{display:none} /* En el móvil el mockup del hero no es HTML: se sustituye por una captura suya, .mk-shot, y el marco se esconde. El HTML tendría que encogerse a la mitad para caber, y encogerlo de verdad —sin recomponerlo, que es lo que lo hacía parecer un bloque más de la página— no hay forma fiable de hacerlo: zoom con un factor calculado funciona en Chrome y Safari lo ignora. La imagen se reduce sola y se ve igual en todos. */ .va-hero .browser-frame{display:none} .va-hero .mk-shot{display:block} } /* ============ ≤576px — teléfono pequeño ============ */ @media (max-width:576px){ .feat-grid{grid-template-columns:1fr} .mini-feat-grid{grid-template-columns:1fr} .benefits-items{grid-template-columns:1fr} .hero-btn-row{flex-direction:column;align-items:stretch} .hero-btn-row .btn,.cta-strip .btn,.home-intro-strip .btn{width:100%;justify-content:center} /* --logo-h en .gom-header (no en el img) para que gane sobre el valor heredado de .site-header.shrunk: en hamburguesa el logo NO debe crecer al hacer scroll, o el header se parte en dos filas. */ .gom-header{padding:12px 14px;gap:8px;--logo-h:20px} .gom-header .header-cta{margin-right:0} .gom-header .btn-sm{padding:0 12px;font-size:12px} .counters-row{grid-template-columns:1fr} .counter-cell{border-right:0;border-bottom:1px solid var(--line)} .counter-cell:last-child{border-bottom:0} .counter-cell-lg{padding:28px 20px} .counter-cell .num{font-size:36px} .testimonial-card blockquote{font-size:17px} .testimonial-avatar{width:44px;height:44px;font-size:16px} } /* ============ ≤400px — pantallas muy angostas ============ */ @media (max-width:400px){ .gom-header{padding:12px 12px;gap:6px;--logo-h:18px} .gom-header .btn-sm{padding:0 10px;font-size:11.5px;letter-spacing:0} }