@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Lato:wght@400&display=swap");
:root {
  /* Custom Properties */
  --white-text: #fff;
  --blue: #09f;
  --blue: #007bff; /* Un azul más profesional */
  --Fondo-color: #101025;
  --font-family-title: "Merriweather", serif;
  --font-family-text: "Open Sans", sans-serif;
  --gold: #ffd700; /* Color dorado */
  --dark-background: #101025; /* Fondo oscuro */
  --light-background: #f8f9fa; /* Fondo claro para secciones */

  /* Tamaño De Fuente */
  font-size: 15px;
}
html {
  scroll-behavior: smooth;
}
/* formateo de estilos*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--Fondo-color);
  font-family: var(--font-family-text);
  font-weight: normal;
  overflow-x: hidden; /* Desactiva el desplazamiento horizontal */
}

.container {
  width: 95%;
  padding: 2rem; /* Aumentar el padding */
  margin: auto;
  max-width: 1200px; /* Limitar el ancho máximo para mayor enfoque */
}

/* Estilos para el modal */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-content: center;
  border-radius: 8px;
  color: #fff;
  z-index: 1000;
}

/* Fondo de pantalla y animación de texto */
.background__text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 7rem;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-weight: 900;
  background-clip: text;
  text-align: center;
  color: transparent;
  background-image: url("imagenes/fondos/videoPortero.jpg");
  background-size: cover;
  animation: bg-animation 4s cubic-bezier(0.3, 0, 0.7, 1) infinite;
}

@keyframes bg-animation {
  0% {
    background-position: 20% 20%;
  }
  50% {
    background-position: 80% 80%;
  }
  100% {
    background-position: 20% 20%;
  }
}

/* Estilos para el spinner de carga */
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid rgba(8, 105, 149, 0.3);
  border-top: 6px solid #0f15c1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-top: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes bg-animation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* ---------- Menu De Navegacion --------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  padding: 0.2rem 0.5rem;
  background: linear-gradient(
    135deg,
    rgba(10, 10, 20, 0.95),
    rgba(0, 0, 0, 0.85)
  ); /* Degradado elegante */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Sombra para mayor profundidad */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Línea sutil en el borde inferior */
  z-index: 10002;
  backdrop-filter: blur(10px); /* Efecto de desenfoque */
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem;
}

.header__logo img {
  padding: 6px;
  background-color: rgb(255, 145, 0);
  width: 12vw;
  min-width: 150px;
  height: auto;
  min-height: 35px;
  max-height: 75px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 0 5px 1px rgba(152, 41, 1, 0.3),
    /* sombra pequeña, más cercana */ 0 0 15px 3px rgba(255, 68, 0, 0.2),
    /* sombra mediana, más lejana */ 0 0 30px 8px rgba(255, 68, 0, 0.1); /* sombra grande, más lejana y difusa */
}
/*
.header__logo {
  font-family: "Playfair Display", serif; 
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  background: linear-gradient(90deg, #f9f9f9, #d3d3d3, #b0b0b0, #ffffff);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1),
    1px 1px 6px rgba(0, 0, 0, 0.2); 
  transition: transform 0.3s ease; 
} */

.header__logo:hover {
  transform: scale(1.05); /* Efecto de agrandamiento en hover */
}

.header__nav__link {
  font-family: "Lato", sans-serif; /* Fuente moderna y limpia */
  color: #d3d3d3;
  text-decoration: none;
  margin-right: 1.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  transition: color 0.3s, transform 0.3s; /* Animación en el color y tamaño */
}

.header__nav__link:hover {
  color: #f0c674; /* Color dorado en hover */
  transform: translateY(-3px); /* Efecto de elevación en hover */
}
.header__toggle {
  display: none;
}
body {
  padding-top: 90px; /* Ajusta el espacio según la altura del header */
}

/* ---------- Banner Principal Inicio --------- */
.hero {
  position: relative;
  min-height: 85vh;
  height: auto;
  color: #e1e1e1; /* Color de texto claro */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Asegura que el video no se salga de los límites */
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Asegura que el video cubra toda el área */
  z-index: -1; /* Coloca el video detrás del contenido */
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(249, 83, 0, 0.282) 20%,
    /* color inicial con más opacidad para resaltar el centro */
      rgba(255, 102, 0, 0.3) 50%,
    /* tono intermedio para una transición suave */ rgba(248, 120, 0, 0.15) 100%
      /* tono final, más transparente para un desvanecimiento gradual */
  );
  z-index: 0; /* Coloca el degradado sobre el video pero debajo del contenido */
}

