/* =========================
   Reset
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =========================
   Fuente personalizada
========================= */
@font-face {
  font-family: 'Sweet Affogato';
  src: url('../../fonts/SweetAffogato.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* =========================
   Estilos globales
========================= */
body {
  font-family:'Poppins',sans-serif;
  background-size: 150px 150px; /* Tamaño por defecto del mosaico */
  position: relative;
  color: #333;
}

/* Capa translúcida encima del fondo */
body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: #f1f3f4 !important;
  pointer-events: none; /* No bloquea clics */
  z-index: 0;
}

/* Garantiza que el contenido quede encima */
body * {
  position: relative;
  z-index: 1;
}

a {
  text-decoration: none;
}

/* Ocultar inicio SOLO si NO es inicio */
html:not(.es-inicio) #pets-header,
html:not(.es-inicio) #seccion-mascotas,
html:not(.es-inicio) footer {
  display: none;
}

    .spinner-container {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 42px;
  height: 42px;
  border: 4px solid #e0e0e0;
  border-top: 4px solid #000;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =========================
   RESPONSIVE DESIGN
========================= */

/* Fondo responsive */
@media (min-width: 1024px) { body { background-size: 400px 400px; } }
@media (min-width: 768px) and (max-width: 1023px) { body { background-size: 380px 380px; } }
@media (max-width: 767px) { body { background-size: 350px 350px; } }

/* Zoom para pantallas muy grandes */
@media (min-width: 1500px) { body { zoom: 110%; } }
@media (min-width: 1600px) { body { zoom: 125%; } }
@media (min-width: 1800px) { body { zoom: 133%; } }
@media (min-width: 2000px) { body { zoom: 150%; } }
@media (min-width: 2200px) { body { zoom: 200%; } }

/* Tablets y medianos */
@media (max-width: 960px) {
  .filter-box { margin-bottom: -15px; }
}

/* Móviles medianos */
@media (max-width: 800px) {
  .filter-box { margin-bottom: -25px; }
}

/* Móviles pequeños */
@media (max-width: 550px) {
  .filter-box { font-size: 15px; margin-right: -15px; margin-top: -10px; }
  .filter-box i { font-size: 15px; }
  .nav {display: block;}
}

/* Extra pequeños */
@media (max-width: 360px) {
  .perfil { font-size: 11px; font-weight: bold; }
}