body {
  box-sizing: border-box;
  margin: 0;
  padding: 0; 
  --background-color: #F4F7F6;
  --color-textos-grandes: #1ab359;
  --color-textos-pequeños: #2C3E50;
  --hovers: #34495E;
  --fuente-grande: 'Montserrat';
  --fuente-pequeña: 'Open Sans', sans-serif;
  background-color: var(--background-color);
}


/* ------------- SECCIÓN IDENTIDAD ---- */
.site-identity {
  text-align: center;
  padding: 12px 10px;
  background: var(--background-color);
}


.site-identity img {
  max-width: 250px;
  width: 100%;
  height: 60px;
}
/* ------------- SECCIÓN IDENTIDAD END ---- */



/*--------------------- SECCION DE BUSCADOR -------- */

.search-container {
  position: relative;
  max-width: 600px; 
  margin: 0 auto;
  padding: 6px 10px;
}

.search-container input {
  margin-top: 10px;
  width: 100%;
  padding: 15px 20px;
  border: 1px solid transparent; 
  border-radius: 30px;
  font-size: 1rem;
  box-sizing: border-box;
  outline: none;
  box-shadow: 0 4px 12px rgba(117, 117, 117, 0.1);
}


.search-container button {
  margin-top: 5px;
  margin-right: 5px;
  position: absolute;
  right: 10px; /* Ajustado para que quepa bien el botón */
  top: 50%;
  transform: translateY(-50%); /* Centrado vertical perfecto */
  background: none;
  border: none;
  border-radius: 50%;
  background-color: #2ECC71;
  color: #fff;
  cursor: pointer;
  padding: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*--------------------- SECCION DE BUSCADOR END-------- */

/* -----------------SECCION BANNER PREMIUM INDEX------------- */

.slider-wrapper {
  width: 100%;
  padding: 10px 0;
  background: #f4f4f4;
  padding: 15px;
}

.premium-hero-slider {
  position: relative;
  width: 100%;
  height: 225px; /* Altura para móvil */
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
  border-radius: 15px;
}


.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; 
object-fit: fill;
border-radius: 15px;
}

.slide a {
  display: block;
  width: 100%;
  height: 100%;
}

/* Flechas */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: white;
  border: none;
  padding: 17px 5px;
  cursor: pointer;
  z-index: 10;
  display: none; /* Se ocultan por defecto */
}