.banner-mascota {
  position: absolute;
  top: 42vh;
  left: 16vw;
  width: 20%;
  height: auto;
}
.banner-mascota img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  position: relative;
  z-index: 1; /* Asegura que el contenido esté encima del degradado */
}

.hero__title {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 600;
  max-width: 100%;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  color: #f0c674;
}

.hero__subtitulo {
  font-family: "Lato", sans-serif;
  margin: 1rem 0 1.5rem 0;
  font-weight: 400;
  font-size: 1.5rem;
  max-width: 70%;
  color: #e1e1e1;
}

/* ---------- Contactos, Header y Acerca de -------- */
.containerFlex {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f3f6fa; /* Fondo claro y elegante */
  color: #0a1a2f; /* Color principal de texto */
  padding: 4rem 2rem;
  text-align: center;
}

.containerFlex h2 {
  font-family: "Playfair Display", serif; /* Fuente elegante */
  font-size: 2.5rem;
  font-weight: 600;
  color: #f0c674; /* Color dorado */
  margin-bottom: 1rem;
}

/* whastapp icon*/
.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 16px;
  width: 52px;
  height: 52px;
  z-index: 1000;
  background-color: white;
  border: 5px solid white;
  border-radius: 50%;
}

.face-button {
  bottom: 76px;
}
.insta-button {
  bottom: 132px;
}
.whatsapp-button img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
  object-fit: contain;
}

.whatsapp-button:hover img {
  transform: scale(1.1);
}

.hero__description {
  font-family: "Lato", sans-serif;
  font-size: 1.2rem;
  color: #444;
  max-width: 70%;
  line-height: 1.6;
  margin: 0 auto 2rem auto;
}

.image_mascota {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 300ms ease-in-out;
  object-fit: cover;
}

.image_mascota:hover {
  transform: rotate(8deg); /* Rotación sutil */
}

.contact_mascota {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra elegante */
  transition: transform 300ms ease-in-out;
  object-fit: contain;
}

.contact_mascota:hover {
  transform: scale(1.05); /* Efecto de agrandamiento */
}

.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: 2rem;
}

.contact a {
  text-decoration: none;
  color: #222;
  font-family: "Lato", sans-serif;
  font-size: 1.1rem;
  transition: color 300ms ease-in-out;
}

.contact h3 {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  gap: 0.5rem;
}

.contact .correo:hover a {
  color: #bf360c; /* Color elegante en hover */
}

.contact .phone:hover a {
  color: forestgreen;
}

.contact .call:hover a {
  color: cornflowerblue;
}

.contact .correo,
.contact .phone,
.contact .call {
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  transition: border-color 200ms ease-in-out, transform 200ms ease-in-out;
}

.contact .correo:hover,
.contact .phone:hover,
.contact .call:hover {
  border-color: #f0c674; /* Borde dorado */
  transform: scale(1.02); /* Ligeramente más grande en hover */
}

.contact i {
  font-size: 1.3rem;
  color: #888; /* Color sutil para iconos */
}

.oculto-correo {
  display: none;
}
.mostrar-correo {
  display: block;
}
.boton-correos {
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 24px;
  outline: none;
  border: 2px solid rgb(255, 255, 255);
  box-shadow: 0 6px 5px 5px rgb(204, 204, 204);
  transition: 300ms ease-in-out;
}

.boton-correos:hover {
  background-color: orange;
  color: white;
}

/* zona de publicaciones */
/* Título centrado */
.slider-title {
  padding-top: 2rem;
  font-size: 2.5rem;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
  font-family: "Merriweather", serif;
}

/* Contenedor del slider */
.slider-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  height: 80vh;
  max-height: 600px;
  margin: 1rem auto;
  padding: 1rem;
  overflow: hidden;
  background-color: #101025;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  border-radius: 20px;
}

