/* ================================================ PYRUS INMOBILIARIA — Capa de compatibilidad WordPress / Elementor Archivo: src/css/pyrus-wp-elementor.css Versión: 1.28.1 Propósito: Este archivo NO reescribe el diseño del sitio. Neutraliza exclusivamente el encapsulado que Elementor impone cuando el HTML completo de una página Pyrus (header + main + footer) se pega dentro de un widget "HTML" en modo "Lienzo de Elementor" (Canvas). Problemas que resuelve: - Márgenes blancos laterales en desktop - Header y footer encerrados en el contenedor de Elementor - Secciones con ancho comprimido (hero, pasos, acciones) - Logo/header recortado en mobile - position: fixed roto por transforms de Elementor - overflow: hidden que recorta elementos posicionados Orden de carga obligatorio (WordPress): 1. pyrus-global.css 2. pyrus-desarrollo.css 3. pyrus-wp-elementor.css ← este archivo (al final) Método de anclaje: Todos los selectores usan :has(.pyrus-header) como ancla para aplicar únicamente a secciones que contengan estructura Pyrus completa. Las demás páginas de WordPress no se ven afectadas. Compatibilidad de :has(): Chrome 105+ · Safari 15.4+ · Firefox 121+ (dic 2023+) Cobertura de navegadores > 96% en 2026. ================================================ */ /* ================================================ FUENTES — Carga de Inter y Lora desde Google Fonts. v1.28.1 — @import ELIMINADO (render-blocking). Las fuentes Lora e Inter se cargan en WordPress vía snippet PHP "Pyrus — Cargar fuentes Lora e Inter" usando wp_enqueue_style en el . El @import en CSS creaba una cadena bloqueante adicional en serie: el navegador debía descargar este archivo (299 KB) antes de poder solicitar Google Fonts, retrasando el render. Con wp_enqueue_style las fuentes se piden en paralelo desde el sin bloquear la cascada CSS. Si en el futuro se elimina el snippet PHP, restaurar: @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500&display=swap'); ================================================ */ /* ================================================ BLOQUE 1 — Hello Elementor Canvas: limpiar wrappers del tema. Problema que corrige: Hello Elementor en modo Canvas puede heredar estilos de .entry-content, .site-main y #primary que añaden padding o max-width al área de contenido, generando márgenes internos que comprimen el layout Pyrus. ================================================ */ .elementor-template-canvas .site, .elementor-template-canvas .site-content, .elementor-template-canvas #primary, .elementor-template-canvas .content-area, .elementor-template-canvas .site-main, .elementor-template-canvas #main, .elementor-template-canvas .entry-content { padding: 0 !important; margin: 0 !important; max-width: none !important; } /* ================================================ BLOQUE 2 — Cadena de wrappers de Elementor: resetear anchura, padding y margin. Problema que corrige: Elementor envuelve el contenido del widget HTML en la siguiente cadena de divs: section.elementor-section div.elementor-container ← max-width Elementor div.elementor-column ← padding columna div.elementor-widget-wrap ← padding wrap div.elementor-widget-html div.elementor-widget-container ← padding widget Cada nodo puede añadir max-width, padding o gap que comprimen el contenido horizontal y crean los márgenes blancos laterales reportados en desktop. ================================================ */ .elementor-section:has(.pyrus-header) { padding: 0 !important; margin: 0 !important; } .elementor-section:has(.pyrus-header) > .elementor-container { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .elementor-section:has(.pyrus-header) .elementor-column { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; } .elementor-section:has(.pyrus-header) .elementor-widget-wrap { padding: 0 !important; margin: 0 !important; } .elementor-section:has(.pyrus-header) .elementor-widget-container { padding: 0 !important; margin: 0 !important; width: 100% !important; display: block !important; } /* ================================================ BLOQUE 3 — Sistema de contenedores Flex de Elementor 3.6+ (.e-con / .e-con-inner). Problema que corrige: Versiones recientes de Elementor Pro usan contenedores flexbox (.e-con) en lugar de .elementor-container. Los mismos problemas de anchura y padding aplican. Las custom properties CSS controlan el padding interno de estos contenedores y también se neutralizan. ================================================ */ .e-con:has(.pyrus-header), .e-con-inner:has(.pyrus-header) { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; --padding-block-start: 0 !important; --padding-block-end: 0 !important; --padding-inline-start: 0 !important; --padding-inline-end: 0 !important; --gap: 0 !important; } /* ================================================ BLOQUE 4 — Prevenir transforms que rompen position: fixed del header Pyrus. Problema que corrige: Si Elementor añade transform, filter o will-change a cualquier contenedor que envuelve el widget (por ejemplo, para animaciones de entrada de sección), crea un nuevo stacking context. Esto hace que position: fixed en .pyrus-header quede anclado al contenedor transformado en lugar de al viewport, rompiendo visualmente el header fijo. Este bloque neutraliza esas propiedades solo en los wrappers que contienen el HTML Pyrus completo. ================================================ */ .elementor-section:has(.pyrus-header), .elementor-section:has(.pyrus-header) > .elementor-container, .elementor-section:has(.pyrus-header) .elementor-column, .elementor-section:has(.pyrus-header) .elementor-widget-wrap, .elementor-section:has(.pyrus-header) .elementor-widget-container { transform: none !important; filter: none !important; will-change: auto !important; perspective: none !important; } .e-con:has(.pyrus-header), .e-con-inner:has(.pyrus-header) { transform: none !important; filter: none !important; will-change: auto !important; perspective: none !important; } /* ================================================ BLOQUE 5 — Corregir overflow que recorta elementos posicionados dentro del widget. Problema que corrige: Elementor aplica overflow: hidden a secciones y columnas. Esto puede recortar elementos con position: absolute dentro del hero (overlay, breadcrumb, imagen de fondo), el menú mobile desplegado, y otros elementos que desborden el bounding box del widget. ================================================ */ .elementor-section:has(.pyrus-header), .elementor-section:has(.pyrus-header) .elementor-column, .elementor-section:has(.pyrus-header) .elementor-widget-wrap, .elementor-section:has(.pyrus-header) .elementor-widget-container { overflow: visible !important; } .e-con:has(.pyrus-header), .e-con-inner:has(.pyrus-header) { overflow: visible !important; } /* ================================================ BLOQUE 6 — Eliminar gap superior entre el viewport y el inicio del contenido Pyrus. Problema que corrige: Elementor Canvas puede añadir margin-top o padding-top al wrapper .elementor principal o a la primera sección, creando un espacio en blanco visible encima del header. ================================================ */ .elementor-template-canvas .elementor { margin-top: 0 !important; padding-top: 0 !important; } .elementor-section:has(.pyrus-header):first-of-type { margin-top: 0 !important; } /* ================================================ BLOQUE 7 — Secciones y bloques del HTML Pyrus: asegurar ancho 100% y evitar restricciones. Problema que corrige: Aunque el widget container sea 100%, los bloques del HTML migrado heredan el ancho de su padre. Si algún wrapper intermedio tiene max-width residual, los heroes y secciones de ancho completo quedan comprimidos visualmente. ================================================ */ .elementor-widget-container:has(.pyrus-header) > header, .elementor-widget-container:has(.pyrus-header) > main, .elementor-widget-container:has(.pyrus-header) > footer, .elementor-widget-container:has(.pyrus-header) .pyrus-footer { width: 100%; max-width: none; box-sizing: border-box; } /* ================================================ BLOQUE 8 — Garantizar que el header fijo Pyrus se ancle al viewport y no al widget container. Problema que corrige: El header usa position: fixed; left: 0; right: 0 para cubrir el ancho completo del viewport. Cualquier padding del widget container aplicaría un desplazamiento al offsetParent del header dentro del DOM, pudiendo afectar el anclaje en algunos entornos de renderizado. Este bloque refuerza el posicionamiento global del header directamente desde este archivo. ================================================ */ .pyrus-header { left: 0 !important; right: 0 !important; width: 100% !important; } /* ================================================ BLOQUE 9 — Responsive mobile: mismas correcciones en pantallas pequeñas. Los breakpoints replican los de pyrus-global.css para mantener consistencia en todo el sistema. ================================================ */ @media (max-width: 920px) { .elementor-section:has(.pyrus-header) .elementor-widget-container { padding: 0 !important; margin: 0 !important; width: 100% !important; overflow: visible !important; } /* Evitar que el menú mobile quede recortado cuando se despliega fuera del bounding del widget */ .elementor-section:has(.pyrus-header) .elementor-column { overflow: visible !important; } } @media (max-width: 640px) { /* Reforzar anchura en mobile donde los bugs de Elementor son más frecuentes */ .elementor-section:has(.pyrus-header), .elementor-section:has(.pyrus-header) .elementor-widget-container { padding: 0 !important; margin: 0 !important; } } /* ================================================ BLOQUE 10 — Protección de dimensiones del logo. Problema que corrige: Elementor aplica .elementor-widget-container img { height: auto; max-width: 100%; } con especificidad (0,2,1), superior a .pyrus-header__logo-img (0,1,0) en pyrus-global.css. Hello Elementor añade además img:not(.custom-logo) { height: auto; } con (0,1,1). Sin !important, ambas reglas anulan height: 34px, revirtiéndolo al valor del atributo HTML height="40", y max-width: 100% puede expandir el logo al ancho del contenedor padre si .pyrus-header__logo adopta display: block por herencia del tema. ================================================ */ .pyrus-header__logo-img { height: 34px !important; width: auto !important; max-width: none !important; } .pyrus-footer__logo-img { height: 30px !important; width: auto !important; max-width: none !important; } /* ================================================ BLOQUE 11 — Contenedor del logo: garantizar comportamiento flex compacto en WordPress. Problema que corrige: Hello Elementor aplica a { display: block } globalmente. Como .pyrus-header__logo es un , adopta display: block y calcula su ancho como bloque completo. Combinado con max-width: 100% en la imagen hija, el logo se expande visualmente más allá de sus 34 px de altura. line-height: 0 elimina el espacio inline residual que algunos navegadores añaden bajo imágenes en contenedores flex con alineación baseline. ================================================ */ .pyrus-header__logo { display: inline-flex !important; align-items: center; flex-shrink: 0; max-width: none; overflow: visible; line-height: 0; } /* ================================================ BLOQUE 12 — Suavizado tipográfico: reforzar antialiasing en los componentes del header y footer. Problema que corrige: pyrus-global.css declara -webkit-font-smoothing: antialiased en body, pero Hello Elementor puede sobrescribir la regla de body con sus propios estilos de mayor especificidad. Sin antialiased, Inter y Lora muestran mayor contraste de borde (efecto "más grueso" o "más fino" según el subpixel rendering del SO), especialmente visible en Windows y mobile. ================================================ */ .pyrus-header, .pyrus-mobile-menu, .pyrus-footer { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.pyrus-page-gracias .pyrus-gracias-hero, body.pyrus-page-gracias .pyrus-gracias-pasos, body.pyrus-page-gracias .pyrus-gracias-acciones, body.pyrus-page-gracias .pyrus-portafolio-cierre { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ================================================ BLOQUE 13 — Tipografía de headings: reforzar font-family y font-weight en componentes Pyrus. Problema que corrige: Elementor aplica sus custom properties CSS globales (--e-global-typography-primary-font-family) a h1–h4, haciendo que los headings hereden la fuente del tema en lugar de Lora (--pyrus-font-heading). Hello Elementor declara font-weight: 600 o 700 por defecto en headings, anulando el font-weight: 400 del prototipo y haciendo que los títulos aparezcan más pesados visualmente. ================================================ */ .pyrus-gracias-hero__titulo, .pyrus-gracias-pasos__titulo, .pyrus-gracias-paso__titulo, .pyrus-gracias-accion__titulo, .pyrus-portafolio-cierre__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } .pyrus-footer__col-title, .pyrus-footer__link, .pyrus-footer__legal { font-family: var(--pyrus-font-body) !important; } /* ================================================ BLOQUE 14 — Botones de navegación: neutralizar estilos globales de button en WordPress. Problema que corrige: WordPress y Hello Elementor aplican a button {} estilos globales de background, border, border-radius y box-shadow. Esto afecta al botón hamburguesa (.pyrus-menu-toggle) y al selector de idioma (.pyrus-lang-btn), añadiendo bordes, fondos o radios no deseados sobre controles del header Pyrus. ================================================ */ .pyrus-menu-toggle { background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 10px 6px !important; cursor: pointer !important; line-height: 0; } .pyrus-menu-toggle__bar { background-color: var(--pyrus-blanco-marfil) !important; border-radius: 0 !important; } .pyrus-lang-btn { background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; cursor: pointer !important; } /* ================================================ BLOQUE 15 — Mobile: reforzar visibilidad y layout del hamburger y la navegación responsive. Problema que corrige: La combinación de estilos de WordPress, Hello Elementor y el override de display en Elementor puede anular el comportamiento responsive declarado en pyrus-global.css. Este bloque refuerza las mismas reglas con !important para garantizar que el hamburger aparezca exactamente en los mismos breakpoints que en el prototipo. ================================================ */ @media (max-width: 920px) { .pyrus-menu-toggle { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 44px !important; height: 44px !important; } .pyrus-header__inner { width: 100%; overflow: visible; } .pyrus-nav { display: none !important; } .pyrus-header__actions .pyrus-btn, .pyrus-header__actions .pyrus-lang-switcher { display: none !important; } } @media (min-width: 921px) { .pyrus-menu-toggle { display: none !important; } } /* ================================================ BLOQUE 16 — Color base y opacity del widget Pyrus. Problema que corrige: Elementor puede definir --e-global-color-text: #7A7A7A (gris, valor por defecto de Elementor) y aplicarlo al .elementor-widget-container. Cualquier elemento que use color: inherit dentro del widget heredaría ese gris en lugar del negro carbón Pyrus (#101216). Resultado: textos de nav, párrafos, footer y secondary content aparecen más tenues. La regla opacity: 1 previene que animaciones de entrada de Elementor queden en estado intermedio (0.8–0.98) y atenúen visualmente todo el widget. ================================================ */ .elementor-widget-container:has(.pyrus-header) { color: var(--pyrus-negro-carbon); } .elementor-section:has(.pyrus-header), .elementor-section:has(.pyrus-header) .elementor-column, .elementor-section:has(.pyrus-header) .elementor-widget-wrap, .elementor-section:has(.pyrus-header) .elementor-widget-container { opacity: 1 !important; } .e-con:has(.pyrus-header), .e-con-inner:has(.pyrus-header) { opacity: 1 !important; } /* ================================================ BLOQUE 17 — Links de navegación y footer: color explícito contra overrides globales. Problema que corrige: WordPress aplica a { color: #0073aa } (azul WP) y Elementor puede usar --e-global-color-accent (verde Elementor por defecto). Aunque pyrus-global.css declara a { color: inherit }, en el contexto del widget estos globales pueden superar la especificidad. Se refuerzan los colores rgba exactos del prototipo con mayor especificidad para proteger la navegación, footer y links de las cards de acción. ================================================ */ /* Navegación desktop */ .pyrus-nav__link { color: rgba(247,244,238,0.78) !important; font-weight: 400 !important; /* original del prototipo — el BLOQUE 16 garantiza el color scope */ } .pyrus-nav__link:hover, .pyrus-nav__link[aria-current="page"] { color: var(--pyrus-blanco-marfil) !important; } /* Menú mobile */ .pyrus-mobile-menu__link { color: var(--pyrus-blanco-marfil) !important; } .pyrus-mobile-menu__link:hover { color: var(--pyrus-dorado) !important; } /* Breadcrumb del hero Gracias */ .pyrus-gracias-hero__breadcrumb a { color: rgba(247,244,238,0.55) !important; } .pyrus-gracias-hero__breadcrumb a:hover { color: var(--pyrus-dorado) !important; } /* Footer — navegación */ .pyrus-footer__nav-link { color: rgba(247,244,238,0.60) !important; } .pyrus-footer__nav-link:hover { color: var(--pyrus-blanco-marfil) !important; } /* Footer — contacto */ .pyrus-footer__contact-text, .pyrus-footer__contact-text a { color: rgba(247,244,238,0.60) !important; } .pyrus-footer__contact-text a:hover { color: var(--pyrus-blanco-marfil) !important; } /* Footer — bottom legal */ .pyrus-footer__legal-link { color: rgba(247,244,238,0.46) !important; } .pyrus-footer__legal-link:hover { color: rgba(247,244,238,0.80) !important; } /* Cards de acción Gracias */ .pyrus-gracias-accion__link { color: var(--pyrus-azul-petroleo) !important; font-weight: 500 !important; } .pyrus-gracias-accion__link:hover { color: var(--pyrus-dorado-profundo) !important; } /* ================================================ BLOQUE 18 — Hero Gracias: colores de texto explícitos en fondo oscuro. Problema que corrige: Si Elementor hereda un color de texto gris sobre el widget, los textos blancos semitransparentes del hero pueden perder visibilidad y contraste. Se refuerzan los valores rgba exactos del prototipo. El título en Lora conserva font-weight: 400 — el peso editorial fino es intencional. ================================================ */ .pyrus-gracias-hero__titulo { color: var(--pyrus-blanco-marfil) !important; } .pyrus-gracias-hero__texto { color: rgba(247,244,238,0.85) !important; font-weight: 300 !important; } .pyrus-gracias-hero__subtexto { color: rgba(247,244,238,0.55) !important; font-weight: 300 !important; } /* ================================================ BLOQUE 19 — Textos secundarios en fondo claro: corrección de font-weight para legibilidad en WP. Problema que corrige: Los textos descriptivos de pasos y cards de acción usan font-weight: 300 en el prototipo. En Live Server, Google Fonts cargaba vía del HTML. En WordPress, el snippet no incluye , por lo que Inter 300 no cargaba (fallback: 400, más legible). Tras añadir @import en v1.1.0, Inter 300 sí carga en WP, haciendo estos textos sobre fondo claro perceptiblemente más delgados que en Live Server. Solución: se sube a font-weight: 400 solo en textos descriptivos sobre fondo claro. No afecta a títulos Lora, hero, etiquetas ni CTAs. No hace los textos "bold" — el paso de 300 a 400 en Inter es sutil pero recupera la legibilidad del prototipo. ================================================ */ .pyrus-gracias-paso__texto { font-weight: 400 !important; color: #4a5060 !important; } .pyrus-gracias-accion__texto { font-weight: 400 !important; color: #4a5060 !important; } /* ================================================ BLOQUE 20 — Footer completo: color y contraste. Problema que corrige: Los textos del footer usan rgba semitransparentes sobre fondo negro carbón. En WordPress, si el color base del widget container es gris (Elementor) en lugar de negro carbón, los rgba calculados visualmente dan colores distintos. Adicionalmente, algún override de opacidad puede atenuar el bloque entero. Se refuerzan los colores del footer con valores absolutos del prototipo. ================================================ */ .pyrus-footer__col-title { color: var(--pyrus-dorado) !important; } .pyrus-footer__tagline { color: rgba(247,244,238,0.58) !important; } .pyrus-footer__copy { color: rgba(247,244,238,0.42) !important; } /* ================================================ BLOQUE 21 — Ajuste fino de render tipográfico WordPress vs Live Server. Objetivo: Suavizar la diferencia residual (3–5%) entre el render de WordPress y Live Server. En el prototipo, los textos descriptivos usan Inter 300 (delgado, editorial). En WordPress, BLOQUE 19 los sube a Inter 400 para compensar la diferencia de carga de fuentes. El resultado es correcto en legibilidad, pero Inter 400 sin tracking se percibe ligeramente más denso que Inter 300 del Live Server. Solución: letter-spacing sutil (0.012em–0.018em) en los textos afectados. Este nivel de tracking es imperceptible como ajuste explícito pero abre el interlínea óptico de Inter 400 hasta acercarse al ritmo visual de Inter 300. No modifica layout, tamaños, familias ni alturas de línea. Solo afecta a: - Textos descriptivos de pasos (fondo claro) - Textos descriptivos de cards de acción (fondo claro) - Texto secundario del hero (fondo oscuro, Inter 300) - Tagline de footer (fondo oscuro) - Links de navegación footer No afecta a: títulos Lora, CTAs, etiquetas, breadcrumbs, copy legal, header ni layout. ================================================ */ /* Textos descriptivos de pasos y cards — Inter 400 con tracking sutil para igualar densidad óptica de Inter 300 en Live Server */ .pyrus-gracias-paso__texto, .pyrus-gracias-accion__texto { letter-spacing: 0.015em; } /* Hero Gracias — texto principal en fondo oscuro. Inter 300 ya está forzado (BLOQUE 18). El tracking confirma el ritmo editorial del prototipo. */ .pyrus-gracias-hero__texto { letter-spacing: 0.01em; } /* Footer — textos secundarios en fondo oscuro. Abre ligeramente el ritmo de Inter 400 para que el footer se sienta igual de ligero que en Live Server. */ .pyrus-footer__tagline, .pyrus-footer__nav-link, .pyrus-footer__contact-text { letter-spacing: 0.01em; } /* ================================================ BLOQUE 22 — Compatibilidad tipográfica páginas legales WordPress/Elementor (/aviso-de-privacidad/ · /politica-de-cookies/) Problema: Elementor aplica --e-global-color-text (#7A7A7A) y sus propios resets de fuente/peso en el widget container, desplazando el color, peso e interlineado definidos en pyrus-legal-* de pyrus-desarrollo.css. Solución: reforzar color, familia tipográfica, suavizado y peso óptico directamente en los selectores del contenido legal. El ancla :has(.pyrus-header) limita el impacto solo a páginas Pyrus; no afecta a /gracias/, header, footer ni ningún otro componente. ================================================ */ /* 22-A — Font-smoothing en los cuatro bloques legales */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-cuerpo, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 22-B — NEUTRALIZADO por BLOQUE 26. La regla original establecía color: var(--pyrus-negro-carbon) en los contenedores, propagando el color incorrecto (#101216) a elementos que usan #3a3e48 en el diseño. BLOQUE 26 protege cada elemento con su color correcto y !important. */ /* 22-C — Familia tipográfica: Lora en títulos legales. Elementor puede imponer su tipografía global (panel Global Fonts) en H1/H2 dentro del widget. !important es necesario para ganar frente a posibles estilos en línea de Elementor. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero__titulo, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__titulo, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__titulo { font-family: var(--pyrus-font-heading) !important; } /* 22-D — NEUTRALIZADO por BLOQUE 26. font-weight:400, letter-spacing:0.015em y color negro-carbón eran incorrectos. El prototipo usa 300, 0 y #3a3e48. BLOQUE 26 aplica los valores exactos del prototipo con !important. */ /* 22-E — Parcialmente neutralizado por BLOQUE 26. font-weight:400 y letter-spacing:0.01em eran incorrectos. opacity:1 es correcto; BLOQUE 26 refuerza el resto con !important. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero__subtexto { opacity: 1; } /* ================================================ BLOQUE 23 — Refinamiento tipográfico editorial páginas legales — corrección post-BLOQUE 22 (/aviso-de-privacidad/ · /politica-de-cookies/) BLOQUE 22 usó var(--pyrus-negro-carbon) (#101216) como color de los textos del cuerpo legal y elevó font-weight a 400 de forma preventiva. El diseño en pyrus-desarrollo.css usa deliberadamente: - color: #3a3e48 (negro editorial suave, no carbón puro) en párrafos, listas y subtextos largos - font-weight: 300 (Inter ligero, tono editorial) en todos los textos de lectura del cuerpo legal Los headings H1/H2 SÍ usan var(--pyrus-negro-carbon) y están correctamente cubiertos por BLOQUE 22-C. BLOQUE 23 corrige color, peso y tracking; añade protección a links y tarjetas de datos que 22 omitía. Al venir después en el archivo, gana por orden de fuente en selectores de idéntica especificidad. ================================================ */ /* 23-A — Color editorial y peso tipográfico en textos largos. Reemplaza la corrección de BLOQUE 22-D: - color: #3a3e48 (negro suave del prototipo, ≠ #101216) - font-weight: 300 (Inter ligero, diseño intencional) - letter-spacing: 0 (anula el 0.015em preventivo de 22-D) */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo p, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-lista li, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__subtexto { color: #3a3e48; font-weight: 300; letter-spacing: 0; } /* 23-B — Hero legal: subtexto con color y peso originales. BLOQUE 22-E forzó font-weight: 400 y tracking. El prototipo usa rgba(247, 244, 238, 0.70) y font-weight: 300. opacity: 1 se mantiene de 22-E. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero__subtexto { color: rgba(247, 244, 238, 0.70); font-weight: 300; letter-spacing: 0; } /* 23-C — Lora en tarjetas de datos del bloque de contacto. .pyrus-legal-dato__valor usa font-family Lora en el diseño; no estaba cubierto por BLOQUE 22-C. !important necesario frente a posibles estilos en línea de Elementor Global Fonts. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-dato__valor { font-family: var(--pyrus-font-heading) !important; } /* 23-D — Links en el cuerpo legal. Elementor Global Colors puede sobreescribir color de enlaces. Se refuerzan azul petróleo en reposo y dorado profundo en hover, sin afectar links del header, footer ni /gracias/. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo a { color: var(--pyrus-azul-petroleo); text-decoration: underline; text-underline-offset: 3px; } .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo a:hover { color: var(--pyrus-dorado-profundo); } /* ================================================ BLOQUE 24 — Igualación tipográfica legal final (/aviso-de-privacidad/ · /politica-de-cookies/) Cubre los elementos que BLOQUES 22 y 23 no protegían: line-height editorial (gap crítico), H1/H2/H3 legales sin font-family global de Elementor, numeración dorada, metadatos, etiquetas y tarjetas de datos. También neutraliza la cadena de color negro-carbón de BLOQUE 22-B en los elementos secundarios aún sin cobertura explícita. Nota: los nombres .pyrus-legal-intro__fecha, .pyrus-legal-seccion__numero y .pyrus-legal-dato__label no existen en el HTML. Las clases reales son __meta, __num y __etiqueta respectivamente. ================================================ */ /* 24-A — Line-height editorial de lectura. Elementor Global Typography puede resetear line-height en p y li. Se refuerzan los valores del prototipo: 1.80 en párrafos largos · 1.75 en listas y subtextos. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo p, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__subtexto { line-height: 1.80; } .elementor-widget-container:has(.pyrus-header) .pyrus-legal-lista li, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__nota { line-height: 1.75; } /* 24-B — H1 del hero legal: peso, línea y tracking. BLOQUE 22-C protege la familia Lora con !important. Aquí se refuerza lo que Elementor Global H1 puede resetear: font-weight, line-height, letter-spacing y color de título. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero__titulo { font-weight: 400; line-height: 1.08; letter-spacing: 0.03em; color: var(--pyrus-blanco-marfil); } /* 24-C — H2 de secciones legales: peso, línea, tracking y color. BLOQUE 22-C protege font-family. Aquí se refuerza el resto para que Elementor Global H2 no altere la jerarquía visual. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__titulo { font-weight: 400; line-height: 1.25; letter-spacing: 0.02em; color: var(--pyrus-negro-carbon); } /* 24-D — H3 subtítulo dentro del cuerpo legal. El diseño usa Inter, NO Lora, para este elemento. Elementor Global Fonts puede aplicar Lora a H3; !important es necesario para ganar frente a estilos en línea. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-subtitulo { font-family: var(--pyrus-font-body) !important; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pyrus-azul-grisaceo); } /* 24-E — Numeración decorativa de sección ("01"–"12"). Elemento span: Inter pequeño, dorado profundo, tracking amplio. Fuera de la cadena de color de BLOQUE 22-B (no es p ni li) pero puede heredar negro-carbón del contenedor; se protege. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__num { font-family: var(--pyrus-font-body); font-weight: 500; letter-spacing: 0.12em; color: var(--pyrus-dorado-profundo); } /* 24-F — Metadatos de intro y etiquetas de tarjetas de datos. Mismo patrón visual: label pequeño uppercase, azul grisáceo, Inter 500. BLOQUE 22-B podía sobreescribir color por herencia. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__meta, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-dato__etiqueta { font-family: var(--pyrus-font-body); font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase; color: var(--pyrus-azul-grisaceo); } /* 24-G — Tarjetas de datos legales: valores tipográficos. font-family Lora ya cubierto en BLOQUE 23-C. Aquí se refuerza peso, color negro-carbón, tracking e interlineado compacto (1.40) del diseño original. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-dato__valor { font-weight: 400; color: var(--pyrus-negro-carbon); letter-spacing: 0.01em; line-height: 1.40; text-decoration: none; } /* 24-H — Nota de cierre del bloque de contacto legal. Texto secundario pequeño: Inter 300, azul grisáceo. line-height: 1.75 ya cubierto en 24-A. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__nota { font-family: var(--pyrus-font-body); font-weight: 300; color: var(--pyrus-azul-grisaceo); } /* 24-I — Mobile: ajuste fino de line-height para intro__texto. pyrus-desarrollo.css reduce la línea de la intro a 1.75 en ≤640px (para compensar el cambio de font-size de lg a base en móvil). 24-A forzó 1.80 sin media query; este override lo reajusta. */ @media (max-width: 640px) { .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto { line-height: 1.75; } } /* ================================================ BLOQUE 25 — Paridad tipográfica final páginas legales WordPress (/aviso-de-privacidad/ · /politica-de-cookies/) Problema raíz detectado: Los BLOQUEs 22–24 usan alta especificidad pero SIN !important en color, font-weight y line-height. Elementor puede aplicar estos valores como estilos en línea (style="...") en el panel de tipografía global — los inline styles tienen especificidad (1,0,0) y vencen a cualquier regla de hoja de estilos sin !important. !important desde hoja de estilos SÍ vence a inline styles. BLOQUE 25 aplica !important exclusivamente a las propiedades donde Elementor más interfiere: color · font-weight · font-family · line-height. Contradicciones neutralizadas: - BLOQUE 22-D: color negro-carbón y weight 400 en p/li → invalidado por 25-A - BLOQUE 22-E: weight 400 en hero__subtexto → invalidado por 25-D - BLOQUEs 23/24: mismos valores correctos pero sin !important → reforzados definitivamente en 25 No se tocan: header, footer, /gracias/, desarrollos, layouts ni font-sizes. No altera ningún otro archivo. ================================================ */ /* 25-A — Textos de lectura larga: valores definitivos. Garantizan que Elementor no pueda sobreescribir color, peso, familia ni interlineado en párrafos y listas del cuerpo legal, independientemente de si usa inline styles o reglas de hoja de estilos. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo p, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto, .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__subtexto { color: #3a3e48 !important; font-weight: 300 !important; font-family: var(--pyrus-font-body) !important; line-height: 1.80 !important; letter-spacing: 0 !important; } /* 25-B — Listas legales: mismos valores que 25-A pero con line-height 1.75 (diseño del prototipo). */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-lista li { color: #3a3e48 !important; font-weight: 300 !important; font-family: var(--pyrus-font-body) !important; line-height: 1.75 !important; letter-spacing: 0 !important; } /* 25-C — H2 de secciones: peso y línea definitivos. font-family Lora ya protegido por BLOQUE 22-C. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__titulo { font-weight: 400 !important; line-height: 1.25 !important; color: var(--pyrus-negro-carbon) !important; } /* 25-D — Hero subtexto: color RGBA + peso definitivos. BLOQUE 22-E forzó weight:400; 23-B lo corrigió sin !important. Aquí se cierra definitivamente. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero__subtexto { color: rgba(247, 244, 238, 0.70) !important; font-weight: 300 !important; line-height: 1.75 !important; } /* 25-E — Nota de cierre del bloque de contacto. Texto pequeño grisáceo-azulado, editorial y ligero. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__nota { color: var(--pyrus-azul-grisaceo) !important; font-weight: 300 !important; line-height: 1.75 !important; } /* 25-F — Mobile: intro__texto en ≤640px. pyrus-desarrollo.css reduce font-size a base (16px) y line-height a 1.75 en móvil. BLOQUE 24-A y 25-A forzaron 1.80 sin breakpoint; este override los corrige. */ @media (max-width: 640px) { .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto { font-size: var(--pyrus-type-base) !important; line-height: 1.75 !important; } } /* ================================================ BLOQUE 26 — Normalización definitiva páginas legales WordPress (/aviso-de-privacidad/ · /politica-de-cookies/) Fuente de verdad: pyrus-desarrollo.css (bloque legal). Cada valor replicado exactamente del prototipo. Diferencia respecto a bloques anteriores: - Incluye font-size con !important (faltaba en 22–25, explicaba el "texto introductorio más pequeño" en WP) - Cubre todos los elementos legal en un solo bloque - !important en cada propiedad que Elementor puede sobreescribir como inline style - BLOQUEs 22-B, 22-D y 22-E ya fueron neutralizados No modifica: header, footer, /gracias/, desarrollos. ================================================ */ /* 26-A — Intro legal (debajo del hero) Prototipo: Inter · 18px · 300 · 1.80 · #3a3e48 El "más pequeño en WP" se corrige con font-size !important. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto { font-family: var(--pyrus-font-body) !important; font-size: 18px !important; font-weight: 300 !important; line-height: 1.80 !important; letter-spacing: 0 !important; color: #3a3e48 !important; } /* 26-B — Párrafos del cuerpo legal (12 secciones) Prototipo: Inter · 16px · 300 · 1.80 · #3a3e48 */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo p { font-family: var(--pyrus-font-body) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.80 !important; letter-spacing: 0 !important; color: #3a3e48 !important; } /* 26-C — Items de lista legal Prototipo: Inter · 16px · 300 · 1.75 · #3a3e48 */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-lista li { font-family: var(--pyrus-font-body) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.75 !important; letter-spacing: 0 !important; color: #3a3e48 !important; } /* 26-D — H2 numerados de secciones legales Prototipo: Lora · clamp(20px,2.2vw,26px) · 400 · 1.25 · negro-carbón font-family ya protegido por 22-C; se refuerza el resto. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__titulo { font-family: var(--pyrus-font-heading) !important; font-size: clamp(20px, 2.2vw, 26px) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: var(--pyrus-negro-carbon) !important; } /* 26-E — Numeración decorativa "01"–"12" Prototipo: Inter · 12px · 500 · 0.12em · dorado-profundo */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__num { font-family: var(--pyrus-font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; color: var(--pyrus-dorado-profundo) !important; } /* 26-F — Strong dentro del cuerpo legal Prototipo: 500 · negro-carbón (énfasis legible sobre #3a3e48) */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-seccion__cuerpo strong { font-weight: 500 !important; color: var(--pyrus-negro-carbon) !important; } /* 26-G — Subtexto de contacto legal Prototipo: Inter · 16px · 300 · 1.75 · #3a3e48 */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__subtexto { font-family: var(--pyrus-font-body) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.75 !important; letter-spacing: 0 !important; color: #3a3e48 !important; } /* 26-H — Nota de cierre del bloque de contacto Prototipo: Inter · 14px · 300 · 1.75 · azul-grisáceo */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-contacto__nota { font-family: var(--pyrus-font-body) !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--pyrus-azul-grisaceo) !important; } /* 26-I — Etiquetas de tarjetas de datos legales Prototipo: Inter · 12px · 500 · 0.10em · uppercase · azul-grisáceo */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-dato__etiqueta { font-family: var(--pyrus-font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: var(--pyrus-azul-grisaceo) !important; } /* 26-J — Valores de tarjetas de datos (email, dirección, web) Prototipo: Lora · clamp(15px,1.5vw,18px) · 400 · negro-carbón */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-dato__valor { font-family: var(--pyrus-font-heading) !important; font-size: clamp(15px, 1.5vw, 18px) !important; font-weight: 400 !important; letter-spacing: 0.01em !important; line-height: 1.40 !important; color: var(--pyrus-negro-carbon) !important; text-decoration: none !important; } /* 26-K — Hero legal: subtexto sobre fondo oscuro Prototipo: Inter · 16px · 300 · 1.75 · rgba(247,244,238,0.70) 22-E ya fue corregido a opacity:1. */ .elementor-widget-container:has(.pyrus-header) .pyrus-legal-hero__subtexto { font-family: var(--pyrus-font-body) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 1.75 !important; letter-spacing: 0 !important; color: rgba(247, 244, 238, 0.70) !important; } /* 26-L — Mobile: intro__texto en ≤640px Prototipo ≤640px: font-size base (16px), line-height 1.75 (26-A fuerza 18px sin breakpoint; esto lo reajusta en móvil). */ @media (max-width: 640px) { .elementor-widget-container:has(.pyrus-header) .pyrus-legal-intro__texto { font-size: 16px !important; line-height: 1.75 !important; } } /* ========================================================= BLOQUE 27 — Contacto: compatibilidad visual WordPress/Elementor Versión: v1.9.0 Problemas que resuelve: - Botón submit con fondo/borde rosado/magenta de Elementor - FAQ con fondo magenta en item activo/enfocado/expandido - FAQ mobile con overflow horizontal y texto que se corta - Inputs y textarea con estilos de WordPress no deseados - Tipografía de formulario, canales y secciones de Contacto Alcance: exclusivamente clases .pyrus-contacto-* y .pyrus-cform. No afecta a /gracias/, /aviso-de-privacidad/ ni /politica-de-cookies/. ========================================================= */ /* 27-A — Font-smoothing en secciones de la página Contacto */ .pyrus-contacto-hero, .pyrus-contacto-intro, .pyrus-contacto-form, .pyrus-contacto-canales, .pyrus-contacto-mapa, .pyrus-contacto-cobertura, .pyrus-faq.pyrus-contacto-faq, .pyrus-contacto-cierre { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 27-B — Hero Contacto: familia tipográfica y color de texto */ .pyrus-contacto-hero__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-contacto-hero__subtexto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.78) !important; } /* 27-C — Botón submit del formulario: dorado sólido, sin rosa/magenta. WordPress y Hello Elementor aplican background, border-color y outline a button:focus y button:active con su color de acento global. Los selectores de clase .pyrus-cform__submit tienen mayor especificidad que los genéricos de WordPress (0,0,1) y cubren todos los estados. */ .pyrus-cform__submit { background-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; border: 1px solid var(--pyrus-dorado) !important; border-radius: 3px !important; box-shadow: none !important; outline: none !important; } .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } .pyrus-cform__submit:focus, .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* 27-D — FAQ acordeón Contacto: eliminar fondo rosa/magenta. Elementor aplica su color de acento global a button:focus y button[aria-expanded="true"] dentro del widget. La clase .pyrus-contacto-faq limita el alcance al FAQ de Contacto. */ .pyrus-contacto-faq .pyrus-faq__pregunta, .pyrus-contacto-faq .pyrus-faq__pregunta:hover { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-contacto-faq .pyrus-faq__pregunta:focus, .pyrus-contacto-faq .pyrus-faq__pregunta:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-contacto-faq .pyrus-faq__pregunta:active, .pyrus-contacto-faq .pyrus-faq__pregunta[aria-expanded="true"] { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } /* Items del FAQ: sin background en ningún estado */ .pyrus-contacto-faq .pyrus-faq__item { background: transparent !important; border-radius: 0 !important; } /* 27-E — FAQ Contacto mobile: corregir overflow y wrapping. En mobile, las preguntas largas pueden desbordarse a la derecha si el botón hereda white-space: nowrap o si el layout flex no distribuye correctamente el espacio entre texto y flecha. */ .pyrus-contacto-faq .pyrus-faq__pregunta { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; word-break: break-word; text-align: left; overflow: visible; } /* Span de texto: cede espacio a la flecha sin cortar el texto */ .pyrus-contacto-faq .pyrus-faq__pregunta > span { flex: 1 !important; min-width: 0 !important; white-space: normal !important; word-break: break-word !important; overflow-wrap: anywhere !important; } /* Flecha: no encoge, alineada a la derecha, dorada */ .pyrus-contacto-faq .pyrus-faq__icono { flex-shrink: 0 !important; margin-left: 12px !important; color: var(--pyrus-dorado) !important; } .pyrus-contacto-faq .pyrus-faq__icono path { stroke: var(--pyrus-dorado) !important; } @media (max-width: 640px) { .pyrus-contacto-faq, .pyrus-contacto-faq .pyrus-faq__item { overflow: visible !important; } } /* 27-F — Inputs, textarea y labels del formulario custom. WordPress y Hello Elementor aplican estilos globales a input y textarea (border-color, box-shadow, background). Se blindan con !important. */ /* Labels: Inter uppercase azul grisáceo */ .pyrus-cform .pyrus-form-label { font-family: var(--pyrus-font-body) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--pyrus-azul-grisaceo) !important; display: block !important; } /* Inputs y textarea: borde gris claro, fondo blanco */ .pyrus-cform .pyrus-form-input { font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; background: #ffffff !important; border: 1px solid #E9E4DA !important; border-radius:2px !important; box-shadow: none !important; outline: none !important; width: 100% !important; box-sizing: border-box !important; } /* Placeholder: azul grisáceo suave */ .pyrus-cform .pyrus-form-input::placeholder { color: var(--pyrus-azul-grisaceo) !important; font-weight: 300 !important; opacity: 1 !important; } /* Focus: borde dorado, sin rosa ni azul WordPress */ .pyrus-cform .pyrus-form-input:focus, .pyrus-cform .pyrus-form-input:focus-visible { border-color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; background: #ffffff !important; } /* Textarea: altura mínima coherente con el diseño */ .pyrus-cform textarea.pyrus-form-input { resize: vertical !important; min-height: 120px !important; } /* 27-G — Tipografía del formulario: encabezado, lead, nota */ .pyrus-contacto-form__titulo, .pyrus-contacto-canales__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-contacto-form__lead, .pyrus-contacto-canales__lead, .pyrus-contacto-form__nota { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: var(--pyrus-azul-grisaceo) !important; } /* Microcopy bajo el botón */ .pyrus-cform__microcopy { font-family: var(--pyrus-font-body) !important; font-size: 13px !important; font-weight: 300 !important; color: var(--pyrus-azul-grisaceo) !important; } /* Span "(opcional)" dentro del label: hereda Inter, sin uppercase */ .pyrus-cform__opcional { font-weight: 300 !important; color: var(--pyrus-azul-grisaceo) !important; text-transform: none !important; letter-spacing: 0 !important; } /* 27-H — Canales de contacto directo: etiqueta y valor */ .pyrus-contacto-canal__etiqueta { font-family: var(--pyrus-font-body) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--pyrus-azul-grisaceo) !important; display: block !important; } .pyrus-contacto-canal__valor { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; text-decoration: none !important; } .pyrus-contacto-canal__valor:hover { color: var(--pyrus-dorado-profundo) !important; text-decoration: none !important; } /* 27-I — FAQ Contacto: tipografía de preguntas, respuestas e icono */ /* Texto de la pregunta: Lora */ .pyrus-contacto-faq .pyrus-faq__pregunta > span { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; } /* Respuesta: Inter ligero, color editorial */ .pyrus-contacto-faq .pyrus-faq__respuesta-inner p { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: #4a5060 !important; line-height: 1.75 !important; } /* 27-J — Sección intro de Contacto */ .pyrus-contacto-intro__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-contacto-intro__parrafo { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: var(--pyrus-azul-grisaceo) !important; } /* 27-K — Bloque "Te podemos ayudar con" */ .pyrus-contacto-ayuda__titulo { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-contacto-ayuda__item { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: var(--pyrus-azul-grisaceo) !important; } /* ========================================================= BLOQUE 28 — Contacto WordPress: botón submit del formulario Versión: v1.10.0 Problema que corrige: El botón "Enviar mensaje" aparece pequeño y alineado a la izquierda en WordPress. BLOQUE 27-C cubrió color/borde/fondo pero no estableció display, width, padding ni tipografía. Elementor y WordPress aplican a button {} estilos que reducen el botón a tamaño inline y lo alinean al inicio del contenedor. Solución: Selectores anclados al ID del formulario (#pyrus-form-contacto-custom) y a la columna del formulario (.pyrus-contacto-form) con especificidad (1,1,0) para ganar frente a cualquier regla de clase de Elementor. Se añaden las propiedades de layout y tipografía ausentes en 27-C. Alcance: exclusivo al formulario custom de /contacto/. No afecta FAQ, canales, /gracias/ ni páginas legales. ========================================================= */ /* 28-A — Contenedor del campo submit: bloque completo. Sin display: block explícito, el contenedor puede quedar como inline-block heredado y comprimir el botón hijo. */ #pyrus-form-contacto-custom .pyrus-cform__campo--submit, .pyrus-contacto-form .pyrus-cform__campo--submit { display: block !important; width: 100% !important; box-sizing: border-box !important; } /* 28-B — Botón submit: layout, tamaño y tipografía premium. display: block + width: 100% son las propiedades críticas ausentes en 27-C. Sin ellas, Elementor deja el botón como inline-block con su ancho intrínseco, lo que da apariencia "pequeño y alineado a la izquierda". */ #pyrus-form-contacto-custom .pyrus-cform__submit, .pyrus-contacto-form .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: none !important; line-height: 1.2 !important; cursor: pointer !important; /* Color/borde: refuerzo sobre 27-C con mayor especificidad */ background-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; border: 1px solid var(--pyrus-dorado) !important; border-radius: 3px !important; box-shadow: none !important; outline: none !important; } /* 28-C — Hover: dorado profundo, texto negro carbón */ #pyrus-form-contacto-custom .pyrus-cform__submit:hover, .pyrus-contacto-form .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } /* 28-D — Focus / focus-visible: sin outline ni box-shadow de Elementor */ #pyrus-form-contacto-custom .pyrus-cform__submit:focus, #pyrus-form-contacto-custom .pyrus-cform__submit:focus-visible, .pyrus-contacto-form .pyrus-cform__submit:focus, .pyrus-contacto-form .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* 28-E — Active: feedback táctil coherente */ #pyrus-form-contacto-custom .pyrus-cform__submit:active, .pyrus-contacto-form .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* 28-F — Mobile: ancho completo sin desbordamiento */ @media (max-width: 640px) { #pyrus-form-contacto-custom .pyrus-cform__submit, .pyrus-contacto-form .pyrus-cform__submit { width: 100% !important; max-width: 100% !important; padding: 15px 20px !important; } } /* ========================================================= BLOQUE 29 — Nosotros: compatibilidad visual WordPress/Elementor Versión: v1.11.0 Problemas que resuelve: - Hero percibido más pesado/oscuro que en Live Server: H1 Lora y subtexto Inter 300 sustituidos por Elementor Global Fonts - Tipografía en secciones oscuras (Pilares, Confianza) con color gris heredado del widget container de Elementor (#7A7A7A) - Número decorativo 01/02/03 en Lora ultra-tenue anulado - Textos editoriales intro y confianza con font-weight incorrecto - Portafolio/Perfiles: tipo, descripción y links con familia/peso incorrectos por Elementor Global Typography - CTA cierre con .pyrus-portafolio-cierre__frase sin Lora weight 400 Alcance: exclusivamente clases .pyrus-nosotros-*, .pyrus-pilares, .pyrus-perfiles y .pyrus-nosotros-confianza — todas únicas de /nosotros/. Las clases compartidas (.pyrus-portafolio-cierre) se aíslan mediante .elementor-widget-container:has(.pyrus-nosotros-hero). No afecta a /gracias/, /contacto/ ni páginas legales. ========================================================= */ /* 29-A — Font-smoothing en todas las secciones de /nosotros/. Garantiza render antialiased coherente con el prototipo en macOS, Windows y mobile. Mismo patrón que BLOQUEs 12 y 27-A. */ .pyrus-nosotros-hero, .pyrus-nosotros-intro, .pyrus-pilares, .pyrus-perfiles, .pyrus-nosotros-confianza { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 29-B — Hero Nosotros: tipografía H1, subtexto, eyebrow y breadcrumb. Elementor Global Fonts aplica la fuente del tema a h1, anulando Lora. Hello Elementor fija font-weight: 600–700 en headings; el H1 del prototipo usa 400 (Lora editorial fino). El subtexto Inter 300 puede subir a 400 por el mismo mecanismo documentado en BLOQUE 19 para /gracias/. */ .pyrus-nosotros-hero__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-nosotros-hero__subtexto { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-lg) !important; font-weight: 300 !important; line-height: 1.7 !important; color: rgba(247, 244, 238, 0.75) !important; } /* Línea decorativa dorada del eyebrow */ .pyrus-nosotros-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; } /* Label dorado: Elementor puede heredar color gris del container */ .pyrus-nosotros-hero .pyrus-label--gold { color: var(--pyrus-dorado) !important; font-family: var(--pyrus-font-body) !important; } /* Breadcrumb sobre hero */ .pyrus-nosotros-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-nosotros-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-nosotros-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-nosotros-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } /* 29-C — Sección intro "Quiénes somos": párrafos editoriales. El primer párrafo es un