.prev { left: 0; border-radius: 0 5px 5px 0; }
.prev:hover { background-color: #111; }
.next { right: 0; border-radius: 5px 0 0 5px; }
.next:hover { background-color: #111; }


/* Contenedor de indicadores */
.slider-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 15;
}

/* Estilo de las barritas (Dots) */
.dot {
    width: 12px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Barrita activa: se vuelve blanca y más larga */
.dot.active {
    background: #ff4242;
    width: 25px;
}

/* Sombra suave para que se vean sobre fotos claras */
.slider-indicators .dot {
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.premium-hero-slider {
    /* ... tus otros estilos ... */
    touch-action: pan-y; /* Permite scroll arriba/abajo, pero libera el movimiento lateral para JS */
    user-select: none;   /* Evita que se seleccione el texto o imagen al deslizar */
}

/* Evita que el navegador intente "arrastrar" la imagen como un archivo */
.premium-hero-slider img {
    pointer-events: none; 
    -webkit-user-drag: none;
}

/* --- AJUSTES PARA TABLET/DESKTOP --- */
@media (min-width: 768px) {
  .premium-hero-slider {
    max-width: 900px; /* Menos ancho en PC */
    height: 350px;    /* Más "largo" (alto) en PC */
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);    
  }
}

@media (min-width: 768px) {
  .nav-btn { display: block; }  /*Solo aparecen en pantallas grandes */
}

/* ---------------SECCION BANNER PREMIUM INDEX END------------ */

/* ---------------------------MAIN WRAPPER------------- */ 

.home-main {
  padding: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  margin-bottom: 20px;
}

.section-title h2 { font-size: 1.4rem; color: #2c3e50; margin: 0; }
.section-title span { color: #2ECC71; font-size: 0.9rem; font-weight: bold; }

/* ------ CONFIGURACIÓN DEL GRID ------- */
.ads-grid {
  display: grid;
  /* Forzamos a que el mínimo sea 0 para que ninguna columna empuje a la otra */
  grid-template-columns: repeat(2, minmax(0, 1fr)); 
  gap: 15px;
  width: 100%; /* Aseguramos que ocupe todo el ancho disponible */
}

.ads-grid a{
  text-decoration: none;
}


/* -------------- ESTILO DE LAS TARJETAS ------------ */

.ad-card {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
  height: 100%; /* NUEVO: Obliga a que todas las tarjetas en una fila midan exactamente lo mismo */
}


/* El botón del corazón */
.btn-card-fav {
    position: absolute;
    bottom: 5px;    /* 10px desde arriba */
    left: 5px;  /* 10px desde la derecha */
    background: rgba(255, 255, 255, 0.7); /* Fondo blanco semi-transparente */
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30; /* Por encima de la imagen y del Premium */
    transition: all 0.2s ease;
    color: #777; /* Color gris suave por defecto */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    padding: 0;
}

.btn-card-fav:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
}

/* Icono dentro del botón */
.btn-card-fav .material-symbols-outlined {
    font-size: 20px;
    transition: color 0.2s ease;
    /* Para Material Symbols: Relleno vs Línea */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Estado ACTIVO (Favorito guardado) */
.btn-card-fav.active {
    color: #e74c3c; /* Color Rojo */
}

/* Llenamos el corazón rojo */
.btn-card-fav.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1; /* Rellena el icono */
}

/* El botón del corazón END*/


.ad-card:hover {
  transform: translateY(-5px);
}


.card-title {
  padding-top: 5px;
  font-size: 0.85rem;
  margin: 0 0 5px;
  color: #222;
  /* Truncado a 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.card-img {
  position: relative;
  width: 100%;
  padding-top: 100%; /* EL TRUCO MAESTRO: Esto fuerza un cuadrado perfecto 1:1 infalible */
 /* aspect-ratio: 1 / 1;   Cuadradas para que se vean ordenadass */
  overflow: hidden; /* EL SECRETO: Esconde cualquier pedazo de foto que intente salirse */
  background-color: #f8f9fa; /* Un fondito gris por si la foto tarda en cargar */
  flex-shrink: 0; /* Evita que Flexbox intente reducir este contenedor */
}

.card-img img { 
  position: absolute; /* Saca la imagen del flujo para que no pueda empujar los bordes */
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
}


.tag-category {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,0.9);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: bold;
  color: #555;
}

.card-info { padding: 12px; flex-grow: 1; }

.card-price {
  font-size: 1.1rem;
  font-weight: bold;
  color: #2ECC71;
  margin: 0;
}

.card-location {
  font-size: 0.75rem;
  color: #888;
  display: flex;
  align-items: center;
  gap: 3px;
}

.card-location .material-symbols-outlined {
  color: #000000;
}

/* --- BOTÓN BACK TO TOP --- */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 20px;
  background-color: #2c3e50;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  opacity: 0; /* Invisible al inicio */
  transition: 0.3s;
  z-index: 2000;
  visibility: hidden;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

@keyframes shimmer {
  /* El movimiento ocurre en el primer 28% del tiempo (aprox. 2 segundos de 7) */
  0% { transform: translateX(-100%); }
  28% { transform: translateX(100%); }
  
  /* El resto del tiempo hasta el 100% se queda estático (los 5 segundos de pausa) */
  100% { transform: translateX(100%); }
}

div[style*="linear-gradient"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6), /* Subí un poco la opacidad para que se note más el destello */
    transparent
  );
  
  /* Cambiamos el tiempo total a 7 segundos */
  animation: shimmer 7s infinite linear; 
}


/* TABLET: 3 columnas */
@media (min-width: 768px) {
  .ads-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* DESKTOP: Máximo 4 columnas */
@media (min-width: 1024px) {
  .ads-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}

/* --------CINTILLA-------------------- */
.pagination-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 40px 0;
}

.pag-num, .pag-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: 0.3s;
}

.pag-num.active {
  background-color: #2ECC71;
  color: white;
  border-color: #2ECC71;
}

.pag-num:hover:not(.active) {
  background-color: #f0f0f0;
}

/* --------CINTILLA END-------------------- */


/* -----------------MAIN WRAPPER END------------- */ 


/* ------------FOOTER-------------------------------------- */

.footer-universal {
  background-color: #2c3e50; /* Color oscuro profesional */
  color: #ecf0f1;
  padding: 50px 20px 20px;
  font-family: 'Inter', sans-serif;
  margin-top: 50px;
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  /* En móvil una columna, en tablet 2, en PC 4 */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
}

.footer-section h4 {
  color: #2ECC71; /* Tu verde */
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 10px;
}

.footer-section a {
  color: #bdc3c7;
  text-decoration: none;
  transition: 0.3s;
}

.footer-section a:hover {
  color: white;
  padding-left: 5px; /* Pequeño efecto de movimiento */
}


/* Barra inferior */
.footer-bottom {
  border-top: 1px solid #3e4f5f;
  margin-top: 40px;
  padding-top: 20px;
  text-align: center;
  font-size: 0.8rem;
  color: #95a5a6;
  position: relative;
}

.btn-top {
  position: absolute;
  right: 0;
  top: 15px;
  background-color: #34495e;
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.btn-top:hover {
  background-color: #2ECC71;
}

.social-link img {
  width: 40px;
  height: 40px;
}

/* ------------FOOTER END---------------------- */