/* La fuente Google Sans Flex se pide desde el de cada página (con preconnect), no con @import
acá: así se descarga en paralelo con este CSS en vez de después. */
/* Íconos: Font Awesome carga sin bloquear la página (ver ). Hasta que llega, cada ícono
reserva su lugar para que el texto no salte cuando aparece. */
html:not(.fa-ready) :is(.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands) {
display: inline-block;
width: 1em;
}
:root {
--primary-color: #ff7300;
--primary-hover: #e96100;
--primary-orange: #ff7300;
--secondary-color: #111111;
--text-color: #333333;
--light-gray: #f5f3f0;
--border-color: #e8e4df;
--white: #ffffff;
--shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
--shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.08);
--transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
--font-heading: 'Google Sans Flex', 'Google Sans', Roboto, sans-serif;
--font-body: 'Google Sans Flex', 'Google Sans', Roboto, sans-serif;
--header-h: 137px; /* alto real del header (main.js lo re-mide); si no coincide, el hero salta al cargar */
}
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-body);
line-height: 1.6;
color: var(--text-color);
background-color: #ffffff;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Footer "pegado" al fondo: mientras el contenido async (Firebase) todavía está
cargando, evita que se vea arriba de todo como si la página estuviera rota. */
#footer-placeholder {
margin-top: auto;
}
/* Reserva espacio mientras el contenido async (Firebase) todavía está cargando,
para que el footer no "salte" hacia arriba y la página parezca rota un instante. */
main {
min-height: 70vh;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 40px;
}
/* ── Header ──────────────────────────────────────────────────── */
header {
background: #ffffff;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: var(--transition);
}
header.scrolled {
background: #ffffff;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}
/* Top utility bar */
.header-topbar {
background: #050505;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
height: 36px;
overflow: hidden;
transition: height 0.3s ease, opacity 0.3s ease;
}
header.scrolled .header-topbar {
height: 0;
opacity: 0;
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 36px;
}
.topbar-contact {
display: flex;
align-items: center;
gap: 28px;
}
.topbar-contact a,
.topbar-contact span {
display: inline-flex;
align-items: center;
gap: 6px;
color: #ffffff;
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
transition: color 0.2s;
white-space: nowrap;
}
.topbar-contact a:hover {
color: rgba(255, 255, 255, 0.7);
}
.topbar-contact i {
color: var(--primary-color);
font-size: 0.68rem;
}
/* El sobre y el logo de WhatsApp son glyphs más finos/con más espacio vacío
que el pin; se agrandan un poco para que los tres se vean con un peso
visual parejo. */
.topbar-contact .fa-envelope {
font-size: 0.8rem;
}
.topbar-contact .fa-whatsapp {
font-size: 0.85rem;
-webkit-text-stroke: 0.4px currentColor;
text-stroke: 0.4px currentColor;
}
/* WhatsApp CTA button in main nav */
.header-wa-btn {
display: inline-flex;
align-items: center;
gap: 7px;
background: #25d366;
color: #fff;
text-decoration: none;
padding: 8px 18px;
border-radius: 8px;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: 16px;
transition: background 0.2s;
white-space: nowrap;
flex-shrink: 0;
}
.header-wa-btn:hover {
background: #1ebe5d;
}
/* ── Header grid: logo y nav en la misma grilla que el filtro ── */
.header-grid {
display: grid;
grid-template-columns: auto 1fr; /* col-1: logo (auto), col-2: nav (rest) */
grid-template-rows: auto auto; /* row-1: nav, row-2: filtro */
}
.logo-container {
grid-column: 1;
grid-row: 1;
display: flex;
align-items: center;
padding: 18px 0;
transition: var(--transition);
}
.header-nav-area {
grid-column: 2;
grid-row: 1;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 18px 0;
transition: var(--transition);
}
header.scrolled .logo-container,
header.scrolled .header-nav-area {
padding: 14px 0;
}
.logo {
height: 56px;
transition: var(--transition);
}
header.scrolled .logo {
height: 50px;
}
nav {
display: flex;
align-items: center;
gap: 2px;
}
nav a {
text-decoration: none;
color: #1a1a1a;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: -0.3px;
transition: var(--transition);
position: relative;
padding: 8px 16px;
border-radius: 6px;
}
header.scrolled nav a {
color: #1a1a1a;
}
nav a:hover {
color: #1a1a1a !important;
background: rgba(0, 0, 0, 0.05);
}
nav a.active {
color: #1a1a1a !important;
}
nav a.active::before {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 18px;
height: 2px;
background-color: var(--primary-color);
border-radius: 2px;
}
.nav-close-btn {
display: none;
}
/* Mobile Menu Toggle */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: #1a1a1a;
font-size: 1.4rem;
cursor: pointer;
transition: var(--transition);
padding: 8px;
border-radius: 8px;
}
.mobile-menu-btn:hover {
background: rgba(0, 0, 0, 0.06);
}
header.scrolled .mobile-menu-btn {
color: #1a1a1a;
}
/* El menú mobile abierto pone fondo oscuro (#111) vía JS; los links
necesitan texto claro ahí, no el #1a1a1a pensado para fondo blanco. */
#nav-menu.active a {
color: #fff;
}
#nav-menu.active a:hover,
#nav-menu.active a.active {
color: var(--primary-color) !important;
background: transparent;
}
/* ── Header filter bar ─────────────────────────────────────── */
.header-filter-bar {
width: 100%;
background: #f5f3f0;
border-top: 1px solid #e8e4df;
padding: 12px 0;
}
.header-filter-bar::before {
content: none;
}
.header-filter-bar.collapsed {
padding: 0;
border-top: none;
}
.header-filter-bar.collapsed .search-content {
display: none;
}
.header-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: none;
border-radius: 8px;
background: transparent;
color: #1a1a1a;
font-size: 1.1rem;
cursor: pointer;
transition: var(--transition);
}
.header-search-toggle:hover,
.header-search-toggle.active {
background: rgba(0, 0, 0, 0.06);
color: var(--primary-color);
}
/* ── Pill flotante ── */
.header-filter-bar .search-content {
background: #ffffff;
border: 1.5px solid #e8e4df;
border-radius: 50px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
padding: 5px 5px 5px 6px;
gap: 0;
display: flex;
align-items: stretch;
height: 58px;
width: 100%;
overflow: visible;
}
/* ── Toggle Venta / Alquiler ── */
.header-filter-bar .radio-group-2 input[type="radio"],
.filters-sidebar .radio-group-2 input[type="radio"] {
display: none;
}
.header-filter-bar .radio-group-2,
.filters-sidebar .radio-group-2 {
flex-shrink: 0;
display: flex;
align-items: center;
height: 100%;
padding: 3px;
gap: 0;
background: #f2f2f2;
border: none;
border-radius: 50px;
min-width: 148px;
}
.header-filter-bar .radio-group-2 label,
.filters-sidebar .radio-group-2 label {
flex: 1;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
color: #555;
border-radius: 50px;
cursor: pointer;
transition: var(--transition);
padding: 0 16px;
white-space: nowrap;
}
.header-filter-bar .radio-group-2 input[type="radio"]:checked + label,
.filters-sidebar .radio-group-2 input[type="radio"]:checked + label {
background-color: var(--primary-color);
color: #fff;
font-weight: 700;
}
.filters-sidebar .radio-group-2 {
width: 100%;
min-width: 0;
height: 42px;
}
/* ── Select tipo de propiedad ── */
.header-filter-bar .select-group {
flex: 0 0 260px;
height: 100%;
display: flex;
align-items: center;
border-left: 1px solid #e5e5e5;
}
.header-filter-bar .select-group select {
width: 100%;
height: 100%;
padding: 0 32px 0 18px;
background-color: transparent;
color: #333;
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 500;
border: none;
border-radius: 0;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
box-shadow: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23888888' d='M6 8.825L1.175 4 2.575 2.6 6 6.025 9.425 2.6 10.825 4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.header-filter-bar .select-group select:focus {
outline: none;
box-shadow: none;
}
/* ── Custom select dropdown ── */
.custom-select {
position: relative;
width: 100%;
height: 100%;
}
.custom-select-trigger {
width: 100%;
height: 100%;
padding: 0 12px 0 18px;
background: transparent;
border: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
cursor: pointer;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 500;
color: #333;
text-align: left;
outline: none;
transition: color 0.2s;
white-space: nowrap;
}
.custom-select-trigger i {
font-size: 0.7rem;
color: #6b6b6b;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.custom-select.open .custom-select-trigger {
color: var(--primary-color);
}
.custom-select.open .custom-select-trigger i {
transform: rotate(180deg);
}
.custom-select-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #fff;
border: 1px solid #e8e4df;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
z-index: 2000;
list-style: none;
margin: 0;
padding: 4px 0;
max-height: 260px;
overflow-y: auto;
}
.custom-select.open .custom-select-dropdown {
display: block;
}
.custom-select-option {
padding: 10px 14px;
font-family: var(--font-body);
font-size: 0.87rem;
color: #333;
cursor: pointer;
transition: background 0.12s;
list-style: none;
}
.custom-select-option:hover {
background: #f5f5f5;
color: #111;
}
.custom-select-option.selected {
background: #111;
color: #fff;
font-weight: 600;
}
/* ── Input de búsqueda + botón ── */
.header-filter-bar .input-search {
flex: 1;
min-width: 0;
position: relative;
height: 100%;
display: flex;
align-items: center;
border-left: 1px solid #e5e5e5;
}
.header-filter-bar .input-search input {
width: 100%;
height: 100%;
padding: 0 18px 0 18px;
background-color: transparent;
color: #333;
font-family: var(--font-body);
font-size: 0.92rem;
font-weight: 400;
border: none;
border-radius: 0;
box-sizing: border-box;
outline: none;
}
.header-filter-bar .input-search input::placeholder {
color: #aaa;
font-weight: 400;
}
/* Botón lupa: círculo naranja al final del pill */
.header-filter-bar .search_propiedades {
flex-shrink: 0;
align-self: center;
width: 48px;
height: 48px;
border-radius: 50%;
font-size: 1rem;
margin-right: 4px;
background: var(--primary-color);
color: #fff;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.header-filter-bar .search_propiedades:hover {
background: var(--primary-hover);
}
/* Hero Video Container */
.container-video-hero {
position: relative;
width: 100%;
min-height: clamp(640px, 82vh, 900px);
overflow: hidden;
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: calc(var(--header-h) + 70px) 0 130px;
}
.container-video-hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 32%),
linear-gradient(
to right,
rgba(0,0,0,0.72) 0%,
rgba(0,0,0,0.52) 45%,
rgba(0,0,0,0.2) 75%,
rgba(0,0,0,0.05) 100%
);
z-index: 1;
}
#desktop-video {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: 0;
}
/* Hero overlay content — left-aligned */
.hero-overlay-content {
position: relative;
z-index: 10;
width: 100%;
max-width: 1300px;
padding: 0 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
margin-top: 0;
}
.hero-inner {
max-width: 860px;
}
/* Eyebrow */
.hero-eyebrow {
display: inline-block;
color: var(--primary-color);
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 28px;
padding-left: 14px;
border-left: 2px solid var(--primary-color);
line-height: 1.4;
}
.hero-overlay-content h1 {
font-family: var(--font-heading);
color: var(--white);
font-size: 3.8rem;
font-weight: 800;
letter-spacing: -1.5px;
margin-bottom: 26px;
line-height: 1.1;
text-shadow: 0 4px 30px rgba(0,0,0,0.35);
}
.hero-subtitle {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 400;
line-height: 1.65;
margin-bottom: 44px;
max-width: 560px;
}
/* CTA buttons */
.hero-actions {
display: flex;
gap: 16px;
margin-bottom: 48px;
flex-wrap: wrap;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--primary-color);
color: #fff;
text-decoration: none;
padding: 13px 26px;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition);
}
.hero-btn-primary:hover {
background: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(255, 115, 0,0.4);
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1.5px solid var(--primary-color);
color: #fff;
text-decoration: none;
padding: 13px 26px;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition);
}
.hero-btn-secondary:hover {
border-color: rgba(255, 255, 255, 0.75);
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
/* Stats con íconos */
.hero-stats {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
background: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1.5px solid rgba(255, 115, 0, 0.5);
border-radius: 14px;
padding: 28px 48px;
margin-top: 64px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 115, 0, 0.08);
}
.hero-stat {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
}
.hero-stat-svg {
width: 2.4rem;
height: 2.4rem;
color: var(--primary-color);
flex-shrink: 0;
}
.hero-stat-text {
display: flex;
flex-direction: column;
}
.hero-stat-text strong {
font-family: var(--font-heading);
font-size: 1.6rem;
font-weight: 900;
color: #fff;
line-height: 1.1;
white-space: nowrap;
}
.hero-stat-text > span {
font-size: 0.75rem;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-top: 3px;
white-space: nowrap;
}
.hero-stat-sep {
width: 1px;
height: 44px;
background: rgba(255, 255, 255, 0.2);
flex-shrink: 0;
}
.arrow-hero {
position: absolute;
bottom: 36px;
z-index: 10;
animation: bounce 2s infinite;
}
.arrow-hero a {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 2px solid var(--primary-color);
border-radius: 50%;
color: var(--primary-color);
font-size: 1rem;
text-decoration: none;
transition: var(--transition);
backdrop-filter: blur(4px);
background: rgba(255, 115, 0, 0.12);
}
.arrow-hero a:hover {
background: rgba(255, 115, 0, 0.28);
}
/* Category grid highlights */
#destacado {
padding: 80px 0;
background-color: var(--light-gray);
}
.destacado-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: stretch;
}
.destacado-grid > * {
opacity: 0;
transform: translateY(28px);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, opacity 0.6s ease;
}
.destacado-grid > *.in-view {
opacity: 1;
transform: translateY(0);
}
/* ── Hoteles: imagen con contenido siempre visible, sin hover-to-reveal ── */
.destacado-hoteles {
position: relative;
display: flex;
align-items: flex-end;
min-height: 340px;
border-radius: 20px;
overflow: hidden;
background-image: url('../assets/Home/Umen-Home-Cat Hoteles.jpg');
background-size: cover;
background-position: center;
border: 2px solid var(--primary-color);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
text-decoration: none;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
}
.destacado-hoteles:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}
.destacado-hoteles::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%);
}
.cat-hoteles-badge {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
background: var(--primary-color);
color: #fff;
font-family: var(--font-heading);
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 6px 12px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.destacado-hoteles-content {
position: relative;
z-index: 1;
padding: 32px;
color: var(--white);
}
.destacado-hoteles-content h3 {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
letter-spacing: -0.5px;
margin-bottom: 10px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.destacado-hoteles-content p {
font-size: 0.9rem;
color: rgba(255,255,255,0.78);
max-width: 320px;
line-height: 1.5;
margin-bottom: 18px;
}
.destacado-hoteles-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-size: 0.82rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary-color);
}
.destacado-hoteles-cta i {
transition: transform 0.2s ease;
}
.destacado-hoteles:hover .destacado-hoteles-cta i {
transform: translateX(4px);
}
/* ── Más Propiedades: card clara, subcategorías como pills siempre visibles ── */
.destacado-mas {
background: var(--white);
border: 2px solid var(--primary-color);
border-radius: 20px;
padding: 40px;
display: flex;
flex-direction: column;
}
.destacado-mas h3 {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 800;
color: var(--secondary-color);
letter-spacing: -0.5px;
margin-bottom: 10px;
}
.destacado-mas p {
font-size: 0.9rem;
color: #666;
line-height: 1.6;
margin-bottom: 24px;
}
.destacado-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 28px;
}
.destacado-pill {
display: inline-flex;
align-items: center;
background: var(--light-gray);
border: 1.5px solid var(--border-color);
color: var(--secondary-color);
padding: 9px 18px;
border-radius: 30px;
font-family: var(--font-body);
font-size: 0.88rem;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
}
.destacado-pill:hover {
border-color: var(--primary-color);
background: var(--primary-color);
color: var(--white);
}
.destacado-mas-btn {
display: inline-block;
margin-top: auto;
align-self: flex-start;
padding: 14px 28px;
border: 2px solid var(--primary-color);
color: var(--primary-color);
text-decoration: none;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 8px;
transition: var(--transition);
}
.destacado-mas-btn:hover {
background: var(--primary-color);
color: var(--white);
}
@media (max-width: 768px) {
.destacado-grid {
grid-template-columns: 1fr;
}
.destacado-hoteles {
min-height: 260px;
}
.destacado-mas {
padding: 28px;
}
}
/* ── Servicios ──────────────────────────────────────────────── */
#servicios {
padding: 90px 0;
background: #fff;
border-top: 1px solid var(--border-color);
}
.servicios-header {
text-align: left;
max-width: 680px;
margin: 0 0 56px;
}
.servicios-eyebrow {
display: inline-block;
color: var(--primary-color);
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 16px;
padding-left: 14px;
border-left: 2px solid var(--primary-color);
line-height: 1.4;
}
.servicios-header h2 {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
color: var(--secondary-color);
line-height: 1.35;
letter-spacing: -0.5px;
margin-bottom: 20px;
}
.servicios-header h2 strong {
color: var(--primary-color);
}
.servicios-header p {
font-size: 0.98rem;
color: var(--text-color);
line-height: 1.75;
}
.section-subtitle {
font-size: 0.98rem;
color: var(--text-color);
line-height: 1.75;
margin: 0 0 24px;
max-width: 560px;
}
.servicios-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.servicio-item {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
min-height: 240px;
padding: 32px 28px;
background: linear-gradient(160deg, #ffffff 0%, #fff7ee 100%);
border: 2px solid var(--primary-color);
border-radius: 20px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.servicio-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-hover);
}
.servicio-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
margin-bottom: auto;
}
.servicio-num {
font-family: var(--font-heading);
font-size: 3.2rem;
font-weight: 800;
letter-spacing: -2px;
line-height: 1;
color: rgba(255, 115, 0, 0.18);
}
.servicio-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-color);
border-radius: 14px;
color: #ffffff;
box-shadow: 0 8px 16px rgba(255, 115, 0, 0.3);
transition: var(--transition);
}
.servicio-icon svg {
width: 26px;
height: 26px;
}
.servicio-item:hover .servicio-icon {
background: var(--secondary-color);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.servicio-item p {
position: relative;
font-family: var(--font-heading);
font-size: 1.1rem;
font-weight: 700;
color: var(--secondary-color);
line-height: 1.4;
margin: 0;
}
@media (max-width: 1024px) {
.servicios-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.servicios-grid {
grid-template-columns: 1fr;
}
.servicio-item {
min-height: 0;
}
.servicio-item p {
font-size: 1.2rem;
margin-top: 24px;
}
.servicios-header {
text-align: left;
margin-left: 0;
margin-right: 0;
}
.servicios-header h2 {
font-size: 1.9rem;
}
}
/* Results section (main-layout) */
.main-layout {
padding: 80px 0;
background-color: var(--white);
border-top: 1px solid var(--border-color);
}
/* ── Layout sidebar + contenido ── */
.results-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 36px;
align-items: stretch;
}
.results-main {
min-width: 0;
}
/* ── Sidebar de filtros ── */
.filters-sidebar {
position: sticky;
top: 160px;
background: var(--white);
border: 1.5px solid var(--primary-color);
border-radius: 14px;
padding: 24px 20px;
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding-bottom: 16px;
margin-bottom: 4px;
border-bottom: 1px solid var(--border-color);
}
.sidebar-close-btn {
display: none;
margin-left: auto;
background: none;
border: none;
color: var(--secondary-color);
font-size: 1.2rem;
cursor: pointer;
flex-shrink: 0;
}
.sidebar-header h3 {
font-family: var(--font-heading);
font-size: 1rem;
font-weight: 800;
color: var(--secondary-color);
letter-spacing: -0.2px;
}
.clear-all-btn {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 600;
color: var(--primary-color);
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: opacity 0.2s;
}
.clear-all-btn:hover {
opacity: 0.7;
}
.filter-group {
padding: 16px 0;
border-bottom: 1px solid var(--border-color);
}
.filter-group:last-child {
border-bottom: none;
padding-bottom: 4px;
}
.filter-group-title {
font-family: var(--font-heading);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--secondary-color);
margin-bottom: 14px;
}
/* Botones 1 / 2 / 3 / 4+ */
.filter-number-btns {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-number-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1.5px solid var(--border-color);
background: var(--white);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: #555;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.filter-number-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.filter-number-btn.active {
border-color: var(--primary-color);
background: var(--primary-color);
color: var(--white);
}
/* Inputs precio / superficie */
.price-range-inputs {
display: flex;
align-items: center;
gap: 8px;
}
.price-range-inputs input {
flex: 1;
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.83rem;
color: #333;
outline: none;
transition: border-color 0.2s;
-moz-appearance: textfield;
}
.price-range-inputs input::-webkit-outer-spin-button,
.price-range-inputs input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.price-range-inputs input:focus {
border-color: var(--primary-color);
}
.price-range-inputs span {
color: #bbb;
font-size: 0.9rem;
flex-shrink: 0;
}
/* Dual range slider (dos superpuestos) */
.range-slider {
position: relative;
height: 20px;
margin-top: 14px;
}
.range-slider-track,
.range-slider-fill {
position: absolute;
top: 50%;
height: 4px;
border-radius: 2px;
transform: translateY(-50%);
}
.range-slider-track {
left: 0;
right: 0;
background: var(--border-color);
}
.range-slider-fill {
background: var(--primary-color);
}
.range-slider-input {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
margin: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.range-slider-input::-webkit-slider-thumb {
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--primary-color);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.range-slider-input::-moz-range-thumb {
pointer-events: auto;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--primary-color);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.range-slider-input::-webkit-slider-runnable-track,
.range-slider-input::-moz-range-track {
background: transparent;
}
/* ── Filtros nuevos: checkboxes, texto, select ─────────────────── */
.filter-check-group {
display: flex;
flex-direction: column;
gap: 10px;
}
.filter-check-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
font-weight: 600;
color: #444;
cursor: pointer;
}
.filter-check-label input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 18px;
height: 18px;
border: 1.5px solid var(--border-color);
border-radius: 4px;
flex-shrink: 0;
cursor: pointer;
position: relative;
transition: var(--transition);
}
.filter-check-label input[type="checkbox"]:checked {
background: var(--primary-color);
border-color: var(--primary-color);
}
.filter-check-label input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 6px;
height: 10px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg);
}
.filter-text-input,
.filter-select {
width: 100%;
padding: 9px 12px;
border: 1.5px solid var(--border-color);
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.85rem;
color: #333;
background: #fff;
outline: none;
transition: border-color 0.2s;
margin-bottom: 10px;
}
.filter-select:last-child {
margin-bottom: 0;
}
.filter-text-input:focus,
.filter-select:focus {
border-color: var(--primary-color);
}
.filter-text-input::placeholder {
color: #bbb;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
#results-title {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--secondary-color);
margin-bottom: 5px;
}
#results-count {
font-family: var(--font-body);
color: #666;
font-size: 0.95rem;
font-weight: 600;
}
#sort-order,
#rental-sort {
padding: 12px 20px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--white);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: #444;
outline: none;
}
/* Active filters */
.active-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 30px;
}
.filter-tag {
background: #e5e7eb;
color: #374151;
padding: 6px 14px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.filter-tag:hover {
background: #d1d5db;
}
/* Property cards list */
.property-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 30px;
}
.property-card {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
cursor: pointer;
border: 2px solid var(--primary-color);
/* Reset estilos de */
text-decoration: none;
color: inherit;
display: block;
}
.property-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(255, 115, 0, 0.2);
border-color: var(--primary-color);
}
.card-image {
height: 240px;
position: relative;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.property-card:hover .card-image img {
transform: scale(1.06);
}
.card-badge {
position: absolute;
top: 15px;
left: 15px;
background: var(--primary-color);
color: var(--white);
padding: 6px 14px;
border-radius: 6px;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-badge-alquiler {
background: #1a1a1a;
}
.card-tag-label {
display: inline-block;
background: #fff4e8;
color: var(--primary-color);
padding: 4px 10px;
border-radius: 20px;
font-family: var(--font-heading);
font-size: 0.68rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 8px;
}
.card-content {
padding: 24px;
}
.card-type-strip {
background: var(--primary-color);
color: var(--white);
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: left;
padding: 6px 24px;
margin: -24px -24px 14px -24px;
}
.card-price {
font-family: var(--font-heading);
font-size: 1.55rem;
font-weight: 800;
color: var(--secondary-color);
letter-spacing: -0.3px;
margin-bottom: 10px;
}
.card-price-period {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 500;
color: #6b6b6b;
}
.card-title {
font-family: var(--font-heading);
font-size: 1.02rem;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-color);
line-height: 1.3;
min-height: 2.6em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-code {
font-size: 0.72rem;
font-weight: 600;
color: #6b6b6b;
letter-spacing: 0.3px;
margin-top: -8px;
margin-bottom: 12px;
}
.card-excerpt {
font-size: 0.85rem;
color: #6b6b6b;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card-location {
font-size: 0.85rem;
color: #666;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 20px;
}
.card-location i,
.card-location svg {
color: var(--primary-color);
width: 14px;
height: 14px;
flex-shrink: 0;
}
.card-features {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
padding-top: 18px;
border-top: 1px solid var(--border-color);
}
.feature-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.85rem;
font-weight: 700;
color: var(--secondary-color);
}
.feature-item i,
.feature-item svg {
color: var(--primary-color);
width: 15px;
height: 15px;
flex-shrink: 0;
}
.no-results {
grid-column: 1 / -1;
text-align: center;
padding: 80px 20px;
background: var(--white);
border-radius: 12px;
border: 1px solid var(--border-color);
}
.no-results i {
font-size: 3rem;
color: #ccc;
margin-bottom: 20px;
}
.no-results p {
font-weight: 600;
color: #666;
}
/* ── Banner Hoteles ─────────────────────────────────────────── */
#hoteles-banner {
background-image: url('../assets/Home/Umen-Home-Banner-Hoteles.jpg');
background-size: cover;
background-position: center 65%;
}
.hoteles-overlay {
background: linear-gradient(to right,
rgba(0, 0, 0, 0.76) 0%,
rgba(0, 0, 0, 0.6) 55%,
rgba(0, 0, 0, 0.25) 100%);
padding: 100px 0;
}
.hoteles-content {
display: flex;
align-items: center;
}
.hoteles-body {
max-width: 580px;
}
.hoteles-eyebrow {
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 4px 14px;
border-radius: 4px;
font-family: var(--font-heading);
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
margin-bottom: 22px;
}
.hoteles-body h2 {
font-family: var(--font-heading);
font-size: 2.8rem;
font-weight: 800;
color: #fff;
line-height: 1.15;
letter-spacing: -0.5px;
margin-bottom: 18px;
}
.hoteles-desc {
font-size: 0.97rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.75;
margin-bottom: 32px;
}
.hoteles-claim {
border-left: 3px solid var(--primary-color);
padding-left: 18px;
margin-bottom: 40px;
}
.hoteles-claim p {
font-family: var(--font-heading);
color: rgba(255, 255, 255, 0.92);
margin: 0;
line-height: 1.55;
}
.hoteles-claim p:first-child {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 4px;
}
.hoteles-claim p:last-child {
font-size: 1rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.65);
}
.hoteles-actions {
display: flex;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.hoteles-cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary-color);
color: #fff;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 14px 28px;
border-radius: 8px;
text-decoration: none;
transition: var(--transition);
white-space: nowrap;
}
.hoteles-cta-btn:hover {
background: #c45e00;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(232, 113, 0, 0.4);
color: #fff;
}
.hoteles-cta-btn i {
font-size: 0.85rem;
transition: transform 0.2s ease;
}
.hoteles-cta-btn:hover i {
transform: translateX(4px);
}
.hoteles-logo-link {
display: inline-block;
transition: var(--transition);
}
.hoteles-logo-link:hover {
transform: scale(1.04);
opacity: 0.88;
}
.hoteles-logo-link img {
height: 52px;
width: auto;
display: block;
border-radius: 8px;
}
@media (max-width: 768px) {
.hoteles-body h2 {
font-size: 2rem;
}
.hoteles-overlay {
padding: 70px 0;
}
}
/* ── Alquiler Destacadas ─────────────────────────────────────── */
#alquiler-destacadas {
padding: 80px 0;
background-color: var(--white);
border-top: 1px solid var(--border-color);
}
.alquiler-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.alquiler-title {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--secondary-color);
margin-bottom: 5px;
}
.alquiler-count {
font-family: var(--font-body);
color: #666;
font-size: 0.95rem;
font-weight: 600;
}
#alquiler-destacadas .card-badge {
background: #1a1a1a;
}
/* Latest Blog Section */
#novedades.ultimas {
padding: 80px 0;
background: var(--white);
}
#novedades.ultimas h2 {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
text-align: left;
margin-bottom: 8px;
letter-spacing: -0.5px;
color: var(--secondary-color);
}
/* Unifica el tamaño de todos los títulos de sección en mobile: Cómo
trabajamos, Propiedades en venta/alquiler, Notas de Interés. */
@media (max-width: 600px) {
#results-title,
.alquiler-title,
#novedades.ultimas h2 {
font-size: 1.9rem;
}
#novedades.ultimas h2 {
text-align: left;
}
}
.items-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.hotel-nota-article {
max-width: 100%;
}
.hotel-nota-media {
position: relative;
border-radius: 16px;
overflow: hidden;
width: 100%;
height: 420px;
margin-bottom: 40px;
}
/* ── Layout nota de blog: contenido + panel lateral ── */
.blog-post-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 50px;
align-items: start;
}
.blog-post-sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
.blog-post-sidebar .contact-card {
top: 120px;
}
.blog-post-about-card {
background: var(--white);
border: 1px solid var(--border-color);
padding: 24px 28px;
border-radius: 16px;
}
.blog-post-about-card > span {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.5px;
color: var(--primary-color);
margin-bottom: 10px;
}
.blog-post-about-card p {
color: #666;
font-size: 0.9rem;
line-height: 1.6;
}
.blog-post-share-card {
background: var(--white);
border: 1px solid var(--border-color);
padding: 24px 28px;
border-radius: 16px;
}
.blog-post-share-card > span {
display: block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.85rem;
color: var(--secondary-color);
margin-bottom: 14px;
}
.blog-post-share-card .blog-post-share {
margin-top: 0;
padding-top: 0;
border-top: none;
}
@media (max-width: 900px) {
.blog-post-grid {
grid-template-columns: 1fr;
}
.blog-post-sidebar .contact-card {
position: static;
}
}
.hotel-nota-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hotel-nota-media .cat {
position: absolute;
top: 20px;
left: 20px;
background: var(--primary-color);
color: var(--white);
padding: 6px 14px;
border-radius: 6px;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hotel-nota-article h1 {
font-family: var(--font-heading);
font-size: 2.2rem;
margin-bottom: 12px;
}
.hotel-nota-excerpt {
font-size: 1.1rem;
color: #555;
margin-bottom: 24px;
}
.hotel-nota-body p {
line-height: 1.7;
color: #333;
margin-bottom: 16px;
}
/* ── Blog ──────────────────────────────────────────────────────── */
.blog-toolbar {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.blog-toolbar-search {
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
background: var(--white);
border: 1.5px solid var(--border-color);
border-radius: 10px;
padding: 0 16px;
height: 48px;
transition: var(--transition);
}
.blog-toolbar-search:focus-within {
border-color: var(--primary-color);
}
.blog-toolbar-search i {
color: #6b6b6b;
font-size: 0.9rem;
}
.blog-toolbar-search input {
flex: 1;
border: none;
outline: none;
height: 100%;
font-size: 0.95rem;
font-family: inherit;
color: var(--text-color);
}
.blog-toolbar-filters {
display: flex;
gap: 12px;
}
.blog-toolbar-filters select {
height: 48px;
padding: 0 36px 0 16px;
border: 1.5px solid var(--border-color);
border-radius: 10px;
background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 16px center;
appearance: none;
font-size: 0.9rem;
font-family: inherit;
color: var(--text-color);
cursor: pointer;
transition: var(--transition);
}
.blog-toolbar-filters select:focus {
border-color: var(--primary-color);
outline: none;
}
@media (max-width: 600px) {
.blog-toolbar {
flex-direction: column;
align-items: stretch;
}
.blog-toolbar-filters {
flex-direction: column;
}
.blog-toolbar-filters select {
width: 100%;
}
}
/* ── Sidebar del blog ── */
.blog-main .items-container {
grid-template-columns: repeat(2, 1fr);
}
.blog-sidebar-categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.blog-sidebar-cat {
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 600;
color: var(--secondary-color);
background: var(--light-gray);
border: none;
border-radius: 20px;
padding: 6px 14px;
cursor: pointer;
transition: var(--transition);
}
.blog-sidebar-cat:hover {
background: #e5e5e5;
}
.blog-sidebar-cat.active {
background: var(--primary-color);
color: #fff;
}
.blog-sidebar-recent {
display: flex;
flex-direction: column;
gap: 14px;
}
.blog-sidebar-recent-item {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
}
.blog-sidebar-recent-item img {
width: 56px;
height: 56px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
}
.blog-sidebar-recent-item span {
font-size: 0.85rem;
font-weight: 600;
line-height: 1.35;
color: var(--secondary-color);
transition: var(--transition);
}
.blog-sidebar-recent-item:hover span {
color: var(--primary-color);
}
@media (max-width: 1024px) {
.blog-main .items-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 600px) {
.blog-main .items-container {
grid-template-columns: 1fr;
}
}
.blog-breadcrumb {
margin: 0 0 24px;
color: #6b6b6b;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 8px;
}
.blog-breadcrumb a {
color: #6b6b6b;
text-decoration: none;
}
.blog-breadcrumb a:hover {
color: var(--primary-color);
}
.blog-breadcrumb i {
font-size: 0.6rem;
}
.blog-breadcrumb span {
color: var(--primary-color);
font-weight: 600;
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid #eee;
color: #666;
font-size: 0.9rem;
flex-wrap: wrap;
}
.blog-post-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--primary-color);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
font-weight: 800;
flex-shrink: 0;
}
.blog-post-meta-text {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.blog-post-meta-text strong {
color: var(--text-color);
font-size: 0.95rem;
}
.blog-post-meta-sep {
width: 4px;
height: 4px;
border-radius: 50%;
background: #ccc;
}
.blog-post-share {
display: flex;
align-items: center;
gap: 14px;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid #eee;
color: #666;
font-size: 0.9rem;
}
.blog-post-share a {
width: 38px;
height: 38px;
border-radius: 50%;
background: #f4f6f9;
color: var(--text-color);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--transition);
}
.blog-post-share a:hover {
background: var(--primary-color);
color: var(--white);
}
.blog-related-section {
margin: 60px 0 0;
padding-top: 40px;
border-top: 1px solid #eee;
}
.blog-related-section h3 {
font-family: var(--font-heading);
font-size: 1.4rem;
margin-bottom: 24px;
}
.blog-related-section .items-container {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.blog-related-section .items-container {
grid-template-columns: 1fr;
}
}
.hotels-banner {
display: flex;
align-items: center;
gap: 20px;
background: var(--primary-color);
color: var(--white);
border-radius: 16px;
padding: 20px 28px;
margin-bottom: 40px;
text-decoration: none;
transition: var(--transition);
}
.hotels-banner:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(255, 115, 0, 0.3);
}
.hotels-banner img {
height: 40px;
width: auto;
}
.hotels-banner span {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.15rem;
flex-grow: 1;
}
.items-container .item {
height: auto;
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border: 2px solid var(--primary-color);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.items-container .item::before {
content: none;
}
.items-container .item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(255, 115, 0, 0.2);
}
.items-container .item .media {
height: 240px;
overflow: hidden;
position: relative;
}
.items-container .item .media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.items-container .item:hover .media img {
transform: scale(1.06);
}
.items-container .cat {
position: absolute;
top: 15px;
left: 15px;
background: var(--primary-color);
color: var(--white);
padding: 6px 14px;
border-radius: 6px;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.item-content {
padding: 24px;
min-height: 218px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.items-container :is(h3, h4) {
font-family: var(--font-heading);
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.3px;
line-height: 1.3;
color: var(--secondary-color);
margin: 0 0 10px;
transition: var(--transition);
}
.items-container .item:hover :is(h3, h4) {
color: var(--primary-color);
}
.item-excerpt {
font-size: 0.88rem;
font-weight: 400;
color: #6b6b6b;
line-height: 1.55;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.item-more {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--border-color);
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary-color);
}
.item-more i {
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.items-container .item:hover .item-more i {
transform: translateX(4px);
}
.content-btn {
text-align: center;
margin-top: 40px;
}
.content-btn .btn {
display: inline-block;
padding: 14px 35px;
border: 2px solid var(--primary-color);
color: var(--primary-color);
text-decoration: none;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 8px;
transition: var(--transition);
}
.content-btn .btn:hover {
background: var(--primary-color);
color: var(--white);
}
/* ── Newsletter ──────────────────────────────────────────────── */
#newsletter {
background-color: var(--primary-color);
padding: 90px 0;
border-top: none;
}
.newsletter-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 60px;
}
.newsletter-copy {
flex: 1;
}
.newsletter-tag {
display: inline-block;
background: rgba(0, 0, 0, 0.2);
color: #fff;
font-family: var(--font-heading);
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 16px;
}
.newsletter-copy h2 {
font-family: var(--font-heading);
font-size: 1.9rem;
font-weight: 800;
color: #fff;
line-height: 1.2;
letter-spacing: -0.4px;
margin-bottom: 12px;
}
.newsletter-copy p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.newsletter-action {
flex: 0 0 400px;
}
.newsletter-form {
display: flex;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
margin-bottom: 10px;
}
.newsletter-form input {
flex: 1;
background: #fff;
border: none;
padding: 15px 20px;
color: #333;
outline: none;
font-family: var(--font-body);
font-size: 0.92rem;
min-width: 0;
}
.newsletter-form input::placeholder {
color: #aaa;
}
.newsletter-form .btn {
background: #111;
color: #fff;
border: none;
padding: 15px 26px;
cursor: pointer;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.2s;
}
.newsletter-form .btn:hover {
background: #333;
}
.newsletter-disclaimer {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.85);
text-align: center;
}
@media (max-width: 900px) {
.newsletter-inner {
flex-direction: column;
align-items: flex-start;
gap: 32px;
text-align: left;
}
.newsletter-action {
flex: none;
width: 100%;
max-width: 480px;
}
.newsletter-disclaimer {
text-align: left;
}
}
/* ── Footer ─────────────────────────────────────────────────── */
#footer {
background-color: #0d0f12;
}
.footer-main {
padding: 70px 0 60px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr;
gap: 60px;
align-items: start;
}
/* Col 1: Brand */
.footer-brand .footer-logo {
height: 56px;
width: auto;
margin-bottom: 20px;
display: block;
}
.footer-brand p {
font-size: 0.88rem;
color: #ffffff;
line-height: 1.7;
}
/* Col headers */
.footer-title {
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffffff;
margin-bottom: 20px;
}
/* Links list */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 13px;
}
.footer-links li a {
display: flex;
align-items: flex-start;
gap: 10px;
text-decoration: none;
color: #ffffff;
font-size: 0.88rem;
line-height: 1.5;
transition: color 0.2s;
}
.footer-links li a:hover {
color: var(--primary-color);
}
.footer-links li a i {
margin-top: 2px;
font-size: 0.85rem;
color: var(--primary-color);
flex-shrink: 0;
width: 16px;
text-align: center;
}
/* Col 3: Hoteles */
.footer-hoteles .footer-hoteles-logo {
height: 72px;
width: auto;
display: block;
margin-bottom: 16px;
border-radius: 8px;
transition: opacity 0.2s;
}
.footer-hoteles .footer-hoteles-logo:hover {
opacity: 0.8;
}
.footer-hoteles p {
font-size: 0.83rem;
color: #ffffff;
line-height: 1.65;
}
/* Bottom bar */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.07);
padding: 20px 0;
}
.footer-bottom p {
font-size: 0.82rem;
color: #ffffff;
text-align: center;
font-weight: 500;
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.footer-brand {
grid-column: auto;
}
}
/* Loader */
.loader {
grid-column: 1 / -1;
text-align: center;
padding: 50px 0;
font-weight: 600;
color: var(--primary-color);
}
/* ── Header sin barra de filtros (páginas internas) ─────────── */
.detail-header {
background: #0a0a0a !important;
}
/* ------------------- Property Detail Page ------------------- */
/* El hero (imagen + info) resuelve su propio despeje del header fijo
(ver .detail-hero); el container ya no necesita padding-top. */
.detail-container {
padding: 0 0 60px;
}
@media (max-width: 768px) {
.detail-container {
padding: 0 0 40px;
}
}
/* Cover genérico (misma imagen para todas las propiedades, no depende
de fotos propias) con la info dinámica de la propiedad encima.
Arranca en el borde superior de la página, como el resto de los
heroes del sitio, y queda tapado por el header fijo: el padding-top
es lo que el header tapa, el resto es lo que se ve debajo. */
.detail-hero {
position: relative;
width: 100vw;
margin: 0 calc(50% - 50vw) 40px;
min-height: 290px;
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 175px 0 39px;
}
.detail-hero-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.detail-hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%),
linear-gradient(0deg, rgba(255,115,0,.55) 0%, rgba(255,115,0,0) 55%);
z-index: 1;
}
.detail-hero-content {
position: relative;
z-index: 2;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 40px;
}
/* Texto claro sobre la imagen (mismos componentes que se usan en el resto
de la página, solo repintados para el fondo oscuro) */
.detail-hero .detail-breadcrumb a { color: rgba(255,255,255,.7); }
.detail-hero .detail-breadcrumb a:hover { color: var(--primary-color); }
.detail-hero .detail-breadcrumb i { color: rgba(255,255,255,.4); }
.detail-hero .detail-breadcrumb span { color: #fff; }
.detail-hero .detail-title { color: #fff; }
.detail-hero .detail-location { color: rgba(255,255,255,.85); }
.detail-hero .detail-code { color: rgba(255,255,255,.6); border-left-color: rgba(255,255,255,.3); }
.detail-hero .price-label { color: rgba(255,255,255,.7); }
@media (max-width: 768px) {
.detail-hero {
min-height: 260px;
padding: 130px 0 16px;
margin-bottom: 24px;
}
.detail-hero-overlay {
background:
linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.75) 100%),
linear-gradient(0deg, rgba(255,115,0,.8) 0%, rgba(255,115,0,0) 70%);
}
}
@media print {
.detail-hero-bg, .detail-hero-overlay { display: none; }
.detail-hero { min-height: 0; padding: 0; }
.detail-hero .detail-breadcrumb a,
.detail-hero .detail-breadcrumb span { color: initial; }
.detail-hero .detail-title { color: var(--secondary-color); }
.detail-hero .detail-location { color: #555; }
.detail-hero .detail-code { color: #999; border-left-color: #ddd; }
.detail-hero .price-label { color: #888; }
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: #666;
text-decoration: none;
margin-bottom: 30px;
font-size: 0.9rem;
font-weight: 600;
transition: var(--transition);
}
.back-link:hover {
color: var(--primary-color);
}
.header-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 35px;
}
.detail-header-badges {
display: flex;
align-items: center;
}
.detail-badge {
display: inline-block;
background: var(--primary-color);
color: var(--white);
padding: 6px 14px;
border-radius: 6px;
font-family: var(--font-heading);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.detail-badge-tag {
background: var(--secondary-color);
margin-left: 8px;
}
.detail-title {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--secondary-color);
}
.detail-location {
color: #555;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.detail-location i {
color: var(--primary-color);
}
.detail-code {
color: #6b6b6b;
font-size: 0.95rem;
font-weight: 500;
margin-left: 4px;
padding-left: 12px;
border-left: 1px solid #ddd;
}
.detail-price-value-wrap {
text-align: right;
}
.price-label {
display: block;
color: #6b6b6b;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
justify-self: end;
}
.price-value {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 900;
color: var(--primary-color);
}
.price-period {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--text-color);
}
/* Elegant details gallery */
/* Galería: foto principal (2/3) + 2 secundarias apiladas (1/3) */
.detail-gallery {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
height: 500px;
margin-bottom: 28px;
}
/* Sin fotos secundarias: imagen principal ocupa todo el ancho */
.detail-gallery.gallery-single {
grid-template-columns: 1fr;
}
.main-image-container {
grid-column: 1;
grid-row: 1 / 3;
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 12px;
border: 2px solid var(--primary-color);
}
.main-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.2s ease;
}
/* Fotos secundarias */
.gallery-secondary {
position: relative;
overflow: hidden;
cursor: pointer;
border-radius: 12px;
border: 2px solid var(--primary-color);
}
/* Una sola secundaria: ocupa toda la columna derecha */
.gallery-secondary-full {
grid-row: 1 / 3;
}
.gallery-secondary img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.gallery-secondary:hover img {
transform: scale(1.05);
}
/* Overlay "+N fotos más" sobre la última secundaria visible */
.gallery-more {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.50);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-family: var(--font-heading);
font-size: 1.9rem;
font-weight: 800;
gap: 4px;
cursor: pointer;
transition: background 0.2s;
pointer-events: none; /* el click lo maneja el .gallery-secondary */
}
.gallery-more span {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.85;
}
.gallery-secondary:hover .gallery-more {
background: rgba(0, 0, 0, 0.65);
}
/* Thumbnails (legacy / no se usa en el nuevo layout) */
.thumbnails { display: none; }
.thumb-img { display: none; }
/* Layout Grid Details */
.detail-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 50px;
}
.detail-section {
margin-bottom: 40px;
}
.detail-section h2 {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 25px;
color: var(--secondary-color);
letter-spacing: -0.3px;
position: relative;
padding-bottom: 10px;
}
.detail-section h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 3px;
background-color: var(--primary-color);
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.feature-card {
background: #fafafa;
border: 1px solid var(--border-color);
padding: 20px 15px;
border-radius: 10px;
text-align: center;
transition: var(--transition);
}
.feature-card:hover {
background: var(--white);
box-shadow: var(--shadow);
transform: translateY(-3px);
}
.feature-card i {
display: block;
font-size: 1.6rem;
color: var(--primary-color);
margin-bottom: 12px;
}
.feature-card span {
font-size: 0.85rem;
font-weight: 700;
color: var(--secondary-color);
}
.description-text {
font-size: 1.05rem;
color: #444;
line-height: 1.8;
white-space: pre-line;
}
.amenities-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.amenity-tag {
background: #f3f4f6;
padding: 8px 18px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
color: #4b5563;
display: inline-flex;
align-items: center;
gap: 8px;
}
.amenity-tag i {
color: var(--primary-color);
}
/* Contact sidebar box */
.contact-card {
background: var(--white);
border: 1px solid var(--border-color);
padding: 35px;
border-radius: 16px;
box-shadow: var(--shadow);
position: sticky;
top: 100px;
}
.contact-card h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 800;
margin-bottom: 12px;
color: var(--secondary-color);
}
.contact-card p {
color: #666;
margin-bottom: 25px;
font-size: 0.9rem;
font-weight: 500;
}
.btn-primary.full-width, .btn-secondary.full-width {
width: 100%;
margin-bottom: 12px;
padding: 14px 20px;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
transition: var(--transition);
text-decoration: none; /* también se usan como (ej. sidebar de las notas del blog) */
}
.btn-primary.full-width {
background-color: #25d366; /* WhatsApp Green */
color: var(--white);
border: none;
}
.btn-primary.full-width:hover {
background-color: #128c7e;
}
.btn-secondary.full-width {
background-color: var(--secondary-color);
color: var(--white);
border: none;
}
.btn-secondary.full-width:hover {
background-color: #333;
}
.agent-info {
display: flex;
align-items: center;
gap: 15px;
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid var(--border-color);
}
.agent-info img {
border-radius: 50%;
width: 50px;
height: 50px;
object-fit: cover;
border: 2px solid var(--border-color);
}
.agent-info strong {
display: block;
font-size: 0.95rem;
color: var(--secondary-color);
}
.agent-info span {
font-size: 0.8rem;
color: #6b6b6b;
font-weight: 600;
}
.contact-trust {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 25px;
padding-top: 25px;
border-top: 1px solid var(--border-color);
}
.contact-trust-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.85rem;
font-weight: 600;
color: #555;
}
.contact-trust-item i {
color: var(--primary-color);
font-size: 0.9rem;
width: 16px;
text-align: center;
}
/* ------------------- Admin Dashboard Forms & Layout ------------------- */
.admin-main {
padding-top: 120px;
padding-bottom: 80px;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.admin-header h1 {
font-family: var(--font-heading);
font-weight: 800;
}
.admin-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.stat-card {
background: var(--white);
border: 1px solid var(--border-color);
padding: 25px;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
}
.stat-card h3 {
font-family: var(--font-heading);
font-size: 2.2rem;
color: var(--primary-color);
margin-bottom: 5px;
font-weight: 800;
}
.stat-card p {
color: #666;
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.admin-content-card {
background: var(--white);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
}
.card-header {
padding: 25px 30px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--light-gray);
}
.search-box input {
padding: 10px 20px;
border: 1px solid var(--border-color);
border-radius: 8px;
width: 280px;
font-family: var(--font-body);
font-size: 0.9rem;
outline: none;
}
.search-box input:focus {
border-color: var(--primary-color);
}
.table-responsive {
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th, .admin-table td {
padding: 16px 30px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
.admin-table th {
background: #fbfbfb;
font-family: var(--font-heading);
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
color: #6b6b6b;
letter-spacing: 0.5px;
}
.admin-table tr:hover {
background: #fafafa;
}
.admin-table td strong {
color: var(--secondary-color);
display: block;
font-weight: 700;
}
.admin-table td span {
font-size: 0.8rem;
color: #6b6b6b;
}
.btn-sm {
padding: 8px 14px;
font-size: 0.75rem;
border-radius: 8px;
}
.action-btns {
display: flex;
gap: 12px;
}
.btn-edit {
color: #2b78e4;
background: none;
border: none;
cursor: pointer;
font-weight: 700;
transition: var(--transition);
}
.btn-edit:hover {
color: #0056b3;
}
.btn-delete {
color: #e42b2b;
background: none;
border: none;
cursor: pointer;
font-weight: 700;
transition: var(--transition);
}
.btn-delete:hover {
color: #a31c1c;
}
/* Modals */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
z-index: 2000;
backdrop-filter: blur(4px);
}
.modal-content {
background: var(--white);
width: 90%;
max-width: 700px;
max-height: 85vh;
border-radius: 12px;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(0,0,0,0.25);
display: flex;
flex-direction: column;
}
.modal-header {
padding: 20px 30px;
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: space-between;
align-items: center;
background: var(--light-gray);
}
.modal-header h2 {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.3rem;
}
.close-modal {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6b6b6b;
transition: var(--transition);
}
.close-modal:hover {
color: var(--primary-color);
}
.modal-body {
padding: 30px;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group.full-width {
grid-column: span 2;
}
.form-group label {
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 8px;
color: var(--secondary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: var(--font-body);
font-size: 0.95rem;
outline: none;
transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: var(--primary-color);
}
.form-group textarea {
height: 100px;
resize: vertical;
}
.modal-footer {
padding: 20px 30px;
border-top: 1px solid var(--border-color);
display: flex;
justify-content: flex-end;
gap: 15px;
background: var(--light-gray);
}
/* Primary buttons standard */
.btn-primary {
background-color: var(--primary-color);
color: var(--white);
border: none;
padding: 12px 24px;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 700;
cursor: pointer;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition);
}
.btn-primary:hover {
background-color: var(--primary-hover);
}
.btn-secondary {
background-color: #6b7280;
color: var(--white);
border: none;
padding: 12px 24px;
border-radius: 8px;
font-family: var(--font-heading);
font-weight: 700;
cursor: pointer;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: var(--transition);
}
.btn-secondary:hover {
background-color: #4b5563;
}
/* Premium Login Card */
.login-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 40px 20px;
background: linear-gradient(135deg, rgba(17, 17, 17, 0.7), rgba(0, 0, 0, 0.9)), url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
position: relative;
overflow: hidden;
}
.login-form-card {
max-width: 440px;
width: 100%;
padding: 50px 40px;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
color: var(--white);
position: relative;
z-index: 10;
}
.login-form-card .logo {
/* El logo tiene texto oscuro: va sobre una placa blanca */
width: 190px;
height: auto;
display: block;
margin: 0 auto 30px;
padding: 12px 18px;
background: #fff;
border-radius: 14px;
box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}
.login-form-card h2 {
font-family: var(--font-heading);
font-weight: 800;
font-size: 1.8rem;
margin-bottom: 35px;
color: var(--white);
letter-spacing: -0.5px;
}
.login-form-card .form-group {
margin-bottom: 25px;
text-align: left;
}
.login-form-card label {
font-size: 0.8rem;
font-weight: 700;
margin-bottom: 10px;
display: block;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.login-form-card input {
width: 100%;
padding: 14px 20px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
font-size: 1rem;
color: var(--white);
outline: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
.login-form-card input::placeholder {
color: rgba(255, 255, 255, 0.3);
}
.login-form-card input:focus {
border-color: var(--primary-color);
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15);
}
.login-form-card button {
width: 100%;
margin-top: 15px;
padding: 16px;
font-size: 1rem;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary-color), #ff8c00);
border: none;
box-shadow: 0 10px 20px -10px var(--primary-color);
transition: transform 0.3s ease, box-shadow 0.3s ease;
color: var(--white);
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
}
.login-form-card button:hover {
transform: translateY(-2px);
box-shadow: 0 15px 25px -10px var(--primary-color);
}
/* Animations */
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
/* ------------------- Responsive Media Queries ------------------- */
@media (max-width: 1024px) {
.results-layout {
grid-template-columns: 1fr;
}
.filters-sidebar {
position: static;
}
.filter-number-btns {
gap: 6px;
}
.grid.col3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#destacado .item:nth-child(odd):last-child {
grid-column: span 2;
}
.items-container {
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 600px) {
.items-container {
grid-template-columns: 1fr;
}
}
.detail-gallery {
height: 400px;
}
.detail-grid {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 768px) {
:root {
--header-h: 93px; /* sin la topbar, que se oculta en este ancho */
}
.container {
padding: 0 20px;
}
.hero-overlay-content {
padding: 0 20px;
}
.logo-container,
.header-nav-area {
padding: 14px 0;
}
nav {
display: none;
}
/* Menú mobile abierto: pantalla completa, links centrados. El botón
original del header queda tapado por este overlay (nav es descendiente
de header, que ya es su propio contexto de apilamiento), así que el
cierre se resuelve con un botón propio adentro del overlay en vez de
pelear con ese z-index. */
nav#nav-menu.active {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
padding: 90px 20px 40px;
background: #111;
z-index: 999;
overflow-y: auto;
}
nav#nav-menu.active a {
font-size: 1.15rem;
padding: 14px 24px;
}
nav#nav-menu.active .nav-close-btn {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
background: none;
border: none;
color: var(--primary-color);
font-size: 1.5rem;
cursor: pointer;
}
.mobile-menu-btn {
display: block;
}
/* Ocultar topbar en mobile */
.header-topbar {
display: none;
}
.header-wa-btn {
display: none;
}
.hero-overlay-content {
align-items: flex-start;
text-align: left;
margin-top: 30px;
}
.hero-inner {
max-width: 100%;
}
.hero-overlay-content h1 {
font-size: 2.625rem;
letter-spacing: -0.8px;
}
/* El
manual está pensado para el corte de línea de desktop; en
mobile el texto ya envuelve solo y el corte fijo generaba 3 líneas
desparejas en vez de 2 balanceadas. */
.hero-overlay-content h1 br {
display: none;
}
.hero-subtitle {
font-size: 0.9rem;
max-width: 100%;
}
.hero-actions {
flex-direction: column;
align-items: stretch;
margin-bottom: 32px;
}
.hero-btn-primary,
.hero-btn-secondary {
justify-content: center;
}
/* 3 stats no reparten parejo en 2 columnas (el tercero queda solo,
descentrado); en una sola columna cada fila ocupa todo el ancho. */
.hero-stats {
flex-direction: column;
align-items: stretch;
row-gap: 16px;
padding: 22px 28px;
}
.hero-stat {
flex: none;
width: 100%;
justify-content: center;
}
.hero-stat-sep {
width: 100%;
height: 1px;
}
.header-filter-bar {
padding: 10px 0;
}
.header-filter-bar .search-content {
height: auto;
flex-direction: column;
gap: 8px;
align-items: stretch;
}
.header-filter-bar .radio-group-2,
.header-filter-bar .select-group,
.header-filter-bar .input-search {
width: 100%;
flex: none;
height: 44px;
}
.header-filter-bar .select-group select,
.header-filter-bar .input-search input {
width: 100%;
}
.search-content {
flex-direction: column;
padding: 15px;
gap: 15px;
}
.radio-group-2 {
width: 100%;
}
.select-group, .input-search {
width: 100%;
}
.search_propiedades {
position: static;
width: 100%;
height: 50px;
}
.grid.col3,
#destacado .grid.col2 {
grid-template-columns: 1fr;
}
/* 400px de alto pensado para un grid de 3 columnas queda descomunal
en una sola columna angosta, con el título perdido abajo del todo. */
.item {
height: 220px;
}
/* El degradé solo no alcanza contra fotos claras/con mucho detalle:
una franja sólida detrás del texto garantiza contraste sin importar
la imagen de fondo. */
.mask {
padding: 18px 20px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 60%, transparent 100%);
}
.mask .top h3 {
font-size: 1.4rem;
text-transform: uppercase;
letter-spacing: -0.3px;
}
#destacado .item:nth-child(odd):last-child {
grid-column: span 1;
}
.results-header,
.alquiler-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
#sort-order,
#rental-sort {
width: 100%;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.admin-stats {
grid-template-columns: 1fr;
gap: 15px;
}
.card-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.search-box input {
width: 100%;
}
}
/* ════════════════════════════════════════════════════════════════
PROPIEDADES PAGE — estilos específicos del listado
════════════════════════════════════════════════════════════════ */
/* ── Hero compacto ───────────────────────────────────────────── */
.prop-page-hero {
position: relative;
width: 100%;
height: auto;
min-height: 330px;
overflow: hidden;
background-color: #000;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 175px 0 45px;
border-bottom: 3px solid var(--primary-color);
}
.prop-page-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to right,
rgba(0,0,0,0.88) 0%,
rgba(0,0,0,0.65) 42%,
rgba(0,0,0,0.22) 68%,
rgba(0,0,0,0) 100%
);
z-index: 1;
}
.prop-hero-bg {
position: absolute;
inset: 0;
background-image: url('https://images.unsplash.com/photo-1611865422861-391cf5f3ba49?ixlib=rb-4.0.3&auto=format&fit=crop&w=1800&q=65');
background-size: cover;
background-position: center 40%;
z-index: 0;
}
.prop-breadcrumb {
margin-bottom: 18px;
}
.prop-page-hero .hero-overlay-content {
padding-top: 0;
}
/* ── Skeleton loader ─────────────────────────────────────────── */
.skeleton-card {
pointer-events: none;
cursor: default !important;
}
.skeleton-img {
height: 240px;
border-radius: 0;
}
.skeleton-line {
border-radius: 6px;
}
.shimmer {
background: linear-gradient(90deg, #ede9e4 25%, #e2ddd7 50%, #ede9e4 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── Layout pantalla completa en /propiedades ────────────────── */
.prop-main {
padding: 28px 0 60px;
min-height: calc(100vh - 225px);
}
/* Sidebar fija en propiedades: ocupa el alto disponible del viewport */
.prop-main .filters-sidebar {
top: 168px;
}
/* ── Grid de propiedades compacto en /propiedades ────────────── */
/* auto-fill (no auto-fit): una sola tarjeta no se expande al ancho completo */
.prop-main .property-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.prop-main .property-card .card-image {
height: 175px;
}
.prop-main .property-card .card-content {
padding: 16px 18px;
}
.prop-main .property-card .card-type-strip {
font-size: 0.62rem;
padding: 5px 18px;
margin: -16px -18px 10px -18px;
}
.prop-main .property-card .card-price {
font-size: 1.2rem;
margin-bottom: 5px;
}
.prop-main .property-card .card-title {
font-size: 0.93rem;
margin-bottom: 8px;
}
.prop-main .property-card .card-code {
font-size: 0.68rem;
margin-top: -4px;
margin-bottom: 8px;
}
.prop-main .property-card .card-location {
margin-bottom: 12px;
font-size: 0.82rem;
}
.prop-main .property-card .card-features {
padding-top: 12px;
gap: 8px 12px;
}
.prop-main .property-card .feature-item {
font-size: 0.8rem;
}
/* ── Breadcrumb ──────────────────────────────────────────────── */
.breadcrumb {
display: flex;
align-items: center;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumb a {
color: #ffffff;
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
transition: color 0.2s;
}
.breadcrumb a:hover {
color: var(--primary-color);
}
.breadcrumb i {
color: rgba(255, 255, 255, 0.6);
font-size: 0.6rem;
}
.breadcrumb span {
color: #ffffff;
font-size: 0.8rem;
font-weight: 600;
}
/* ── Controles de resultados (toggle + vista + orden) ────────── */
.results-controls {
display: flex;
align-items: center;
gap: 10px;
}
/* Botón "Filtros" — solo visible en mobile */
.filter-toggle-btn {
display: none;
align-items: center;
gap: 7px;
background: var(--white);
border: 1.5px solid var(--primary-color);
color: var(--secondary-color);
padding: 9px 16px;
border-radius: 8px;
font-family: var(--font-heading);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.filter-toggle-btn:hover {
background: var(--primary-color);
color: var(--white);
}
/* ── Toggle grilla / lista ───────────────────────────────────── */
.view-toggle {
display: flex;
gap: 4px;
}
.view-btn {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1.5px solid var(--border-color);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #6b6b6b;
font-size: 0.85rem;
transition: var(--transition);
padding: 0;
}
.view-btn:hover,
.view-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
/* ── Modo lista de la grilla ─────────────────────────────────── */
.property-grid.list-view {
grid-template-columns: 1fr;
gap: 14px;
}
.property-grid.list-view .property-card {
display: grid;
grid-template-columns: 220px 1fr;
border-radius: 10px;
}
.property-grid.list-view .card-image {
height: 170px;
border-radius: 10px 0 0 10px;
}
.property-grid.list-view .card-content {
display: flex;
flex-direction: column;
justify-content: center;
}
/* ── Paginación ──────────────────────────────────────────────── */
.pagination {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 48px;
padding-top: 32px;
border-top: 1px solid var(--border-color);
}
.page-btn {
min-width: 40px;
height: 40px;
border-radius: 8px;
border: 1.5px solid var(--border-color);
background: var(--white);
font-family: var(--font-body);
font-size: 0.85rem;
font-weight: 700;
color: #555;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
gap: 6px;
transition: var(--transition);
}
.page-btn:hover:not(:disabled) {
border-color: var(--primary-color);
color: var(--primary-color);
}
.page-btn.active {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--white);
}
.page-btn:disabled {
opacity: 0.38;
cursor: not-allowed;
}
.page-ellipsis {
display: inline-flex;
align-items: center;
height: 40px;
color: #aaa;
font-weight: 700;
padding: 0 4px;
user-select: none;
}
/* ── Overlay oscuro al abrir sidebar en mobile ───────────────── */
.sidebar-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.52);
z-index: 800;
}
.sidebar-overlay.active {
display: block;
}
/* ── Responsive propiedades ──────────────────────────────────── */
@media (max-width: 1024px) {
/* Mostrar botón Filtros */
.filter-toggle-btn {
display: flex;
}
.sidebar-close-btn {
display: block;
}
/* Sidebar como panel deslizable desde la izquierda.
#filters-sidebar (ID) para ganarle en especificidad a
".prop-main .filters-sidebar" (top:168px), que si no pisa este top:0
y deja un hueco arriba con el panel cortado abajo del viewport. */
#filters-sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100dvh;
width: 300px;
overflow-y: auto;
/* Por encima del header (z-index 1000): al estar abierto es un panel
de pantalla completa, no debe quedar tapado por el header fijo. */
z-index: 1100;
border-radius: 0 14px 14px 0;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
}
#filters-sidebar.open {
display: block;
}
}
@media (max-width: 768px) {
/* 300px queda como un cajón angosto con la página visible atrás;
en mobile el panel de filtros ocupa toda la pantalla. */
#filters-sidebar {
width: 100%;
border-radius: 0;
}
.prop-page-hero {
padding: 200px 0 24px;
height: auto;
min-height: 380px;
}
.property-grid.list-view .property-card {
grid-template-columns: 1fr;
}
.property-grid.list-view .card-image {
height: 200px;
border-radius: 10px 10px 0 0;
}
.results-controls {
gap: 8px;
}
.view-toggle {
display: none;
}
}
/* ════════════════════════════════════════════════════════════════
PROPERTY DETAIL — secciones nuevas
════════════════════════════════════════════════════════════════ */
/* ── Breadcrumb del detalle ─────────────────────────────────── */
.detail-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 24px;
}
.detail-breadcrumb a {
color: #6b6b6b;
text-decoration: none;
font-size: 0.8rem;
font-weight: 600;
transition: color 0.2s;
}
.detail-breadcrumb a:hover { color: var(--primary-color); }
.detail-breadcrumb i {
color: #ccc;
font-size: 0.58rem;
}
.detail-breadcrumb span {
color: var(--secondary-color);
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
}
/* ── Encabezado: título + precio + compartir ──────────────────
Grid de 2 columnas x 3 filas (ver comentario en propertyDetail.js):
cada fila comparte alto real entre ambas columnas, así el precio
queda siempre a la altura del título sin importar cuánto ocupe
cada lado. */
.detail-header-row {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 24px;
row-gap: 8px;
align-items: center;
margin-bottom: 28px;
}
/* precio por m² debajo del precio principal */
.price-sqm {
display: block;
font-size: 0.82rem;
color: #6b6b6b;
font-weight: 600;
margin-top: 2px;
}
/* ── Botones de compartir ───────────────────────────────────── */
.detail-share {
display: flex;
gap: 8px;
justify-self: end;
}
.share-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid var(--border-color);
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.88rem;
cursor: pointer;
text-decoration: none;
color: #555;
transition: var(--transition);
}
.share-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.share-wa { color: #25d366; border-color: #25d366; }
.share-wa:hover { background: #25d366; color: #fff; }
/* ── Galería: counter, flechas, expand hint ─────────────────── */
.gallery-counter {
position: absolute;
bottom: 14px;
right: 16px;
background: rgba(0, 0, 0, 0.58);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
pointer-events: none;
backdrop-filter: blur(4px);
z-index: 3;
}
.gallery-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.85);
color: var(--secondary-color);
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
z-index: 3;
opacity: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }
.main-image-container:hover .gallery-nav-btn {
opacity: 1;
}
.gallery-nav-btn:hover {
background: var(--primary-color);
color: #fff;
}
.gallery-expand-hint {
position: absolute;
bottom: 14px;
left: 16px;
background: rgba(0, 0, 0, 0.58);
color: rgba(255, 255, 255, 0.9);
font-size: 0.75rem;
font-weight: 600;
padding: 5px 12px;
border-radius: 20px;
display: flex;
align-items: center;
gap: 6px;
backdrop-filter: blur(4px);
pointer-events: none;
opacity: 0;
transition: opacity 0.25s;
z-index: 3;
}
.main-image-container:hover .gallery-expand-hint {
opacity: 1;
}
/* ── Barra de stats rápidos ─────────────────────────────────── */
.detail-stats-bar {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 28px 0;
padding: 20px 24px;
background: var(--white);
border: 1.5px solid var(--primary-color);
border-radius: 12px;
}
.stat-pill {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
min-width: 70px;
padding: 8px 12px;
border-right: 1px solid var(--border-color);
}
.stat-pill:last-child {
border-right: none;
}
.stat-pill i {
font-size: 1.1rem;
color: var(--primary-color);
}
.stat-v {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 800;
color: var(--secondary-color);
line-height: 1.1;
}
.stat-l {
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b6b6b;
}
/* ── Ficha técnica en tabla ─────────────────────────────────── */
.detail-data-table {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--border-color);
border-radius: 10px;
overflow: hidden;
}
.data-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 18px;
border-bottom: 1px solid var(--border-color);
gap: 12px;
}
.data-row:nth-child(even) { background: #fafafa; }
.data-row:nth-last-child(-n+2) { border-bottom: none; }
.data-label {
font-size: 0.82rem;
font-weight: 700;
color: #6b6b6b;
text-transform: uppercase;
letter-spacing: 0.4px;
flex-shrink: 0;
}
.data-value {
font-size: 0.9rem;
font-weight: 700;
color: var(--secondary-color);
text-align: right;
}
/* ── Mapa ───────────────────────────────────────────────────── */
.detail-map {
border-radius: 12px;
overflow: hidden;
border: 1.5px solid var(--border-color);
height: 340px;
}
.detail-map iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* ── Email button (terciario) ───────────────────────────────── */
.btn-email {
background: #444 !important;
}
.btn-email:hover {
background: #222 !important;
}
/* ── Lightbox ───────────────────────────────────────────────── */
.lightbox-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.94);
z-index: 9000;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
}
.lightbox-overlay.open {
display: flex;
}
.lightbox-img-wrap {
max-width: 90vw;
max-height: 82vh;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-img-wrap img {
max-width: 100%;
max-height: 82vh;
object-fit: contain;
border-radius: 6px;
transition: opacity 0.15s ease;
}
.lightbox-close {
position: fixed;
top: 20px;
right: 24px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: none;
color: #fff;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
z-index: 9001;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: none;
color: #fff;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
z-index: 9001;
}
.lightbox-nav:hover { background: var(--primary-color); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-counter {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1px;
}
/* ── Responsive detalle ─────────────────────────────────────── */
@media (max-width: 768px) {
/* En una columna no hay filas que compartir: se vuelve a apilar en
el orden natural (badge, título, ubicación, precio, compartir) vía
`order`, sin depender de wrappers. */
.detail-header-row {
grid-template-columns: 1fr;
row-gap: 10px;
}
.detail-header-badges { order: 1; }
.detail-title { order: 2; }
.detail-location { order: 3; }
.price-label { order: 4; justify-self: start; }
.detail-price-value-wrap { order: 5; text-align: left; }
.detail-share { order: 6; justify-self: start; }
/* 2.5rem pensado para el ancho de desktop rompe en 3 líneas gigantes
en un teléfono. */
.detail-title {
font-size: 1.8rem;
}
.detail-location {
font-size: 0.95rem;
}
.price-value {
font-size: 1.7rem;
}
.detail-share {
gap: 10px;
}
.share-btn {
width: 44px;
height: 44px;
font-size: 1rem;
}
.detail-stats-bar {
gap: 8px;
padding: 16px;
}
.stat-pill {
min-width: 60px;
padding: 6px 8px;
}
.detail-data-table {
grid-template-columns: 1fr;
}
.data-row:nth-last-child(-n+2) {
border-bottom: 1px solid var(--border-color);
}
.data-row:last-child {
border-bottom: none;
}
/* En mobile: solo la foto principal, ocultar secundarias */
.detail-gallery {
grid-template-columns: 1fr;
height: 260px;
}
.gallery-secondary { display: none; }
.lightbox-prev { left: 8px; }
.lightbox-next { right: 8px; }
.detail-map { height: 240px; }
}
/* ══════════════════════════════════════════════════════════
CONTACTO PAGE
══════════════════════════════════════════════════════════ */
#contacto-main {
background: var(--white);
padding: 80px 0 100px;
}
.contacto-layout {
display: grid;
grid-template-columns: 420px 1fr;
gap: 64px;
align-items: stretch;
}
/* ── Info column ── */
.contacto-info {
background: var(--light-gray);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 48px;
display: flex;
flex-direction: column;
}
.contacto-intro {
margin-bottom: 40px;
}
.contacto-social {
margin-top: auto;
}
.contacto-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--primary-color);
margin-bottom: 12px;
}
.contacto-intro h2 {
font-size: 32px;
font-weight: 800;
color: #111;
line-height: 1.2;
margin-bottom: 14px;
}
.contacto-intro p {
font-size: 15px;
color: #666;
line-height: 1.7;
}
.contacto-datos {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 40px;
}
.contacto-dato {
display: flex;
gap: 16px;
align-items: flex-start;
}
.contacto-dato-icon {
width: 44px;
height: 44px;
min-width: 44px;
background: #fff8f0;
border: 1.5px solid #fde8c4;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 16px;
margin-top: 2px;
}
.contacto-dato-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.contacto-dato-text strong {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #767066;
}
.contacto-dato-text span,
.contacto-dato-text a {
font-size: 15px;
color: #222;
line-height: 1.55;
text-decoration: none;
transition: color 0.2s;
}
.contacto-dato-text a:hover {
color: var(--primary-color);
}
.contacto-social {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.contacto-social-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
border: 1.5px solid #e0dbd5;
background: var(--white);
color: #333;
font-size: 14px;
font-weight: 600;
font-family: var(--font-body);
text-decoration: none;
cursor: pointer;
transition: var(--transition);
}
.contacto-social-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: #fff8f0;
}
.contacto-social-btn.whatsapp:hover {
border-color: #25d366;
color: #25d366;
background: #f0fdf4;
}
/* ── Form column ── */
.contacto-form-wrap {
background: var(--light-gray);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 48px;
}
.contacto-form h3 {
font-size: 22px;
font-weight: 800;
color: #111;
margin-bottom: 6px;
}
.form-sub {
font-size: 14px;
color: #6b6b6b;
margin-bottom: 32px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-field {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 20px;
}
.form-field label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #555;
}
.form-field input,
.form-field select,
.form-field textarea {
padding: 12px 16px;
border: 1.5px solid #ddd8d2;
border-radius: 8px;
background: var(--white);
font-family: var(--font-body);
font-size: 15px;
color: #222;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
-webkit-appearance: none;
appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(255, 115, 0, 0.12);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: #bbb;
}
.form-field textarea {
resize: vertical;
min-height: 120px;
}
.form-field select {
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 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
.contacto-submit-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 32px;
background: var(--primary-color);
color: var(--white);
border: none;
border-radius: 8px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
width: 100%;
justify-content: center;
margin-top: 4px;
}
.contacto-submit-btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 115, 0, 0.35);
}
.contacto-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.cf-feedback {
margin-top: 16px;
padding: 14px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 10px;
}
.cf-feedback.success {
background: #ecfdf5;
border: 1px solid #6ee7b7;
color: #065f46;
}
.cf-feedback.error {
background: #fef2f2;
border: 1px solid #fca5a5;
color: #991b1b;
}
/* ── Mapa ── */
#contacto-mapa {
background: var(--light-gray);
border-top: 1px solid var(--border-color);
}
.mapa-header {
padding: 64px 40px 32px;
text-align: left;
}
.mapa-header h2 {
font-size: 28px;
font-weight: 800;
color: #111;
margin-bottom: 8px;
}
.mapa-header p {
font-size: 15px;
color: #6b6b6b;
}
.mapa-embed {
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 16px;
margin-bottom: 64px;
}
.mapa-embed iframe {
display: block;
filter: grayscale(20%) contrast(1.05);
border-radius: 16px;
}
/* ── Contacto responsive ── */
@media (max-width: 1024px) {
.contacto-layout {
grid-template-columns: 1fr;
gap: 48px;
}
.contacto-form-wrap,
.contacto-info {
padding: 36px;
}
}
@media (max-width: 640px) {
#contacto-main {
padding: 60px 0 80px;
}
.contacto-form-wrap,
.contacto-info {
padding: 28px 20px;
border-radius: 12px;
}
.form-row {
grid-template-columns: 1fr;
}
.mapa-embed {
height: 280px;
}
.mapa-header {
padding: 48px 20px 24px;
}
}
/* ══════════════════════════════════════════════════════════
TASACIONES PAGE
══════════════════════════════════════════════════════════ */
/* ── Stats strip ── */
#tas-stats {
background: var(--primary-color);
padding: 90px 0;
border-top: none;
}
.tas-stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 32px;
}
.tas-stat {
text-align: left;
padding: 32px 28px;
border-radius: 16px;
border: none;
background: #ffffff;
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s;
}
.tas-stat:hover {
box-shadow: 0 16px 32px rgba(0,0,0,0.14);
transform: translateY(-6px);
}
.tas-stat-top {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 20px;
}
.tas-stat-icon {
width: 68px;
height: 68px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #fff2e2;
border-radius: 16px;
color: var(--primary-color);
font-size: 1.7rem;
transition: var(--transition);
}
.tas-stat:hover .tas-stat-icon {
background: var(--primary-color);
color: #fff;
}
.tas-stat-num {
font-family: var(--font-heading);
font-size: 2.5rem;
font-weight: 900;
color: var(--secondary-color);
line-height: 1.1;
}
.tas-stat-label {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 600;
color: #6b6b6b;
line-height: 1.4;
}
/* ── Main layout ── */
#tas-main {
background: var(--white);
padding: 88px 0 100px;
}
.tas-main-layout {
display: grid;
grid-template-columns: 1fr 520px;
gap: 72px;
align-items: stretch;
}
/* ── Info column ── */
.tas-info {
background: var(--light-gray);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 44px 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
}
.tas-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--primary-color);
margin-bottom: 12px;
}
.tas-intro h2 {
font-size: 34px;
font-weight: 800;
color: #111;
line-height: 1.2;
margin-bottom: 16px;
}
.tas-intro p {
font-size: 15px;
color: #666;
line-height: 1.75;
max-width: 480px;
}
/* ── Pasos ── */
.tas-steps {
display: flex;
flex-direction: column;
gap: 28px;
margin-bottom: 44px;
padding-left: 4px;
}
.tas-step {
display: flex;
gap: 20px;
align-items: flex-start;
}
.tas-step-num {
font-size: 13px;
font-weight: 900;
color: var(--primary-color);
background: #fff8f0;
border: 1.5px solid #fde8c4;
border-radius: 8px;
width: 42px;
height: 42px;
min-width: 42px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-heading);
letter-spacing: 0;
}
.tas-step-text {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 8px;
}
.tas-step-text strong {
font-size: 15px;
font-weight: 700;
color: #111;
}
.tas-step-text span {
font-size: 14px;
color: #6b6b6b;
line-height: 1.6;
}
/* ── Contacto directo ── */
.tas-contacto-directo {
display: flex;
flex-direction: column;
gap: 12px;
padding-top: 8px;
}
.tas-contacto-label {
font-size: 13px;
color: #6b6b6b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tas-wa-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 24px;
background: #25d366;
color: #fff;
border-radius: 8px;
font-size: 15px;
font-weight: 700;
text-decoration: none;
width: fit-content;
transition: var(--transition);
}
.tas-wa-btn:hover {
background: #1da851;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
}
.tas-tel-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #555;
text-decoration: none;
font-weight: 600;
transition: color 0.2s;
}
.tas-tel-link:hover {
color: var(--primary-color);
}
/* ── Form ── */
.tas-form-wrap {
background: var(--light-gray);
border: 1px solid var(--border-color);
border-radius: 16px;
padding: 44px 40px;
position: sticky;
top: 120px;
}
.tas-form-header {
margin-bottom: 28px;
}
.tas-form-header h3 {
font-size: 22px;
font-weight: 800;
color: #111;
margin-bottom: 6px;
}
.tas-form-header p {
font-size: 14px;
color: #6b6b6b;
}
/* Toggle venta/alquiler */
.tas-op-toggle {
display: grid;
grid-template-columns: 1fr 1fr;
background: #e8e4df;
border-radius: 8px;
padding: 4px;
margin-bottom: 24px;
gap: 4px;
}
.tas-op-btn {
padding: 10px 0;
border: none;
border-radius: 8px;
background: transparent;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: #6b6b6b;
cursor: pointer;
transition: var(--transition);
}
.tas-op-btn.active {
background: var(--white);
color: #111;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.tas-submit-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--primary-color);
color: var(--white);
border: none;
border-radius: 8px;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: var(--transition);
width: 100%;
justify-content: center;
margin-top: 4px;
}
.tas-submit-btn:hover {
background: var(--primary-hover);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 115, 0, 0.35);
}
.tas-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* ── Diferenciadores (columna izquierda de #tas-main) ── */
.tas-features {
display: flex;
flex-direction: column;
gap: 34px;
}
.tas-feature {
display: flex;
gap: 16px;
align-items: flex-start;
}
.tas-feature-icon {
width: 44px;
height: 44px;
min-width: 44px;
background: #fff8f0;
border: 1.5px solid #fde8c4;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-color);
font-size: 16px;
margin-top: 2px;
}
.tas-feature-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.tas-feature-text strong {
font-size: 15px;
font-weight: 700;
color: #111;
}
.tas-feature-text span {
font-size: 14px;
color: #6b6b6b;
line-height: 1.6;
}
/* ── CTA final ── */
#tas-cta {
background: #111;
padding: 72px 0;
border-top: 3px solid var(--primary-color);
}
.tas-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.tas-cta-text h2 {
font-size: 28px;
font-weight: 800;
color: var(--white);
margin-bottom: 8px;
line-height: 1.25;
}
.tas-cta-text p {
font-size: 15px;
color: rgba(255,255,255,0.6);
}
.tas-cta-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 16px 36px;
background: #25d366;
color: var(--white);
border-radius: 8px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition: var(--transition);
}
.tas-cta-btn:hover {
background: #1da851;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
}
/* ── Tasaciones responsive ── */
@media (max-width: 1200px) {
.tas-main-layout {
grid-template-columns: 1fr;
gap: 52px;
}
.tas-form-wrap {
position: static;
}
}
@media (max-width: 768px) {
.tas-stats-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.tas-stat {
padding: 20px 16px;
}
.tas-stat-top {
flex-wrap: wrap;
gap: 12px;
}
.tas-stat-icon {
width: 48px;
height: 48px;
font-size: 1.2rem;
}
.tas-stat-num {
font-size: 1.7rem;
}
#tas-stats { padding: 60px 0; }
#tas-main { padding: 60px 0 80px; }
.tas-intro h2 { font-size: 26px; }
.tas-form-wrap,
.tas-info {
padding: 28px 20px;
border-radius: 12px;
}
.tas-cta-inner {
flex-direction: column;
text-align: center;
gap: 28px;
}
.tas-cta-text h2 { font-size: 22px; }
}
/* ── Página Nosotros ── */
#nos-main {
background: var(--white);
padding: 88px 0 100px;
}
.nos-main-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
.nos-media img {
width: 100%;
height: 100%;
max-height: 480px;
object-fit: cover;
border-radius: 16px;
box-shadow: var(--shadow);
}
#nos-mvv {
background: var(--light-gray);
padding: 88px 0;
}
.nos-mvv-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.nos-mvv-item {
align-items: flex-start;
min-height: 0;
}
.nos-mvv-item .servicio-icon {
font-size: 1.4rem;
}
.nos-mvv-item h3 {
font-family: var(--font-heading);
font-size: 1.3rem;
font-weight: 800;
color: var(--secondary-color);
margin: 20px 0 12px;
}
.nos-mvv-item p {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 400;
color: #666;
line-height: 1.7;
}
.nos-valores-list {
list-style: none;
padding: 0;
margin: 20px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.nos-valores-list li {
font-family: var(--font-body);
font-size: 0.95rem;
font-weight: 600;
color: var(--secondary-color);
padding-left: 18px;
position: relative;
}
.nos-valores-list li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-color);
}
@media (max-width: 1024px) {
.nos-mvv-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 900px) {
.nos-main-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.nos-media {
order: -1;
}
}
@media (max-width: 640px) {
.nos-mvv-grid {
grid-template-columns: 1fr;
}
#nos-main { padding: 60px 0 70px; }
#nos-mvv { padding: 60px 0; }
}
/* ── Cita + firma del equipo (dentro de "Quiénes somos") ── */
.nos-pull-quote {
font-family: var(--font-heading);
font-style: italic;
font-size: 1.05rem;
font-weight: 600;
color: var(--secondary-color);
border-left: 3px solid var(--primary-color);
padding-left: 16px;
margin: 0 0 24px;
line-height: 1.55;
max-width: 460px;
}
.nos-signature {
display: flex;
align-items: center;
gap: 14px;
margin-top: 8px;
}
.nos-signature-avatars {
display: flex;
}
.nos-signature-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 2px solid var(--white);
box-shadow: 0 0 0 2px var(--primary-color);
margin-left: -16px;
}
.nos-signature-avatar:first-child {
margin-left: 0;
}
.nos-signature-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.nos-signature-initials {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-color);
color: #fff;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 800;
}
.nos-signature-text {
display: flex;
flex-direction: column;
}
.nos-signature-text strong {
font-family: var(--font-heading);
font-size: 0.9rem;
font-weight: 800;
color: var(--secondary-color);
}
.nos-signature-text span {
font-size: 0.78rem;
color: #6b6b6b;
}
/* ------------------- Impresión: ficha de propiedad ------------------- */
/* Documento para el cliente en 3 hojas: (1) foto + destacados,
(2) ficha técnica + descripción, (3) mapa. */
/* margin:0 hace que Chrome no tenga dónde dibujar su encabezado/pie de
página por defecto (fecha, URL, "1/4"). El padding propio del
contenido (ver .detail-container más abajo) reemplaza ese margen. */
@page {
size: auto;
margin: 0;
}
.print-letterhead,
.print-page-tag {
display: none;
}
@media print {
header,
footer,
.sidebar-overlay,
.detail-breadcrumb,
.detail-share,
.gallery-nav-btn,
.gallery-expand-hint,
.gallery-counter,
.gallery-secondary,
.detail-sidebar,
.lightbox-overlay {
display: none !important;
}
.print-letterhead {
display: flex;
align-items: center;
gap: 14px;
padding-bottom: 14px;
margin-bottom: 20px;
border-bottom: 2px solid var(--primary-color);
}
.print-letterhead img {
height: 42px;
width: auto;
object-fit: contain;
}
.print-letterhead-info strong {
display: block;
font-size: 1rem;
color: var(--secondary-color);
}
.print-letterhead-info span {
display: block;
font-size: 0.75rem;
color: #666;
margin-top: 2px;
}
body, main {
background: #fff;
}
/* Margin 0 en @page evita que Chrome dibuje su encabezado/pie por
defecto (fecha, URL, "1/4" en Times New Roman) — no hay margen
donde ponerlos. Compensamos con nuestro propio padding acá.
box-decoration-break:clone hace que ese padding (y cualquier borde/
fondo) se repita en cada hoja, no solo en la primera: sin esto, una
sección que se corta sola entre hojas deja la siguiente empezando
pegada al borde superior. */
.detail-container {
padding: 15mm 15mm 20px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.detail-grid {
display: block;
}
/* Hoja 1: foto principal + destacados */
.detail-gallery {
break-inside: avoid;
}
.detail-stats-bar {
break-after: page;
page-break-after: always;
}
/* Hoja 2: ficha técnica. Hoja 3: descripción (+ amenities si hay).
Hoja 4: mapa. Separadas con break-before fijo en vez de dejar que
se acomoden solas: así el resultado es predecible independientemente
de cuán larga sea la descripción de cada propiedad. */
.detail-section {
break-inside: avoid;
page-break-inside: avoid;
}
.detail-section-description {
break-before: page;
page-break-before: always;
}
.stat-pill,
.data-row {
break-inside: avoid;
}
.detail-section-map {
break-before: page;
page-break-before: always;
}
.detail-map {
height: 500px;
}
/* Identificador chico que se repite al inicio de cada hoja (aparte de
la 1ª, que ya tiene el membrete grande) para no perder de vista de
qué propiedad es si las hojas se separan. */
.print-page-tag {
display: block;
font-size: 0.72rem;
font-weight: 600;
color: #6b6b6b;
letter-spacing: 0.3px;
margin-bottom: 10px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
}