/* index-style.css */
h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 22px;
    color: #FF6600;
    display: block;
    margin: 15px 0;
    font-weight: 600;
	line-height: 1.3;        /* Mejora la lectura si el título ocupa dos líneas */
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px; /* Un poco más grande que antes para que destaque */
    color: #0000FF;
    display: block;
    margin: 10px 0;
	font-weight: 500;
}

h3 {
	font-family:Verdana; 
	FONT-SIZE: 8pt; 
	COLOR: #0000FF; 
	display: block;  /* Antes inline; */
}

.titulo-ultimos-top {
    background-color: #FFCC00; /* Tu amarillo corporativo */
    width: 100%;
    padding: 8px 0;           /* Espaciado arriba y abajo */
    display: flex;
    align-items: center;
    box-sizing: border-box;    /* Evita problemas de ancho con el padding */
}

.titulo-ultimos-top h2 {
    margin: 0;            /* Quitamos el margen de 10px para que no rompa el diseño */
    padding-left: 20px;
    color: #0000FF;          /* El negro  #000 sobre amarillo se lee mucho mejor que el azul */
    font-size: 16px;      /* Si quieres que aquí sea un pelín más grande que el h2 normal poner 18px*/
    /* No hace falta poner font-family porque ya lo hereda del h2 general */
}

/* Título (Descripción corta) */
.campo-titulo {
    display: block;             /* Para que ocupe su propia línea */
    font-family: 'Poppins', sans-serif;
    font-size: 14px;            /* Tamaño claro y legible */
    font-weight: 600;           /* Semi-negrita */
    margin: 2px 0 2px 0;        /* Espacio arriba y abajo */
    line-height: 1.1;           /* Altura de línea para títulos de dos líneas */
}

.campo-titulo a {
    text-decoration: none;      /* Quita el subrayado feo */
    color: #1a4fd8 !important;     /* Color azul de titulo */
    transition: color 0.2s ease;     /* Efecto suave al pasar el ratón */
}

/* Solo para escritorio: al pasar el ratón cambia a un gris oscuro */
.campo-titulo a:hover {
    color: #333333 !important;
}

/* Ajuste específico para móviles (pantallas pequeñas) */
@media (max-width: 600px) {
    .campo-titulo {
        font-size: 13px; /* Un pelín más pequeño en móviles para que no rompa líneas */
    }
}

/* Descripción (El texto largo) */
.campo-anuncio {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #555555;		/* Gris oscuro suave #555555, negro: #555 */
    line-height: 1.2;
	margin-bottom: 2px; /* Espacio con el precio */
    display: block;          /* Se asegura de que empuje al precio hacia abajo */
}

/* El precio se mantiene igual */
.campo-precio {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #1a4fd8; /* Azul moderno, (Original era #0000FF) */
    margin-top: 12px;  /* Ajusta este número: más alto = más abajo irá el precio */
	display: block;
}

/* Estilo para la etiqueta CV (Vendo, Compro, etc.) */
.campo-cv {
    align-self: flex-start;    /* Alinea a la izquierda dentro de la caja flex */
    padding: 3px 10px;
    font-size: 0.65rem;        /* Tamaño equilibrado 0.75rem */
    font-weight: 500;			/* Tamaño 600 */
    font-family: 'Poppins', sans-serif;
    color: #fff;
    border-radius: 20px;       /* El redondeado pronunciado que te gustó */
    margin-bottom: 8px;
    text-transform: uppercase; /* VENDO, COMPRO, etc. */
    display: inline-block;     /* Importante para que respete el padding */
	margin-top: 6px;    /* Sube este número para alejarlo de la foto */
    margin-bottom: 6px; /* Separa la pastilla del título */
}





@media (max-width: 768px) {
    h1 {
        font-size: 18px;    /* Más pequeño en móviles */
        margin: 10px 0;
    }
    h2 {
        font-size: 16px;
    }
}
    
    .imagen-ajustada {
        width: 100%;
        height: 150px;
        object-fit: cover;
        background-color: #f0f0f0;
    }
/*
    .flechaUA, .flechaTOP {
        cursor: pointer;
        font-size: 36px;
        color: #FF6600;
        margin: 0 10px;
    }
*/

	.flechaUA, .flechaTOP {
		cursor: pointer;
		font-size: 30px;          /* Bajamos el tamaño de la fuente porque el icono de FontAwesome es más grueso */
		color: #FF6600;           /* Tu naranja corporativo */
		margin: 0 10px;
		
		/* El toque moderno: convertirlo en un círculo */
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 50px;
		height: 40px;
		background-color: #fff;   /* Fondo blanco */
		border: 2px solid #FF6600;/* Borde naranja */
		border-radius: 50%;       /* Círculo perfecto */
		transition: all 0.3s ease;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	/* Efecto al pasar el ratón (Escritorio) */
	.flechaUA:hover, .flechaTOP:hover {
		background-color: #FF6600; /* Fondo naranja */
		color: #ffffff;            /* Flecha blanca */
		transform: scale(1.1);     /* Se agranda un poquito */
	}


    .anuncios-carrusel {
        display: flex;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        padding: 10px 0;
    }
    
    .anuncios-carrusel::-webkit-scrollbar {
        display: none;
    }

    .anuncio-item {
        flex: 0 0 auto;
        width: 15.5%;
        max-width: 250px;
        height: 400px;
        margin: 0 5px;
        padding: 10px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .main-container {
        width: 95%;
        margin: auto;
    }

    @media (max-width: 768px) {
        .flechaUA, .flechaTOP {
            display: none;
        }
        
        .anuncios-carrusel {
            display: block;
            overflow-x: hidden;
            padding: 0;
        }
        
        .anuncio-item {
            width: 90%;			/* Antes 95% */
			max-width: 320px;     /* Esto evita que en pantallas grandes de móvil se vea gigante */
            height: auto;
            margin: 20px auto;	/* Antes 15 */
			padding: 10px;        /* Un poco de aire interno para que no asfixie el texto */
			display: flex;
			flex-direction: column;
        }
        
        .anuncio-item.no-imagen .imagen-ajustada {
            /* display: none !important; */
			width: 100%;
			height: 180px;        /* Altura fija para que todos los anuncios midan lo mismo */
			object-fit: cover;    /* Recorta la imagen para que encaje sin deformarse */
        }
    }
	
	.video-centrado {
		/* 1. Establece el elemento como un bloque para que pueda tener márgenes */
		display: block; 
    
		/* 2. Aplica margen automático a izquierda y derecha para centrar */
		margin-left: auto;
		margin-right: auto;
    
		/* O simplemente: */
		/* margin: 0 auto; */
	}


/* Los estilos: .home-guia-xxxx  son para la Guia de Usuarios  */

.home-guia-destacada {
    max-width: 900px;
    margin: 30px auto 40px auto;
    padding: 25px 30px;
    background: #f0f7ff;
    border-left: 6px solid #1a4fd8;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.home-guia-destacada h2 {
    margin: 0 0 10px 0;
    font-size: 1.6em;
    color: #003d66;
}

.home-guia-destacada p {
    margin: 0 0 15px 0;
    font-size: 1.05em;
    color: #333;
}

.home-guia-boton {
    display: inline-block;
    padding: 10px 20px;
    background: #1a4fd8;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.25s ease;
}

.home-guia-boton:hover {
    background: #003d66;
}