,
que duplicaban el ⚠). Así el disclaimer cae sobre el OVERLAY NAVY del hero
(contraste OK) y queda gobernado por la regla COMPARTIDA del shared §1
([data-id$="-hero-sec"] .elementor-widget-text-editor p): Myriad Pro 14px,
color #d9dee8, white-space:nowrap (1 línea), ⚠ via ::before, ancho completo.
→ NO se necesita CSS de página para el disclaimer; lo cubre el shared.
La sección accdscsec1 quedó vacía y se ELIMINÓ del _elementor_data.
============================================================ */
/* (Sin reglas de página: el disclaimer es 100% shared tras el refactor.) */
/* ============================================================
CARRUSEL — Accountants = 5 slides (badges 1–5) (ÚNICO: imágenes por slide).
El DISEÑO de card/badge/panel/dots es ESTÁNDAR (shared §2, por CLASE → ya
alcanza Accountants). Aquí solo: imágenes por slide + nº columnas del grid.
Orden DOM: 1 Bookkeeping · 2 Taxes · 3 Business Setup · 4 Nómina · 5 ITIN.
============================================================ */
/* [2026-08-27] card 1 = FOTO REAL (IMG_6817: mano firmando con bolígrafo AYC sobre
formularios). OJO: esta regla es REDUNDANTE — el background-image real va INLINE
en el settings.editor del widget accs41f88c del _elementor_data y animations.js
(§82) lo re-aplica con !important leyéndolo del propio inline, así que el inline
siempre gana. Se actualiza por higiene/coherencia, no porque pinte. */
.ayc-native.ayc-native [data-id="accsc097a4"] .ayc-card-image {
background-image: url('/wp-content/uploads/ayc-photos/acc-card1-real.jpg');
}
.ayc-native.ayc-native [data-id="accs158a86"] .ayc-card-image {
background-image: url('/wp-content/uploads/ayc-photos/acc-card2-taxes.png');
}
.ayc-native.ayc-native [data-id="accs48b957"] .ayc-card-image {
background-image: url('/wp-content/uploads/ayc-photos/acc-card3-business.png');
}
.ayc-native.ayc-native [data-id="acc-card-4-new"] .ayc-card-image {
background-image: url('/wp-content/uploads/ayc-photos/acc-card4-nomina.png');
}
.ayc-native.ayc-native [data-id="acc-card-5"] .ayc-card-image {
background-image: url('/wp-content/uploads/ayc-photos/acc-card5-extra.png');
}
/* VERIFICAR (CRÍTICO): el HTML de la 69 NO tiene el wrapper de carrusel
(.ayc-svc-wrap/.ayc-svc-viewport/.ayc-svc-track/.ayc-carousel-dots) que sí
tiene Advisors; las 5 cards salen como contenedores Elementor sueltos. El
shared estiliza la card/badge/panel (por clase, ok) pero el CENTER-MODE +
peek + dots no funcionará sin ese markup/JS. Confirmar en navegador si el
carrusel se inicializa (¿lo inyecta animations.js?) o si quedan cards
apiladas; si falta, es trabajo de markup/JS (fuera de este CSS). */
/* ---- Grid "Incluye": nº de columnas (ÚNICO de Accountants). El markup de la
69 trae .ayc-cols-4 en la card 4 (Nómina), pero el shared SOLO define
.ayc-checklist-grid a 2 col. Aportamos esos modificadores aquí. El resto de
cards (sin .ayc-cols-*) queda a 2 col por defecto del shared. */
.ayc-native.ayc-native .ayc-checklist-grid.ayc-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.ayc-native.ayc-native .ayc-checklist-grid.ayc-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
/* VERIFICAR: el spec del PDF dice "grid Incluye = 4 columnas" para Accountants,
pero el legacy solo marca .ayc-cols-4 en la card 4. Confirmar en el PDF
cuántas columnas quiere CADA card y, si procede, añadir .ayc-cols-3/4 al
markup de esas cards. La card 5 (ITIN) usa el copy REAL del legacy (W-7,
Renovación, Certificación, etc.) — eso es contenido, ya OK. */
/* ---- H2 "Nuestros Servicios" — normalización de tamaño/line-height (página).
El H2 del bloque de carrusel es accs855d2a; trae 48px inline con lh roto →
normalizamos a 48px / lh 1.2 (norma de página). ---- */
.ayc-native.ayc-native [data-id="accs855d2a"] .elementor-heading-title {
font-size: var(--fs-section);
line-height: 1.2;
}
.ayc-native.ayc-native[data-id="acc-svc-sec"] > .e-con-inner {
padding-top: 60px; /* VERIFICAR vs PDF */
}
.ayc-native.ayc-native [data-id="accs855d2a"] {
margin-bottom: 24px;
}
/* ============================================================
PROCESO "Cómo trabajamos" — 5 pasos (ÚNICO: layout 3+2 fila inferior centrada).
El DISEÑO del proceso (banda teal, badge SIN borde 76px, counter, cards,
título, descripción, flechas) lo aporta shared §3 por sufijo $="-proc-*" →
acc-proc-sec / acc-proc-grid / acc-proc-title lo HEREDAN. Aquí SOLO el
re-layout del grid: Advisors son 6 pasos (3+3); Accountants son 5 → fila1 =
pasos 1·2·3, fila2 = pasos 4·5 CENTRADOS.
============================================================ */
/* [2026-06-25 CORRECCIÓN P5] El centrado de la 2ª fila por grid+translateX FALLABA (la animación
reveal pisaba el transform → las 2 cards quedaban a la IZQUIERDA, medido en prod x=[9,424]).
Solución ROBUSTA: FLEXBOX con wrap + justify-content:center → la fila incompleta (4·5) se centra
sola, sin depender de transform. Cards a ancho fijo 369px. */
.ayc-native.ayc-native [data-id="acc-proc-grid"] > .e-con-inner {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap: 79px 46px;
}
.ayc-native.ayc-native [data-id="acc-proc-grid"] .elementor-widget-icon-box {
flex: 0 0 369px;
width: 369px;
max-width: 369px;
}
/* VERIFICAR (CRÍTICO): el centrado de la fila inferior (4·5) por translateX es
un cálculo a priori; medir en navegador que los 2 cards quedan centrados como
el PDF y que las flechas conectoras (inyectadas por animations.js entre
badges) caen bien entre 4→5. Ajustar el translateX si hace falta. Alternativa
más robusta si falla: cambiar a flexbox con justify-content:center por filas. */
/* ============================================================
POR QUÉ ELEGIR AYC ACCOUNTANTS — círculo a la DERECHA (ÚNICO de Accountants).
El DISEÑO base del "por qué" (título 48px navy, grid block, icon-box, check
verde, descripción) lo aporta shared §4 por sufijo $="w-*" → accw-title /
accw-grid lo HEREDAN. Advisors pone el círculo a la IZQUIERDA (float:left);
Accountants → DERECHA (float:right), el texto a la izquierda abraza la curva
por su borde derecho (shape-outside). Foto propia acc-why-circle-real.jpg.
============================================================ */
/* RONDA 3 (2026-06-17) — WRAP CIRCULAR ESPEJADO (como Advisors, a la DERECHA).
El estado previo (position:ABSOLUTE + columna de texto acotada a max-width:549px
a la izquierda) daba una COLUMNA RECTA (MAL): las líneas NO abrazaban la curva.
El PDF (acc-crops/porque.png) muestra el círculo a la DERECHA con el texto a la
izquierda cuyas líneas se ACORTAN cerca del centro vertical del círculo (abrazan
la curva). Replicamos EXACTAMENTE la receta probada de Advisors (ayc-advisors.css
§POR QUÉ) pero ESPEJADA: float:RIGHT + shape-outside:circle() + shape-margin, y
QUITAMOS el max-width de la columna para que el texto fluya a ancho completo y el
shape-outside lo recorte contra la curva. El contenedor accw-grid ya es
display:block+relative+overflow:visible (shared §4) → el float funciona.
shape-outside REQUIERE display:block + elemento FLOTADO con tamaño px (ambos
presentes). Foto propia acc-why-circle-real.jpg. */
/* BALANCE VERTICAL DEL TÍTULO: padding-top de la sección 70px ≈ aire abajo. */
.ayc-native.ayc-native[data-id="acc-why-sec"] > .e-con-inner {
padding-top: 70px;
}
/* RONDA 3 (2026-06-18) — IGUALAR ANCHO INTERNO A ADVISORS (1200, no 1140).
El markup trae padding lateral 142.5px en la sección → inner 1140 (60px más
angosto que Advisors=1200) → la columna de texto quedaba estrecha y dejaba un
vacío plano contra el círculo. Bajamos el padding lateral a 112.5px (idéntico
a Advisors) → inner left 143→113, width 1140→1200 → misma proporción de columna
de texto que Advisors, espejada. */
.ayc-native.ayc-native[data-id="acc-why-sec"] {
/* style.css trae `[data-id="acc-why-sec"]{padding:10% !important}` (=142.5px @1440)
→ inner 1140. Lo vencemos con !important + mayor especificidad para igualar
Advisors (padding 112.5px → inner 1200). */
padding-left: 112.5px !important;
padding-right: 112.5px !important;
}
.ayc-native.ayc-native [data-id="accw-grid"] > .e-con-inner {
padding-top: 20px; /* reduce el aire bajo el título */
min-height: 612px; /* RONDA 3: igual que Advisors (Ø539 + margin-top 28 + holgura) */
}
/* RONDA 1 (2026-06-18) — ABRAZO CIRCULAR REAL, ESPEJO EXACTO DE ADVISORS.
CAUSA RAÍZ del "no redondo / texto angosto" medido @1440:
(1) shape-outside:circle(50% at 50% 50%) se calcula sobre la MARGIN-BOX del
float, NO sobre el disco visible. Con margin asimétrico 24/70 la margin-box
era 614×546 (no cuadrada) → circle(50%) generaba un radio mayor y un centro
desplazado respecto al disco de 520px → la curva de wrap NO coincidía con el
círculo dibujado (se veía "no redondo"). Advisors funciona porque su margin
horizontal es casi simétrico (16/8) → margin-box ~563×579 ≈ cuadrada → la
shape-circle SÍ casa con el disco.
(2) El disco estaba empujado a la dcha (margin-right 70 → borde-izq en x693), con
shape-margin 40 la curva de wrap caía en x≈653; pero las líneas de texto sólo
llegaban natural hasta ~650-700 y la mayoría a 320-650 → casi ninguna tocaba
la curva (columna recta, "angosto").
FIX = replicar Advisors EXACTO, espejado:
· Ø539 (idéntico a Advisors).
· margin HORIZONTAL SIMÉTRICO 12/12 → margin-box ~563 ancho ≈ cuadrada → la
shape-circle COINCIDE con el disco (redondo de verdad).
· shape-margin 24 (idéntico a Advisors).
· El disco va flush-derecha (margin-right 12) → borde-izq x≈718, equator x≈718,
shape-margin 24 → la curva clipa el texto desde x≈694 al centro vertical,
recediendo a x≈760 arriba/abajo → el END-X de las líneas VARÍA siguiendo la
circunferencia (corto al centro, largo arriba/abajo) = abrazo como Advisors.
El texto fluye desde inner-left (x143) a ancho completo; el shape-outside le
recorta el borde DERECHO contra la curva. Medido live → END-X varía por línea. */
/* La columna de texto NO se acota: fluye a ancho completo y el shape-outside del
círculo flotado le recorta el borde DERECHO (las líneas abrazan la curva). El
shared dejaba width:auto; aquí re-aseguramos width:100% y QUITAMOS cualquier
max-width previo (era 549px → columna recta, MAL). */
.ayc-native.ayc-native [data-id="accw-grid"] .elementor-widget-icon-box {
width: 100%;
max-width: none;
}
/* WRAP CIRCULAR — ALINEADO A LA IZQUIERDA, BORDE DERECHO IRREGULAR (re-audit 2026-06-21).
El círculo va a la DERECHA (float:right + shape-outside). El PDF muestra el cuerpo
ALINEADO A LA IZQUIERDA con el borde DERECHO IRREGULAR/ragged (cada línea empieza en
el mismo x izquierdo, el borde derecho no es recto). El text-align:justify previo
(decisión 2026-06-18) estiraba el inter-palabra (huecos visibles en "Cuenta, impuestos,
nómina,") forzando un borde derecho recto que el PDF NO tiene → corregido a LEFT.
El abrazo a la curva lo sigue dando el shape-outside del círculo flotado (recorta el
borde derecho de las líneas LLENAS contra la circunferencia) SIN necesidad de justify;
las líneas naturalmente más cortas quedan ragged como en el diseño. Mantiene 21px,
Futura Medium, gris-teal. Spec (0,4,0) + carga posterior → vence al text-align:left del
shared y a cualquier justify legacy. */
.ayc-native.ayc-native [data-id="accw-grid"] .elementor-icon-box-description {
text-align: left !important;
}
.ayc-native.ayc-native [data-id="accw-grid"] .elementor-icon-box-title {
text-align: left !important; /* título+check en columna limpia a la izquierda */
}
/* CÍRCULO FLOTADO a la DERECHA (espejo de Advisors, que flota a la izquierda).
float:right + shape-outside:circle() → el texto de la izquierda envuelve la
curva por su borde DERECHO. Ø539 = mismo que Advisors (PDF). margin-left/abajo
dan el aire curva→texto del lado izquierdo (espejo del margin-right de Advisors). */
.ayc-native.ayc-native [data-id="accw-grid"] > .e-con-inner::before {
content: "";
float: right; /* Accountants → círculo a la DERECHA */
width: 539px; height: 539px; /* RONDA 3 (2026-06-18): Ø539 IDÉNTICO a Advisors. El Ø555 previo
en una columna 60px más angosta apretaba el texto y dejaba un
vacío plano. Mismo disco que Advisors → mismo abrazo, espejado. */
margin: 28px 16px 12px 48px; /* RONDA 2: ESPEJO de Advisors. margin-LEFT 8→48 = el lever del AIRE
en el ECUADOR (texto a la IZQ del círculo → su borde derecho llega,
con justify, hasta la margin-box izq del float). shape-margin sólo
redondea esquinas; nunca empuja texto fuera de la margin-box, así
que en la banda ancha el justify se clavaba a ~30px de la curva.
margin-left 48 mueve la margin-box izq del float a la izquierda →
el MÍNIMO texto↔curva sube a ~48px (cliente: "muy pegados").
margin-top 28 / margin-right 16 intactos (centro y disco = Advisors
espejado). NO cambia el disco visible (Ø539). */
border-radius: 50%;
shape-outside: circle(269.5px at 50% 50%); /* RADIO EXPLÍCITO px = mitad del disco (539/2). El % resolvía contra
sqrt(w²+h²)/√2 de la margin-box → círculo gigante que anulaba el
reclaim curvo (el texto se pegaba al borde RECTANGULAR). Con px el
arco coincide con el disco y el justify abraza la curva derecha. */
shape-margin: 48px; /* RONDA 2: aire REDONDO de esquinas (48px). El aire del ecuador lo da
margin-left (arriba). Juntos → margen redonda generosa (mín ~48px)
manteniendo float:right + shape-outside + text-align:justify. */
border: 1.5px solid var(--ayc-navy); /* anillo navy fino */
/* [2026-08-27] FOTO REAL del círculo "Por qué elegir" (este ::before es el de
accw-grid; el nombre acc-esencia-circle.png era heredado y confundía). Ahora
IMG_6730 recortada 1000²+560+300 → 1078²: dos asesoras AYC revisando documentos,
centradas, sin cabezas cortadas por la máscara circular Ø539.
.bak de la IA: uploads/ayc-photos/acc-esencia-circle.png.pre-fotos-reales-20260827.bak */
background: url('/wp-content/uploads/ayc-photos/acc-why-circle-real.jpg') center/cover no-repeat;
}
/* ============================================================
ESENCIA — Accountants usa max-width:1000px (inline en el markup), distinto del
1159px de Advisors. El shared §ESENCIA (sufijo $="-esencia-content") ya
gobierna tipografía/colores y SÍ alcanza Accountants. Advisors añadió un SPLIT
de columnas con huecos simétricos scoped a adv-esencia-content; ESO NO se
replica aquí porque el ancho/medidas de Accountants (1000px) son distintos.
VERIFICAR: medir el bloque "Nuestra esencia" de Accountants vs su PDF (banda
navy, 2 columnas + divisor verde). Si el reparto no coincide, aportar aquí un
split scoped a [data-id="acc-esencia-content"] con el ancho 1000px. Si se ve
una 3ª familia tipográfica, forzar var(--ayc-font-body) !important.
============================================================ */
/* FOTO DE FONDO de la banda (gap ronda 1, blocker). El banner trae
background:url(/wp-content/uploads/ayc-photos/acc-proceso-bg.jpg) INLINE pero
en este DOM la background-image se computa 'none' (la shorthand inline pierde
frente a una regla !important de Elementor que no podemos editar). La
re-aseguramos aquí con !important por el data-id EXACTO de Accountants
(acc-esencia-content) → vence y la foto renderiza bajo el overlay navy del
shared. La ALTURA (640px), el OVERLAY navy y la tipografía/colores los aporta
servicios-shared.css (§ESENCIA, por sufijo). Asset propio de página. */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div {
background-image: url('/wp-content/uploads/ayc-photos/acc-proceso-bg.jpg') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
}
/* [2026-06-25 punto 2 v2] el lead "Lo hacemos simple, ordenado y claro." va en peso MEDIUM
(Futura Medium @500), NO bold — a 700 el cliente lo ve con "mucho peso". @500 = limpio (peso
declarado del font-face, sin faux) y se distingue por TAMAÑO. */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div > div:nth-child(1) p {
font-family: var(--ayc-font-body) !important; font-weight: 500 !important;
}
/* ---- ANCHO DEL BODY (gap ronda — major). En el recorte el párrafo del body
('Sabemos que la contabilidad…') ocupa ~3 líneas y se extiende casi hasta el
borde derecho de la banda. En este DOM la FILA de 2 columnas trae
max-width:1000px INLINE (spec 1,0,0,0) y las columnas reparten flex 1:1 → la
caja del body sólo medía 418px (5 líneas) y dejaba ~212px de navy vacío a la
derecha (1213→1425). FIX por ANCHO (no
, no reducir fuente): ensanchamos
la fila para que llegue cerca del borde de la banda y damos al body un
flex-grow mayor que a la columna izquierda (split asimétrico como el recorte:
izquierda estrecha, body ancho). Reducimos el padding lateral DERECHO del body
para apurar hasta ~el borde. Solo PÁGINA (Advisors tiene su propio split). */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div {
max-width: 1320px !important; /* fila ~926% del ancho de banda; izquierda ≈ misma x, derecha llega a ~96% */
}
/* Columna IZQUIERDA (título + subtítulo): ancho fijo como el recorte. En el
recorte el subtítulo 'Lo hacemos simple, ordenado y claro.' va en UNA línea
(sin huérfanas). Medido @1440: H2 48px ≈ 391px intrínseco (cabe); subtítulo
24px/700 Futura ≈ 417px intrínseco. Con 480px − 2×40px padding = 400px de
contenido el subtítulo desbordaba ~17px → 'claro.' caía huérfano en 2ª línea.
FIX por ANCHO (no
, no reducir fuente): subimos el flex-basis a 520px →
520 − 80 = 440px de contenido (>417px, margen cómodo) y el subtítulo entra en
1 línea natural. El body (col derecha) cede 40px (836→796px) y sigue en ~3
líneas; la banda llega a x=1425, la fila a ~1373 → hay holgura. Padding lateral
reducido a 0 30px por robustez (60px de aire total, deja 460px de contenido). */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div > div:nth-child(1) {
flex: 0 0 520px !important;
padding-left: 30px !important;
padding-right: 30px !important;
}
/* Columna DERECHA (body): toma TODO el resto → el párrafo cae en ~3 líneas y se
extiende casi al borde de la banda. Padding derecho reducido para apurar. */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div > div:nth-child(3) {
flex: 1 1 auto !important;
padding-right: 16px !important;
}
/* ============================================================
TESTIMONIOS — PARIDAD CON EL HOME (RONDA 1, gaps marcados sharedOrPage:page).
El COMPONENTE de cards/avatar/aro/chevrons ahora es el MISMO del Home (nativo
.ayc-tst-*, ya estilado por servicios-shared §6 — se aplicó al sustituir el
widget HTML aycgrev69 por la fila .ayc-tst-row con 2 chevrons + 3 cards en el
_elementor_data). Aquí quedan SOLO los 3 ajustes de cabecera que el shared deja
distintos del Home y que el auditor pidió igualar al Home; los scopeamos a
acc-test-sec (clase DOBLE) para NO tocar Advisors/Ayuda (sufijo $="-test-sec"
compartido). Medido @1440 en el Home: subtítulo 24px rgba(255,255,255,.8);
lead 20px rgba(255,255,255,.8) en ~3 líneas; botón peso 600.
NOTA H2 (gap minor, NO cambiado a propósito): el auditor pidió 800→700 para
igualar el Home, pero TODOS los títulos de sección de Accountants
(Nuestros Servicios / Cómo trabajamos / Por qué elegir / CTA) renderizan
48px/800 (escala consolidada de la página, fijada en shared §6). Bajar SOLO
testimonios a 700 lo convertiría en el único outlier de la página y rompería
la escala consolidada (disciplina de escala central). Se mantiene 800.
============================================================ */
/* SUBTÍTULO 'Cada historia…' = 24px (lead-step, claramente > cuerpo) + blanco
atenuado .8, como el Home. El shared lo fija a 18px/blanco-pleno (regla por
sufijo) → lo vencemos por data-id de página + clase doble. El trae
color:#6B7280 INLINE → !important para color. */
/* Specificity: el shared §6 fija el subtítulo a 18px con un selector que SUMA
(0,6,5) por sus :not(:has(p strong))/:not(:has(p b)) (cada :has aporta a la
columna de elementos). Para vencerlo subimos a (0,8,2): clase CUÁDRUPLE +
data-id de sección + data-id de widget + 2 clases del widget. */
.ayc-native.ayc-native.ayc-native.ayc-native[data-id="acc-test-sec"] [data-id="accx6cbf02f"].elementor-widget-text-editor.elementor-widget p {
font-size: var(--fs-quote) !important;
line-height: 1.4 !important;
color: rgba(255,255,255,0.8) !important;
}
/* LEAD 'Las más de 400 reseñas…' = blanco atenuado .8 (como el Home) y ancho
~920px para que caiga en ~3 líneas natural (NO
). El bloque heredaba
max-width:740px INLINE (style attr) → lo ensanchamos con !important y centramos.
Tamaño 20px lo aporta el shared (lead-step). */
.ayc-native.ayc-native[data-id="acc-test-sec"] [data-id="accx1626258"] {
max-width: 920px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ayc-native.ayc-native[data-id="acc-test-sec"] [data-id="accx1626258"] p {
max-width: 920px !important;
margin-left: auto !important;
margin-right: auto !important;
color: rgba(255,255,255,0.8) !important;
}
/* BOTÓN 'Ver más testimonios' = peso 600 (= el botón de reseñas del Home). El
shared §6 lo fija a 700; lo bajamos a 600 SOLO en Accountants. Geometría
(verde #9DC41A, blanco, radius 6px, 21px) la mantiene el shared/global. */
.ayc-native.ayc-native[data-id="acc-test-sec"] [data-id="accx73f79f5"] .elementor-button {
font-weight: 600 !important;
}
/* ============================================================
INTRO — SOLAPE sobre el hero (ÚNICO de Accountants, ronda 3 2026-06-17).
El shared §1.5 fija margin-top:-8px → la tarjeta apenas tocaba el pie del
hero (overlap 8px, medido: cardTop 832 / heroBottom 840) → se veía SEPARADA
debajo del hero (MAL). El PDF (acc-crops/intro.png) y Advisors muestran la
tarjeta FLOTANDO sobre el pie del hero (solape ~70px). Advisors usa -81px;
Accountants NO tiene el disclaimer dentro del hero (es un strip aparte) y su
pie navy difiere, así que medimos su propio valor: -72px → cardTop cae ~72px
DENTRO de la banda navy del hero, como el PDF. z-index>hero ya lo da el shared
(position:relative;z-index:2). La tarjeta es opaca (#eceeef) → tapa el navy
bajo ella; el navy del hero asoma a los lados. margin-bottom reserva el aire
hacia 'Nuestra esencia'. Override del shared por data-id exacto + orden de
carga (ayc-accountants.css va DESPUÉS de servicios-shared.css). */
.ayc-native.ayc-native[data-id="acc-intro-sec"] {
margin-top: -81px; /* = Advisors: la tarjeta SOLAPA mas el pie del hero (pedido cliente: que ocupe espacio del hero como Advisors) */
margin-bottom: 50px;
}
/* ============================================================
CARRUSEL "Nuestros Servicios" — UNA SOLA card, SIN peek (ronda 3 2026-06-17).
El shared §2 monta CENTER-MODE con peek (viewport padding 0 130px → slide
940px + vecinas asomando). El cliente pide para Accountants UNA card a ancho
completo SIN peek (consistencia de las 3 páginas de servicio). Lo SCOPEAMOS a
acc-svc-sec (data-id de la sección) → NO toca Advisors/Ayuda (que conservan el
peek del shared). Mecánica SIN tocar el JS: el viewport a padding 0 → el slide
(flex:0 0 100%) resuelve al ancho COMPLETO del viewport (1200px) → 1 card, 0
peek. El step del JS = cards[0].offsetWidth + gap se recalcula solo (lee
offsetWidth real) → la navegación por dots verdes (5) sigue cuadrando.
============================================================ */
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-svc-viewport {
padding: 0 0 38px; /* sin centerPadding lateral → 1 card a ancho completo, sin peek.
OJO: la sección acc-svc-sec ES la propia .ayc-native top-level
(clase DOBLADA SIN espacio antes del [data-id]); con espacio el
selector NO matchea (el viewport no es descendiente de OTRO
.ayc-native, sino de la PROPIA sección).
RONDA 2 (2026-06-17): padding-BOTTOM 38px → el CTA verde 'medio
caballo' (margin-bottom:-60px, su mitad inferior cuelga BAJO el filo
de la card) ya NO lo recorta el overflow:hidden del viewport. El track
mantiene su alto (card bottom 804); el padding-bottom extiende el área
visible del viewport a 842 → el botón (bottom 832) queda DENTRO con
~10px de holgura, completo y centrado, mitad-dentro/mitad-fuera del filo
de la card como el PDF (acc-crops/servicios.png). Las 5 slides igual
(misma altura de card). overflow:hidden se conserva (necesario para el
carrusel). */
}
/* CTA del carrusel — A MEDIO CABALLO del borde inferior de la card (PDF
acc-crops/servicios.png: el botón verde 'Quiero preparar mis impuestos con AYC'
queda mitad dentro / mitad fuera del borde inferior de la card). El shared lo
deja en flujo (margin:22px auto 0) DENTRO del body. Aquí lo bajamos para que
sobresalga ~50% por debajo del filo de la card: damos al body padding-bottom
extra (reserva el medio botón que queda dentro) y al WRAPPER del CTA un
margin-bottom NEGATIVO de ~la mitad de su alto (≈27px) → la otra mitad cuelga
bajo el borde redondeado de la card. .ayc-service-card ya es overflow:visible
(shared §2) → el botón puede sobresalir. Scope a acc-svc-sec → solo Accountants. */
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-card-body {
overflow: visible; /* deja que el botón sobresalga bajo el filo de la card */
}
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-card-body > div:last-child {
position: relative;
z-index: 4;
margin-top: 22px;
/* El filo INFERIOR de la card debe caer por el CENTRO del botón (mitad dentro /
mitad fuera, PDF). En flujo, el borde inferior de la card = bottom del botón +
padding-bottom del body (32px). Para subir ese filo al CENTRO del botón
(btnHeight≈55 → mitad 27.5) tiramos el wrapper hacia arriba
27.5(mitad-botón) + 32(padding-body) ≈ 60px → la mitad inferior del botón
cuelga bajo el filo redondeado de la card. */
margin-bottom: -60px;
}
/* ============================================================
ESENCIA — el parallax lo aporta el shared §ESENCIA (background-attachment:fixed
por sufijo $="-esencia-content"). Aquí SOLO la foto de fondo propia (acc-proceso-bg)
ya definida arriba; quitamos el background-position:center !important que MATABA
el parallax JS (ver nota en el bloque ESENCIA de arriba).
============================================================ */
/* ============================================================================
════════════════════ RESPONSIVE — TABLET (≤1024px) ════════════════════
AÑADIDO 2026-06-21. SOLO reglas DENTRO de media-queries → el DESKTOP (≥1025px)
queda BYTE-IDÉNTICO (estos bloques no aplican ahí). Los font-size bajan por
tokens centralizados en ayc-base.css @media; aquí ajustamos SÓLO el LAYOUT de
las secciones de Accountants (apilado, gaps, padding, diagramas absolutos→
apilados). Modelado sobre native/ayc-advisors.css (estructura gemela), pero
adaptado a lo ÚNICO de Accountants: disclaimer = STRIP propio
(.acc-disclaimer-text en accdscwdg1, NO advhc46abe); proceso 5 pasos con
translateX centrando 4·5 (hay que ANULARLO al apilar); círculo "por qué" a la
DERECHA (float:right); esencia con anchos propios (520/1320).
============================================================================ */
@media (max-width: 1024px) {
/* ---- HERO: alto fluido + ritmo vertical compacto ---- */
.ayc-native.ayc-native[data-id="acc-hero-sec"] {
--min-height: 0px;
min-height: 0 !important;
}
.ayc-native.ayc-native[data-id="acc-hero-sec"] > .e-con-inner {
padding-top: 56px;
padding-bottom: 40px;
}
/* subtítulo H2 fluido (su max-width 880 forzaría overflow en 768-1024) */
.ayc-native.ayc-native[data-id="acc-hero-sec"] h2.elementor-heading-title {
max-width: 100%;
}
/* DISCLAIMER del hero (STRIP propio .acc-disclaimer-text): el shared lo fija a
white-space:nowrap + left:50%/translateX/width:max-content (1351px → 503px de
overflow horizontal). Lo revertimos a flujo normal y que ENVUELVA a 2-3 líneas
centradas. Conserva todo el texto. Doble scope (clase de página + sufijo
compartido) para ganar al shared en orden de carga. */
.ayc-native.ayc-native[data-id="acc-hero-sec"] .acc-disclaimer-text,
.ayc-native.ayc-native[data-id="acc-hero-sec"] .elementor-widget-text-editor p {
white-space: normal !important;
position: static !important;
left: auto !important;
transform: none !important;
width: auto !important;
max-width: 100% !important;
}
/* la franja navy vacía bajo el disclaimer (margin-bottom:84) ya no hace falta
tan grande con la intro fluida; se reduce para no dejar un hueco navy enorme. */
.ayc-native.ayc-native[data-id="acc-hero-sec"] [data-id="accdscwdg1"] {
margin-bottom: 40px;
}
/* ---- INTRO — tarjeta flotante: solape menor + padding lateral cómodo ---- */
.ayc-native.ayc-native[data-id="acc-intro-sec"] {
margin-top: -48px;
margin-bottom: 40px;
}
.ayc-native.ayc-native[data-id="acc-intro-sec"] > .e-con-boxed {
max-width: 92% !important;
}
.ayc-native.ayc-native[data-id="accieef5f2"] > .e-con-inner {
padding-left: 36px;
padding-right: 36px;
}
/* ---- ESENCIA — split 2-col + divisor → 1 col apilada, divisor a línea horiz ----
Estructura: content > div(banda) > div(fila, 3 hijos: col1 título/sub, col2
divisor vertical, col3 body). Apilamos a columna. */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div {
flex-direction: column !important;
max-width: 92% !important;
margin: 0 auto !important;
}
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div > div:nth-child(1),
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div > div:nth-child(3) {
flex: 0 0 auto !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
/* divisor vertical (nth-child 2) → regla horizontal fina entre los 2 bloques. */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div > div:nth-child(2) {
width: 60% !important;
height: 2px !important;
min-height: 0 !important;
max-height: 2px !important;
align-self: center !important;
flex: 0 0 auto !important;
margin: 22px auto !important;
}
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div {
min-height: 0 !important;
padding-top: 44px !important;
padding-bottom: 44px !important;
}
/* ---- CARRUSEL "Nuestros Servicios" — la card "Incluye" interno: el grid
.ayc-checklist-grid de 1136px a 1 col interior debe encajar; 4 col→2. ---- */
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-checklist-grid.ayc-cols-4 {
grid-template-columns: repeat(2, 1fr);
}
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-checklist-grid.ayc-cols-3 {
grid-template-columns: repeat(2, 1fr);
}
/* ---- PROCESO — 5 pasos: grid 3 col → 2 col; ANULAR el centrado translateX
de los pasos 4·5 (es un truco de la fila inferior centrada del layout 3+2 de
desktop; en 2 col los empuja fuera de su columna y desborda). ---- */
.ayc-native.ayc-native [data-id="acc-proc-grid"] > .e-con-inner {
grid-template-columns: repeat(2, 1fr);
gap: 70px 30px;
justify-items: center;
}
.ayc-native.ayc-native [data-id="acc-proc-grid"] .elementor-widget-icon-box:nth-child(4),
.ayc-native.ayc-native [data-id="acc-proc-grid"] .elementor-widget-icon-box:nth-child(5) {
grid-column: auto;
justify-self: center;
transform: none;
}
.ayc-native.ayc-native [data-id="acc-proc-grid"] .elementor-widget-icon-box {
max-width: 100%;
}
/* ---- POR QUÉ ELEGIR — círculo float:right + shape-outside → APILADO vertical.
El círculo (::before del inner) deja de flotar y se centra ARRIBA; las razones
(icon-box) fluyen DEBAJO a ancho completo. Conserva TODO el texto. ---- */
.ayc-native.ayc-native[data-id="acc-why-sec"] {
/* desktop tiene padding lateral 112.5px !important para igualar 1200 inner;
en tablet sobra ancho → lo bajamos para más texto. */
padding-left: 5% !important;
padding-right: 5% !important;
}
.ayc-native.ayc-native [data-id="accw-grid"] > .e-con-inner {
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding-top: 0 !important;
}
.ayc-native.ayc-native [data-id="accw-grid"] > .e-con-inner::before {
float: none !important;
position: relative !important;
width: 360px !important;
height: 360px !important;
max-width: 80vw !important;
max-height: 80vw !important;
margin: 0 auto 36px !important;
shape-outside: none !important;
shape-margin: 0 !important;
}
.ayc-native.ayc-native [data-id="accw-grid"] > .e-con-inner > .elementor-element {
width: 100% !important;
max-width: 100% !important;
}
/* el texto del icon-box ya no abraza la curva → alineación izquierda limpia,
a ancho completo (sin justify ni shape-outside). */
.ayc-native.ayc-native [data-id="accw-grid"] .elementor-icon-box-description,
.ayc-native.ayc-native [data-id="accw-grid"] .elementor-icon-box-title {
text-align: left !important;
white-space: normal;
}
/* ---- TESTIMONIOS — fila de 3 cards (flex nowrap) → 2 por fila (wrap);
chevrons de navegación a flujo (no absolutos que desborden). ---- */
.ayc-native [data-id="581ginu8"].ayc-tst-row,
.ayc-native .ayc-tst-row {
flex-wrap: wrap !important;
gap: 24px !important;
justify-content: center !important;
}
.ayc-native .ayc-tst-card {
flex: 1 1 280px !important;
min-width: 260px !important;
max-width: 340px !important;
}
/* ---- CTA FINAL — tarjeta de ancho fijo → fluida; subtítulo envuelve ---- */
.ayc-native.ayc-native[data-id="acc-cta-sec"] > .e-con {
max-width: 92% !important;
}
.ayc-native.ayc-native[data-id$="-cta-sec"] .elementor-widget-text-editor p {
white-space: normal !important;
}
}
/* ============================================================================
════════════════════ RESPONSIVE — MÓVIL (≤767px) ════════════════════
Apilado total a 1 columna; gaps/padding mínimos; nada se oculta; sin overflow.
============================================================================ */
@media (max-width: 767px) {
/* ---- HERO ---- */
.ayc-native.ayc-native[data-id="acc-hero-sec"] > .e-con-inner {
padding-top: 40px;
padding-bottom: 32px;
padding-left: 20px;
padding-right: 20px;
}
/* botón del hero: el shared lo fija nowrap + padding 15/40 → a 360px se sale.
Permitimos wrap y reducimos padding lateral (NO toca el tamaño de fuente). */
.ayc-native.ayc-native[data-id="acc-hero-sec"] .elementor-button {
white-space: normal;
padding-left: 24px;
padding-right: 24px;
max-width: 100%;
}
.ayc-native.ayc-native[data-id="acc-hero-sec"] [data-id="accdscwdg1"] {
margin-bottom: 32px;
}
/* ---- INTRO — padding lateral más ajustado ---- */
.ayc-native.ayc-native[data-id="acc-intro-sec"] > .e-con-boxed {
max-width: 94% !important;
}
.ayc-native.ayc-native[data-id="accieef5f2"] > .e-con-inner {
padding-left: 24px;
padding-right: 24px;
}
/* ---- ESENCIA — 1 col (ya apilada en tablet); inset más estrecho ---- */
.ayc-native.ayc-native [data-id="acc-esencia-content"] > div > div {
max-width: 100% !important;
}
/* ---- CARRUSEL — checklist "Incluye": → 1 columna ---- */
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-checklist-grid,
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-checklist-grid.ayc-cols-4,
.ayc-native.ayc-native[data-id="acc-svc-sec"] .ayc-checklist-grid.ayc-cols-3 {
grid-template-columns: 1fr;
gap: 10px 0;
}
/* ---- PROCESO — 5 pasos: → 1 columna (centrada) ---- */
.ayc-native.ayc-native [data-id="acc-proc-grid"] > .e-con-inner {
grid-template-columns: 1fr;
gap: 60px 0;
}
/* ---- POR QUÉ ELEGIR — círculo apilado más pequeño ---- */
.ayc-native.ayc-native [data-id="accw-grid"] > .e-con-inner::before {
width: 240px !important;
height: 240px !important;
margin-bottom: 28px !important;
}
/* ---- TESTIMONIOS — 3 cards apiladas a 1 columna; chevrons de nav ocultos
(controles decorativos: con las 3 cards apiladas visibles, toda la info
—cita, avatar, nombre, rol— queda a la vista; no se pierde nada). ---- */
.ayc-native .ayc-tst-card {
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.ayc-native [data-id="581ginu8"] .ayc-tst-chev,
.ayc-native .ayc-tst-chev {
display: none !important;
}
/* ---- CTA FINAL — tarjeta a ancho casi completo ---- */
.ayc-native.ayc-native[data-id="acc-cta-sec"] > .e-con {
max-width: 94% !important;
}
.ayc-native.ayc-native[data-id="acc-cta-sec"] .elementor-button {
white-space: normal;
max-width: 100%;
}
}
/* ============================================================================
FIX HERO (2026-06-23): al suprimir el disclaimer de inmigración (Excel r4), el
botón quedó como ÚLTIMO elemento del hero y la tarjeta intro (solape negativo)
lo invadía 41px. En Advisors el disclaimer iba DEBAJO del botón y absorbía ese
solape. Reponemos ese espacio bajo el botón de Accountants → el botón libra el
intro con holgura (como Advisors), SIN re-mostrar el disclaimer.
============================================================================ */
.ayc-native.ayc-native [data-id="acchf64f73"] {
margin-bottom: 78px !important;
}