/* ========================================================================== FICA — Sitio público del tenant CSS plano, sin build, cargado como archivo estático (rápido, cacheable). Los colores de marca del tenant se sobrescriben inline en el de cada página vía variables CSS (ver layouts/public.blade.php). ========================================================================== */ :root { --brand-primary: #155c9e; --brand-primary-dark: #0f4577; --brand-secondary: #6c757d; --ink: #1a2332; --text: #45505c; --muted: #6b7684; --bg: #ffffff; --bg-soft: #f6f8fb; --border: #e6e9ee; --radius: 12px; --whatsapp: #25d366; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); line-height: 1.6; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .container { max-width: 1120px; margin: 0 auto; padding: 0 20px; } h1, h2, h3 { color: var(--ink); margin: 0 0 12px; font-weight: 700; line-height: 1.2; } h1 { font-size: 36px; } h2 { font-size: 26px; } h3 { font-size: 18px; } .lead { font-size: 17px; color: var(--muted); } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; } .btn-primary { background: var(--brand-primary); color: #fff; } .btn-primary:hover { background: var(--brand-primary-dark); } .btn-outline { border-color: var(--border); color: var(--ink); } .btn-whatsapp { background: var(--whatsapp); color: #fff; } .btn-whatsapp:hover { filter: brightness(0.95); } .btn-block { width: 100%; justify-content: center; } /* ---- Navbar ---- */ .navbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--border); } .navbar-brand img { height: 40px; } .navbar-brand-text { font-size: 20px; font-weight: 700; color: var(--ink); } .navbar-links { display: flex; gap: 24px; font-size: 14px; } .navbar-links a:hover { color: var(--brand-primary); } /* ---- Hero de asesor ---- */ .agent-hero { background: var(--bg-soft); padding: 56px 0; } .agent-hero-inner { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; } .agent-avatar { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); flex-shrink: 0; } .agent-avatar-fallback { width: 140px; height: 140px; border-radius: 50%; background: var(--brand-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700; flex-shrink: 0; } .agent-headline { font-size: 15px; color: var(--brand-primary); font-weight: 600; margin-bottom: 4px; } .agent-bio { max-width: 560px; color: var(--text); } .agent-social { display: flex; gap: 10px; margin-top: 14px; } .social-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--ink); } .social-icon:hover { border-color: var(--brand-primary); color: var(--brand-primary); } /* ---- Grid de propiedades ---- */ .section { padding: 56px 0; } .section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; } .properties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .property-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; transition: box-shadow .15s; } .property-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); } .property-card-photo { aspect-ratio: 4/3; background: var(--bg-soft); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; position: relative; overflow: hidden; } .property-card-photo img { width: 100%; height: 100%; object-fit: cover; } .property-badge { position: absolute; top: 10px; left: 10px; background: var(--brand-primary); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .property-card-body { padding: 16px; } .property-card-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; } .property-card-location { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .property-card-price { font-size: 18px; font-weight: 700; color: var(--brand-primary); } .property-card-meta { display: flex; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--muted); } /* ---- Footer ---- */ footer { border-top: 1px solid var(--border); padding: 32px 0; text-align: center; font-size: 13px; color: var(--muted); } /* ---- WhatsApp flotante (posición fija, es un sitio real, no un widget de chat) ---- */ .whatsapp-float { position: fixed; bottom: 24px; right: 24px; width: 56px; height: 56px; border-radius: 50%; background: var(--whatsapp); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 14px rgba(0,0,0,0.2); z-index: 100; } .whatsapp-float:hover { filter: brightness(0.95); } @media (max-width: 640px) { h1 { font-size: 28px; } .agent-hero-inner { flex-direction: column; text-align: center; } .agent-social { justify-content: center; } } /* ---- Filtros de listado ---- */ .filters-bar { background: var(--bg-soft); border-radius: var(--radius); padding: 18px; margin-bottom: 28px; } .filters-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .filters-form select, .filters-form input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; background: #fff; color: var(--text); } .filters-form .filters-submit { grid-column: 1 / -1; display: flex; justify-content: flex-end; } /* ---- Paginación ---- */ .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; } .pagination a, .pagination span { padding: 8px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; color: var(--text); } .pagination a:hover { border-color: var(--brand-primary); color: var(--brand-primary); } .pagination .active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } /* ---- Ficha de detalle ---- */ .breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; } .breadcrumbs a:hover { color: var(--brand-primary); } .gallery-main { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--bg-soft); margin-bottom: 10px; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .gallery-thumbs img { width: 84px; height: 64px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; flex-shrink: 0; } .gallery-thumbs img.active { border-color: var(--brand-primary); } .detail-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; } .detail-price { font-size: 30px; font-weight: 700; color: var(--brand-primary); margin: 6px 0 18px; } .detail-meta-row { display: flex; gap: 20px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 20px; } .detail-meta-item { font-size: 14px; } .detail-meta-item strong { display: block; font-size: 17px; color: var(--ink); } .amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 16px; } .amenity-item { font-size: 14px; padding: 6px 0; display: flex; align-items: center; gap: 8px; } .amenity-item:before { content: "✓"; color: var(--brand-primary); font-weight: 700; } .contact-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: sticky; top: 20px; } .contact-card .agent-avatar, .contact-card .agent-avatar-fallback { width: 64px; height: 64px; font-size: 24px; margin-bottom: 12px; } .map-link { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--brand-primary); margin-top: 10px; } @media (max-width: 860px) { .detail-layout { grid-template-columns: 1fr; } .contact-card { position: static; } } /* ---- Formulario de consulta/leads ---- */ .lead-form-box { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-top: 20px; } .lead-form { display: flex; flex-direction: column; gap: 10px; } .lead-form input, .lead-form textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); resize: vertical; } .alert-success { background: #eafaf1; color: #1a7f4e; padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; } .alert-error { background: #fdecea; color: #b3261e; padding: 10px 14px; border-radius: 8px; font-size: 14px; margin-bottom: 12px; } /* ---- Página de contacto general ---- */ .contact-page-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 720px) { .contact-page-layout { grid-template-columns: 1fr; } }