.elementor-kit-5{--e-global-color-primary:#1A2B4A;--e-global-color-secondary:#FAF8F4;--e-global-color-text:#5A6478;--e-global-color-accent:#A67C3F;--e-global-color-ink:#1A2B4A;--e-global-color-bg:#FAF8F4;--e-global-color-accenttext:#8A6633;--e-global-color-accentbutton:#7A5A2D;--e-global-color-muted:#5A6478;--e-global-color-border:#E5E0D8;--e-global-color-surface:#FFFFFF;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.65em;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;background-color:#FAF8F4;color:#1A2B4A;font-family:"Inter", Sans-serif;font-size:18px;font-weight:400;line-height:1.65em;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#1A2B4A;font-family:"Inter", Sans-serif;font-size:16px;font-weight:600;line-height:1em;color:#FAF8F4;border-radius:2px 2px 2px 2px;padding:16px 32px 16px 32px;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:#7A5A2D;color:#FAF8F4;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#1A2B4A;text-decoration:underline;}.elementor-kit-5 a:hover{color:#8A6633;}.elementor-kit-5 h1{color:#1A2B4A;font-family:"Playfair Display", Sans-serif;font-size:52px;font-weight:600;line-height:1.15em;}.elementor-kit-5 h2{color:#1A2B4A;font-family:"Playfair Display", Sans-serif;font-size:38px;font-weight:600;line-height:1.2em;}.elementor-kit-5 h3{color:#1A2B4A;font-family:"Inter", Sans-serif;font-size:24px;font-weight:600;line-height:1.3em;}.elementor-kit-5 h4{color:#1A2B4A;font-family:"Inter", Sans-serif;font-size:20px;font-weight:600;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{font-size:16px;line-height:1.6em;}.elementor-kit-5 h1{font-size:34px;line-height:1.2em;}.elementor-kit-5 h2{font-size:28px;line-height:1.25em;}.elementor-kit-5 h3{font-size:21px;line-height:1.35em;}.elementor-kit-5 h4{font-size:18px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ============================================================ KADIMA - Global Kit CSS Source: build/elementor-kit-custom.css (fuente local de verdad) Base estructural de 4A + las doce clases de 4D. ============================================================ */ :root { --e-global-color-ink: #1A2B4A; --e-global-color-bg: #FAF8F4; --e-global-color-accent-text: #8A6633; --e-global-color-accent-button: #7A5A2D; --e-global-color-muted: #5A6478; --e-global-color-border: #E5E0D8; --e-global-color-surface: #FFFFFF; } /* ---------- FAQ block - Decision 09.5 (highest-risk item) ---------- */ .kadima-faq details { border-bottom: 1px solid var(--e-global-color-border); padding: 20px 0; } .kadima-faq details:last-of-type { border-bottom: none; } .kadima-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 20px; line-height: 1.35; color: var(--e-global-color-ink); } .kadima-faq summary::-webkit-details-marker { display: none; } .kadima-faq summary::after { content: ""; flex: 0 0 10px; width: 10px; height: 10px; border-right: 2px solid var(--e-global-color-accent); border-bottom: 2px solid var(--e-global-color-accent); transform: rotate(45deg); transition: transform .2s ease; } .kadima-faq details[open] summary::after { transform: rotate(-135deg); } .kadima-faq details > p { margin: 12px 0 0; max-width: 720px; font-size: 18px; line-height: 1.65; color: var(--e-global-color-ink); } @media (max-width: 767px) { .kadima-faq summary { font-size: 18px; } .kadima-faq details > p { font-size: 16px; } } /* ---------- Editorial measure ---------- */ .kadima-prose { max-width: 720px; } /* ============================================================ HEADER ============================================================ */ .kadima-header { background: var(--e-global-color-bg); border-bottom: 1px solid var(--e-global-color-border); } .kadima-header__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; } .kadima-header__logo { font-family: var(--e-global-typography-primary-font-family), serif; font-size: 24px; font-weight: 600; color: var(--e-global-color-ink); text-decoration: none; } .kadima-nav__list, .kadima-nav__sub { list-style: none; margin: 0; padding: 0; } .kadima-nav__list { display: flex; align-items: center; gap: 28px; } .kadima-nav__list > li { position: relative; } .kadima-nav__list a, .kadima-nav__toggle { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 16px; font-weight: 600; color: var(--e-global-color-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; } .kadima-nav__toggle::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid var(--e-global-color-accent); border-bottom: 2px solid var(--e-global-color-accent); transform: rotate(45deg) translateY(-2px); } .kadima-nav__sub { position: absolute; top: 100%; left: 0; z-index: 999; min-width: 260px; padding: 8px 0; background: var(--e-global-color-surface); border: 1px solid var(--e-global-color-border); opacity: 0; visibility: hidden; transition: opacity .15s ease; } .kadima-nav__parent:hover > .kadima-nav__sub, .kadima-nav__parent:focus-within > .kadima-nav__sub { opacity: 1; visibility: visible; } .kadima-nav__sub a { display: flex; padding: 0 20px; font-weight: 400; width: 100%; } .kadima-nav__sub a:hover { color: var(--e-global-color-accent-text); } .kadima-header__actions { display: flex; align-items: center; gap: 20px; } .kadima-header__phone { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 16px; font-weight: 600; color: var(--e-global-color-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .kadima-header__cta { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 16px; font-weight: 600; line-height: 1; color: var(--e-global-color-bg); background: var(--e-global-color-ink); padding: 16px 32px; border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .kadima-header__cta:hover { background: var(--e-global-color-accent-button); } @media (max-width: 1024px) { .kadima-header__inner { flex-wrap: wrap; min-height: 64px; padding: 12px 16px; } .kadima-nav { order: 3; width: 100%; } .kadima-nav__list { flex-wrap: wrap; gap: 16px; } .kadima-nav__sub { position: static; opacity: 1; visibility: visible; border: none; background: transparent; padding: 0 0 0 16px; } } /* ============================================================ FOOTER ============================================================ */ .kadima-footer { background: var(--e-global-color-bg); border-top: 1px solid var(--e-global-color-border); padding: 64px 24px 48px; } .kadima-footer__cta { max-width: 1200px; margin: 0 auto 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 20px; color: var(--e-global-color-ink); } .kadima-footer__cta-button { font-size: 16px; font-weight: 600; line-height: 1; color: var(--e-global-color-bg); background: var(--e-global-color-ink); padding: 16px 32px; border-radius: 2px; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .kadima-footer__cta-button:hover { background: var(--e-global-color-accent-button); } .kadima-footer__cta a { color: var(--e-global-color-ink); } .kadima-footer__columns { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 1024px) { .kadima-footer__columns { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .kadima-footer__columns { grid-template-columns: 1fr; } } .kadima-footer__heading { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--e-global-color-accent-text); margin: 0 0 16px; } .kadima-footer__col ul { list-style: none; margin: 0; padding: 0; } .kadima-footer__col li { margin: 0; } .kadima-footer__col a { font-size: 15px; line-height: 1.5; color: var(--e-global-color-ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; } .kadima-footer__col a:hover { color: var(--e-global-color-accent-text); text-decoration: underline; } /* LOCKED - Decision 09.4: NAP + licence block is ink, never muted, never below 14px. */ .kadima-footer__nap p { margin: 0 0 6px; font-size: 15px; line-height: 1.5; color: var(--e-global-color-ink); } .kadima-footer__nap a { color: var(--e-global-color-ink); text-decoration: none; min-height: 0; display: inline; } /* ============================================================ Sub-fase 4D: las doce clases de cuerpo de pagina Contraste verificado 2026-08-12 (decision-09 seccion 9.3). ============================================================ */ .kadima-crumbs { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.4; color: var(--e-global-color-accent-text); margin: 0 0 4px; } .kadima-crumbs a { color: var(--e-global-color-accent-text); text-decoration: none; } .kadima-crumbs a:hover { text-decoration: underline; } .kadima-crumbs span[aria-hidden] { opacity: .5; margin: 0 4px; } .kadima-crumbs > span:last-child { color: var(--e-global-color-muted); } .kadima-cta-row { margin: 4px 0 0; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; } a.kadima-phone { color: var(--e-global-color-ink); text-decoration: none; border-bottom: 2px solid var(--e-global-color-accent); padding-bottom: 2px; display: inline-block; min-height: 44px; } a.kadima-phone:hover { color: var(--e-global-color-accent-text); border-bottom-color: var(--e-global-color-accent-text); } .kadima-trustbar { margin: 0; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1.5; text-align: center; color: var(--e-global-color-ink); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .kadima-trustbar > span { display: inline-flex; align-items: center; } .kadima-trustbar > span + span::before { content: ""; flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--e-global-color-accent); margin: 0 14px; } /* El color invertido va bajo modificador y NO suelto. La barra tiene fondo blanco por setting de contenedor en las 26 paginas; poner cream sitewide la volveria invisible en las 25 que todavia no tienen el contenedor navy. Cada tipo de pagina recibe el modificador en su propio pase de composicion. */ .kadima-trustbar--invert { color: var(--e-global-color-bg); } /* En mobile los chips rompian en una linea cada uno con el punto colgando al inicio. Vertical con filete fino entre items: se lee como lista, no como texto roto. */ @media (max-width: 767px) { .kadima-trustbar { font-size: 14px; line-height: 1.6; flex-direction: column; } .kadima-trustbar > span { width: 100%; justify-content: center; padding: 7px 0; } .kadima-trustbar > span + span::before { display: none; } .kadima-trustbar > span + span { border-top: 1px solid var(--e-global-color-border); } .kadima-trustbar--invert > span + span { border-top-color: color-mix(in srgb, var(--e-global-color-bg) 22%, transparent); } } /* ---------- Los bloques de ancho completo, que no lo eran ---------- Elementor pone align-items: center en .e-con-inner, asi que un widget de bloque se dimensiona por su contenido y no por el contenedor. Medido en /bathroom-remodeling/ el 2026-08-14, dentro de una seccion de 1200: .kadima-badges 864px los 3 badges y su filete, cortos .kadima-cards 995px la grilla y su filete bronce, cortos .kadima-subservices 1200px zafaba solo porque su max-content pasa 1200 Y en la home, con las fotos de las cards en lazy, la grilla media 778px antes de que cargaran y 1200 despues: un salto de layout en cada visita. Los tres son de ancho completo por definicion, asi que se les fija. */ .e-con-inner > .elementor-widget:has(> .kadima-cards), .e-con-inner > .elementor-widget:has(> .kadima-subservices), .e-con-inner > .elementor-widget:has(> .kadima-badges) { align-self: stretch; width: 100%; } /* ---------- 4. Tarjetas de sub-servicio, con filete bronce ---------- */ .kadima-subservices { max-width: none; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-top: 40px; border-top: 3px solid var(--e-global-color-accent); } @media (max-width: 767px) { .kadima-subservices { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; } } .kadima-svc { background: var(--e-global-color-surface); border: 1px solid var(--e-global-color-border); padding: 32px 28px; display: flex; flex-direction: column; } .kadima-svc h3 { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--e-global-color-ink); margin: 0 0 12px; } .kadima-svc p { font-size: 17px; line-height: 1.6; color: var(--e-global-color-ink); margin: 0 0 16px; } .kadima-svc p:last-child { margin-bottom: 0; margin-top: auto; } .kadima-steps { display: grid; gap: 32px; } .kadima-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; align-items: start; } .kadima-step-n { font-family: var(--e-global-typography-primary-font-family), serif; font-size: 44px; font-weight: 600; line-height: 1; color: var(--e-global-color-accent); grid-row: span 2; align-self: start; } .kadima-step h3 { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--e-global-color-ink); margin: 6px 0 8px; } .kadima-step p { margin: 0; max-width: 62ch; } @media (max-width: 767px) { .kadima-steps { gap: 24px; } .kadima-step { grid-template-columns: 44px 1fr; column-gap: 14px; } .kadima-step-n { font-size: 32px; } } .kadima-badges { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 767px) { .kadima-badges { grid-template-columns: 1fr; gap: 14px; } } .kadima-badge { background: var(--e-global-color-surface); border: 1px solid var(--e-global-color-border); border-top: 3px solid var(--e-global-color-accent); padding: 24px 20px; text-align: center; display: flex; flex-direction: column; gap: 6px; } .kadima-badge strong { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--e-global-color-ink); } .kadima-badge span { font-size: 15px; line-height: 1.4; color: var(--e-global-color-muted); } p.kadima-more { margin: 20px 0 0; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 16px; font-weight: 600; line-height: 1.4; } p.kadima-more a { color: var(--e-global-color-accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } p.kadima-more a::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); } p.kadima-more a:hover { text-decoration: underline; } .kadima-nap p { font-size: 17px; line-height: 1.7; color: var(--e-global-color-ink); margin: 0 0 14px; } .kadima-nap p:last-child { margin-bottom: 0; } .kadima-nap a { color: var(--e-global-color-ink); } .kadima-nap a.kadima-phone { font-size: 20px; border-bottom-width: 2px; min-height: 0; } /* ============================================================ Sub-fase 4D: las tres areas libres (decision-09 seccion 9.2) Fuente comentada: build/4D-free-areas.css ============================================================ */ /* ---------- Area 1: filetes y reglas ---------- */ .kadima-rule { display: block; width: 72px; height: 3px; margin: 20px 0 0; background: var(--e-global-color-accent); } .kadima-cut { width: 100%; max-width: 760px; height: 0; margin: 0 auto; border-top: 1px solid var(--e-global-color-border); } .kadima-open { width: 100%; height: 3px; background: var(--e-global-color-accent); } .kadima-subservices, .kadima-badge { border-top-color: var(--e-global-color-accent); } .kadima-step { position: relative; } .kadima-step:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 58px; bottom: -32px; width: 1px; background: var(--e-global-color-accent); opacity: .45; } @media (max-width: 767px) { .kadima-step:not(:last-child)::before { left: 21px; top: 42px; bottom: -24px; } } /* ---------- Area 2: iconografia, peso de linea 1.5 en viewBox 24. Mapeo verificado contra el HTML servido: 1 y 2 licencias, 3 seguro. ---------- */ .kadima-badge::before { content: ""; display: block; width: 26px; height: 26px; background-color: var(--e-global-color-accent); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; margin: 0 auto 12px; } .kadima-badge:nth-child(1)::before, .kadima-badge:nth-child(2)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.75 4.75 5.5v6.1c0 4.4 3 8.2 7.25 9.65 4.25-1.45 7.25-5.25 7.25-9.65V5.5Z'/%3E%3Cpath d='m8.9 11.9 2.2 2.2 4-4.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.75 4.75 5.5v6.1c0 4.4 3 8.2 7.25 9.65 4.25-1.45 7.25-5.25 7.25-9.65V5.5Z'/%3E%3Cpath d='m8.9 11.9 2.2 2.2 4-4.2'/%3E%3C/svg%3E"); } .kadima-badge:nth-child(3)::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 12.25a9.25 9.25 0 0 1 18.5 0Z'/%3E%3Cpath d='M12 3v-.9'/%3E%3Cpath d='M12 12.25v6.4a2.35 2.35 0 0 1-4.7 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.75 12.25a9.25 9.25 0 0 1 18.5 0Z'/%3E%3Cpath d='M12 3v-.9'/%3E%3Cpath d='M12 12.25v6.4a2.35 2.35 0 0 1-4.7 0'/%3E%3C/svg%3E"); } @supports not ((-webkit-mask-image: none) or (mask-image: none)) { .kadima-badge::before { display: none; } } /* ---------- Area 3: hero. El modificador va en el widget, no en el contenedor: Elementor no emite _css_classes en un contenedor flex. Verificado 2026-08-13. ---------- */ .kadima-hero-media { overflow: hidden; background: var(--e-global-color-border); } .kadima-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: 100%; } .kadima-hero-media--band { width: 100%; margin-top: 40px; aspect-ratio: 21 / 9; } @media (max-width: 900px) { .kadima-hero-media--band { aspect-ratio: 3 / 2; margin-top: 28px; } } /* La cadena larga no es capricho. Elementor limita el ancho de los widgets con .e-con.e-con > .e-con-inner > .elementor-widget { max-width:100% }, que es specificity (0,4,0); cualquier cosa mas corta pierde y el frame portrait salia a 1200 de ancho por 1600 de alto. Medido el 2026-08-13. */ .e-con.e-con > .e-con-inner > .kadima-hero-media--split { width: 100%; max-width: 440px; margin: 40px auto 0; aspect-ratio: 3 / 4; border-top: 3px solid var(--e-global-color-accent); } @media (max-width: 900px) { .e-con.e-con > .e-con-inner > .kadima-hero-media--split { max-width: 100%; margin-top: 28px; aspect-ratio: 4 / 3; } } /* ---------- Hero full-bleed con overlay navy ---------- Reemplaza al split 50/50 (decision del 2026-08-15). La foto cubre toda la seccion, encima va un overlay navy plano y el texto cream a la izquierda. El 70% no es estetico, es el piso que garantiza AA sin mirar la foto. Peor caso posible, foto blanca pura: el compuesto queda en L=0.1455 y cream #FAF8F4 encima da 5.10:1. Al 65% da 4.42 y no llega. Como el peor caso pasa, no hace falta subir opacidad por pagina. La imagen se posiciona contra el CONTENEDOR, no contra .e-con-inner. Por eso el inner queda estatico y son los hijos de texto los que suben con position: relative + z-index. Si el inner fuera relative, la foto quedaria encajonada en los 1200 del boxed y no seria full-bleed. Las reglas de --band y --split siguen en el kit y siguen matcheando estos mismos widgets, pero pierden: la cadena de aca es (0,5,0) contra (0,4,0). Por eso hay que anular explicitamente aspect-ratio, max-width y margin. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) { position: relative; /* isolation: isolate NO es decorativo, es lo que evita que esto rompa el menu. Elementor emite .e-con { position: var(--position); z-index: var(--z-index) } con --z-index: revert, o sea z-index auto. position relative + z-index auto NO crea contexto de apilado, asi que el ::before en z-index 1 y los hijos de texto en z-index 2 se apilaban en el contexto RAIZ, donde ya vive ul.elementor-nav-menu con z-index 2. Empate a 2, desempata orden de DOM, y el hero va despues del header: el H1 quedaba por encima del desplegable. Medido con elementFromPoint sobre el submenu de Services abierto: 3 de 8 items dejaban de recibir el click. isolation encierra el 0/1/2 adentro del hero sin pisar la perilla --z-index del editor. */ isolation: isolate; overflow: hidden; min-height: 620px; justify-content: center; padding-top: 88px; padding-bottom: 88px; } /* El overlay es un GRADIENTE, no un plano. Un plano al 70% garantiza AA pero convierte cualquier foto en barro: probado, no se veia nada. El gradiente mantiene la zona del texto oscura y deja ver la obra a la derecha. Medido sobre las 4 fotos de referencia en la caja real del texto (x 120..800, y 150..520 a 1440): entre 6.86:1 y 7.32:1 contra cream, o sea AA holgado. La meseta llega al 50% del ancho a proposito: con una rampa lineal desde 0 el contraste caia a 2.88:1 donde todavia hay texto. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media)::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgba(26, 43, 74, .94) 0%, rgba(26, 43, 74, .90) 50%, rgba(26, 43, 74, .55) 68%, rgba(26, 43, 74, .20) 85%, rgba(26, 43, 74, .12) 100%); } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) { align-items: flex-start; gap: 20px; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > * { position: relative; z-index: 2; width: auto; max-width: 660px; margin: 0; text-align: left; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; border: 0; overflow: hidden; } /* Slider del hero. Sin JS y sin libreria: las imagenes se apilan y rotan con una animacion de opacidad escalonada. Con una sola imagen no anima nada. Sirve para 2, 3 o 4 imagenes; el ciclo es 8s por imagen. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; animation: kadimaHeroFade 32s linear infinite; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img:nth-child(1) { animation-delay: 0s; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img:nth-child(2) { animation-delay: 8s; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img:nth-child(3) { animation-delay: 16s; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img:nth-child(4) { animation-delay: 24s; } /* Una sola imagen: se queda fija. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img:only-child { opacity: 1; animation: none; } @keyframes kadimaHeroFade { 0% { opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 28% { opacity: 0; } 100% { opacity: 0; } } /* Sin movimiento si el usuario lo pidio: queda la primera, fija. */ @media (prefers-reduced-motion: reduce) { [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img { animation: none; opacity: 0; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .kadima-hero-media > img:first-child { opacity: 1; } } [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) :is(h1, p, .kadima-crumbs, .kadima-crumbs a, .kadima-crumbs span) { color: var(--e-global-color-bg); } [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .kadima-crumbs a:hover { color: var(--e-global-color-bg); text-decoration: underline; } /* Boton solido cream. La regla sitewide del boton navy es (0,3,0) y esta es (0,6,0), asi que gana sin !important. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .elementor-widget-button .elementor-button { background-color: var(--e-global-color-bg); color: var(--e-global-color-ink); } /* El par de estado lleva la cadena ENTERA a proposito. La regla de reposo de arriba es (0,6,0) y la de estado sitewide del kit es (0,4,0): con una cadena corta, el reposo le gana al boton incluso con el puntero encima y el hover no existiria. Con la cadena completa mas la pseudo-clase queda (0,7,0) y gana. Y el relleno es border #E5E0D8, no accent: accent con texto ink da 3.75:1 y el label del boton es 16px/600, o sea texto normal, umbral 4.5. #E5E0D8 da 10.7:1. Accent solo pasa a 19px/700, que es el caso de .kadima-mark-cta, no este. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .elementor-widget-button .elementor-button:hover, [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .elementor-widget-button .elementor-button:focus-visible { background-color: var(--e-global-color-border); color: var(--e-global-color-ink); } /* Boton outline cream: el telefono. Hay que anular el border-bottom bronce que trae a.kadima-phone del kit, si no queda un borde de 2 colores. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) a.kadima-phone { color: var(--e-global-color-bg); border: 2px solid var(--e-global-color-bg); border-radius: 2px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; min-height: 56px; font-size: 16px; line-height: 1; } /* Los dos tienen que medir lo mismo. Sin esto la altura de cada uno sale de su propio padding y no del par: medido en las 22 paginas, boton 62px contra telefono 46px, y 16px de diferencia entre dos piezas pegadas se lee como un error de armado. Se fija la altura en los dos y el padding vertical pasa a 0, asi ninguno queda atado al button_padding del kit. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .elementor-widget-button .elementor-button { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding-top: 0; padding-bottom: 0; } /* Idem el telefono: reposo (0,5,1) contra a.kadima-phone:hover del kit (0,2,1). Cadena completa, y con el par de foco de teclado que faltaba. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) a.kadima-phone:hover, [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) a.kadima-phone:focus-visible { background: var(--e-global-color-bg); color: var(--e-global-color-ink); border-color: var(--e-global-color-bg); } /* El .kadima-cta-row envuelve al telefono en algunas paginas y trae font-size 20 y margin propio. Aca el tamano lo manda el boton. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .kadima-cta-row { margin: 0; font-size: 16px; } /* ---------- El par de CTA del hero: en fila en desktop, apilado en movil ---------- Dos formas de markup conviven y las dos tienen que dar el mismo resultado. Forma 1, dos paginas (/ y /bathroom-remodeling/): boton y telefono viven en un .e-con anidado con content_width full, o sea sin .e-con-inner propio. Un .e-con de Elementor es flex COLUMN por defecto, asi que el par salia uno abajo del otro aunque tuviera contenedor propio. Faltaba el flex-direction, no el gap. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .e-con { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 16px; width: auto; } /* Forma 2, las otras 20 paginas: no hay contenedor, el boton y el telefono son dos hijos sueltos del .e-con-inner, que tambien es flex column. No se envuelven en markup nuevo: el inner pasa a fila con wrap, y todo hijo que no sea del par se lleva su renglon entero con flex-basis 100%. El par queda con basis auto y, por ser adyacentes, comparte renglon. La compuerta es :has(> .elementor-widget-button). En las 2 paginas de la forma 1 el boton no es hijo directo del inner, y en las 4 sin CTA no hay boton: esas 6 no entran aca y siguen en columna. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 16px; row-gap: 20px; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) > * { flex: 0 0 100%; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) > .elementor-widget-button, [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) > .elementor-widget-html:has(a.kadima-phone) { flex: 0 0 auto; } @media (max-width: 900px) { [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) { min-height: 460px; padding-top: 64px; padding-bottom: 64px; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > * { max-width: 100%; } /* Movil: el par se apila y los dos botones toman el ancho completo. Las dos formas se vuelven a nombrar enteras porque una media query no suma especificidad: contra un :has() de base, la rama movil escrita corta pierde. Ver la regla de :has() en breakpoints en CLAUDE.md. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media) > .e-con { flex-direction: column; align-items: stretch; gap: 16px; width: 100%; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) { row-gap: 16px; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) > .elementor-widget-button, [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:has(> .kadima-hero-media):has(> .elementor-widget-button) > .elementor-widget-html:has(a.kadima-phone) { flex: 0 0 100%; } /* Boton alargado: ancho completo y label centrado. Los 56px de alto vienen de la regla base; aca solo cambia el ancho y sube un punto la tipografia, que a ancho completo tiene lugar de sobra. Barra de lado a lado en vez de dos etiquetas sueltas, y muy por encima de los 44px de destino tactil. */ [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) .elementor-widget-button .elementor-button, [data-elementor-type="wp-page"] > .e-con:first-of-type:has(.kadima-hero-media) a.kadima-phone { display: flex; width: 100%; font-size: 17px; } } /* ---------- Hero tipografico: las 16 paginas sin foto ---------- Diagnostico medido en /home-remodeling-scarsdale-ny/ el 2026-08-15, y el problema no era el ancho. El contenedor es flex column con align-items: center, asi que CADA hijo se dimensiona por su contenido y se centra por su cuenta. Los bordes izquierdos medidos eran 547 / 295 / 134 / 642 / 612: cinco ejes distintos. Se leia como cinco cosas centradas, no como un hero. Por que 860 y no 720: a 720 el H1 pasa de una linea a dos y el hero sube de 672 a 761px, o sea MAS alto. A 860 el H1 aguanta una linea y, con el padding de seccion en 64, el hero baja a 637. Medido, no estimado. `width: 100%` en los hijos es lo que unifica el eje. Sin eso, capar el contenedor solo angosta a los dos hijos largos y quedan cuatro ejes. La compuerta va con :not(:has()) y no con :has() anidado: `:has()` dentro de `:has()` es invalido y la regla entera se descarta en silencio. Por eso el padding se ataja sobre el contenedor con :not(:has(.kadima-hero-media)) y no sobre el contenedor que contiene un inner sin imagen. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:not(:has(> .kadima-hero-media)) { max-width: 860px; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:not(:has(> .kadima-hero-media)) > * { width: 100%; max-width: 100%; } [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:not(:has(> .kadima-hero-media)) :is(h1, p, nav) { text-align: center; } /* El boton es hijo directo del widget, no hay .elementor-button-wrapper, y el CSS de pagina le pone text-align: start al widget. Hay que nombrar el widget. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:not(:has(> .kadima-hero-media)) > .elementor-widget-button { text-align: center; } /* La home mete el boton y el telefono en un contenedor anidado, en vez de dos widgets sueltos como las otras 15. Es flex, asi que text-align no lo mueve: hay que centrarlo con justify-content. Sin esto el par queda 247px a la izquierda del eje mientras todo lo de arriba esta centrado. Y el contenedor es content_width: full, o sea que NO tiene .e-con-inner: hay que nombrar el .e-con directo. Medido en / el 2026-08-15. */ [data-elementor-type="wp-page"] > .e-con:first-of-type > .e-con-inner:not(:has(> .kadima-hero-media)) > .e-con { justify-content: center; } [data-elementor-type="wp-page"] > .e-con:first-of-type:not(:has(.kadima-hero-media)) { padding-top: 64px; padding-bottom: 64px; } /* ---------- Desplegables del header ---------- Elementor los sirve con su panel blanco y su hover gris #3F444B, que no es de esta paleta. El panel pasa a navy con texto cream y filo bronce arriba, igual que la barra de las tarjetas. El hover NO usa bronce como color de texto: #A67C3F sobre #1A2B4A da 3.6:1 y el item es de 15px normal, umbral 4.5. Se invierte el par, cream de fondo y navy de texto, que da 12.9:1 y es el mismo gesto que el boton del hero. Especificidad: widget-nav-menu.min.css pinta el item en (0,2,0) y post-38.css en (0,3,0). Nombrar el widget deja estas en (0,4,0) y ganan sin !important. */ .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown { background-color: var(--e-global-color-ink); border-top: 3px solid var(--e-global-color-accent); box-shadow: 0 18px 40px rgba(26, 43, 74, .22); padding: 6px 0; min-width: 210px; } .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item { color: var(--e-global-color-bg); background-color: transparent; padding: 12px 24px; font-size: 15px; line-height: 1.35; border-left: 0; border-bottom: 1px solid rgba(250, 248, 244, .10); } .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown li:last-child > .elementor-sub-item, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown li:last-child > .elementor-item { border-bottom: 0; } .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item:hover, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item:focus-visible, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:hover, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:focus-visible, .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item.elementor-item-active { background-color: var(--e-global-color-bg); color: var(--e-global-color-ink); } /* En movil el panel ocupa el ancho de la barra y no necesita el ancho minimo. */ @media (max-width: 767px) { .elementor-location-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown { min-width: 0; box-shadow: 0 18px 40px rgba(26, 43, 74, .34); } } /* ---------- Area 3: grid de portfolio, estatico, nunca carousel ---------- */ .kadima-cards { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 40px; border-top: 3px solid var(--e-global-color-accent); } /* Cuatro cards entran mejor en 2x2 que en 3 + 1 huerfana. La regla cuenta sola, asi que no hay que acordarse de poner un modificador en el markup. */ .kadima-cards:has(> .kadima-card:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 1024px) { .kadima-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* El :has le gana por specificity a un media query que solo lleve .kadima-cards, asi que la fila de 4 hay que nombrarla tambien aca. Sin esto las cards salen a 152px de ancho en un telefono. Medido a 390px. */ @media (max-width: 640px) { .kadima-cards, .kadima-cards:has(> .kadima-card:nth-child(4):last-child) { grid-template-columns: 1fr; gap: 22px; padding-top: 28px; } } .kadima-card { background: var(--e-global-color-surface); border: 1px solid var(--e-global-color-border); display: flex; flex-direction: column; } .kadima-card figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--e-global-color-border); } .kadima-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; max-width: 100%; } .kadima-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .kadima-card h3 { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--e-global-color-ink); margin: 0; } .kadima-card p { font-size: 15px; line-height: 1.55; color: var(--e-global-color-muted); margin: 0; } .kadima-card--ba figure { aspect-ratio: 2 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--e-global-color-accent); } .kadima-card--ba figure img { aspect-ratio: 1 / 1; } .kadima-card--ba .kadima-card-body::before { content: "Before / After"; font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--e-global-color-accent-text); } /* .kadima-cards-empty: ESTADO TRANSITORIO hasta que lleguen fotos nuevas de proyectos. Reemplazar por .kadima-cards con 3 cards por hub cuando esten disponibles. Ver build/photo-audit-and-assignment.md, seccion 8, los 35 frames pedidos a Hector, y seccion 7, por que hoy no hay ninguna foto libre. Por que un mensaje y no un grid en blanco: 4B-status.md seccion 8. Un grid vacio se lee como roto; el mensaje se lee como nuevo. Por que no repetir aca la foto del hero de la misma pagina: la prueba visual ya esta arriba. La misma foto 800px mas abajo con otro label no suma prueba, resta credibilidad. En la home se acepto duplicar porque la portada sin ninguna obra terminada queda coja; un hub no tiene ese problema. */ .kadima-cards-empty { grid-column: 1 / -1; padding: 56px 24px; text-align: center; font-size: 17px; line-height: 1.6; color: var(--e-global-color-ink); background: var(--e-global-color-surface); border: 1px dashed var(--e-global-color-border); } .kadima-section--lift { background: var(--e-global-color-surface); } /* ---------- Area 3 bis: la escala tipografica, que no estaba llegando ---------- Elementor emite un tamano por cada .elementor-size-*, y los widgets del build usan elementor-size-default, que no tiene regla. Caian a inherit, o sea al body: TODOS los titulos del sitio renderizaban a 18px. Medido en el DOM servido de / el 2026-08-13, no deducido. */ .elementor-widget-heading h1.elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), serif; font-size: 52px; font-weight: 600; line-height: 1.15; color: var(--e-global-color-ink); } .elementor-widget-heading h2.elementor-heading-title { font-family: var(--e-global-typography-primary-font-family), serif; font-size: 38px; font-weight: 600; line-height: 1.2; color: var(--e-global-color-ink); } /* Constraint 3: Playfair queda en h1 y h2, de h3 para abajo va la sans. */ .elementor-widget-heading h3.elementor-heading-title { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--e-global-color-ink); } .elementor-widget-heading h4.elementor-heading-title { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--e-global-color-ink); } @media (max-width: 767px) { .elementor-widget-heading h1.elementor-heading-title { font-size: 34px; line-height: 1.2; } .elementor-widget-heading h2.elementor-heading-title { font-size: 28px; line-height: 1.25; } .elementor-widget-heading h3.elementor-heading-title { font-size: 21px; line-height: 1.35; } .elementor-widget-heading h4.elementor-heading-title { font-size: 18px; } } /* El filete bronce bajo cada H2 de seccion. .kadima-prose > h2 matcheaba 0 elementos: los H2 son widgets de heading aparte y no viven dentro del prose. */ .elementor-widget-heading h2.elementor-heading-title::after { content: ""; display: block; width: 40px; height: 3px; margin: 20px auto 0; background: var(--e-global-color-accent); } /* Ritmo de seccion. .kadima-section nunca se aplico a ningun contenedor, asi que la regla de 112px apuntaba al vacio. Va sobre los contenedores de primer nivel de la pagina, con la trust bar exceptuada porque es una barra fina. */ [data-elementor-type="wp-page"] > .e-con { padding-top: 96px; padding-bottom: 96px; } [data-elementor-type="wp-page"] > .e-con:has(.kadima-trustbar) { padding-top: 18px; padding-bottom: 18px; } @media (max-width: 767px) { [data-elementor-type="wp-page"] > .e-con { padding-top: 56px; padding-bottom: 56px; } } /* ---------- Constraint 2, seccion 4.2: el CTA primario es navy ---------- Lleva [data-elementor-type] adelante por una razon concreta: los widgets de boton se construyeron referenciando el color global Accent, asi que Elementor emite .elementor-widget-button .elementor-button { background: accent } en el CSS *de cada pagina*, y post-.css carga DESPUES del kit. Con la misma specificity gana la pagina. (0,3,0) lo resuelve sin !important y sin tener que editar el widget en las 26. Medido en /bathroom-remodeling/ el 2026-08-13. */ [data-elementor-type] .elementor-widget-button .elementor-button { background-color: var(--e-global-color-ink); color: var(--e-global-color-bg); text-decoration: none; border-radius: 2px; } [data-elementor-type] .elementor-widget-button .elementor-button:hover, [data-elementor-type] .elementor-widget-button .elementor-button:focus-visible { background-color: var(--e-global-color-accent-button); color: var(--e-global-color-bg); text-decoration: none; } /* ============================================================ Promovido desde el CSS de pagina de la home, 2026-08-14. Todas estas reglas activan solo donde existe el markup que las dispara, asi que subirlas no cambia ninguna pagina que no lo tenga. El hero 50/50 subio tambien, mas arriba, en el pase del service hub: post 92 quedo vacio. ============================================================ */ .kadima-card-label { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--e-global-color-accent-text); } .kadima-card h4 { font-family: var(--e-global-typography-secondary-font-family), sans-serif; font-size: 19px; font-weight: 600; line-height: 1.3; color: var(--e-global-color-ink); margin: 0; } p.kadima-more--center { text-align: center; margin-top: 32px; } p.kadima-more--center a { justify-content: center; } .kadima-svc__icon { display: block; width: 32px; height: 32px; margin: 0 0 16px; color: var(--e-global-color-accent); } .kadima-eyebrow { font-family: var(--e-global-typography-accent-font-family), sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--e-global-color-accent-text); margin: 0 0 4px; text-align: center; } /* Alternancia de fondo por marcador: una pagina sin el marcador no cambia. */ [data-elementor-type="wp-page"] > .e-con:has(.kadima-mark-area) { background: var(--e-global-color-surface); } [data-elementor-type="wp-page"] > .e-con:has(.kadima-mark-cta) { background: var(--e-global-color-ink); } .e-con:has(.kadima-mark-cta) h2.elementor-heading-title, .e-con:has(.kadima-mark-cta) .kadima-prose p { color: var(--e-global-color-bg); } .e-con:has(.kadima-mark-cta) a.kadima-phone { color: var(--e-global-color-bg); border-bottom-color: var(--e-global-color-accent); } /* Medido: #7A5A2D sobre navy da 2.24 y el boton se pierde. El bronce display da 3.75 y pasa el 3:1 de componente; con texto navy a 19px bold entra en el umbral de texto grande, que tambien es 3:1. A 16px no pasa ninguna. */ .e-con:has(.kadima-mark-cta) .elementor-widget-button .elementor-button { background-color: var(--e-global-color-accent); color: var(--e-global-color-ink); font-size: 19px; font-weight: 700; padding: 18px 38px; } .e-con:has(.kadima-mark-cta) .elementor-widget-button .elementor-button:hover, .e-con:has(.kadima-mark-cta) .elementor-widget-button .elementor-button:focus-visible { background-color: var(--e-global-color-bg); color: var(--e-global-color-ink); } /* La banda tenia cuatro ejes de alineacion. Medido en /bathroom-remodeling/ el 2026-08-16, a 1440: el h2 arrancaba en x450, el parrafo en x368, el boton en x602 y el telefono en x368. Es el mismo defecto que tenia el hero tipografico: el contenedor es flex column con align-items: center, asi que cada hijo se dimensiona por su propio contenido y se centra por su cuenta. Se leia como cuatro cosas centradas por separado, no como una banda. `width: 100%` en los hijos es lo que unifica el eje; el max-width evita que la linea de texto se estire a los 1200 del contenedor y se vuelva ilegible. */ [data-elementor-type="wp-page"] > .e-con:has(.kadima-mark-cta) > .e-con-inner { align-items: center; } [data-elementor-type="wp-page"] > .e-con:has(.kadima-mark-cta) > .e-con-inner > * { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } .e-con:has(.kadima-mark-cta) .kadima-prose, .e-con:has(.kadima-mark-cta) .kadima-prose p, .e-con:has(.kadima-mark-cta) p.kadima-cta-row { text-align: center; max-width: 100%; } /* El boton es hijo directo del widget, no hay wrapper, y el CSS de pagina le pone text-align: start al widget. Hay que nombrar el widget, igual que en el hero. */ [data-elementor-type="wp-page"] > .e-con:has(.kadima-mark-cta) > .e-con-inner > .elementor-widget-button { text-align: center; } /* ============================================================ ANEXO 4F. Composicion del cuerpo, 2026-08-16. Todo lo de aca abajo activa solo donde existe el markup que lo dispara, asi que una pagina sin recomponer no cambia. ============================================================ */ /* ============================================================ ANEXO 4F - COMPOSICION DEL CUERPO. Once componentes. Se agrega AL FINAL de build/elementor-kit-custom.css y se manda dentro del objeto COMPLETO del kit (post 5) en una sola llamada. Ningun bloque de aca abajo redefine una regla que ya exista en el archivo; los cuatro overrides deliberados van marcados como OVERRIDE. ============================================================ */ /* ---------- 4F.0 Tokens derivados ---------- Los tres son mezclas y no se pueden expresar con una var sola, asi que el literal va primero como base y el @supports lo reemplaza por la mezcla real del token en cuanto el navegador soporta color-mix. Los literales son el valor exacto de ink y accent, no aproximaciones. */ :root { --k-gap: 24px; --k-box: #FFFFFF; /* fondo de caja en seccion cream */ --k-tint: #F8F5F0; /* accent 8% sobre blanco */ --k-veil: rgba(26, 43, 74, .78); } @supports (color: color-mix(in srgb, red 50%, white)) { :root { --k-box: var(--e-global-color-surface); --k-tint: color-mix(in srgb, var(--e-global-color-accent) 8%, var(--e-global-color-surface)); --k-veil: color-mix(in srgb, var(--e-global-color-ink) 78%, transparent); } } /* ---------- 4F.1 Ritmo. Un marcador, una regla ---------- El compositor emite