/* PP Design System v3.1 — public.css (Fase 4, Tarea 13). Capa de PAGINA publica (tema claro) que CONSUME tokens.css (Fase 2) y la capa de componentes .pp-* (Fase 3, components.css). NO redeclara el color de marca. Alcance (Requisitos 5,6,8,9,10,16 · defectos H1,H2,H3,H4,H5,H6,H9,H10 del diseno): - Contenedor central compartido (~1280px, token --pp-content-max-width) para hero / buscador / secciones, con fondos de seccion a ancho completo (§12.A → H4). - Integracion CTA + buscador dentro del hero y reduccion de espacios (H1,H2,H3). - Correccion de contraste dark-on-dark: cabecera del banner del mapa (H "mapa"), seccion oscura del valuador (H10) y selects oscuros del buscador (H9). - Legibilidad de footer y busquedas destacadas sin reducir enlaces (H6). - Superficies publicas claras coherentes; SEO factories con/sin resultados y titulos largos apoyados en .pp-card/.pp-empty-state (Requisito 10). Reglas de estilo del archivo: - Mobile First: la base es movil; las mejoras usan @media (min-width). - Scopeado a html[data-pp-theme="light"] body:not(.wp-admin) (solo publico claro). - Nombres BEM pp-*; sin IDs para estilo; sin cadenas globales `... *{}`. - Sin copy de negocio en content: (solo ""/none). - !important SOLO donde hay que vencer los cientos de !important + prioridad 99999 de v2/child y Adifier mientras v1/v2 sigan cargados (PUENTE-F4-*). Condicion de retiro: v1/v2 desactivados en Fase 7 (< 2027-01-31). Rollback: apagar flags v3 (no restaura archivos). ============================================================ */ /* ============================================================ 1) CONTENEDOR CENTRAL DE CONTENIDO (§12.A → resuelve H4) El contenido no llega borde a borde; los fondos de seccion si pueden. Se sube el token a 1280px y se comparte por hero/buscador/secciones. ============================================================ */ html[data-pp-theme="light"]{ /* PUENTE-F4-WIDTH: sube el ancho de contenido de 1120px (v1) a 1280px. */ --pp-content-max-width:1280px !important; --pp-content-gutter:clamp(16px,4vw,48px);} html[data-pp-theme="light"] .pp-container{ width:100%;max-width:var(--pp-content-max-width,1280px); margin-inline:auto;padding-inline:var(--pp-content-gutter,24px);} /* Alinear los contenedores existentes de hero/buscador/secciones al mismo ancho. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero__inner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero-inner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-form, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero-search, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__inner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__inner{ max-width:var(--pp-content-max-width,1280px);margin-inline:auto;} /* ============================================================ 2) FONDO GLOBAL CLARO + retiro de decorativos remanentes (Requisito 9.3) ============================================================ */ html[data-pp-theme="light"], html[data-pp-theme="light"] body:not(.wp-admin){ /* F7: se retira el longhand background-color redundante (mismo valor #F8FAFC): el shorthand background con prioridad ya fija background-color y background-image a la misma especificidad; el longhand no aportaba autoridad extra. (-1 marca de peso) */ background:#F8FAFC !important;} html[data-pp-theme="light"] body:not(.wp-admin)::before, html[data-pp-theme="light"] body:not(.wp-admin)::after, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-ambient-particles, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta-wrap::before, html[data-pp-theme="light"] body:not(.wp-admin) .pp-modern-adverts::before{ background:none !important;content:none !important;display:none !important;} /* ============================================================ 3) TOKENS DE SUPERFICIE PUBLICOS A CLARO (consumidos por componentes de terceros) ============================================================ */ html[data-pp-theme="light"]{ --pp-card-surface-standard:#FFFFFF !important; --pp-card-border-standard:#E2E8F0 !important; --pp-card-border-standard-hover:#2563EB !important; --pp-card-divider-standard:#E2E8F0 !important; --pp-color-surface:#FFFFFF !important; --pp-color-surface-raised:#FFFFFF !important; --pp-color-bg:#F8FAFC !important; --pp-color-page-header:#FFFFFF !important; --pp-card-badge-sale-bg:#2563EB !important; --pp-card-badge-rent-bg:#334155 !important; --pp-card-badge-negotiable-bg:#F59E0B !important; --pp-card-badge-dark-text:#FFFFFF !important;} /* ============================================================ 4) HERO: CTA + buscador integrados y espacios reducidos (H1,H2,H3,H5) Solo espaciado/continuidad; no se reconstruye el HTML (Requisito 8.6). ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero{ padding-block:clamp(28px,5vw,56px) !important;min-height:0 !important;} /* Acercar el buscador al hero y quitar el hueco muerto entre bloques (H3). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero + .pp-home-cta, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero + .pp-home-cta-section, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero .pp-search-form, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero-search{ margin-top:clamp(16px,2.5vw,24px) !important;} /* CTA integrado en el hero: la tarjeta se apoya, no flota aislada (H2). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta-section{ margin-block:0 clamp(24px,4vw,40px) !important;} /* Continuidad de secciones: ritmo vertical 8pt uniforme, sin scroll muerto (H1,H4). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-modern-adverts, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro, html[data-pp-theme="light"] body:not(.wp-admin) .pp-how-works-upgrade, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches{ margin-block:clamp(32px,5vw,56px) !important;} /* ============================================================ 5) SUPERFICIES / TARJETAS PUBLICAS -> BLANCO (Adifier + propias) ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .white-block, html[data-pp-theme="light"] body:not(.wp-admin) .white-block-content, html[data-pp-theme="light"] body:not(.wp-admin) .white-block-title, html[data-pp-theme="light"] body:not(.wp-admin) .dashboard-box, html[data-pp-theme="light"] body:not(.wp-admin) .dasboard-chart, html[data-pp-theme="light"] body:not(.wp-admin) .profile-advert, html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card, html[data-pp-theme="light"] body:not(.wp-admin) .author-panel .messages-wrap, html[data-pp-theme="light"] body:not(.wp-admin) .pp-modern-adverts .advert-item, html[data-pp-theme="light"] body:not(.wp-admin) .random-author-ads .advert-item, html[data-pp-theme="light"] body:not(.wp-admin) .widget_adifier_posts_list li, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item.white-block{ background:#FFFFFF !important; border-color:#E2E8F0 !important;color:#111827 !important; box-shadow:var(--pp-shadow-sm,0 1px 2px rgba(15,23,42,.08));} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-media{background:#EEF2F7 !important;} /* Texto en tarjetas de aviso (Adifier). */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .adv-title, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .adv-title a, html[data-pp-theme="light"] body:not(.wp-admin) .white-block-content{color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-cat, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-cat a, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-city, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-city a, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .top-advert-meta, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-facts *, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-info *, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-published{color:#475569 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .price, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-current-price{ color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-facts > *, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-info > *, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-published{ background:#F1F5F9 !important;border-color:#E2E8F0 !important;} /* BADGES venta/alquiler/negociable — paleta v3, texto legible (no solo color). */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags{ display:flex !important;flex-wrap:wrap !important;gap:6px !important; align-items:flex-start !important;max-width:calc(100% - 70px) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-type, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .ribbon, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags > *{ position:static !important;display:inline-flex !important;align-items:center !important; border:0 !important;border-radius:8px;margin:0 !important;padding:5px 10px !important; font-weight:800 !important;font-size:11px !important;letter-spacing:.02em !important; line-height:1 !important;white-space:nowrap !important; box-shadow:0 2px 6px rgba(15,23,42,.18);color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-type.pp-card-type-sell{background:#2563EB !important;color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-type.pp-card-type-rent{background:#334155 !important;color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .ribbon.negociable, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .ribbon.negotiable{background:#F59E0B !important;color:#3D2A02 !important;-webkit-text-fill-color:#3D2A02 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .pp-card-type *, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .ribbon *{color:inherit !important;} /* Profundidad: bordes/sombras sutiles para separar superficies claras. */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item, html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-banner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-form, html[data-pp-theme="light"] body:not(.wp-admin) .white-block{ border:1px solid #E2E8F0 !important; box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item:hover, html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card:hover{ border-color:#2563EB !important;box-shadow:0 6px 16px rgba(16,24,40,.12);transform:translateY(-2px);} /* ============================================================ 6) BUSCADOR PUBLICO -> claro + selects legibles (H9: selects navy sobre claro) ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-form, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero-search, html[data-pp-theme="light"] body:not(.wp-admin) .adifier-form.quick-search-form, html[data-pp-theme="light"] body:not(.wp-admin) .labeled-main-search, html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-panel, html[data-pp-theme="light"] body:not(.wp-admin) .header-search{ background:#FFFFFF !important; border-color:#E2E8F0 !important;color:#111827 !important; box-shadow:var(--pp-shadow-sm,0 1px 2px rgba(15,23,42,.08));} /* H9: selects/inputs del buscador (Operacion/Tipo/Provincia) al esquema claro v3. */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-search-form,.pp-home-hero-search,.header-search,.labeled-main-search,.pp-mobile-search) :is(select,input,.select2-selection){ background:#FFFFFF !important; color:#111827 !important;border-color:#CBD5E1 !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-search-form,.pp-home-hero-search,.header-search,.labeled-main-search,.pp-mobile-search) ::placeholder{color:#94A3B8 !important;} /* Labels y titulos del buscador legibles (desktop + movil). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-label, html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-field label, html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-form label, html[data-pp-theme="light"] body:not(.wp-admin) .pp-mobile-search label, html[data-pp-theme="light"] body:not(.wp-admin) .pp-mobile-search .pp-search-label, html[data-pp-theme="light"] body:not(.wp-admin) .labeled-main-search label{color:#475569 !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is([class*="mobile-search"],.pp-mobile-search,.pp-search-mobile,.search-sidebar,.pp-search-drawer) :is(h2,h3,h4,h5){color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-search-btn{background:#2563EB !important;border-color:#2563EB !important;color:#FFFFFF !important;} /* ============================================================ 7) CTA "Explorar" y banner comunidad -> claro ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta-section{ background:#FFFFFF !important;border-color:#E2E8F0 !important;color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card__title{color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card__kicker, html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card__arrow{color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-cta-card__arrow{background:rgba(37,99,235,.10) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb{background:#FFFFFF !important;border-color:#E2E8F0 !important;color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__metric{color:#2563EB !important;} /* ============================================================ 8) BANNER DEL MAPA — correccion dark-on-dark de la cabecera (defecto "mapa") Evidencia (auditoria T6): .pp-map-banner__header con gradiente navy (rgb(2,11,27)) y texto #111827 (casi invisible); boton azul con texto oscuro. Fix: cabecera clara (banner es superficie clara), texto oscuro legible; texto del boton blanco sobre azul. ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__inner{ background:#FFFFFF !important;border:1px solid #E2E8F0 !important;color:#111827 !important; box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);} html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__header{ background:transparent !important;box-shadow:none;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__title{color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__eyebrow{color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__description, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__territory, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__locations, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__route{color:#475569 !important;} /* "ACTIVOS AHORA" / contador: legible (numero ilegible en baseline). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner :is(.pp-map-banner__stat,.pp-map-banner__count,[class*="active"],[class*="stat"]){color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__button, html[data-pp-theme="light"] body:not(.wp-admin) .pp-map-banner__button *{color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} /* Pagina MAPA completa (pp-mdd): superficies y textos legibles en claro. */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-mdd__map-panel,.pp-mdd__province-board,.pp-mdd__map-note,.pp-mdd__hero){ background:#FFFFFF !important;border:1px solid #E2E8F0 !important;color:#111827 !important; box-shadow:0 1px 3px rgba(16,24,40,.08);} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__map-panel :is(h1,h2,h3,h4,strong,p,td,th,li):not(.pp-mdd__real-map *), html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__province-board :is(h1,h2,h3,h4,strong,p,td,th,li){color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd :is(.pp-mdd__stat-label,.pp-mdd__meta,figcaption), html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__province-board span:not(strong){color:#475569 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__real-map, html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__real-map *{-webkit-text-fill-color:initial;} /* ============================================================ 9) VALUADOR (cuanto-vale-mi-propiedad) — H10 dark-on-dark El widget .ppv-widget es un componente propio con tema oscuro inmersivo y NO se reescribe aqui. El defecto es el TITULO/encabezado de seccion de la pagina ("Valua tu propiedad") claro-sobre-oscuro y el contenedor de pagina oscuro embebido en el publico claro. Se garantiza que el encabezado y el marco de la pagina sean legibles (texto oscuro sobre claro) sin tocar el widget. ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-valuador,.pp-valuador-section,.pp-valuador-intro,.pp-cuanto-vale,.pp-valuador-page){ background:#F8FAFC !important;color:#111827 !important;} html[data-pp-theme="light"] body.page:not(.wp-admin) :is(.pp-valuador,.pp-valuador-section,.pp-valuador-intro) :is(h1,h2,h3,p,li){color:#111827 !important;} /* El titulo de seccion del valuador debe leerse sobre el fondo claro de la pagina. */ html[data-pp-theme="light"] body:not(.wp-admin) .ppv-widget:not(.ppv-form) > :is(h1,h2,.ppv-section-title){color:#111827 !important;} /* ============================================================ 10) TARJETAS INFORMATIVAS OSCURAS -> claras (quienes-somos, como-funciona) ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-home-intro-header,.pp-home-intro-card,.pp-home-intro-card-main,.pp-how-works-upgrade__copy,.pp-how-works-upgrade__proof,.pp-how-works-upgrade__step){ background:#FFFFFF !important; border:1px solid #E2E8F0 !important;border-radius:16px;color:#111827 !important; box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-home-intro-header,.pp-home-intro-card,.pp-home-intro-card-main,.pp-how-works-upgrade__copy,.pp-how-works-upgrade__proof,.pp-how-works-upgrade__step) :is(h1,h2,h3,h4,strong,p,li,span){color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-home-intro-header,.pp-home-intro-card,.pp-how-works-upgrade__step) :is(.pp-home-intro-kicker,.pp-home-intro-eyebrow,.pp-how-works-upgrade__kicker){color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro{background:#F8FAFC !important;} /* ============================================================ 11) FOOTER + BUSQUEDAS DESTACADAS — publico CLARO diferenciado (H6, Requisito 8.5) Decision de diseno (feedback usuario): el footer publico se mantiene CLARO pero DIFERENCIADO del contenido (superficie clara levemente distinta), NUNCA el azul oscuro del panel. Tokens centralizados (no colores sueltos por template): --pp-footer-background:#F3F6FA · --pp-footer-border:#DBE3EC --pp-footer-text:#334155 · --pp-footer-text-muted:#64748B Se suben los textos muy chicos (H6 de la linea base) sin reducir la densidad de enlaces indexables (solo tamano/contraste). Mobile First (base movil). PUENTE-F4-FOOTER: !important para vencer el navy de v1/v2 y el fallback oscuro del template propio mientras v1/v2 sigan cargados (retiro Fase 7 < 2027-01-31). ============================================================ */ html[data-pp-theme="light"]{ --pp-footer-background:#F3F6FA; --pp-footer-border:#DBE3EC; --pp-footer-text:#334155; --pp-footer-text-muted:#64748B;} html[data-pp-theme="light"] body:not(.wp-admin) footer.pp-footer, html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer, html[data-pp-theme="light"] body:not(.wp-admin) .theme-footer, html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__wrap{ background:var(--pp-footer-background,#F3F6FA) !important; border-top:1px solid var(--pp-footer-border,#DBE3EC) !important; box-shadow:none !important;} /* Titulos de columna: contraste suficiente (texto principal del footer). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__nav-title{ color:var(--pp-footer-text,#334155) !important;font-size:12px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__tagline{ color:var(--pp-footer-text-muted,#64748B) !important;font-size:14px !important;} /* Enlaces del footer legibles y algo mas grandes (revisar H6). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer a, html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__nav-list a{ color:var(--pp-footer-text,#334155) !important;font-size:15px !important;line-height:1.6 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer a:hover, html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__nav-list a:hover{color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__copy{ color:var(--pp-footer-text-muted,#64748B) !important;font-size:14px !important;} /* Divisor y redes sobre la superficie clara del footer. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__divider{border-top-color:var(--pp-footer-border,#DBE3EC) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__social-link{ border-color:var(--pp-footer-border,#DBE3EC) !important;color:var(--pp-footer-text,#334155) !important;background:transparent !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-footer__social-link:hover{ border-color:#2563EB !important;color:#2563EB !important;background:rgba(37,99,235,.10) !important;} /* Busquedas destacadas: superficie clara, texto/enlaces legibles y algo mas grandes. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches{background:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches::before{background:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches :is(h2,h3){color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__eyebrow{color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__group a{color:#475569 !important;font-size:15px !important;line-height:1.55 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__group a:hover{color:#2563EB !important;text-decoration:underline;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__group{border-color:#E2E8F0 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__group:nth-child(n+3), html[data-pp-theme="light"] body:not(.wp-admin) .pp-popular-searches__group{border-top-color:#E2E8F0 !important;} /* ============================================================ 12) PAGINAS SEO POR FACTORIES (Requisito 10) Contenedor central compartido + titulos autogenerados largos que envuelven sin desbordar. Las cards/empty-state/breadcrumbs se apoyan en components.css. ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-seo-factory,.pp-seo-factory__inner,.pp-seo-factory__content){ max-width:var(--pp-content-max-width,1280px);margin-inline:auto;color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-seo-factory,.pp-seo-factory__header) :is(h1,h2){ overflow-wrap:anywhere;color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-seo-factory :is(.breadcrumbs,.pp-breadcrumbs) a{color:#475569 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-seo-factory :is(.breadcrumbs,.pp-breadcrumbs) a:hover{color:#2563EB !important;} /* ============================================================ 13) FICHA / DETALLE + PAGINAS INFORMATIVAS estaticas — legibilidad (Requisito 12.1) Solo estabilizacion visual (galeria, texto). Sin tocar logica/campos/datos. ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .owl-carousel.single-slider{background:#EEF2F7 !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(h1,h2,h3,h4,h5,h6,p,li,.elementor-heading-title,.elementor-widget-text-editor, .elementor-widget-text-editor p,.elementor-widget-text-editor li, .elementor-icon-list-text,.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-description){color:#111827 !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.pp-home-intro-card .pp-home-intro-card-desc,.elementor-widget-icon-box .elementor-icon-box-description){color:#475569 !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(a.elementor-button,.elementor-button,.pp-btn,button) :is(span,i){color:inherit !important;-webkit-text-fill-color:inherit !important;} /* ============================================================ 14) DESKTOP: el hero/buscador aprovechan el ancho sin llegar borde a borde (§12.A) Mobile First: mejoras solo a partir de min-width. ============================================================ */ @media (min-width:1024px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero__inner, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero-inner{ padding-inline:var(--pp-content-gutter,24px);} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero .pp-search-form, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-hero-search{margin-top:20px !important;} } /* ============================================================ 15) PAGINAS INFORMATIVAS (Quienes somos, Preguntas frecuentes, Como funciona) Feedback del usuario sobre capturas en vivo. Solo VISUAL (tamano/ubicacion), sin tocar el markup de Elementor ni el contenido. Mobile First. Scope: paginas (no home/blog/author/panel). Requisitos 8.2, 8.4, 9.2, 9.3, 14.x, 20.4. 15.1 BUSCADOR DESCOLOCADO EN PAGINAS INFORMATIVAS (H9 en contexto informativo) Problema: el buscador aparece con selects navy oscuros flotando suelto, con ancho/ubicacion fuera de lugar y dominando la pagina informativa. Fix: (a) esquema claro v3 ya garantizado por seccion 6 y por PUENTE-F3-INPUT; aqui se refuerza el color de selects/inputs por si el remanente v2 gana; (b) se ACOTA su ancho al contenedor central y se centra. En las seis paginas informativas v3 se oculta porque no aporta a la intencion de lectura y duplica la busqueda disponible desde la navegacion publica. ============================================================ */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.pp-search-form,.pp-home-hero-search,.header-search,.labeled-main-search,.pp-mobile-search,.quick-search-form,.adifier-form.quick-search-form){ max-width:var(--pp-content-max-width,1280px) !important; margin-inline:auto !important; background:#FFFFFF !important;border:1px solid #E2E8F0 !important; border-radius:var(--pp-radius-card,16px) !important; box-shadow:var(--pp-shadow-sm,0 1px 2px rgba(15,23,42,.08)) !important; color:#111827 !important;float:none !important;position:static !important;} /* Refuerzo claro de selects/inputs del buscador en informativas (por si v2 gana). */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.pp-search-form,.header-search,.labeled-main-search,.pp-mobile-search,.quick-search-form) :is(select,input,.select2-selection){ background:#FFFFFF !important;color:#111827 !important;border-color:#CBD5E1 !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.pp-search-form,.header-search,.labeled-main-search,.pp-mobile-search,.quick-search-form) ::placeholder{color:#94A3B8 !important;} /* El formulario no es contenido indexable. Se oculta solamente su contenedor directo en las seis informativas, sin afectar buscadores de resultados/SEO. */ html[data-pp-theme="light"] body.pp-enterprise-info-page:not(.wp-admin) > .container:has(> .row form.header-search){ display:none !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-search--suppressed{display:none !important;} /* ============================================================ 15.2 ILUSTRACIONES SOBREDIMENSIONADAS (nube verde+silueta, persona con signos, mapa de Argentina). Problema: enormes, desbordan la columna y generan grandes vacios verticales. Fix: acotar con max-width/aspect-ratio + object-fit, centrar dentro del contenedor y evitar scroll horizontal. Mobile First: base movil. Se acota la imagen de widgets Elementor y bloques de imagen en informativas. ============================================================ */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.elementor-widget-image,.elementor-image,figure.wp-block-image,.pp-info-illustration){ max-width:100% !important;margin-inline:auto !important;text-align:center !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.elementor-widget-image img,.elementor-image img,figure.wp-block-image img,.pp-info-illustration img){ display:block !important;width:auto !important;max-width:100% !important; /* cota dura de tamano: la ilustracion no debe pasar de ~360px en movil y ~440px en desktop (se amplia en el min-width mas abajo). */ max-height:clamp(200px,48vw,360px) !important; height:auto !important;margin-inline:auto !important; object-fit:contain !important;} /* ============================================================ 15.3 BALANCE DE COLUMNA DE TEXTO (2 columnas en desktop, apiladas en movil) Solo para los bloques informativos propios (.pp-home-intro*), donde controlamos la estructura. No se fuerza grid sobre columnas arbitrarias de Elementor para no romper su layout; alli basta con acotar la imagen (15.2). Mobile First: base apilada; 2 columnas recien a partir de min-width:768px. ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro-card, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro-card-main{ display:flex !important;flex-direction:column !important;gap:16px !important; align-items:flex-start !important;} @media (min-width:768px){ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.elementor-widget-image img,.elementor-image img,figure.wp-block-image img,.pp-info-illustration img){ max-height:clamp(280px,32vw,440px) !important;} /* 2 columnas equilibradas en los bloques informativos propios. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro-card, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro-card-main{ flex-direction:row !important;align-items:center !important;gap:32px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro-card > *, html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-intro-card-main > *{ flex:1 1 0 !important;min-width:0 !important;} } /* ============================================================ 15.4 VERDE LEGACY EN ILUSTRACIONES (nube, signos, checks del mapa) Estas ilustraciones son ARCHIVOS de imagen (uploads/) cuyo verde de marca (#439569/#4ba273 y turquesas #39d98a/#20e0d2) choca con la paleta azul v3. El pixel de una imagen raster NO se recolorea por CSS de forma fiable, por lo que aqui NO se aplica ningun filtro destructivo. Se REGISTRAN como color a deprecar (ver REGISTRO-F4.md §Verde legacy) y su reemplazo/atenuacion se hace con activos alineados a v3 en el inventario de la Tarea 3. Requisitos 3.2, 20.4. Deprecacion planificada (no se ejecuta aqui): - Quienes somos: nube verde + silueta -> version v3 (azul #2563EB / neutro). - Preguntas frecuentes: persona con signos de pregunta verdes -> version v3. - Mapa de Argentina: checks/acentos verdes -> acentos azules v3. Mientras exista el activo verde, el marco/tarjeta que lo contiene se mantiene neutro (blanco + borde #E2E8F0) para no amplificar el contraste de marca. */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.pp-info-illustration,.elementor-widget-image){background:transparent !important;} /* ============================================================ 15.5 CONTACTO (email/enviar) y TERMINOS Y CONDICIONES (firma de documento) Feedback en vivo: la ilustracion de email/enviar (Contacto) y la de firma de documento (Terminos y Condiciones) se ven enormes; la de T&C ademas DESBORDA por debajo del fold sobre una CAJA OSCURA embebida en el publico claro. Fix (solo visual, sin tocar markup de Elementor): (a) el tamano ya queda acotado por §15.2 (max-height/object-fit); aqui se refuerza que la ilustracion NO desborde su contenedor (overflow contenido) para que no baje del fold. (b) legibilidad de la caja oscura: se ofrece la utilidad reversible .pp-info-darkbox que convierte una seccion informativa oscura en una superficie clara legible (texto oscuro sobre claro), aplicable desde el campo "CSS Classes" de Elementor (config de contenido, no edicion de codigo de terceros) y reversible por flags v3. Requisitos 5.1, 8.4, 9.2, 9.3, 14.2, 20.4. ============================================================ */ /* (a) La ilustracion informativa se contiene en su bloque (no baja del fold). */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.elementor-widget-image,.elementor-image,figure.wp-block-image,.pp-info-illustration){ overflow:hidden !important;} /* (b) Caja oscura informativa -> superficie clara legible (opt-in, reversible). Vence el fondo inline oscuro de la seccion de Elementor (T&C, Contacto). */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-info-darkbox, html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-info-darkbox .elementor-section, html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-info-darkbox .elementor-container{ background:#FFFFFF !important; border:1px solid #E2E8F0 !important;border-radius:var(--pp-radius-card,16px) !important; box-shadow:var(--pp-shadow-sm,0 1px 2px rgba(15,23,42,.08)) !important;color:#111827 !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-info-darkbox :is(h1,h2,h3,h4,h5,strong,p,li,span,a){color:#111827 !important;-webkit-text-fill-color:#111827 !important;} html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-info-darkbox :is(.elementor-heading-title):is(.pp-kicker,.pp-eyebrow){color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} /* ============================================================ 15.6 CTA "PUBLICAR AHORA" FLOTANDO (pagina Precio) — integrar al flujo Feedback en vivo: el CTA aparece aislado y centrado en la parte superior, desconectado del bloque de precios. Fix: integrarlo al flujo dentro del contenedor central, con jerarquia correcta respecto al bloque de precios y sin quedar suelto ni generar un vacio vertical arriba. Solo VISUAL; reversible. Se ofrece la utilidad opt-in .pp-precio-cta (campo "CSS Classes" de Elementor) para acotar exactamente el CTA de la pagina Precio sin afectar otros botones. Requisitos 6.3, 6.4, 8.2, 8.4, 9.3, 14.3. ============================================================ */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-precio-cta{ max-width:var(--pp-content-max-width,1280px) !important; margin:clamp(16px,2.5vw,24px) auto 0 !important; padding-inline:var(--pp-content-gutter,24px) !important; text-align:left !important;float:none !important;position:static !important;} /* El boton dentro del CTA integrado: area tactil comoda, sin quedar centrado suelto. */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-precio-cta :is(a.elementor-button,.elementor-button,.pp-button){ display:inline-flex !important;align-items:center !important;justify-content:center !important; min-height:44px !important;} /* Mobile First: en movil el CTA integrado ocupa el ancho para pulsarse facil. */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-precio-cta :is(a.elementor-button,.elementor-button,.pp-button){ width:100% !important;} @media (min-width:768px){ /* En desktop el CTA vuelve a tamano de contenido (no ancho completo). */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-precio-cta :is(a.elementor-button,.elementor-button,.pp-button){ width:auto !important;} } /* ============================================================ 16) TAG DE OPERACION SIEMPRE VISIBLE Y A LA IZQUIERDA (feedback usuario) Requisito 7.4 (contenido faltante), 8.x, 13.3 (no solo color), 10.x. El badge de operacion (venta / alquiler / negociable) debe verse SIEMPRE y SIEMPRE del lado IZQUIERDO, tanto en las tarjetas de resultados (home / resultados / SEO factories) como en la ficha de detalle. - En tarjetas: el runtime propio (pp-listing-shared-runtime) ya inserta .pp-card-type como primer hijo de .advert-tags con fallback a "Venta". Aqui se GARANTIZA su anclaje arriba-izquierda sobre la media y el orden izquierdo estable en desktop y movil, y se pinta con la paleta v3. - En detalle: el badge lo aporta el candidato pp-operation-badge-v3.php (presentacion, reversible) como .pp-op-badge a la izquierda del titulo. No se transmite la operacion solo por color: cada badge lleva su texto. ============================================================ */ /* Contenedor de tags anclado arriba-izquierda de la media (siempre a la izq.). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-modern-adverts .advert-media, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-media{position:relative !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-modern-adverts .advert-tags, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags{ position:absolute !important;top:12px !important;left:12px !important;right:auto !important; display:flex !important;flex-direction:row !important;flex-wrap:wrap !important; align-items:flex-start !important;justify-content:flex-start !important; gap:6px !important;z-index:3 !important;max-width:calc(100% - 24px) !important;} /* La operacion siempre primero (extremo izquierdo), ganando al orden del DOM. */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type{order:-1 !important;} /* Paleta v3 del badge de operacion (texto legible, no solo color). */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type{ background:#2563EB !important;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-card-type-rent{background:#334155 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-card-type-sell{background:#2563EB !important;} /* --- Badge de operacion en la FICHA DE DETALLE (aportado por el candidato PHP) --- Se apoya en .pp-badge de components.css; aqui solo posicion/espaciado a la izq. */ html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .pp-op-badge{ display:inline-flex !important;align-items:center !important; margin:0 0 10px 0 !important;padding:5px 12px !important; border-radius:var(--pp-radius-pill,999px) !important; font-size:12px !important;font-weight:800 !important;letter-spacing:.02em !important; line-height:1 !important;color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} /* La ficha alinea el badge al inicio (izquierda) del bloque de titulo. */ html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .pp-op-badge-wrap{ display:flex !important;justify-content:flex-start !important;margin:0 0 8px 0 !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .pp-op-badge--sale{background:#2563EB !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .pp-op-badge--rent{background:#334155 !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .pp-op-badge--negotiable{background:#F59E0B !important;color:#3D2A02 !important;-webkit-text-fill-color:#3D2A02 !important;} /* ============================================================ 17) ASISTENTE PP — texto de bienvenida ilegible (feedback usuario) Requisito 13.2 (contraste AA), 17.1 (no editar plugin), 17.2 (scope), 17.3. El widget de chat mwai-conversation (AI Engine, TERCERO) muestra el texto de bienvenida en gris claro casi invisible sobre blanco. Se corrige el CONTRASTE mediante overrides SCOPEADOS a --pp-* sin editar el plugin: se fija el color de texto de la conversacion a un valor AA sobre la superficie del widget y se alinean sus variables propias (--mwai-*) al token de texto de PP. Solo tema claro (publico). El equivalente para tema oscuro (panel) se resuelve en panel.css (Fase 5), fuera de esta capa. ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .mwai-window, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-chatbot, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation{ /* Alinear las variables del plugin al texto legible de PP (AA sobre blanco). */ --mwai-fontColor:#111827; --mwai-backgroundPrimaryColor:#2563EB; --pp-assistant-text:#111827; --pp-assistant-muted:#475569;} html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation .mwai-reply, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation .mwai-reply .mwai-text, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation .mwai-text, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation .mwai-name, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation p{ color:var(--pp-assistant-text,#111827) !important; -webkit-text-fill-color:var(--pp-assistant-text,#111827) !important;} /* Burbuja del asistente: superficie clara con borde para separar del fondo. */ html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation .mwai-reply.mwai-ai, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-conversation .mwai-ai .mwai-bubble{ background:#F1F5F9 !important;border:1px solid #E2E8F0 !important;} /* Requisito 17.3: acotar z-index del asistente flotante para que no tape nav. */ html[data-pp-theme="light"] body:not(.wp-admin) .mwai-widget, html[data-pp-theme="light"] body:not(.wp-admin) .mwai-window{z-index:1000 !important;} /* ============================================================ 18) FONDOS SOBRE FONDOS EN PAGINAS INFORMATIVAS (feedback usuario) Requisito 11.3 (max un nivel de anidacion), 5.4, 8.4, 13.2. En paginas claras la ilustracion trae su propia caja oscura, apilada sobre una tarjeta clara y sobre el fondo gris de la pagina (3 superficies sin jerarquia). Regla: la imagen va SIN caja o con una superficie coherente con los tokens, respetando maximo 2 niveles de superficie. Aplica a Contacto, Terminos y Condiciones, Preguntas frecuentes y Precio. (Complementa §15.4 y §15.5.) El recoloreo del raster verde es Tarea 3, no CSS (ver §15.4). ============================================================ */ /* La columna/figura de la ilustracion no aporta una tercera superficie: plana. */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) :is(.pp-info-illustration,.pp-info-flat,.elementor-widget-image,.elementor-image,figure.wp-block-image){ background:transparent !important; border:0 !important;box-shadow:none !important;} /* Si la ilustracion vive dentro de una seccion oscura propia (inline de Elementor), la utilidad opt-in .pp-info-flat la deja como superficie de pagina (sin caja). */ html[data-pp-theme="light"] body.page:not(.home):not(.blog):not(.author):not(.wp-admin) .pp-info-flat :is(.elementor-section,.elementor-container,.e-con-inner){ background:transparent !important; border:0 !important;box-shadow:none !important;} /* ============================================================ 19) HEADER PUBLICO — ESTABILIZAR EN CLARO (feedback usuario) Requisito 5.1, 5.4, 6.5, 8.x, 13.2, 14.x, 15.1, 17.2. Decision de diseno: ESTABILIZAR, NO redisenar. El header publico se mantiene CLARO (fondo blanco/gris muy claro) con la jerarquia header claro -> contenido claro -> footer claro diferenciado. El modo oscuro queda SOLO para el panel privado; no se trasladan fondos del dashboard al publico. El template pp-header.php consume tokens genericos (--pp-color-surface/-text/ -border) que v1 (pp-design-tokens.php) redefine en NAVY con !important; por eso aqui se fijan tokens de header CENTRALIZADOS y se aplican con el puente PUENTE-F4-HEADER (mismo criterio que el footer §11), para que el header gane la cascada y quede claro mientras v1/v2 sigan cargados. Colores centralizados por token (no sueltos por template): --pp-header-background:#FFFFFF · --pp-header-border:#E2E8F0 --pp-header-surface:#F8FAFC (pill/nav) · --pp-header-text:#111827 --pp-header-text-muted:#475569 Ajustes permitidos aplicados: fondo claro, borde inferior sutil, sombra minima, alineacion con --pp-content-max-width, estados hover/focus/active, header movil legible con areas tactiles y sin scroll horizontal. El boton "Publicar" mantiene protagonismo (acento azul de marca) y ya usa el icono "+" (pp-header.php). PUENTE-F4-HEADER: !important para vencer el navy de v1/v2 y el fallback oscuro del template mientras v1/v2 sigan cargados (retiro Fase 7 < 2027-01-31). Rollback: apagar flags v3 (no restaura archivos). Mobile First (base movil). ============================================================ */ html[data-pp-theme="light"]{ --pp-header-background:#FFFFFF; --pp-header-border:#E2E8F0; --pp-header-surface:#F8FAFC; --pp-header-text:#111827; --pp-header-text-muted:#475569;} /* Superficie del header: clara, borde inferior sutil, sombra minima (no navy). */ html[data-pp-theme="light"] body:not(.wp-admin) header.pp-header, html[data-pp-theme="light"] body:not(.wp-admin) .pp-header{ background:var(--pp-header-background,#FFFFFF) !important; border-bottom:1px solid var(--pp-header-border,#E2E8F0) !important; box-shadow:0 1px 2px rgba(15,23,42,.06) !important;} /* Alinear el header al contenedor central oficial (--pp-content-max-width). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__inner{ max-width:var(--pp-content-max-width,1280px) !important;} /* Navegacion central: pill clara, texto legible (contraste AA sobre blanco). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__menu{ background:var(--pp-header-surface,#F8FAFC) !important; border-color:var(--pp-header-border,#E2E8F0) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__menu a{ color:var(--pp-header-text-muted,#475569) !important;} /* Acciones (iconos login/cuenta): superficie clara, icono legible. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn:not(.pp-header__action-btn--publish){ border-color:var(--pp-header-border,#E2E8F0) !important; color:var(--pp-header-text-muted,#475569) !important;background:transparent !important;} /* "Publicar" mantiene protagonismo: azul solido y copy siempre visible. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn--publish{ border-color:#2563EB !important;color:#FFFFFF !important;} /* Hamburguesa / panel de usuario movil: claros y legibles. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__hamburger, html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__author-sidebar-btn{ border-color:var(--pp-header-border,#E2E8F0) !important; color:var(--pp-header-text,#111827) !important;background:transparent !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__author-sidebar-btn{ border-color:#2563EB !important;color:#2563EB !important;} /* Menu movil: superficie clara, enlaces/botones legibles (area tactil 44px del template). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__mobile-menu{ background:var(--pp-header-background,#FFFFFF) !important; border-top:1px solid var(--pp-header-border,#E2E8F0) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__mobile-menu ul a{ color:var(--pp-header-text,#111827) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__mobile-btn{ border-color:var(--pp-header-border,#E2E8F0) !important; color:var(--pp-header-text,#111827) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__mobile-btn--primary{ border-color:#2563EB !important;background:#2563EB !important;color:#FFFFFF !important;} /* Evitar scroll horizontal del header propio en movil (contenido acotado). */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header, html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__inner{max-width:100vw;} /* Estados hover/active del header claro (solo dispositivos con hover real). El focus-visible ya usa var(--pp-focus-ring) azul v3 desde el template. */ @media (hover:hover){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__menu a:hover{ color:#111827 !important;background:rgba(37,99,235,.06) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn:hover{ border-color:#2563EB !important;color:#2563EB !important;background:rgba(37,99,235,.08) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn--publish:hover{ background:#2563EB !important;color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__mobile-btn:hover{ border-color:#2563EB !important;background:rgba(37,99,235,.08) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__mobile-btn--primary:hover{ background:#1D4ED8 !important;border-color:#1D4ED8 !important;color:#FFFFFF !important;} } html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__menu a:active{background:rgba(37,99,235,.12) !important;} /* ============================================================ 18) RELEASE 3.1.0 — conexiones de contenido y retiro visual C3/C6 Las reglas siguientes apuntan a clases/IDs que existen en produccion. ============================================================ */ /* Las tres tarjetas "Explorar" son superficies claras, incluso frente al bloque legacy tardio que antes reinyectaba el gradiente navy. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta > .pp-cta-card{ background:#FFFFFF !important;background-image:none !important; border-color:#E2E8F0 !important;color:#111827 !important; box-shadow:0 12px 30px rgba(15,23,42,.10) !important;filter:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta > .pp-cta-card:before{ content:none !important;display:none !important;background:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta > .pp-cta-card :is(.pp-cta-card__title,.pp-cta-title){ color:#111827 !important;-webkit-text-fill-color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta > .pp-cta-card :is(.pp-cta-card__kicker,.pp-cta-kicker){ color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta > .pp-cta-card :is(.pp-cta-card__arrow,.pp-cta-arrow){ background:#EFF6FF !important;border-color:#BFDBFE !important;color:#2563EB !important;} @media (hover:hover){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-home-cta > .pp-cta-card:hover{ background:#F8FAFC !important;border-color:#93C5FD !important;color:#111827 !important; box-shadow:0 16px 34px rgba(37,99,235,.14) !important;filter:none !important;} } /* El bloque izquierdo del mapa vive sobre navy; conserva texto claro con contraste AA. El panel/cartografia mantiene sus colores propios. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline h1{ color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline .pp-mdd__lead{ color:#DBEAFE !important;-webkit-text-fill-color:#DBEAFE !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline .pp-mdd__lead strong{ color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline .pp-mdd__today span{ color:#BFDBFE !important;-webkit-text-fill-color:#BFDBFE !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline .pp-mdd__today strong{ color:#60A5FA !important;-webkit-text-fill-color:#60A5FA !important;} /* Las seis paginas informativas usan una unica superficie clara y un contenedor estable sin depender de clases manuales de Elementor. */ html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin){ background:#F8FAFC !important;color:#111827 !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) > .elementor-section{ background:#FFFFFF !important;background-image:none !important;color:#111827 !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) > .elementor-section > .elementor-container{ width:min(100%,var(--pp-content-max-width,1280px)) !important;margin-inline:auto !important; padding-inline:clamp(16px,3vw,32px) !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) :is(h1,h2,h3,h4,h5,h6,.elementor-heading-title,strong){ color:#111827 !important;-webkit-text-fill-color:#111827 !important;text-shadow:none !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) :is(p,li,.elementor-widget-text-editor,.elementor-widget-text-editor span){ color:#475569 !important;-webkit-text-fill-color:#475569 !important;} /* Ilustraciones v3: balance 2 columnas en escritorio y apilado mobile. */ html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) .elementor-widget-image{ width:100% !important;max-width:560px !important;margin-inline:auto !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) .elementor-widget-image img{ display:block !important;width:100% !important;height:auto !important;max-height:560px !important; object-fit:contain !important;object-position:center !important;border-radius:16px !important;} /* Contacto y terminos dejan de heredar cajas navy anidadas del layout C6. */ html[data-pp-theme="light"] body.pp-info-darkbox-page:not(.wp-admin) :is(.elementor-6456,.elementor-6619) :is(.elementor-section,.elementor-container,.elementor-column,.elementor-widget-wrap,.elementor-element-populated){ background-color:#FFFFFF !important;background-image:none !important;} /* Terminos contiene un segundo bloque editorial HTML con estilos navy propios. En el publico claro se convierte a superficies claras y acento azul v3. */ html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms{ color:var(--pp-text,#111827) !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms :is(h1,h2,h3,h4,h5,h6,strong,b){ color:var(--pp-text,#111827) !important; -webkit-text-fill-color:var(--pp-text,#111827) !important; text-shadow:none !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms :is(p,li){ color:var(--pp-text-muted,#475569) !important; -webkit-text-fill-color:var(--pp-text-muted,#475569) !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms .pp-terms-hero{ background:#EFF6FF !important;background-image:none !important; border:1px solid #BFDBFE !important;border-radius:20px !important; box-shadow:0 14px 34px rgba(15,23,42,.08) !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms .pp-terms-kicker{ color:#1D4ED8 !important;-webkit-text-fill-color:#1D4ED8 !important; background:#DBEAFE !important;border:1px solid #93C5FD !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms .pp-terms-grid article{ background:#FFFFFF !important;background-image:none !important; color:var(--pp-text,#111827) !important; border:1px solid var(--pp-border,#E2E8F0) !important; border-left:4px solid #2563EB !important;border-radius:16px !important; box-shadow:0 8px 24px rgba(15,23,42,.06) !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms .pp-terms-grid article > span{ color:#1D4ED8 !important;-webkit-text-fill-color:#1D4ED8 !important; background:#DBEAFE !important;border:1px solid #BFDBFE !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms .pp-terms-grid article li::marker{ color:#2563EB !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms .pp-terms-accept{ background:#EFF6FF !important;background-image:none !important; border:1px solid #BFDBFE !important;border-left:4px solid #2563EB !important; border-radius:16px !important;box-shadow:0 10px 26px rgba(15,23,42,.07) !important;} @media (max-width:767px){ html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms{ padding-inline:0 !important;} html[data-pp-theme="light"] body.page-id-6456:not(.wp-admin) .pp-terms :is(.pp-terms-hero,.pp-terms-grid article,.pp-terms-accept){ border-radius:14px !important;} } /* CTA shortcode real: azul solido, sin glow/degradado. En Precio queda dentro del flujo del contenedor y alineado con el bloque comercial. */ html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) #pp-ultra-publicar{ display:inline-flex !important;align-items:center !important;justify-content:center !important; min-height:48px !important;padding:12px 24px !important;border:1px solid #2563EB !important; border-radius:12px !important;background:#2563EB !important;background-image:none !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important; box-shadow:0 8px 20px rgba(37,99,235,.20) !important;filter:none !important;text-shadow:none !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) #pp-ultra-publicar:before, html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) #pp-ultra-publicar .pp-ultra-glow{ content:none !important;display:none !important;background:none !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) #pp-ultra-publicar .pp-ultra-text{ color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} html[data-pp-theme="light"] body.pp-precio-page:not(.wp-admin) .pp-ultra-btn-wrap{ width:min(100%,var(--pp-content-max-width,1280px)) !important;margin:20px auto 28px !important; padding-inline:clamp(16px,3vw,32px) !important;justify-content:flex-start !important;} @media (max-width:767px){ html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) :is(.elementor-2006,.elementor-3920,.elementor-6456,.elementor-6619,.elementor-10127,.elementor-10134) .elementor-widget-image img{max-height:440px !important;} html[data-pp-theme="light"] body.pp-precio-page:not(.wp-admin) #pp-ultra-publicar{width:100% !important;} } /* Variantes semanticas del tag de operacion. El texto siempre acompana al color y el runtime conserva el tag como primer elemento (arriba-izquierda). */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-badge--sale{ background:#2563EB !important;border-color:#2563EB !important;color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-badge--rent{ background:#334155 !important;border-color:#334155 !important;color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-badge--negotiable{ background:#F59E0B !important;border-color:#D97706 !important;color:#3D2A02 !important;} /* ============================================================ 19) RELEASE 3.1.4 — REAUDITORIA VISUAL SOBRE EVIDENCIA REAL ============================================================ */ /* Las informativas empiezan cerca del titulo una vez retirado el buscador global. Se eliminan CTAs superiores duplicados: cada flujo conserva sus CTA contextuales (header, bloque comercial o cierre editorial). */ html[data-pp-theme="light"] body.pp-enterprise-info-page:not(.wp-admin) > main{ margin-top:40px !important;margin-bottom:60px !important;} html[data-pp-theme="light"] body.pp-enterprise-info-page:not(.wp-admin) :is(.elementor-element-036d261,.elementor-element-314d717, .elementor-element-fa49a18,.elementor-element-8b04897, .elementor-element-3f2f27b,.elementor-element-b72e9b8){ display:none !important;} /* Portada: el CTA queda apoyado en el cierre del hero y el buscador empieza a continuacion, sin el bloque de aire que los separaba visualmente. */ html[data-pp-theme="light"] body.home:not(.wp-admin) .elementor-element-2ad0411{ margin-top:-40px !important;margin-bottom:0 !important;z-index:3 !important;} html[data-pp-theme="light"] body.home:not(.wp-admin) .elementor-element-2ad0411 .pp-btn-publicar-wrap{ padding:8px 16px !important;} html[data-pp-theme="light"] body.home:not(.wp-admin) .elementor-element-c94cef5 .pp-search-wrap{ margin-top:0 !important;margin-bottom:24px !important;} /* El header mobile conserva las tres acciones esenciales: identidad, Publicar y menu. La accion de cuenta sigue disponible dentro del menu desplegable. */ @media (max-width:860px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__inner{ gap:8px !important;min-height:64px !important;padding-inline:12px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__logo img{ width:auto !important;height:26px !important;max-width:156px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__actions{ display:flex !important;margin-left:auto !important;gap:0 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__actions .pp-header__action-btn:not(.pp-header__action-btn--publish){ display:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn--publish{ display:inline-flex !important;width:auto !important;min-width:78px !important; height:40px !important;padding:0 10px !important;gap:5px !important; background:#2563EB !important;color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn--publish .pp-header__action-label{ display:inline !important;font-size:12px !important;font-weight:800 !important;} } @media (max-width:359px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__inner{ gap:6px !important;padding-inline:8px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__logo img{ max-width:126px !important;height:23px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn--publish{ min-width:68px !important;padding-inline:7px !important;gap:3px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__action-btn--publish .pp-header__action-label{ font-size:11px !important;} } /* ============================================================ 20) RELEASE 3.1.5 — CONTRASTE PRECIO, VALUADOR Y MARCOS C6 ============================================================ */ /* La firma decorativa del hero era el subrayado suelto registrado en H3. */ html[data-pp-theme="light"] body.home:not(.wp-admin) .pp-home-banner__signature{ display:none !important;} /* C6 aplicaba una superficie navy a contenedores e imagenes aun cuando la pagina era clara. Las informativas conservan una sola superficie blanca. */ html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) .pp-site-copy-band:is(.elementor-container,.elementor-column,.elementor-widget-wrap){ background:#FFFFFF !important;background-image:none !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) .pp-site-image-block > .elementor-widget-container{ padding:0 !important;background:transparent !important;background-image:none !important; border:0 !important;border-radius:0 !important;box-shadow:none !important;} html[data-pp-theme="light"] body.pp-public-page-v3:not(.wp-admin) .pp-site-image-block img{ background:transparent !important;background-image:none !important; border:0 !important;border-radius:16px !important;box-shadow:none !important;} /* Precio: texto y plan legibles sobre el publico claro. */ html[data-pp-theme="light"] body.page-id-10134:not(.wp-admin) .price-table-element .price-table-price{ background:#EFF6FF !important;color:#1D4ED8 !important;} html[data-pp-theme="light"] body.page-id-10134:not(.wp-admin) .price-table-element .price-table-price *{ color:#1D4ED8 !important;-webkit-text-fill-color:#1D4ED8 !important;} html[data-pp-theme="light"] body.page-id-10134:not(.wp-admin) .price-table-element .purchase-pack{ background:#2563EB !important;border-color:#2563EB !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} /* Los botones visuales que acompañan al select nativo deben respetar el mismo esquema claro en valuador, factories y cualquier buscador publico. */ html[data-pp-theme="light"] body:not(.wp-admin) form.header-search .pp-home-select-button{ background:#FFFFFF !important;background-image:none !important; color:#111827 !important;-webkit-text-fill-color:#111827 !important; border:1px solid #CBD5E1 !important;box-shadow:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) form.header-search .pp-home-select-button :is(svg,path){ color:#475569 !important;stroke:currentColor !important;} /* Valuador publico: formulario claro, labels AA y CTA azul con texto blanco. */ html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) > main{ margin-top:40px !important;margin-bottom:60px !important;} html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) .ppv-form{ background:#FFFFFF !important;background-image:none !important; color:#111827 !important;border:1px solid #E2E8F0 !important; box-shadow:0 12px 32px rgba(15,23,42,.10) !important;} html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) .ppv-form :is(.ppv-title,.ppv-field,.ppv-check){ color:#111827 !important;-webkit-text-fill-color:#111827 !important;} html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) .ppv-form .ppv-field > label{ color:#475569 !important;-webkit-text-fill-color:#475569 !important;} html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) .ppv-form .ppv-check input{ background:#FFFFFF !important;border-color:#94A3B8 !important;} html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) .ppv-form .ppv-submit{ background:#2563EB !important;background-image:none !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important; border-color:#2563EB !important;} /* El launcher del asistente queda por encima de la navegacion movil y ocupa solo un area circular, evitando tapar labels/enlaces con el copy completo. */ @media (max-width:767px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-ai-chat{ right:0 !important;bottom:112px !important;width:48px !important;height:48px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-ai-chat__button{ width:48px !important;height:48px !important;min-width:48px !important; padding:0 !important;border-radius:999px !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-ai-chat__button-text{ position:absolute !important;width:1px !important;height:1px !important; margin:-1px !important;padding:0 !important;overflow:hidden !important; clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important;} } /* ============================================================ 21) RELEASE 3.1.10 - CIERRE VISUAL VALIDADO EN CHROME ============================================================ */ /* Todas las etiquetas de operacion y negociacion usan una sola convencion: azul PP, texto blanco y anclaje estable arriba a la izquierda. */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item{ position:relative !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags{ position:absolute !important;top:12px !important;left:12px !important;right:auto !important; display:flex !important;flex-flow:row wrap !important;align-items:flex-start !important; justify-content:flex-start !important;gap:6px !important;z-index:6 !important; width:auto !important;max-width:calc(100% - 24px) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags > *, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .pp-card-type, html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags .ribbon, html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .single-advert-media .single-advert-tags .advert-tags > *, html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .pp-op-badge{ position:static !important;margin:0 !important;padding:7px 11px !important; display:inline-flex !important;align-items:center !important;justify-content:center !important; border:1px solid #2563EB !important;border-radius:8px !important; background:#2563EB !important;background-image:none !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important; font-size:11px !important;font-weight:800 !important;line-height:1 !important; letter-spacing:.02em !important;white-space:nowrap !important; text-shadow:none !important;box-shadow:0 3px 8px rgba(15,23,42,.22) !important;} html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags > * *, html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .single-advert-media .single-advert-tags .advert-tags > * *{ color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} /* En la ficha, el tag que ya entrega Adifier queda dentro de la foto y a la izquierda. El alto cero del contenedor legacy deja de colapsarlo. */ html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .single-advert-media{ position:relative !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .single-advert-media .single-advert-tags{ position:absolute !important;top:12px !important;left:12px !important;right:auto !important; width:auto !important;height:auto !important;z-index:8 !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .single-advert-media .single-advert-tags .advert-tags{ position:static !important;display:flex !important;flex-flow:row wrap !important; align-items:flex-start !important;justify-content:flex-start !important;gap:6px !important;} /* Titulos principales centrados tanto en el listado infinito como en la ficha. */ html[data-pp-theme="light"] body.pp-infinity-listing-page:not(.wp-admin) h1.elementor-heading-title{ width:100% !important;text-align:center !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .page-title.normal .flex-wrap{ position:relative !important;justify-content:center !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .page-title.normal .flex-left{ width:100% !important;text-align:center !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .page-title.normal h1{ width:100% !important;text-align:center !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .page-title.normal .flex-right{ position:absolute !important;right:0 !important;} @media (max-width:767px){ html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .page-title.normal .flex-wrap{ display:grid !important;grid-template-columns:minmax(0,1fr) !important; justify-items:center !important;gap:6px !important;} html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .page-title.normal .flex-right{ position:static !important;right:auto !important;} } /* Quienes somos: los articulos son pilas verticales. La regla desktop anterior repartia kicker, titulo, texto y pills en cuatro columnas de menos de 120px. */ html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) :is(.pp-home-intro-card,.pp-home-intro-card-main){ display:grid !important;grid-template-columns:minmax(0,1fr) !important; align-items:start !important;align-content:start !important; gap:16px !important;min-width:0 !important;} html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) .pp-home-intro-card-main{ align-content:center !important;} html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) :is(.pp-home-intro-card,.pp-home-intro-card-main) > *{ width:100% !important;max-width:none !important;min-width:0 !important; flex:none !important;margin-inline:0 !important;} html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) :is(.pp-home-intro-card,.pp-home-intro-card-main) :is(h2,p){ width:100% !important;max-width:100% !important;} html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) .pp-home-intro-kicker{ width:max-content !important;max-width:100% !important; justify-self:start !important;padding:5px 12px !important; background:#2563EB !important;border-color:#2563EB !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) .pp-home-intro-pills{ display:flex !important;flex-flow:row wrap !important;align-items:flex-start !important; justify-content:flex-start !important;gap:10px !important;} html[data-pp-theme="light"] body.page-id-2006:not(.wp-admin) .pp-home-intro-pills > span{ flex:0 0 auto !important;width:auto !important;padding:7px 12px !important; border:1px solid #2563EB !important;border-radius:999px !important; background:#2563EB !important;color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;} /* Mapa nacional completamente claro: lienzo editorial, paneles, estados y fallback. La cartografia Google se configura tambien en modo claro desde el plugin del mapa; estas reglas eliminan el fondo navy que la rodeaba. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd{ --bg:#F8FAFC !important;--bg2:#EFF6FF !important;--panel:#FFFFFF !important; --soft:#F1F5F9 !important;--line:#CBD5E1 !important;--ink:#111827 !important; --muted:#475569 !important;--on-brand:#FFFFFF !important; background:#F8FAFC !important;background-image:none !important; color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd::before{ background:#F8FAFC !important;background-image:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd::after{ background:transparent !important;background-image:none !important;opacity:0 !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-mdd__screen,.pp-mdd__stage,.pp-mdd__headline){ color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__network{ opacity:.14 !important;color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline :is(h1,strong){ color:#111827 !important;-webkit-text-fill-color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline :is(.pp-mdd__lead,.pp-mdd__lead strong,.pp-mdd__today span){ color:#475569 !important;-webkit-text-fill-color:#475569 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__headline .pp-mdd__today strong{ color:#2563EB !important;-webkit-text-fill-color:#2563EB !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-mdd__map-panel,.pp-mdd__province-board,.pp-mdd__map-note, .pp-mdd__activity-row,.pp-mdd__stat,.pp-mdd__event,.pp-mdd__tile){ background:#FFFFFF !important;background-image:none !important; border-color:#E2E8F0 !important;color:#111827 !important; text-shadow:none !important;box-shadow:0 8px 24px rgba(15,23,42,.07) !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-mdd__map-head,.pp-mdd__province-head,.pp-mdd__activity-main, .pp-mdd__activity-row,.pp-mdd__stat,.pp-mdd__event,.pp-mdd__legend, .pp-mdd__tile){ color:#111827 !important;-webkit-text-fill-color:#111827 !important;} html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-mdd__map-head,.pp-mdd__province-head,.pp-mdd__activity-main, .pp-mdd__activity-row,.pp-mdd__stat,.pp-mdd__event,.pp-mdd__legend, .pp-mdd__tile) :is(span,strong,small,p){ color:inherit !important;-webkit-text-fill-color:inherit !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-mdd__real-map{ background:#E5E7EB !important;background-image:none !important; border:1px solid #CBD5E1 !important;} /* ============================================================ 22) RELEASE 3.1.11 - HOTFIX DE ESPECIFICIDAD DE TAGS ============================================================ */ /* El id negado eleva la especificidad sin exigir cambios de markup. Vence las variantes rent/negotiable heredadas y conserva una unica paleta azul. */ html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags .pp-card-type, html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-badge--sale, html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-badge--rent, html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags .pp-card-type.pp-badge--negotiable, html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags .ribbon.negociable, html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags .ribbon.negotiable{ background:#2563EB !important;background-color:#2563EB !important; background-image:none !important;border-color:#2563EB !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} html[data-pp-theme="light"] body:not(#pp-v311-tags):not(.wp-admin) .advert-item .advert-tags :is(.pp-card-type,.ribbon) *{ color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} /* En Adifier, .single-advert-tags es hermano inmediato de la galeria dentro de .col-sm-8. Se posiciona sobre ese contenedor relativo, a 12px de la foto. */ html[data-pp-theme="light"] body.single-advert:not(#pp-v311-tags):not(.wp-admin) .col-sm-8 > .single-advert-tags{ position:absolute !important;top:12px !important;left:12px !important;right:auto !important; width:auto !important;height:auto !important;z-index:9 !important;} html[data-pp-theme="light"] body.single-advert:not(#pp-v311-tags):not(.wp-admin) .col-sm-8 > .single-advert-tags > .advert-tags{ position:static !important;display:flex !important;flex-flow:row wrap !important; align-items:flex-start !important;justify-content:flex-start !important;gap:6px !important; width:auto !important;max-width:calc(100% - 24px) !important;} html[data-pp-theme="light"] body.single-advert:not(#pp-v311-tags):not(.wp-admin) .col-sm-8 > .single-advert-tags > .advert-tags > *{ position:static !important;display:inline-flex !important;align-items:center !important; justify-content:center !important;margin:0 !important;padding:7px 11px !important; border:1px solid #2563EB !important;border-radius:8px !important; background:#2563EB !important;background-color:#2563EB !important; background-image:none !important;color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;font-size:11px !important; font-weight:800 !important;line-height:1 !important;letter-spacing:.02em !important; white-space:nowrap !important;text-shadow:none !important; box-shadow:0 3px 8px rgba(15,23,42,.22) !important;} /* ============================================================ 23) RELEASE 3.1.12 - TAG EDITORIAL AZUL/BLANCO ============================================================ */ html[data-pp-theme="light"] body.page-id-2006:not(#pp-v312-tags):not(.wp-admin) .pp-home-intro-eyebrow{ background:#2563EB !important;background-color:#2563EB !important; background-image:none !important;border-color:#2563EB !important; color:#FFFFFF !important;-webkit-text-fill-color:#FFFFFF !important;} /* ============================================================ 24) RELEASE 3.1.14 - HOTFIX DE FICHA, VALUADOR Y CTA ============================================================ */ /* Ficha: operación y negociación comparten una sola fila, igual que en cards, ancladas arriba a la izquierda. El max-width anterior restaba 24px dentro de un wrapper ya ajustado al contenido y forzaba el segundo tag a bajar. */ html[data-pp-theme="light"] body.single-advert:not(#pp-v314-tags):not(.wp-admin) .col-sm-8 > .single-advert-tags > .advert-tags{ flex-flow:row nowrap !important; width:max-content !important; max-width:calc(100vw - 48px) !important;} html[data-pp-theme="light"] body.single-advert:not(#pp-v314-tags):not(.wp-admin) .col-sm-8 > .single-advert-tags > .advert-tags > *{ flex:0 0 auto !important;} /* Valuador: la búsqueda general de propiedades no forma parte de esta herramienta. Se retira su contenedor sin alterar el formulario valuador. */ html[data-pp-theme="light"] body.page-id-18378:not(.wp-admin) > .container:has(form.pp-modern-search-form){ display:none !important;} /* CTA primarios: fondo azul PP siempre usa texto e iconos blancos. */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-valuation-banner__button,.pp-referral-banner__button), html[data-pp-theme="light"] body:not(.wp-admin) :is(.pp-valuation-banner__button,.pp-referral-banner__button) *, html[data-pp-theme="light"] body.pp-seo-factory-page:not(.wp-admin) .pp-landing section > p > a, html[data-pp-theme="light"] body.pp-seo-factory-page:not(.wp-admin) .pp-landing section > p > a *{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important;} /* ============================================================ 25) OPERACIÓN EN MAYÚSCULAS — CARDS Y FICHA ============================================================ */ html[data-pp-theme="light"] body:not(.wp-admin) .advert-item .advert-tags :is(.pp-card-type-sell,.pp-card-type-rent), html[data-pp-theme="light"] body.single-advert:not(.wp-admin) :is(.pp-op-badge--sale,.pp-op-badge--rent), html[data-pp-theme="light"] body.single-advert:not(.wp-admin) .single-advert-tags .advert-tags > *{ text-transform:uppercase !important;} /* ============================================================ 26) RELEASE 3.1.16 - LOGO MOBILE COMPLETO Y LEGIBLE ============================================================ */ /* El SVG del wordmark ahora incluye margen derecho suficiente para la ultima "p". En mobile crece de forma moderada sin quitar espacio a Publicar/menu. */ @media (min-width:360px) and (max-width:860px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__logo{ flex:0 1 auto !important;min-width:0 !important;overflow:visible !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__logo img{ width:auto !important;height:28px !important;max-width:164px !important; object-fit:contain !important;object-position:left center !important;} } @media (max-width:359px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__logo{ flex:0 1 auto !important;min-width:0 !important;overflow:visible !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-header__logo img{ width:auto !important;max-width:148px !important;height:25px !important; object-fit:contain !important;object-position:left center !important;} } /* ============================================================ 27) RELEASE 3.1.17 - LAUNCHER AI CENTRADO EN MOBILE ============================================================ */ /* El launcher se reduce a 48 x 48 px en mobile. Al ocultarse el texto, el flex conservaba la alineacion inicial y desplazaba el circulo azul hacia la izquierda. Se centran explicitamente sus tres capas. */ @media (max-width:767px){ html[data-pp-theme="light"] body:not(.wp-admin) .pp-ai-chat__button{ display:inline-flex !important;align-items:center !important; justify-content:center !important;gap:0 !important;line-height:1 !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-ai-chat__button-icon{ display:inline-flex !important;align-items:center !important; justify-content:center !important;flex:0 0 28px !important; width:28px !important;height:28px !important;margin:0 !important; padding:0 !important;transform:none !important;} html[data-pp-theme="light"] body:not(.wp-admin) .pp-ai-chat__button-icon svg{ display:block !important;width:17px !important;height:17px !important; margin:0 !important;transform:none !important;} } /* ============================================================ 28) RELEASE 3.1.18 - PRELOADER EN AZUL PP ============================================================ */ /* Adifier conserva #00a591 en sus loaders heredados. Se reemplaza solamente el color visual del indicador, sin modificar animacion, posicion ni tiempos. */ html[data-pp-theme="light"] body:not(.wp-admin) :is(.cf-loader,.mess-loading,.con-loading,#purchase .loader, .purchase-loader,.purchase-loader i, e-page-transition .e-page-transition--preloader), html[data-pp-theme="light"] body:not(.wp-admin) :is(.cf-loader,.mess-loading,.con-loading,#purchase .loader, .purchase-loader, e-page-transition .e-page-transition--preloader) :is(i,svg){ color:#2563EB !important; -webkit-text-fill-color:#2563EB !important; fill:#2563EB !important; stroke:#2563EB !important; } /* ============================================================ 29) RELEASE 3.1.19 - BANNERS OBSERVATORIO Y COMUNIDAD EN CLARO ============================================================ */ /* El bloque del Observatorio conserva una paleta oscura embebida en Elementor. Se normaliza como superficie publica clara sin alterar su estructura. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner{ background:#FFFFFF !important; background-image:none !important; border-color:#E2E8F0 !important; color:#111827 !important; box-shadow:0 8px 24px rgba(16,24,40,.08) !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner::before{ background:#2563EB !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__eyebrow{ color:#2563EB !important; -webkit-text-fill-color:#2563EB !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__title{ color:#111827 !important; -webkit-text-fill-color:#111827 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__copy, html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__viz-title, html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__note{ color:#475569 !important; -webkit-text-fill-color:#475569 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__viz{ background:#F8FAFC !important; background-image:repeating-linear-gradient( 90deg,rgba(71,85,105,.06) 0 1px,transparent 1px 25% ) !important; border-color:#CBD5E1 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.85) !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__bar{ background:#E2E8F0 !important; border-color:#CBD5E1 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__seg--owner{ background:#2563EB !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__seg--agency{ background:#93C5FD !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__seg--unknown{ background:#CBD5E1 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__legend li{ color:#334155 !important; -webkit-text-fill-color:#334155 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__dot--agency{ background:#60A5FA !important; opacity:1 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__dot--unknown{ background:#94A3B8 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__button, html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__btn--primary{ background:#2563EB !important; border-color:#2563EB !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__button:hover, html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__btn--primary:hover{ background:#1D4ED8 !important; border-color:#1D4ED8 !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__link{ background:#FFFFFF !important; border-color:#CBD5E1 !important; color:#111827 !important; -webkit-text-fill-color:#111827 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-obs-banner__link:hover{ background:#EFF6FF !important; border-color:#2563EB !important; color:#1D4ED8 !important; -webkit-text-fill-color:#1D4ED8 !important; } /* Comunidad: fuerza la superficie clara completa y texto blanco en el CTA primario; la regla embebida original fijaba el texto casi negro. */ html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb{ background:#FFFFFF !important; background-image:none !important; border-color:#E2E8F0 !important; color:#111827 !important; box-shadow:0 8px 24px rgba(16,24,40,.08) !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__label, html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__number{ color:#2563EB !important; -webkit-text-fill-color:#2563EB !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__title{ color:#111827 !important; -webkit-text-fill-color:#111827 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__desc{ color:#475569 !important; -webkit-text-fill-color:#475569 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__btn--secondary{ background:#FFFFFF !important; border-color:#CBD5E1 !important; color:#111827 !important; -webkit-text-fill-color:#111827 !important; } html[data-pp-theme="light"] body:not(.wp-admin) .pp-gcb__btn--secondary:hover{ background:#EFF6FF !important; border-color:#2563EB !important; color:#1D4ED8 !important; -webkit-text-fill-color:#1D4ED8 !important; }