/* --- REGLAS GLOBALES --- */
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    text-align: center; 
}

/* REGLAS GLOBALES PARA EVITAR EL ARRASTRE EN TODAS LAS IMÁGENES DE LA WEB */
img {
    -webkit-user-drag: none; 
    user-drag: none; 
    user-select: none; 
}

/* Contenedor principal que centra todo el contenido de la página */
.page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

/* --- ESTILOS DE ENCABEZADO Y LOGO --- */
.main-header {
    padding: 20px 0;
    margin: 0 auto; 
}

.main-header img {
    width: 95%; 
    max-width: 1200px; 
    height: auto;
    display: block;
    margin: 0 auto;
}

/* --- ESTILOS DE LA SECCIÓN DE DETALLES DE LA MASCOTA (Lina/Tiffany/Razas) --- */
.pet-details {
    background-color: #e9ecef;
    padding: 15px 5%; 
    border-bottom: 2px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-top: 0; 
    text-align: center; 
    margin-bottom: 20px;
}

.pet-details h1 {
    color: #29166F;
    font-size: 30px; 
    font-weight: bold; 
    margin: 0 0 5px 0;
}

.pet-details h2, .pet-details p {
    color: #29166F;
    font-size: 14px;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bold; 
    margin: 0 0 10px 0;
}

/* EL COLOR ROJO DEL TEXTO "NO DISPONIBLE" HA SIDO CAMBIADO A VERDE INTENSO */
.pet-details .status-unavailable {
    color: #FF0000; /* Verde intenso */
    font-size: 22px;
}

/* --- ESTILOS PARA LA GALERÍA DE IMÁGENES INDIVIDUALES (Páginas de Tiffany/Lina - Rectangulares) --- */
.gallery {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    padding: 20px 0;
    gap: 10px; 
    max-width: 1200px;
    margin: 0 auto;
}

.gallery img {
    max-width: 285px; 
    height: auto; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-radius: 0; 
    width: calc(25% - 10px); 
    flex-shrink: 1; 
}

/* --- ESTILOS PARA LAS PÁGINAS DE LISTADO/INDEX (REDONDAS Y RESPONSIVE) --- */
.gallery-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    padding: 20px 2%; 
    gap: 15px; /* Reducimos ligeramente el espacio */
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    margin-bottom: 0; 
    text-decoration: none; 
    color: inherit;
    box-sizing: border-box;
    /* Calculamos un ancho que siempre permita 4 por fila, aunque se encojan un poco */
    width: calc(25% - 15px);
    max-width: 285px; /* Sigue respetando el tamaño máximo */
}

.gallery-item img {
    width: 100%; /* Ocupa todo el ancho de su contenedor flexible */
    height: auto;
    aspect-ratio: 1 / 1; /* Mantiene la proporción cuadrada */
    border-radius: 50%; /* <<-- IMAGEN REDONDA > */
    object-fit: cover; 
    border: 4px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 5. MEDIA QUERIES (Responsive Design) */

/* MEDIA QUERIES PARA LA GALERÍA INDIVIDUAL (.gallery) */
@media (max-width : 577px ){
    .gallery img {
        width: 90%; 
        max-width: none; 
    }
    .gallery {
        gap: 20px;
    }
}

/* MEDIA QUERIES PARA LAS GALERÍAS REDONDAS DE LISTADO (.gallery-container) */

/* MÓVILES (hasta 576px de ancho): 1 por línea */
@media (max-width: 576px) {
    .gallery-item {
        width: 90%; 
        max-width: 90%;
    }
}

/* TABLETS (entre 577px y 768px): 2 por línea */
@media (min-width: 577px) and (max-width: 768px) {
    .gallery-item {
        width: calc(50% - 15px); /* 2 por línea restando el gap */
        max-width: calc(50% - 15px);
    }
}

/* ORDENADORES (más de 769px): Ya gestionado por la regla principal */


/* --- ESTILOS DE LA BARRA LATERAL (ASIDE) Y PIE DE PÁGINA (FOOTER) --- */
.contact-info {
    text-align: left;
    padding: 20px 4%;
}

footer {
    text-align: left; /* Todo el footer alineado a la izquierda por defecto */
    padding: 20px 4%;
    margin-top: 40px;
    border-top: 1px solid #ddd;
    font-weight: bold; /* Todo el footer en negrita */
}

/* Ajustes para el texto del footer (ahora por herencia ya serán negrita, pero mantenemos las reglas) */
footer h4 {
    margin: 5px 0;
    color: #333;
    font-weight: bold;
}

footer p {
    margin: 5px 0;
    color: #333;
    font-weight: bold; 
}

/* Una clase específica para aplicar negrita SOLO donde la necesitemos a la izquierda (esta clase ahora es redundante, todo es bold) */
.footer-bold-left {
    font-weight: bold;
}

/* CLASE PARA CENTRAR ELEMENTOS ESPECÍFICOS EN ASIDE/FOOTER */
.center-container {
    text-align: center;
    margin-bottom: 20px; 
}

.centered-footer-text {
    text-align: center; /* Centra solo la línea con esta clase */
    font-weight: bold;  /* La línea centrada final SIEMPRE en negrita (redundante ahora) */
}


/* --- ANIMACIONES DE STOCK (Si las usas en otras páginas) --- */

/* La animación 'destacar-stock' que da un halo/borde a las imágenes redondas disponibles */
.destacar-stock {
    animation: pulsar-stock 1.5s infinite ease-in-out;
    padding: 2px;
    /* Añadimos un borde transparente para que no "salte" el diseño al animar el halo */
    border: 2px solid transparent; 
}

@keyframes pulsar-stock {
    0% { transform: scale(1); border-color: transparent; }
    50% { transform: scale(1.03); border-color: #00FF00; /* Halo verde intenso */ } 
    100% { transform: scale(1); border-color: transparent; }
}


/* >>> MOVIDO AL FINAL PARA ASEGURAR PRIORIDAD: ESTILOS ESPECÍFICOS DEL BOTÓN DE WHATSAPP Y ANIMACIONES <<< */

/* Contenedor principal del botón flotante */
.container-boton{
	background-color:#2e6329; 
	border: 1px solid #FFF;
	position: fixed; 
	z-index: 1000; /* Aseguramos que esté por encima de todo */
	border-radius: 50%;
	bottom: 20px;
	right: 10px;
	padding: 5px;
	transition: ease 0.3s;
	/* Aplicamos la animación de "efecto pulsante" */
	animation: efecto 1.2s infinite; 
    /* Aseguramos que el cursor cambie a mano para indicar que es cliqueable */
    cursor: pointer; 
}

.container-boton:hover{
	transform: scale(1.1);
	transition: 0.3s;
}

.boton{
	width: 60px;
	transition: ease 1s;
    display: block; /* Aseguramos que la imagen no tenga márgenes extraños */
}

/* Define la animación del "halo" para el botón de WhatsApp */
@keyframes efecto{
	0%{
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85); /* Halo inicial */
	}
	100%{
		box-shadow: 0 0 0 10px rgba(0,0,0,0); /* El halo se expande y desaparece */
	}
}