/* Slider */
.slider {
  display: flex;
  transition: transform 0.7s ease;
  width: 100%;
  height: 85%;
}

.slide {
  padding-top: 2rem;
  min-width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 15px;
  transition: transform 0.3s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px;
}

.slider-container:hover .slide {
  transform: scale(1.02); /* Suave efecto de zoom al pasar el cursor */
}

/* Botones de navegación */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.slider-btn:hover {
  background: rgba(255, 98, 0, 0.8);
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}

/* Ocultar botones en dispositivos móviles */
@media (max-width: 875px) {
  .slider-btn {
    display: none;
  }
}

/* Slider deslizable para móviles */
@media (max-width: 875px) {
  .slider {
    scroll-snap-type: x mandatory;
    display: flex;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
  }

  .slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
}

/* Galeria Seccion */

#galeria-section {
  text-align: center;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin: 20px auto;
  width: 90%;
  max-width: 1200px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.titulo-galeria {
  font-size: 2rem;
  font-weight: bold;
  background: linear-gradient(90deg, rgb(56, 0, 130), rgb(0, 217, 255));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

#toggle-galeria {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(90deg, #ff7e00, orange);
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 126, 0, 0.5);
  transition: transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: sticky; /* Hace que el botón sea pegajoso */
  top: 20vh; /* Espacio desde la parte superior de la ventana al volverse fijo */
  z-index: 100; /* Asegura que el botón esté por encima de otros elementos */
}

#toggle-galeria:hover {
  background: #ff6f00;
}
#toggle-galeria:active {
  transform: scale(0.95);
  box-shadow: 0 3px 8px rgba(255, 126, 0, 0.4);
}

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.galeria-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

.galeria-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

.galeria-activa .galeria-grid img {
  opacity: 1;
  visibility: visible;
}

.oculta {
  display: none;
}
/* Imágenes en la galería */
.galeria-grid img.ampliada {
  transform: scale(2); /* Duplica el tamaño */
  z-index: 1; /* Asegura que la imagen quede encima */
  transition: transform 0.3s ease-in-out;
}

/* ---------- productos -------- */
.productos_fav {
  margin-bottom: 4.38rem; /* Espacio inferior para separación */
  text-align: center; /* Centrar el título y el contenido */
}

.container_principal {
  display: flex; /* Disposición en flexbox para alinear elementos */
  align-items: center; /* Centrar verticalmente */
  position: relative; /* Para posicionamiento de las flechas */
  overflow: hidden; /* Ocultar cualquier desbordamiento de contenido */
}

.flecha_izquierda,
.flecha_derecha {
  position: absolute; /* Posicionamiento absoluto para las flechas */
  border: none; /* Sin borde */
  background: rgba(20, 20, 20, 0.8); /* Fondo oscuro y semi-transparente */
  font-size: 3rem; /* Tamaño del icono */
  width: 3rem; /* Ancho fijo */
  height: 50%; /* Altura del 50% del contenedor */
  top: 50%; /* Centrarlas verticalmente */
  transform: translateY(-50%); /* Ajustar para centrar perfectamente */
  line-height: 3rem; /* Alinear verticalmente el texto */
  cursor: pointer; /* Cambiar cursor al pasar por encima */
  color: #ffffff; /* Color del texto */
  z-index: 50; /* Asegurar que estén encima de otros elementos */
  transition: background 0.3s ease, color 0.3s ease; /* Transiciones suaves para hover */
}

.flecha_izquierda:hover,
.flecha_derecha:hover {
  background: #ffffff; /* Fondo blanco al pasar el ratón */
  color: #007bff; /* Color azul para el texto al pasar el ratón */
}

.flecha_izquierda {
  left: 1rem; /* Separación del borde izquierdo */
}

.flecha_derecha {
  right: 1rem; /* Separación del borde derecho */
}

/* -------- productos inicio -------- */
.producto_titulo {
  color: #ffffff; /* Texto blanco */
  font-size: 1.8rem; /* Aumento del tamaño de la fuente */
  padding-bottom: 2vh; /* Espaciado inferior */
  padding-top: 10vh; /* Espaciado superior */
  text-align: center; /* Centrando el título */
  font-weight: 700; /* Haciendo el texto más audaz */
}

