<style>
/* --- Fuentes Globales y Cuerpo --- */
body {
    /* 1. Fondo de patitas (de tu primera regla) */
    background-image: url('assets/img/patitas-fondo.png');
    background-repeat: repeat;
    background-attachment: fixed;
    background-color: #dddddd; /* Color de fondo si la imagen falla */

    /* 2. Estilos de fuente y padding (de tu segunda regla) */
    font-family: 'Roboto', sans-serif;
    padding-top: 70px; /* Ajuste para el header fijo */
}

/* --- Avatar de Mascota (Círculo 200x200) --- */
.img-avatar {
    width: 200px;           /* Ancho fijo de 200px */
    height: 200px;          /* Alto fijo de 200px */
    border-radius: 50%;     /* ¡Esto la hace redonda! */
    object-fit: cover;      /* Esta es la clave: recorta la imagen para que quepa sin deformarse */
    border: 6px solid #e9ecef; /* Un borde gris claro, como el del card */
    background-color: #fff;  /* Fondo blanco por si la imagen es transparente */
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-link, .btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

/* --- Preloader (de tu código original) --- */
#overlayer {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99999;
    background: #fff;
}
.loader {
    position: fixed;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    margin: -30px 0 0 -30px;
    z-index: 999999;
    background: url(assets/img/loader.gif) no-repeat center center;
}


/* --- Secciones --- */
.hero-section {
    padding: 3rem 0;
    /* Quitamos el background-color para que se vea el fondo de patitas */
}

.contact-section {
    padding: 4rem 0;
    background-color: #ffffff;
}

/* --- Pestañas de Login/Registro --- */

/* Estilo base para AMBAS pestañas (inactivas) */
.nav-tabs .nav-link {
    border: 0;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    color: #495057; /* Texto gris oscuro */
    background-color: #e9ecef; /* Fondo gris claro */
    border-bottom: 3px solid transparent;
    border-top-left-radius: .25rem; /* Redondear esquinas superiores */
    border-top-right-radius: .25rem;
}

/* Pestaña "Iniciar Sesión" (ACTIVA) */
.nav-tabs .nav-link#login-tab.active {
    background-color: #003366; /* Azul Marino */
    color: #ffcc00; /* Amarillo */
    border-bottom: 3px solid #ffcc00;
}

/* Pestaña "Registrarse" (ACTIVA) */
.nav-tabs .nav-link#register-tab.active {
    background-color: #0dcaf0; /* Celeste (Bootstrap Info) */
    color: #ffffff; /* Blanco */
    border-bottom: 3px solid #ffffff;
}

/* --- Títulos dentro del formulario --- */
.form-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0d6efd;
    margin-top: 1rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
/* Estilo para el ojo de la contraseña */
.toggle-password {
    cursor: pointer;
    user-select: none; /* Evita que el ícono se seleccione al hacer clic */
}

/* Botón Flotante de WhatsApp */
.whatsapp-flotante {
    position: fixed; /* Fija el botón en la pantalla */
    width: 60px;
    height: 60px;
    bottom: 25px; /* Distancia desde abajo */
    right: 25px;  /* Distancia desde la derecha */
    background-color: #25D366; /* Color de WhatsApp */
    color: #FFF; /* Color del icono (blanco) */
    border-radius: 50%; /* Lo hace circular */
    text-align: center;
    font-size: 30px; /* Tamaño del icono */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
    z-index: 1000; /* Se asegura que esté sobre otros elementos */
    
    /* Centra el icono */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Animación al pasar el mouse */
    transition: transform 0.3s ease;
}

.whatsapp-flotante:hover {
    transform: scale(1.1); /* Agranda el botón un 10% */
}
</style>