/* ============================================================ LUZ — capa visual de Smartagent (sistema de apps inteligentes) ------------------------------------------------------------ Se carga DESPUÉS de app.css y sólo actúa dentro de . Por eso no toca las pantallas internas (admin, agente): sólo la cara pública, que es la que tiene que enganchar. La idea: luz, foto grande y vidrio. El color no lo pone el CSS — lo ponen las fotos reales del terreno; el CSS sólo pone la atmósfera. ============================================================ */ .lux { /* Luz ambiental */ --luz-sol: #ffd9a3; /* sol tibio, arriba a la derecha */ --luz-cielo: #cfe9ff; /* cielo frío, arriba a la izquierda */ --luz-campo: #b9ecd0; /* verde claro, abajo */ --luz-menta: #6fd7a6; /* acento brillante (nunca para texto chico) */ /* Vidrio */ --vidrio: rgba(255, 255, 255, .72); --vidrio-fuerte: rgba(255, 255, 255, .88); --vidrio-borde: rgba(255, 255, 255, .75); --vidrio-oscuro: rgba(12, 32, 26, .38); /* Profundidad: sombra verde, no gris — se siente cálida, no sucia */ --sombra-1: 0 2px 8px rgba(16, 54, 41, .05); --sombra-2: 0 12px 30px rgba(16, 54, 41, .10); --sombra-3: 0 28px 70px rgba(16, 54, 41, .16); --brillo: 0 10px 30px rgba(47, 143, 104, .35); --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 34px; font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, "Segoe UI", sans-serif; background: #f7fbf8; letter-spacing: -.011em; } /* ---------- Fondo ambiental (fijo, no se mueve al bajar) ---------- */ .lux-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 620px at 88% -6%, rgba(255, 217, 163, .55), transparent 62%), radial-gradient(760px 560px at 6% -4%, rgba(207, 233, 255, .60), transparent 60%), radial-gradient(1100px 700px at 50% 108%, rgba(185, 236, 208, .55), transparent 62%), #f7fbf8; } /* Grano finísimo: le quita el aspecto de "degradado de plantilla" */ .lux-bg::after { content: ""; position: absolute; inset: 0; opacity: .35; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"); } /* ---------- Tipografía ---------- */ .lux h1, .lux h2, .lux h3 { letter-spacing: -.03em; font-weight: 800; } .lux .section-head { margin: 46px 0 18px; } .lux .section-head h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.05; } .lux .section-head p { font-size: 16px; max-width: 58ch; } /* Antetítulo: la palabra chiquita en verde que ordena la lectura */ .lux .eyebrow { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); } /* ---------- Barra superior: pastilla de vidrio flotando ---------- */ .lux .topbar { width: min(1180px, calc(100% - 32px)); margin: 14px auto 0; top: 14px; padding: 10px 12px 10px 16px; border: 1px solid var(--vidrio-borde); border-radius: 999px; background: var(--vidrio); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sombra-2); } .lux .brand { font-size: 17px; letter-spacing: -.02em; } .lux .brand-mark { border-radius: 12px; box-shadow: var(--brillo); background: linear-gradient(145deg, var(--green-2), var(--green-dark)); } /* ---------- Botones ---------- */ .lux .btn { border-radius: 999px; padding: 13px 22px; letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; background: linear-gradient(145deg, var(--green-2), var(--green)); box-shadow: var(--brillo); } .lux .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(47, 143, 104, .45); } .lux .btn.wa { background: linear-gradient(145deg, #35c06e, #1f9e57); box-shadow: 0 10px 30px rgba(37, 174, 96, .38); } .lux .btn.ghost { background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-1); backdrop-filter: blur(12px); } .lux .btn.ghost:hover { background: #fff; } /* ---------- HÉROE ---------- */ /* La foto del terreno deja de ser "una imagen al lado" y pasa a ser el fondo: es lo primero que dice de qué se trata la app. */ .lux .hero { position: relative; overflow: hidden; margin-top: 22px; min-height: min(78vh, 660px); border-radius: var(--r-xl); padding: clamp(26px, 5vw, 64px); display: flex; align-items: flex-end; box-shadow: var(--sombra-3); /* Si el agente todavía no sube fotos, el héroe NO se ve roto: se ve verde. */ background: linear-gradient(150deg, #1f6b4e, #2f8f68 55%, #6fd7a6); isolation: isolate; } .lux .hero-photo { position: absolute; inset: 0; min-height: 0; margin: 0; border: 0; border-radius: 0; background: transparent; z-index: -1; } /* Realce parejo de TODA foto de terreno. Las fotos de celular salen planas y apagadas; un poco de saturación y contraste las levanta sin que se noten retocadas, y sin costo: es el GPU del que mira, no un servicio que se paga. */ .lux .hero-photo img, .lux .lot-image img, .lux .gallery-main img { filter: saturate(1.08) contrast(1.04) brightness(1.02); } .lux .hero-photo img { width: 100%; height: 100%; object-fit: cover; animation: luz-acercar 26s ease-in-out infinite alternate; } @keyframes luz-acercar { from { transform: scale(1.02); } to { transform: scale(1.11); } } @media (prefers-reduced-motion: reduce) { .lux .hero-photo img { animation: none; } } /* Cuando el agente no tiene fotos no se pone el letrero "Sin foto": se queda el degradado verde, que sí se ve intencional. */ .lux .hero-photo .center-screen { display: none; } /* Velo: sin esto el texto blanco se pierde sobre una foto clara. Va en z-index 0 (encima de la foto, que está en -1) y el texto en 1. */ .lux .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 30, 23, .50) 0%, rgba(8, 30, 23, .10) 34%, rgba(8, 30, 23, .78) 100%), linear-gradient(90deg, rgba(8, 30, 23, .45) 0%, transparent 55%); } /* El texto ya no vive en una tarjeta blanca: va suelto sobre la foto. */ .lux .hero-copy { position: relative; z-index: 1; max-width: 42ch; gap: 18px; padding: 0; background: transparent; border: 0; box-shadow: none; align-items: flex-start; /* si no, la pastilla de la zona se estira de lado a lado */ } .lux .hero-copy h1 { color: #fff; font-size: clamp(38px, 6.2vw, 74px); line-height: .98; letter-spacing: -.035em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); } .lux .hero-copy p { color: rgba(255, 255, 255, .92); font-size: clamp(16px, 1.5vw, 19px); } .lux .hero-copy .pill.green { color: #fff; background: var(--vidrio-oscuro); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(14px); padding: 8px 14px; } .lux .hero-copy .btn.wa { background: rgba(255, 255, 255, .95); color: var(--green-dark); box-shadow: 0 12px 34px rgba(0, 0, 0, .28); } .lux .hero-copy .btn.wa:hover { background: #fff; } /* El precio flota como tarjeta de vidrio, arriba a la derecha */ .lux .hero > .price-tag { position: absolute; z-index: 2; text-align: right; right: clamp(18px, 3vw, 34px); top: clamp(18px, 3vw, 34px); padding: 14px 20px; border-radius: var(--r-md); color: var(--ink); background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: var(--sombra-2); } .lux .hero > .price-tag strong { display: block; font-size: 26px; line-height: 1.1; color: var(--green); letter-spacing: -.03em; } .lux .hero > .price-tag span { font-size: 11px; font-weight: 900; text-transform: uppercase; color: var(--muted); letter-spacing: .1em; } /* ---------- Cifras: vidrio montado sobre el borde del héroe ---------- */ .lux .hero-stats { position: relative; z-index: 2; gap: 14px; width: min(100%, 1060px); margin: -52px auto 0; } .lux .hero-stats .stat { padding: 20px 22px; border: 1px solid var(--vidrio-borde); border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sombra-2); } .lux .hero-stats .stat strong { font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.03em; } .lux .hero-stats .stat span { font-weight: 600; } /* La barra flotante tapa el título al saltar con "Ver terrenos": se le deja aire. */ .lux [id] { scroll-margin-top: 96px; } /* ---------- Filtros ---------- */ .lux .filtros { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; } .lux .filtros::-webkit-scrollbar { display: none; } .lux .filtro { flex: 0 0 auto; cursor: pointer; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); box-shadow: var(--sombra-1); transition: transform .16s ease, box-shadow .16s ease; } .lux .filtro:hover { transform: translateY(-1px); } .lux .filtro.on { color: #fff; border-color: transparent; background: linear-gradient(145deg, var(--green-2), var(--green)); box-shadow: var(--brillo); } /* ---------- Tarjetas de terreno: la foto manda ---------- */ .lux .catalog { gap: 20px; } .lux .lot-card { border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(18px); box-shadow: var(--sombra-2); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; } .lux .lot-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-3); } .lux .lot-image { height: 232px; overflow: hidden; } .lux .lot-image img { transition: transform .5s ease; } .lux .lot-card:hover .lot-image img { transform: scale(1.07); } /* Degradado al pie de la foto para que la insignia y el texto no floten sueltos */ .lux .lot-image::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(8, 30, 23, .35)); } .lux .lot-image .badge { z-index: 2; padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--green-dark); background: rgba(255, 255, 255, .92); border: 0; backdrop-filter: blur(10px); box-shadow: var(--sombra-1); } .lux .lot-body { padding: 20px; } .lux .lot-title h3 { font-size: 20px; letter-spacing: -.025em; } .lux .lot-title .price { font-size: 19px; letter-spacing: -.03em; } .lux .lot-meta { gap: 8px; } .lux .lot-meta .pill { border: 0; background: var(--soft); color: var(--muted); font-weight: 700; padding: 7px 12px; } .lux .lot-meta .pill.green { color: var(--green); background: rgba(111, 215, 166, .22); } .lux .lot-feats span { border-radius: 999px; padding: 5px 11px; } .lux .lot-actions { gap: 10px; } .lux .lot-actions .btn { padding: 12px 18px; font-size: 15px; } /* Aparecer al bajar: le da ritmo al scroll sin distraer */ @media (prefers-reduced-motion: no-preference) { .lux .revelar { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); } .lux .revelar.visible { opacity: 1; transform: none; } } /* ---------- Tarjetas y formularios ---------- */ .lux .card { border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(18px); box-shadow: var(--sombra-2); padding: 22px; } .lux .field input, .lux .field select, .lux .field textarea { border-radius: var(--r-sm); background: rgba(255, 255, 255, .8); border-color: rgba(217, 225, 220, .9); } .lux .interest { border-radius: var(--r-md); background: rgba(255, 255, 255, .6); transition: transform .16s ease; } .lux .interest:hover { transform: translateY(-2px); } .lux .interest.active { background: rgba(111, 215, 166, .18); border-color: var(--green-2); box-shadow: 0 8px 22px rgba(47, 143, 104, .18); } .lux .agent-card { border-radius: var(--r-lg); background: var(--vidrio-fuerte); border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--sombra-2); } .lux .agent-avatar { border-radius: 14px; box-shadow: var(--brillo); } .lux .msg-preview { border-radius: var(--r-md); background: rgba(255, 255, 255, .7); } /* ---------- Ventanas ---------- */ .lux .modal { background: rgba(8, 30, 23, .5); backdrop-filter: blur(10px); } .lux .modal-box { border-radius: var(--r-xl); box-shadow: var(--sombra-3); } .lux .modal-head { border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--vidrio-fuerte); backdrop-filter: blur(20px); } .lux .gallery-main { border-radius: var(--r-lg); } .lux .pay-result { border-radius: var(--r-lg); background: linear-gradient(150deg, var(--green-dark), var(--green) 55%, var(--green-2)); box-shadow: var(--brillo); } .lux .nudge { border-radius: var(--r-lg); background: var(--vidrio-fuerte); backdrop-filter: blur(20px); box-shadow: var(--sombra-3); } /* ---------- Barra fija del celular ---------- En el teléfono el botón de WhatsApp no puede depender de que el comprador regrese hasta arriba. */ .lux .barra-movil { display: none; } @media (max-width: 760px) { .lux .barra-movil { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; gap: 10px; padding: 10px; border-radius: 999px; background: var(--vidrio-fuerte); border: 1px solid var(--vidrio-borde); backdrop-filter: blur(20px) saturate(150%); box-shadow: var(--sombra-3); } .lux .barra-movil .btn { flex: 1; padding: 12px 14px; font-size: 15px; } .lux main { padding-bottom: 96px !important; } .lux .hero { min-height: 74vh; border-radius: var(--r-lg); } .lux .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: -30px; } .lux .topbar { top: 10px; margin-top: 10px; } .lux .lot-image { height: 200px; } /* Arriba ya no va otro botón de WhatsApp: abajo hay uno fijo y la marca necesita el ancho para no partirse en dos renglones. */ .lux .topbar #wa-top { display: none; } .lux .brand { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux .hero > .price-tag { padding: 10px 14px; } .lux .hero > .price-tag strong { font-size: 20px; } }