.productos_controles {
  padding-bottom: 2vh; /* Espaciado inferior */
  display: flex; /* Flexbox para una disposición flexible */
  justify-content: space-between; /* Espacio entre controles */
  align-items: center; /* Centrar verticalmente */
  margin: 0 10%; /* Margen horizontal para un mejor espaciado */
}

.indicadores {
  display: flex; /* Flexbox para disposición de botones */
  justify-content: center; /* Centrar botones horizontalmente */
  align-items: center; /* Centrar botones verticalmente */
}

.indicadores button {
  width: 2rem; /* Ancho del botón */
  height: 0.5rem; /* Alto del botón */
  background: #cccccc; /* Color de fondo neutral para botones */
  border: none; /* Sin borde */
  border-radius: 5px; /* Bordes redondeados para suavizar la apariencia */
  cursor: pointer; /* Cambiar cursor al pasar por encima */
  margin-right: 0.5rem; /* Espaciado entre botones */
  transition: background 0.3s ease; /* Transición suave para el fondo */
}

.indicadores button:hover,
.indicadores button.activo {
  background: #007bff; /* Color de fondo al pasar el ratón y cuando está activo */
}

/* -------- carrusel inicio -------- */
.container_adap {
  min-height: 100vh; /* Cambié '100v' a '100vh' para mayor claridad */
}

.container_carrusel {
  display: flex;
  overflow-x: auto; /* Permitir desplazamiento horizontal */
  overflow-y: hidden; /* Ocultar desplazamiento vertical */
  scroll-behavior: smooth; /* Desplazamiento suave */
  padding: 10px 0; /* Espaciado vertical */
}

.carrusel {
  display: flex;
  gap: 1.5%; /* Espaciado mejorado entre los artículos */
  height: 25vh; /* Mayor altura para una mejor visualización */
  flex-wrap: nowrap; /* Mantener todo en una fila */
}

.container_principal {
  width: 100%;
  background-color: #0a1a2f; /* Color de fondo más suave */
  padding: 20px 0; /* Espaciado superior e inferior */
  overflow: hidden; /* Ocultar cualquier desbordamiento */
  display: flex;
  align-items: center; /* Centrar verticalmente */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil para profundidad */
  border-radius: 15px; /* Bordes redondeados */
}

.container_principal .carrusel .producto_articulo {
  min-width: 19%; /* Ancho mínimo del artículo */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra más suave */
  border-radius: 10px; /* Bordes redondeados */
  background-color: white; /* Fondo blanco para los artículos */
  overflow: hidden; /* Asegúrate de que el contenido no desborde */
}

.container_principal .carrusel .producto_articulo:hover {
  transform: scale(1.1); /* Leve aumento al pasar el ratón */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Sombra más intensa al hacer hover */
}

.container_principal .carrusel .producto_articulo img {
  width: 100%; /* Ancho completo */
  height: auto; /* Altura automática para mantener proporciones */
  border-radius: 10px; /* Bordes redondeados para la imagen */
  object-fit: cover; /* Asegura que la imagen cubra el área */
}

.producto_link {
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  display: flex;
  justify-content: center; /* Centrar horizontalmente */
  align-items: center; /* Centrar verticalmente */
  text-decoration: none; /* Sin subrayado en el enlace */
}

