retirado ya no existe el contexto de apilamiento que lo contenía, y el queda por ENCIMA de esa sección en el orden de pintado: el navegador entrega todos los clics al y el formulario de contacto (selects, casilla de consentimiento, mensaje, botón) no responde. Aislar el body contiene los z-index negativos dentro de él, sobre su propio fondo, sin cambiar nada visualmente. */ body { isolation: isolate; } /* El correo "info@independencefinanciallp.com" es largo y sin espacios; en columnas angostas (móvil, offcanvas de 300px) desbordaba su contenedor. Regla universal para cualquier enlace mailto del sitio. */ a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; } /* La plantilla revela títulos, "eyebrows" y bloques con .wow SOLO cuando el scroll cruza cierto punto exacto (GSAP ScrollTrigger con scrub + WOW.js). Si se llega a una sección saltando desde el menú (o el trigger tarda / nunca se dispara), el contenido queda invisible — parece una página vacía. Se retira ScrollSmoother (ver el

eliminado del HTML) y se fuerza aquí el estado final visible de inmediato, sin depender de ningún disparador de scroll. */ .char { opacity: 1 !important; clip-path: none !important; transform: none !important; } .wow, .wow.fadeInUp { opacity: 1 !important; transform: none !important; visibility: visible !important; animation: none !important; } /* La plantilla referencia "Mona Sans" para titulares pero no la carga (sin @font-face ni enlace de Google Fonts) — se unifica todo en "DM Sans", que sí se importa desde el , para evitar una caida silenciosa a la tipografia generica del sistema. */ h1, h2, h3, h4, h5, h6 { font-family: "DM Sans", sans-serif !important; font-weight: 800; } /* ---------- Hero: foto institucional + degradado de marca sobre ella ---------- */ .hero-11 .hero-bg { background-color: var(--header); } .hero-11 .hero-bg::before { background: linear-gradient(100deg, rgba(20, 24, 26, 0.88) 10%, rgba(20, 24, 26, 0.72) 55%, rgba(20, 24, 26, 0.55) 100%); } /* El widget flotante de contacto (.contact-fab) es position:fixed, ocupa una columna de ~76px pegada al borde derecho del viewport y queda por encima de todo (z-index altísimo). Si la marca de agua se acerca demasiado al borde, la aguja del compás termina "detrás" de esos botones. Se deja un right fijo (no vw) con margen suficiente para no invadir esa columna a ningún ancho de pantalla. */ .hero-watermark-11 { position: absolute; right: 110px; top: 50%; transform: translateY(-50%); width: 420px; max-width: 26vw; opacity: 0.1; filter: grayscale(1) brightness(3); z-index: 1; pointer-events: none; } @media (max-width: 1199px) { .hero-watermark-11 { display: none; } } .hero-11 .array-button { display: none; } /* La plantilla revela el contenido del hero solo cuando un ancestro tiene la clase .swiper-slide-active (inyectada por Swiper). Al usar una sola diapositiva estática se retira esa dependencia y se fuerza el estado final visible directamente. */ .hero-11 .hero-content, .hero-11 .hero-button { opacity: 1 !important; transform: none !important; margin-left: 0 !important; } /* ---------- Credencial institucional (badge) ---------- */ .credential-badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 20px 9px 16px; border: 1px solid rgba(203, 163, 109, 0.45); border-radius: 30px; background: rgba(255, 255, 255, 0.05); font-size: 14px; letter-spacing: 0.3px; color: #DDC3A0; margin-bottom: 22px; } .credential-badge i { color: var(--theme); } /* ---------- Marco de fotografia institucional ---------- */ .photo-frame { position: relative; display: block; height: 360px; border-radius: 12px; overflow: hidden; box-shadow: var(--box-shadow); } .photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Segunda foto apilada debajo de otra, para columnas más cortas que su par */ .photo-frame--stacked { margin-top: 24px; height: 220px; } @media (max-width: 575px) { .photo-frame--stacked { height: 180px; } } /* ---------- Icono de tarjeta (sin fototmb, tarjetas style-2 no traen foto) ---------- */ .pillar-icon { width: 60px; height: 60px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .pillar-icon img { width: 30px; height: 30px; } /* ---------- Lista simple de rasgos (sustituye barras de progreso) ---------- */ .simple-feature-list { list-style: none; margin: 28px 0 0; padding: 26px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 22px; } .simple-feature-list li { display: flex; align-items: flex-start; gap: 16px; } .simple-feature-list .icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: rgba(170, 124, 61, 0.12); display: flex; align-items: center; justify-content: center; } .simple-feature-list .icon i { color: var(--theme); font-size: 18px; } .simple-feature-list strong { display: block; color: var(--header); font-size: 16px; margin-bottom: 4px; font-family: "DM Sans", sans-serif; } .simple-feature-list span { color: var(--text); font-size: 14px; line-height: 1.6; } /* ---------- Desglose de reservas 70/30 (paso 4 del enfoque) ---------- */ .reserve-split { display: flex; gap: 28px; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border); } .reserve-split div { flex: 1; } .reserve-split strong { display: block; font-family: "Mona Sans", "DM Sans", sans-serif; font-weight: 800; font-size: 32px; color: var(--header); line-height: 1; margin-bottom: 6px; } .reserve-split span { font-size: 13px; color: var(--text); line-height: 1.5; } /* ---------- Cierre de sector (texto final Life Settlements) ---------- */ .sector-closing { margin-top: 10px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .sector-closing p { margin: 0; font-size: 17px; color: rgba(255, 255, 255, 0.85); max-width: 880px; } /* ========================================================================== Menú de contacto flotante (WhatsApp / correo / ubicación) ========================================================================== */ .contact-fab { position: fixed; bottom: 26px; right: 26px; z-index: 999999; display: flex; flex-direction: column; align-items: center; } .fab-menu { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 16px; } .fab-item { width: 50px; height: 50px; border-radius: 50%; background: var(--white); color: var(--header); display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 8px 22px rgba(20, 24, 26, 0.28); opacity: 0; transform: translateY(14px) scale(0.7); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .fab-item:hover { transform: translateY(0) scale(1.08); color: var(--theme); } .fab-item--whatsapp { background: #25d366; color: var(--white); } .fab-item--whatsapp:hover { color: var(--white); } .contact-fab.is-open .fab-item { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .contact-fab.is-open .fab-item:nth-child(1) { transition-delay: 0.02s; } .contact-fab.is-open .fab-item:nth-child(2) { transition-delay: 0.07s; } .contact-fab.is-open .fab-item:nth-child(3) { transition-delay: 0.12s; } .fab-toggle { width: 60px; height: 60px; border-radius: 50%; background: var(--header); color: #DDC3A0; border: none; font-size: 22px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); animation: fab-pulse 2.6s infinite; } .fab-toggle:hover { transform: scale(1.06); } .fab-toggle i { transition: transform 0.3s ease; } .contact-fab.is-open .fab-toggle i { transform: rotate(45deg); } .contact-fab.is-open .fab-toggle { animation: none; } @keyframes fab-pulse { 0% { box-shadow: 0 0 0 0 rgba(170, 124, 61, 0.4), 0 10px 30px rgba(0, 0, 0, 0.28); } 70% { box-shadow: 0 0 0 14px rgba(170, 124, 61, 0), 0 10px 30px rgba(0, 0, 0, 0.28); } 100% { box-shadow: 0 0 0 0 rgba(170, 124, 61, 0), 0 10px 30px rgba(0, 0, 0, 0.28); } } /* ---------- Contacto: la plantilla monta esta sección -220px sobre la anterior (pensada para asentarse sobre la franja de marcas, que se quitó aquí). Sin esa sección debajo, el solape aplastaba el botón de "Por Qué Elegirnos" contra el panel dorado. ---------- */ .contact-section-3 { margin-top: 0 !important; } /* La columna del formulario traía un +220px pensado para cancelar el -220px de la sección (un par acoplado). Al neutralizar uno, el panel dorado quedaba 220px más abajo que la columna izquierda y se montaba sobre el footer. Se neutraliza también en desktop. */ .contact-right-content-style-3 { margin-top: 0 !important; } /* La columna de texto traía su PROPIO margin-top:220px (pensado para compensar el mismo solape de arriba), dejándola 220px más abajo que el formulario y un enorme vacío sobre "Contacto". Se nivela con el formulario. */ .contact-left-items-style-3 { margin-top: 0 !important; } /* El correo de contacto se imprimía a 32px/600 — demasiado protagonismo. */ .contact-left-items-style-3 p a { font-size: 20px !important; font-weight: 600; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 400px) { .contact-left-items-style-3 p a { font-size: 17px !important; } } /* "Por Qué Elegirnos" traía pb-0 (pensado para que la foto tocara el borde). Sus dos columnas no terminan a la misma altura, así que se le da un cierre parejo y un separador visible antes de pasar a Contacto. */ .choose-section-3.pb-0 { padding-bottom: 90px !important; } .contact-section-3 { padding-top: 90px; border-top: 1px solid var(--border); margin-bottom: 70px; } /* ---------- Selector de idioma ES / EN ---------- */ .lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; margin-right: 4px; } .lang-link { color: rgba(255, 255, 255, 0.6); } .lang-link.is-active { color: var(--white); border-bottom: 1px solid var(--theme); padding-bottom: 2px; } .lang-link:hover { color: var(--theme); } .lang-sep { color: rgba(255, 255, 255, 0.35); } @media (max-width: 1199px) { .header-right>.lang-switch { display: none; } } .off-lang-switch { margin: 18px 0 0; } .off-lang-switch .lang-link { color: rgba(255, 255, 255, 0.65); } .off-lang-switch .lang-link.is-active { color: var(--white); } /* ---------- Logotipo del header: mayor presencia ---------- */ .header-1 .logo img { height: 72px !important; width: auto; } @media (max-width: 575px) { .header-1 .logo img { height: 52px !important; } } .offcanvas__logo img { height: 56px !important; width: auto; } /* ---------- Formulario: selects con el mismo aspecto que los inputs ---------- */ .contact-right-content-style-3 .contact-form-box-3 .form-clt select { width: 100%; padding: 17px 48px 17px 20px; font-weight: 400; line-height: 1; text-transform: capitalize; color: var(--text); border-radius: 6px; border: 1px solid var(--white); background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235C5850' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 20px center; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .contact-right-content-style-3 .contact-form-box-3 .form-clt select:focus { outline: none; } /* Mientras no se elige una opción, el select luce como el placeholder de los inputs (gris #757575); las opciones del desplegable mantienen el color normal. */ .contact-right-content-style-3 .contact-form-box-3 .form-clt select:has(option[value=""]:checked) { color: #757575; } .contact-right-content-style-3 .contact-form-box-3 .form-clt select option { color: var(--text); text-transform: none; } /* Casilla de consentimiento de tratamiento de datos. */ .form-consent { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 13px; font-weight: 400; line-height: 1.55; color: var(--white); cursor: pointer; } .form-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--header); cursor: pointer; } /* El textarea del formulario institucional tiene esquinas redondeadas, pero el asa de redimensionar nativa del navegador es un triángulo recto que queda fuera de esa curva, como si la esquina estuviera "cortada". Se desactiva el redimensionado manual (el textarea ya tiene alto suficiente). */ .contact-right-content-style-3 .contact-form-box-3 .form-clt textarea { resize: none; } /* La cita institucional (franja dorada) centra su contenido en pantallas angostas. El correo se mostraba como texto plano y desbordaba el contenedor en móvil; se reemplaza por un botón fantasma que abre el cliente de correo directamente (mailto:). */ .cta-wrapper-3 .cta-icon-area .cta-first-items { max-width: 100%; } .cta-wrapper-3 .cta-icon-area .cta-first-items .content .cta-location { display: block; font-size: 13px; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; } .cta-wrapper-3 .cta-icon-area .cta-first-items .content .cta-email-btn { display: inline-flex; align-items: center; gap: 9px; font-family: "DM Sans", sans-serif; font-size: 14.5px; font-weight: 600; color: var(--white); border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 30px; padding: 10px 22px; white-space: nowrap; transition: all 0.25s ease; } .cta-wrapper-3 .cta-icon-area .cta-first-items .content .cta-email-btn i { font-size: 13px; } .cta-wrapper-3 .cta-icon-area .cta-first-items .content .cta-email-btn:hover { background: var(--white); color: var(--header); border-color: var(--white); } @media (max-width: 480px) { .cta-wrapper-3 .cta-icon-area .cta-first-items { flex-wrap: wrap; justify-content: center; text-align: center; } } /* El titular de la franja dorada venía con el tamaño/peso por defecto de h1-h6 (800), desproporcionado frente al resto de la franja (correo, botón). Se reduce para mayor armonía visual. */ .cta-wrapper-3 .cta-icon-area .title { font-size: 24px !important; font-weight: 700 !important; line-height: 1.4 !important; max-width: 420px; } @media (max-width: 1399px) { .cta-wrapper-3 .cta-icon-area .title { font-size: 21px !important; } } @media (max-width: 991px) { .cta-wrapper-3 .cta-icon-area .title { font-size: 20px !important; max-width: 380px; margin: 0 auto; } } /* El botón se comprimía por flex-shrink al competir por espacio con el bloque de contacto + titular, partiendo "Agendar Sesión" en dos líneas. */ .cta-wrapper-3 .theme-btn { flex-shrink: 0; } .cta-wrapper-3 .theme-btn .btn-title { white-space: nowrap; } /* Mapa de ubicación: franja a todo el ancho entre Contacto y el pie de página. line-height:0 evita el hueco de línea que deja un iframe inline. */ .if-map-section { position: relative; width: 100%; height: 480px; background: var(--bg-2); line-height: 0; } .if-map-frame { display: block; width: 100%; height: 100%; border: 0; } /* Campo trampa anti-spam del formulario: fuera de pantalla para las personas, visible para los bots que rellenan todos los campos. */ .if-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ---------- Responsive ---------- */ @media (max-width: 991px) { .if-map-section { height: 400px; } /* A este ancho el panel dorado desaparece y el formulario queda sobre fondo crema. */ .form-consent { color: var(--header); } .photo-frame { height: 260px; } .reserve-split { flex-direction: column; gap: 14px; } } @media (max-width: 575px) { .credential-badge { font-size: 12px; padding: 8px 14px; } .if-map-section { height: 320px; } } /* ---------- Los CTA bajan directo al formulario sin que el header lo tape ---------- */ html { scroll-behavior: smooth; } #contact-form { scroll-margin-top: 130px; }