/* * Overrides del sitio — debe cargarse al final del (después de master.css). * Anula estilos legacy que Next.js no puede sobrescribir solo con globals.css. */ :root { --site-container-max: 1320px; } /* Evita scroll animado al cambiar de ruta (home slides → blog, etc.). */ html { scroll-behavior: auto !important; } /** * Purpose: Elimina el doble scrollbar intermitente del sitio público. * Cause (legacy master.css): `html, body { height: 100%; overflow-x: hidden }` — * `overflow-x: hidden` fuerza `overflow-y` a `auto`, y con height:100% en * ambos, html Y body se convierten en scrollers → dos barras a la derecha. * Fix: un único scroller = el viewport (`html`), que es el modelo estándar del * navegador. `body` usa `overflow: clip/visible`: a diferencia de `hidden`, * `clip` NO convierte el elemento en scroll container, así que body no puede * generar una segunda barra bajo ninguna circunstancia. Además `window.scrollY`, * `window.scrollTo` y los listeners de scroll de ventana vuelven a funcionar * (con body-scroller quedaban siempre a 0 y la rueda podía no encadenar desde * elementos fixed, cuyo scroll chain va directo al viewport). * Edge cases: `html.scroll-resetting` sigue ocultando overflow en navegación SPA; * los lectores de posición (SiteHeader, bot explorador, scrollReset) ya toman * el máximo de window.scrollY / body.scrollTop / documentElement.scrollTop, * por lo que funcionan con cualquier scroller. * Security: Solo CSS de layout; sin impacto en auth ni datos. */ html { height: auto !important; overflow-x: clip !important; overflow-y: auto !important; } body { height: auto !important; min-height: 100vh; max-height: none !important; overflow-x: clip !important; overflow-y: visible !important; position: relative !important; } /** * Solo ≤991px: clip horizontal. * No forzar max-width:100% en .container en desktop (rompe anchos Bootstrap 540–1320). */ @media (max-width: 991.98px) { html, body, .dvpage { max-width: 100%; overflow-x: clip; } } @media (max-width: 575.98px) { .container { box-sizing: border-box !important; max-width: 100%; padding-inline: 16px !important; } img, video, iframe { max-width: 100%; height: auto; } } /* Oculta el salto visual mientras se resetea scroll tras navegación SPA. */ html.scroll-resetting { overflow: hidden !important; scroll-behavior: auto !important; } /* Montserrat en el sitio público — anula Proxima Nova legacy en páginas nuevas */ .dvpage.q2b-font-montserrat, body.q2b-font-montserrat .dvpage { font-family: Montserrat, sans-serif; } .dvpage.q2b-font-montserrat :where( h1, h2, h3, h4, h5, h6, p, a, span, li, label, button, input, textarea, select ) { font-family: inherit; } /* * master.css fuerza h1–h5 en uppercase + color blanco. masterv2_animated.css lo anulaba * con `text-transform: none`, pero esa hoja pasa a carga diferida (PageSpeed). Sin este * reset en CSS crítico, títulos como el hero o "Algunos de nuestros trabajos" quedan * en MAYÚSCULAS. Los rótulos pequeños (.home-why__label, etc.) siguen en uppercase * vía clases en globals.css. */ .dvpage :where(h1, h2, h3, h4, h5, h6) { text-transform: none !important; } /* * Menú 2026: la cabecera se estila en SiteHeader.module.css (clases hasheadas, * fuera del alcance de master.css). Aquí ya no se necesitan overrides de menú. */ /* * masterv2_animated.css: form { height:100%; overflow:auto; background:#fff } pensado para body>form ASP.NET. * En Next los
del blog/buscador/contacto/empleo heredan master.css (form #FAFAFA) mientras * masterv2 carga diferido — el fondo gris se filtra bajo inputs blancos dentro de tarjetas blancas. */ .dvpage form { height: auto !important; overflow: visible !important; max-height: none !important; background-color: #fff !important; } /* Hero monitor home — pantalla completa (cabecera flota encima) */ .home-monitor-hero { height: 70dvh !important; min-height: 70dvh !important; margin-top: 0 !important; } .home-monitor-hero__scene, .home-monitor-hero__scene > * { height: 100% !important; min-height: 100% !important; } .home-monitor-hero__scene canvas { touch-action: pan-y; } @media (max-width: 768px) { .home-monitor-hero--has-mobile-image .home-monitor-hero__scene, .home-monitor-hero--show-mobile-image .home-monitor-hero__scene { display: none !important; } .home-monitor-hero--has-mobile-image .home-monitor-hero__mobile-image, .home-monitor-hero--show-mobile-image .home-monitor-hero__mobile-image { display: block !important; } } /* Blog — cuerpo del artículo: anula master.css `p { font-size: 13px }` */ .blog-post-page .blog-post-body__content p:not(.blog-post-sidebar__cta-label):not(.blog-post-sidebar__cta-text), .blog-post-page .blog-post-body__content li, .blog-post-page .blog-post-body__content .p-subtitle { font-size: clamp(15px, 14px + 0.35vw, 17px) !important; line-height: 1.75 !important; } @media (min-width: 992px) { .blog-post-page .blog-post-body__content p:not(.blog-post-sidebar__cta-label):not(.blog-post-sidebar__cta-text), .blog-post-page .blog-post-body__content li, .blog-post-page .blog-post-body__content .p-subtitle { font-size: 17px !important; } } /* Blog — CTA inline y lateral: anula master.css `p` / `a { font-size: 13px }` */ .blog-post-page .blog-post-sidebar__cta.blog-post-inline-cta .blog-post-sidebar__cta-label, .blog-post-page .blog-post-sidebar__cta:not(.blog-post-sidebar__cta--aside) .blog-post-sidebar__cta-label { font-size: clamp(11px, 10px + 0.25vw, 12px) !important; line-height: 1.35 !important; } .blog-post-page .blog-post-sidebar__cta.blog-post-inline-cta .blog-post-sidebar__cta-text, .blog-post-page .blog-post-sidebar__cta:not(.blog-post-sidebar__cta--aside) .blog-post-sidebar__cta-text { font-size: clamp(21px, 20px + 0.35vw, 25px) !important; line-height: 1.45 !important; } .blog-post-page .blog-post-sidebar__cta--aside .blog-post-sidebar__cta-label { font-size: clamp(21px, 20px + 0.35vw, 25px) !important; line-height: 1.3 !important; } .blog-post-page .blog-post-sidebar__cta--aside .blog-post-sidebar__cta-text { font-size: clamp(12px, 11px + 0.25vw, 14px) !important; line-height: 1.55 !important; } .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:link, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:visited, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:hover, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:active { font-size: clamp(12px, 11px + 0.25vw, 14px) !important; } @media (min-width: 992px) { .blog-post-page .blog-post-sidebar__cta.blog-post-inline-cta .blog-post-sidebar__cta-label, .blog-post-page .blog-post-sidebar__cta:not(.blog-post-sidebar__cta--aside) .blog-post-sidebar__cta-label { font-size: 12px !important; } .blog-post-page .blog-post-sidebar__cta.blog-post-inline-cta .blog-post-sidebar__cta-text, .blog-post-page .blog-post-sidebar__cta:not(.blog-post-sidebar__cta--aside) .blog-post-sidebar__cta-text { font-size: 25px !important; } .blog-post-page .blog-post-sidebar__cta--aside .blog-post-sidebar__cta-label { font-size: 25px !important; } .blog-post-page .blog-post-sidebar__cta--aside .blog-post-sidebar__cta-text, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:link, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:visited, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:hover, .blog-post-page .blog-post-sidebar__cta a.blog-post-sidebar__cta-btn:active { font-size: 14px !important; } } /* Blog — artículos relacionados: anula master.css en label, título y cards */ .blog-post-page .blog-post-related__label { font-size: clamp(11px, 10px + 0.35vw, 13px) !important; } .blog-post-page .blog-post-related__title { font-size: clamp(24px, 22px + 0.5vw, 30px) !important; } .blog-post-page .blog-post-related .blog-article-card__title, .blog-post-page .blog-post-related .blog-article-card__title a { font-size: clamp(14px, 13px + 0.25vw, 16px) !important; } .blog-post-page .blog-post-related .blog-article-card__meta { font-size: clamp(11px, 10px + 0.25vw, 12px) !important; } .blog-post-page .blog-post-related .blog-article-card__link, .blog-post-page .blog-post-related .blog-article-card__link:link, .blog-post-page .blog-post-related .blog-article-card__link:visited, .blog-post-page .blog-post-related .blog-article-card__link:hover, .blog-post-page .blog-post-related .blog-article-card__link:active { font-size: clamp(11px, 10px + 0.25vw, 13px) !important; } @media (min-width: 992px) { .blog-post-page .blog-post-related__label { font-size: 13px !important; } .blog-post-page .blog-post-related__title { font-size: 30px !important; } .blog-post-page .blog-post-related .blog-article-card__title, .blog-post-page .blog-post-related .blog-article-card__title a { font-size: 16px !important; } .blog-post-page .blog-post-related .blog-article-card__meta { font-size: 12px !important; } .blog-post-page .blog-post-related .blog-article-card__link, .blog-post-page .blog-post-related .blog-article-card__link:link, .blog-post-page .blog-post-related .blog-article-card__link:visited, .blog-post-page .blog-post-related .blog-article-card__link:hover, .blog-post-page .blog-post-related .blog-article-card__link:active { font-size: 13px !important; } } /* * Blog listado — recorte uniforme 16:10 en tarjetas (grid + destacado). * Bootstrap diferido y master.css pueden forzar img { height: auto }; !important mantiene el crop. */ .blog-page .blog-featured__media, .blog-page .blog-article-card__media { overflow: hidden !important; } .blog-page .blog-featured__media img, .blog-page .blog-article-card__media img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; } /* * Grid servicios (home, blog, empresa): Bootstrap diferido anula margin-top:auto del * enlace «Más info»; el wrapper .q2b-services__card-inner mantiene el layout flex. */ .q2b-services__grid { align-items: stretch !important; } .q2b-services__card { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; flex-grow: 0 !important; flex-shrink: 0 !important; align-self: stretch !important; min-height: 100% !important; min-width: 0 !important; overflow: hidden !important; } .q2b-services__card-inner { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; height: 100% !important; min-height: 100% !important; } .q2b-services__card-text { flex: 1 1 auto !important; } .q2b-services__card-link, .q2b-services__card-link:visited { margin-top: auto !important; flex-shrink: 0 !important; color: #370081 !important; } /* * Grid /servicios (ServiciosGridSection): mismas garantías que .q2b-services para * 4 columnas estables sin depender del box-sizing global de Bootstrap diferido. */ .servicios-grid-section ul[class] > li { box-sizing: border-box !important; flex-grow: 0 !important; flex-shrink: 0 !important; min-width: 0 !important; } .servicios-grid-section ul[class] > li a { box-sizing: border-box !important; } /* * Live Chat — paridad con producción; anula estilos legacy que desplazan capas. */ .chatia_q2b.chatia_q2b--trigger, .chatia_q2b { display: block !important; position: fixed !important; right: 0 !important; bottom: 0 !important; width: 134px !important; height: 123px !important; margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; overflow: visible !important; transform: none !important; top: auto !important; left: auto !important; } .chatia_q2b__triangle { position: static !important; margin: 0 0 0 11px !important; width: 0 !important; height: 0 !important; border-color: transparent transparent #370081 !important; border-style: solid !important; border-width: 0 0 123px 123px !important; } .chatia_q2b__panel { position: absolute !important; top: 0 !important; left: 0 !important; width: 134px !important; height: 123px !important; background: url("/img/page-right-corner.png") no-repeat 0 0 !important; background-size: auto !important; } .chatia_q2b__label { position: absolute !important; bottom: 8px !important; right: 8px !important; font-family: Arial, Verdana, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 20px !important; color: #fff !important; background: transparent !important; white-space: nowrap !important; } /* Live Chat iframe: master_responsive.css colapsa todos los iframes a height:0 en móvil. */ #chatia_q2b_container iframe { width: 100% !important; height: 100% !important; border: none !important; } /* Control reutilizable .q2b-latest-blog — anula master.css `p` / `a` / `h2` / `h3` */ .q2b-latest-blog__label { font-size: clamp(11px, 10px + 0.35vw, 13px) !important; } .q2b-latest-blog__title { font-size: clamp(24px, 22px + 0.5vw, 32px) !important; } .q2b-latest-blog__card-title, .q2b-latest-blog__card-title a { font-size: clamp(14px, 13px + 0.25vw, 16px) !important; } .q2b-latest-blog__card-meta { font-size: clamp(11px, 10px + 0.25vw, 12px) !important; line-height: 1.45 !important; } .q2b-latest-blog__card-link, .q2b-latest-blog__card-link:link, .q2b-latest-blog__card-link:visited, .q2b-latest-blog__card-link:hover, .q2b-latest-blog__card-link:active { font-size: clamp(11px, 10px + 0.35vw, 13px) !important; } @media (min-width: 992px) { .q2b-latest-blog__label { font-size: 13px !important; } .q2b-latest-blog__title { font-size: 32px !important; } .q2b-latest-blog__card-title, .q2b-latest-blog__card-title a { font-size: 16px !important; } .q2b-latest-blog__card-meta { font-size: 12px !important; } .q2b-latest-blog__card-link, .q2b-latest-blog__card-link:link, .q2b-latest-blog__card-link:visited, .q2b-latest-blog__card-link:hover, .q2b-latest-blog__card-link:active { font-size: 13px !important; } } /* Control reutilizable .q2b-tech — anula master.css */ .q2b-tech__label { font-size: clamp(11px, 10px + 0.35vw, 13px) !important; } .q2b-tech__title { font-size: clamp(24px, 22px + 0.5vw, 32px) !important; } .q2b-tech__subtitle { font-size: clamp(15px, 14px + 0.35vw, 17px) !important; line-height: 1.6 !important; } .q2b-tech__card-title { font-size: clamp(16px, 15px + 0.35vw, 19px) !important; } .q2b-tech__card-text { font-size: clamp(12px, 11px + 0.25vw, 14px) !important; line-height: 1.55 !important; } .q2b-tech__tag { font-size: clamp(11px, 10px + 0.25vw, 12px) !important; } @media (min-width: 992px) { .q2b-tech__label { font-size: 13px !important; } .q2b-tech__title { font-size: 32px !important; } .q2b-tech__subtitle { font-size: 17px !important; } .q2b-tech__card-title { font-size: 19px !important; } .q2b-tech__card-text { font-size: 14px !important; } .q2b-tech__tag { font-size: 12px !important; } } /* Home — CTA reutilizable: anula master.css `h2` / `p` / `a { font-size: 13px }` */ .home-cta #home-cta-title { font-size: clamp(28px, 24px + 1vw, 40px) !important; } .home-cta .container p { font-size: clamp(15px, 14px + 0.35vw, 17px) !important; line-height: 1.55 !important; } .home-cta .container a { font-size: clamp(13px, 12px + 0.25vw, 15px) !important; } @media (min-width: 992px) { .home-cta #home-cta-title { font-size: 40px !important; } .home-cta .container p { font-size: 17px !important; } .home-cta .container a { font-size: 15px !important; } } /* Studio — «Cómo trabajamos»: anula master.css en label, título y cards */ .studio-page .studio-process__label { font-size: clamp(11px, 10px + 0.35vw, 13px) !important; } .studio-page .studio-process__title { font-size: clamp(24px, 22px + 0.5vw, 32px) !important; } .studio-page .studio-process__card-title { font-size: clamp(15px, 14px + 0.35vw, 17px) !important; } .studio-page .studio-process__card-text { font-size: clamp(12px, 11px + 0.25vw, 14px) !important; line-height: 1.55 !important; } @media (min-width: 992px) { .studio-page .studio-process__label { font-size: 13px !important; } .studio-page .studio-process__title { font-size: 32px !important; } .studio-page .studio-process__card-title { font-size: 17px !important; } .studio-page .studio-process__card-text { font-size: 14px !important; } } /* Contacto / Empleo / Studio — cabecera anclada arriba (fondo unificado en @media desktop). */ .dvpage:has(.contacto-page) header, .dvpage:has(.empleo-page) header, .dvpage:has(.studio-page) header { top: 0 !important; left: 0 !important; right: 0 !important; } /* Footer legacy (Q2BMaster.master) — utilidades del tema Techno no incluidas en master.css */ #footerMaster a, #footerMaster a:link, #footerMaster a:visited { color: #212121 !important; font-size: 16px; } #footerMaster a:hover, #footerMaster a:active { color: #000 !important; } #footerMaster.footer-middle .footer-bottom.mt-70 { margin-top: 70px; } #footerMaster .footer-bottom-content-copy p { margin: 0; } #footerMaster .footer-bottom-right { text-align: right; } #footerMaster .footer-bottom-right-text { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 24px; } #footerMaster .footer-bottom-right-text a { color: #212121; text-decoration: none; } #footerMaster .footer-bottom-right-text a:hover { color: #000; text-decoration: underline; } #footerMaster .footer-bottom-logo-WhatsApp span { margin-left: 10px; font-size: 16px; line-height: 1.3; } #footerMaster .menu-quick-link-container.ml-4 { margin-left: 1.5rem; } @media (max-width: 767px) { /* En móvil el pie se centra por completo (logo, descripción, enlaces y textos legales). */ #footerMaster .footer-bottom-right { text-align: center; margin-top: 12px; } #footerMaster .footer-bottom-right-text { justify-content: center; } #footerMaster .menu-quick-link-container.ml-4 { margin-left: 0; } #footerMaster .widgets-company-info, #footerMaster .company-info-desc, #footerMaster .footer-bottom-content, #footerMaster .footer-bottom-content-copy { text-align: center; } #footerMaster .footer-bottom-logo, #footerMaster .footer-bottom-logo-WhatsApp a { display: flex; justify-content: center; } /* Las listas de enlaces usan flex con guion decorativo (::before): se centran horizontalmente. */ #footerMaster ul { display: flex; flex-direction: column; align-items: center; } #footerMaster ul li { justify-content: center; } } /* Páginas legales — paridad InfomacionLegal / PoliticaPrivacidad / PoliticaCookie.aspx */ .legal-page.contentPage { display: block !important; position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-height: 50vh; background: #fff; } .legal-page .box-header { display: block; height: var(--site-header-height, 71px); } .legal-page .dvhead h1 { font-family: Montserrat, sans-serif; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700; } .legal-page .dvlegal { max-width: var(--site-container-max, 1320px); width: 100%; margin: 20px auto 48px; padding: 0 clamp(16px, 3vw, 24px); box-sizing: border-box; } .legal-page .dvlegal p, .legal-page .dvlegal li { font-size: 16px; line-height: 1.55; color: #212121; margin: 0 0 12px; } .legal-page .dvlegal ul { margin: 0 0 16px; padding-left: 24px; } .legal-page .dvlegal h3.colorblack { color: #000; font-weight: 700; font-size: 21px; margin: 28px 0 12px; } .legal-page .dvlegal a { color: #103184; text-decoration: underline; text-underline-offset: 2px; } .legal-page .dvlegal a:hover { color: #370081; } @media (max-width: 991px) { .legal-page .dvlegal { padding: 0 16px 36px; } .legal-page .dvlegal h3.colorblack { font-size: 18px; } } /* Legal — footer y scroll visibles (master.js añadía no-scroll en desktop) */ .dvpage:has(.legal-page) #footerMaster, .dvpage:has(.legal-page) ~ #footerMaster, body.no-scroll .dvpage:has(.legal-page) #footerMaster { display: block !important; position: relative !important; visibility: visible !important; } body.no-scroll:has(.legal-page) { height: auto !important; min-height: 100vh; /* visible (no auto): mantiene el scroll en el viewport sin crear un segundo scroller */ overflow-y: visible !important; } /* ── Header móvil 2026: solo queda la variable de altura y el offset del hero ── */ @media (max-width: 1000px) { :root { --site-header-height: 56px; } .home-hero-overlay { padding-top: calc(56px + 12px) !important; } } /* Servicios V2 — overrides locales (grid intro + enlaces sin azul legacy) */ .servicios-page .servicios-grid-section__intro { position: relative !important; height: auto !important; z-index: 2 !important; width: 100%; } .why-q2b-section p a, .why-q2b-section p a:link, .why-q2b-section p a:visited, .why-q2b-section p a:hover, .why-q2b-section p a:active, .why-q2b-section p a:focus, .why-q2b-section p a:focus-visible { color: #6700f7 !important; font-weight: 600; text-decoration: underline !important; font-size: inherit; } .servicios-page .testimonials-section a[class*="linkItem"], .servicios-page .testimonials-section a[class*="linkItem"]:link, .servicios-page .testimonials-section a[class*="linkItem"]:visited, .servicios-page .testimonials-section a[class*="linkItem"]:hover, .servicios-page .testimonials-section a[class*="linkItem"]:active, .servicios-page .testimonials-section a[class*="linkItem"]:focus, .servicios-page .testimonials-section a[class*="linkItem"]:focus-visible { color: #6700f7 !important; text-decoration: none !important; font-size: 13px; font-weight: 600; }