/* -------- menu card zona -------- */
.menu {
  display: block; /* Muestra el menú por defecto */
  background: linear-gradient(45deg, #343a40, #2b3947); /* Gradiente elegante */
  padding: 2vh 0; /* Espaciado vertical reducido */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra más sutil y elegante */
  height: 8vh;
  border-radius: 15px; /* Bordes redondeados */
  transition: ease-in-out 0.3s; /* Transición suave del fondo */
}
.menuOculto {
  display: none; /* Oculta el menú */
}
.menu ul {
  list-style: none; /* Sin viñetas */
  padding: 0; /* Sin padding */
  margin: 0; /* Sin margin */
  display: flex; /* Disposición horizontal */
  justify-content: center; /* Centra los elementos */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en la línea */
}

.menu li {
  margin: 0 15px; /* Espaciado horizontal entre los elementos */
}

.menu a {
  color: #f8f9fa; /* Color claro del texto */
  text-decoration: none; /* Sin subrayado */
  font-weight: 600; /* Peso de fuente más sutil */
  font-size: 1.1rem; /* Tamaño de fuente más grande */
  padding: 8px 12px; /* Espaciado interno */
  border-radius: 25px; /* Bordes redondeados para un aspecto suave */
  position: relative; /* Para el efecto de la línea */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transiciones suaves */
}

.menu a:hover {
  background-color: rgba(
    0,
    123,
    255,
    0.8
  ); /* Color de fondo semitransparente al pasar el ratón */
  color: #fff; /* Cambia el color del texto al pasar el ratón */
}

.menu a::after {
  content: ""; /* Añadir un efecto de línea debajo */
  display: block; /* Asegúrate de que sea un bloque */
  width: 0; /* Ancho inicial */
  height: 3px; /* Alto de la línea */
  background: #ffd700; /* Color dorado para el efecto */
  transition: width 0.4s; /* Transición del ancho */
  margin: auto; /* Centra la línea */
}

.menu a:hover::after {
  width: 100%; /* Expande la línea al pasar el ratón */
}

/* Estilos para pantallas pequeñas */
@media (max-width: 850px) {
  .menu ul {
    flex-direction: column; /* Cambia a disposición vertical */
    align-items: center; /* Centra los elementos verticalmente */
  }

  .menu li {
    margin: 10px 0; /* Espaciado vertical entre los elementos */
  }
}

/* -------- cards zona -------- */
.contenedor_cards {
  background-color: #0a1a2f;
  padding: 20px;
  display: flex;
  flex-wrap: wrap; /* Permite que las tarjetas se ajusten a múltiples filas */
  justify-content: center; /* Espaciado uniforme entre tarjetas */
}

.card {
  display: flex;
  flex-direction: column;
  padding-top: 5vh;
  align-items: center; /* Centra horizontalmente todo el contenido */
  justify-content: space-between; /* Centra verticalmente el contenido si es necesario */
  gap: 10px;
  height: auto;
  min-height: 300px;
  width: calc(20% - 20px); /* 5 tarjetas por fila con margen */
  background-color: #fff;
  border-radius: 12px; /* Bordes más suaves */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más prominente */
  margin: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
  text-align: center; /* Centra el texto dentro de la tarjeta */
}
.Cads_Secciones {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 6vh;
  margin: 5vh;
  border-radius: 50px;
  background-color: whitesmoke;
}
.Cads_Secciones h3 {
  color: #0a1a2f;
  font-size: 2rem;
  font-weight: bold;
  padding-left: 5%;
}

.card:hover {
  transform: translateY(-5px); /* Efecto de elevación al hacer hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Sombra más profunda al hacer hover */
}

.card-imagen {
  max-width: 90%;
  width: auto;
  height: 15vh;
  background-size: cover;
  margin: 0 auto; /* Centra la imagen horizontalmente */
  border-radius: 12px 12px 0 0; /* Bordes redondeados en la parte superior */
  transition: 200ms ease-in-out;
}
.card-imagen:active {
  transform: scale(4.8);
  padding-top: 6vh;
}

.card-contenido {
  padding: 15px;
  display: flex;
  gap: 5px;
  flex-direction: column;
}

.card-titulo {
  font-size: 1.5rem; /* Tamaño de la fuente del título más grande */
  margin: 0 0 10px 0; /* Margen inferior */
  color: #222; /* Color del texto del título */
}

.card-descripcion {
  font-size: 1rem; /* Tamaño de la fuente de la descripción más grande */
  color: #666; /* Color del texto de la descripción */
}

.button_card {
  list-style: none;
  text-decoration: none;
  text-align: center;
  padding: 10px 20px; /* Espaciado interno más cómodo */
  border-radius: 24px;
  border: none;
  background: linear-gradient(90deg, rgb(0, 153, 255), rgb(75, 0, 130));
  color: white;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  box-shadow: 0 10px 15px 5px rgba(1, 4, 54, 0.658);
  margin-top: 4%;
}

.button_card:hover {
  background: linear-gradient(90deg, rgb(156, 73, 215), rgb(32, 121, 215));
}

.button_card:active {
  transform: scale(1.1);
}
/* -------- container central -------- */
.container_center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15vh;
  width: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9),
    rgba(240, 240, 240, 1)
  ); /* Gradiente suave */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil para dar profundidad */
  border-radius: 10px; /* Bordes redondeados */
}