con Lora (font-family explícito en pyrus-desarrollo.css). Elementor puede imponer su fuente global aunque el elemento sea un párrafo no-heading. El segundo párrafo en Inter 300 tiene el mismo riesgo de sustitución a 400 que en las páginas legales (BLOQUEs 19/25). */ .pyrus-nosotros-intro__primer-parrafo { font-family: var(--pyrus-font-heading) !important; font-size: clamp(22px, 2.8vw, 34px) !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0.01em !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-nosotros-intro__segundo-parrafo { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-lg) !important; font-weight: 300 !important; line-height: 1.75 !important; color: #3a3e48 !important; } /* Label "Quiénes somos": Inter semibold, tracking amplio, azul oscuro. Valor de peso y tracking definidos en pyrus-desarrollo.css v1.6.0. */ .pyrus-nosotros-intro__encabezado .pyrus-label { font-family: var(--pyrus-font-body) !important; font-weight: 600 !important; letter-spacing: 0.16em !important; color: #4a555e !important; } /* 29-D — Sección oscura "Pilares": número decorativo, títulos, textos. Sobre fondo negro-suave (#1A1E24): todos los elementos de texto son blancos o semitransparentes. El color gris heredado de Elementor (#7A7A7A) hace ilegibles los textos sobre este fondo oscuro. El número decorativo en Lora con color rgba(216,192,122,0.18) — opacity ultra-baja intencional — es especialmente vulnerable a overrides de font-family (pierde el serif) y font-weight (se vuelve bold). */ .pyrus-pilares .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } /* Label "Nuestra forma de trabajar" sobre fondo oscuro */ .pyrus-pilares .pyrus-label--light { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.60) !important; } .pyrus-pilar__numero { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: rgba(216, 192, 122, 0.18) !important; } .pyrus-pilar__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-pilar__texto { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 300 !important; line-height: 1.8 !important; color: rgba(247, 244, 238, 0.65) !important; } /* 29-E — Portafolio/Perfiles: tipos, descripciones y links. Sobre fondo blanco-puro: los colores semitransparentes cálidos y los links en Lora son vulnerables a los globales de Elementor. .pyrus-perfil__acento (franja dorada lateral) puede perder su background-color si el container hereda transparent o white. */ .pyrus-perfiles__intro .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-perfiles__lead { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-lg) !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--pyrus-negro-suave) !important; } .pyrus-perfiles__nota { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--pyrus-azul-grisaceo) !important; } .pyrus-perfil__acento { background-color: var(--pyrus-dorado) !important; } .pyrus-perfil__tipo { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-xs) !important; font-weight: 500 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: var(--pyrus-azul-grisaceo) !important; } .pyrus-perfil__desc { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 400 !important; line-height: 1.7 !important; color: #3a3e48 !important; } .pyrus-perfil__link { font-family: var(--pyrus-font-heading) !important; font-size: clamp(16px, 1.6vw, 19px) !important; font-weight: 400 !important; color: var(--pyrus-dorado-profundo) !important; text-decoration: none !important; } .pyrus-perfil__link:hover { color: var(--pyrus-negro-carbon) !important; } /* 29-F — Bloque de confianza (fondo petróleo): párrafos editoriales. Mismo problema que la sección de Pilares: textos blancos/semitransparentes sobre fondo oscuro que el color gris de Elementor hace invisibles. */ .pyrus-nosotros-confianza__primer-parrafo { font-family: var(--pyrus-font-heading) !important; font-size: clamp(22px, 3vw, 38px) !important; font-weight: 400 !important; line-height: 1.5 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-nosotros-confianza__segundo-parrafo { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-lg) !important; font-weight: 300 !important; line-height: 1.75 !important; color: rgba(247, 244, 238, 0.68) !important; } /* 29-G — CTA cierre Nosotros (scoped). :has(.pyrus-nosotros-hero) aísla el override al widget de /nosotros/ únicamente — no afecta el mismo componente en /desarrollos/ ni /gracias/. BLOQUE 13 ya aplica font-family/weight global al .pyrus-portafolio-cierre__frase; aquí se refuerza con mayor especificidad para el contexto Nosotros. */ .elementor-widget-container:has(.pyrus-nosotros-hero) .pyrus-portafolio-cierre__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; } .elementor-widget-container:has(.pyrus-nosotros-hero) .pyrus-portafolio-cierre__sub { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--pyrus-azul-grisaceo) !important; } /* 29-H — Mobile Nosotros: responsive y overflow. Los breakpoints replican los de pyrus-desarrollo.css para esta página. Se refuerzan solo las propiedades que Elementor puede interferir en mobile. */ @media (max-width: 767px) { .pyrus-nosotros-hero__titulo { font-size: clamp(30px, 9.5vw, 48px) !important; } .pyrus-nosotros-hero__subtexto { font-size: var(--pyrus-type-base) !important; } } @media (max-width: 640px) { /* Sección confianza: evitar overflow horizontal en mobile */ .pyrus-nosotros-confianza__inner { max-width: 100%; overflow-x: hidden; } .pyrus-nosotros-confianza__primer-parrafo { font-size: clamp(19px, 5.5vw, 26px) !important; line-height: 1.6 !important; } /* Intro "Quiénes somos" mobile: escalar texto principal */ .pyrus-nosotros-intro__primer-parrafo { font-size: clamp(20px, 5.5vw, 28px) !important; } .pyrus-nosotros-intro__segundo-parrafo { font-size: var(--pyrus-type-base) !important; } } /* ========================================================= BLOQUE 30 — Ajuste fino heroes desktop /nosotros/ y /contacto/ Versión: v1.12.0 Objetivo: igualar altura, encuadre de imagen y distribución vertical del contenido del hero desktop frente al prototipo aprobado en Live Server. Causa raíz probable: Elementor Canvas puede interferir con las propiedades de layout de los heroes de dos formas: (A) Anulación silenciosa de flex properties: Aunque el BLOQUE 2/3 zeroan padding/margin en los wrappers de Elementor, algunos navegadores pueden calcular el min-height del hero section de forma ligeramente distinta cuando la section está dentro de un árbol de flex containers anidados (Elementor usa flex internamente para su grid de columnas). Forzar display/flex-direction/overflow con !important garantiza que el layout base del hero no se vea alterado. (B) padding-top crítico en /contacto/: .pyrus-contacto-hero usa `justify-content: center` + `padding-top: var(--pyrus-header-h)` para centrar el contenido visualmente por debajo del header fijo. Si Elementor Global Styles o la cadena de especificidad de Hello Elementor sobreescribe ese padding-top, el punto de centrado se desplaza hacia arriba — el contenido queda centrado en el eje geométrico completo, no en el subespacio visual bajo el header. Esto produce la diferencia vertical observada en /contacto/. (C) box-sizing y width en el hero section: Si algún wrapper de Elementor tiene box-sizing: content-box y hereda un max-width, las dimensiones del hero pueden verse afectadas. Se refuerzan width:100% y box-sizing:border-box. Alcance: selectores exclusivos de cada hero. Scoped en @media (min-width: 768px) para no afectar mobile. No toca ninguna página ya cerrada. ========================================================= */ /* 30-A — Hero desktop /nosotros/: altura, layout, imagen y contenido. El nosotros hero es un flex column con min-height:72vh y sin justify-content explícito (flex-start). El __content es el único flex child; su padding-block:clamp(40px,7vw,80px) posiciona el texto. La imagen es absolute/inset:0/object-fit:cover. Se refuerzan todas las propiedades que Elementor puede silenciar. */ @media (min-width: 768px) { .pyrus-nosotros-hero { min-height: 72vh !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; width: 100% !important; box-sizing: border-box !important; } /* Picture: contenedor absoluto de la imagen — Elementor no debe añadir display:flex ni sizing constraints a elementos */ .pyrus-nosotros-hero__picture { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; overflow: hidden !important; } /* Imagen: encuadre central desktop (sin offset de mobile: 58% center) */ .pyrus-nosotros-hero__img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* Content: único flex child — flex:0 0 auto evita stretch no deseado; padding-block replica el ritmo vertical del prototipo */ .pyrus-nosotros-hero__content { position: relative !important; z-index: 2 !important; padding-block: clamp(40px, 7vw, 80px) !important; flex: 0 0 auto !important; width: 100% !important; box-sizing: border-box !important; } } /* 30-B — Hero desktop /contacto/: altura, centrado y compensación header. El contacto hero usa justify-content:center + padding-top:72px. padding-top es el override crítico: sin él el contenido se centra en el eje geométrico completo del hero (incluyendo los 72px bajo el header), desplazando todo el texto visualmente hacia arriba respecto al prototipo aprobado en Live Server. */ @media (min-width: 768px) { .pyrus-contacto-hero { min-height: 70vh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; overflow: hidden !important; padding-top: var(--pyrus-header-h) !important; width: 100% !important; box-sizing: border-box !important; } /* Picture: mismo patrón que nosotros hero */ .pyrus-contacto-hero__picture { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; display: block !important; overflow: hidden !important; } /* Imagen desktop: encuadre central. El offset mobile (58% center) ya está en pyrus-desarrollo.css dentro de @media (max-width: 767px) y no se hereda aquí. */ .pyrus-contacto-hero__img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; display: block !important; } /* Content: flex child con padding-block propio */ .pyrus-contacto-hero__content { position: relative !important; z-index: 2 !important; padding-block: clamp(48px, 8vw, 96px) !important; flex: 0 0 auto !important; width: 100% !important; box-sizing: border-box !important; } } /* 30-C — Protección mobile: sin intervención activa. 30-A y 30-B están íntegramente dentro de @media (min-width: 768px). Los ajustes mobile de pyrus-desarrollo.css (≤640px) y BLOQUE 29-H (≤767px) permanecen inalterados y toman precedencia en mobile. Este sub-bloque documenta la decisión de no intervención mobile. */ /* ========================================================= BLOQUE 31 — Desarrollos: compatibilidad visual WordPress/Elementor Versión: v1.13.0 Página: /desarrollos/ (índice de portafolio) Ancla: .pyrus-portafolio-hero (clase única de esta página) Problemas que resuelve: - Hero desktop percibido más bajo/diferente a Live Server: Elementor puede interferir con min-height, flex layout y la imagen interior - Intro blanca: Elementor override de font-family en párrafo Lora - Grid/cards: font-family, color y peso de nombre, descripción y chips sustituidos por Elementor Global Typography - Orientación petróleo: números decorativos, textos y links con familia/color incorrectos por variables globales de Elementor - CTA cierre: scoped a /desarrollos/ — el componente es compartido; misma técnica que BLOQUE 29-G para /nosotros/ Alcance: - Clases únicas de /desarrollos/ (.pyrus-portafolio-hero, .pyrus-portafolio-intro, .pyrus-portafolio-grid, .pyrus-portafolio-card, .pyrus-orientacion) se anclan directamente. - Clases compartidas (.pyrus-portafolio-cierre) se aíslan con .elementor-widget-container:has(.pyrus-portafolio-hero). - No afecta /gracias/, /nosotros/, /contacto/ ni páginas legales. ========================================================= */ /* 31-A — Font-smoothing base en todas las secciones de /desarrollos/. Garantiza render antialiased coherente con el prototipo. Las secciones de fondo oscuro (.pyrus-orientacion, hero) son especialmente sensibles a la diferencia de subpixel rendering en Windows. */ .pyrus-portafolio-hero, .pyrus-portafolio-intro, .pyrus-orientacion, .elementor-widget-container:has(.pyrus-portafolio-hero) .pyrus-portafolio-cierre { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 31-B — Hero: imagen y tipografía. pyrus-desarrollo.css establece correctamente el layout completo del hero: min-height:68vh, display:flex, flex-direction:column, justify-content:center, overflow:hidden, padding-block del __content, max-width:760px del __inner. No se duplican esas reglas — duplicarlas con !important interfiere con el padding del Section de Elementor y produce un hero más alto que Live Server. CONFIGURACIÓN REQUERIDA EN ELEMENTOR para fidelidad con Live Server: • Section → Content Width → Full Width (Ancho completo) • Section → Padding → 0px en los 4 lados • Column → Padding → 0px en los 4 lados Sin esta configuración, el padding del Section se suma al padding-block del __content de pyrus-desarrollo.css y el hero queda más alto. Solo se sobreescriben los valores que Elementor SÍ impone a imágenes: • height: auto → height: 100% (rompe el cubrimiento del hero) • max-width: 100% → max-width: none (cap innecesario sobre width:100%) El resto de la imagen (position:absolute, inset:0, object-fit:cover) ya está en pyrus-desarrollo.css y no necesita !important. */ /* Imagen del hero: solo los dos overrides de Elementor */ .pyrus-portafolio-hero .pyrus-desarrollo-hero__img { height: 100% !important; max-width: none !important; } /* Tipografía del hero desktop — protección contra Elementor Global Fonts. La mobile (≤640px) está en pyrus-desarrollo.css; el rango 641-767px se maneja en 31-G más abajo. */ @media (min-width: 768px) { .pyrus-portafolio-hero__titulo { font-family: var(--pyrus-font-heading) !important; font-size: clamp(40px, 6.5vw, 80px) !important; font-weight: 400 !important; line-height: 1.08 !important; letter-spacing: 0.01em !important; /* valor real de pyrus-desarrollo.css */ color: var(--pyrus-blanco-marfil) !important; } .pyrus-portafolio-hero__subtexto { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-lg) !important; font-weight: 300 !important; line-height: 1.65 !important; color: rgba(247, 244, 238, 0.75) !important; } .pyrus-portafolio-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; flex-shrink: 0 !important; } .pyrus-portafolio-hero .pyrus-label--gold { color: var(--pyrus-dorado) !important; font-family: var(--pyrus-font-body) !important; } .pyrus-portafolio-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-portafolio-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-portafolio-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-portafolio-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } } /* 31-C — Intro blanca después del hero. .pyrus-portafolio-intro__texto usa Lora (font-family explícito en pyrus-desarrollo.css) — el mismo riesgo que .pyrus-nosotros-intro__primer-parrafo documentado en BLOQUE 29-C. Elementor Global Fonts puede imponer la fuente del tema a cualquier

que no esté dentro de un heading. */ .pyrus-portafolio-intro__texto { font-family: var(--pyrus-font-heading) !important; font-size: clamp(20px, 2.2vw, 26px) !important; font-weight: 400 !important; line-height: 1.50 !important; letter-spacing: 0.01em !important; color: var(--pyrus-negro-carbon) !important; } /* 31-D — Grid de cards de desarrollos: imagen, cuerpo, nombre, descripción, chips y CTA. Las cards son el contenido comercial principal de la página; cualquier alteración tipográfica de Elementor afecta directamente la conversión. - Imagen: Elementor aplica max-width:100%; height:auto, rompiendo el aspect-ratio del wrapper .pyrus-portafolio-card__img-wrap. - Nombre h2: Elementor Global Fonts puede sustituir Lora por la fuente del tema; Hello Elementor eleva font-weight a 600/700. - Descripción: Sin font-family explícita en pyrus-desarrollo.css (hereda Inter de body), Elementor puede imponer otra fuente. - Chips .pyrus-portafolio-card__attr: font-weight 500 vulnerable a reset de Elementor a 400. */ /* Estructura de la card */ .pyrus-portafolio-card { background: var(--pyrus-blanco-puro) !important; box-sizing: border-box !important; } /* Wrapper imagen: overflow hidden para el efecto hover scale */ .pyrus-portafolio-card__img-link, .pyrus-portafolio-card__img-wrap { overflow: hidden !important; display: block !important; } /* Imagen de la card: cubrir sin deformar. Elementor aplica max-width:100%; height:auto que revierten height:100%. */ .pyrus-portafolio-card__img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; display: block !important; } /* Nombre del desarrollo (h2 en Lora) */ .pyrus-portafolio-card__nombre { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; letter-spacing: 0.01em !important; } /* Enlace del nombre: color heredado, sin subrayado, hover dorado */ .pyrus-portafolio-card__nombre a { color: inherit !important; text-decoration: none !important; } .pyrus-portafolio-card__nombre a:hover { color: var(--pyrus-dorado-profundo) !important; } /* Descripción: Inter, color editorial, peso 400 en WordPress (el diseño usa font-size/color sin font-family explícita; font-weight sube a 400 porque Inter 300 en fondo blanco pierde legibilidad, mismo patrón que BLOQUE 19) */ .pyrus-portafolio-card__desc { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 400 !important; line-height: 1.7 !important; color: #3a3e48 !important; } /* Ubicación con icono */ .pyrus-portafolio-card__ubicacion { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-xs) !important; font-weight: 500 !important; letter-spacing: 0.05em !important; color: var(--pyrus-azul-grisaceo) !important; } /* Chips de atributos: Inter semibold uppercase */ .pyrus-portafolio-card__attr { font-family: var(--pyrus-font-body) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; } /* CTA "Ver desarrollo →": evitar color azul de WordPress en el link */ .pyrus-portafolio-card__cta { font-family: var(--pyrus-font-body) !important; text-decoration: none !important; } /* 31-E — Sección petróleo "Encuentra el desarrollo…". Sobre fondo oscuro (#16313D), el color gris global de Elementor (#7A7A7A) hace invisibles todos los textos. Mismo problema documentado en BLOQUE 29-D para la sección Pilares de /nosotros/. Los números decorativos 01–06 en Lora ultra-tenue son especialmente vulnerables a override de font-family (pierden el serif). */ /* H2 del encabezado */ .pyrus-orientacion .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } /* Label "¿No sabes por dónde empezar?" */ .pyrus-orientacion .pyrus-label--light { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.60) !important; } /* Párrafo introductorio */ .pyrus-orientacion__intro { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 300 !important; line-height: 1.65 !important; color: rgba(247, 244, 238, 0.68) !important; } /* Números decorativos 01–06 en Lora ultra-tenue. El color rgba(216,192,122,0.18) es intencional: si Elementor hereda el gris del container, la opacidad hace el número invisible. */ .pyrus-orientacion__tipo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -0.02em !important; color: rgba(216, 192, 122, 0.18) !important; flex-shrink: 0 !important; } /* Condición de cada item ("Si buscas…") */ .pyrus-orientacion__condicion { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 400 !important; line-height: 1.5 !important; color: rgba(247, 244, 238, 0.60) !important; } /* Enlace del desarrollo (nombre en Lora dorado suave) */ .pyrus-orientacion__link { font-family: var(--pyrus-font-heading) !important; font-size: clamp(18px, 2vw, 22px) !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0.01em !important; color: var(--pyrus-dorado-suave) !important; text-decoration: none !important; } .pyrus-orientacion__link:hover { color: var(--pyrus-dorado) !important; } /* Meta/nota uppercase ("SAN BLAS · DEPARTAMENTOS…") */ .pyrus-orientacion__nota { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-xs) !important; font-weight: 400 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; line-height: 1.5 !important; color: rgba(247, 244, 238, 0.55) !important; } /* Footer de la sección con CTA */ .pyrus-orientacion__footer-texto { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 300 !important; line-height: 1.65 !important; color: rgba(247, 244, 238, 0.50) !important; } /* 31-F — CTA final blanco (scoped a /desarrollos/). .pyrus-portafolio-cierre es un componente compartido entre /desarrollos/, /nosotros/ y /gracias/. BLOQUE 13 aplica font-family/weight globalmente. BLOQUE 29-G ya scopa para /nosotros/ con :has(.pyrus-nosotros-hero). Para /desarrollos/ se usa :has(.pyrus-portafolio-hero) — clase única de esta página — sin afectar los otros contextos. */ .elementor-widget-container:has(.pyrus-portafolio-hero) .pyrus-portafolio-cierre__frase { font-family: var(--pyrus-font-heading) !important; font-size: clamp(24px, 3.2vw, 42px) !important; font-weight: 400 !important; line-height: 1.35 !important; color: var(--pyrus-negro-carbon) !important; } .elementor-widget-container:has(.pyrus-portafolio-hero) .pyrus-portafolio-cierre__sub { font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; font-weight: 300 !important; line-height: 1.75 !important; color: var(--pyrus-azul-grisaceo) !important; } /* 31-G — Mobile seguro /desarrollos/. Solo protege lo crítico: overflow, columna única en cards, y tamaño del título del hero en el breakpoint no cubierto por pyrus-desarrollo.css. No se interviene el hero mobile de forma agresiva (ya resuelto en pyrus-desarrollo.css @media ≤640px). */ /* Mobile medio: título del hero entre 641px y 767px */ @media (max-width: 767px) { .pyrus-portafolio-hero__titulo { font-size: clamp(34px, 10vw, 56px) !important; } .pyrus-portafolio-hero__subtexto { font-size: var(--pyrus-type-base) !important; } } /* Tablet: 2 columnas — proteger contra override de grid de Elementor */ @media (max-width: 900px) { .pyrus-portafolio-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Mobile: 1 columna */ @media (max-width: 580px) { .pyrus-portafolio-grid { grid-template-columns: 1fr !important; } } /* Mobile: card imagen sin deformación */ @media (max-width: 580px) { .pyrus-portafolio-card__img { max-width: none !important; height: 100% !important; } } /* Mobile: evitar overflow horizontal en la sección orientación */ @media (max-width: 860px) { .pyrus-orientacion { overflow-x: hidden; } } /* Mobile: CTA cierre apilado centrado */ @media (max-width: 480px) { .elementor-widget-container:has(.pyrus-portafolio-hero) .pyrus-portafolio-cierre__ctas { flex-direction: column !important; align-items: center !important; } .elementor-widget-container:has(.pyrus-portafolio-hero) .pyrus-portafolio-cierre__ctas .pyrus-btn { width: 100% !important; max-width: 320px !important; } } /* ========================================================= BLOQUE 32 — Desarrollos: normalización del wrapper de página (v1.17.0) Problema: El wrapper .pyrus-wp-page--desarrollos (div raíz del snippet) puede heredar constraints del .elementor-widget-container o del .elementor-column cuando Elementor no está configurado como Full Width. Si el contenedor impone max-width o padding, todo el layout del hero queda encajonado. Este bloque es preventivo y de coste cero: solo afirma valores que ya deben ser los del flujo normal. No cambia nada visual si Elementor está correctamente configurado (Section Full Width · padding 0px). IMPORTANTE: No sustituye la configuración requerida en Elementor: · Section → Content Width → Full Width (Ancho completo) · Section → Padding → 0px en los 4 lados · Column → Padding → 0px en los 4 lados ========================================================= */ .pyrus-wp-page { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================================================= BLOQUE 34 — Aldea Hortus: compatibilidad visual WordPress/Elementor Versión: v1.18.0 Página: /desarrollos/aldea-hortus/ Ancla: .pyrus-wp-page--aldea-hortus (div raíz del snippet) Problemas que resuelve: A. Font-smoothing: antialiased en toda la página B. Imágenes: Elementor aplica height:auto a toda dentro del widget, rompiendo height:100% en hero, galería, descripción y tipologías C. Lightbox modal: botones close/prev/next con fondo/color magenta de WP. El modal es inyectado en por JS — no puede estar scoped a la página; las clases .pyrus-galeria-modal__* son únicas de páginas Pyrus. D. Galería ver-más: button {} de WordPress aplica fondo/borde de acento E. Hero: tipografía sobre fondo oscuro invisible por color gris de Elementor F. Secciones oscuras: resumen, beneficios, potencial, cierre — mismo problema G. Headings: Elementor Global Fonts puede sustituir Lora en h1–h3 H. FAQ acordeón: fondo/outline magenta en hover/focus/activo (mismo patrón que BLOQUE 27-D para /contacto/, diferente alcance) I. Formulario dark: BLOQUE 27-F fuerza background:#fff en todos los .pyrus-cform .pyrus-form-input, revirtiendo los estilos de fondo oscuro del .pyrus-conversion (rgba semitransparente). Se restauran aquí. J. Formulario submit: mismo problema que BLOQUE 28 para /contacto/ — falta display:block + width:100% para que el botón ocupe el ancho completo Reglas ya cubiertas globalmente (no se duplican): - .pyrus-cform__submit color/border → BLOQUE 27-C - .pyrus-cform .pyrus-form-input base → BLOQUE 27-F (se sobreescribe en 34-I) - .pyrus-header__logo-img / .pyrus-footer__logo-img → BLOQUE 10 - Nav links, footer links → BLOQUE 17 Regla de no-duplicación: pyrus-desarrollo.css ya controla correctamente el layout del hero (min-height, flex, justify-content, overflow, padding-block del __content). No se duplican con !important para no interferir con el padding del Section de Elementor — misma decisión documentada en BLOQUE 31-B. ========================================================= */ /* 34-A — Font-smoothing en toda la página Aldea Hortus. Una sola regla en el wrapper cubre todos los elementos hijos. Las secciones de fondo oscuro (hero, resumen, beneficios, potencial) son especialmente sensibles al subpixel rendering en Windows. */ .pyrus-wp-page--aldea-hortus { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 34-B — Imágenes: neutralizar height:auto de Elementor. Elementor y Hello Elementor aplican a toda dentro del widget: height: auto; max-width: 100%; Esto revierte height:100% de los contenedores con position:absolute/flex, rompiendo object-fit:cover en hero, mosaico de galería, descripción y tarjetas de tipologías. Solo se sobreescriben las dos propiedades que Elementor impone — el resto del layout viene de pyrus-desarrollo.css. */ .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-galeria__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-descripcion__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-tipologia-card__img { height: 100% !important; max-width: none !important; } /* 34-C — Lightbox modal: neutralizar button {} de WordPress en controles. El modal (.pyrus-galeria-modal) es inyectado en por JS — no puede estar scoped al wrapper de página. Las clases son únicas de páginas de desarrollo Pyrus y no contaminan ningún otro componente del sitio. WordPress/Hello Elementor aplica a button {} su color de acento global (fondo rosado o magenta) que sobreescribe el diseño premium del lightbox. */ .pyrus-galeria-modal__close, .pyrus-galeria-modal__prev, .pyrus-galeria-modal__next { background: rgba(16, 18, 22, 0.60) !important; border: 1px solid rgba(216, 192, 122, 0.15) !important; color: rgba(247, 244, 238, 0.80) !important; box-shadow: none !important; outline: none !important; } .pyrus-galeria-modal__close:hover, .pyrus-galeria-modal__prev:hover, .pyrus-galeria-modal__next:hover { background: rgba(216, 192, 122, 0.12) !important; border-color: rgba(216, 192, 122, 0.40) !important; color: rgba(247, 244, 238, 1) !important; box-shadow: none !important; } .pyrus-galeria-modal__close:focus, .pyrus-galeria-modal__close:focus-visible, .pyrus-galeria-modal__prev:focus, .pyrus-galeria-modal__prev:focus-visible, .pyrus-galeria-modal__next:focus, .pyrus-galeria-modal__next:focus-visible { outline: 2px solid var(--pyrus-dorado) !important; box-shadow: none !important; } /* 34-D — Galería ver-más: neutralizar button {} de WordPress. El botón "Ver todas las fotos" puede heredar el fondo de acento global de WordPress, rompiendo el estilo transparente del diseño. */ .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas { background: none !important; border: none !important; box-shadow: none !important; outline: none !important; } .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:hover { background: none !important; color: rgba(247, 244, 238, 0.85) !important; box-shadow: none !important; } .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:focus, .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:focus-visible { background: none !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 4px !important; box-shadow: none !important; } /* 34-E — Hero Aldea Hortus: tipografía sobre fondo oscuro (negro-carbón). El color gris #7A7A7A de Elementor Global Colors hace invisibles los textos blancos del hero. Se refuerzan familia, peso y color del prototipo. */ .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero__tagline { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.58) !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero__subtexto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.75) !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; } /* Label "Bahía de Banderas" sobre fondo oscuro */ .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-label--gold { font-family: var(--pyrus-font-body) !important; color: var(--pyrus-dorado) !important; } /* Breadcrumb en el hero */ .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } /* 34-F — Secciones oscuras: resumen, beneficios, potencial, cierre. Mismo problema documentado en BLOQUE 29-D para /nosotros/ Pilares: color gris #7A7A7A de Elementor sobre fondos oscuros = texto invisible. Solo se protege lo crítico: font-family en Lora, color en blanco/semitransparente. */ /* Resumen rápido (fondo negro-carbón) */ .pyrus-wp-page--aldea-hortus .pyrus-resumen__etiqueta { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.35) !important; } .pyrus-wp-page--aldea-hortus .pyrus-resumen__valor { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-resumen__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Beneficios diferenciales (fondo azul-petróleo) */ .pyrus-wp-page--aldea-hortus .pyrus-beneficios-desarrollo .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-beneficio-card__num { font-family: var(--pyrus-font-heading) !important; font-weight: 300 !important; color: rgba(216, 192, 122, 0.28) !important; } .pyrus-wp-page--aldea-hortus .pyrus-beneficio-card__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-beneficio-card__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* Potencial patrimonial (fondo negro-suave) */ .pyrus-wp-page--aldea-hortus .pyrus-potencial .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-potencial__statement { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-potencial__statement em { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--aldea-hortus .pyrus-potencial__punto-texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--aldea-hortus .pyrus-potencial__nota { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Cierre final del desarrollo (fondo negro-carbón) */ .pyrus-wp-page--aldea-hortus .pyrus-cierre-desarrollo__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.30 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-cierre-desarrollo__sub { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.55) !important; } /* 34-G — Headings globales: forzar Lora en todos los h1–h3 de la página. Elementor Global Fonts puede sustituir var(--pyrus-font-heading) en cualquier heading aunque pyrus-global.css lo declare. !important en el selector de la página supera a los Custom Properties de Elementor. Se excluye h4–h6: tipologías y labels usan font-size pequeño donde Elementor raramente interfiere con la familia tipográfica. */ .pyrus-wp-page--aldea-hortus h1, .pyrus-wp-page--aldea-hortus h2, .pyrus-wp-page--aldea-hortus h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* Headings en secciones claras: color negro-carbón (puede heredar gris Elementor) */ .pyrus-wp-page--aldea-hortus .pyrus-descripcion h2, .pyrus-wp-page--aldea-hortus .pyrus-ubicacion h2, .pyrus-wp-page--aldea-hortus .pyrus-amenidades h2, .pyrus-wp-page--aldea-hortus .pyrus-tipologias h2, .pyrus-wp-page--aldea-hortus .pyrus-proceso h2, .pyrus-wp-page--aldea-hortus .pyrus-relacionados h2, .pyrus-wp-page--aldea-hortus .pyrus-faq h2 { color: var(--pyrus-negro-carbon) !important; } /* 34-H — FAQ acordeón Aldea Hortus: eliminar fondo/color rosa/magenta. Mismo problema y solución que BLOQUE 27-D para /contacto/, con alcance distinto: aquí se scope a .pyrus-wp-page--aldea-hortus para aislar el FAQ de Aldea Hortus del FAQ de /contacto/ (scoped a .pyrus-contacto-faq). */ .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta, .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta:hover { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta:focus, .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta:active, .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta[aria-expanded="true"] { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } /* Items: sin background en ningún estado */ .pyrus-wp-page--aldea-hortus .pyrus-faq__item { background: transparent !important; border-radius: 0 !important; } /* Texto de la pregunta: Lora, negro-carbón */ .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta > span { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; flex: 1 !important; min-width: 0 !important; white-space: normal !important; word-break: break-word !important; } /* Icono chevron: dorado, sin encogerse */ .pyrus-wp-page--aldea-hortus .pyrus-faq__icono { flex-shrink: 0 !important; color: var(--pyrus-dorado) !important; } /* Respuesta: Inter ligero, color editorial */ .pyrus-wp-page--aldea-hortus .pyrus-faq__respuesta-inner p { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: #4a5060 !important; line-height: 1.75 !important; } /* 34-I — Formulario dark (conversión): restaurar estilos de fondo oscuro. BLOQUE 27-F fuerza globalmente background:#ffffff en .pyrus-cform .pyrus-form-input para resolver la apariencia en /contacto/ (fondo claro). Pero el formulario de Aldea Hortus está dentro de .pyrus-conversion (fondo negro-suave oscuro), donde el diseño especifica inputs semitransparentes sobre oscuro. Este sub-bloque sobreescribe BLOQUE 27-F solo en el contexto dark de AH. */ /* Inputs / textarea en fondo oscuro */ .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; box-shadow: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.30) !important; opacity: 1 !important; } .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform .pyrus-form-input:focus, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform .pyrus-form-input:focus-visible { border-color: var(--pyrus-dorado) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; outline: none !important; } /* Labels en fondo oscuro */ .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform .pyrus-form-label { color: rgba(247, 244, 238, 0.70) !important; } /* Microcopy bajo el submit: blanco semitransparente (sobre oscuro) */ .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__microcopy { color: rgba(247, 244, 238, 0.32) !important; } /* Encabezado de la sección de conversión (fondo negro-suave) */ .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-conversion__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--aldea-hortus .pyrus-conversion__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } /* 34-J — Formulario submit: layout de ancho completo. BLOQUE 27-C ya cubre el color/borde de .pyrus-cform__submit globalmente. Este bloque añade display:block + width:100%, que Elementor no hereda del .pyrus-btn--full. Patrón idéntico a BLOQUE 28 para /contacto/. */ #pyrus-form-ah-custom .pyrus-cform__campo--submit, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__campo--submit { display: block !important; width: 100% !important; box-sizing: border-box !important; } #pyrus-form-ah-custom .pyrus-cform__submit, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; } /* Hover/focus/active: refuerzo con mayor especificidad sobre BLOQUE 27-C */ #pyrus-form-ah-custom .pyrus-cform__submit:hover, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } #pyrus-form-ah-custom .pyrus-cform__submit:focus, #pyrus-form-ah-custom .pyrus-cform__submit:focus-visible, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__submit:focus, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } #pyrus-form-ah-custom .pyrus-cform__submit:active, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* 34-K — Mobile: protecciones específicas para Aldea Hortus en móvil. No se interviene el layout del hero mobile (pyrus-desarrollo.css ≤640px ya lo cubre correctamente). Solo se protegen elementos que pueden quebrarse por Elementor en viewports pequeños. */ /* FAQ mobile: evitar overflow y corte de texto */ @media (max-width: 640px) { .pyrus-wp-page--aldea-hortus .pyrus-faq__pregunta { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; overflow: visible; } .pyrus-wp-page--aldea-hortus .pyrus-faq, .pyrus-wp-page--aldea-hortus .pyrus-faq__item { overflow: visible !important; } /* Formulario submit: ancho completo en mobile */ #pyrus-form-ah-custom .pyrus-cform__submit, .pyrus-wp-page--aldea-hortus .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } } /* ========================================================= BLOQUE 35 — Aldea Hortus: ajustes finales galería / CTA Versión: v1.19.0 Página: /desarrollos/aldea-hortus/ Ancla: .pyrus-wp-page--aldea-hortus (salvo 35-C, ver nota) Problemas que resuelve: A. "Ver galería completa" magenta: BLOQUE 34-D corrigió background/border pero omitió color — Hello Elementor hereda su color de acento global. B. Focus residual post-modal: JS devuelve foco al trigger con .focus() programático; Hello Elementor aplica :focus (no :focus-visible) con outline magenta. Se neutraliza con :focus:not(:focus-visible). C. Modal controles — padding extra de WordPress: Hello Elementor aplica padding a button {}; los botones del modal (inyectados en por JS) lo reciben, agrandando su tamaño en mobile. Clases únicas de Pyrus — scope global permitido, mismo criterio que BLOQUE 34-C. D. CTA final: fondo negro-carbon (#101216) idéntico al footer crea fusión visual — se diferencia con azul-petróleo (#16313D). Nota sobre data-elementor-open-lightbox: El toolbar de Elementor (zoom/fullscreen/share) viene de su lightbox nativo que intercepta automáticamente; e.preventDefault() del JS no lo detiene. Fix HTML aplicado en snippets/wp-aldea-hortus-elementor.html: data-elementor-open-lightbox="no" en todos los .pyrus-galeria__link (×5). No se requiere cambio en pyrus-main.js ni en pyrus-global.css. ========================================================= */ /* 35-A — "Ver galería completa": todos los estados visuales correctos. BLOQUE 34-D cubría background/border pero no declaraba color. Hello Elementor hereda su color de acento global en todos los button {}. Se repite con doble selector para garantizar especificidad máxima. */ .pyrus-wp-page--aldea-hortus .pyrus-galeria__ver-mas, .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas { background: none !important; border: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.50) !important; font-family: var(--pyrus-font-body) !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-decoration: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:hover { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.85) !important; } .pyrus-wp-page--aldea-hortus .pyrus-galeria__ver-mas:focus, .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:focus { background: none !important; box-shadow: none !important; outline: none !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--aldea-hortus .pyrus-galeria__ver-mas:focus-visible, .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:focus-visible { background: none !important; box-shadow: none !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 4px !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--aldea-hortus .pyrus-galeria__ver-mas:active, .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:active { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.65) !important; } /* 35-B — Focus residual post-cierre del modal. initDevelopmentGallery() llama lastFocused.focus() al cerrar el lightbox. El foco programático activa :focus pero no :focus-visible — Hello Elementor aplica un outline con var(--e-global-color-accent) visible en los triggers. :focus:not(:focus-visible) elimina solo el foco no-visible (mouse/JS), preservando el outline dorado para navegación por teclado (:focus-visible). */ .pyrus-wp-page--aldea-hortus .pyrus-galeria__link:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-galeria__ver-mas:focus:not(:focus-visible), .pyrus-wp-page--aldea-hortus button.pyrus-galeria__ver-mas:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* 35-C — Modal controles: neutralizar padding de WordPress. Hello Elementor aplica padding a button {}. Los botones del modal de Pyrus se inyectan en por JS y reciben este padding extra — se perciben visualmente más grandes/duros, especialmente en mobile. padding:0 + box-sizing restauran las dimensiones definidas en pyrus-desarrollo.css. El :focus:not(:focus-visible) neutraliza el outline magenta al abrirse (JS llama closeBtn.focus() en openModal() para accesibilidad de teclado). */ .pyrus-galeria-modal__close, .pyrus-galeria-modal__prev, .pyrus-galeria-modal__next { padding: 0 !important; box-sizing: border-box !important; } .pyrus-galeria-modal__close:focus:not(:focus-visible), .pyrus-galeria-modal__prev:focus:not(:focus-visible), .pyrus-galeria-modal__next:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* 35-D — CTA final: separación tonal del footer. .pyrus-cierre-desarrollo usa var(--pyrus-negro-carbon) = #101216, idéntico al footer — la sección de cierre se percibe como parte del footer. var(--pyrus-azul-petroleo) = #16313D crea contraste tonal sutil y premium. El glow decorativo ::before (gradiente dorado rgba) funciona sobre cualquier fondo oscuro. Tipografía, botones, padding y glow: sin modificación. */ .pyrus-wp-page--aldea-hortus .pyrus-cierre-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; /* #16313D vs footer #101216 */ } /* ========================================================= BLOQUE 36 — Aldea Hortus: modal circular y hero CTAs Versión: v1.20.0 Página: /desarrollos/aldea-hortus/ Ancla: .pyrus-wp-page--aldea-hortus (36-B) Global para .pyrus-galeria-modal__* (36-A — modal inyectado en body) Problemas que resuelve: A. Modal botones cuadrados/rectangulares: BLOQUE 34-C y 35-C corregían color, padding, outline — pero no las propiedades de forma. Hello Elementor sobreescribe en button {}: border-radius (a 3px o similar, no 50%) display (a inline-block, no flex) Sin !important, pyrus-desarrollo.css no puede ganar. Propiedades que faltaban con !important: border-radius, display, align-items, justify-content, width, height, aspect-ratio, line-height, appearance, overflow. B. Hero "Ver modelos" hover morado: BLOQUE 34-E cubría texto/labels del hero pero no los de .pyrus-desarrollo-hero__ctas. Hello Elementor aplica var(--e-global-color-accent) en a:hover. Se declaran explícitamente los estados interactivos del secondary button en el hero. ========================================================= */ /* ── 36-A — Modal controles: restaurar forma circular ───────────────────── Complementa BLOQUE 34-C (colores) y 35-C (padding/focus no-visible). Agrega las propiedades de FORMA que faltaban con !important. Las clases .pyrus-galeria-modal__* son únicas de Pyrus — scope global ok. */ /* Base compartida: forma, layout y reset de apariencia */ .pyrus-galeria-modal__close, .pyrus-galeria-modal__prev, .pyrus-galeria-modal__next { display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; aspect-ratio: 1 / 1 !important; line-height: 1 !important; -webkit-appearance: none !important; appearance: none !important; overflow: hidden !important; text-decoration: none !important; } /* Dimensiones exactas: cerrar 44×44, prev/next 52×52 (igual que prototipo) */ .pyrus-galeria-modal__close { width: 44px !important; height: 44px !important; min-width: 44px !important; } .pyrus-galeria-modal__prev, .pyrus-galeria-modal__next { width: 52px !important; height: 52px !important; min-width: 52px !important; } /* Hover: gold tint sutil — preserva la forma circular */ .pyrus-galeria-modal__close:hover, .pyrus-galeria-modal__prev:hover, .pyrus-galeria-modal__next:hover { background: rgba(216, 192, 122, 0.12) !important; border-color: rgba(216, 192, 122, 0.40) !important; color: rgba(247, 244, 238, 1) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* Focus programático (JS llama closeBtn.focus() al abrir) */ .pyrus-galeria-modal__close:focus, .pyrus-galeria-modal__prev:focus, .pyrus-galeria-modal__next:focus { box-shadow: none !important; outline: none !important; } /* Focus visible por teclado: outline dorado elegante */ .pyrus-galeria-modal__close:focus-visible, .pyrus-galeria-modal__prev:focus-visible, .pyrus-galeria-modal__next:focus-visible { outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 2px !important; box-shadow: none !important; } /* Active */ .pyrus-galeria-modal__close:active, .pyrus-galeria-modal__prev:active, .pyrus-galeria-modal__next:active { background: rgba(216, 192, 122, 0.20) !important; border-color: rgba(216, 192, 122, 0.60) !important; color: rgba(247, 244, 238, 1) !important; box-shadow: none !important; outline: none !important; } /* Mobile: reducir prev/next a 44×44px — siguen siendo circulares */ @media (max-width: 768px) { .pyrus-galeria-modal__prev, .pyrus-galeria-modal__next { width: 44px !important; height: 44px !important; min-width: 44px !important; } } /* ── 36-B — Hero CTAs: preservar sistema dorado en hover/focus/active ────── .pyrus-btn--secondary tiene rest correcto: color/border dorado (pyrus-global.css). Elementor sobreescribe los estados interactivos con --e-global-color-accent. BLOQUE 34-E cubría texto del hero, no los del hero__ctas. Scope: .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero (no afecta cierre ni otras páginas). El botón primario (.pyrus-btn--primary) no fue reportado como problemático — no se toca. */ .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-btn--secondary:hover { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-btn--secondary:focus { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-btn--secondary:focus-visible { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--aldea-hortus .pyrus-desarrollo-hero .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.14) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } /* ========================================================================== BLOQUE 37 — Balam Resort: compatibilidad visual WordPress/Elementor Versión: v1.21.0 Página: /desarrollos/balam-resort/ Ancla: .pyrus-wp-page--balam-resort (div raíz del snippet) Problemas que resuelve: A. Font-smoothing: antialiased en toda la página B. Imágenes: Elementor aplica height:auto a toda dentro del widget, rompiendo height:100% en hero, galería, descripción y tipologías C. Galería ver-más: button {} de WordPress aplica fondo/borde de acento magenta; se neutraliza en todos los estados interactivos D. Hero: tipografía sobre fondo oscuro invisible por color gris de Elementor E. Secciones oscuras: resumen, beneficios, potencial, cierre F. Headings: Elementor Global Fonts puede sustituir Lora en h1–h3 G. FAQ acordeón: fondo/outline magenta en hover/focus/activo/expandido H. Formulario dark: BLOQUE 27-F fuerza background:#fff en todos los .pyrus-cform .pyrus-form-input — se restauran estilos de .pyrus-conversion I. Formulario submit: display:block + width:100% para ancho completo J. CTA final: fondo azul-petróleo (#16313D) para separar tonal del footer K. Hero CTAs secondary: hover/focus/active morado de Elementor → dorado L. Mobile: todas las correcciones activas en viewports pequeños Reglas ya cubiertas globalmente (no se duplican): - Modal .pyrus-galeria-modal__* → BLOQUEs 34-C, 35-C, 36-A (global) - .pyrus-cform__submit color/border → BLOQUE 27-C - .pyrus-header__logo-img / .pyrus-footer__logo-img → BLOQUE 10 - Nav links, footer links → BLOQUE 17 Regla de no-duplicación: pyrus-desarrollo.css ya controla el layout del hero correctamente. No se duplican con !important — misma decisión de BLOQUEs 31-B y 34. ========================================================================== */ /* 37-A — Font-smoothing en toda la página Balam Resort. */ .pyrus-wp-page--balam-resort { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 37-B — Imágenes: neutralizar height:auto de Elementor. Solo se sobreescriben las dos propiedades que Elementor impone; el resto del layout viene de pyrus-desarrollo.css. */ .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--balam-resort .pyrus-descripcion__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--balam-resort .pyrus-tipologia-card__img { height: 100% !important; max-width: none !important; } /* 37-C — Galería ver-más: todos los estados visuales correctos. Mismo patrón que BLOQUE 35-A para Aldea Hortus. */ .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas { background: none !important; border: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.50) !important; font-family: var(--pyrus-font-body) !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-decoration: none !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:hover { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.85) !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:focus, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:focus { background: none !important; box-shadow: none !important; outline: none !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:focus-visible, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:focus-visible { background: none !important; box-shadow: none !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 4px !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:active, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:active { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.65) !important; } /* Focus residual post-cierre del modal (mismo patrón que BLOQUE 35-B) */ .pyrus-wp-page--balam-resort .pyrus-galeria__link:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:focus:not(:focus-visible), .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* 37-D — Hero Balam Resort: tipografía sobre fondo oscuro. Mismo patrón que BLOQUE 34-E para Aldea Hortus. */ .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero__tagline { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.58) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero__subtexto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.75) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-label--gold { font-family: var(--pyrus-font-body) !important; color: var(--pyrus-dorado) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } /* 37-E — Secciones oscuras: resumen, beneficios, potencial, cierre. Mismo patrón que BLOQUE 34-F para Aldea Hortus. */ /* Resumen rápido (fondo negro-carbón) */ .pyrus-wp-page--balam-resort .pyrus-resumen__etiqueta { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.35) !important; } .pyrus-wp-page--balam-resort .pyrus-resumen__valor { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-resumen__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Beneficios diferenciales (fondo azul-petróleo) */ .pyrus-wp-page--balam-resort .pyrus-beneficios-desarrollo .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-beneficio-card__num { font-family: var(--pyrus-font-heading) !important; font-weight: 300 !important; color: rgba(216, 192, 122, 0.28) !important; } .pyrus-wp-page--balam-resort .pyrus-beneficio-card__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-beneficio-card__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* Potencial patrimonial (fondo negro-suave) */ .pyrus-wp-page--balam-resort .pyrus-potencial .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-potencial__statement { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-potencial__statement em { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--balam-resort .pyrus-potencial__punto-texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--balam-resort .pyrus-potencial__nota { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Cierre final del desarrollo (fondo oscuro) */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.30 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo__sub { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.55) !important; } /* 37-F — Headings globales: forzar Lora en todos los h1–h3. Mismo patrón que BLOQUE 34-G para Aldea Hortus. */ .pyrus-wp-page--balam-resort h1, .pyrus-wp-page--balam-resort h2, .pyrus-wp-page--balam-resort h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* Headings en secciones claras: color negro-carbón */ .pyrus-wp-page--balam-resort .pyrus-descripcion h2, .pyrus-wp-page--balam-resort .pyrus-ubicacion h2, .pyrus-wp-page--balam-resort .pyrus-amenidades h2, .pyrus-wp-page--balam-resort .pyrus-tipologias h2, .pyrus-wp-page--balam-resort .pyrus-proceso h2, .pyrus-wp-page--balam-resort .pyrus-relacionados h2, .pyrus-wp-page--balam-resort .pyrus-faq h2 { color: var(--pyrus-negro-carbon) !important; } /* 37-G — FAQ acordeón: eliminar fondo/color rosa/magenta. Mismo patrón que BLOQUE 34-H para Aldea Hortus. Estado base: negro-carbon. Hover: dorado-profundo (igual que Live Server). */ .pyrus-wp-page--balam-resort .pyrus-faq__pregunta { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--balam-resort .pyrus-faq__pregunta:hover { color: var(--pyrus-dorado-profundo) !important; } .pyrus-wp-page--balam-resort .pyrus-faq__pregunta:focus, .pyrus-wp-page--balam-resort .pyrus-faq__pregunta:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--balam-resort .pyrus-faq__pregunta:active, .pyrus-wp-page--balam-resort .pyrus-faq__pregunta[aria-expanded="true"] { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--balam-resort .pyrus-faq__item { background: transparent !important; border-radius: 0 !important; } .pyrus-wp-page--balam-resort .pyrus-faq__pregunta > span { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; flex: 1 !important; min-width: 0 !important; white-space: normal !important; word-break: break-word !important; } .pyrus-wp-page--balam-resort .pyrus-faq__icono { flex-shrink: 0 !important; color: var(--pyrus-dorado) !important; } .pyrus-wp-page--balam-resort .pyrus-faq__respuesta-inner { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: #4a5060 !important; line-height: 1.75 !important; } /* 37-H — Formulario dark: restaurar estilos de fondo oscuro. BLOQUE 27-F fuerza background:#fff globalmente en .pyrus-cform .pyrus-form-input. El formulario de Balam Resort está en .pyrus-conversion (fondo negro-suave). Mismo patrón que BLOQUE 34-I para Aldea Hortus. */ .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; box-shadow: none !important; } .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.30) !important; opacity: 1 !important; } .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform .pyrus-form-input:focus, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform .pyrus-form-input:focus-visible { border-color: var(--pyrus-dorado) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; outline: none !important; } .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform .pyrus-form-label { color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__microcopy { color: rgba(247, 244, 238, 0.32) !important; } .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-conversion__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--balam-resort .pyrus-conversion__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } /* 37-I — Formulario submit: layout de ancho completo. Mismo patrón que BLOQUE 34-J para Aldea Hortus; IDs de Balam Resort. */ #pyrus-form-br-custom .pyrus-cform__campo--submit, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__campo--submit { display: block !important; width: 100% !important; box-sizing: border-box !important; } #pyrus-form-br-custom .pyrus-cform__submit, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; } #pyrus-form-br-custom .pyrus-cform__submit:hover, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } #pyrus-form-br-custom .pyrus-cform__submit:focus, #pyrus-form-br-custom .pyrus-cform__submit:focus-visible, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__submit:focus, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } #pyrus-form-br-custom .pyrus-cform__submit:active, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* 37-J — CTA final: separación tonal del footer. Mismo patrón que BLOQUE 35-D para Aldea Hortus. */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; /* #16313D vs footer #101216 */ } /* 37-K — Hero CTAs: preservar sistema dorado en hover/focus/active. Mismo patrón que BLOQUE 36-B para Aldea Hortus. */ .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-btn--secondary:hover { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-btn--secondary:focus { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-btn--secondary:focus-visible { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--balam-resort .pyrus-desarrollo-hero .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.14) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } /* 37-L — Mobile: protecciones específicas para Balam Resort en móvil. Mismo patrón que BLOQUE 34-K para Aldea Hortus. */ @media (max-width: 640px) { .pyrus-wp-page--balam-resort .pyrus-faq__pregunta { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; overflow: visible; } .pyrus-wp-page--balam-resort .pyrus-faq, .pyrus-wp-page--balam-resort .pyrus-faq__item { overflow: visible !important; } #pyrus-form-br-custom .pyrus-cform__submit, .pyrus-wp-page--balam-resort .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } } /* 37-M — Balam Resort: microajustes FAQ, CTA final y galería mobile Versión: v1.21.1 Complementa BLOQUE 37 con correcciones detectadas en validación contra Live Server. No reescribe nada de 37-A a 37-L. M1. FAQ pregunta: layout flex → icono +/− siempre anclado a la derecha, independientemente del largo del texto; el botón ocupa 100% de la fila. M2. CTA final .pyrus-btn--secondary: neutralizar hover morado de Elementor en todos los estados interactivos dentro de .pyrus-cierre-desarrollo. M3. Galería "Ver galería completa →": tipografía más fina en mobile — font-weight más ligero, font-size menor, letter-spacing controlado. ========================================================================== */ /* M1 — FAQ: alineación flex con icono anclado a la derecha ── */ .pyrus-wp-page--balam-resort .pyrus-faq__pregunta { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; gap: 12px !important; } /* Mobile: gap ligeramente menor para viewports pequeños */ @media (max-width: 640px) { .pyrus-wp-page--balam-resort .pyrus-faq__pregunta { gap: 8px !important; } } /* M2 — CTA final: .pyrus-btn--secondary sin morado en ningún estado ── */ /* Base / :link / :visited */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary, .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary:link, .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary:visited { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; text-decoration: none !important; box-shadow: none !important; } /* Hover: gold tint sutil, nunca morado */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary:hover { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: rgba(216, 192, 122, 0.10) !important; text-decoration: none !important; box-shadow: none !important; } /* Focus (no visible): sin outline ni color de acento de Elementor */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* Focus visible por teclado: outline dorado */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus-visible { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } /* Active: feedback táctil dorado */ .pyrus-wp-page--balam-resort .pyrus-cierre-desarrollo .pyrus-btn--secondary:active { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: rgba(216, 192, 122, 0.16) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* M3 — Galería mobile: tipografía más fina del enlace "Ver galería completa →" ── */ @media (max-width: 640px) { .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas { font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.04em !important; line-height: 1.5 !important; color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:hover { color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas:active, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas:active { color: rgba(247, 244, 238, 0.55) !important; } } /* 37-N — Balam Resort: presencia FAQ y espaciado galería mobile Versión: v1.21.2 Complementa 37-G (colores FAQ) y 37-M (layout flex FAQ, galería mobile). No reescribe nada de 37-A a 37-M. N1. FAQ: ancho del contenedor liberado, padding vertical de cada ítem aumentado, font-size y line-height de la pregunta reforzados para igualar el peso visual del Live Server — sin fondos ni cajas extra. N2. Galería mobile: margin-top sobre "Ver galería completa →" para dar más separación respecto a la imagen superior, manteniendo todo lo demás igual (font, color, letter-spacing de v1.21.1). ========================================================================== */ /* N1 — FAQ: más presencia visual ── */ /* Contenedor: liberar restricciones de ancho de Elementor */ .pyrus-wp-page--balam-resort .pyrus-faq, .pyrus-wp-page--balam-resort .pyrus-faq__lista { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } /* Botón pregunta: padding vertical generoso + cero horizontal (reset Hello Elementor button) */ .pyrus-wp-page--balam-resort .pyrus-faq__pregunta { padding-block: 20px !important; padding-inline: 0 !important; font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.4 !important; } /* Respuesta: respiración inferior al expandirse */ .pyrus-wp-page--balam-resort .pyrus-faq__respuesta-inner { padding-bottom: 20px !important; } /* Mobile: font-size y padding ligeramente reducidos, sin perder presencia */ @media (max-width: 640px) { .pyrus-wp-page--balam-resort .pyrus-faq__pregunta { font-size: clamp(15px, 4vw, 17px) !important; padding-block: 16px !important; } } /* N2 — Galería mobile: más aire sobre "Ver galería completa →" ── */ @media (max-width: 640px) { .pyrus-wp-page--balam-resort .pyrus-galeria__ver-mas, .pyrus-wp-page--balam-resort button.pyrus-galeria__ver-mas { display: block !important; /* margin-top funciona en block/flex, no en inline */ margin-top: 20px !important; padding-top: 4px !important; padding-bottom: 4px !important; } } /* 37-O — Balam Resort: alineación fina de respuestas FAQ Versión: v1.21.3 Complementa 37-G (colores/estados), 37-M (layout flex), 37-N (presencia). No reescribe nada de 37-A a 37-N. Problema: al expandir una pregunta, la respuesta aparece desplazada hacia adentro — padding-left o margin-left heredado de Hello Elementor en elementos

/ o del reset de Elementor sobre listas y bloques. El texto de las respuestas también se percibe más tenue/azulado que en Live Server por el color #4a5060 declarado en 37-G — se oscurece puntualmente. ========================================================================== */ /* O1 — Respuesta: eliminar sangría lateral ── */ /* El wrapper .pyrus-faq__respuesta puede recibir padding-left de Hello Elementor si interpreta el elemento como un list-item o details-content. Se forza a cero en todos los lados que podrían generar desfase. */ .pyrus-wp-page--balam-resort .pyrus-faq__respuesta { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* .pyrus-faq__respuesta-inner: mismo reset — es el nodo real que contiene el párrafo; si tiene text-indent o padding-left heredados, el texto se ve sangrado aunque el wrapper esté a cero. */ .pyrus-wp-page--balam-resort .pyrus-faq__respuesta-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Párrafo de respuesta: reset de sangría propia de navegador/Elementor. text-indent:0 elimina la sangría de primera línea que algunos navegadores aplican a

dentro de bloques colapsables. */ .pyrus-wp-page--balam-resort .pyrus-faq__respuesta-inner p { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } /* Ítem: confirmar que el contenedor tampoco sangra */ .pyrus-wp-page--balam-resort .pyrus-faq__item { padding-left: 0 !important; margin-left: 0 !important; } /* O2 — Color de texto FAQ: más sólido, menos azulado ── */ /* Pregunta: negro-carbón sólido en lugar del gris de Elementor. 37-G ya declaraba var(--pyrus-negro-carbon) en el botón; aquí se refuerza directamente en el span para ganar especificidad sobre posibles overrides. */ .pyrus-wp-page--balam-resort .pyrus-faq__pregunta > span { color: #1C1C1C !important; } /* Respuesta: oscurecer de #4a5060 (declarado en 37-G) a #3E4A4D — más cálido y sólido, sin exceso de azul. El texto de la respuesta es nodo directo del div, sin

; se aplica al contenedor. */ .pyrus-wp-page--balam-resort .pyrus-faq__respuesta-inner { color: #3E4A4D !important; } /* ───────────────────────────────────────────────────────────────────────────── 37-P — Balam Resort: hover dorado FAQ ───────────────────────────────────────────────────────────────────────────── CAUSA: 37-O O2 declara `color:#1C1C1C !important` directamente en el hijo, bloqueando la herencia del color dorado que 37-G aplica al botón padre en :hover. La pseudo-clase :hover > span tiene especificidad 0,3,1 vs 0,2,1 de la regla base — gana en cascada aunque esté después. ────────────────────────────────────────────────────────────────────────────── */ .pyrus-wp-page--balam-resort .pyrus-faq__pregunta:hover > span { color: var(--pyrus-dorado-profundo) !important; } /* ========================================================================== BLOQUE 38 — Xahala: compatibilidad visual WordPress/Elementor Versión: v1.22.0 Página: /desarrollos/xahala/ Ancla: .pyrus-wp-page--xahala (div raíz del snippet) Problemas que resuelve: A. Font-smoothing: antialiased en toda la página. B. Imágenes: Elementor aplica height:auto a dentro del widget, rompiendo height:100% en hero, galería, descripción y cotos. DIFERENCIA vs Balam: hero y descripción usan — se protege también el contenedor con display:block y height:100%. C. Galería ver-más: button {} de WordPress aplica fondo/borde magenta; se neutraliza en todos los estados interactivos. Incluye focus residual. D. Hero: tipografía sobre fondo oscuro. DIFERENCIA vs Balam (37-D): H1 usa .pyrus-desarrollo-hero__nombre (no __titulo). Eyebrow label usa .pyrus-label--light (no --gold). Sin elemento .pyrus-desarrollo-hero__subtexto en esta página. E. Secciones oscuras: resumen, numeralia (único Xahala — background negro-suave), beneficios, potencial, cierre. F. Headings globales: forzar Lora en h1–h3; negro-carbón en secciones claras. Añade .pyrus-respaldo respecto a Balam Resort. G. FAQ acordeón: fondo/outline magenta → transparente; hover dorado. IGUAL que Balam: texto de respuesta directo en .pyrus-faq__respuesta-inner sin

— se aplica color/font al contenedor directamente. H. Formulario dark: BLOQUE 27-F fuerza background:#fff → se neutraliza. I. Formulario submit: display:block + width:100%. J. CTA final: fondo azul-petróleo (#16313D) para separar del footer. K. Hero CTAs secondary: hover/focus/active sin morado. L. Mobile: protecciones en viewports pequeños. M. Microajustes: FAQ flex (M1), CTA final secondary (M2), galería mobile (M3). N. FAQ presencia y galería mobile margin. O. FAQ alineación fina de respuestas. P. Sección Respaldo (única de Xahala, fondo marfil): dot dorado, strong en Lora, cuerpo en gris azulado. Q. FAQ hover dorado: span con color !important bloquea herencia — fix explícito. Reglas ya cubiertas globalmente (no se duplican aquí): - Modal .pyrus-galeria-modal__* → BLOQUEs 34-C, 35-C, 36-A - .pyrus-cform__submit color/border base → BLOQUE 27-C Regla de no-duplicación: pyrus-desarrollo.css ya controla el layout. No se duplican con !important reglas que ese archivo define correctamente (misma decisión que BLOQUEs 37, 34). ========================================================================== */ /* 38-A — Font-smoothing en toda la página Xahala. */ .pyrus-wp-page--xahala { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 38-B — Imágenes: neutralizar height:auto de Elementor. Incluye contenedor del hero y la descripción (único de Xahala). */ .pyrus-wp-page--xahala .pyrus-desarrollo-hero__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--xahala .pyrus-galeria__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--xahala .pyrus-descripcion__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--xahala .pyrus-tipologia-card__img { height: 100% !important; max-width: none !important; } /* en hero y descripción: reforzar display/height contra Elementor. pyrus-desarrollo.css ya los declara; este !important blinda contra overrides. */ .pyrus-wp-page--xahala .pyrus-desarrollo-hero__picture, .pyrus-wp-page--xahala .pyrus-descripcion__picture { display: block !important; width: 100% !important; height: 100% !important; } /* 38-C — Galería ver-más: todos los estados visuales correctos. Mismo patrón que BLOQUEs 35-A y 37-C. */ .pyrus-wp-page--xahala .pyrus-galeria__ver-mas, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas { background: none !important; border: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.50) !important; font-family: var(--pyrus-font-body) !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-decoration: none !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:hover { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.85) !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:focus, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:focus { background: none !important; box-shadow: none !important; outline: none !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:focus-visible, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:focus-visible { background: none !important; box-shadow: none !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 4px !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:active, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:active { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.65) !important; } /* Focus residual post-cierre del modal (mismo patrón que BLOQUEs 35-B y 37-C) */ .pyrus-wp-page--xahala .pyrus-galeria__link:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:focus:not(:focus-visible), .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* 38-D — Hero Xahala: tipografía sobre fondo oscuro. DIFERENCIA vs Balam (37-D): H1 usa .pyrus-desarrollo-hero__nombre (no __titulo). Eyebrow label usa .pyrus-label--light (blanco semitransparente, no dorado). Sin elemento .pyrus-desarrollo-hero__subtexto en esta página. */ .pyrus-wp-page--xahala .pyrus-desarrollo-hero__nombre { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero__tagline { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.58) !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-label--light { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-wp-page--xahala .pyrus-desarrollo-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } /* 38-E — Secciones oscuras: resumen, numeralia, beneficios, potencial, cierre. Mismo patrón que BLOQUEs 34-F y 37-E. Añade Numeralia (background negro-suave, único de Xahala). */ /* Resumen rápido (fondo negro-carbón) */ .pyrus-wp-page--xahala .pyrus-resumen__etiqueta { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.35) !important; } .pyrus-wp-page--xahala .pyrus-resumen__valor { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-resumen__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Numeralia (fondo negro-suave — único de Xahala) */ .pyrus-wp-page--xahala .pyrus-numeralia__numero { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-numeralia__label { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--xahala .pyrus-numeralia__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.22) !important; } /* Beneficios diferenciales (fondo azul-petróleo) */ .pyrus-wp-page--xahala .pyrus-beneficios-desarrollo .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-beneficio-card__num { font-family: var(--pyrus-font-heading) !important; font-weight: 300 !important; color: rgba(216, 192, 122, 0.28) !important; } .pyrus-wp-page--xahala .pyrus-beneficio-card__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-beneficio-card__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* Potencial patrimonial (fondo negro-suave) */ .pyrus-wp-page--xahala .pyrus-potencial .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-potencial__statement { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-potencial__statement em { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--xahala .pyrus-potencial__punto-texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--xahala .pyrus-potencial__nota { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Cierre final del desarrollo (fondo oscuro) */ .pyrus-wp-page--xahala .pyrus-cierre-desarrollo__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.30 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-cierre-desarrollo__sub { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.55) !important; } /* 38-F — Headings globales: forzar Lora en todos los h1–h3. Mismo patrón que BLOQUEs 34-G y 37-F. Secciones claras: añade .pyrus-respaldo (único Xahala); sin .pyrus-amenidades. */ .pyrus-wp-page--xahala h1, .pyrus-wp-page--xahala h2, .pyrus-wp-page--xahala h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* Headings en secciones claras: color negro-carbón */ .pyrus-wp-page--xahala .pyrus-descripcion h2, .pyrus-wp-page--xahala .pyrus-respaldo h2, .pyrus-wp-page--xahala .pyrus-ubicacion h2, .pyrus-wp-page--xahala .pyrus-tipologias h2, .pyrus-wp-page--xahala .pyrus-proceso h2, .pyrus-wp-page--xahala .pyrus-relacionados h2, .pyrus-wp-page--xahala .pyrus-faq h2 { color: var(--pyrus-negro-carbon) !important; } /* 38-G — FAQ acordeón: eliminar fondo/color rosa/magenta. Mismo patrón que BLOQUEs 34-H y 37-G. IGUAL que Balam: texto de respuesta directo en .pyrus-faq__respuesta-inner sin

— se aplica font/color al contenedor directamente. */ .pyrus-wp-page--xahala .pyrus-faq__pregunta { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--xahala .pyrus-faq__pregunta:hover { color: var(--pyrus-dorado-profundo) !important; } .pyrus-wp-page--xahala .pyrus-faq__pregunta:focus, .pyrus-wp-page--xahala .pyrus-faq__pregunta:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--xahala .pyrus-faq__pregunta:active, .pyrus-wp-page--xahala .pyrus-faq__pregunta[aria-expanded="true"] { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--xahala .pyrus-faq__item { background: transparent !important; border-radius: 0 !important; } .pyrus-wp-page--xahala .pyrus-faq__pregunta > span { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; flex: 1 !important; min-width: 0 !important; white-space: normal !important; word-break: break-word !important; } .pyrus-wp-page--xahala .pyrus-faq__icono { flex-shrink: 0 !important; color: var(--pyrus-dorado) !important; } .pyrus-wp-page--xahala .pyrus-faq__respuesta-inner { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: #4a5060 !important; line-height: 1.75 !important; } /* 38-H — Formulario dark: restaurar estilos de fondo oscuro. BLOQUE 27-F fuerza background:#fff globalmente en .pyrus-cform .pyrus-form-input. El formulario de Xahala está en .pyrus-conversion (fondo negro-suave). Mismo patrón que BLOQUEs 34-I y 37-H. */ .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; box-shadow: none !important; } .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.30) !important; opacity: 1 !important; } .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform .pyrus-form-input:focus, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform .pyrus-form-input:focus-visible { border-color: var(--pyrus-dorado) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; outline: none !important; } .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform .pyrus-form-label { color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__microcopy { color: rgba(247, 244, 238, 0.32) !important; } .pyrus-wp-page--xahala .pyrus-conversion .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-conversion__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--xahala .pyrus-conversion__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } /* 38-I — Formulario submit: layout de ancho completo. Mismo patrón que BLOQUEs 34-J y 37-I; IDs de Xahala. */ #pyrus-form-xh-custom .pyrus-cform__campo--submit, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__campo--submit { display: block !important; width: 100% !important; box-sizing: border-box !important; } #pyrus-form-xh-custom .pyrus-cform__submit, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; } #pyrus-form-xh-custom .pyrus-cform__submit:hover, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } #pyrus-form-xh-custom .pyrus-cform__submit:focus, #pyrus-form-xh-custom .pyrus-cform__submit:focus-visible, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__submit:focus, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } #pyrus-form-xh-custom .pyrus-cform__submit:active, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* 38-J — CTA final: separación tonal del footer. Mismo patrón que BLOQUEs 35-D y 37-J. */ .pyrus-wp-page--xahala .pyrus-cierre-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; /* #16313D vs footer #101216 */ } /* 38-K — Hero CTAs: preservar sistema dorado en hover/focus/active. Mismo patrón que BLOQUEs 36-B y 37-K. */ .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-btn--secondary:hover { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-btn--secondary:focus { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-btn--secondary:focus-visible { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--xahala .pyrus-desarrollo-hero .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.14) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } /* 38-L — Mobile: protecciones específicas para Xahala en móvil. Mismo patrón que BLOQUEs 34-K y 37-L. */ @media (max-width: 640px) { .pyrus-wp-page--xahala .pyrus-faq__pregunta { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; overflow: visible; } .pyrus-wp-page--xahala .pyrus-faq, .pyrus-wp-page--xahala .pyrus-faq__item { overflow: visible !important; } #pyrus-form-xh-custom .pyrus-cform__submit, .pyrus-wp-page--xahala .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } } /* 38-M — Xahala: microajustes FAQ, CTA final y galería mobile. Complementa BLOQUE 38 con correcciones detectadas en validación contra Live Server. No reescribe nada de 38-A a 38-L. M1. FAQ pregunta: layout flex → icono +/− siempre anclado a la derecha. M2. CTA final .pyrus-btn--secondary: sin morado en todos los estados. M3. Galería "Ver galería completa →": tipografía más fina en mobile. ========================================================================== */ /* M1 — FAQ: alineación flex con icono anclado a la derecha ── */ .pyrus-wp-page--xahala .pyrus-faq__pregunta { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; gap: 12px !important; } @media (max-width: 640px) { .pyrus-wp-page--xahala .pyrus-faq__pregunta { gap: 8px !important; } } /* M2 — CTA final: .pyrus-btn--secondary sin morado en ningún estado ── */ .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary, .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary:link, .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary:visited { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; text-decoration: none !important; box-shadow: none !important; } .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary:hover { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: rgba(216, 192, 122, 0.10) !important; text-decoration: none !important; box-shadow: none !important; } .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus-visible { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--xahala .pyrus-cierre-desarrollo .pyrus-btn--secondary:active { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: rgba(216, 192, 122, 0.16) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* M3 — Galería mobile: tipografía más fina del enlace "Ver galería completa →" ── */ @media (max-width: 640px) { .pyrus-wp-page--xahala .pyrus-galeria__ver-mas, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas { font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.04em !important; line-height: 1.5 !important; color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:hover { color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--xahala .pyrus-galeria__ver-mas:active, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas:active { color: rgba(247, 244, 238, 0.55) !important; } } /* 38-N — Xahala: presencia FAQ y espaciado galería mobile. Complementa 38-G (colores FAQ) y 38-M (layout flex FAQ, galería mobile). No reescribe nada de 38-A a 38-M. ========================================================================== */ /* N1 — FAQ: más presencia visual ── */ .pyrus-wp-page--xahala .pyrus-faq, .pyrus-wp-page--xahala .pyrus-faq__lista { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .pyrus-wp-page--xahala .pyrus-faq__pregunta { padding-block: 20px !important; padding-inline: 0 !important; font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.4 !important; } .pyrus-wp-page--xahala .pyrus-faq__respuesta-inner { padding-bottom: 20px !important; } @media (max-width: 640px) { .pyrus-wp-page--xahala .pyrus-faq__pregunta { font-size: clamp(15px, 4vw, 17px) !important; padding-block: 16px !important; } } /* N2 — Galería mobile: más aire sobre "Ver galería completa →" ── */ @media (max-width: 640px) { .pyrus-wp-page--xahala .pyrus-galeria__ver-mas, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas { display: block !important; margin-top: 20px !important; padding-top: 4px !important; padding-bottom: 4px !important; } } /* 38-O — Xahala: alineación fina de respuestas FAQ. Complementa 38-G (colores/estados), 38-M (layout flex), 38-N (presencia). No reescribe nada de 38-A a 38-N. ========================================================================== */ /* O1 — Respuesta: eliminar sangría lateral ── */ .pyrus-wp-page--xahala .pyrus-faq__respuesta { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .pyrus-wp-page--xahala .pyrus-faq__respuesta-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* Reset para párrafos que el navegador/Elementor pueda insertar automáticamente. El texto de Xahala es nodo directo del div sin

; esta regla es preventiva. */ .pyrus-wp-page--xahala .pyrus-faq__respuesta-inner p { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } .pyrus-wp-page--xahala .pyrus-faq__item { padding-left: 0 !important; margin-left: 0 !important; } /* O2 — Color de texto FAQ: más sólido, menos azulado ── */ .pyrus-wp-page--xahala .pyrus-faq__pregunta > span { color: #1C1C1C !important; } .pyrus-wp-page--xahala .pyrus-faq__respuesta-inner { color: #3E4A4D !important; } /* 38-P — Xahala: sección Respaldo (única de Xahala). Fondo marfil (pyrus-bg-marfil = #F7F4EE). Elementor puede sobreescribir: font-family en (usa Lora), color del texto y del título. El dot usa background-color dorado. ========================================================================== */ /* Dot: protección de color dorado */ .pyrus-wp-page--xahala .pyrus-respaldo__dot { background-color: var(--pyrus-dorado) !important; } /* Título strong: Lora + color negro-carbón */ .pyrus-wp-page--xahala .pyrus-respaldo__texto strong { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; } /* Cuerpo de texto: Inter light + color gris azulado */ .pyrus-wp-page--xahala .pyrus-respaldo__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: var(--pyrus-azul-grisaceo) !important; } /* ───────────────────────────────────────────────────────────────────────────── 38-Q — Xahala: hover dorado FAQ ───────────────────────────────────────────────────────────────────────────── CAUSA: 38-O O2 declara `color:#1C1C1C !important` directamente en el hijo, bloqueando la herencia del color dorado que 38-G aplica al botón padre en :hover. La pseudo-clase :hover > span tiene especificidad 0,3,1 vs 0,2,1 de la regla base — gana en cascada aunque esté después. ────────────────────────────────────────────────────────────────────────────── */ .pyrus-wp-page--xahala .pyrus-faq__pregunta:hover > span { color: var(--pyrus-dorado-profundo) !important; } /* 38-R — Xahala: microalineaciones finales galería y FAQ mobile Versión: v1.22.1 R1. Galería mobile: "Ver galería completa →" queda un poco pegado a la imagen superior. Se aumenta margin-top de 20px (38-N2) a 32px y se añade más padding inferior para mayor respiración sin tocar tamaño ni encuadre. R2. FAQ — scroll-margin-top: pyrus-desarrollo.css no se carga en WP, por lo que el offset de anclaje para el header sticky (72px) no estaba activo. Se aplica aquí para todos los viewports. 88px = --pyrus-header-h (72px) + 16px de buffer visual. R3. FAQ mobile — respiración visual: se añade margin-top al bloque interno .pyrus-section-header dentro de #faq para separar el divisor/label/título del header sticky al scrollear, sin tocar el padding de la sección. Confirmación de no-daño: - R1 solo bajo @media (max-width: 640px) — desktop intacto - R2 es solo propiedad de scroll, sin layout ni color — ninguna sección afectada - R3 solo bajo @media (max-width: 640px) — desktop intacto ========================================================================== */ /* R1 — Galería mobile: más respiración sobre "Ver galería completa →" ── */ @media (max-width: 640px) { .pyrus-wp-page--xahala .pyrus-galeria__ver-mas, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas { margin-top: 32px !important; /* +12px vs 38-N2 (era 20px) */ padding-bottom: 8px !important; /* +4px vs 38-N2 (era 4px) */ } } /* R2 + R3 — FAQ: scroll-margin-top y respiración visual en mobile ── */ /* R2 — Todos los viewports: corrige anclaje con header sticky. En WP, pyrus-desarrollo.css no está enqueued, por lo que la regla scroll-margin-top de ese archivo no se aplicaba. */ .pyrus-wp-page--xahala #faq { scroll-margin-top: 88px !important; } /* R3 — Mobile: margin-top interno en el bloque de encabezado de FAQ. Añade aire visual entre el header sticky y el divider/label/h2 sin modificar el padding-top de la sección ni ningún otro elemento. */ @media (max-width: 640px) { .pyrus-wp-page--xahala #faq .pyrus-section-header { margin-top: 12px !important; } } /* 38-S — Xahala: separación desktop enlace galería Versión: v1.22.2 Causa raíz: pyrus-desarrollo.css no está enqueued en WP. Su regla base: .pyrus-galeria__ver-mas { display:flex; padding-top: var(--pyrus-sp-6); } aporta 32px de separación entre las imágenes y el enlace en Live Server. En WP esa separación no existía — el enlace quedaba pegado a la galería. Se replica en desktop/tablet (≥641px) replicando exactamente el Live Server. Mobile (≤640px) permanece intacto: display:block y margin-top:32px de 38-R1. ========================================================================== */ @media (min-width: 641px) { .pyrus-wp-page--xahala .pyrus-galeria__ver-mas, .pyrus-wp-page--xahala button.pyrus-galeria__ver-mas { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding-top: 32px !important; /* = var(--pyrus-sp-6) — Live Server */ } } /* ========================================================================== BLOQUE 39 — Hero desarrollos: legibilidad de párrafo descriptivo Versión: v1.23.0 CONTEXTO: BLOQUEs 34-D / 37-D / 38-D definen .pyrus-desarrollo-hero__tagline con color rgba(247,244,238,0.58). pyrus-desarrollo.css (fuente del prototipo) usa rgba(247,244,238,0.80). La diferencia de 22 puntos de opacidad hace que el párrafo descriptivo del hero se perciba más tenue/gris en WordPress que en Live Server. CORRECCIÓN: eleva la opacidad a 0.82 — igual que Live Server (0.80) más +0.02 de compensación por diferencia de rendering en Windows vs macOS. ALCANCE: global para todas las páginas con .pyrus-wp-page — cubre las 3 páginas cerradas y sirve como baseline para Providencia, El Huerto y San Vicente 330. Por venir después de BLOQUEs 34/37/38 con igual especificidad (0,2,0) y mismo !important, esta regla gana en cascada. NO afecta: H1 · botones · breadcrumbs · overlay · imágenes · stats del hero · FAQ · formularios · secciones interiores · páginas no-desarrollo. ========================================================================== */ .pyrus-wp-page .pyrus-desarrollo-hero__tagline { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.82) !important; } /* ========================================================================== BLOQUE 40 — Skip link global accesible Versión: v1.23.1 CONTEXTO: pyrus-global.css oculta .pyrus-skip-link con position:absolute + top:-200%. En Elementor, el containing block de position:absolute puede ser un wrapper de altura variable — top:-200% a veces es insuficiente, haciendo el enlace visible al cambiar viewport, calcular foco o redimensionar. CORRECCIÓN: · position:fixed — siempre relativo al viewport, sin depender del containing block de Elementor ni de las alturas del árbol DOM. · transform:translateY(-200%) para ocultar — no anima top, más predecible en entornos con transforms de Elementor en secciones/columnas. · :focus / :focus-visible — transform:translateY(0), trae el enlace al viewport. · Estilo Pyrus: fondo negro-carbón (#101216), texto dorado, outline dorado sutil. · Reemplaza transition:top de pyrus-global.css con transition:transform. ALCANCE: selector único .pyrus-skip-link — sin impacto en otros elementos, enlaces, botones, header ni menú. Cubre Aldea Hortus, Balam Resort, Xahala y todas las páginas futuras del sitio. ========================================================================== */ .pyrus-skip-link { position: fixed !important; top: 0 !important; left: 0 !important; transform: translateY(-200%) !important; z-index: 999999 !important; background: #101216 !important; color: var(--pyrus-dorado) !important; font-family: var(--pyrus-font-body) !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; padding: 10px 16px !important; outline: 2px solid rgba(216, 192, 122, 0.75) !important; outline-offset: 2px !important; text-decoration: none !important; transition: transform 0.15s ease !important; white-space: nowrap !important; border-radius: 0 0 3px 0 !important; } .pyrus-skip-link:focus, .pyrus-skip-link:focus-visible { transform: translateY(0) !important; } /* ========================================================================== BLOQUE 41 — Providencia: compatibilidad visual WordPress/Elementor Versión: v1.24.0 Página: /desarrollos/providencia/ Ancla: .pyrus-wp-page--providencia HubSpot: Portal 51343142 · Form GUID 13390f71-d9cb-4206-acb9-0d6417ed0bc3 Función: initPVForm() · IDs: pv-* Problemas que resuelve: 41-A Font-smoothing base 41-B Imágenes + en hero Y descripción (igual que Xahala) 41-C Galería ver-más: sin magenta, todos los estados 41-D Hero: tipografía — H1 .pyrus-desarrollo-hero__nombre, eyebrow .pyrus-label--light 41-E Secciones oscuras: resumen, numeralia, beneficios, potencial, cierre 41-F Headings globales + color negro-carbón en secciones claras 41-G FAQ acordeón: sin magenta, hover dorado, flex layout 41-H Formulario dark (.pyrus-conversion) — corrección BLOQUE 27-F side-effect 41-I Formulario submit (#pyrus-form-pv-custom) 41-J CTA final azul-petróleo (diferenciado del footer) 41-K Hero CTAs secondary: preservar sistema dorado 41-L Mobile protections 41-M+ Microajustes incluidos desde v1 (FAQ flex/sangría/hover-span, galería, scroll-margin-top) Diferencias vs Xahala (BLOQUE 38): - NO tiene .pyrus-respaldo → no hay equivalente de 38-P - Tiene #amenidades section con h2/h3 sobre fondo marfil - Tiene #planeacion con .pyrus-proceso__pasos (h2/h3 sobre fondo marfil) - Form ID propio: #pyrus-form-pv-custom Reglas ya cubiertas globalmente (no se duplican): - .pyrus-desarrollo-hero__tagline global → BLOQUE 39 - .pyrus-skip-link global → BLOQUE 40 - Modal .pyrus-galeria-modal__* → BLOQUEs 34–36 ========================================================================== */ /* ── 41-A Font-smoothing ── */ .pyrus-wp-page--providencia { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 41-B Imágenes: neutralizar height:auto de Elementor. en hero Y en descripción (igual que Xahala 38-B). ── */ .pyrus-wp-page--providencia .pyrus-desarrollo-hero__img, .pyrus-wp-page--providencia .pyrus-galeria__img, .pyrus-wp-page--providencia .pyrus-descripcion__img, .pyrus-wp-page--providencia .pyrus-tipologia-card__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero__picture, .pyrus-wp-page--providencia .pyrus-descripcion__picture { display: block !important; width: 100% !important; height: 100% !important; } /* ── 41-C Galería ver-más: todos los estados sin magenta/morado. ── */ .pyrus-wp-page--providencia .pyrus-galeria__ver-mas, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas { background: none !important; border: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.50) !important; font-family: var(--pyrus-font-body) !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-decoration: none !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:hover { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.85) !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:focus, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:focus { background: none !important; box-shadow: none !important; outline: none !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:focus-visible, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:focus-visible { background: none !important; box-shadow: none !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 4px !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:active, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:active { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.65) !important; } /* Focus residual post-cierre de modal (mismo patrón 35-B / 37-C / 38-C) */ .pyrus-wp-page--providencia .pyrus-galeria__link:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:focus:not(:focus-visible), .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* ── 41-D Hero Providencia: tipografía sobre fondo oscuro. H1 = .pyrus-desarrollo-hero__nombre (igual que Xahala). Eyebrow = .pyrus-label--light. Tagline cubierta por BLOQUE 39. ── */ .pyrus-wp-page--providencia .pyrus-desarrollo-hero__nombre { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-label--light { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-wp-page--providencia .pyrus-desarrollo-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } /* ── 41-E Secciones oscuras: resumen, numeralia, beneficios, potencial, cierre. ── */ /* Resumen rápido */ .pyrus-wp-page--providencia .pyrus-resumen__etiqueta { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.35) !important; } .pyrus-wp-page--providencia .pyrus-resumen__valor { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-resumen__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Numeralia (fondo negro-suave — igual que Xahala 38-E) */ .pyrus-wp-page--providencia .pyrus-numeralia__numero { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-numeralia__label { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--providencia .pyrus-numeralia__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.22) !important; } /* Beneficios diferenciales (fondo azul-petróleo) */ .pyrus-wp-page--providencia .pyrus-beneficios-desarrollo .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-beneficio-card__num { font-family: var(--pyrus-font-heading) !important; font-weight: 300 !important; color: rgba(216, 192, 122, 0.28) !important; } .pyrus-wp-page--providencia .pyrus-beneficio-card__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-beneficio-card__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* Potencial patrimonial (fondo negro-suave) */ .pyrus-wp-page--providencia .pyrus-potencial__statement { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-potencial__statement em { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--providencia .pyrus-potencial__punto-texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--providencia .pyrus-potencial__nota { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Cierre final */ .pyrus-wp-page--providencia .pyrus-cierre-desarrollo__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.30 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-cierre-desarrollo__sub { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.55) !important; } /* ── 41-F Headings globales: forzar Lora + peso 400 en todos. Secciones claras: color negro-carbón. Usa selectores por ID donde la sección no tiene clase-bloque BEM (amenidades, cotos, planeacion, faq). Incluye h3 de cotos, amenidades y planeacion (fondo marfil). ── */ .pyrus-wp-page--providencia h1, .pyrus-wp-page--providencia h2, .pyrus-wp-page--providencia h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* H2 en secciones claras → negro-carbón */ .pyrus-wp-page--providencia .pyrus-descripcion h2, .pyrus-wp-page--providencia #descripcion h2, .pyrus-wp-page--providencia .pyrus-ubicacion h2, .pyrus-wp-page--providencia #ubicacion h2, .pyrus-wp-page--providencia #amenidades h2, .pyrus-wp-page--providencia #cotos h2, .pyrus-wp-page--providencia #planeacion h2, .pyrus-wp-page--providencia .pyrus-relacionados h2, .pyrus-wp-page--providencia .pyrus-faq h2, .pyrus-wp-page--providencia #faq h2 { color: var(--pyrus-negro-carbon) !important; } /* H3 en secciones claras → negro-carbón */ .pyrus-wp-page--providencia #amenidades h3, .pyrus-wp-page--providencia #cotos h3, .pyrus-wp-page--providencia #planeacion h3, .pyrus-wp-page--providencia .pyrus-relacionados h3 { color: var(--pyrus-negro-carbon) !important; } /* Labels en secciones claras */ .pyrus-wp-page--providencia .pyrus-descripcion .pyrus-label, .pyrus-wp-page--providencia #ubicacion .pyrus-label, .pyrus-wp-page--providencia #amenidades .pyrus-label, .pyrus-wp-page--providencia #cotos .pyrus-label, .pyrus-wp-page--providencia #planeacion .pyrus-label, .pyrus-wp-page--providencia #faq .pyrus-label { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; letter-spacing: 0.10em !important; color: var(--pyrus-azul-grisaceo) !important; } /* ── 41-G FAQ acordeón: sin magenta, hover dorado, flex layout. ── */ .pyrus-wp-page--providencia .pyrus-faq__pregunta { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--providencia .pyrus-faq__pregunta:hover { color: var(--pyrus-dorado-profundo) !important; } .pyrus-wp-page--providencia .pyrus-faq__pregunta:focus, .pyrus-wp-page--providencia .pyrus-faq__pregunta:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--providencia .pyrus-faq__pregunta:active, .pyrus-wp-page--providencia .pyrus-faq__pregunta[aria-expanded="true"] { background: transparent !important; box-shadow: none !important; outline: none !important; color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--providencia .pyrus-faq__item { background: transparent !important; border-radius: 0 !important; } .pyrus-wp-page--providencia .pyrus-faq__pregunta > span { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-negro-carbon) !important; flex: 1 !important; min-width: 0 !important; white-space: normal !important; word-break: break-word !important; } .pyrus-wp-page--providencia .pyrus-faq__icono { flex-shrink: 0 !important; color: var(--pyrus-dorado) !important; } .pyrus-wp-page--providencia .pyrus-faq__respuesta-inner { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: #4a5060 !important; line-height: 1.75 !important; } /* ── 41-H Formulario dark: restaurar estilos en .pyrus-conversion. BLOQUE 27-F fuerza background:#fff en .pyrus-cform .pyrus-form-input. Corregir con triple scope. ── */ .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; box-shadow: none !important; } .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.30) !important; opacity: 1 !important; } .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform .pyrus-form-input:focus, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform .pyrus-form-input:focus-visible { border-color: var(--pyrus-dorado) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; outline: none !important; } .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform .pyrus-form-label { color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__microcopy { color: rgba(247, 244, 238, 0.32) !important; } .pyrus-wp-page--providencia .pyrus-conversion .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-conversion__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--providencia .pyrus-conversion__texto, .pyrus-wp-page--providencia .pyrus-conversion__form-nota { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* ── 41-I Formulario submit: layout de ancho completo. IDs propios de Providencia: #pyrus-form-pv-custom. ── */ #pyrus-form-pv-custom .pyrus-cform__campo--submit, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__campo--submit { display: block !important; width: 100% !important; box-sizing: border-box !important; } #pyrus-form-pv-custom .pyrus-cform__submit, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; } #pyrus-form-pv-custom .pyrus-cform__submit:hover, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } #pyrus-form-pv-custom .pyrus-cform__submit:focus, #pyrus-form-pv-custom .pyrus-cform__submit:focus-visible, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__submit:focus, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } #pyrus-form-pv-custom .pyrus-cform__submit:active, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* ── 41-J CTA final: tono azul-petróleo diferenciado del footer. ── */ .pyrus-wp-page--providencia .pyrus-cierre-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; /* #16313D vs footer #101216 */ } /* ── 41-K Hero CTAs secondary: preservar sistema dorado en todos los estados. ── */ .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-btn--secondary:hover { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-btn--secondary:focus { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-btn--secondary:focus-visible { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--providencia .pyrus-desarrollo-hero .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.14) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } /* ── 41-L Mobile: protecciones específicas Providencia. ── */ @media (max-width: 640px) { .pyrus-wp-page--providencia .pyrus-faq__pregunta { width: 100%; max-width: 100%; box-sizing: border-box; white-space: normal; text-align: left; overflow: visible; } .pyrus-wp-page--providencia .pyrus-faq, .pyrus-wp-page--providencia .pyrus-faq__item { overflow: visible !important; } #pyrus-form-pv-custom .pyrus-cform__submit, .pyrus-wp-page--providencia .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } } /* ── MICROAJUSTES INCLUIDOS DESDE v1 (evitar rondas de validación adicionales) ── */ /* M1 — FAQ: flex con icono anclado a la derecha. */ .pyrus-wp-page--providencia .pyrus-faq__pregunta { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; gap: 12px !important; } @media (max-width: 640px) { .pyrus-wp-page--providencia .pyrus-faq__pregunta { gap: 8px !important; } } /* M2 — CTA final: .pyrus-btn--secondary sin morado en todos los estados. */ .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary, .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary:link, .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary:visited { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; text-decoration: none !important; box-shadow: none !important; } .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary:hover { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: rgba(216, 192, 122, 0.10) !important; text-decoration: none !important; box-shadow: none !important; } .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus-visible { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--providencia .pyrus-cierre-desarrollo .pyrus-btn--secondary:active { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: rgba(216, 192, 122, 0.16) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* M3 — Galería mobile: tipografía más fina. */ @media (max-width: 640px) { .pyrus-wp-page--providencia .pyrus-galeria__ver-mas, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas { font-size: 13px !important; font-weight: 300 !important; letter-spacing: 0.04em !important; line-height: 1.5 !important; color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:hover { color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--providencia .pyrus-galeria__ver-mas:active, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas:active { color: rgba(247, 244, 238, 0.55) !important; } } /* N1 — FAQ: más presencia y anchura completa. */ .pyrus-wp-page--providencia .pyrus-faq, .pyrus-wp-page--providencia .pyrus-faq__lista { width: 100% !important; max-width: none !important; box-sizing: border-box !important; } .pyrus-wp-page--providencia .pyrus-faq__pregunta { padding-block: 20px !important; padding-inline: 0 !important; font-size: clamp(16px, 1.5vw, 19px) !important; line-height: 1.4 !important; } .pyrus-wp-page--providencia .pyrus-faq__respuesta-inner { padding-bottom: 20px !important; } @media (max-width: 640px) { .pyrus-wp-page--providencia .pyrus-faq__pregunta { font-size: clamp(15px, 4vw, 17px) !important; padding-block: 16px !important; } } /* N2 — Galería mobile: más aire sobre "Ver galería completa →". */ @media (max-width: 640px) { .pyrus-wp-page--providencia .pyrus-galeria__ver-mas, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas { display: block !important; margin-top: 32px !important; padding-top: 4px !important; padding-bottom: 4px !important; } } /* O1 — FAQ: eliminar sangría lateral de respuestas. */ .pyrus-wp-page--providencia .pyrus-faq__respuesta { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .pyrus-wp-page--providencia .pyrus-faq__respuesta-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } .pyrus-wp-page--providencia .pyrus-faq__respuesta-inner p { padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } .pyrus-wp-page--providencia .pyrus-faq__item { padding-left: 0 !important; margin-left: 0 !important; } /* O2 — FAQ: color de texto más sólido. */ .pyrus-wp-page--providencia .pyrus-faq__pregunta > span { color: #1C1C1C !important; } .pyrus-wp-page--providencia .pyrus-faq__respuesta-inner { color: #3E4A4D !important; } /* P — FAQ hover dorado: fix para span con color !important propio. */ .pyrus-wp-page--providencia .pyrus-faq__pregunta:hover > span { color: var(--pyrus-dorado-profundo) !important; } /* R1 — Galería desktop: separación entre grid y "Ver galería completa →". pyrus-desarrollo.css no cargado en WP — se replica padding-top:32px. */ @media (min-width: 641px) { .pyrus-wp-page--providencia .pyrus-galeria__ver-mas, .pyrus-wp-page--providencia button.pyrus-galeria__ver-mas { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding-top: 32px !important; } } /* R2 — Scroll-margin-top en secciones con ancla (header sticky). pyrus-desarrollo.css no cargado en WP — se replica aquí. */ .pyrus-wp-page--providencia #faq, .pyrus-wp-page--providencia #galeria, .pyrus-wp-page--providencia #ubicacion, .pyrus-wp-page--providencia #cotos, .pyrus-wp-page--providencia #planeacion { scroll-margin-top: 88px !important; } /* R3 — FAQ mobile: aire entre header sticky y título de sección. */ @media (max-width: 640px) { .pyrus-wp-page--providencia #faq .pyrus-section-header { margin-top: 12px !important; } } /* ── fin BLOQUE 41 ── */ /* ========================================================================== BLOQUE 42 — FAQ global: presencia visual WordPress vs Live Server Versión: v1.24.1 Alcance: .pyrus-wp-page (todas las páginas de desarrollo migradas a WP). Archivo: src/css/pyrus-wp-elementor.css — solo CSS, sin HTML/JS/PHP. Problema: el FAQ en WordPress se percibe ligeramente más pequeño y tímido que en Live Server en todas las páginas migradas. El ajuste es visible pero no dramático: las preguntas se ven un tick más grandes, con más aire por fila, sin cambiar la estructura ni la funcionalidad del acordeón. Qué supercede (por orden de cascada — BLOQUE 42 es el último): - BLOQUE 34: Aldea Hortus — solo tenía protección base. Sin flex, sin font-size, sin hover dorado. BLOQUE 42 añade todo eso por primera vez. - BLOQUE 37 sub-bloques M1/N1/O1–O2/P: Balam Resort — ya tenía todos estos ajustes. BLOQUE 42 los refuerza con valores ligeramente mayores. - BLOQUE 38 sub-bloques M1/N1/O1–O2/P/Q: Xahala — ídem Balam. - BLOQUE 41 sub-bloques M1/N1/O1–O2/P/R: Providencia — ídem Balam. Reglas de seguridad: - NO se tocan: background/border en :focus ni :focus-visible (per-page). - NO se tocan: :active / [aria-expanded] (per-page). - NO se tocan: formulario, galería, CTA final, header/footer. - NO se incluye color base en el botón (solo en > span y en :hover). - background:transparent en base es protección para páginas futuras. ========================================================================== */ /* A — Contenedor FAQ: ancho completo, sin restricción de Elementor. */ .pyrus-wp-page .pyrus-faq, .pyrus-wp-page .pyrus-faq__lista { width: 100% !important; max-width: none !important; box-sizing: border-box !important; overflow: visible !important; } /* B — FAQ item: visible para que el panel animado no se corte. */ .pyrus-wp-page .pyrus-faq__item { overflow: visible !important; background: transparent !important; border-radius: 0 !important; padding-left: 0 !important; margin-left: 0 !important; } /* C — Pregunta: layout flex, tamaño y respiración ligeramente aumentados. background/border se declaran como protección para páginas futuras. */ .pyrus-wp-page .pyrus-faq__pregunta { display: flex !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important; gap: 12px !important; padding-block: 22px !important; padding-inline: 0 !important; font-size: clamp(17px, 1.6vw, 21px) !important; line-height: 1.4 !important; white-space: normal !important; overflow: visible !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* D — Span de la pregunta: Lora, negro sólido, flex puro. */ .pyrus-wp-page .pyrus-faq__pregunta > span { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; flex: 1 !important; min-width: 0 !important; white-space: normal !important; word-break: break-word !important; color: #1C1C1C !important; } /* E — Hover en el botón: dorado profundo. Unifica el hover de todas las páginas — Aldea Hortus no tenía hover dorado (su regla combinaba base + hover en negro-carbon). */ .pyrus-wp-page .pyrus-faq__pregunta:hover { background: transparent !important; box-shadow: none !important; color: var(--pyrus-dorado-profundo) !important; } /* F — Hover en el span: dorado profundo. El span tiene color:#1C1C1C desde 42-D. Esta regla lo sobreescribe en hover con especificidad mayor (pseudo-clase extra: 0,3,1 > 0,2,1). */ .pyrus-wp-page .pyrus-faq__pregunta:hover > span { color: var(--pyrus-dorado-profundo) !important; } /* G — Icono: dorado consistente, sin encogerse. */ .pyrus-wp-page .pyrus-faq__icono { flex-shrink: 0 !important; color: var(--pyrus-dorado) !important; } /* H — Respuesta wrapper: sin sangría lateral. */ .pyrus-wp-page .pyrus-faq__respuesta { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } /* I — Respuesta inner: font-size explícito (pyrus-desarrollo.css no carga en WP), color editorial cálido, sin sangría, respiración inferior. */ .pyrus-wp-page .pyrus-faq__respuesta-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-bottom: 20px !important; font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; font-size: 16px !important; line-height: 1.75 !important; color: #3E4A4D !important; } /* J — Párrafo dentro de la respuesta: heredar tamaño y color del contenedor, sin text-indent de navegador. */ .pyrus-wp-page .pyrus-faq__respuesta-inner p { font-size: inherit !important; color: inherit !important; line-height: inherit !important; padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } /* Mobile: preguntas ligeramente más compactas pero con presencia. */ @media (max-width: 640px) { .pyrus-wp-page .pyrus-faq__pregunta { font-size: clamp(16px, 4.2vw, 18px) !important; padding-block: 18px !important; gap: 8px !important; } } /* ========================================================================== BLOQUE 43 — El Huerto Residencial: compatibilidad visual WordPress/Elementor Versión: v1.25.0 Página: /desarrollos/el-huerto-residencial/ Ancla: .pyrus-wp-page--el-huerto-residencial HubSpot: Portal 51343142 · Form GUID 14e6a1e8-476f-4f9e-a356-0e3380d04c2a Función: initEHForm() · IDs: eh-* Problemas que resuelve: 43-A Font-smoothing base 43-B Imágenes + en hero Y descripción (igual que Providencia 41-B) Sin .pyrus-tipologia-card__img — El Huerto no tiene sección #cotos 43-C Galería ver-más: sin magenta, todos los estados; padding-top:32px desktop (pyrus-desarrollo.css no carga en WP — se replica la regla) 43-D Galería: link hover sin magenta · label "VER IMAGEN" contenido como overlay Causa: sin pyrus-desarrollo.css el span fluye en documento (texto suelto) 43-E Formulario dark (.pyrus-conversion) — corrección BLOQUE 27-F side-effect 43-F Submit El Huerto (#pyrus-form-eh-custom) 43-G CTA final azul-petróleo · botón secondary sin magenta (todos los estados) 43-H Hero: tipografía — H1 .pyrus-desarrollo-hero__nombre, eyebrow, breadcrumb 43-I Secciones oscuras: resumen, numeralia, beneficios, potencial, cierre 43-J Headings globales + secciones claras Selectores id directos donde no hay clase BEM en

: #amenidades · #mi-huerto · #potencial · #faq 43-K Hero CTAs secondary: preservar sistema dorado 43-L FAQ: scroll-margin-top secciones + respiración mobile header BLOQUE 42 ya resuelve font-size / padding-block / hover-dorado 43-M Mobile: galería ver-más, submit ancho completo Secciones únicas de El Huerto vs Providencia (BLOQUE 41): - #mi-huerto: .pyrus-proceso__pasos · fondo blanco (análogo a #planeacion en PV) - #amenidades: .pyrus-amenidades__grid · fondo marfil - #potencial: .pyrus-potencial · fondo oscuro (negro-suave) - Sin #cotos → sin selectores de tipologías/cotos Reglas ya cubiertas globalmente (no se duplican): - .pyrus-desarrollo-hero__tagline → BLOQUE 39 - .pyrus-skip-link → BLOQUE 40 - FAQ font-size / padding-block / hover-dorado / flex layout → BLOQUE 42 - Modal .pyrus-galeria-modal__* → BLOQUEs 34–36 Cascada: BLOQUE 43 agrega reglas scoped (.pyrus-wp-page--el-huerto-residencial). No degradación de BLOQUE 42: no se declara .pyrus-faq__pregunta con valores inferiores. Scroll-margin y margin-top son adiciones, no sobreescrituras. ========================================================================== */ /* ── 43-A Font-smoothing ── */ .pyrus-wp-page--el-huerto-residencial { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 43-B Imágenes: neutralizar height:auto de Elementor. en hero Y en descripción (igual que Xahala 38-B, Providencia 41-B). Sin .pyrus-tipologia-card__img: El Huerto no tiene sección #cotos. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero__img, .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__img, .pyrus-wp-page--el-huerto-residencial .pyrus-descripcion__img { height: 100% !important; max-width: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero__picture, .pyrus-wp-page--el-huerto-residencial .pyrus-descripcion__picture { display: block !important; width: 100% !important; height: 100% !important; } /* ── 43-C Galería ver-más: todos los estados sin magenta/morado. pyrus-desarrollo.css no carga en WP — se replica padding-top:32px y flex. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding-top: 32px !important; background: none !important; border: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.50) !important; font-family: var(--pyrus-font-body) !important; font-weight: 400 !important; letter-spacing: 0.06em !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas:hover { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.85) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas:focus, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas:focus { background: none !important; box-shadow: none !important; outline: none !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas:focus-visible, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas:focus-visible { background: none !important; box-shadow: none !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 4px !important; color: rgba(247, 244, 238, 0.50) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas:active, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas:active { background: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.65) !important; } /* Focus residual post-cierre de modal (mismo patrón 35-B / 37-C / 38-C / 41-C) */ .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas:focus:not(:focus-visible), .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* ── 43-D Galería: link hover sin magenta · label "VER IMAGEN" contenido. Sin pyrus-desarrollo.css, .pyrus-galeria__label fluye en el documento como texto estático (aparece suelto abajo/izquierda fuera de la imagen). Fix: replicar posicionamiento relativo/absoluto scoped a El Huerto. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link { position: relative !important; display: block !important; overflow: hidden !important; color: transparent !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:link, .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:visited { color: transparent !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:hover, .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:focus, .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:active { color: transparent !important; text-decoration: none !important; outline: none !important; box-shadow: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:focus-visible { outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; } /* Label: overlay absoluto dentro del link, visible solo en hover. */ .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__label { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; padding: 8px 12px !important; background: rgba(16, 18, 22, 0.55) !important; color: rgba(247, 244, 238, 0.85) !important; font-family: var(--pyrus-font-body) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; text-align: center !important; opacity: 0 !important; transition: opacity 0.25s ease !important; pointer-events: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__link:hover .pyrus-galeria__label { opacity: 1 !important; } /* ── 43-E Formulario dark: restaurar estilos en .pyrus-conversion. BLOQUE 27-F fuerza background:#fff en .pyrus-cform .pyrus-form-input. Corregir con triple scope. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; box-shadow: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.30) !important; opacity: 1 !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform .pyrus-form-input:focus, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform .pyrus-form-input:focus-visible { border-color: var(--pyrus-dorado) !important; background: rgba(255, 255, 255, 0.08) !important; box-shadow: none !important; outline: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform .pyrus-form-label { color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__microcopy { color: rgba(247, 244, 238, 0.32) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-h2, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-conversion__texto, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion__form-nota { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* ── 43-F Submit El Huerto: layout ancho completo. IDs propios: #pyrus-form-eh-custom. ── */ #pyrus-form-eh-custom .pyrus-cform__campo--submit, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__campo--submit { display: block !important; width: 100% !important; box-sizing: border-box !important; } #pyrus-form-eh-custom .pyrus-cform__submit, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-size: 15px !important; font-weight: 600 !important; cursor: pointer !important; } #pyrus-form-eh-custom .pyrus-cform__submit:hover, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__submit:hover { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; } #pyrus-form-eh-custom .pyrus-cform__submit:focus, #pyrus-form-eh-custom .pyrus-cform__submit:focus-visible, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__submit:focus, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__submit:focus-visible { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } #pyrus-form-eh-custom .pyrus-cform__submit:active, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__submit:active { background-color: var(--pyrus-dorado-profundo) !important; border-color: var(--pyrus-dorado-profundo) !important; color: var(--pyrus-negro-carbon) !important; box-shadow: none !important; outline: none !important; } /* ── 43-G CTA final: tono azul-petróleo diferenciado del footer. Botón secondary: todos los estados sin magenta/morado. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; /* #16313D vs footer #101216 */ } .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary, .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary:link, .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary:visited { color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; background-color: transparent !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary:hover { background-color: rgba(216, 192, 122, 0.10) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus { background-color: rgba(216, 192, 122, 0.10) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus-visible { background-color: rgba(216, 192, 122, 0.10) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.15) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } /* ── 43-H Hero El Huerto: tipografía sobre fondo oscuro. H1 = .pyrus-desarrollo-hero__nombre (igual que Xahala, Providencia). Eyebrow = .pyrus-label--light. Tagline cubierta por BLOQUE 39. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero__nombre { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.1 !important; letter-spacing: 0.01em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero__eyebrow-line { background-color: var(--pyrus-dorado) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-label--light { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.70) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a { color: rgba(247, 244, 238, 0.55) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-nav a:hover { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-desarrollo-hero__breadcrumb-sep, .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero [aria-current="page"] { color: rgba(247, 244, 238, 0.40) !important; } /* ── 43-I Secciones oscuras: resumen, numeralia, beneficios, potencial, cierre. ── */ /* Resumen rápido */ .pyrus-wp-page--el-huerto-residencial .pyrus-resumen__etiqueta { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.35) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-resumen__valor { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-resumen__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Numeralia (fondo negro-suave — igual que Xahala 38-E, Providencia 41-E) */ .pyrus-wp-page--el-huerto-residencial .pyrus-numeralia__numero { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-numeralia__label { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-numeralia__sub { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.22) !important; } /* Beneficios diferenciales (fondo azul-petróleo) */ .pyrus-wp-page--el-huerto-residencial .pyrus-beneficios-desarrollo .pyrus-h2 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-beneficio-card__num { font-family: var(--pyrus-font-heading) !important; font-weight: 300 !important; color: rgba(216, 192, 122, 0.28) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-beneficio-card__titulo { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-beneficio-card__texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.65) !important; } /* Potencial patrimonial (fondo oscuro — sección id-only #potencial) */ .pyrus-wp-page--el-huerto-residencial .pyrus-potencial__statement { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-potencial__statement em { color: var(--pyrus-dorado) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-potencial__punto-texto { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.72) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-potencial__nota { font-family: var(--pyrus-font-body) !important; color: rgba(247, 244, 238, 0.45) !important; } /* Cierre final */ .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo__frase { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.30 !important; letter-spacing: 0.02em !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-cierre-desarrollo__sub { font-family: var(--pyrus-font-body) !important; font-weight: 300 !important; color: rgba(247, 244, 238, 0.55) !important; } /* ── 43-J Headings globales + secciones claras. h1/h2/h3 base → Lora 400. Secciones claras (marfil/blanco) → negro-carbón. Selectores id directos para secciones sin clase-bloque BEM: #amenidades · #mi-huerto · #faq (el
no tiene clase propia). ── */ .pyrus-wp-page--el-huerto-residencial h1, .pyrus-wp-page--el-huerto-residencial h2, .pyrus-wp-page--el-huerto-residencial h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* H2 en secciones claras → negro-carbón */ .pyrus-wp-page--el-huerto-residencial .pyrus-descripcion h2, .pyrus-wp-page--el-huerto-residencial #descripcion h2, .pyrus-wp-page--el-huerto-residencial .pyrus-ubicacion h2, .pyrus-wp-page--el-huerto-residencial #ubicacion h2, .pyrus-wp-page--el-huerto-residencial #amenidades h2, .pyrus-wp-page--el-huerto-residencial #mi-huerto h2, .pyrus-wp-page--el-huerto-residencial .pyrus-relacionados h2, .pyrus-wp-page--el-huerto-residencial .pyrus-faq h2, .pyrus-wp-page--el-huerto-residencial #faq h2 { color: var(--pyrus-negro-carbon) !important; } /* H3 en secciones claras → negro-carbón */ .pyrus-wp-page--el-huerto-residencial #amenidades h3, .pyrus-wp-page--el-huerto-residencial #mi-huerto h3, .pyrus-wp-page--el-huerto-residencial .pyrus-relacionados h3 { color: var(--pyrus-negro-carbon) !important; } /* Labels en secciones claras */ .pyrus-wp-page--el-huerto-residencial .pyrus-descripcion .pyrus-label, .pyrus-wp-page--el-huerto-residencial #ubicacion .pyrus-label, .pyrus-wp-page--el-huerto-residencial #amenidades .pyrus-label, .pyrus-wp-page--el-huerto-residencial #mi-huerto .pyrus-label, .pyrus-wp-page--el-huerto-residencial #faq .pyrus-label { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; letter-spacing: 0.10em !important; color: var(--pyrus-azul-grisaceo) !important; } /* ── 43-K Hero CTAs secondary: preservar sistema dorado en todos los estados. ── */ .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-btn--secondary:hover { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-btn--secondary:focus { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-btn--secondary:focus-visible { background-color: rgba(216, 192, 122, 0.08) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; box-shadow: none !important; text-decoration: none !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-desarrollo-hero .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.14) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; text-decoration: none !important; } /* ── 43-L FAQ: scroll-margin-top en secciones con ancla. pyrus-desarrollo.css no carga en WP — se replica scroll-margin-top:88px. BLOQUE 42 ya gestiona font-size / padding-block / hover: no se duplican. ── */ .pyrus-wp-page--el-huerto-residencial #faq, .pyrus-wp-page--el-huerto-residencial #galeria, .pyrus-wp-page--el-huerto-residencial #ubicacion, .pyrus-wp-page--el-huerto-residencial #amenidades, .pyrus-wp-page--el-huerto-residencial #mi-huerto, .pyrus-wp-page--el-huerto-residencial #potencial { scroll-margin-top: 88px !important; } @media (max-width: 640px) { /* Aire entre el header sticky y el título del FAQ en mobile. */ .pyrus-wp-page--el-huerto-residencial #faq .pyrus-section-header { margin-top: 12px !important; } } /* ── 43-M Mobile: galería ver-más, submit ancho completo. ── */ @media (max-width: 640px) { /* Galería ver-más mobile: layout block, texto centrado, colores sin magenta. */ .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas { display: block !important; width: 100% !important; text-align: center !important; padding-top: 20px !important; padding-bottom: 8px !important; color: rgba(247, 244, 238, 0.45) !important; } .pyrus-wp-page--el-huerto-residencial .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--el-huerto-residencial button.pyrus-galeria__ver-mas:hover { color: rgba(247, 244, 238, 0.75) !important; } /* Submit mobile: ancho completo. */ #pyrus-form-eh-custom .pyrus-cform__submit, .pyrus-wp-page--el-huerto-residencial .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } } /* ── fin BLOQUE 43 ── */ /* ═══════════════════════════════════════════════════════════════════════════ BLOQUE 44 — San Vicente 330: compatibilidad visual WordPress / Elementor Versión: 1.26.0 (pyrus-wp-elementor.css) Alcance: .pyrus-wp-page--san-vicente-330 Página: /desarrollos/san-vicente-330/ Referencia: BLOQUE 43 (El Huerto Residencial) como patrón operativo base. BLOQUE 42 como fuente de verdad de FAQ global — no duplicar. Secciones únicas: #proceso (4 pasos), #tipologias (3 niveles con imagen). Todos los
tienen BEM class + id → sin id-only selectors necesarios. Regla cascade: BLOQUE 44 termina antes de BLOQUE 42 (global FAQ). BLOQUE 42 permanece como último bloque FAQ del archivo. ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 44-A: Font rendering ──────────────────────────────────────────────── */ .pyrus-wp-page--san-vicente-330 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── 44-B: Imágenes sin deformación ────────────────────────────────────── */ /* Hero */ .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero .pyrus-desarrollo-hero__imagen { height: 100% !important; max-width: none !important; } .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero picture { display: block; width: 100%; height: 100%; } /* Descripción */ .pyrus-wp-page--san-vicente-330 .pyrus-descripcion__imagen picture { display: block; width: 100%; height: 100%; } .pyrus-wp-page--san-vicente-330 .pyrus-descripcion__imagen img { height: 100% !important; max-width: none !important; } /* Galería */ .pyrus-wp-page--san-vicente-330 .pyrus-galeria__grid img { height: 100% !important; max-width: none !important; } /* Cards de nivel: imagen tipología */ .pyrus-wp-page--san-vicente-330 .pyrus-tipologia-card__img-wrap { overflow: hidden; } .pyrus-wp-page--san-vicente-330 .pyrus-tipologia-card__img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; } /* ─── 44-C: Galería — botón ver más ─────────────────────────────────────── */ .pyrus-wp-page--san-vicente-330 .pyrus-galeria__ver-mas, .pyrus-wp-page--san-vicente-330 button.pyrus-galeria__ver-mas { display: flex !important; align-items: center !important; justify-content: center !important; background: none !important; border: none !important; box-shadow: none !important; color: rgba(247, 244, 238, 0.50) !important; padding-top: 32px !important; cursor: pointer !important; } .pyrus-wp-page--san-vicente-330 .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--san-vicente-330 button.pyrus-galeria__ver-mas:hover, .pyrus-wp-page--san-vicente-330 .pyrus-galeria__ver-mas:focus, .pyrus-wp-page--san-vicente-330 button.pyrus-galeria__ver-mas:focus { color: rgba(247, 244, 238, 0.85) !important; } /* ─── 44-D: Galería — label overlay (replica pyrus-desarrollo.css) ──────── */ .pyrus-wp-page--san-vicente-330 .pyrus-galeria__link { position: relative !important; display: block !important; overflow: hidden !important; color: transparent !important; } .pyrus-wp-page--san-vicente-330 .pyrus-galeria__label { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; opacity: 0 !important; transition: opacity 0.25s ease !important; } .pyrus-wp-page--san-vicente-330 .pyrus-galeria__link:hover .pyrus-galeria__label, .pyrus-wp-page--san-vicente-330 .pyrus-galeria__link:focus .pyrus-galeria__label { opacity: 1 !important; } /* ─── 44-E: Formulario dark — triple scope (BLOQUE 27-F side-effect fix) ── */ .pyrus-wp-page--san-vicente-330 .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-conversion .pyrus-cform .pyrus-form-input:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--pyrus-dorado) !important; outline: none !important; } /* ─── 44-F: Submit San Vicente 330 ──────────────────────────────────────── */ #pyrus-form-sv-custom .pyrus-cform__submit, .pyrus-wp-page--san-vicente-330 .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-weight: 600 !important; } /* ─── 44-G: CTA final — fondo petróleo + botón secundario ───────────────── */ .pyrus-wp-page--san-vicente-330 .pyrus-cierre-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-cierre-desarrollo .pyrus-btn--secondary { border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-cierre-desarrollo .pyrus-btn--secondary:hover, .pyrus-wp-page--san-vicente-330 .pyrus-cierre-desarrollo .pyrus-btn--secondary:focus, .pyrus-wp-page--san-vicente-330 .pyrus-cierre-desarrollo .pyrus-btn--secondary:active { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; } /* ─── 44-H: Hero — tipografía ───────────────────────────────────────────── */ .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero__nombre { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; color: var(--pyrus-blanco-marfil) !important; letter-spacing: 0.02em !important; line-height: 1.1 !important; } .pyrus-wp-page--san-vicente-330 .pyrus-label--light { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; letter-spacing: 0.12em !important; color: var(--pyrus-dorado) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero__tagline { color: rgba(247, 244, 238, 0.82) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-breadcrumb, .pyrus-wp-page--san-vicente-330 .pyrus-breadcrumb a, .pyrus-wp-page--san-vicente-330 .pyrus-breadcrumb span { color: rgba(247, 244, 238, 0.55) !important; } /* ─── 44-I: Secciones oscuras — fondos ──────────────────────────────────── */ .pyrus-wp-page--san-vicente-330 .pyrus-resumen { background-color: var(--pyrus-negro-suave) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-numeralia { background-color: var(--pyrus-azul-petroleo) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-beneficios-desarrollo { background-color: var(--pyrus-negro-carbon) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-potencial { background-color: var(--pyrus-negro-suave) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-conversion, .pyrus-wp-page--san-vicente-330 .pyrus-bg-dark { background-color: var(--pyrus-negro-carbon) !important; } /* ─── 44-J: Headings — Lora en todo el scope ────────────────────────────── */ .pyrus-wp-page--san-vicente-330 h1, .pyrus-wp-page--san-vicente-330 h2, .pyrus-wp-page--san-vicente-330 h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* Secciones claras: texto negro-carbon */ .pyrus-wp-page--san-vicente-330 .pyrus-descripcion h2, .pyrus-wp-page--san-vicente-330 #ubicacion h2, .pyrus-wp-page--san-vicente-330 #tipologias h2, .pyrus-wp-page--san-vicente-330 #tipologias h3, .pyrus-wp-page--san-vicente-330 #proceso h2, .pyrus-wp-page--san-vicente-330 #proceso h3, .pyrus-wp-page--san-vicente-330 #faq h2, .pyrus-wp-page--san-vicente-330 .pyrus-relacionados h2, .pyrus-wp-page--san-vicente-330 .pyrus-relacionados h3 { color: var(--pyrus-negro-carbon) !important; } /* ─── 44-K: Hero — botón secundario (todos los estados) ─────────────────── */ .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero .pyrus-btn--secondary { border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; border-radius: 999px !important; display: inline-flex !important; } .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero .pyrus-btn--secondary:hover, .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero .pyrus-btn--secondary:focus, .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero .pyrus-btn--secondary:active { background-color: var(--pyrus-dorado) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-negro-carbon) !important; } /* ─── 44-L: Anclas — scroll-margin-top (replica pyrus-desarrollo.css) ───── */ .pyrus-wp-page--san-vicente-330 #galeria, .pyrus-wp-page--san-vicente-330 #beneficios, .pyrus-wp-page--san-vicente-330 #ubicacion, .pyrus-wp-page--san-vicente-330 #tipologias, .pyrus-wp-page--san-vicente-330 #potencial, .pyrus-wp-page--san-vicente-330 #proceso, .pyrus-wp-page--san-vicente-330 #faq, .pyrus-wp-page--san-vicente-330 #contacto { scroll-margin-top: 88px; } @media (max-width: 640px) { .pyrus-wp-page--san-vicente-330 #faq { margin-top: 12px; } } /* ─── 44-M: Mobile ───────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Botón ver-más galería: bloque ancho en mobile */ .pyrus-wp-page--san-vicente-330 .pyrus-galeria__ver-mas, .pyrus-wp-page--san-vicente-330 button.pyrus-galeria__ver-mas { display: block !important; width: 100% !important; text-align: center !important; padding-top: 20px !important; padding-bottom: 8px !important; color: rgba(247, 244, 238, 0.45) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-galeria__ver-mas:hover, .pyrus-wp-page--san-vicente-330 button.pyrus-galeria__ver-mas:hover { color: rgba(247, 244, 238, 0.75) !important; } /* Submit mobile: ancho completo */ #pyrus-form-sv-custom .pyrus-cform__submit, .pyrus-wp-page--san-vicente-330 .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } } /* Fila "Distribución": stacking elegante en mobile narrow. Scope: #tipologias — exclusivo de San Vicente 330. Equivalente local: pyrus-desarrollo.css, sección San Vicente 330 mobile. Posición 3 en la lista de specs es consistente en las 3 cards de nivel. */ @media (max-width: 480px) { .pyrus-wp-page--san-vicente-330 #tipologias .pyrus-tipologia-card__specs > li:nth-child(3) { flex-wrap: wrap; gap: 3px 0; } .pyrus-wp-page--san-vicente-330 #tipologias .pyrus-tipologia-card__specs > li:nth-child(3) .pyrus-tipologia-card__spec-lbl { flex: 0 0 100%; } .pyrus-wp-page--san-vicente-330 #tipologias .pyrus-tipologia-card__specs > li:nth-child(3) .pyrus-tipologia-card__spec-val { line-height: 1.45; } } /* ─── 44-N: Hero microalineación y color eyebrow ──────────────────────────── Corrige dos errores de la ronda anterior: (1) 44-B usó .pyrus-desarrollo-hero__imagen (clase inexistente). El selector real es .pyrus-desarrollo-hero__img / __picture. Todas las páginas cerradas usan estos mismos selectores. (2) 44-H aplicó color:dorado a .pyrus-label--light en toda la página. pyrus-global.css define .pyrus-label--light = rgba(247,244,238,0.60) (marfil semitransparente). El dorado es .pyrus-label--gold. Fix: selector más específico que 44-H → solo el eyebrow del hero. La línea decorativa (.pyrus-desarrollo-hero__eyebrow-line) es background: var(--pyrus-dorado) por diseño en pyrus-desarrollo.css — no se toca. ─────────────────────────────────────────────────────────────────────── */ /* Imagen hero: selectores correctos para Elementor */ .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero__img { height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; } .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero__picture { display: block !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } /* Eyebrow: marfil semitransparente (más específico que 44-H → gana en cascada) */ .pyrus-wp-page--san-vicente-330 .pyrus-desarrollo-hero__eyebrow .pyrus-label--light { color: rgba(247, 244, 238, 0.85) !important; } /* ─── 44-O: Fondos correctos numeralia / beneficios ───────────────────────── Corrige intercambio de 44-I: pyrus-desarrollo.css baseline real: - .pyrus-numeralia → var(--pyrus-negro-suave) #1A1E24 - .pyrus-beneficios-desarrollo → var(--pyrus-azul-petroleo) #16313D 44-I los tenía al revés. ─────────────────────────────────────────────────────────────────────── */ .pyrus-wp-page--san-vicente-330 .pyrus-numeralia { background-color: var(--pyrus-negro-suave) !important; } .pyrus-wp-page--san-vicente-330 .pyrus-beneficios-desarrollo { background-color: var(--pyrus-azul-petroleo) !important; } /* ─── 44-P: Overlay "VER IMAGEN" — mejor centrado en desktop ──────────────── 44-D dejó el label con left:0/right:0/bottom:0 (span a ancho completo) sin text-align, por eso el texto queda pegado a la izquierda. Fix: centrar con transform dentro del contenedor relativo del link. Solo desktop (≥641px) para no alterar galería mobile. ─────────────────────────────────────────────────────────────────────── */ @media (min-width: 641px) { .pyrus-wp-page--san-vicente-330 .pyrus-galeria__label { bottom: auto !important; top: 50% !important; left: 50% !important; right: auto !important; transform: translate(-50%, -50%) !important; text-align: center !important; padding: 10px 24px !important; white-space: nowrap !important; } } /* ─── 44-Q: Corrección final fondos y overlay galería ─────────────────────── CORRECCIÓN 1 — Fondo de .pyrus-resumen (franja debajo del hero): pyrus-desarrollo.css baseline: var(--pyrus-negro-carbon) #101216. 44-I lo había cambiado a var(--pyrus-negro-suave), desviándolo del Live Server. Esta regla lo restaura al valor exacto del prototipo base. No afecta .pyrus-numeralia (ya corregida en 44-O a negro-suave) ni otras secciones. CORRECCIÓN 2 — Posición overlay .pyrus-galeria__label en desktop: 44-P centró el label con top:50%/left:50%/transform:translate(-50%,-50%). Eso es incorrecto: pyrus-desarrollo.css lo posiciona en esquina inferior izquierda con bottom/left de var(--pyrus-sp-4) ~16px. Esta regla sobreescribe todos los valores de 44-P con bottom-left + margen elegante. Solo desktop (min-width: 641px). Mobile sin cambio. ─────────────────────────────────────────────────────────────────────── */ /* Fondo resumen: negro carbón, igual que Live Server */ .pyrus-wp-page--san-vicente-330 .pyrus-resumen { background-color: var(--pyrus-negro-carbon) !important; } /* Overlay "VER IMAGEN": abajo-izquierda, no centrado (sobreescribe 44-P) */ @media (min-width: 641px) { .pyrus-wp-page--san-vicente-330 .pyrus-galeria__label { bottom: 20px !important; left: 20px !important; top: auto !important; right: auto !important; transform: none !important; text-align: left !important; padding: 0 !important; white-space: normal !important; } } /* ── fin BLOQUE 44 ── */ /* ========================================================================== BLOQUE 45 — Home: compatibilidad visual WordPress/Elementor Versión: v1.27.1 Página: / (Página principal — Home) Ancla: .pyrus-wp-page--home (div raíz del snippet) HubSpot: Portal 51343142 · Form GUID 344dc36d-d37b-4ecf-9019-e70f2aadbc3f Handler: initHomepageForm() · IDs: hp-* Sub-bloques: 45-A Font-smoothing base 45-B Hero principal — .pyrus-hero__picture + .pyrus-hero__img (Elementor aplica height:auto a dentro del widget) 45-C Cards de desarrollos — imágenes sin deformación ni huecos oscuros Card 2 (Balam en posición Home): el wrapper necesita display:flex para que img-wrap con flex:1/aspect-ratio:unset llene el espacio. 45-D Imágenes generales — oportunidades · vida · mapa cobertura 45-E Headings — Lora en todo el scope Home (Hello Elementor pisa font-family) 45-F FAQ Home — max-width editorial restaurado BLOQUE 42 forzó max-width:none globalmente (correcto en desarrollo, no en Home). pyrus-global.css define max-width:800px en .pyrus-faq__lista. Este sub-bloque lo restituye para Home exclusivamente. Incluye scroll-margin-top y respiración mobile bajo header sticky. 45-G Formulario dark — corrección BLOQUE 27-F side-effect BLOQUE 27-F: background:#ffffff!important en .pyrus-cform .pyrus-form-input. En .pyrus-conversion (fondo oscuro) los inputs aparecen blancos en WP. Fix: triple scope, mismo patrón que BLOQUE 41-E, 43-E, 44-E. Labels, inputs, placeholder, focus, microcopy. 45-H Submit Homepage 45-I Botones — protección anti-magenta Elementor .pyrus-hero .pyrus-btn--secondary (Ver desarrollos) .pyrus-btn--secondary-dark (Explorar todos los desarrollos) 45-J Mobile: cards, FAQ, formulario Reglas globales ya cubiertas — NO se duplican aquí: - .pyrus-skip-link → BLOQUE 40 - FAQ font-size / padding-block / flex layout / hover dorado → BLOQUE 42 - Modal de galería → BLOQUEs 34–36 (Home no tiene galería) Cascada: BLOQUE 45 se posiciona al final del archivo — garantiza supremacía sobre BLOQUE 42 en los selectores compartidos de FAQ. ========================================================================== */ /* ── 45-A Font-smoothing ── */ .pyrus-wp-page--home { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 45-B Hero principal — + img ── */ /* : Elementor puede colapsar el elemento si no hay display:block explícito. */ .pyrus-wp-page--home .pyrus-hero__picture { display: block !important; width: 100% !important; height: 100% !important; } /* : Elementor aplica height:auto al elemento dentro del widget — esto rompe height:100% de pyrus-global.css, aplana la imagen. */ .pyrus-wp-page--home .pyrus-hero__img { height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; } /* ── 45-C Cards de desarrollos — imágenes ── */ /* img-wrap: overflow:hidden previene desborde al hacer scale en hover. background neutral = visible si la imagen tarda en cargar, nunca hueco blanco. */ .pyrus-wp-page--home .pyrus-card-desarrollo__img-wrap { overflow: hidden !important; position: relative !important; background-color: var(--pyrus-negro-suave) !important; } /* img: Elementor height:auto rompe height:100% de pyrus-global.css. */ .pyrus-wp-page--home .pyrus-card-desarrollo__img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; } /* Card 2 (Balam Resort en posición Home): pyrus-global.css le da aspect-ratio:unset y flex:1 al img-wrap para que estire. Pero el wrapper debe ser flex para que el img-wrap pueda expandirse. Hello Elementor resetea a display:inline. Solo en ≥601px donde el grid tiene layout de cards desiguales. */ @media (min-width: 601px) { .pyrus-wp-page--home .pyrus-desarrollos__grid .pyrus-card-desarrollo:nth-child(2) > a { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; } .pyrus-wp-page--home .pyrus-desarrollos__grid .pyrus-card-desarrollo:nth-child(2) .pyrus-card-desarrollo__img-wrap { flex: 1 !important; aspect-ratio: unset !important; min-height: 160px !important; } } /* ── 45-D Imágenes generales ── */ /* Sección Oportunidades */ .pyrus-wp-page--home .pyrus-oportunidades__img-col { overflow: hidden !important; position: relative !important; } .pyrus-wp-page--home .pyrus-oportunidades__img { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; } /* Sección Vida (imagen de fondo con overlay) */ .pyrus-wp-page--home .pyrus-vida__img-wrap { overflow: hidden !important; position: relative !important; } .pyrus-wp-page--home .pyrus-vida__img { display: block !important; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover !important; } /* Mapa de territorio: escala con su aspecto natural, sin forzar height:100% */ .pyrus-wp-page--home .pyrus-cobertura__mapa-img { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; } /* ── 45-E Headings — Lora en todo el scope Home ── */ /* Hello Elementor puede pisar font-family en h1/h2/h3 con su propio stack serif. No se repite el prefijo para no crear selectors globales: todos llevan el scope. */ .pyrus-wp-page--home h1, .pyrus-wp-page--home h2, .pyrus-wp-page--home h3 { font-family: var(--pyrus-font-heading) !important; font-weight: 400 !important; } /* H1 Hero: marfil sobre imagen oscura */ .pyrus-wp-page--home .pyrus-hero__titulo { color: var(--pyrus-blanco-marfil) !important; line-height: 1.08 !important; letter-spacing: 0.01em !important; } /* H2 sobre fondo claro: negro-carbón */ .pyrus-wp-page--home .pyrus-desarrollos h2, .pyrus-wp-page--home .pyrus-proceso h2, .pyrus-wp-page--home .pyrus-cobertura h2, .pyrus-wp-page--home .pyrus-faq h2 { color: var(--pyrus-negro-carbon) !important; } /* H2 sobre fondo oscuro: marfil */ .pyrus-wp-page--home .pyrus-porque h2, .pyrus-wp-page--home .pyrus-oportunidades h2, .pyrus-wp-page--home .pyrus-vida__titulo, .pyrus-wp-page--home .pyrus-conversion h2 { color: var(--pyrus-blanco-marfil) !important; } /* ── 45-F FAQ Home — max-width editorial restaurado ── */ /* BLOQUE 42 declaró max-width:none en .pyrus-wp-page .pyrus-faq__lista para liberar restricciones de Elementor en páginas de desarrollo. Pero en Home, pyrus-global.css define max-width:800px + margin-inline:auto en .pyrus-faq__lista. BLOQUE 45 lo restituye con mayor especificidad (scope --home > scope genérico). */ .pyrus-wp-page--home .pyrus-faq__lista { max-width: 800px !important; margin-inline: auto !important; width: 100% !important; } /* Scroll-margin-top para header sticky */ .pyrus-wp-page--home #faq { scroll-margin-top: 88px; } /* Mobile: ancho completo, sin padding lateral propio */ @media (max-width: 640px) { .pyrus-wp-page--home .pyrus-faq__lista { max-width: 100% !important; padding-inline: 0 !important; } .pyrus-wp-page--home #faq .pyrus-section-header { margin-top: 12px !important; } } /* ── 45-G Formulario dark — corrección BLOQUE 27-F side-effect ── */ /* BLOQUE 27-F: background:#ffffff!important en .pyrus-cform .pyrus-form-input. En .pyrus-conversion (fondo negro-carbon) los inputs aparecen blancos en WP. Triple scope para ganar especificidad: page-scope + section + form. */ .pyrus-wp-page--home .pyrus-conversion .pyrus-cform .pyrus-form-label { color: rgba(247, 244, 238, 0.70) !important; font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 500 !important; } .pyrus-wp-page--home .pyrus-conversion .pyrus-cform .pyrus-form-input { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--pyrus-blanco-marfil) !important; border-radius: var(--pyrus-radius-sm) !important; box-shadow: none !important; font-family: var(--pyrus-font-body) !important; } .pyrus-wp-page--home .pyrus-conversion .pyrus-cform .pyrus-form-input::placeholder { color: rgba(247, 244, 238, 0.40) !important; } .pyrus-wp-page--home .pyrus-conversion .pyrus-cform .pyrus-form-input:focus { background: rgba(255, 255, 255, 0.08) !important; border-color: var(--pyrus-dorado) !important; outline: none !important; } /* Nota de formulario y microcopy: tenues sobre fondo oscuro */ .pyrus-wp-page--home .pyrus-conversion__form-nota, .pyrus-wp-page--home .pyrus-cform__microcopy { color: rgba(247, 244, 238, 0.45) !important; font-family: var(--pyrus-font-body) !important; font-size: var(--pyrus-type-sm) !important; } /* ── 45-H Submit Homepage ── */ /* Hello Elementor button{} y Elementor sobreescriben display/width/padding del submit. Se usa doble scope (ID del form + scope página) para máxima especificidad. */ #pyrus-form-homepage-custom .pyrus-cform__submit, .pyrus-wp-page--home .pyrus-conversion .pyrus-cform__submit { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 16px 24px !important; min-height: 52px !important; text-align: center !important; font-family: var(--pyrus-font-body) !important; font-weight: 600 !important; } /* ── 45-I Botones — protección anti-magenta Elementor ── */ /* Elementor global: a:hover { color: var(--e-global-color-accent) } (magenta/morado). Se protegen los botones secundarios del Hero y del footer de Desarrollos. */ /* Hero: "Ver desarrollos" (.pyrus-btn--secondary sobre fondo oscuro de imagen) */ .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary, .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary:link, .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary:visited { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; text-decoration: none !important; box-shadow: none !important; } .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary:hover { color: var(--pyrus-negro-carbon) !important; border-color: var(--pyrus-dorado) !important; background-color: var(--pyrus-dorado) !important; text-decoration: none !important; box-shadow: none !important; } .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary:focus { color: var(--pyrus-dorado) !important; border-color: rgba(216, 192, 122, 0.60) !important; background-color: transparent !important; outline: none !important; text-decoration: none !important; } .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary:focus-visible { outline: 2px solid var(--pyrus-dorado) !important; outline-offset: 3px !important; } .pyrus-wp-page--home .pyrus-hero .pyrus-btn--secondary:active { background-color: rgba(216, 192, 122, 0.14) !important; border-color: var(--pyrus-dorado) !important; color: var(--pyrus-dorado) !important; box-shadow: none !important; } /* Footer desarrollos: "Explorar todos los desarrollos" (.pyrus-btn--secondary-dark) */ .pyrus-wp-page--home .pyrus-btn--secondary-dark, .pyrus-wp-page--home .pyrus-btn--secondary-dark:link, .pyrus-wp-page--home .pyrus-btn--secondary-dark:visited { text-decoration: none !important; } .pyrus-wp-page--home .pyrus-btn--secondary-dark:hover, .pyrus-wp-page--home .pyrus-btn--secondary-dark:focus, .pyrus-wp-page--home .pyrus-btn--secondary-dark:active { text-decoration: none !important; } /* WhatsApp link de conversión: sin subrayado en hover */ .pyrus-wp-page--home .pyrus-conversion__whatsapp, .pyrus-wp-page--home .pyrus-conversion__whatsapp:hover, .pyrus-wp-page--home .pyrus-conversion__whatsapp:focus { text-decoration: none !important; } /* ── 45-J Mobile ── */ @media (max-width: 640px) { /* Cards: imagen sigue llenando contenedor en mobile */ .pyrus-wp-page--home .pyrus-card-desarrollo__img { height: 100% !important; } /* Card 1 (Aldea Hortus): en mobile el grid pasa a 1 col (aspect-ratio:16/9 normal). No se fuerza cambio — pyrus-global.css ya lo define correctamente. */ /* Submit mobile: ancho completo */ #pyrus-form-homepage-custom .pyrus-cform__submit, .pyrus-wp-page--home .pyrus-conversion .pyrus-cform__submit { width: 100% !important; } /* Oportunidades: imagen columna — height auto en mobile (no flex-stretch) */ .pyrus-wp-page--home .pyrus-oportunidades__img { height: auto !important; } } @media (max-width: 480px) { /* Card 2 en narrow: resetear flex del — en 1 col el no necesita stretch */ .pyrus-wp-page--home .pyrus-desarrollos__grid .pyrus-card-desarrollo:nth-child(2) > a { flex: unset !important; display: block !important; } .pyrus-wp-page--home .pyrus-desarrollos__grid .pyrus-card-desarrollo:nth-child(2) .pyrus-card-desarrollo__img-wrap { flex: unset !important; aspect-ratio: 16/9 !important; } } /* ── 45-K Imagen "Calidad de vida y proyección" ── */ /* 45-D estableció position:relative en .pyrus-vida__img-wrap pero el baseline de pyrus-global.css lo requiere position:absolute;inset:0 para cubrir la sección (.pyrus-vida tiene position:relative;overflow:hidden como contenedor real). Este sub-bloque restaura el posicionamiento correcto con mayor especificidad de cascada (aparece después de 45-D, misma especificidad, último gana). */ .pyrus-wp-page--home .pyrus-vida__img-wrap { position: absolute !important; inset: 0 !important; } .pyrus-wp-page--home .pyrus-vida__img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center !important; } /* ── 45-L Footer Inter + FAQ respuesta tipografía ── */ /* 45-E declaró: .pyrus-wp-page--home h3 { font-family: Lora }. .pyrus-footer__col-title es un h3 que pyrus-global.css define con var(--pyrus-font-body) (Inter). Se restaura aquí: mayor especificidad por añadir .pyrus-footer al scope. */ .pyrus-wp-page--home .pyrus-footer h3, .pyrus-wp-page--home .pyrus-footer__col-title { font-family: var(--pyrus-font-body) !important; font-weight: 500 !important; letter-spacing: 0.12em !important; } /* BLOQUE 42 global forzó font-weight:300 + color:#3E4A4D en .pyrus-faq__respuesta-inner. Home necesita el valor de pyrus-global.css: weight heredado (400) + azul-grisaceo. */ .pyrus-wp-page--home .pyrus-faq__respuesta-inner { font-weight: 400 !important; color: var(--pyrus-azul-grisaceo) !important; } .pyrus-wp-page--home .pyrus-faq__respuesta-inner p { font-weight: 400 !important; color: var(--pyrus-azul-grisaceo) !important; } /* ── 45-M Formulario Home — inputs más altos ── */ /* pyrus-global.css: padding:13px 16px. 45-G fijó dark-style (background/border/color/ font-family) pero no sobreescribió el padding. Los campos deben sentirse amplios y premium. Doble scope: section + ID del form para máxima especificidad. */ .pyrus-wp-page--home .pyrus-conversion .pyrus-cform .pyrus-form-input, #pyrus-form-homepage-custom .pyrus-form-input { padding: 14px 18px !important; } /* ── 45-N Mobile: "Por qué Pyrus" breathing ── */ /* En mobile (1 col) el icono de 24px margin-bottom + h3 + p puede sentirse apretado. Se reduce ligeramente el gap vertical dentro de cada ítem. */ @media (max-width: 640px) { .pyrus-wp-page--home .pyrus-porque__icono { margin-bottom: 16px !important; } .pyrus-wp-page--home .pyrus-porque__item-titulo { margin-bottom: 8px !important; } .pyrus-wp-page--home .pyrus-porque__item-texto { line-height: 1.65 !important; } } /* ── fin BLOQUE 45 ── */ /* ============================================================ BLOQUE 46 — LCP FIX: H1 hero Home visible inmediatamente v1.28.0 ============================================================ Problema: PageSpeed Insights reporta "Retraso de renderizado de elementos" ~2090 ms en el H1 hero (LCP de Home móvil). Causa: pyrus-reveal + pyrus-reveal--d1 aplicaban opacity:0 cuando .js-ready se añadía al , y el elemento tardaba JS-init-time + 0.10s delay + 0.6s transition en recuperar opacity:1. Solución principal: se eliminaron pyrus-reveal y pyrus-reveal--d1 del H1 en snippets/wp-home-elementor.html y en src/index.html. Este bloque es capa de respaldo (CSS insurance): cubre cualquier caso donde las clases de reveal volvieran a estar presentes en el H1. Sin efecto visual — el H1 ya no tiene pyrus-reveal. ============================================================ */ /* Fuerza visibilidad inmediata del H1 hero de Home en todos los estados posibles del sistema reveal. */ .pyrus-wp-page--home .pyrus-hero__titulo, .js-ready .pyrus-wp-page--home .pyrus-hero__titulo, .js-ready .pyrus-wp-page--home .pyrus-hero__titulo.is-visible { opacity: 1 !important; transform: none !important; transition-delay: 0s !important; animation-delay: 0s !important; visibility: visible !important; } /* ── fin BLOQUE 46 ── */