/* NOTA: Las reglas de .property-card, .property-image y .btn-contact están en cards.css */
/* === PREVENCIÓN DE ZOOM EN MÓVILES === */
/* Asegurar font-size >= 16px para evitar zoom automático en iOS/Android */
@media (max-width: 768px) {
input, select, textarea {
font-size: 16px !important;
}
/* Prevent text size adjustment on orientation change */
html {
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* Contenedores flexibles - width 100% con max-width adecuado */
.container,
.container-fluid,
.main-content,
.products,
.box-container,
.results-container,
.results-grid {
width: 100% !important;
max-width: 100% !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* BLOQUEAR EL SCROLL HORIZONTAL */
body, html {
overflow-x: hidden;
}
.container, .product-detail-container {
max-width: 100vw;
overflow-x: hidden;
padding: 0 15px; /* Evitar que el texto toque los bordes */
box-sizing: border-box;
}
/* ARREGLAR EL ZOOM Y TAMAÑO DE LA IMAGEN PRINCIPAL */
#main-product-image, .gallery-main img {
width: 100% !important;
max-width: 100% !important;
height: 300px !important; /* Altura más manejable para celular */
min-height: auto !important;
object-fit: contain !important; /* contain evita el zoom excesivo que corta la imagen */
border-radius: 8px;
}
}
/* Cuadros vacíos para alinear la última fila de atributos de inmueble */
.spec-item-empty {
background: transparent !important;
box-shadow: none !important;
border: none !important;
pointer-events: none;
min-height: 90px;
height: 100%;
}
/* ================================================= */
/* ========== ANIMACIONES GLOBALES ========== */
/* ================================================= */
/* Animación fadeIn - Unificada aquí para evitar duplicados */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Animación fadeInUp */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================================================= */
/* ========== ESTILOS GENERALES DEL SITIO ========== */
/* ================================================= */
/* === STYLE.CSS - ESTILOS MAESTROS UNIFICADOS === */
/* ================================================= */
/* --- CARRUSEL DE CATEGORÍA EN RESULTADOS --- */
.category-hero {
position: relative;
height: 30vh;
min-height: 200px;
overflow: hidden;
margin-bottom: 1rem;
}
.category-hero-carousel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.category-swiper {
width: 100%;
height: 100%;
}
.category-swiper .swiper-slide {
position: relative;
}
.category-swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.4);
}
.category-hero-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
text-align: center;
color: white;
max-width: 800px;
width: 90%;
}
.category-hero-content h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}
.category-hero-content p {
font-size: 1.8rem;
opacity: 0.95;
text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
/* Controles del carrusel de categoría */
.category-swiper .swiper-pagination {
bottom: 20px;
}
.category-swiper .swiper-pagination-bullet {
background: white;
opacity: 0.7;
}
.category-swiper .swiper-pagination-bullet-active {
background: var(--color-primario);
opacity: 1;
}
.category-swiper .swiper-button-next,
.category-swiper .swiper-button-prev {
color: white;
background: rgba(0,0,0,0.3);
width: 50px;
height: 50px;
border-radius: 50%;
margin-top: -25px;
}
.category-swiper .swiper-button-next:hover,
.category-swiper .swiper-button-prev:hover {
background: var(--color-primario);
}
/* Responsive */
@media (max-width: 768px) {
.category-hero {
height: 40vh;
min-height: 300px;
}
.category-hero-content h1 {
font-size: 2.5rem;
}
.category-hero-content p {
font-size: 1.4rem;
}
.category-swiper .swiper-button-next,
.category-swiper .swiper-button-prev {
width: 40px;
height: 40px;
margin-top: -20px;
}
.category-swiper .swiper-button-next::after,
.category-swiper .swiper-button-prev::after {
font-size: 16px;
}
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
/* --- 1. VARIABLES GLOBALES Y RESET --- */
:root {
--color-primario: #00bfae;
--color-secundario: #16a085;
--color-acento: #ffab40;
--color-acento-claro: #ffe082;
--color-fondo: #f7fafd;
--color-texto: #0a2342;
--color-blanco: #ffffff;
--color-gris: #7f8c8d;
--sombra-suave: 0 4px 15px rgba(0,0,0,0.08);
--sombra-media: 0 8px 30px rgba(0,0,0,0.12);
font-size: 62.5%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--color-fondo);
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
min-width: 0;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.heading {
text-align: center;
padding: 2rem 0;
padding-bottom: 3rem;
font-size: 3.5rem;
color: var(--color-texto);
}
.heading span {
background: var(--color-primario);
color: #fff;
display: inline-block;
padding: .5rem 3rem;
clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}
/* --- 2. NAVBAR MODERNO --- */
.navbar-moderno {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 5%;
background: var(--color-primario);
box-shadow: var(--sombra-suave);
position: sticky;
top: 0;
z-index: 1000;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
min-width: 0;
box-sizing: border-box;
border-bottom: none;
}
.navbar-moderno > * {
min-width: 0;
flex-shrink: 1;
}
.logo-link {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-img {
height: 5.5rem;
width: auto;
margin-right: 1rem;
border-radius: 6px;
}
.logo-text {
font-size: 2.2rem;
font-weight: 700;
color: var(--color-blanco);
}
.buttons-nav {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
overflow: visible;
}
.buttons-nav button {
background: var(--color-blanco);
color: var(--color-primario);
font-weight: 600;
border: none;
border-radius: 8px;
padding: 0.9rem 1.8rem;
font-size: 1.3rem;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0.6rem;
white-space: nowrap;
overflow: visible;
z-index: 1001;
}
.buttons-nav button i {
font-size: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
}
.buttons-nav button:hover {
background: var(--color-secundario);
color: var(--color-blanco);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0, 191, 174, 0.3);
}
/* ===== RESPONSIVE NAVBAR ===== */
@media (max-width: 768px) {
.navbar-moderno {
height: 60px;
padding: 0.8rem 1rem;
gap: 0.8rem;
flex-wrap: wrap;
}
.logo-img {
height: 4.2rem;
margin-right: 0.8rem;
}
.logo-text {
font-size: 1.5rem;
}
.buttons-nav {
gap: 0.6rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.buttons-nav button {
padding: 0.7rem 1.2rem;
font-size: 0.95rem;
border-radius: 6px;
overflow: visible;
}
.buttons-nav button i {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.navbar-moderno {
padding: 0.6rem 0.8rem;
gap: 0.3rem;
justify-content: flex-start;
min-height: auto;
overflow: visible;
}
.logo-container {
display: flex;
align-items: center;
flex-shrink: 0;
}
.logo-img {
height: 3.5rem;
margin-right: 0.3rem;
border-radius: 4px;
}
.logo-text {
font-size: 0.9rem;
white-space: nowrap;
}
.buttons-nav {
gap: 0.2rem;
flex-wrap: nowrap;
margin-left: auto;
justify-content: flex-end;
overflow: visible !important;
}
.buttons-nav button {
padding: 0.4rem 0.5rem;
font-size: 0.7rem;
border-radius: 4px;
flex-shrink: 0;
white-space: nowrap;
min-width: 40px;
height: 36px;
overflow: visible !important;
}
.buttons-nav button span {
display: none;
}
.buttons-nav button i {
font-size: 0.95rem;
margin: 0;
}
.nav-btn-user,
.nav-btn-guest {
padding: 0.4rem 0.5rem;
}
.nav-icon-btn {
padding: 0.4rem;
}
nav {
overflow: visible !important;
}
}
/* --- TAMAÑO IDEAL PARA ATRIBUTOS (FICHA TÉCNICA) --- */
/* 1. Contenedor de la Tarjeta Individual */
.universal-attr-item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 15px !important; /* Espaciado interno cómodo */
gap: 6px !important;
}
/* 2. El Icono (Equilibrado y visible) */
.universal-attr-item i {
font-size: 1.6rem !important; /* Aproximadamente 25px. Grande pero no gigante */
color: #00bfae !important; /* Usamos el color de acento turquesa */
margin-bottom: 5px !important;
}
/* 3. La Etiqueta (ej: "Superficie") */
.universal-attr-item .attr-label {
font-size: 0.9rem !important; /* Tamaño estándar de lectura */
color: #666666 !important; /* Gris suave */
font-weight: 400 !important;
margin: 0 !important;
}
/* 4. El Valor (ej: "120 m²" - Lo más importante) */
.universal-attr-item .attr-value {
font-size: 1.1rem !important; /* Un poco más grande que la etiqueta */
font-weight: 700 !important; /* Negrita para resaltar el dato */
color: #0a2342 !important; /* Azul oscuro premium */
margin: 0 !important;
}
/* Ultra pequeño para pantallas de 400px o menos */
@media (max-width: 400px) {
.navbar-moderno {
padding: 0.5rem 0.5%;
gap: 0.2rem;
min-height: auto;
height: auto;
}
.logo-img {
height: 2.8rem;
margin-right: 0.2rem;
}
.logo-text {
font-size: 0.8rem;
white-space: nowrap;
}
.buttons-nav {
gap: 0.5rem;
overflow: visible !important;
}
.buttons-nav button {
padding: 0.3rem 0.4rem;
font-size: 0.65rem;
min-width: 35px;
height: 32px;
overflow: visible !important;
}
.buttons-nav button i {
font-size: 0.9rem;
}
/* Asegurar que nada se corte */
nav {
overflow: visible !important;
}
}
.nav-btn-user {
background: var(--color-blanco) !important;
color: var(--color-primario) !important;
}
.nav-btn-user:hover {
background: linear-gradient(135deg, var(--color-primario), var(--color-secundario)) !important;
color: var(--color-blanco) !important;
}
.nav-btn-guest {
background: linear-gradient(135deg, var(--color-secundario), var(--color-primario)) !important;
color: var(--color-blanco) !important;
}
.nav-btn-guest:hover {
background: linear-gradient(135deg, var(--color-primario), var(--color-secundario)) !important;
box-shadow: 0 6px 16px rgba(0, 191, 174, 0.4) !important;
}
/* --- BOTÓN PERFIL CON ICONO --- */
.nav-profile-btn {
width: 50px !important;
height: 50px !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--color-primario) !important;
color: var(--color-blanco) !important;
}
.nav-profile-btn:hover {
background: var(--color-secundario) !important;
color: var(--color-blanco) !important;
}
/* --- BOTÓN NAVBAR SOLO ICONO --- */
.nav-icon-btn {
width: 45px !important;
height: 45px !important;
padding: 0 !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--color-blanco) !important;
color: var(--color-primario) !important;
border: 2px solid var(--color-primario) !important;
transition: all 0.3s ease !important;
}
.nav-icon-btn:hover {
background: var(--color-primario) !important;
color: var(--color-blanco) !important;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 191, 174, 0.3);
}
.profile-icon {
width: 24px;
height: 24px;
}
/* --- 3. SECCIÓN HERO (PORTADA) --- */
/* Esta sección estaba completamente ausente en tu CSS actual */
.hero-search {
background: linear-gradient(135deg, rgba(0, 191, 174, 0.95), rgba(22, 160, 133, 0.92));
min-height: 400px;
height: auto !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--color-blanco);
padding: 4rem 2rem 100px 2rem !important;
position: relative;
overflow: hidden;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1000px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-title-animated {
font-size: 4.5rem;
font-weight: 800;
margin-bottom: 2rem;
line-height: 1.2;
}
.highlight-text {
background: linear-gradient(to right, var(--color-acento-claro), var(--color-acento));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.8rem;
margin-bottom: 4rem;
opacity: 0.95;
font-weight: 400;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.search-form-container {
background: rgba(255,255,255,0.15);
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
max-width: 900px;
margin: 0 auto;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.search-field {
display: flex;
align-items: center;
background: #fff;
border-radius: 8px;
padding: 0 1.5rem;
flex: 1;
}
.search-field i {
font-size: 1.8rem;
color: var(--color-gris);
margin-right: 1rem;
}
.search-field input,
.search-field select {
width: 100%;
background: none;
border: none;
outline: none;
padding: 10px 0;
font-size: 1.6rem;
color: var(--color-texto);
}
.btn-search-hero {
padding: 10px 20px;
background: #00c1ab;
color: #fff;
border: none;
border-radius: 8px;
font-size: 1.6rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.btn-search-hero:hover {
background: #00a393;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 6rem;
margin-top: 5rem;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 3.5rem;
font-weight: 800;
color: var(--color-acento-claro);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1.4rem;
opacity: 0.9;
text-transform: uppercase;
letter-spacing: 1px;
}
/* --- 4. SECCIÓN DE CATEGORÍAS --- */
/* También ausente en tu CSS actual */
.categories-showcase {
background: var(--color-blanco);
padding: 8rem 2rem;
}
.container-categories {
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 3.5rem;
font-weight: 800;
color: var(--color-texto);
margin-bottom: 1.5rem;
}
.section-subtitle {
text-align: center;
font-size: 1.8rem;
color: var(--color-gris);
margin-bottom: 5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.categories-grid-modern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem;
}
/* --- REEMPLAZO PARA TARJETAS DE CATEGORÍA MINIMALISTAS --- */
.category-card {
background: transparent !important; /* Hacemos el fondo invisible */
box-shadow: none !important; /* Quitamos la sombra */
border: none !important; /* Nos aseguramos de que no haya borde */
padding: 2rem 1rem; /* Reducimos el espacio para que no sea tan grande */
text-align: center;
cursor: pointer;
transition: transform 0.3s ease; /* La transición ahora solo afecta al movimiento */
}
.category-card:hover {
transform: translateY(-10px); /* Mantenemos el efecto de "flotar" al pasar el mouse */
}
.category-icon {
width: 8rem;
height: 8rem;
margin: 0 auto 2rem;
background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
border-radius: 2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.category-card:hover .category-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 8px 25px rgba(0, 191, 174, 0.3);
}
.category-icon i {
font-size: 4rem;
color: white;
}
.category-card h3 {
font-size: 2rem;
font-weight: 700;
color: var(--color-texto);
margin-bottom: 1rem;
}
.category-card p {
font-size: 1.5rem;
color: var(--color-gris);
}
/* --- 14. ESTILOS UNIFICADOS PARA TARJETAS DE ANUNCIO --- */
/* Contenedor de las tarjetas - ¡AQUÍ ESTÁ LA CORRECCIÓN! */
/* #results-container {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: 2.5rem !important;
} */
/* Estilo Base para AMBAS tarjetas (simple y premium) */
.box, .tarjeta-auto {
background-color: #ffffff;
border-radius: 20px 20px 0 0 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.box:hover, .tarjeta-auto:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
/* --- PARCHE DE COMPATIBILIDAD DE CUADRÍCULA PARA TARJETAS --- */
/*
Regla Principal:
Cualquier elemento que sea hijo directo del contenedor de resultados
debe comportarse como un elemento de la cuadrícula.
*/
/* #results-container > * {
width: 100%;
min-width: 0;
} */
/*
Aseguramos que ambas tarjetas tengan las propiedades flex correctas
para que su contenido interno se organice bien.
*/
/* .box, .tarjeta-auto {
display: flex;
flex-direction: column;
height: 100%;
} */
/*
Aseguramos que el contenido de la tarjeta se expanda
para empujar el footer/botón hacia abajo.
*/
.box .content, .tarjeta-auto .contenido-auto {
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
/* Contenedor de la imagen (para ambas tarjetas) */
.box .image-container,
.box > img,
.tarjeta-auto .image-container,
.tarjeta-auto > img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
flex-shrink: 0;
}
/* Si la imagen está dentro de un div, aplicamos la regla al ![]()
*/
.box .image-container img,
.tarjeta-auto .image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Estilos para la tarjeta SIMPLE (.box) --- */
.box .content {
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
flex-grow: 1 !important;
justify-content: space-between !important;
}
.box .price {
font-size: 2rem !important;
font-weight: 700 !important;
margin-bottom: 0;
color: #008080 !important;
letter-spacing: -0.2px;
}
.box h3 {
font-size: 1.8rem !important;
margin-bottom: 4px !important;
flex-grow: 1;
letter-spacing: -0.2px;
font-weight: 700 !important;
color: #2d2d2d !important;
}
.box .location {
font-size: 1.2rem;
color: #777;
margin-bottom: 6px;
font-weight: 400;
}
.vehicle-details {
display: flex;
flex-wrap: wrap;
gap: 0.6rem !important;
font-size: 1.3rem !important;
color: #444 !important;
margin-bottom: 8px !important;
font-weight: 500 !important;
}
.vehicle-details span {
display: flex !important;
align-items: center;
gap: 0.3rem;
}
.vehicle-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* ========================================
ESTILOS PARA DEPORTES Y HOBBIES
======================================== */
.sports-details i,
.vehicle-details i,
.real-estate-details i,
.electronics-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* ========================================
ESTILOS PARA MASCOTAS
======================================== */
.pets-details i,
.vehicle-details i,
.real-estate-details i,
.electronics-details i,
.sports-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* ========================================
ESTILOS PARA SERVICIOS
======================================== */
.services-details i,
.vehicle-details i,
.real-estate-details i,
.electronics-details i,
.sports-details i,
.pets-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* ========================================
ESTILOS PARA NEGOCIOS
======================================== */
.business-details i,
.vehicle-details i,
.real-estate-details i,
.electronics-details i,
.sports-details i,
.pets-details i,
.services-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* ========================================
ESTILOS PARA COMUNIDAD
======================================== */
.community-details i,
.vehicle-details i,
.real-estate-details i,
.electronics-details i,
.sports-details i,
.pets-details i,
.services-details i,
.business-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* === ESTILOS UNIFICADOS PARA TODOS LOS DETALLES DE CATEGORÍAS === */
/* Electrónica - Mismo estilo que otras categorías */
.electronics-details {
display: flex !important;
flex-wrap: wrap !important;
gap: 0.6rem !important;
font-size: 1.3rem !important;
color: #444 !important;
margin-bottom: 8px !important;
font-weight: 500 !important;
}
.electronics-details span {
display: flex !important;
align-items: center;
gap: 0.3rem;
}
.electronics-details i {
color: #666 !important;
font-size: 1.1rem !important;
}
/* --- INICIO AJUSTE ALINEACIÓN ATRIBUTOS INMUEBLE --- */
.real-estate-specs-grid {
margin-bottom: 2rem;
}
.real-estate-specs-grid h2 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
/* --- INICIO AJUSTE ALINEACIÓN PERFECTA ATRIBUTOS --- */
.specs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1rem;
width: 100%;
}
.spec-item {
background: #f8f9fa; /* Fondo suave casi blanco */
border-radius: 12px;
box-shadow: none; /* Sin sombra */
border: none; /* Sin borde */
padding: 10px 18px; /* Padding horizontal más grande para cápsulas */
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 70px;
min-width: 0;
width: 100%;
box-sizing: border-box;
height: 100%;
}
.specs-grid > .spec-item {
min-width: 0;
min-height: 70px;
height: 100%;
}
/* Iconos de spec-item con tamaño consistente */
.spec-item i {
font-size: 2rem; /* Tamaño consistente */
color: #0a2342; /* Azul de marca */
width: 3rem;
text-align: center;
flex-shrink: 0; /* Evita que se encoja */
}
@media (max-width: 900px) {
.specs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.specs-grid {
grid-template-columns: 1fr;
}
}
/* --- FIN AJUSTE ALINEACIÓN PERFECTA ATRIBUTOS --- */
.spec-label {
font-size: 0.95rem;
color: #0a2342; /* Azul para las etiquetas */
font-weight: 600;
}
.spec-value {
font-size: 1.1rem;
font-weight: 700;
color: #000000; /* Negro para los valores */
}
@media (max-width: 900px) {
.specs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.specs-grid {
grid-template-columns: 1fr;
}
}
/* --- FIN AJUSTE ALINEACIÓN ATRIBUTOS INMUEBLE --- */
.home-furniture-details,
.fashion-details,
.vehicle-details,
.real-estate-details,
.electronics-details,
.sports-details,
.pets-details,
.services-details,
.business-details,
.community-details {
display: flex;
flex-wrap: wrap;
gap: 0.6rem !important;
font-size: 1.4rem !important;
color: #444 !important;
margin-bottom: 8px !important;
font-weight: 500 !important;
}
.home-furniture-details span,
.fashion-details span,
.vehicle-details span,
.real-estate-details span,
.electronics-details span,
.sports-details span,
.pets-details span,
.services-details span,
.business-details span,
.community-details span {
display: flex !important;
align-items: center;
gap: 0.7rem;
}
.home-furniture-details i,
.fashion-details i,
.vehicle-details i,
.real-estate-details i,
.electronics-details i,
.sports-details i,
.pets-details i,
.services-details i,
.business-details i,
.community-details i {
color: #666 !important;
font-size: 1.4rem !important;
}
.box .btn-contact {
display: block;
text-align: center;
padding: 1.2rem;
background-color: var(--color-primario);
color: white;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
margin-top: auto !important; /* SIEMPRE AL FONDO - como soldados alineados */
cursor: pointer;
border: none;
}
/* --- Estilos para la tarjeta PREMIUM (.tarjeta-auto) --- */
/* (Copia aquí los estilos para .tarjeta-auto que te di en el mensaje anterior,
asegurándote de que no entren en conflicto con los de arriba) */
.contenido-auto {
padding: 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.cabecera-auto { margin-bottom: 15px; }
.cabecera-auto h2 { font-size: 1.8rem; font-weight: 600; margin: 0 0 5px 0; }
.cabecera-auto .precio { font-size: 2.2rem; font-weight: bold; color: var(--color-secundario); margin: 0; }
.detalles-principales { display: flex; justify-content: space-around; align-items: center; padding: 10px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; margin-bottom: 15px; font-size: 1.3rem; color: #555; flex-wrap: wrap; gap: 1rem; }
.detalle-item { display: flex; align-items: center; gap: 0.5rem; }
.detalle-item i { font-size: 1.6rem; color: var(--color-gris); }
.ubicacion { font-size: 1.3rem; color: #666; margin-top: auto; padding-top: 1rem; border-top: 1px solid #f0f0f0; display: flex; align-items: center; }
.ubicacion i { margin-right: 5px; }
.btn-ver-detalles {
display: block;
width: 100%;
padding: 1.2rem;
background: var(--color-primario);
color: var(--color-blanco);
text-align: center;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 1.5rem;
margin-top: auto;
transition: background-color 0.2s ease;
border: none;
}
.btn-ver-detalles:hover {
background-color: var(--color-secundario);
}
/* --- ESTILOS PARA DETALLES DE ELECTRÓNICA EN TARJETAS --- */
.electronics-details-card {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 1.4rem;
color: #222;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #f0f0f0;
}
.electronics-details-card .detail-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.electronics-details-card .detail-item i {
color: #222;
font-size: 1.6rem;
}
/* --- 6. FOOTER PREMIUM --- */
.footer {
background-color: #0a192f; /* Azul medianoche elegante */
color: #a9c1d9;
padding: 6rem 5% 0;
margin-top: auto;
border-top: 3px solid #c5a059; /* Línea dorada premium */
}
.footer-contenedor {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 3rem;
}
.footer-col {
flex: 1;
min-width: 220px;
}
.footer-title {
color: #c5a059 !important; /* Dorado para títulos */
font-size: 1.6rem !important;
margin-bottom: 2rem !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-col h4 {
color: #c5a059;
font-size: 1.6rem;
margin-bottom: 2rem;
font-weight: 700;
position: relative;
text-transform: uppercase;
letter-spacing: 1px;
}
.footer-col h4::after {
content: '';
position: absolute;
left: 0;
bottom: -0.8rem;
background-color: #c5a059;
height: 2px;
width: 40px;
}
.footer-col p { font-size: 1.4rem; line-height: 1.7; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 1rem; }
.footer-col a { color: #a9c1d9; text-decoration: none; transition: all 0.3s ease; font-size: 1.4rem; }
.footer-col a:hover { color: #c5a059; padding-left: 5px; }
.footer-subtitle {
font-size: 1.2rem;
color: #7a8a9a;
margin-bottom: 1rem;
font-style: italic;
}
.social-links { margin-top: 1rem; }
.social-links a { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.social-links i { font-size: 2rem; width: 2.5rem; }
/* App badges placeholder */
.app-buttons {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 1rem;
}
.store-badge-placeholder {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.1);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
font-size: 1.2rem;
border: 1px solid rgba(255,255,255,0.2);
}
.store-badge-placeholder i {
font-size: 1.6rem;
}
/* Payment icons */
.payment-icons {
display: flex;
gap: 15px;
margin-top: 10px;
}
.payment-icons i {
font-size: 3rem;
color: #a9c1d9;
transition: color 0.3s ease;
}
.payment-icons i:hover {
color: #c5a059;
}
.footer-bottom {
text-align: center;
padding: 2rem 0;
margin-top: 4rem;
border-top: 1px solid rgba(197, 160, 89, 0.3);
}
/* --- 7. RESPONSIVE DESIGN --- */
@media (max-width: 991px) {
html { font-size: 55%; }
}
@media (max-width: 768px) {
.search-form-container {
flex-direction: column;
gap: 15px;
max-width: 100%;
padding: 15px;
position: relative;
transform: none;
left: auto;
bottom: auto;
}
.search-field {
width: 100%;
flex: none;
}
.search-field input,
.search-field select {
font-size: 1rem;
padding: 10px 0;
}
.btn-search-hero {
width: 100%;
font-size: 1rem;
padding: 12px 20px;
}
.hero-title-animated {
font-size: 3.5rem;
}
.hero-stats {
flex-direction: column;
gap: 3rem;
}
}
@media (max-width: 450px) {
html { font-size: 50%; }
}
/* --- 8. PARCHE DE CORRECCIÓN PARA ICONOS DEL FOOTER --- */
/* Esta regla específica controla el tamaño de las imágenes (![]()
)
dentro de los enlaces de redes sociales para evitar que se desborden. */
.social-links a img {
width: 24px; /* Ancho fijo para el icono */
height: 24px; /* Alto fijo para el icono */
object-fit: contain; /* Asegura que la imagen se escale bien dentro del espacio */
}
/* --- TÍTULO DE SECCIÓN EN LA ZONA BLANCA --- */
.section-title-container {
background-color: var(--color-blanco);
padding: 1rem 2rem;
margin-top: 0;
border-bottom: 1px solid #e0e0e0;
}
.section-main-title {
font-size: 2rem;
font-weight: 700;
color: #1a1a1a;
text-align: left;
margin: 0;
max-width: 1200px;
margin: 0 auto;
}
/* --- 9. ESTILOS PARA BARRA DE CATEGORÍAS HORIZONTAL --- */
.categories-section {
background-color: var(--color-blanco);
padding-top: 60px !important;
margin-top: 50px !important;
border-bottom: 1px solid #e0e0e0;
clear: both;
}
.category-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.8rem;
padding: 1rem;
text-decoration: none;
color: var(--color-texto);
border-radius: 8px;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.category-item:hover {
background-color: var(--color-fondo);
transform: translateY(-5px); /* Mantenemos el efecto de elevación */
}
.category-item .category-icon {
width: 5rem;
height: 5rem;
background: var(--color-fondo);
border-radius: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.category-item .category-icon i {
font-size: 2.5rem;
color: var(--color-primario);
}
.category-item h3 {
font-size: 1.4rem;
font-weight: 600;
}
/* Estado activo para categorías seleccionadas */
.category-item.category-active {
background-color: var(--color-primario);
color: white;
transform: translateY(-5px);
box-shadow: 0 4px 12px rgba(0, 191, 174, 0.3);
}
.category-item.category-active .category-icon {
background: rgba(255, 255, 255, 0.2);
}
.category-item.category-active .category-icon i {
color: white;
}
.category-item.category-active h3 {
color: white;
}
/* --- 10. ESTILOS PARA DROPDOWN DE CATEGORÍAS (NUEVA VERSIÓN ANIDADA) --- */
.category-dropdown-container {
position: relative;
}
#categoryInput {
cursor: pointer;
}
.category-dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: var(--color-blanco);
border: 1px solid #ddd;
border-radius: .5rem;
box-shadow: var(--sombra-suave);
z-index: 1001;
width: 300px; /* Un poco más ancho */
max-height: 40vh; /* Altura máxima relativa a la ventana */
overflow-y: auto; /* SCROLL AUTOMÁTICO */
}
.category-dropdown-container:hover .category-dropdown-menu,
.category-dropdown-container:focus-within .category-dropdown-menu { /* Se muestra al hacer hover o al tener foco */
display: block;
}
.category-main-item, .subcategory-item {
padding: 1.2rem 1.5rem;
cursor: pointer;
color: var(--color-texto);
}
.category-main-item {
font-weight: 700;
border-bottom: 1px solid #f0f0f0;
}
.subcategory-item {
padding-left: 3rem; /* ¡SANGRÍA PARA SUB-CATEGORÍAS! */
font-weight: 400;
}
.category-main-item:hover, .subcategory-item:hover {
background-color: var(--color-fondo);
}
/* --- 11. PARCHE DE VISIBILIDAD PARA TEXTO DE CATEGORÍAS --- */
.category-main-item, .subcategory-item {
color: var(--color-texto); /* Asigna el color de texto principal */
}
/* --- 12. ESTILOS PARA PÁGINA DE RESULTADOS (LAYOUT MAESTRO) --- */
/* Usamos GRID para el layout principal, es más predecible que Flexbox para esto */
.results-page-container {
width: 100%;
margin: 0;
padding: 1rem 2%; /* Add padding here to control overall content inset */
background: #f5f5f5;
}
.results-inner-wrapper {
display: grid;
grid-template-columns: max-content 1fr; /* Sidebar takes content width, main content takes rest */
gap: 2rem; /* Reduced gap for more compact look */
margin: 0; /* Remove auto margin to allow full width expansion */
padding: 0; /* Remove padding here, as it's now on results-page-container */
align-items: start;
}
.filters-sidebar {
/* No necesita flex: 0 0 280px porque el grid ya define su ancho */
background: var(--color-blanco);
padding: 3.9rem;
border-radius: 1rem;
box-shadow: var(--sombra-suave);
position: sticky;
top: 80px;
height: fit-content;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
/* El resto de estilos del sidebar (.filters-sidebar h3, .filter-group, etc.) se mantienen igual */
.filters-sidebar h3 { font-size: 1.6rem; margin-bottom: 1rem; border-bottom: 2px solid var(--color-primario); padding-bottom: 0.5rem; }
.filter-group { margin-bottom: 1rem; }
.filter-group label { font-weight: 600; font-size: 1.3rem; display: block; margin-bottom: 0.5rem; }
.filter-group input[type="number"] { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: .5rem; font-size: 1.2rem; }
#subcategory-filter-container .subcategory-label { display: block; margin-bottom: 0.5rem; cursor: pointer; font-size: 1.4rem; }
.btn-apply-filters { width: 100%; padding: 1rem; background: var(--color-secundario); color: var(--color-blanco); border: none; border-radius: .5rem; font-size: 1.4rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; margin-top: 1rem; }
.btn-apply-filters:hover { background-color: var(--color-primario); }
/* --- PARCHE DE EMERGENCIA PARA TARJETA-AUTO EN CUADRÍCULA --- */
/* 1. Asegurar que la tarjeta respete la cuadrícula y tenga estructura flex */
/* .tarjeta-auto {
display: flex !important;
flex-direction: column !important;
height: 100%;
} */
/* 2. Forzar altura fija del contenedor de imagen para evitar desbordamiento */
.tarjeta-auto .image-container {
width: 100%;
height: 220px; /* ALTURA FIJA Y CONSISTENTE */
flex-shrink: 0; /* Evita que el contenedor se encoja */
position: relative; /* Necesario para los botones del carrusel */
background-color: #f5f5f5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* 3. Asegurar que el carrusel y la imagen llenen el contenedor */
.tarjeta-auto .product-swiper {
width: 100%;
height: 100%;
}
.tarjeta-auto .swiper {
width: 100%;
height: 100%;
overflow: hidden;
}
.tarjeta-auto .swiper-wrapper,
.tarjeta-auto .swiper-slide {
width: 100%;
height: 100%;
}
.tarjeta-auto .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
}
.tarjeta-auto .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* Llenar completamente */
object-position: center;
display: block;
}
/* 4. Asegurar la visibilidad y estilo de los botones del carrusel */
.tarjeta-auto .swiper-button-prev,
.tarjeta-auto .swiper-button-next {
color: #ffffff !important;
background-color: rgba(0, 0, 0, 0.5) !important;
width: 40px !important;
height: 40px !important;
border-radius: 50%;
/* Sin transform para evitar movimiento */
top: 50% !important;
margin-top: -20px !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.tarjeta-auto .swiper-button-prev::after,
.tarjeta-auto .swiper-button-next::after {
font-size: 18px !important;
font-weight: bold;
}
.tarjeta-auto .swiper-button-prev:hover,
.tarjeta-auto .swiper-button-next:hover {
background-color: var(--color-primario) !important;
color: white !important;
/* Sin transform para que no se mueva */
}
/* Ocultar flechas en móviles y dejar solo swipe táctil */
@media (max-width: 900px) {
.tarjeta-auto .swiper-button-prev,
.tarjeta-auto .swiper-button-next,
.box .swiper-button-prev,
.box .swiper-button-next,
.featured-prev,
.featured-next,
.product-gallery-swiper .swiper-button-next,
.product-gallery-swiper .swiper-button-prev {
display: none !important;
}
/* Ocultar flechas de mini-gallery en móviles - solo swipe táctil */
.mini-gallery .swiper-button-next,
.mini-gallery .swiper-button-prev {
display: none !important;
}
}
/* Sección TOP Selección (carrusel destacado 2 columnas) */
.featured-section-title {
display: flex;
align-items: center;
gap: 10px;
margin: 0 32px 1.2rem;
}
.featured-section-title .pill-top {
background: #00bfae;
color: white;
padding: 0.6rem 1.6rem;
border-radius: 999px;
font-weight: 700;
font-size: 1.6rem;
box-shadow: 0 6px 18px rgba(0, 191, 174, 0.2);
}
.featured-carousel-wrapper {
padding: 0 24px;
position: relative;
margin-bottom: 4rem;
overflow: visible !important; /* permite que las flechas vivan fuera del carrusel */
}
.featured-swiper {
overflow: visible !important; /* Permite que las sombras de tarjetas se vean */
width: 100% !important;
padding: 0 !important;
box-sizing: border-box;
}
.featured-swiper .swiper-wrapper {
width: 100% !important;
box-sizing: border-box;
}
.featured-prev, .featured-next {
left: -90px;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 60px;
border-radius: 12px;
box-shadow: 0 12px 28px rgba(0, 191, 174, 0.35);
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 30;
cursor: pointer;
color: #ffffff;
opacity: 1;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.featured-next {
right: -90px;
}
.featured-prev {
left: -65px !important;
background: #ffffff !important;
width: 50px !important;
height: 50px !important;
color: #666 !important;
border: 1px solid rgba(0,0,0,0.1) !important;
}
.featured-next {
right: -65px !important;
background: #ffffff !important;
width: 50px !important;
height: 50px !important;
color: #666 !important;
border: 1px solid rgba(0,0,0,0.1) !important;
}
.featured-next::after,
.featured-prev::after {
font-size: 20px;
font-weight: bold;
color: #666;
}
.featured-prev i,
.featured-next i {
font-size: 20px;
color: #666;
}
.featured-next:hover,
.featured-prev:hover {
background: #00bfae !important;
box-shadow: 0 4px 12px rgba(0, 191, 174, 0.3);
transform: scale(1.05);
color: white !important;
}
.featured-next:hover i,
.featured-prev:hover i {
color: white !important;
}
/* Ocultar flechas deshabilitadas completamente */
.featured-prev.swiper-button-disabled,
.featured-next.swiper-button-disabled {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
.featured-carousel-wrapper .ads-row.row-2-cols {
gap: 1.6rem;
}
@media (max-width: 900px) {
.featured-section-title {
margin: 0 12px 1rem;
}
.featured-carousel-wrapper {
padding: 0 12px;
margin-bottom: 3rem;
}
}
/* 5. Asegurar que el contenido de la tarjeta se expanda correctamente */
.tarjeta-auto .contenido-auto {
flex-grow: 1;
display: flex;
flex-direction: column;
}
/* === RESPONSIVE PARA RESULTADOS === */
@media (max-width: 1400px) {
.results-inner-wrapper {
grid-template-columns: max-content 1fr;
gap: 4rem;
padding: 2rem 1.5%;
}
}
@media (max-width: 900px) {
.results-inner-wrapper {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 3%;
}
.filters-sidebar {
position: static;
width: 100%;
max-width: 100%;
display: none;
}
}
@media (max-width: 640px) {
.results-inner-wrapper {
padding: 1rem 2%;
}
.box, .tarjeta-auto {
max-width: 100%;
}
}
/* --- ESTILOS PARA PAGINACIÓN --- */
.pagination-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.pagination-controls button {
background-color: var(--color-blanco);
color: var(--color-primario);
border: 1px solid var(--color-primario);
padding: 0.8rem 1.5rem;
border-radius: 0.5rem;
cursor: pointer;
font-size: 1.6rem;
transition: all 0.3s ease;
}
.pagination-controls button:hover:not(:disabled) {
background-color: var(--color-primario);
color: var(--color-blanco);
}
.pagination-controls button.active {
background-color: var(--color-primario);
color: var(--color-blanco);
border-color: var(--color-primario);
font-weight: 600;
}
.pagination-controls button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
/* ============================================
ESTILOS PARA DETALLE DE PRODUCTO
============================================ */
.page-detalle {
background-color: #f5f5f5;
}
.detalle-page-container {
max-width: 1400px;
margin: 30px auto 0;
padding: 0 20px;
}
/* Header del Producto */
.detalle-header {
margin-bottom: 3rem;
padding-left: 0;
/* Alineado con el borde izquierdo de la galería de imágenes */
}
.detalle-header h1 {
font-size: 2.8rem;
color: #0a2342; /* Azul para el título del producto */
margin-bottom: 1rem;
font-weight: 600;
}
.location-info {
display: flex;
align-items: center;
gap: 0.8rem;
font-size: 1.4rem;
color: #4a6fa5; /* Azul suave para ubicación */
}
.location-info i {
color: #0a2342; /* Azul de marca */
}
/* Títulos de secciones en página de detalle */
.page-detalle h2 {
color: #0a2342; /* Azul para títulos de secciones */
font-weight: 600;
}
/* Sección de ubicación del producto */
.product-location-section h2 {
color: #0a2342; /* Azul para títulos */
font-size: 1.3em;
margin-bottom: 15px;
}
/* Sección de reseñas del vendedor */
.seller-reviews-section {
margin-top: 20px;
padding: 20px 0;
}
.seller-reviews-section h2 {
color: #0a2342; /* Azul para títulos */
font-size: 1.5em;
margin-bottom: 15px; /* Reducido para acercar el contenido */
}
/* Estadísticas y lista de reseñas - reducir espacio */
#seller-reviews-stats,
#seller-reviews-list {
margin-top: 5px;
}
/* Mensaje de sin reseñas */
.no-reviews {
font-size: 17px;
color: #4a6fa5; /* Azul intermedio */
text-align: center;
padding: 20px;
}
/* Grid Principal */
.detalle-grid-premium {
display: grid;
grid-template-columns: 3fr 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
/* Galería de Imágenes */
.gallery-container-premium {
background: white;
padding: 0;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.product-gallery-swiper {
width: 100%;
height: 600px;
border-radius: 1.2rem;
overflow: hidden;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
}
/* Mini galería en tarjetas de resultados */
.mini-gallery {
border-radius: 1.2rem !important;
overflow: hidden !important;
}
/* Flechas del carrusel en tarjetas de resultados */
.mini-gallery {
position: relative !important;
}
.mini-gallery .swiper-button-next,
.mini-gallery .swiper-button-prev {
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
background: rgba(0,0,0,0.5) !important;
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
/* Sin margin-top para evitar movimiento */
opacity: 1 !important;
visibility: visible !important;
z-index: 10 !important;
}
/* Ocultar flechas en móvil - solo swipe táctil */
@media (max-width: 768px) {
.mini-gallery .swiper-button-next,
.mini-gallery .swiper-button-prev {
display: none !important;
}
}
.mini-gallery .swiper-button-next::after,
.mini-gallery .swiper-button-prev::after {
font-size: 14px !important;
color: #fff !important;
}
.mini-gallery .swiper-button-next:hover,
.mini-gallery .swiper-button-prev:hover {
background: var(--color-primario) !important;
}
.product-gallery-swiper .swiper-wrapper {
width: 100% !important;
height: 100% !important;
}
.product-gallery-swiper .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
width: 100% !important;
height: 100% !important;
background-color: #f5f5f5;
}
.product-gallery-swiper .swiper-slide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center;
background-color: #f5f5f5;
display: block !important;
}
/* Paginación del carrusel */
.product-gallery-swiper .swiper-pagination {
bottom: 20px !important;
}
/* Atributos del producto junto a la galería */
.attributes-sidebar {
margin-top: 2rem;
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #e9ecef;
}
.attributes-sidebar h3 {
margin: 0 0 1rem 0;
font-size: 1.4rem;
color: #333;
font-weight: 600;
}
.product-gallery-swiper .swiper-pagination-bullet {
background: rgba(255, 255, 255, 0.7);
opacity: 1;
}
.product-gallery-swiper .swiper-pagination-bullet-active {
background: var(--color-primario);
}
/* Botones de navegación */
.product-gallery-swiper .swiper-button-next,
.product-gallery-swiper .swiper-button-prev {
color: var(--color-primario) !important;
background: rgba(255, 255, 255, 0.9);
width: 30px !important;
height: 30px !important;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.product-gallery-swiper .swiper-button-next:hover,
.product-gallery-swiper .swiper-button-prev:hover {
background: var(--color-primario);
color: white !important;
/* Sin transform para evitar movimiento */
}
.product-gallery-swiper .swiper-button-next::after,
.product-gallery-swiper .swiper-button-prev::after {
font-size: 15px !important;
font-weight: bold;
}
/* ============================================
GALERÍA CON MINIATURAS ( NUEVA ESTRUCTURA )
============================================ */
#gallery-wrapper {
display: flex;
flex-direction: column;
gap: 15px;
}
.gallery-main {
width: 100%;
min-height: 100px;
height: auto;
border-radius: 12px;
background: #f5f5f5;
overflow: hidden;
}
.gallery-main img#main-product-image {
width: 100% !important;
height: 100% !important;
min-height: 280px;
max-height: 600px;
object-fit: cover !important;
object-position: center;
display: block !important;
transition: opacity 0.2s ease;
}
.gallery-thumbnails {
display: flex;
flex-wrap: wrap; /* 👈 ESTA ES LA MAGIA: Obliga a saltar de línea */
gap: 10px;
padding: 5px 0;
scroll-behavior: smooth;
width: 100%;
justify-content: flex-start;
}
.gallery-thumbnails img {
width: 80px; /* Tamaño fijo para que sean cuadritos perfectos */
height: 80px;
object-fit: cover; /* Evita que la foto se deforme o se aplaste */
border-radius: 8px; /* Bordes redondeados para elegancia */
cursor: pointer;
flex-shrink: 0; /* Evita que se encojan */
}
.gallery-thumbnails .thumbnail {
flex-shrink: 0;
width: 80px;
height: 80px;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
border: 3px solid transparent;
transition: all 0.2s ease;
opacity: 0.7;
}
.gallery-thumbnails .thumbnail:hover {
opacity: 1;
border-color: #aaa;
}
.gallery-thumbnails .thumbnail.active {
border-color: #00bfae; /* Verde de Mercado Central */
opacity: 1;
box-shadow: 0 2px 8px rgba(0, 191, 174, 0.3);
}
.gallery-thumbnails .thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Scrollbar personalizado para miniaturas */
.gallery-thumbnails::-webkit-scrollbar {
height: 6px;
}
.gallery-thumbnails::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.gallery-thumbnails::-webkit-scrollbar-thumb {
background: #00bfae;
border-radius: 3px;
}
/* Columna de Información */
.info-container-premium {
position: relative;
}
.info-box-sticky {
position: sticky;
top: 20px; /* Ajustado para ser más pegajoso */
background: white;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Sección de Precio */
.price-section {
text-align: center;
padding-bottom: 2.5rem;
border-bottom: 2px solid #f0f0f0;
margin-bottom: 2.5rem;
}
.price-label {
display: block;
font-size: 1.4rem;
color: var(--color-gris);
margin-bottom: 0.5rem;
}
.price {
font-size: 3.5rem; /* Más grande que el título */
font-weight: 700;
color: #000000; /* Color negro para destacar */
margin-bottom: 20px;
}
/* Sección de Visitas - Estilo limpio sin burbujas */
.visits-section {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 0;
background-color: transparent;
border-radius: 0;
margin-top: 15px;
margin-bottom: 15px;
}
.visits-section i.fa-eye {
font-size: 1.9rem;
color: #0a2342; /* Azul de marca */
}
.visits-label {
font-size: 1.9rem;
color: #0a2342;
font-weight: 500;
}
.visits-section .visits {
font-size: 1.9rem;
font-weight: 700;
color: #0a2342;
}
/* Formulario de Contacto */
.contact-seller-box {
background-color: white;
padding: 25px;
border-radius: 12px;
border: 1px solid #eee;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.contact-seller-box h3 {
font-size: 1.8rem;
margin-bottom: 0.5rem;
margin-top: 10px;
color: var(--color-texto);
}
/* Badge de nombre del vendedor - Estilo limpio sin burbuja */
.contact-seller-box .seller-name-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
background-color: transparent;
border-radius: 0;
margin-top: 5px;
margin-bottom: 15px;
border-left: none;
}
.contact-seller-box .seller-name-badge i {
font-size: 1.9rem;
color: #0a2342;
}
.contact-seller-box .seller-name-badge span,
.contact-seller-box .seller-name-badge {
font-size: 1.9rem;
font-weight: 600;
color: var(--color-texto);
}
/* Texto de ayuda de reseñas - Espaciado */
.contact-seller-box .review-seller-section {
margin-top: 15px;
}
.contact-seller-box textarea {
width: 100%;
min-height: 120px;
padding: 1.5rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1.4rem;
font-family: inherit;
resize: vertical;
margin-bottom: 1.5rem;
}
.contact-seller-box textarea:focus {
outline: none;
border-color: var(--color-primario);
}
.contact-seller-box .btn {
width: 100%;
padding: 1.5rem;
background-color: var(--color-primario); /* Asegura el color principal */
color: white;
border: none;
border-radius: 6px;
font-size: 1.6rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
.contact-seller-box .btn:hover {
background-color: var(--color-secundario);
}
/* Botón de WhatsApp */
.btn-whatsapp {
background-color: #25D366 !important;
color: white !important;
border: none;
display: inline-flex !important;
align-items: center;
justify-content: center;
text-align: center;
}
.btn-whatsapp:hover {
background-color: #128C7E !important;
}
.btn-whatsapp i {
color: white !important;
}
/* Botón de Teléfono */
.btn-phone {
display: inline-flex !important;
align-items: center;
justify-content: center;
text-align: center;
}
/* Botón de Email */
.btn-email {
display: inline-flex !important;
align-items: center;
justify-content: center;
text-align: center;
}
/* Descripción */
.description-container {
background: white;
padding: 0rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.description-container h2 {
font-size: 2.4rem;
margin-bottom: 2rem;
}
.description-container p {
font-size: 1.6rem;
line-height: 1.8;
color: var(--color-texto);
}
/* === ESTILOS PARA DETALLES DEL VEHÍCULO === */
.vehicle-details-container {
background: white;
padding: 3rem;
border-radius: 1rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 3rem;
}
.vehicle-specs-grid h2 {
font-size: 2.4rem;
color: var(--color-primario);
margin-bottom: 2rem;
text-align: center;
}
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.spec-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 15px;
background: #f8f9fa;
border-radius: 1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.spec-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(10, 35, 66, 0.1); /* Azul suave */
}
.spec-content {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.spec-label {
font-size: 1.2rem;
color: var(--color-gris);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.spec-value {
font-size: 1.1rem;
color: var(--color-texto);
font-weight: 700;
}
/* Responsive */
@media (max-width: 1024px) {
.detalle-grid-premium {
grid-template-columns: 1fr;
gap: 2rem;
}
.info-box-sticky {
position: static;
}
.specs-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.detalle-header h1 {
font-size: 2.2rem;
}
.main-image-wrapper-premium {
height: 350px;
}
.price {
font-size: 3rem;
}
.detalle-page-container {
padding: 0 15px;
}
.vehicle-details-container {
padding: 2rem 1.5rem;
}
.specs-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.spec-item {
padding: 15px;
gap: 1rem;
min-height: auto;
}
.spec-item i {
font-size: 2rem;
width: 2.5rem;
}
.spec-value {
font-size: 1.1rem;
}
/* Botones de contacto en móvil */
.btn.btn-whatsapp,
.btn.btn-email,
.btn.btn-phone {
padding: 15px;
font-size: 1.1rem;
}
}
.ads-row:last-child {
margin-bottom: 0;
}
.row-2-cols {
grid-template-columns: repeat(2, 1fr);
}
/* Responsive para móviles */
@media (max-width: 768px) {
.row-2-cols,
.row-3-cols,
.row-4-cols {
grid-template-columns: 1fr !important;
gap: 20px;
}
.ads-row .box,
.ads-row .tarjeta-auto,
.ads-row.row-3-cols .box {
width: 100% !important;
max-width: 100% !important;
}
}
.row-4-cols {
grid-template-columns: repeat(4, 1fr);
}
.single-card-row {
display: flex !important;
justify-content: center;
width: 100%;
margin-bottom: 2rem;
}
.single-card-row .box,
.single-card-row .tarjeta-auto {
max-width: 350px;
width: 100%;
}
/* Grid rows should fill available space */
.ads-row.row-2-cols .box,
.ads-row.row-2-cols .tarjeta-auto,
.ads-row.row-3-cols .box,
.ads-row.row-3-cols .tarjeta-auto {
max-width: none;
width: 100%;
}
/* ========== SISTEMA DE DESTACADOS ========== */
/* Tarjetas Premium - Sin borde, solo sombra */
.card-premium {
border: none !important;
box-shadow: 0 4px 15px rgba(192,192,192,0.3);
position: relative;
overflow: hidden !important;
}
/* Tarjetas Destacadas - Sin borde dorado */
.card-destacado {
box-shadow: 0 4px 15px rgba(255,215,0,0.2);
position: relative;
overflow: hidden !important;
}
/* Asegurar que las tarjetas tengan position relative */
.box, .tarjeta-auto, .plan-card { /* Añadido .plan-card */
position: relative;
overflow: hidden !important; /* Cambiado a hidden para evitar espacios */
min-height: 380px; /* Aumentar la altura mínima de la tarjeta para más espacio */
}
/* Ajuste para el header de las tarjetas de plan para evitar que el badge se superponga al título */
.plan-card .plan-header {
padding-top: 50px; /* Aumentar el padding superior para dejar espacio al badge */
padding-left: 50px; /* Espacio para badges a la izquierda */
padding-right: 50px; /* Espacio para badges a la derecha */
}
/* Nuevos estilos para la estructura de la tarjeta */
.property-seller-name {
font-size: 16px;
color: #666;
margin-bottom: 5px;
}
.property-price-and-tag {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.property-price-and-tag .vendor-avatar {
margin-left: auto;
flex-shrink: 0;
}
.tag-oportunidad {
background-color: #8a2be2;
color: white;
font-size: 12px;
font-weight: 500;
padding: 4px 10px;
border-radius: 4px;
}
.property-description {
font-size: 14px;
color: #555;
line-height: 1.5;
margin-top: 5px;
margin-bottom: 10px;
}
/* CORREGIR ESPACIADO DE TEXTO - Agregar/Modificar en style.css */
.property-title {
font-size: 20px;
font-weight: 600;
color: #333;
margin-bottom: 10px;
line-height: 1.3;
letter-spacing: normal !important; /* Corrige espaciado entre letras */
word-spacing: normal !important; /* Corrige espaciado entre palabras */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.property-location {
font-size: 15px;
color: #666;
display: flex;
align-items: center;
margin-bottom: 10px;
letter-spacing: normal !important;
word-spacing: normal !important;
}
.property-attributes {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 15px 0;
font-size: 14px;
color: #666;
letter-spacing: normal !important;
word-spacing: normal !important;
}
.property-attributes span {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap; /* Evita que el texto se separe */
letter-spacing: normal !important;
}
/* Reset general para todas las tarjetas - Eliminado para permitir herencia de cards.css */
/* Reglas de fuentes eliminadas - ahora controladas por cards.css */
/* CORREGIR LAYOUT DE RESULTADOS - Los estilos ahora están en results.css */
/* Comentado para permitir que results.css controle el diseño responsive */
/*
#results-container {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 25px !important;
padding: 0 !important;
margin: 0 !important;
width: 100%;
}
.results-container-flex {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 20px !important;
padding-bottom: 1rem;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.results-container-flex .tarjeta-auto {
flex: 0 0 280px !important;
max-width: 280px !important;
scroll-snap-align: start;
}
/* === ESTILOS ESPECÍFICOS PARA LA PÁGINA DE AUTENTICACIÓN (LOGIN/REGISTRO) === */
/* 1. Centrar el Contenido en la Pantalla */
body#pagina-login {
/* Eliminamos el flexbox del body para que el navbar y footer no se vean afectados */
/* display: flex; */
/* justify-content: center; */
/* align-items: center; */
min-height: 100vh; /* Asegura que ocupe toda la altura de la ventana */
margin: 0;
padding: 0; /* Reset padding to allow navbar/footer to span full width */
background-color: #f4f6f9; /* Fondo ligero */
}
/* Nuevo contenedor para centrar el formulario de login */
.login-center-container {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1; /* Permite que ocupe el espacio restante entre navbar y footer */
padding: 20px; /* Añadir padding aquí en lugar del body */
}
/* 2. Estilo de la Tarjeta (form-box) */
.form-box {
background-color: #ffffff;
padding: 25px 35px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 800px;
min-width: 350px;
text-align: center;
}
/* Responsive para móviles */
@media (max-width: 600px) {
.form-box {
padding: 20px;
min-width: auto;
width: 90% !important;
margin: 20px auto !important;
}
.login-center-container {
padding: 0;
}
}
/* 3. Estilos Internos */
.form-box h2 {
margin-bottom: 30px;
color: #2c3e50;
font-size: 2rem;
}
.form-box input {
width: 100%;
padding: 12px 15px !important;
margin-bottom: 20px !important;
border: 1px solid #ccc;
border-radius: 10px !important;
box-sizing: border-box; /* Importante para el padding */
font-size: 1rem;
}
.form-box button[type="submit"] {
width: 100%;
padding: 12px;
background-color: #00bfae; /* Color principal (Turquesa) */
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 1.1rem;
font-weight: 700;
transition: background-color 0.3s;
margin-top: 30px !important;
}
.form-box button[type="submit"]:hover {
background-color: #00a093;
}
.form-box p {
margin-top: 20px;
font-size: 0.95rem;
color: #666;
}
.form-box a {
color: #00bfae;
text-decoration: none;
font-weight: 600;
}
/* === CONTENEDOR DE CÓDIGO DE INVITACIÓN === */
.invitation-container {
margin: 1rem 0;
padding: 1rem;
background: #f0f9ff;
border-radius: 5px;
}
/* === ESTILOS PARA LA GALERÍA DE IMÁGENES (Vistas Previas) === */
/* Contenedor principal de todas las vistas previas (si existe) */
.gallery-previews-container {
display: flex;
flex-wrap: wrap; /* Permite que las imágenes fluyan a la siguiente línea */
gap: 10px; /* Espacio entre cada vista previa */
padding: 10px 0;
}
/* Contenedor individual de cada imagen (div.gallery-preview-item) */
.gallery-preview-item {
position: relative;
width: 100px; /* Tamaño fijo deseado para el ancho */
height: 100px; /* Tamaño fijo deseado para la altura */
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden; /* Oculta cualquier parte de la imagen que exceda el tamaño del contenedor */
}
/* La Imagen (img.gallery-img) */
.gallery-img {
width: 100%;
height: 100%;
object-fit: cover; /* ¡CLAVE! Asegura que la imagen llene el contenedor sin deformarse */
display: block;
}
/* Botón de eliminar (ajuste de posición) */
.delete-image-btn {
position: absolute;
top: 5px;
right: 5px;
background-color: rgba(0, 0, 0, 0.6);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
padding: 3px 6px;
line-height: 1;
z-index: 10;
}
.simple-badge-svg {
width: 35px;
height: 35px;
position: absolute;
top: 8px;
left: 8px;
z-index: 15;
overflow: visible;
filter:
drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.center-star {
stroke: none;
transform-origin: 50% 50%;
}
/* Aro de estrella con colores metálicos */
.edge-star {
fill: #f5f5f5;
opacity: 0.75;
transform-origin: center;
}
/* Colores del aro estrella - aro solamente */
.bronze-badge .badge-star-bg { fill: #8b5220; }
.bronze-badge .badge-center-star { stroke: #8b5220; }
.silver-badge .badge-star-bg { fill: #5a5a5a; }
.silver-badge .badge-center-star { stroke: #5a5a5a; }
.gold-badge .badge-star-bg { fill: #7a5c1a; }
.gold-badge .badge-center-star { stroke: #7a5c1a; }
.diamond-badge .badge-star-bg { fill: #6b7a8a; }
.diamond-badge .badge-center-star { stroke: #6b7a8a; }
/* ✅ ESTILOS PARA ANUNCIOS VENDIDOS */
.badge-sold-home {
position: absolute;
top: 15px;
right: 15px;
background: linear-gradient(135deg, #dc3545, #c82333);
color: white;
padding: 8px 12px;
border-radius: 20px;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 20;
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
display: flex;
align-items: center;
gap: 5px;
}
.badge-sold-home i {
font-size: 0.9rem;
}
/* Tarjeta vendida - efecto visual */
.box.card-sold,
.tarjeta-auto.card-sold {
background: #f8f9fa;
opacity: 0.85;
}
.box.card-sold:hover,
.tarjeta-auto.card-sold:hover {
transform: translateY(-0.5rem);
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
/* Imagen con filtro para vendidos */
.image-container.image-sold {
filter: grayscale(80%) brightness(0.85);
}
/* Contenido con efecto para vendidos */
.content.content-sold {
opacity: 0.9;
}
/* Container para descripción y avatar */
.description-with-avatar {
display: flex;
gap: 15px;
align-items: flex-start;
margin-top: 10px;
margin-bottom: 10px;
}
.description-with-avatar .property-description {
flex: 1;
margin-top: 0;
margin-bottom: 0;
}
/* ============================================
AVATAR DEL VENDEDOR (Global para todas las tarjetas)
CAMISA DE FUERZA 48px - Prohibido estirarse
============================================ */
.vendor-avatar {
position: relative;
width: 56px !important;
height: 56px !important;
min-width: 56px !important;
min-height: 56px !important;
max-width: 56px !important;
max-height: 56px !important;
flex-shrink: 0;
border-radius: 50% !important;
background: white;
border: none;
overflow: hidden !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: all 0.3s ease;
z-index: 20;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.vendor-avatar:hover {
transform: scale(1.15);
box-shadow: 0 6px 20px rgba(0, 191, 174, 0.3);
}
.vendor-name-tooltip {
position: absolute;
bottom: -35px;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 1.2rem;
white-space: nowrap;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.vendor-avatar:hover .vendor-name-tooltip {
opacity: 1;
}
/* ============================================
AVATAR - INVISIBLE PERO CON ESPACIO RESERVADO
(Cuando no hay foto, el hueco se queda vacío)
============================================ */
/* Por defecto, el avatar es invisible pero ocupa espacio */
.vendor-avatar {
visibility: hidden;
opacity: 0;
transition: all 0.3s ease;
}
/* SOLO cuando hay imagen, se muestra */
.vendor-avatar.has-image {
visibility: visible !important;
opacity: 1 !important;
}
/* ================================================= */
/* === SEGURO DE ALINEACIÓN - ESPACIO RESERVADO PARA AVATAR === */
/* Esto garantiza que si un usuario no sube foto, la tarjeta no se encoja */
/* ================================================= */
/* ESPACIO RESERVADO PARA EL AVATAR (Haya o no haya foto) */
.price-row {
min-height: 60px !important; /* Reservamos el hueco aunque esté vacío */
margin-bottom: 8px;
display: flex;
align-items: center;
}
/* ================================================= */
/* ========== MODAL DE SELECCIÓN DE PLANES ========== */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.show {
opacity: 1;
}
.modal-content {
background: white;
border-radius: 1.6rem;
padding: 40px;
max-width: 1200px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.plan-modal .modal-header {
text-align: center;
margin-bottom: 40px;
}
.plan-modal .modal-header h2 {
font-size: 32px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.plan-modal .modal-subtitle {
font-size: 16px;
color: #666;
margin: 0;
}
.plans-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 20px;
}
.plan-option {
border: 2px solid #e0e0e0;
border-radius: 1.2rem;
padding: 25px;
text-align: center;
transition: all 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
background: #fff;
}
.plan-option:hover {
border-color: var(--color-primario);
box-shadow: 0 8px 20px rgba(41, 128, 185, 0.15);
transform: translateY(-5px);
}
.plan-option.plan-free {
background: #f9f9f9;
}
.plan-option.plan-basico {
border: 2px solid var(--color-primario);
background: linear-gradient(135deg, rgba(41, 128, 185, 0.05) 0%, rgba(41, 128, 185, 0.02) 100%);
}
.plan-option.plan-premium {
background: #f9f9f9;
}
.plan-option.plan-destacado {
background: #f9f9f9;
}
.plan-option.plan-top {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.02) 100%);
border: 2px solid rgba(255, 215, 0, 0.5);
}
.plan-badge {
display: inline-block;
background: var(--color-primario);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 10px;
text-transform: uppercase;
}
.plan-option h3 {
font-size: 22px;
font-weight: 700;
color: #333;
margin: 10px 0;
}
.plan-price {
font-size: 28px;
font-weight: 700;
color: var(--color-primario);
margin: 15px 0 10px;
}
.plan-price span {
font-size: 14px;
color: #666;
font-weight: 400;
}
.plan-features {
list-style: none;
padding: 0;
margin: 20px 0;
text-align: left;
flex-grow: 1;
}
.plan-features li {
padding: 8px 0;
font-size: 14px;
color: #555;
border-bottom: 1px solid #eee;
}
.plan-features li:last-child {
border-bottom: none;
}
.plan-features li:before {
content: '';
margin-right: 8px;
}
.btn-plan {
padding: 12px 24px;
border: none;
border-radius: 0.8rem;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: auto;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-plan-free {
background: #e0e0e0;
color: #333;
}
.btn-plan-free:hover {
background: #d0d0d0;
transform: scale(1.05);
}
.btn-plan-paid {
background: var(--color-primario);
color: white;
}
.btn-plan-paid:hover {
background: #1f5a96;
transform: scale(1.05);
}
.btn-close-modal {
position: absolute;
top: 20px;
right: 20px;
background: none;
border: none;
font-size: 28px;
color: #999;
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.btn-close-modal:hover {
color: #333;
transform: rotate(90deg);
}
/* =========================================================
BADGES DE PLANES (CORONAS: Bronce, Plata, Oro, Diamante)
========================================================= */
/* Contenedor para la corona sobre la imagen (con fondo blanco) */
.card-crown-badge {
position: absolute;
top: 8px;
left: 8px;
z-index: 100 !important;
background-color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
/* Ajuste del icono de la corona */
.card-crown-badge i {
font-size: 2.2rem !important;
margin: 0 !important;
}
/* Badge base para los planes */
.badge {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Badge Básico - Bronce */
.badge-basico {
background: linear-gradient(135deg, #cd7f32, #8b5a2b);
color: #fff;
}
/* Badge Premium - Plata */
.badge-premium {
background: linear-gradient(135deg, #c0c0c0, #808080);
color: #333;
}
/* Badge Top - Oro */
.badge-top {
background: linear-gradient(135deg, #ffd700, #b8860b);
color: #333;
}
/* Badge Elite - Diamante */
.badge-elite {
background: linear-gradient(135deg, #b9f2ff, #4682b4);
color: #fff;
}
/* 1. PLAN BÁSICO: Corona de Bronce */
.crown-bronze {
color: #cd7f32 !important;
}
/* 2. PLAN PREMIUM: Corona de Plata */
.crown-silver {
color: #847b7b !important;
}
/* 3. PLAN TOP/DESTACADO: Corona de Oro */
.crown-gold {
color: #ffb906 !important;
}
/* 4. PLAN ELITE/MÁXIMO: Corona de Diamante */
.crown-diamond {
color: #b9f2ff !important;
text-shadow: 1px 1px 0px #4682b4, -1px -1px 0px #ffffff !important;
filter: drop-shadow(0 0 6px rgba(185, 242, 255, 0.8)) !important;
}
/* Responsivo */
@media (max-width: 768px) {
.modal-content {
padding: 25px;
width: 95%;
}
.plan-modal .modal-header h2 {
font-size: 24px;
}
.plans-container {
grid-template-columns: 1fr;
gap: 15px;
}
.plan-option {
padding: 20px;
}
.plan-option h3 {
font-size: 18px;
}
.plan-price {
font-size: 24px;
}
}
/* ===== OPTIMIZACIÓN COMPLETA PARA MÓVILES ===== */
@media (max-width: 768px) {
/* Tarjetas responsivas */
.box {
border-radius: 8px;
overflow: hidden;
}
.results-inner-wrapper {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1rem 0;
}
.filters-sidebar {
display: none;
}
/* Eliminadas reglas de height fijo para property-image - ahora controladas por cards.css */
.box .content, .property-details {
padding: 12px !important;
}
.box h3, .property-title {
font-size: 1.8rem !important;
margin-bottom: 4px !important;
}
.box .price, .property-price {
font-size: 2rem !important;
margin-bottom: 0 !important;
color: #008080 !important;
}
.box .location, .property-location {
font-size: 1.2rem !important;
margin-bottom: 6px !important;
font-weight: 400 !important;
color: #777 !important;
}
.box .location i, .property-location i {
font-size: 1rem !important;
color: #888 !important;
}
.box .description, .property-description {
display: none !important;
}
/* Solo 3 atributos en móvil */
.box .content .property-details span:nth-child(n+4),
.property-attributes span:nth-child(n+4) {
display: none !important;
}
.box .content .property-details,
.property-attributes,
.vehicle-details,
.real-estate-details {
gap: 0.6rem !important;
margin-bottom: 8px !important;
font-size: 1.3rem !important;
color: #444 !important;
font-weight: 500 !important;
}
.box .content .property-details i,
.vehicle-details i,
.real-estate-details i {
font-size: 1.1rem !important;
color: #666 !important;
}
/* Botones más grandes para móvil */
.btn {
padding: 0.8rem 1.2rem;
font-size: 1rem;
border-radius: 6px;
}
/* Swiper con flechas más visibles */
.swiper-button-next, .swiper-button-prev {
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
}
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 20px;
}
/* Tarjeta de atributos más compactos */
.vehicle-details, .real-estate-details, .electronics-details,
.home-furniture-details, .fashion-details, .sports-details,
.pets-details, .services-details, .business-details, .community-details {
flex-wrap: wrap;
gap: 0.8rem;
margin-bottom: 0.8rem;
}
.vehicle-details span, .real-estate-details span, .electronics-details span,
.home-furniture-details span, .fashion-details span, .sports-details span,
.pets-details span, .services-details span, .business-details span, .community-details span {
font-size: 1rem;
}
.vehicle-details i, .real-estate-details i, .electronics-details i,
.home-furniture-details i, .fashion-details i, .sports-details i,
.pets-details i, .services-details i, .business-details i, .community-details i {
font-size: 1.3rem;
}
/* Badge más pequeño */
.simple-badge-svg {
width: 50px;
height: 50px;
}
/* Avatar del vendedor */
.vendor-avatar {
width: 52px;
height: 52px;
}
.vendor-avatar-img {
width: 52px;
height: 52px;
}
.logo-text {
font-size: 1.2rem;
}
.nav-btn-user, .nav-btn-guest {
padding: 0.5rem 0.8rem;
font-size: 0.9rem;
}
/* Spacing mejorando */
main.container {
padding: 1rem;
}
/* Tarjetas de resultado más compactas */
.results-container-flex {
flex-wrap: nowrap !important;
gap: 1rem;
}
.results-container-flex .tarjeta-auto {
flex: 0 0 240px !important;
max-width: 240px !important;
}
}
@media (max-width: 480px) {
/* Ultra responsive para screens muy pequeños */
.box .image-container {
height: 150px;
}
.results-page-container {
padding: 1rem 0;
}
.results-inner-wrapper {
grid-template-columns: 1fr;
gap: 0;
padding: 0;
}
.results-container-flex {
flex-wrap: nowrap !important;
}
.results-container-flex .tarjeta-auto {
flex: 0 0 200px !important;
max-width: 200px !important;
}
.filters-sidebar {
display: none;
}
.box h3, .property-title {
font-size: 1.6rem !important;
}
.box .price, .property-price {
font-size: 2rem !important;
}
.box .content, .property-details {
padding: 0.8rem;
}
.btn {
width: 100%;
padding: 0.7rem 1rem;
}
.vehicle-details, .real-estate-details, .electronics-details,
.home-furniture-details, .fashion-details, .sports-details,
.pets-details, .services-details, .business-details, .community-details {
gap: 0.5rem;
margin-bottom: 0.5rem;
}
/* Badge más discreto */
.simple-badge-svg {
width: 40px;
height: 40px;
}
/* Esconder detalles menos importantes en muy pequeño */
.vendor-avatar {
width: 40px;
height: 40px;
}
.vendor-avatar-img {
width: 40px;
height: 40px;
}
.nav-btn-user, .nav-btn-guest {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
main.container {
padding: 0.8rem;
}
/* Galería swiper más pequeña */
.swiper-button-next, .swiper-button-prev {
width: 35px;
height: 35px;
}
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 18px;
}
}
/* ========== MODAL DE RESE�AS ========== */
.review-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.review-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.review-modal {
background: white;
border-radius: 12px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
transform: scale(0.9);
transition: transform 0.3s ease;
}
.review-modal-overlay.active .review-modal {
transform: scale(1);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
border-bottom: 1px solid #eee;
}
.modal-header h3 {
margin: 0;
font-size: 1.8rem;
color: #333;
}
.modal-close {
background: none;
border: none;
font-size: 24px;
color: #666;
cursor: pointer;
padding: 4px;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.modal-close:hover {
background-color: #f5f5f5;
color: #333;
}
.modal-body {
padding: 24px;
}
.rating-section,
.comment-section {
margin-bottom: 20px;
}
.rating-section label,
.comment-section label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.star-rating-container {
margin-bottom: 16px;
}
.star-rating {
display: flex;
gap: 4px;
}
.star {
font-size: 24px;
color: #ddd;
cursor: pointer;
transition: color 0.2s;
}
.star.active {
color: #ffd700;
}
.star:hover {
color: #ffd700;
}
.rating-text {
margin-top: 8px;
font-size: 14px;
color: #666;
}
.comment-section textarea {
width: 100%;
min-height: 100px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-family: inherit;
font-size: 14px;
resize: vertical;
transition: border-color 0.2s;
}
.comment-section textarea:focus {
outline: none;
border-color: #00bfae;
}
.char-counter {
text-align: right;
font-size: 12px;
color: #666;
margin-top: 4px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
padding: 20px 24px;
border-top: 1px solid #eee;
}
.btn-secondary,
.btn-primary {
padding: 10px 20px;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: none;
font-size: 14px;
}
.btn-secondary {
background: #f5f5f5;
color: #666;
border: 1px solid #ddd;
}
.btn-secondary:hover {
background: #e9e9e9;
}
.btn-primary {
background: #00bfae;
color: white;
}
.btn-primary:hover:not(:disabled) {
background: #16a085;
}
.btn-primary:disabled {
background: #ccc;
cursor: not-allowed;
}
/* Responsive */
@media (max-width: 768px) {
.review-modal {
width: 95%;
margin: 20px;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 16px 20px;
}
.modal-header h3 {
font-size: 1.6rem;
}
}
/* ========== ESTILOS PARA LISTA DE RESEÑAS ========== */
.review-item {
background: #fff;
border-radius: 12px;
padding: 16px;
margin-bottom: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #eee;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.reviewer-info {
display: flex;
align-items: center;
gap: 12px;
}
.reviewer-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #00bfae;
}
.reviewer-details {
display: flex;
flex-direction: column;
}
.reviewer-name {
font-weight: 600;
color: #333;
font-size: 14px;
}
.review-date {
font-size: 12px;
color: #888;
}
.review-rating {
display: flex;
gap: 2px;
}
.review-rating i {
font-size: 14px;
color: #ffd700;
}
.review-comment {
font-size: 14px;
color: #555;
line-height: 1.6;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
}
/* Estadísticas de reseñas */
.review-stats {
background: #f9f9f9;
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
}
.review-stats.empty {
text-align: center;
padding: 30px;
}
.average-rating {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 16px;
}
.average-rating .rating-number {
font-size: 48px;
font-weight: 700;
color: #333;
}
.average-rating .stars {
display: flex;
gap: 4px;
margin: 8px 0;
}
.average-rating .stars i {
font-size: 20px;
color: #ffd700;
}
.average-rating .total-reviews {
font-size: 14px;
color: #666;
}
.rating-breakdown {
display: flex;
flex-direction: column;
gap: 8px;
}
.rating-bar {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
}
.rating-bar .star-count {
width: 12px;
text-align: right;
}
.rating-bar .bar {
flex: 1;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
}
.rating-bar .fill {
height: 100%;
background: #00bfae;
border-radius: 4px;
transition: width 0.3s ease;
}
.rating-bar .count {
width: 24px;
text-align: right;
color: #666;
}
/* ========== SISTEMA DE LIKES ========== */
.card-actions {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
}
.like-btn {
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 20px;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
.like-btn:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.05);
}
.like-btn.liked {
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(231, 76, 60, 0.5);
}
.like-btn.liked i {
color: #e74c3c;
}
.like-btn i {
font-size: 16px;
color: #666;
transition: all 0.2s ease;
}
.likes-count {
font-weight: 600;
color: #333;
min-width: 12px;
text-align: center;
}