.boton {
  background-color: #007bff; /* Color de fondo del botón */
  color: #fff; /* Color del texto */
  border: none;
  border-radius: 25px; /* Bordes redondeados más pronunciados */
  padding: 12px 20px; /* Espaciado interno más amplio */
  cursor: pointer;
  margin: auto;
  font-size: 18px; /* Aumento en el tamaño de la fuente */
  font-weight: bold; /* Texto en negrita */
  transition: background-color 0.3s ease, transform 0.2s ease; /* Añadido efecto de transformación */
}

.boton:hover {
  background-color: #0056b3; /* Color más oscuro al pasar el ratón */
  transform: translateY(-3px); /* Efecto de elevación al pasar el ratón */
}

/* --------------- servicios zona --------------- */
.servicios_zona {
  border-top: 2px outset #a7acb1;
  width: 100%;
  height: auto; /* Cambiado para mejor adaptabilidad */
  background-color: #f3f6fa; /* Fondo más suave */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  position: relative;
}

.servicios_titulo {
  font-family: "Playfair Display", serif; /* Fuente elegante */
  font-size: 2.5rem;
  font-weight: 800;
  color: #f0c674; /* Color dorado */
  margin-bottom: 1.5rem;
}

.servicios_lista {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* Espaciado entre los servicios */
}

