con font-size 9px inline (microscópico). Solo aplica en mobile/tablet — desktop conserva su 9px original. */ @media (max-width: 1024px) { .elementor-element[data-id="advhc46abe"] p { font-size: var(--fs-xs) !important; } } /* ---------- 4. HEADER DERECHO: APILAR EN MOBILE ---------- `hdr_right` sale del viewport en 360-390px (rightEdge 402). Reducir su tamaño y permitir wrap. */ @media (max-width: 767px) { .elementor-element[data-id="hdr_right"], body .elementor-element[data-id="hdr_right"] { max-width: 100% !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } .elementor-element[data-id="hdr_right"] .elementor-button { padding: 8px 14px !important; font-size: var(--fs-small) !important; } } /* ---------- 5. FOOTER: APILAR COLUMNAS EN MOBILE ---------- ftr_col3/4, ftr_addr, ftr_social no se apilan correctamente. */ @media (max-width: 767px) { .elementor-6 .e-con-inner, .elementor-element[data-id="ftr_inner"] .e-con-inner, .elementor-element[data-id*="ftr_col"] { flex-direction: column !important; flex-wrap: wrap !important; width: 100% !important; max-width: 100% !important; } .elementor-element[data-id*="ftr_col"] { margin-bottom: 24px !important; } } /* ---------- 6. HEADING "NUESTROS SERVICIOS" — OVERLAP MOBILE ---------- data-ids reales: - Accountants: accs855d2a (heading "Nuestros Servicios") - Ayuda Center: ac-svc-title (heading "Nuestros Servicios") - Advisors: similar El heading se solapa con la primera card por margin negativo o sticky. Forzar position estática y margin generoso debajo. */ @media (max-width: 1024px) { body.page-id-69 .elementor-element[data-id="accs855d2a"], body.page-id-29 .elementor-element[data-id="ac-svc-title"], body.page-id-78 [data-id*="adv-svc-title"], body.page-id-78 [data-id*="adv-srv"], body.page-id-69 [data-id*="acc-srv"], body.page-id-29 [data-id*="ac-srv"] { position: static !important; margin-top: 0 !important; margin-bottom: 32px !important; padding-bottom: 16px !important; z-index: auto !important; top: auto !important; } body.page-id-69 .elementor-element[data-id="accs855d2a"] + .elementor-element, body.page-id-29 .elementor-element[data-id="ac-svc-title"] + .elementor-element, body.page-id-69 [data-id="accs855d2a"] ~ .e-con, body.page-id-29 [data-id="ac-svc-title"] ~ .e-con { margin-top: 24px !important; } /* Safety neta: cualquier H2 seguido de un widget que se le pega */ body .elementor-widget-heading h2.elementor-heading-title { position: static !important; margin-bottom: 16px !important; } body .elementor-widget-heading + .elementor-widget, body .elementor-widget-heading + .e-con { margin-top: 16px !important; } } /* ---------- 7. CTA HEADING vs PÁRRAFO (Ayuda Center, Quienes Somos) ---------- Overlap de H2 grande con
siguiente. */
@media (max-width: 1024px) {
body .elementor-widget-heading + .elementor-widget-text-editor,
body .elementor-widget-heading + .elementor-widget {
margin-top: 12px !important;
}
body h1, body h2, body h3 {
margin-bottom: 16px !important;
}
}
/* ---------- 8. QUIENES SOMOS: TEAM CAROUSEL ----------
Es un carrusel horizontal (.qs-team-viewport > .qs-team-track > 6× .qs-team-card).
Desktop muestra 3 cards a la vez (flex-basis: calc((100% - 56px) / 3)).
Mobile/tablet: ajustar flex-basis para que se vea 1 (mobile) o 2 (tablet)
por vista, sin romper el JS del carrusel. */
@media (max-width: 767px) {
body.page-id-87 .qs-team-viewport {
max-width: 100% !important;
padding: 20px 16px !important;
}
body.page-id-87 .qs-team-track {
max-width: none !important;
gap: 16px !important;
}
body.page-id-87 .qs-team-track > .qs-team-card {
flex: 0 0 calc(100% - 0px) !important;
min-width: 0 !important;
aspect-ratio: 3/4 !important;
}
body.page-id-87 .qs-team-card .qs-team-name {
font-size: var(--fs-base) !important;
line-height: 1.3 !important;
}
body.page-id-87 .qs-team-card .qs-team-role {
font-size: var(--fs-small) !important;
line-height: 1.4 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-87 .qs-team-track > .qs-team-card {
flex: 0 0 calc((100% - 28px) / 2) !important;
}
}
/* ---------- 9. QUIENES SOMOS: PHILO CIRCLES ----------
80x80 con frases enteras → texto se sale. Agrandar y reorganizar. */
@media (max-width: 767px) {
body.page-id-87 .qs-philo-graphic {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
height: auto !important;
gap: 12px !important;
padding: 12px !important;
}
body.page-id-87 .qs-philo-bubble {
position: static !important;
width: 100% !important;
height: auto !important;
min-height: 64px !important;
border-radius: 12px !important;
padding: 12px 16px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
transform: none !important;
}
body.page-id-87 .qs-philo-bubble span {
font-size: var(--fs-small) !important;
line-height: 1.4 !important;
text-align: left !important;
flex: 1 !important;
white-space: normal !important;
}
body.page-id-87 .qs-philo-bubble i {
flex-shrink: 0 !important;
font-size: 22px !important;
}
body.page-id-87 .qs-philo-center,
body.page-id-87 .qs-philo-arc {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-87 .qs-philo-bubble {
width: 110px !important;
height: 110px !important;
}
body.page-id-87 .qs-philo-bubble span {
font-size: var(--fs-xs) !important;
line-height: 1.3 !important;
}
}
/* ---------- 10. QUIENES SOMOS: DIFF CIRCLES ----------
120x120 con icono FontAwesome que sobresale. Ajustar padding. */
@media (max-width: 1024px) {
body.page-id-87 .qs-diff-circle {
width: 96px !important;
height: 96px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
body.page-id-87 .qs-diff-circle i,
body.page-id-87 .qs-diff-circle svg {
font-size: 36px !important;
max-width: 60% !important;
max-height: 60% !important;
}
}
/* ---------- 11. QUIENES SOMOS: TIMELINE SLIDES ----------
Desktop usa layout 3-up (left/center/right) con translateX. En mobile
se solapan. Mostrar SOLO la slide activa, ocultar las otras. */
@media (max-width: 1024px) {
body.page-id-87 .qs-tl-slide {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
transform: none !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: opacity 0.4s ease !important;
}
body.page-id-87 .qs-tl-slide.is-active,
body.page-id-87 .qs-tl-slide.qs-tl-center {
position: relative !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
body.page-id-87 .qs-tl-track {
transform: none !important;
width: 100% !important;
position: relative !important;
}
body.page-id-87 .qs-tl-carousel,
body.page-id-87 .qs-tl-viewport {
overflow: hidden !important;
width: 100% !important;
}
body.page-id-87 .qs-tl-slide-bg,
body.page-id-87 .qs-tl-slide-overlay {
width: 100% !important;
max-width: 100% !important;
}
body.page-id-87 .qs-tl-block {
width: 100% !important;
max-width: 100% !important;
padding: 16px !important;
}
/* Quitar el 400vh de scroll-pinning en mobile/tablet. Ese height era para
pinned-scroll desktop. Mobile: altura natural del carrusel + chrome. */
body.page-id-87 [data-id="qs-tl-sec"] {
height: auto !important;
min-height: auto !important;
}
body.page-id-87 [data-id="qs-tl-html"] {
height: auto !important;
min-height: 0 !important;
}
/* Carrusel necesita altura definida porque slides son absolute */
body.page-id-87 .qs-tl-carousel,
body.page-id-87 .qs-tl-viewport,
body.page-id-87 .qs-tl-track {
height: auto !important;
min-height: 500px !important;
position: relative !important;
}
}
/* ---------- 12. HOME: ÓVALO DECORATIVO ll6itevi ----------
Desktop conserva el border-radius:50% original (diseño intencional).
Solo en mobile reducimos el radius para que no quede óvalo extraño. */
@media (max-width: 767px) {
.elementor-element[data-id="ll6itevi"] {
border-radius: 16px !important;
max-width: 90% !important;
margin: 0 auto !important;
}
}
/* ---------- 13. ADVISORS: CHECK ITEMS ROW ----------
`.ayc-check-item` se salen del viewport en mobile. Forzar wrap. */
@media (max-width: 767px) {
body.page-id-78 .ayc-check-list,
body.page-id-78 [class*="check-row"],
body.page-id-78 [data-id*="check"] .e-con-inner {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
body.page-id-78 .ayc-check-item {
flex: 0 0 calc(50% - 6px) !important;
max-width: calc(50% - 6px) !important;
min-width: 0 !important;
}
}
/* ---------- 14. ACCOUNTANTS: TESTIMONIALES ----------
`accx6186f72` testimonial wrapper sale a rightEdge 1240 a 768. */
@media (max-width: 1024px) {
body.page-id-69 .elementor-element[data-id="accx6186f72"],
body.page-id-69 [class*="testimonial-wrapper"] {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
}
/* ---------- 15. SERVICIOS: INTRO TITLE ----------
svc-intro-title tiene white-space:nowrap forzado en overrides.css:6778
(bloque "FINAL OVERRIDES: servicios intro one-line responsive") - bueno
para desktop pero rompe layout en mobile (scrollW 555 / clientW 244).
Anular nowrap bajo 1024px y permitir wrap natural. */
@media (max-width: 1024px) {
html body.page-id-27 .elementor-element[data-id="svc-intro-title"] p,
html body.page-id-27 .elementor-element[data-id="svc-intro-title"] p span {
white-space: normal !important;
overflow-wrap: break-word !important;
word-wrap: break-word !important;
font-size: var(--fs-h3) !important;
line-height: 1.3 !important;
}
body.page-id-27 .elementor-element[data-id="svc-intro-title"],
body.page-id-27 [data-id*="svc-intro"] {
width: 100% !important;
max-width: 100% !important;
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ---------- 16. SAFETY NET: TEXTOS CON NOWRAP EN MOBILE ----------
Cualquier párrafo con white-space:nowrap en mobile rompe layout. */
@media (max-width: 767px) {
body p,
body .elementor-widget-text-editor p,
body .elementor-heading-title {
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
}
/* ---------- 17. CONTAINERS ELEMENTOR: PADDING CONSISTENTE MOBILE ---------- */
@media (max-width: 767px) {
body .e-con-boxed > .e-con-inner,
body .e-con-full {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ---------- 18. MIN-WIDTH BOTONES: RELAJAR EN MOBILE ----------
overrides.css fuerza min-width 220-360px en botones — overflow mobile. */
@media (max-width: 767px) {
body .elementor-button,
body button,
body a.elementor-button {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
word-wrap: break-word !important;
}
}
/* ============================================================
FIXES RONDA 2 — más finos, basados en auditoría posterior
============================================================ */
/* ---------- 19. HEADER hdr_right: gap y padding mobile ----------
Excede 12px en mobile 390 (rightEdge 402). Reducir gap y compactar. */
@media (max-width: 767px) {
.elementor-element[data-id="hdr_right"] {
gap: 4px !important;
padding-left: 4px !important;
padding-right: 4px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.elementor-element[data-id="hdr_right"] .elementor-button,
.elementor-element[data-id="hdr_right"] .elementor-widget-button .elementor-button {
padding: 6px 10px !important;
font-size: 13px !important;
min-width: 0 !important;
}
.elementor-element[data-id="hdr_right"] .elementor-icon-list-icon,
.elementor-element[data-id="hdr_right"] .elementor-widget-icon-list .elementor-icon-list-item {
font-size: 14px !important;
}
}
/* ---------- 20. TESTIMONIALES tablet/mobile (Accountants, Ayuda) ----------
El container padre `[data-id="581ginu8"]` (Accountants) y similares
contienen 3 widgets `.elementor-widget-testimonial` en flex row.
En tablet (≤1024px) y mobile, apilar verticalmente. */
@media (max-width: 1024px) {
/* Contenedores de testimoniales en Accountants y Ayuda */
body.page-id-69 .elementor-element[data-id="581ginu8"],
body.page-id-29 [data-id*="testimonial-row"],
body.page-id-69 [data-id*="testimonial-row"],
body.page-id-29 .elementor-element[data-id="581ginu8"] {
flex-direction: column !important;
flex-wrap: wrap !important;
}
/* Cada widget de testimonial individual debe ser full-width */
body.page-id-69 .elementor-widget-testimonial,
body.page-id-29 .elementor-widget-testimonial,
body.page-id-78 .elementor-widget-testimonial {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
margin-bottom: 16px !important;
}
/* Si hay grid testimonial, 1 col */
.elementor-widget-testimonial-carousel .elementor-grid,
[class*="testimonial"] .elementor-grid {
grid-template-columns: 1fr !important;
}
}
/* ---------- 21. HOME: SERVICES CARDS 3-col → 2-col en TABLET ----------
Las cards de servicios en Home se quedan en 3 columnas a 768px y la
tercera sale del viewport. Forzar 2-col tablet, 1-col mobile. */
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-13 [data-id="dny0xfaj"] ~ .elementor-element .elementor-image-box-wrapper,
body.page-id-13 .elementor-widget-image-box {
width: 48% !important;
max-width: 48% !important;
flex: 0 0 48% !important;
}
}
@media (max-width: 767px) {
body.page-id-13 .elementor-widget-image-box {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
margin-bottom: 16px !important;
}
}
/* ---------- 22. QS TIMELINE bg slide overflow ----------
`.qs-tl-slide-bg` 437px se sale del viewport 390 mobile. */
@media (max-width: 1024px) {
body.page-id-87 .qs-tl-slide-bg,
body.page-id-87 .qs-tl-slide-overlay {
width: 100% !important;
max-width: 100% !important;
object-fit: cover !important;
}
body.page-id-87 .qs-tl-track-wrap {
overflow: hidden !important;
}
}
/* ---------- 23. QS ICONS y DIFF-CIRCLE escalado tablet ----------
`.qs-value-icon` 54px y `.qs-diff-circle` 96px no escalan entre
mobile y tablet. Subir un poco en tablet. */
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-87 .qs-value-icon {
width: 72px !important;
height: 72px !important;
}
body.page-id-87 .qs-diff-circle {
width: 120px !important;
height: 120px !important;
}
body.page-id-87 .qs-diff-circle i,
body.page-id-87 .qs-diff-circle svg {
font-size: 46px !important;
}
}
/* ---------- 24. SECCIONES con padding excesivo en mobile ----------
Reducir padding lateral de secciones que comprimen contenido. */
@media (max-width: 767px) {
body .elementor-section,
body .elementor-container,
body .e-con > .e-con-inner {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ============================================================
FIXES RONDA 3 — basados en auditoría UI/UX profunda
============================================================ */
/* ---------- 25. MENU MOBILE DRAWER (specificity HIGH) ----------
El handler JS está en animations.js. Acá el CSS con html body
prefijo para batir Elementor inline + dropdown defaults. */
@media (max-width: 1024px) {
/* Ocultar nav horizontal de Elementor en mobile/tablet — specificity nuclear */
html body .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--main,
html body .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--main.elementor-nav-menu__container,
html body .elementor-element-hdr_nav nav.elementor-nav-menu--main,
html body .elementor-element[data-id="hdr_nav"] nav.elementor-nav-menu--main {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
/* Mostrar hamburger nativo de Elementor (si existe) */
html body .elementor-element-hdr_nav .elementor-menu-toggle {
display: inline-flex !important;
visibility: visible !important;
}
/* Y nuestro hamburger custom */
html body .ayc-hamburger {
display: inline-flex !important;
cursor: pointer !important;
}
/* Dropdown drawer. Specificity (0,6,3) para batir overrides.css que tiene
.elementor-5 .elementor-element.elementor-element-hdr_nav .elementor-nav-menu--dropdown.elementor-nav-menu__container con bg blanco !important. */
html body .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
html body .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--dropdown,
html body .elementor-element-hdr_nav nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
html body .elementor-element-hdr_nav nav.elementor-nav-menu--dropdown,
html body .elementor-element[data-id="hdr_nav"] nav.elementor-nav-menu--dropdown {
position: fixed !important;
top: 70px !important;
right: 0 !important;
left: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
background: #003366 !important;
background-color: #003366 !important;
z-index: 9998 !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
padding: 16px 0 !important;
margin: 0 !important;
max-height: calc(100vh - 70px) !important;
overflow-y: auto !important;
transform: translateY(-110%) !important;
transition: transform 0.3s ease !important;
display: block !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* OPEN state — mismo bump de specificity */
html body.ayc-menu-open .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
html body.ayc-menu-open .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--dropdown,
html body.ayc-menu-open .elementor-element-hdr_nav nav.elementor-nav-menu--dropdown.elementor-nav-menu__container,
html body.ayc-menu-open .elementor-element-hdr_nav nav.elementor-nav-menu--dropdown,
html body.ayc-menu-open .elementor-element[data-id="hdr_nav"] nav.elementor-nav-menu--dropdown {
transform: translateY(0) !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Items */
html body .elementor-element-hdr_nav .elementor-nav-menu--dropdown ul,
html body .elementor-element-hdr_nav .elementor-nav-menu--dropdown li {
list-style: none !important;
background: transparent !important;
}
html body .elementor-5 .elementor-element.elementor-element-hdr_nav .elementor-nav-menu--dropdown a.elementor-item,
html body .elementor-element-hdr_nav .elementor-nav-menu--dropdown a.elementor-item {
color: #ffffff !important;
background: transparent !important;
padding: 14px 24px !important;
font-size: var(--fs-base) !important;
border-bottom: 1px solid rgba(255,255,255,0.08) !important;
display: block !important;
}
html body .elementor-5 .elementor-element.elementor-element-hdr_nav .elementor-nav-menu--dropdown a.elementor-item:hover,
html body .elementor-5 .elementor-element.elementor-element-hdr_nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
html body .elementor-element-hdr_nav .elementor-nav-menu--dropdown a.elementor-item:hover,
html body .elementor-element-hdr_nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
background: rgba(255,255,255,0.05) !important;
color: #9dc41a !important;
}
html body .elementor-5 .elementor-element.elementor-element-hdr_nav .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item,
html body .elementor-element-hdr_nav .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
color: rgba(255,255,255,0.85) !important;
padding-left: 40px !important;
font-size: var(--fs-small) !important;
}
/* Overlay opcional cuando drawer abierto */
body.ayc-menu-open::before {
content: '' !important;
position: fixed !important;
inset: 70px 0 0 0 !important;
background: rgba(0,0,0,0.4) !important;
z-index: 9997 !important;
pointer-events: none !important;
}
}
/* ---------- 26. NUESTRA PROMESA (Home) — DESACTIVAR LAYOUT DESKTOP EN MOBILE/TABLET ----------
overrides.css aplica mask-image, width:485px, margin-left:-220px sin media query.
En mobile/tablet borra texto y saca el círculo del viewport. */
@media (max-width: 1024px) {
/* Stack vertical, sin mask, sin overlap */
body.page-id-13 .elementor-element[data-id="9ocgr3gm"] {
flex-direction: column !important;
gap: 24px !important;
align-items: center !important;
overflow: visible !important;
}
body.page-id-13 .elementor-element[data-id="uvqgyi4m"] {
-webkit-mask-image: none !important;
mask-image: none !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 32px 24px !important;
border-radius: 24px !important;
flex: 1 1 auto !important;
}
body.page-id-13 .elementor-element[data-id="ll6itevi"] {
flex: 0 0 auto !important;
width: 220px !important;
height: 220px !important;
margin: 0 auto !important;
border-radius: 50% !important;
overflow: hidden !important;
align-self: center !important;
}
/* Icon-list ytds4dmc no nowrap mobile */
body.page-id-13 .elementor-element[data-id="ytds4dmc"] .elementor-icon-list-items {
flex-direction: column !important;
flex-wrap: wrap !important;
}
body.page-id-13 .elementor-element[data-id="ytds4dmc"] .elementor-icon-list-item {
flex: 1 1 100% !important;
width: 100% !important;
}
}
/* ---------- 27. QS FILOSOFÍA — SELECTOR CORRECTO ----------
El HTML real usa .qs-philo-item con position:absolute y coords desktop.
Reescribir layout mobile/tablet a stack vertical. */
@media (max-width: 1024px) {
body.page-id-87 .qs-philo-graphic {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
padding: 16px !important;
position: relative !important;
}
body.page-id-87 .qs-philo-item {
position: static !important;
width: 100% !important;
height: auto !important;
transform: none !important;
left: auto !important;
top: auto !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
body.page-id-87 .qs-philo-circle {
flex: 0 0 56px !important;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.page-id-87 .qs-philo-circle span {
display: none !important; /* mover el texto al lado del círculo */
}
body.page-id-87 .qs-philo-circle i,
body.page-id-87 .qs-philo-circle svg {
font-size: 22px !important;
flex-shrink: 0 !important;
}
body.page-id-87 .qs-philo-item .qs-philo-text {
flex: 1 1 auto !important;
font-size: var(--fs-small) !important;
line-height: 1.4 !important;
text-align: left !important;
}
/* Inyectar el texto del span original como pseudo si no hay .qs-philo-text */
body.page-id-87 .qs-philo-item .qs-philo-circle + span,
body.page-id-87 .qs-philo-item > span {
flex: 1 1 auto !important;
font-size: var(--fs-small) !important;
line-height: 1.4 !important;
text-align: left !important;
display: block !important;
color: inherit !important;
white-space: normal !important;
}
body.page-id-87 .qs-philo-center,
body.page-id-87 .qs-philo-arc {
display: none !important;
}
}
/* ---------- 28. QS DIFF-BODY 31px width fix ----------
El grid contenedor colapsa los items a ~31px. Forzar wrap + 100% width. */
@media (max-width: 1024px) {
body.page-id-87 .qs-diff-grid,
body.page-id-87 [class*="diff-row"],
body.page-id-87 [data-id*="diff"] .e-con-inner {
flex-wrap: wrap !important;
flex-direction: column !important;
gap: 24px !important;
}
body.page-id-87 .qs-diff-item,
body.page-id-87 .qs-diff-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 1 1 100% !important;
}
body.page-id-87 .qs-diff-body {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
body.page-id-87 .qs-diff-body ul {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
}
body.page-id-87 .qs-diff-body ul li {
width: 100% !important;
}
}
/* ---------- 29. AYUDA CENTER — CONTRASTE HEADINGS ----------
Headings `ac-svc-title` y CTA "Da el primer paso..." aparecen blanco
sobre blanco. Forzar color navy. */
body.page-id-29 .elementor-element[data-id="ac-svc-title"] .elementor-heading-title,
body.page-id-29 .elementor-element[data-id="ac-final-cta-title"] .elementor-heading-title,
body.page-id-29 .ayc-section-title,
body.page-id-29 h2.elementor-heading-title {
color: #003366 !important;
}
/* Excepción: si el heading está sobre fondo navy, mantener blanco */
body.page-id-29 [class*="bg-navy"] h2.elementor-heading-title,
body.page-id-29 [class*="dark-bg"] h2.elementor-heading-title {
color: #ffffff !important;
}
/* ---------- 30. ADVISORS — CHECK ITEMS 2-COL MOBILE ----------
`.ayc-checklist-grid` mantiene grid 4-col en mobile → items 16-27px. */
@media (max-width: 480px) {
body.page-id-78 .ayc-checklist-grid,
body.page-id-78 [class*="checklist-grid"],
body.page-id-78 [class*="check-grid"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
}
@media (min-width: 481px) and (max-width: 767px) {
body.page-id-78 .ayc-checklist-grid,
body.page-id-78 [class*="checklist-grid"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
}
@media (max-width: 767px) {
body.page-id-78 .ayc-check-item {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
justify-self: stretch !important;
word-break: normal !important;
overflow-wrap: break-word !important;
box-sizing: border-box !important;
}
}
/* ---------- 31. ADVISORS — HEADING 46px reducir mobile ----------
"Qué hacemos en AYC Advisors" 46px solapa primera card 87px. */
@media (max-width: 767px) {
body.page-id-78 h2.elementor-heading-title,
body.page-id-78 [class*="adv-svc-title"] .elementor-heading-title {
font-size: clamp(26px, 7vw, 32px) !important;
line-height: 1.2 !important;
margin-bottom: 24px !important;
}
}
/* ---------- 32. ADVISORS — DISCLAIMER FULL-WIDTH MOBILE ----------
Está dentro de columna lateral de 154px. Sacarlo grid-column 1/-1. */
@media (max-width: 1024px) {
body.page-id-78 .elementor-element[data-id="advhc46abe"] {
grid-column: 1 / -1 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ---------- 33. TESTIMONIALES — sin overrides cuando están en carrusel ----------
Solo aplica width:100% a testimoniales que NO están dentro de .ayc-carousel-track.
El carrusel JS controla las dimensiones de las cards adentro. */
@media (max-width: 1024px) {
body.page-id-78 .elementor-widget-testimonial:not(.ayc-carousel-track *),
body.page-id-29 .elementor-widget-testimonial:not(.ayc-carousel-track *),
body.page-id-69 .elementor-widget-testimonial:not(.ayc-carousel-track *),
body.page-id-13 .elementor-widget-testimonial:not(.ayc-carousel-track *) {
position: static !important;
max-width: 100% !important;
transform: none !important;
margin-bottom: 16px !important;
}
/* Para los que SÍ están en carousel, dejar que JS controle width */
body .ayc-carousel-track .elementor-widget-testimonial {
transform: none !important;
/* width set inline by JS — no override */
}
}
/* ---------- 34. AYUDA CENTER — CARDS WRAP POR LETRA ----------
Contenedor inner card colapsado a 80px. Forzar width 100% + word-break. */
@media (max-width: 767px) {
body.page-id-29 .ayc-service-card,
body.page-id-29 .ayc-card-text,
body.page-id-29 [class*="card-text"],
body.page-id-29 [class*="card-body"],
body.page-id-29 .elementor-widget-icon-box {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.page-id-29 .ayc-card-text,
body.page-id-29 [class*="card-text"] p,
body.page-id-29 [class*="card-body"] p {
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
}
/* ---------- 35. AYUDA — CARDS 2-COL TABLET ----------
En 768-1024 las cards quedan 1-col. Pasarlas a 2-col. */
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-29 .ayc-svc-grid,
body.page-id-29 [data-id*="svc-grid"] .e-con-inner,
body.page-id-29 [data-id*="svc-cards"] .e-con-inner {
grid-template-columns: repeat(2, 1fr) !important;
flex-wrap: wrap !important;
gap: 16px !important;
}
body.page-id-29 .ayc-service-card {
width: calc(50% - 8px) !important;
flex: 0 0 calc(50% - 8px) !important;
}
}
/* ---------- 36. AYUDA — "POR QUÉ ELEGIRNOS" COLUMNA DERECHA CONTRASTE ----------
Aparece gris fantasma. Forzar color body dark. */
body.page-id-29 [class*="por-que"] *,
body.page-id-29 [data-id*="why-us"] *,
body.page-id-29 [class*="elegir"] .elementor-icon-box-content * {
color: #212121 !important;
}
/* ---------- 37. AYUDA — HERO OVERFLOW MOBILE ----------
Subtítulo + disclaimer + botón cortados a la derecha. */
@media (max-width: 767px) {
body.page-id-29 [class*="hero"] *,
body.page-id-29 [data-id*="hero"] * {
max-width: 100% !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
body.page-id-29 [data-id*="hero"] {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ---------- 38. HOME STATS — fix CRÍTICO ----------
qh0b8rle (container row) tiene 5 image-box widgets en flex-row a 281px
→ cada widget 48px → texto rompe letra por línea (años/exper/ienci/a).
Forzar grid 2-col mobile, 5-col single-line tablet. */
@media (max-width: 767px) {
body.page-id-13 .elementor-element[data-id="qh0b8rle"],
body.page-id-13 .elementor-element[data-id="qh0b8rle"] > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px 12px !important;
flex-direction: unset !important;
flex-wrap: unset !important;
width: 100% !important;
max-width: 100% !important;
justify-content: center !important;
align-items: start !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] > .elementor-widget,
body.page-id-13 .elementor-element[data-id="qh0b8rle"] > .elementor-element.elementor-widget-image-box,
body.page-id-13 .elementor-element[data-id="qh0b8rle"] > .elementor-element {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: unset !important;
/* CRÍTICO: Elementor compila padding 32px 32px en cada widget,
que en mobile deja solo 54px de contenido. Reducir a 8px. */
padding-left: 8px !important;
padding-right: 8px !important;
border-left: none !important;
border-right: none !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-wrapper {
width: 100% !important;
min-width: 100% !important; /* width:100% no resolvía (intrinsic sizing); min-width fuerza expansión */
box-sizing: border-box !important;
align-items: stretch !important;
text-align: center !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-content {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
text-align: center !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-img {
margin: 0 auto 8px !important;
}
/* Número grande, prominente — no wrap (mantiene "9.920", "2.089" en una línea) */
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-title,
body.page-id-13 .elementor-element[data-id="qh0b8rle"] h3.elementor-image-box-title {
font-size: 32px !important;
line-height: 1.1 !important;
margin: 8px 0 4px !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
white-space: nowrap !important;
overflow: visible !important;
display: block !important;
}
/* También el content wrapper que estaba en 54px */
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-content {
width: 100% !important;
align-self: stretch !important;
flex: 1 1 auto !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-wrapper {
width: 100% !important;
align-self: stretch !important;
}
/* Label completo, sin breaks de letra */
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-description {
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
font-size: var(--fs-small) !important;
line-height: 1.35 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* El quinto stat (impar) ocupa fila completa, centrado */
body.page-id-13 .elementor-element[data-id="qh0b8rle"] > .elementor-widget:nth-child(5):last-child {
grid-column: 1 / -1 !important;
justify-self: center !important;
max-width: 50% !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-13 .elementor-element[data-id="qh0b8rle"] {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 16px !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] > .elementor-widget {
flex: 0 0 calc(33.333% - 16px) !important;
max-width: calc(33.333% - 16px) !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-title {
font-size: 40px !important;
}
body.page-id-13 .elementor-element[data-id="qh0b8rle"] .elementor-image-box-description {
font-size: var(--fs-base) !important;
word-break: normal !important;
}
}
/* ============================================================
POLISH UI/UX GLOBAL — RONDA 5
Mejoras visuales transversales para mobile/tablet en todas las páginas.
============================================================ */
/* ---------- 43. SPACING ENTRE SECCIONES — más compacto mobile ----------
Secciones desktop tienen padding 80-100px. En mobile compactar para
reducir scroll innecesario y mantener flujo limpio. */
@media (max-width: 767px) {
body .elementor-section.elementor-section-boxed > .elementor-container,
body .elementor-section > .e-con-inner,
body .e-con.e-parent {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Hero excepción: más altura para impacto */
body [class*="hero-sec"],
body [data-id*="hero"] {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body .e-con.e-parent {
padding-top: 56px !important;
padding-bottom: 56px !important;
}
}
/* ---------- 44. HERO OVERLAY — mejorar contraste texto sobre imagen ----------
Heroes con imagen de fondo tienen H1 blanco que pierde contraste.
Añadir gradient overlay oscuro semi-transparente. */
@media (max-width: 1024px) {
body [class*="hero-sec"]::before,
body [data-id*="hero-sec"]::before {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, rgba(0,15,40,0.35) 0%, rgba(0,15,40,0.65) 100%) !important;
z-index: 0 !important;
pointer-events: none !important;
}
body [class*="hero-sec"] > *,
body [data-id*="hero-sec"] > * {
position: relative !important;
z-index: 1 !important;
}
}
/* ---------- 45. CARDS — consistencia visual mobile ----------
Aplicar border-radius, padding y shadow consistente a cards comunes. */
@media (max-width: 1024px) {
body .ayc-service-card,
body .ayc-card,
body [class*="-card"]:not([class*="testimonial-card"]),
body [data-id^="acc-p"],
body [data-id^="ac-w"],
body [data-id^="adv-w"],
body [data-id^="ac-qi"] {
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
padding: 20px !important;
margin-bottom: 16px !important;
box-sizing: border-box !important;
}
}
/* ---------- 46. HEADINGS — jerarquía visual clara mobile ----------
Top margin generoso para separar de la sección previa. */
@media (max-width: 767px) {
body h2.elementor-heading-title,
body h3.elementor-heading-title {
margin-top: 0 !important;
margin-bottom: 20px !important;
}
/* Sección heading: centrar y dar respiro */
body .elementor-widget-heading {
text-align: center !important;
margin-bottom: 16px !important;
}
}
/* ---------- 47. BOTONES — touch-friendly mobile ----------
Mínimo 44x44 para tap targets. */
@media (max-width: 767px) {
body .elementor-button,
body a.elementor-button,
body button.elementor-button,
body .ayc-btn-primary,
body .ayc-btn-outline-navy {
min-height: 44px !important;
padding: 12px 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: var(--fs-btn) !important;
border-radius: 8px !important;
}
}
/* ---------- 48. IMÁGENES RESPONSIVE — sin distorsión ----------
Forzar object-fit cover y altura natural en mobile. */
@media (max-width: 1024px) {
body .elementor-widget-image img,
body .elementor-image-box-img img {
max-width: 100% !important;
height: auto !important;
object-fit: cover !important;
border-radius: 8px !important;
}
}
/* ---------- 49. FORMS / INPUTS — touch-friendly mobile ---------- */
@media (max-width: 767px) {
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body select,
body textarea {
min-height: 44px !important;
font-size: 16px !important; /* prevent zoom on iOS */
padding: 10px 14px !important;
border-radius: 8px !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ---------- 50. DIVIDERS / SEPARADORES — visibilidad mobile ---------- */
@media (max-width: 1024px) {
body .elementor-divider-separator {
width: 60px !important;
max-width: 60px !important;
height: 4px !important;
background-color: #9dc41a !important;
border-radius: 2px !important;
margin: 0 auto !important;
}
}
/* ---------- 51. ICON LISTS — espaciado mobile ---------- */
@media (max-width: 767px) {
body .elementor-icon-list-items {
gap: 12px !important;
}
body .elementor-icon-list-item {
padding: 4px 0 !important;
}
}
/* ---------- 52. SECTION BACKGROUNDS — fix transitions ----------
Asegurar que alternancia blanco/navy se vea limpia mobile. */
@media (max-width: 767px) {
body section + section,
body .e-con + .e-con {
margin-top: 0 !important;
}
}
/* ---------- 53c. AYUDA: Cards services + CTA button mobile ----------
Cards anidadas con padding acumulado (263→231→191→151). Reducir padding
en cada nivel y forzar button full-width. */
@media (max-width: 1024px) {
/* Reducir padding interno de cards de servicios */
body.page-id-29 [data-id*="ac-card"],
body.page-id-29 .ayc-service-card,
body.page-id-29 .ayc-ac-card {
padding: 8px !important;
}
body.page-id-29 .ayc-card-body {
padding: 12px 8px !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.page-id-29 .ayc-card-body > div {
width: 100% !important;
}
/* Button CTA full width dentro de cards */
body .ayc-card-cta-btn,
body a.ayc-card-cta-btn,
body.page-id-29 a.ayc-card-cta-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
padding: 12px 16px !important;
text-align: center !important;
box-sizing: border-box !important;
white-space: normal !important;
font-size: 14px !important;
line-height: 1.3 !important;
min-height: 44px !important;
}
}
/* ---------- 53b. FAQ — padding y layout mobile ---------- */
@media (max-width: 1024px) {
body.page-id-90 [data-id="faq-list-inner"],
body.page-id-90 [data-id="faq-list-inner"] > .e-con-inner {
padding-left: 16px !important;
padding-right: 16px !important;
}
body.page-id-90 [data-id="faq-list-sec"] {
padding: 40px 16px !important;
}
/* FAQ groups stack vertical full-width */
body.page-id-90 [data-id*="faq-grp"] {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 24px !important;
}
body.page-id-90 [data-id*="faq-grp"] > .e-con-inner {
padding-left: 12px !important;
padding-right: 12px !important;
}
body.page-id-90 .faq-list {
width: 100% !important;
}
body.page-id-90 .faq-item {
width: 100% !important;
min-width: 0 !important;
}
body.page-id-90 .faq-q,
body.page-id-90 .faq-a {
width: 100% !important;
word-break: normal !important;
}
/* FAQ heading "FAQs Generales" no debe romper */
body.page-id-90 [data-id*="faq-grp"] .elementor-heading-title {
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
}
/* ---------- 53. TESTIMONIALES — visual polish mobile ---------- */
@media (max-width: 1024px) {
body .elementor-testimonial-wrapper,
body .elementor-testimonial {
padding: 24px 20px !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
margin-bottom: 16px !important;
}
body .elementor-testimonial-content {
font-style: italic !important;
margin-bottom: 16px !important;
}
body .elementor-testimonial-image-position-aside {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
}
/* ---------- 42. H1 HERO TAMAÑO MOBILE ----------
Páginas tienen H1 a 50-60px que rompe ("AYC / Advis / ors").
Reducir mobile + asegurar wrap natural. */
@media (max-width: 767px) {
body h1,
body h1.elementor-heading-title,
body .elementor-widget-heading h1.elementor-heading-title {
font-size: clamp(28px, 8vw, 38px) !important;
line-height: 1.15 !important;
word-wrap: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
}
/* ---------- 41b. EXCLUSIÓN: widgets DENTRO de carrusel respetan JS inline ----------
Las cards dentro de .ayc-carousel-track tienen width inline set por JS.
NO sobrescribir esos widths con 100%. */
@media (max-width: 1024px) {
body .ayc-carousel-track > .elementor-widget,
body .ayc-carousel-track .elementor-widget-testimonial {
width: auto !important;
min-width: 0 !important;
/* width inline applied by JS — respect it */
}
}
/* ---------- 41. GLOBAL: widgets con flex-basis fija en post-N.css ----------
Elementor compila flex 0 0 calc(33% - X) en widgets para layouts desktop.
En mobile rompen (cards a 83px con texto que explota verticalmente).
Forzar todos los .elementor-element directos hijos de containers e-flex
a 100% en mobile, EXCEPTO los del header (page-id global). */
@media (max-width: 767px) {
/* Hijos directos de containers flex/grid de Elementor, dentro de páginas
de contenido (no header/footer chrome) */
body.page-id-13 .e-con-full > .elementor-element.elementor-widget,
body.page-id-13 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-69 .e-con-full > .elementor-element.elementor-widget,
body.page-id-69 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-78 .e-con-full > .elementor-element.elementor-widget,
body.page-id-78 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-87 .e-con-full > .elementor-element.elementor-widget,
body.page-id-87 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-29 .e-con-full > .elementor-element.elementor-widget,
body.page-id-29 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-27 .e-con-full > .elementor-element.elementor-widget,
body.page-id-27 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-90 .e-con-full > .elementor-element.elementor-widget,
body.page-id-90 .e-con-boxed > .elementor-element.elementor-widget,
body.page-id-86 .e-con-full > .elementor-element.elementor-widget,
body.page-id-86 .e-con-boxed > .elementor-element.elementor-widget {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
/* También hijos directos de .e-con-inner */
body.page-id-13 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-69 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-78 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-87 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-29 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-27 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-90 .e-con-inner > .elementor-element.elementor-widget,
body.page-id-86 .e-con-inner > .elementor-element.elementor-widget {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 auto !important;
}
/* Containers padres: forzar flex column en mobile para que el stack vertical
funcione correctamente con los hijos full-width */
body.page-id-13 .e-con.e-flex,
body.page-id-69 .e-con.e-flex,
body.page-id-78 .e-con.e-flex,
body.page-id-87 .e-con.e-flex,
body.page-id-29 .e-con.e-flex,
body.page-id-27 .e-con.e-flex,
body.page-id-90 .e-con.e-flex,
body.page-id-86 .e-con.e-flex {
flex-wrap: wrap !important;
}
/* También .e-con (containers anidados, como hero columns) deben ser
full-width en mobile para que el stack vertical funcione. */
body.page-id-13 .e-con-full > .e-con,
body.page-id-13 .e-con-boxed > .e-con,
body.page-id-69 .e-con-full > .e-con,
body.page-id-69 .e-con-boxed > .e-con,
body.page-id-78 .e-con-full > .e-con,
body.page-id-78 .e-con-boxed > .e-con,
body.page-id-87 .e-con-full > .e-con,
body.page-id-87 .e-con-boxed > .e-con,
body.page-id-29 .e-con-full > .e-con,
body.page-id-29 .e-con-boxed > .e-con,
body.page-id-27 .e-con-full > .e-con,
body.page-id-27 .e-con-boxed > .e-con,
body.page-id-90 .e-con-full > .e-con,
body.page-id-90 .e-con-boxed > .e-con,
body.page-id-86 .e-con-full > .e-con,
body.page-id-86 .e-con-boxed > .e-con {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
flex: 0 0 100% !important;
}
}
/* ---------- 40. AYUDA CENTER GRIDS: forzar 1-col mobile ----------
ac-why-grid tiene grid-template-columns "40px 380px 40px" (custom desktop
layout) que en mobile aplasta cards a 40px y las hace explotar verticalmente
(3293px de alto). Misma patología en ac-proc-grid. */
@media (max-width: 767px) {
body.page-id-29 [data-id="ac-why-grid"] > .e-con-inner,
body.page-id-29 [data-id="ac-proc-grid"] > .e-con-inner,
body.page-id-29 [data-id="ac-que-grid"] > .e-con-inner,
body.page-id-29 [data-id="ac-card-a-wrap"] > .e-con-inner,
body.page-id-29 [data-id*="-grid"] > .e-con-inner,
body.page-id-29 [data-id*="-wrap"] > .e-con-inner {
display: flex !important;
flex-direction: column !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
width: 100% !important;
}
/* Targeting específico: widgets que en mobile reciben flex-basis < 100%
desde post-29.css. Forzarlos a 100% width sin tocar otros. */
body.page-id-29 [data-id^="ac-qi"],
body.page-id-29 [data-id^="ac-w"]:not([data-id="ac-why-grid"]):not([data-id="ac-why-sec"]),
body.page-id-29 [data-id^="ac-p"]:not([data-id="ac-proc-sec"]):not([data-id="ac-proc-grid"]),
body.page-id-29 [data-id^="ac-card"]:not([data-id="ac-card-a-wrap"]),
body.page-id-29 [data-id^="ac-svc-card"],
body.page-id-29 [data-id^="ac-srv"],
body.page-id-29 .ayc-service-card,
body.page-id-29 [data-id="ac-why-grid"] > .e-con-inner > .elementor-element,
body.page-id-29 [data-id="ac-proc-grid"] > .e-con-inner > .elementor-element,
body.page-id-29 [data-id="ac-que-grid"] > .e-con-inner > .elementor-element {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
}
/* ---------- 39. SAFETY-NET GENÉRICO — image-box widgets ----------
Elementor compila padding 32px 32px en cada image-box widget en post-N.css.
En mobile, eso deja solo ~54px de contenido en un grid 2-col → texto
se rompe letra por línea. Reducir padding y forzar word-break normal. */
@media (max-width: 767px) {
body .elementor-widget-image-box,
body .elementor-widget-icon-box {
padding-left: 8px !important;
padding-right: 8px !important;
}
body .elementor-widget-image-box .elementor-image-box-wrapper,
body .elementor-widget-icon-box .elementor-icon-box-wrapper {
min-width: 100% !important;
align-items: stretch !important;
}
body .elementor-widget-image-box .elementor-image-box-content,
body .elementor-widget-image-box .elementor-image-box-description,
body .elementor-widget-icon-box .elementor-icon-box-content,
body .elementor-widget-icon-box .elementor-icon-box-description {
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
white-space: normal !important;
}
/* Number / title del image-box: no wrap (mantiene "9.866", "2.082" enteros) */
body .ayc-counter-animated,
body .elementor-widget-image-box h3.elementor-image-box-title {
white-space: nowrap !important;
overflow: visible !important;
}
}
/* ============================================================
PLAN MAESTRO RESPONSIVE — FASE 1 (§54-58) FIXES GLOBALES
============================================================ */
/* ---------- 54. TIPOGRAFÍA MOBILE — clamp + word-break ---------- */
@media (max-width: 767px) {
body h1,
body h1.elementor-heading-title {
font-size: clamp(26px, 8vw, 38px) !important;
line-height: 1.15 !important;
}
body h2,
body h2.elementor-heading-title {
font-size: clamp(24px, 7vw, 32px) !important;
line-height: 1.2 !important;
}
body h3,
body h3.elementor-heading-title {
font-size: clamp(20px, 5.5vw, 26px) !important;
line-height: 1.3 !important;
}
body h1,
body h2,
body h3,
body p,
body div,
body span {
word-break: keep-all !important;
overflow-wrap: break-word !important;
hyphens: none !important;
-webkit-hyphens: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body h1,
body h1.elementor-heading-title {
font-size: clamp(32px, 6vw, 48px) !important;
}
body h2,
body h2.elementor-heading-title {
font-size: clamp(28px, 5vw, 40px) !important;
}
}
/* ---------- 55. RESET PADDINGS containers Elementor mobile ----------
EXCEPCIÓN: header (hdr_*), footer (ftr_*), .ayc-carousel-track NO se tocan. */
@media (max-width: 767px) {
body .e-con-boxed:not([class*="hdr_"]):not([class*="ftr_"]):not(.ayc-carousel-track):not(.ayc-carousel-track *),
body .elementor-section-boxed:not([class*="hdr_"]):not([class*="ftr_"]) > .elementor-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
body .e-con-boxed:not([class*="hdr_"]):not([class*="ftr_"]) > .e-con-inner,
body .e-con-full:not([class*="hdr_"]):not([class*="ftr_"]) > .e-con-inner {
padding-left: 8px !important;
padding-right: 8px !important;
}
body .elementor-element:not([class*="hdr_"]):not([class*="ftr_"]):not(.ayc-carousel-track):not(.ayc-carousel-track *) {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ---------- 56. TOUCH TARGETS — área tap invisible, dot visual desktop ----------
DESKTOP: dots mantienen su tamaño visual original (20×20 team, 11-14 tl).
MOBILE/TABLET: agregamos área tap invisible vía padding negativo en pseudo ::after,
sin tocar dimensiones visuales ni colores del dot. */
@media (max-width: 1024px) {
/* Hamburger sí necesita 44px (es solo botón) */
body .ayc-hamburger,
body .elementor-element-hdr_nav .elementor-menu-toggle {
min-width: 44px !important;
min-height: 44px !important;
padding: 8px !important;
}
/* Dots: NO tocar w/h. Solo agregar pseudo ::after para extender tap area */
body .qs-tl-dot,
body .qs-team-dot,
body .ayc-carousel-dot,
body .ayc-svc-dot,
body .swiper-pagination-bullet {
position: relative !important;
}
body .qs-tl-dot::after,
body .qs-team-dot::after,
body .ayc-carousel-dot::after,
body .ayc-svc-dot::after,
body .swiper-pagination-bullet::after {
content: '' !important;
position: absolute !important;
inset: -12px !important;
background: transparent !important;
/* invisible tap target, doesn't affect layout */
}
}
/* ---------- 57. CONTRASTE BOTONES VERDE — DEPRECADO ----------
ANTES: forzaba `color:#003366` (navy) a todos los .elementor-button
sin distincion de bg, lo que pisaba la intencion de diseno blanca
definida en overrides.css y postX.css (Elementor) sobre #9dc41a.
ELIMINADO en favor de la cascada natural Elementor → overrides.css
(donde cada widget declara su color por data-id). Mobile hereda
desktop 1:1. Si algun botón aparece con contraste insuficiente,
abordarlo via override por data-id en overrides.css o §91 mas abajo. */
/* (regla intencionalmente vacia para preservar numeracion historica) */
/* ---------- 58. ELIMINAR max-width:390 global (enmascara overflow real) ---------- */
html, body {
max-width: 100% !important;
overflow-x: hidden !important;
}
/* ============================================================
PLAN MAESTRO RESPONSIVE — FASE 2 (§59-63) FIXES POR PÁGINA
============================================================ */
/* ---------- 59. HOME — header inline + stats simétricos ---------- */
@media (max-width: 767px) {
body.home .elementor-element-hdr_sec1 > .e-con-inner,
body.home [data-id="hdr_sec1"] > .e-con-inner {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
padding: 8px 12px !important;
}
body.home [data-id="qh0b8rle"],
body.home [data-id="qh0b8rle"] > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body.home [data-id="qh0b8rle"],
body.home [data-id="qh0b8rle"] > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
}
/* ---------- 60. QS — filosofía spans + diff grid + stats 5 items ---------- */
@media (max-width: 1024px) {
body.page-id-87 .qs-philo-circle span {
width: auto !important;
height: auto !important;
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
font-size: var(--fs-small, 14px) !important;
}
}
@media (max-width: 767px) {
body.page-id-87 [data-id="qs-diff-row"] > .e-con-inner {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* Stats QS: 5 items en mobile = 2 cols, 5to ocupa fila completa */
body.page-id-87 [data-id*="qs-stats"] > .e-con-inner,
body.page-id-87 .qs-stats-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
body.page-id-87 [data-id*="qs-stats"] > .e-con-inner > *:nth-child(5),
body.page-id-87 .qs-stats-grid > *:nth-child(5) {
grid-column: 1 / -1 !important;
justify-self: center !important;
max-width: 50% !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
body.page-id-87 [data-id="qs-diff-row"] > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
}
body.page-id-87 [data-id*="qs-stats"] > .e-con-inner,
body.page-id-87 .qs-stats-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
}
body.page-id-87 [data-id*="qs-stats"] > .e-con-inner > *:nth-child(4),
body.page-id-87 [data-id*="qs-stats"] > .e-con-inner > *:nth-child(5),
body.page-id-87 .qs-stats-grid > *:nth-child(4),
body.page-id-87 .qs-stats-grid > *:nth-child(5) {
grid-column: span 1 !important;
}
/* 5to centrado: ocupa col 2 (centro) en fila 2 */
body.page-id-87 [data-id*="qs-stats"] > .e-con-inner > *:nth-child(5),
body.page-id-87 .qs-stats-grid > *:nth-child(5) {
grid-column-start: 2 !important;
}
}
/* ---------- 61. ACCOUNTANTS — "por qué elegir" 1-col + ocultar testimonios duplicados ---------- */
@media (max-width: 1024px) {
body.page-id-69 [data-id*="why"] > .e-con-inner {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 20px !important;
width: 100% !important;
}
body.page-id-69 [data-id*="why"] .elementor-icon-box-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
}
/* Ocultar testimoniales individuales que NO están dentro de carrusel */
body.page-id-69 .elementor-widget-testimonial {
display: none !important;
}
body.page-id-69 .ayc-carousel-track .elementor-widget-testimonial,
body.page-id-69 .ayc-carousel-track .elementor-widget-testimonial * {
display: block !important;
}
}
/* ---------- 62. ADVISORS — advw-grid vertical + botón hero font-size ---------- */
@media (max-width: 1024px) {
body.page-id-78 [class*="advw-grid"] > .e-con-inner,
body.page-id-78 [class*="advw-grid"] {
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
align-items: stretch !important;
}
body.page-id-78 [class*="advw-grid"] .elementor-icon-box-wrapper {
position: static !important;
left: 0 !important;
top: 0 !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
@media (max-width: 767px) {
body.page-id-78 [data-id="adv-hero-sec"] a.elementor-button,
body.page-id-78 [data-id="adv-hero-sec"] .elementor-button {
font-size: 15px !important;
line-height: 1.3 !important;
white-space: normal !important;
}
}
/* ---------- 63. AYUDA — cards chrome + CTA full-width ---------- */
@media (max-width: 1024px) {
body.page-id-29 [data-id*="ac-que-grid"] .elementor-icon-box-wrapper,
body.page-id-29 [data-id*="ac-why-grid"] .elementor-icon-box-wrapper,
body.page-id-29 [data-id^="ac-w"],
body.page-id-29 [data-id^="ac-qi"] {
background: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
padding: 20px 16px !important;
margin-bottom: 16px !important;
}
/* CTA "Da el primer paso" 95px constraint — forzar 100% */
body.page-id-29 [data-id="ac-cta-sec"],
body.page-id-29 [data-id="ac-cta-sec"] > .e-con-inner,
body.page-id-29 [data-id="ac-cta-sec"] > *,
body.page-id-29 [data-id="ac-cta-sec"] > .e-con-inner > * {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.page-id-29 [data-id="ac-cta-sec"] h2,
body.page-id-29 [data-id="ac-cta-sec"] .elementor-heading-title {
width: 100% !important;
max-width: 100% !important;
}
}
/* ============================================================
PLAN MAESTRO RESPONSIVE — FASE 3 (§64) CARRUSELES Y DINÁMICOS
============================================================ */
/* ---------- 64. SERVICIOS cards visibles + FAQ accordion + Ayuda carousel ---------- */
@media (max-width: 1024px) {
/* Servicios: cards de áreas (Ayuda, Accountants, Advisors) deben verse */
body.page-id-27 .ayc-card-image {
min-height: 200px !important;
background-size: cover !important;
background-position: center !important;
display: block !important;
width: 100% !important;
}
body.page-id-27 .ayc-service-card,
body.page-id-27 [id="advisors"],
body.page-id-27 [id="ayuda"],
body.page-id-27 [id="accountants"] {
min-height: 280px !important;
display: block !important;
margin-bottom: 24px !important;
width: 100% !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* FAQ pseudo-accordion */
@media (max-width: 1024px) {
body.page-id-90 .faq-a {
max-height: 0 !important;
overflow: hidden !important;
transition: max-height 0.3s ease !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-id-90 .faq-item.is-open .faq-a {
max-height: 800px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
body.page-id-90 .faq-q {
cursor: pointer !important;
padding-right: 32px !important;
position: relative !important;
user-select: none !important;
}
body.page-id-90 .faq-q::after {
content: '+' !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 20px !important;
line-height: 1 !important;
font-weight: 700 !important;
}
body.page-id-90 .faq-item.is-open .faq-q::after {
content: '−' !important;
}
}
/* Ayuda: services carousel — esconde slides por defecto, JS las activa */
@media (max-width: 1024px) {
body.page-id-29 [data-id^="ac-card-"][data-id$="-wrap"] {
display: none;
}
body.page-id-29 [data-id^="ac-card-"][data-id$="-wrap"].ayc-svc-active {
display: flex !important;
}
body.page-id-29 .ayc-svc-dot.active {
background-color: #003366 !important;
transform: scale(1.15) !important;
}
}
/* ============================================================
PLAN MAESTRO RESPONSIVE — FASE 4 (§65-§79) NUCLEAR SPECIFICITY
Re-fixes para reglas que perdieron specificity vs Elementor
============================================================ */
/* ---------- §65. HOME header — forzar hamburger y ocultar nav main ---------- */
@media (max-width: 1024px) {
html body .elementor-5 .elementor-element.elementor-element-hdr_nav nav.elementor-nav-menu--main,
html body .elementor-element-hdr_nav nav.elementor-nav-menu--main,
html body .elementor-element-hdr_nav .elementor-nav-menu__container.elementor-nav-menu--main {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
max-height: 0 !important;
overflow: hidden !important;
}
html body .elementor-5 .elementor-element.elementor-element-hdr_nav .elementor-menu-toggle,
html body .ayc-hamburger {
display: inline-flex !important;
width: 44px !important;
height: 44px !important;
visibility: visible !important;
}
html body.home .elementor-element.elementor-element-hdr_sec1 > .e-con-inner,
html body .elementor-element.elementor-element-hdr_sec1 > .e-con-inner {
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
padding: 8px 16px !important;
min-height: 60px !important;
}
}
/* ---------- §66. HOME H2 "Promesa" clamp en mobile ---------- */
@media (max-width: 767px) {
html body.home .elementor-13 .elementor-element[data-id="ef72b413"] h2.elementor-heading-title,
html body .elementor-13 [data-id="ef72b413"] h2,
html body [data-id="ef72b413"] h2 {
font-size: 28px !important;
line-height: 1.2 !important;
word-break: keep-all !important;
hyphens: none !important;
}
}
/* ---------- §67. HOME stats grid 2-col mobile / 3-col tablet ---------- */
@media (max-width: 767px) {
html body.home .elementor-13 .elementor-element[data-id="qh0b8rle"],
html body [data-id="qh0b8rle"],
html body .elementor-element[data-id="qh0b8rle"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
flex-direction: unset !important;
flex-wrap: unset !important;
gap: 16px !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body [data-id="qh0b8rle"] {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
flex-direction: unset !important;
gap: 16px !important;
}
}
/* ---------- §68. QS stats 5 items — grid 2-col mobile / 3-col tablet ---------- */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-stats-row"],
html body.page-id-87 .elementor-element[data-id="qs-stats-row"],
html body.page-id-87 [data-id="qs-stats-inner"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
flex-direction: unset !important;
flex-wrap: unset !important;
gap: 16px !important;
}
html body.page-id-87 [data-id="qs-stats-row"] > *:nth-child(5),
html body.page-id-87 [data-id="qs-stats-inner"] > *:nth-child(5),
html body.page-id-87 [data-id="qs-stat-5"] {
grid-column: 1 / -1 !important;
max-width: 50% !important;
justify-self: center !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-87 [data-id="qs-stats-row"],
html body.page-id-87 [data-id="qs-stats-inner"] {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
flex-direction: unset !important;
gap: 16px !important;
}
html body.page-id-87 [data-id="qs-stats-row"] > *:nth-child(5),
html body.page-id-87 [data-id="qs-stats-inner"] > *:nth-child(5),
html body.page-id-87 [data-id="qs-stat-5"] {
grid-column-start: 2 !important;
}
}
/* ---------- §69. QS "Qué nos hace diferentes" tablet 2-col ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-87 [data-id="qs-diff-row"],
html body.page-id-87 [data-id="qs-diff-inner"],
html body.page-id-87 [data-id="qs-diff-row"] > .e-con-inner,
html body.page-id-87 .elementor-element[data-id="qs-diff-row"] > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
flex-direction: unset !important;
gap: 24px !important;
}
}
/* ---------- §70. ACCOUNTANTS H1 hero — 34px mobile / 42px tablet ---------- */
@media (max-width: 767px) {
html body.page-id-69 h1.elementor-heading-title,
html body.page-id-69 .elementor-69 h1,
html body.page-id-69 [data-id="ac-hero-h1"] h1,
html body.page-id-69 [data-id="acc-hero-sec"] h1,
html body.page-id-69 [data-id*="hero"] h1 {
font-size: 34px !important;
line-height: 1.15 !important;
word-break: keep-all !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-69 h1.elementor-heading-title,
html body.page-id-69 [data-id="acc-hero-sec"] h1 {
font-size: 42px !important;
}
}
/* ---------- §71. ACCOUNTANTS testimoniales — solo los del carousel ---------- */
@media (max-width: 1024px) {
html body.page-id-69 .elementor-widget-testimonial {
display: none !important;
}
html body.page-id-69 .ayc-carousel-track .elementor-widget-testimonial,
html body.page-id-69 [data-id="acc-test-sec"] .ayc-carousel-track .elementor-widget-testimonial {
display: block !important;
visibility: visible !important;
}
}
/* ---------- §72. ADVISORS hero CTA 15px mobile ---------- */
@media (max-width: 767px) {
html body.page-id-78 .elementor-78 .elementor-element[data-id="adv-hero-sec"] a.elementor-button,
html body.page-id-78 [data-id="adv-hero-sec"] a.elementor-button,
html body.page-id-78 [data-id*="hero"] a.elementor-button {
font-size: 15px !important;
line-height: 1.3 !important;
padding: 12px 20px !important;
white-space: normal !important;
}
}
/* ---------- §73. ADVISORS H2 "Qué hacemos" clamp ---------- */
@media (max-width: 767px) {
html body.page-id-78 h2.elementor-heading-title,
html body.page-id-78 [data-id="adv-svc-sec"] h2,
html body.page-id-78 [data-id*="svc"] h2 {
font-size: clamp(24px, 7vw, 32px) !important;
line-height: 1.2 !important;
}
}
/* ---------- §74. ADVISORS advw-grid — items uniformes (no staggered) ---------- */
@media (max-width: 1024px) {
html body.page-id-78 [data-id="advw-grid"],
html body.page-id-78 [data-id="advw-grid"] > .e-con-inner,
html body.page-id-78 [class*="advw-grid"] > .e-con-inner,
html body.page-id-78 [class*="advw-grid"] {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 16px !important;
}
html body.page-id-78 [data-id="advw-grid"] .elementor-icon-box-wrapper,
html body.page-id-78 [data-id="advw-grid"] > .elementor-element,
html body.page-id-78 [class*="advw-grid"] .elementor-icon-box-wrapper,
html body.page-id-78 [class*="advw-grid"] > .elementor-element {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
flex: 0 0 100% !important;
margin: 0 !important;
transform: none !important;
top: auto !important;
left: auto !important;
}
}
/* ---------- §75. AYUDA CTA "Da el primer paso" 100% width ---------- */
@media (max-width: 1024px) {
html body.page-id-29 [data-id="ac-cta-sec"],
html body.page-id-29 [data-id="ac-cta-sec"] > .e-con-inner,
html body.page-id-29 [data-id="ac-cta-sec"] *,
html body.page-id-29 [data-id="ac-cta-h2"],
html body.page-id-29 [data-id="ac-cta-sub"],
html body.page-id-29 [data-id="ac-cta-btn"],
html body.page-id-29 [data-id*="cta"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html body.page-id-29 [data-id="ac-cta-sec"] h2,
html body.page-id-29 [data-id="ac-cta-h2"] h2 {
width: 100% !important;
text-align: center !important;
padding: 0 16px !important;
}
}
/* ---------- §76. AYUDA "Qué hacemos" cards con chrome ---------- */
@media (max-width: 1024px) {
html body.page-id-29 [data-id="ac-que-grid"] .elementor-icon-box-wrapper,
html body.page-id-29 [data-id="ac-que-grid"] > .elementor-element,
html body.page-id-29 [data-id^="ac-qi"] {
background: #ffffff !important;
border-radius: 12px !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
padding: 20px !important;
margin-bottom: 12px !important;
}
}
/* ---------- §77. SERVICIOS cards áreas (ayuda/accountants/advisors) visibles ---------- */
@media (max-width: 1024px) {
html body.page-id-27 [data-id="svc-card-a-wrap"],
html body.page-id-27 [data-id="svc-card-b-wrap"],
html body.page-id-27 [data-id="svc-card-c-wrap"],
html body.page-id-27 [data-id="svc-card-a"],
html body.page-id-27 [data-id="svc-card-b"],
html body.page-id-27 [data-id="svc-card-c"],
html body.page-id-27 [data-id="svc-cards-sec"],
html body.page-id-27 [data-id="svc-cards-sec"] > .e-con-inner,
html body.page-id-27 [id="ayuda"],
html body.page-id-27 [id="accountants"],
html body.page-id-27 [id="advisors"],
html body.page-id-27 .ayc-service-card {
display: block !important;
visibility: visible !important;
height: auto !important;
min-height: 200px !important;
opacity: 1 !important;
overflow: visible !important;
}
html body.page-id-27 [data-id="svc-card-a-wrap"],
html body.page-id-27 [data-id="svc-card-b-wrap"],
html body.page-id-27 [data-id="svc-card-c-wrap"] {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 24px !important;
}
html body.page-id-27 [id="ayuda"] *,
html body.page-id-27 [id="accountants"] *,
html body.page-id-27 [id="advisors"] * {
visibility: visible !important;
opacity: 1 !important;
}
}
/* ---------- §78. HOME H2 "Soluciones claras" reducir mobile ---------- */
@media (max-width: 767px) {
html body.home [data-id="ixz9ksb1"] h2,
html body.home .elementor-13 .elementor-element[data-id="ixz9ksb1"] h2,
html body [data-id="ixz9ksb1"] h2.elementor-heading-title {
font-size: 26px !important;
line-height: 1.15 !important;
}
}
/* ---------- §79. Patches universales: global heading scale mobile ---------- */
@media (max-width: 767px) {
html body h1,
html body h1.elementor-heading-title {
font-size: 32px !important;
line-height: 1.15 !important;
}
html body h2,
html body h2.elementor-heading-title {
font-size: 28px !important;
line-height: 1.2 !important;
}
html body h3,
html body h3.elementor-heading-title {
font-size: 22px !important;
line-height: 1.3 !important;
}
}
/* ============================================================
§80 — FIXES FINALES POST-QA2 (5 issues remanentes)
============================================================ */
/* §80a — HOME header height 266px → fila inline */
@media (max-width: 767px) {
html body .elementor-5 .elementor-element.elementor-element-hdr_sec1,
html body .elementor-element[data-id="hdr_sec1"] {
min-height: 0 !important;
max-height: 80px !important;
padding: 4px 8px !important;
}
html body .elementor-5 .elementor-element.elementor-element-hdr_sec1 > .e-con-inner,
html body .elementor-element[data-id="hdr_sec1"] > .e-con-inner {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 4px !important;
padding: 4px 0 !important;
min-height: 0 !important;
max-height: 70px !important;
}
/* Hide right column items extras EXCEPT button + hamburger */
html body .elementor-element[data-id="hdr_right"] {
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
max-width: 60% !important;
}
}
/* §80b — ACCOUNTANTS H1 50px → 34px mobile */
@media (max-width: 767px) {
html body.page-id-69 .elementor-69 h1.elementor-heading-title,
html body.page-id-69 [data-id="acc-hero-sec"] h1,
html body.page-id-69 .elementor-widget-heading h1.elementor-heading-title,
html body.page-id-69 h1.elementor-heading-title {
font-size: 30px !important;
line-height: 1.15 !important;
word-break: keep-all !important;
hyphens: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-69 h1.elementor-heading-title {
font-size: 40px !important;
}
}
/* §80c — ADVISORS H2 "Qué hacemos" 46px → 28px mobile (data-id advs855d2a) */
@media (max-width: 767px) {
html body.page-id-78 .elementor-78 .elementor-element[data-id="advs855d2a"] h2.elementor-heading-title,
html body.page-id-78 [data-id="advs855d2a"] h2,
html body.page-id-78 .elementor-widget-heading h2.elementor-heading-title {
font-size: 28px !important;
line-height: 1.2 !important;
word-break: keep-all !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-78 .elementor-element[data-id="advs855d2a"] h2,
html body.page-id-78 .elementor-widget-heading h2.elementor-heading-title {
font-size: 36px !important;
}
}
/* §80d — AYUDA CTA H2 width 95px → 100% */
@media (max-width: 1024px) {
html body.page-id-29 .elementor-29 .elementor-element[data-id="ac-cta-sec"] h2,
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"] h2,
html body.page-id-29 [data-id="ac-cta-h2"] h2,
html body.page-id-29 .elementor-element[data-id="ac-cta-h2"] {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
flex: 1 1 100% !important;
flex-basis: 100% !important;
word-break: keep-all !important;
text-align: center !important;
font-size: clamp(22px, 6vw, 32px) !important;
line-height: 1.2 !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
/* Container padre flex needs column to give H2 full width */
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"] > .e-con-inner {
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
}
}
/* §80e — Botón CTA Ayuda también full-width */
@media (max-width: 767px) {
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"] a.elementor-button,
html body.page-id-29 [data-id="ac-cta-btn"] a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 240px !important;
max-width: 100% !important;
margin: 16px auto 0 !important;
padding: 14px 24px !important;
white-space: normal !important;
}
}
/* ============================================================
§81 — FIXES ESPECIFICIDAD MÁXIMA (selector mismo nivel + 1 extra)
accountants.css y advisors.css usan selector (0,4,2). Necesitamos (0,4,3)+
============================================================ */
/* §81a — ACC H1 hero 50px → 30px mobile / 40px tablet */
@media (max-width: 767px) {
html body.page-id-69 .elementor-element[data-id="acch7be34b"] h1.elementor-heading-title,
html body.page-id-69 .elementor-element[data-id="acch7be34b"] .elementor-heading-title {
font-size: 30px !important;
line-height: 1.15 !important;
word-break: keep-all !important;
hyphens: none !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-69 .elementor-element[data-id="acch7be34b"] h1.elementor-heading-title,
html body.page-id-69 .elementor-element[data-id="acch7be34b"] .elementor-heading-title {
font-size: 40px !important;
}
}
/* §81b — ADV H2 "Qué hacemos" 46px → 28px mobile / 36px tablet */
@media (max-width: 767px) {
html body.page-id-78 .elementor-element[data-id="advs855d2a"] h2.elementor-heading-title,
html body.page-id-78 .elementor-element[data-id="advs855d2a"] .elementor-heading-title {
font-size: 28px !important;
line-height: 1.2 !important;
word-break: keep-all !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-78 .elementor-element[data-id="advs855d2a"] h2.elementor-heading-title,
html body.page-id-78 .elementor-element[data-id="advs855d2a"] .elementor-heading-title {
font-size: 36px !important;
}
}
/* §81c0 — AYUDA CTA padding reset (la causa real: 48px 60px deja 95px) — nuclear */
@media (max-width: 1024px) {
html body.page-id-29 .elementor-29 .elementor-element.elementor-element-ac-cta-sec,
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"],
html body.page-id-29 .elementor-29 .elementor-element.elementor-element-ac-cta-sec > .e-con-inner,
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"] > .e-con-inner {
padding: 24px 16px !important;
padding-left: 16px !important;
padding-right: 16px !important;
--padding-left: 16px !important;
--padding-right: 16px !important;
max-width: 100% !important;
}
html body.page-id-29 .elementor-29 .elementor-element.elementor-element-ac-cta-h2,
html body.page-id-29 .elementor-element[data-id="ac-cta-h2"],
html body.page-id-29 .elementor-element[data-id="ac-cta-sub"],
html body.page-id-29 .elementor-element[data-id="ac-cta-btn"] {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
}
}
/* §81c — AYUDA CTA H2 "Da el primer paso" — busca data-id real ac-cta-h2 */
@media (max-width: 1024px) {
html body.page-id-29 .elementor-element[data-id="ac-cta-h2"] h2.elementor-heading-title,
html body.page-id-29 .elementor-element[data-id="ac-cta-h2"] .elementor-heading-title {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
flex: 1 1 100% !important;
font-size: clamp(22px, 6vw, 32px) !important;
line-height: 1.2 !important;
text-align: center !important;
word-break: keep-all !important;
padding: 0 12px !important;
box-sizing: border-box !important;
}
/* Forzar el container del CTA a column para que H2 ocupe todo el ancho */
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"] > .e-con-inner,
html body.page-id-29 .elementor-element[data-id="ac-cta-h2"],
html body.page-id-29 .elementor-element[data-id="ac-cta-sub"],
html body.page-id-29 .elementor-element[data-id="ac-cta-btn"] {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
}
html body.page-id-29 .elementor-element[data-id="ac-cta-sec"] > .e-con-inner {
flex-direction: column !important;
align-items: stretch !important;
}
}
/* ============================================================
§82 — CARRUSELES "NUESTROS SERVICIOS" mobile/tablet
Pages: 69 (Accountants), 78 (Advisors), 29 (Ayuda Center)
FIX: scroll horizontal interno, bg-images :none, textos cortados,
overlay solapado, grid 4/5-col fuera de viewport, dots verdes.
ROOT CAUSE: regla §45 [class*="-card"] aplicaba background:white,
padding:20px y box-shadow a TODOS los sub-elementos card-*
(card-image, card-overlay, card-body, card-title, etc.).
============================================================ */
/* §82a — Revertir efectos colaterales de la regla §45 sobre sub-elementos
.ayc-card-image, .ayc-card-overlay, etc. NO deben recibir bg:white ni padding:20.
ESPECIFICIDAD: §45 usa body [class*="-card"]... = (0,2,1).
Necesito (0,2,2)+ para ganar. Uso html body .ayc-service-card .ayc-card-X. */
@media (max-width: 1024px) {
html body .ayc-service-card .ayc-card-image,
html body .ayc-service-card .ayc-card-overlay,
html body .ayc-service-card .ayc-card-badge,
html body .ayc-service-card .ayc-card-body,
html body .ayc-service-card .ayc-card-title,
html body .ayc-service-card .ayc-card-desc,
html body .ayc-service-card .ayc-card-cta-btn,
html body .ayc-service-card .ayc-card-footer-text,
html body .ayc-service-card .ayc-card-btn,
html body .ayc-service-card .ayc-check-item,
html body .ayc-ac-card .ayc-card-image,
html body .ayc-ac-card .ayc-card-overlay,
html body .ayc-ac-card .ayc-card-badge,
html body .ayc-ac-card .ayc-card-body,
html body .ayc-ac-card .ayc-card-title,
html body .ayc-ac-card .ayc-card-desc,
html body .ayc-ac-card .ayc-card-cta-btn,
html body .ayc-ac-card .ayc-card-footer-text,
html body .ayc-ac-card .ayc-card-btn,
html body .ayc-ac-card .ayc-check-item {
background-color: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
}
/* Restaurar padding 0 en image/overlay/title/desc (NO 20px) */
html body .ayc-service-card .ayc-card-image,
html body .ayc-service-card .ayc-card-title,
html body .ayc-service-card .ayc-card-desc,
html body .ayc-ac-card .ayc-card-image,
html body .ayc-ac-card .ayc-card-title,
html body .ayc-ac-card .ayc-card-desc {
padding: 0 !important;
}
}
/* §82b — Service-card wrapper: full width, sin overflow horizontal.
overflow:visible para evitar clip vertical de CTA al final. Border-radius
se aplica a image (top) y body (bottom) explicitamente. */
@media (max-width: 1024px) {
html body.page-id-69 .ayc-service-card,
html body.page-id-78 .ayc-service-card,
html body.page-id-29 .ayc-service-card,
html body.page-id-69 .ayc-ac-card,
html body.page-id-78 .ayc-ac-card,
html body.page-id-29 .ayc-ac-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 4px 18px rgba(0,0,0,0.08) !important;
overflow: visible !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
box-sizing: border-box !important;
}
/* Containers padres de las cards: tambien full width */
html body.page-id-69 [data-id="acc-svc-sec"] > .e-con-inner > .e-con,
html body.page-id-78 [data-id="adv-svc-sec"] > .e-con-inner > .e-con,
html body.page-id-29 [data-id="ac-svc-sec"] > .e-con-inner > .e-con {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 12px !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Service section itself: kill horizontal scroll */
html body.page-id-69 [data-id="acc-svc-sec"],
html body.page-id-78 [data-id="adv-svc-sec"],
html body.page-id-29 [data-id="ac-svc-sec"] {
overflow-x: hidden !important;
max-width: 100vw !important;
}
html body.page-id-69 [data-id="acc-svc-sec"] > .e-con-inner,
html body.page-id-78 [data-id="adv-svc-sec"] > .e-con-inner,
html body.page-id-29 [data-id="ac-svc-sec"] > .e-con-inner {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
overflow-x: hidden !important;
}
}
/* §82c — Card image: forzar dimensiones y aspect ratio mobile.
Anti-padding-bottom-hack: usar altura fija para evitar h:0 con padding override. */
@media (max-width: 1024px) {
html body.page-id-69 .ayc-card-image,
html body.page-id-78 .ayc-card-image,
html body.page-id-29 .ayc-card-image {
position: relative !important;
width: 100% !important;
height: 240px !important;
min-height: 240px !important;
padding: 0 !important;
padding-bottom: 0 !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
border-radius: 16px 16px 0 0 !important;
overflow: hidden !important;
display: block !important;
}
}
@media (max-width: 480px) {
html body.page-id-69 .ayc-card-image,
html body.page-id-78 .ayc-card-image,
html body.page-id-29 .ayc-card-image {
height: 200px !important;
min-height: 200px !important;
}
}
/* §82d — Overlay: 100% width, padding mobile-friendly, no overflow vertical */
@media (max-width: 1024px) {
html body.page-id-69 .ayc-card-overlay,
html body.page-id-78 .ayc-card-overlay,
html body.page-id-29 .ayc-card-overlay {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding: 36px 16px 14px 16px !important;
background: rgba(19, 28, 64, 0.78) !important;
-webkit-backdrop-filter: blur(4px) !important;
backdrop-filter: blur(4px) !important;
border-radius: 0 !important;
text-align: left !important;
box-sizing: border-box !important;
max-height: 100% !important;
/* overflow visible — badge (top:-24px) needs to show above overlay */
overflow: visible !important;
}
html body.page-id-69 .ayc-card-title,
html body.page-id-78 .ayc-card-title,
html body.page-id-29 .ayc-card-title {
font-size: 17px !important;
line-height: 1.2 !important;
margin: 0 0 6px 0 !important;
color: #ffffff !important;
text-align: left !important;
word-break: keep-all !important;
width: 100% !important;
max-width: 100% !important;
}
html body.page-id-69 .ayc-card-desc,
html body.page-id-78 .ayc-card-desc,
html body.page-id-29 .ayc-card-desc {
font-size: 13px !important;
line-height: 1.4 !important;
margin: 0 !important;
color: rgba(255,255,255,0.92) !important;
text-align: left !important;
width: 100% !important;
max-width: 100% !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
html body.page-id-69 .ayc-card-badge,
html body.page-id-78 .ayc-card-badge,
html body.page-id-29 .ayc-card-badge {
position: absolute !important;
top: -24px !important;
left: 16px !important;
width: 48px !important;
height: 48px !important;
background: #9dc41a !important;
color: #ffffff !important;
font-size: 20px !important;
font-weight: 700 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 10 !important;
box-shadow: 0 4px 12px rgba(157,196,26,0.4) !important;
padding: 0 !important;
}
}
/* §82e — Card body: padding mobile, no scroll horizontal */
@media (max-width: 1024px) {
html body.page-id-69 .ayc-card-body,
html body.page-id-78 .ayc-card-body,
html body.page-id-29 .ayc-card-body {
padding: 18px 16px 24px !important;
background: #F4F5F7 !important;
border-radius: 0 0 16px 16px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
/* overflow MUST be 'visible' both axes — mixing visible + hidden
on different axes forces 'auto' (W3C) which creates scrollbar. */
overflow: visible !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
html body.page-id-69 .ayc-card-body h3,
html body.page-id-78 .ayc-card-body h3,
html body.page-id-29 .ayc-card-body h3,
html body.page-id-69 .ayc-includes-title,
html body.page-id-78 .ayc-includes-title,
html body.page-id-29 .ayc-includes-title {
font-size: 16px !important;
margin-bottom: 12px !important;
color: #1e2751 !important;
text-align: left !important;
}
}
/* §82f — CHECKLIST GRID: SIEMPRE 1 columna en mobile (era 4/5 col → overflow).
Quita variaciones cols-3/4/5/6 forzando grid-template-columns: 1fr. */
@media (max-width: 480px) {
html body.page-id-69 .ayc-checklist-grid,
html body.page-id-78 .ayc-checklist-grid,
html body.page-id-29 .ayc-checklist-grid,
html body.page-id-69 .ayc-checklist-grid.ayc-cols-3,
html body.page-id-69 .ayc-checklist-grid.ayc-cols-4,
html body.page-id-69 .ayc-checklist-grid.ayc-cols-5,
html body.page-id-69 .ayc-checklist-grid.ayc-cols-6,
html body.page-id-78 .ayc-checklist-grid.ayc-cols-3,
html body.page-id-78 .ayc-checklist-grid.ayc-cols-4,
html body.page-id-78 .ayc-checklist-grid.ayc-cols-5,
html body.page-id-78 .ayc-checklist-grid.ayc-cols-6,
html body.page-id-29 .ayc-checklist-grid.ayc-cols-3,
html body.page-id-29 .ayc-checklist-grid.ayc-cols-4,
html body.page-id-29 .ayc-checklist-grid.ayc-cols-5,
html body.page-id-29 .ayc-checklist-grid.ayc-cols-6 {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 6px 0 !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 12px !important;
}
}
@media (min-width: 481px) and (max-width: 1024px) {
html body.page-id-69 .ayc-checklist-grid,
html body.page-id-78 .ayc-checklist-grid,
html body.page-id-29 .ayc-checklist-grid,
html body.page-id-69 .ayc-checklist-grid[class*="ayc-cols"],
html body.page-id-78 .ayc-checklist-grid[class*="ayc-cols"],
html body.page-id-29 .ayc-checklist-grid[class*="ayc-cols"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px 12px !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 12px !important;
}
}
/* §82g — Check items mobile: text wraps, no truncate */
@media (max-width: 1024px) {
html body.page-id-69 .ayc-check-item,
html body.page-id-78 .ayc-check-item,
html body.page-id-29 .ayc-check-item {
font-size: 13px !important;
line-height: 1.4 !important;
color: #374151 !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
align-items: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body.page-id-69 .ayc-check-item .ayc-check-icon,
html body.page-id-78 .ayc-check-item .ayc-check-icon,
html body.page-id-29 .ayc-check-item .ayc-check-icon {
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
}
/* CTA button: full width, touch >=44px. :not(#nope) hack para vencer
overrides.css linea 7232 que usa el mismo truco con font-size:22px. */
html body.page-id-69 .ayc-card-cta-btn:not(#nope),
html body.page-id-78 .ayc-card-cta-btn:not(#nope),
html body.page-id-29 .ayc-card-cta-btn:not(#nope),
html body.page-id-69 .ayc-card-btn:not(#nope),
html body.page-id-78 .ayc-card-btn:not(#nope),
html body.page-id-29 .ayc-card-btn:not(#nope) {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-height: 48px !important;
padding: 12px 16px !important;
font-size: 15px !important;
line-height: 1.25 !important;
margin: 14px auto 0 !important;
background: #9dc41a !important;
color: #ffffff !important;
border-radius: 8px !important;
text-align: center !important;
box-shadow: 0 2px 8px rgba(157,196,26,0.25) !important;
box-sizing: border-box !important;
white-space: normal !important;
word-break: keep-all !important;
overflow: visible !important;
}
html body.page-id-69 .ayc-card-footer-text,
html body.page-id-78 .ayc-card-footer-text,
html body.page-id-29 .ayc-card-footer-text {
font-size: 14px !important;
text-align: center !important;
margin: 12px 0 0 !important;
color: #1e2751 !important;
}
}
/* §82h — DEPRECATED: las reglas de dots 12px se trasladan a §94b/§94b-mobile.
Solo se conserva el container layout y el touch-target invisible. */
@media (max-width: 1024px) {
html body.page-id-69 .ayc-carousel-dots,
html body.page-id-78 .ayc-carousel-dots,
html body.page-id-29 .ayc-svc-dots,
html body.page-id-29 .ayc-carousel-dots {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
margin: 18px auto 8px !important;
padding: 8px 0 !important;
width: 100% !important;
}
/* Touch target (44 invisible bbox via padding-area) */
html body.page-id-69 .ayc-carousel-dot,
html body.page-id-78 .ayc-carousel-dot,
html body.page-id-29 .ayc-svc-dot {
position: relative !important;
}
html body.page-id-69 .ayc-carousel-dot::after,
html body.page-id-78 .ayc-carousel-dot::after,
html body.page-id-29 .ayc-svc-dot::after {
content: '' !important;
position: absolute !important;
inset: -16px !important;
background: transparent !important;
}
}
/* §82i — Asegurar que la celda visible es solo 1 card a la vez en mobile.
El JS pone display:block/none, pero forzamos width:100% en el container. */
@media (max-width: 1024px) {
html body.page-id-69 [data-id="acc-svc-sec"] > .e-con-inner > [data-element_type="container"],
html body.page-id-78 [data-id="adv-svc-sec"] > .e-con-inner > [data-element_type="container"],
html body.page-id-29 [data-id="ac-svc-sec"] > .e-con-inner > [data-element_type="container"] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
}
/* §82j — Header de seccion (h2 "Nuestros Servicios" / "Que hacemos") visible y centrado */
@media (max-width: 1024px) {
html body.page-id-69 [data-id="accs855d2a"],
html body.page-id-78 [data-id="advs855d2a"],
html body.page-id-29 [data-id="ac-svc-title"] {
width: 100% !important;
text-align: center !important;
padding: 0 16px !important;
box-sizing: border-box !important;
margin-bottom: 16px !important;
}
}
/* ============================================================
§83 — QUIENES SOMOS RESCUE (mobile + tablet)
Root causes detectados:
(A) §68 aplicaba display:grid a [data-id="qs-stats-inner"]
— eso colapsa su `.e-con-inner` a la 1ª columna (164px),
arrastrando H2 y stats a w<60px → wrap por sílaba.
(B) Cada container QS (qs-X-sec / qs-X-inner / qs-X-row / qs-X-right)
hereda padding 40px 16px del tema, dejando widgets a 199-247px
luego de 3 niveles de anidación.
(C) §54 aplica word-break:keep-all global. Combinado con
containers angostos → texto vertical letra por letra.
(D) qs-val-row mantiene flex-row pero items con flex 0 0 100%
→ 4 stacked OK pero padding 40px 16px aplasta.
(E) qs-diff-row tablet recibe §69 grid 2-col pero el
padding 40 16 + grid-gap deja items en 135px (chrono OK)
— sin embargo a 768x los items quedan a 24px (los hijos
internos tienen sus propios paddings).
============================================================ */
/* §83a — DESACTIVAR la regla §68 sobre `qs-stats-inner`.
`qs-stats-inner` es el contenedor de sección, NO el grid.
El grid debe vivir en `qs-stats-row` SOLAMENTE. */
@media (max-width: 1024px) {
html body.page-id-87 [data-id="qs-stats-inner"],
html body.page-id-87 .elementor-element[data-id="qs-stats-inner"] {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
}
html body.page-id-87 [data-id="qs-stats-inner"] > .e-con-inner {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
}
}
/* §83b — RESET PADDING NUCLEAR para containers QS internos.
Anidación 3 niveles con 40+16 px deja widgets a <200px.
Reducimos paddings horizontales a 0-12px en mobile/tablet. */
@media (max-width: 1024px) {
html body.page-id-87 [data-id="qs-intro-sec"],
html body.page-id-87 [data-id="qs-stats-sec"],
html body.page-id-87 [data-id="qs-val-sec"],
html body.page-id-87 [data-id="qs-philo-sec"],
html body.page-id-87 [data-id="qs-team-sec"],
html body.page-id-87 [data-id="qs-diff-sec"],
html body.page-id-87 [data-id="qs-cta-sec"] {
padding-left: 12px !important;
padding-right: 12px !important;
}
html body.page-id-87 [data-id="qs-intro-inner"],
html body.page-id-87 [data-id="qs-stats-inner"],
html body.page-id-87 [data-id="qs-val-inner"],
html body.page-id-87 [data-id="qs-philo-inner"],
html body.page-id-87 [data-id="qs-team-inner"],
html body.page-id-87 [data-id="qs-diff-inner"],
html body.page-id-87 [data-id="qs-cta-inner"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
html body.page-id-87 [data-id="qs-stats-row"],
html body.page-id-87 [data-id="qs-val-row"],
html body.page-id-87 [data-id="qs-diff-row"],
html body.page-id-87 [data-id="qs-intro-right"] {
padding-left: 4px !important;
padding-right: 4px !important;
}
html body.page-id-87 [data-id="qs-stats-row"] > .e-con-inner,
html body.page-id-87 [data-id="qs-val-row"] > .e-con-inner,
html body.page-id-87 [data-id="qs-diff-row"] > .e-con-inner,
html body.page-id-87 [data-id="qs-intro-right"] > .e-con-inner,
html body.page-id-87 [data-id="qs-intro-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-stats-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-val-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-philo-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-team-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-diff-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-cta-inner"] > .e-con-inner {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Vertical padding reducido pero NO destruido (estética) */
html body.page-id-87 [data-id^="qs-"][data-id$="-sec"] {
padding-top: 28px !important;
padding-bottom: 28px !important;
}
}
/* §83c — REVERTIR word-break:keep-all global de §54 dentro de QS
donde el container es muy estrecho. Permitir wrap normal. */
@media (max-width: 1024px) {
html body.page-id-87 [data-id^="qs-"] h1,
html body.page-id-87 [data-id^="qs-"] h2,
html body.page-id-87 [data-id^="qs-"] h3,
html body.page-id-87 [data-id^="qs-"] h4,
html body.page-id-87 [data-id^="qs-"] p,
html body.page-id-87 [data-id^="qs-"] span,
html body.page-id-87 [data-id^="qs-"] strong,
html body.page-id-87 [data-id^="qs-"] div {
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
hyphens: none !important;
-webkit-hyphens: none !important;
}
}
/* §83d — STATS row: grid 1-col mobile / 2-col 480px+ / 3-col tablet.
Hace prevalecer sobre §68 grid-template-columns:repeat(2,1fr). */
@media (max-width: 479px) {
html body.page-id-87 [data-id="qs-stats-row"],
html body.page-id-87 .elementor-element[data-id="qs-stats-row"] {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
padding: 16px 8px !important;
}
html body.page-id-87 [data-id="qs-stats-row"] > *:nth-child(5),
html body.page-id-87 [data-id="qs-stat-5"] {
grid-column: 1 / -1 !important;
max-width: 100% !important;
justify-self: stretch !important;
}
}
@media (min-width: 480px) and (max-width: 767px) {
html body.page-id-87 [data-id="qs-stats-row"],
html body.page-id-87 .elementor-element[data-id="qs-stats-row"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
padding: 16px 8px !important;
}
html body.page-id-87 [data-id="qs-stats-row"] > *:nth-child(5),
html body.page-id-87 [data-id="qs-stat-5"] {
grid-column: 1 / -1 !important;
max-width: 60% !important;
justify-self: center !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-87 [data-id="qs-stats-row"],
html body.page-id-87 .elementor-element[data-id="qs-stats-row"] {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
padding: 24px 12px !important;
}
}
@media (max-width: 1024px) {
html body.page-id-87 [data-id^="qs-stat-"] {
flex: unset !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 12px 8px !important;
border: none !important;
box-sizing: border-box !important;
}
html body.page-id-87 [data-id^="qs-stat-"] .elementor-image-box-content {
width: 100% !important;
max-width: 100% !important;
}
html body.page-id-87 [data-id^="qs-stat-"] .elementor-image-box-title,
html body.page-id-87 [data-id^="qs-stat-"] .elementor-image-box-title span,
html body.page-id-87 [data-id^="qs-stat-"] .ayc-counter-animated {
font-size: 36px !important;
line-height: 1.05 !important;
white-space: nowrap !important;
}
html body.page-id-87 [data-id^="qs-stat-"] .elementor-image-box-description {
max-width: 100% !important;
font-size: 14px !important;
line-height: 1.4 !important;
word-break: normal !important;
white-space: normal !important;
}
html body.page-id-87 [data-id="qs-stats-h2"] .elementor-heading-title {
font-size: 24px !important;
line-height: 1.25 !important;
margin: 0 0 24px !important;
padding: 0 8px !important;
word-break: normal !important;
white-space: normal !important;
}
html body.page-id-87 [data-id="qs-stats-foot"] {
width: 100% !important;
padding: 0 12px !important;
}
html body.page-id-87 [data-id="qs-stats-foot"] p {
font-size: 14px !important;
word-break: normal !important;
}
}
/* §83e — VALORES row: 1-col mobile / 2-col tablet con paddings sanos. */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-val-row"],
html body.page-id-87 .elementor-element[data-id="qs-val-row"] {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 16px !important;
max-width: 100% !important;
padding: 8px 4px !important;
}
html body.page-id-87 [data-id^="qs-val-"][data-id*="-"]:not([data-id$="-sec"]):not([data-id$="-row"]):not([data-id$="-title"]):not([data-id$="-inner"]) {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
padding: 20px 16px !important;
margin: 0 !important;
}
html body.page-id-87 [data-id="qs-val-title"] .elementor-heading-title {
font-size: 26px !important;
line-height: 1.25 !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-87 [data-id="qs-val-row"],
html body.page-id-87 .elementor-element[data-id="qs-val-row"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
max-width: 100% !important;
padding: 12px 6px !important;
}
html body.page-id-87 [data-id^="qs-val-"][data-id*="-"]:not([data-id$="-sec"]):not([data-id$="-row"]):not([data-id$="-title"]):not([data-id$="-inner"]) {
flex: unset !important;
width: 100% !important;
max-width: 100% !important;
padding: 24px 18px !important;
margin: 0 !important;
}
}
/* §83f — DIFERENCIADORES (qs-diff): 1-col mobile / 2-col tablet.
Items con padding sano (no 40 16). */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-diff-row"],
html body.page-id-87 .elementor-element[data-id="qs-diff-row"] {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
padding: 8px 4px !important;
}
html body.page-id-87 [data-id^="qs-diff-"][data-id*="-"]:not([data-id$="-sec"]):not([data-id$="-row"]):not([data-id$="-title"]):not([data-id$="-inner"]):not([data-id$="-h2"]) {
width: 100% !important;
max-width: 100% !important;
padding: 20px 16px !important;
margin: 0 !important;
flex: unset !important;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
html body.page-id-87 [data-id="qs-diff-row"],
html body.page-id-87 .elementor-element[data-id="qs-diff-row"],
html body.page-id-87 [data-id="qs-diff-row"] > .e-con-inner {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
padding: 12px 6px !important;
width: 100% !important;
max-width: 100% !important;
}
html body.page-id-87 [data-id^="qs-diff-"][data-id*="-"]:not([data-id$="-sec"]):not([data-id$="-row"]):not([data-id$="-title"]):not([data-id$="-inner"]):not([data-id$="-h2"]) {
width: 100% !important;
max-width: 100% !important;
padding: 22px 18px !important;
margin: 0 !important;
flex: unset !important;
box-sizing: border-box !important;
}
}
/* §83g — INTRO (texto + composite imágenes): asegurar full width mobile */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-intro-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-intro-inner"] {
flex-direction: column !important;
}
html body.page-id-87 [data-id="qs-intro-right"],
html body.page-id-87 [data-id="qs-intro-text1"],
html body.page-id-87 [data-id="qs-intro-text2"] {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
html body.page-id-87 [data-id="qs-intro-text1"] p,
html body.page-id-87 [data-id="qs-intro-text2"] p {
font-size: 16px !important;
line-height: 1.55 !important;
word-break: normal !important;
white-space: normal !important;
}
}
/* §83h — FILOSOFÍA: graphic + bubbles legibles mobile */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-philo-inner"] > .e-con-inner,
html body.page-id-87 [data-id="qs-philo-inner"] {
width: 100% !important;
max-width: 100% !important;
}
html body.page-id-87 .qs-philo-graphic {
width: 100% !important;
max-width: 100% !important;
min-height: 340px !important;
padding: 12px 0 !important;
margin: 0 auto !important;
}
html body.page-id-87 [data-id^="qs-philo-"]:not([data-id$="-sec"]):not([data-id$="-inner"]):not([data-id$="-title"]) {
width: 100% !important;
max-width: 100% !important;
}
}
/* §83i — CTA final: heading legible, padding sano */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-cta-sec"] {
padding: 32px 16px !important;
}
html body.page-id-87 [data-id="qs-cta-sec"] h2,
html body.page-id-87 [data-id="qs-cta-sec"] .elementor-heading-title {
font-size: 24px !important;
line-height: 1.25 !important;
word-break: normal !important;
white-space: normal !important;
}
html body.page-id-87 [data-id="qs-cta-sec"] p {
font-size: 15px !important;
line-height: 1.5 !important;
word-break: normal !important;
}
html body.page-id-87 [data-id="qs-cta-sec"] .elementor-button {
width: 100% !important;
max-width: 320px !important;
padding: 14px 20px !important;
}
}
/* §83j — Excluir QS de §45 [class*="-card"] efectos colaterales */
@media (max-width: 1024px) {
html body.page-id-87 .qs-team-card,
html body.page-id-87 [class*="qs-"][class*="-card"] {
/* No imponer chrome card global; quienes-somos.css ya define lo necesario */
box-shadow: revert !important;
}
}
/* §83k — Override §41 flex-basis sobre TODOS los widgets QS dentro
de cualquier e-con-full anidado. Forzar full width mobile.
(Sin afectar carruseles cuyos children siguen su track.) */
@media (max-width: 1024px) {
html body.page-id-87 [data-id^="qs-"] > .elementor-widget,
html body.page-id-87 [data-id^="qs-"] .e-con-inner > .elementor-widget {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
/* EXCEPT carruseles (team / tl) cuyos slides necesitan su flex propio */
html body.page-id-87 .qs-team-track > *,
html body.page-id-87 .qs-tl-track > * {
flex: 0 0 auto !important;
width: auto !important;
}
}
/* §83l — Hero QS: H1 y subtítulos clamp mobile, no roto */
@media (max-width: 767px) {
html body.page-id-87 [data-id="qs-hero-sec"] h1,
html body.page-id-87 [data-id="qs-hero-sec"] .elementor-heading-title {
font-size: clamp(26px, 7vw, 34px) !important;
line-height: 1.15 !important;
word-break: normal !important;
white-space: normal !important;
text-wrap: balance !important;
}
html body.page-id-87 [data-id="qs-hero-sec"] p,
html body.page-id-87 [data-id="qs-hero-sec"] span {
word-break: normal !important;
white-space: normal !important;
}
}
/* §83m — DESACTIVAR §69 sobre [data-id="qs-diff-inner"]: ese es contenedor de sección
(igual que el bug §83a de stats). El grid pertenece al row (qs-diff-row), no al inner.
También cancelar la regla `[data-id*=diff] .e-con-inner { flex-flow: column wrap }`
que afecta al `.e-con-inner` del inner y rompe el row interno. */
@media (max-width: 1024px) {
html body.page-id-87 [data-id="qs-diff-inner"],
html body.page-id-87 .elementor-element[data-id="qs-diff-inner"] {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
}
html body.page-id-87 [data-id="qs-diff-inner"] > .e-con-inner {
display: flex !important;
flex-direction: column !important;
flex-flow: column nowrap !important;
width: 100% !important;
max-width: 100% !important;
grid-template-columns: none !important;
}
/* qs-diff-row debe quedar sin width 352 — forzar 100% del padre */
html body.page-id-87 [data-id="qs-diff-row"],
html body.page-id-87 .elementor-element[data-id="qs-diff-row"] {
width: 100% !important;
max-width: 100% !important;
}
}
/* §83n — ZIGZAG transform en qs-diff-2/4 (translateY 60px) crea solapamiento
visual en mobile/tablet. Cancelarlo (ya estaba en 1145, pero solo en
media específica). Asegurar reset 1024px+. */
@media (max-width: 1024px) {
html body.page-id-87 [data-id="qs-diff-2"],
html body.page-id-87 [data-id="qs-diff-4"] {
transform: none !important;
}
}
/* §83o — qs-philo-graphic: garantizar altura mínima visible para los bubbles
y ocupar ancho completo (estaba 232px en mobile). Centrar contenido. */
@media (max-width: 1024px) {
html body.page-id-87 .qs-philo-graphic,
html body.page-id-87 [data-id="qs-philo-graphic"] {
width: 100% !important;
max-width: 100% !important;
min-height: 360px !important;
position: relative !important;
margin: 16px auto !important;
padding: 0 !important;
}
}
/* §83p — qs-val-row mobile (480px+) usar 2 col si cabe, para mejor uso del ancho. */
@media (min-width: 480px) and (max-width: 767px) {
html body.page-id-87 [data-id="qs-val-row"],
html body.page-id-87 .elementor-element[data-id="qs-val-row"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
padding: 8px 4px !important;
}
}
/* §83q — Filosofía items: layout horizontal icono+círculo+texto legible.
§27 oculta el span DENTRO del circle (display:none) y esperaba un
`.qs-philo-text` que NO existe en el HTML real. Forzamos visibilidad
del span y lo sacamos del circle visualmente con grid/flex. */
@media (max-width: 1024px) {
/* Item: row con icon+line+circle a la izquierda y texto a la derecha */
html body.page-id-87 .qs-philo-item {
display: grid !important;
grid-template-columns: 56px 1fr !important;
align-items: center !important;
gap: 16px !important;
padding: 10px 12px !important;
margin: 0 !important;
background: #FFFFFF !important;
border-radius: 12px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
border: 1px solid rgba(157,196,26,0.25) !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Icono en la columna 1, fila 1: visible y centrado */
html body.page-id-87 .qs-philo-item .qs-philo-icon {
grid-column: 1 !important;
grid-row: 1 !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
background-color: #003366 !important;
background-size: 60% 60% !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-image: var(--icon-img) !important;
margin: 0 auto !important;
}
/* Line: oculta en mobile (no aporta valor sin circle posicionado) */
html body.page-id-87 .qs-philo-item .qs-philo-line {
display: none !important;
}
/* Circle: oculto en mobile, el span saldrá afuera */
html body.page-id-87 .qs-philo-item .qs-philo-circle {
display: contents !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Span text: visible en columna 2 */
html body.page-id-87 .qs-philo-item .qs-philo-circle span,
html body.page-id-87 .qs-philo-item .qs-philo-circle > span {
display: block !important;
grid-column: 2 !important;
grid-row: 1 !important;
font-family: 'Futura Medium', 'Open Sans', sans-serif !important;
font-weight: 500 !important;
font-size: 15px !important;
line-height: 1.4 !important;
color: #1F2937 !important;
text-align: left !important;
word-break: normal !important;
white-space: normal !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* qs-philo-graphic: column stack */
html body.page-id-87 .qs-philo-graphic {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
height: auto !important;
min-height: 0 !important;
width: 100% !important;
max-width: 520px !important;
margin: 16px auto 0 !important;
padding: 0 !important;
}
/* qs-philo-arc & center: ocultar en mobile/tablet (decoración desktop) */
html body.page-id-87 .qs-philo-arc,
html body.page-id-87 .qs-philo-center {
display: none !important;
}
}
/* §83r — qs-philo-item: cancelar animation transform que deja items en
posición invisible cuando IO no triggea (ej. user llega vía deep-link
o disable JS). Usar prefers-reduced-motion como safety net. */
@media (max-width: 1024px) {
/* Si JS está disabled o IO no actúa, dejamos visibles tras 800ms */
html body.page-id-87 .qs-philo-item {
animation: qsPhiloFallback 1ms linear 1.5s forwards !important;
}
}
@keyframes qsPhiloFallback {
to { opacity: 1; transform: none; }
}
/* ============================================================
§84 — MAESTRO UNIVERSAL — FIX MOBILE/TABLET 6 PÁGINAS
Aplicación del método QS: nuclear specificity, @media 1024px,
sin tocar desktop. Issues: header se pierde al scroll,
H2 oversized cross-page, why-sections con widths zigzag,
svc card-overlay constreñido por width:74%+transform.
============================================================ */
/* ------------------------------------------------------------
§84a — HEADER FIXED MOBILE/TABLET (transversal)
ROOT CAUSE 1: hdr_sec1 position:relative → scrolea con el body.
ROOT CAUSE 2: §1 hace `html,body { overflow-x:hidden }` que
crea scroll containers en ambos. En mobile el viewport queda
atado a pero body es scroll container también, lo cual
rompe `position:sticky` (sticky se queda atrapado dentro de su
container, que es body full-height; no se "pega" al viewport).
FIX: usar position:fixed para sacarlo del flow normal del body,
y añadir padding-top a body para que el contenido no quede
tapado por el header.
------------------------------------------------------------ */
@media (max-width: 1024px) {
/*