.servicio {
  background: linear-gradient(45deg, #f57c00, #e65100, #bf360c);
  border-radius: 12px; /* Bordes redondeados */
  padding: 1rem 2rem; /* Espaciado interno */
  color: #ffffff;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none; /* Sin subrayado */
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra elegante */
  position: relative;
  z-index: 1;
}
.servicio_whats {
  background: linear-gradient(45deg, #25d366, #128c7e, #075e54);
  border-radius: 12px; /* Bordes redondeados */
  padding: 1rem 2rem; /* Espaciado interno */
  color: #ffffff;
  font-weight: 600;
  font-size: 1.2rem;
  text-decoration: none; /* Sin subrayado */
  transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra elegante */
  position: relative;
  z-index: 1;
}
.servicio_whats:hover {
  background: linear-gradient(45deg, #075e54, #128c7e, #25d366);
  transform: scale(1.05); /* Aumento en hover */
}
.servicio:hover {
  background: linear-gradient(45deg, #bf360c, #e65100, #f57c00);
  transform: scale(1.05); /* Aumento en hover */
}
.wtsSer {
  max-width: 32px;
  height: 32px;
  align-self: center;
}

.imagen_servicios {
  margin-top: 2rem; /* Espaciado superior */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 0;
}

.img_servicio {
  width: 20%; /* Ancho adaptable */
  border-radius: 50%; /* Bordes redondeados */
  transition: transform 350ms ease-in-out;
}

.img_servicio:hover {
  transform: rotate(360deg);
}

/* -------- mensajeria inicio --------*/
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.mensajeria_zona {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(245, 245, 245);
}

.mensajeria_titulo {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #222;
}

.campo_mensaje {
  width: 80%;
  height: 200px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
  resize: none; /* Evita el cambio de tamaño */
}

.boton_enviar {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #f57c00; /* Color naranja */
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.boton_enviar:hover {
  background-color: #e65100; /* Color naranja más oscuro en hover */
}
/* -------- footer estilos -------- */
/* Estilos para el Footer */

.footer {
  background-color: #222; /* Fondo oscuro */
  color: #ffffff; /* Texto blanco */
  padding: 20px;
  text-align: center;
  font-family: var(--font-family-text);
}

.footer__social__link:hover {
  color: var(--gold); /* Color dorado en hover */
}
.footer-correo2 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-correo2 a {
  color: white;
  list-style: none;
  text-decoration: none;
  font-weight: 200;
  font-size: 8x;
}
.footer-correo2 a:hover {
  color: var(--gold);
}
.footer__container {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.footer__logo {
  font-size: 1.5em;
  font-weight: bold;
}

.footer__description {
  font-size: 0.9em;
  margin-top: 5px;
  max-width: 250px;
}

.footer__social {
  text-align: center;
}

.footer__social h4 {
  font-size: 1.1em;
  margin-bottom: 10px;
}

.footer__social__link {
  color: #ffffff;
  font-size: 1.5em;
  margin: 0 10px;
  transition: color 0.3s ease;
}

.footer__social__link:hover {
  color: #ffcc00;
}

.footer__contact {
  font-size: 0.9em;
  padding-top: 1rem;
}

.footer__contact h4 {
  font-size: 1.1em;
  margin-bottom: 10px;
}

.footer__contact p {
  margin: 5px 0;
}

.footer__bottom {
  background-color: #1b1b1b;
  text-align: center;
  padding: 10px 0;
  font-size: 0.8em;
  margin-top: 20px;
  color: #bbbbbb;
}

.footer__bottom p {
  margin: 0;
}

/* ---------- Diseño Adaptable A Móviles ---------- */

@media (max-width: 1050px) {
  body {
    font-size: 22px; /* Tamaño de fuente para pantallas grandes */
  }

  .header__logo {
    margin-bottom: 0.5rem; /* Espacio inferior */
    font-size: 2.5rem; /* Tamaño del logo */
  }
  .banner-mascota {
    display: none;
  }

  .hero__title,
  .hero__category {
    max-width: 80%; /* Anchura máxima para un mejor ajuste */
    margin: 0 auto; /* Centrar horizontalmente */
  }

  .hero__description {
    max-width: 100%; /* Asegurar que se ajuste al contenedor */
  }

  .carrusel {
    display: grid; /* Cambiar a grid para el carrusel */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas */
    grid-template-rows: repeat(auto, 1fr); /* Ajuste automático de filas */
    gap: 1rem; /* Espaciado entre elementos */
    height: auto; /* Ajustar altura automáticamente */
  }

  .container_carrusel {
    display: flex;
    overflow-x: hidden; /* Ocultar desbordamiento horizontal */
    overflow-y: auto; /* Permitir desplazamiento vertical */
    scroll-behavior: smooth; /* Desplazamiento suave */
  }

  .indicadores,
  .flecha_derecha,
  .flecha_izquierda {
    display: none; /* Ocultar controles de navegación en móviles */
  }

  .imagen_servicios {
    padding-bottom: 100vh; /* Espaciado inferior */
  }

  .img_servicio {
    width: 30%; /* Ancho de la imagen de servicios */
    border-radius: 50%; /* Bordes redondeados */
    z-index: -1; /* Enviar la imagen al fondo */
  }

  .servicio {
    display: flex;
    text-align: center;
    border-radius: 12px; /* Bordes redondeados para servicios */
    width: 80vw; /* Ancho ajustado a la vista */
  }
  .menu {
    height: auto;
  }

  .header__logo {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
  }
  /* adaptar menu hamburguesa */
  .header__toggle {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 2rem;
  }

  .header__nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: linear-gradient(135deg, #ffb347, #ff8c00 50%, #ff6200);
    flex-direction: column;
    width: 100%;
    height: 100vh;
    padding: 1rem 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  .header__nav.active {
    display: flex;
  }

  .header__nav__link {
    padding: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
    color: whitesmoke;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }

  .header__nav__link:hover {
    background-color: #ff5e00;
    color: var(--gold);
  }
  #toggle-galeria {
    top: 21vh;
  }
}

@media (max-width: 875px) {
  .fondo-naranja {
    width: 100%;
    top: 0;
    position: fixed;
    z-index: 1001;
    height: auto;
    min-height: 120px;
    background-image: url(imagenes/fondos/logov3.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
  body {
    font-size: 12px; /* Tamaño de fuente más pequeño */
  }

  /* Estilos del logo */
  .header__logo {
    font-size: 1.8rem;
    display: none; /* Ocultamos el logo en esta vista */
  }

  /* Contenedor del header */
  .header {
    display: flex;
    top: 11vh;
    flex-direction: column; /* Disposición vertical */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro con transparencia */
    padding: 10px; /* Espaciado interno */
    min-height: 11vh;
    max-height: 13svh; /* Altura dinámica según contenido */
  }

  /* Toggle del menú hamburguesa */
  .header__toggle {
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    font-size: 2.5rem;
    color: #fff; /* Color blanco para el ícono */
    cursor: pointer;
    padding: 0; /* Pequeño margen interno */
  }

  /* Navegación del menú */
  .header__nav {
    display: none; /* Oculto inicialmente */
    flex-direction: column; /* Menú en columna */
    background: linear-gradient(
      135deg,
      #ff6200,
      #ff8c00
    ); /* Fondo degradado naranja */
    border-radius: 10px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    position: absolute;
    top: 11vh; /* Posición relativa al header */
    left: 10px; /* Margen izquierdo pequeño */
    z-index: 100; /* Para asegurarse de que esté encima */
  }

  /* Menú visible cuando está activo */
  .header__nav.active {
    display: flex;
  }

  /* Links del menú */
  .header__nav__link {
    color: #fff; /* Texto blanco */
    text-decoration: none; /* Sin subrayado */
    text-align: left; /* Alineado a la izquierda */
    font-size: 1.2rem; /* Tamaño de fuente */
    transition: color 0.3s ease;
  }

  .header__nav__link:hover {
    color: #ffe0b2; /* Color claro al pasar el cursor */
  }
  .galeria-grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 20px;
  }
  .galeria-grid img.ampliada {
    transform: scale(1.9); /* Duplica el tamaño */
    z-index: 1; /* Asegura que la imagen quede encima */
    transition: transform 0.3s ease-in-out;
  }
  #toggle-galeria {
    top: 24vh;
  }
  .Cads_Secciones h3 {
    text-align: center;
    padding-top: 6px;
    font-size: 1.5rem;
  }
}

@media (max-width: 700px) {
  .background__text {
    font-size: 4rem; /* Tamaño de texto de fondo */
  }

  .hero .container {
    gap: 0.8vh; /* Espaciado entre elementos */
  }

  .hero__title {
    font-size: 2rem; /* Tamaño de título */
  }

  .hero__subtitulo {
    font-size: 1.2rem; /* Tamaño de subtítulo */
  }

  .hero__description {
    font-size: 1rem; /* Tamaño de descripción */
  }
}

@media (max-width: 385px) {
  .hero .container {
    padding: 0.5vw; /* Espaciado reducido */
    gap: 0.5vh; /* Espaciado reducido */
  }

  .header__logo {
    font-size: 1.3rem; /* Ajuste de tamaño de logo */
  }

  .hero__title {
    font-size: 1.5rem; /* Tamaño de título */
    text-align: center; /* Centrar título */
  }

  .hero__subtitulo {
    font-size: 1rem; /* Tamaño de subtítulo */
    text-align: center; /* Centrar subtítulo */
  }

  .hero__description {
    font-size: 0.8rem; /* Tamaño de descripción */
  }

  .servicio {
    font-size: 1.2rem; /* Tamaño de fuente para servicios */
  }
}
/* ---------- Responsividad ---------- */

@media (max-width: 768px) {
  .servicio {
    font-size: 1rem; /* Tamaño de fuente reducido para móviles */
    padding: 0.8rem 1.5rem; /* Reducción de padding para mejor ajuste */
  }

  .img_servicio {
    width: 30%; /* Aumentar ancho de la imagen de servicio en móviles */
    margin: 0 auto; /* Centrar imagen horizontalmente */
    display: block; /* Asegurar que la imagen sea un bloque para centrarla */
  }
}
/* ---------- Responsividad para pantallas más pequeñas ---------- */

@media (max-width: 1080px) {
  .card {
    flex: 1 1 calc(33.33% - 20px); /* Tamaño flexible para 3 tarjetas por fila */
    margin: 10px; /* Espacio entre tarjetas */
    box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
  }
}

@media (max-width: 750px) {
  .card {
    flex: 1 1 calc(40% - 20px); /* Tamaño flexible para 2 tarjetas por fila */
    margin: 10px; /* Espacio entre tarjetas */
    box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
  }
  .header {
    height: 12vh;
  }
}

@media (max-width: 480px) {
  .card {
    flex: 1 1 100%; /* Tamaño flexible para 1 tarjeta por fila */
    margin: 10px; /* Espacio entre tarjetas */
    box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño */
  }
}