html {
      scroll-behavior: smooth;
    }

    /* Tu nuevo color principal */
    .bg-orange-500 {
      background-color: #ce5f32 !important;
    }
    
    /* Tu nuevo color para el hover (más oscuro) */
    .hover\:bg-orange-600:hover {
      background-color: #b9552d !important;
    }

    /* --- Para los botones con borde (como el del header) --- */
    
    .border-orange-500 {
      border-color: #ce5f32 !important;
      color: #ce5f32 !important;
    }
    .hover\:bg-orange-500:hover {
      background-color: #ce5f32 !important;
      color: #ffffff !important; /* Asegura texto blanco en hover */
    }
    
    /* --- Para los iconos y puntos del carrusel --- */
    
    .text-orange-500 {
      color: #ce5f32 !important;
    }
    .bg-orange-100 {
      background-color: #fef1e8 !important; /* Un tono pastel de tu color */
    }

    /* --- Corregir dots del carrusel 'Servicios' (No Naranja) --- */
#servicios .flex.justify-center > button.bg-orange-500 {
  background-color: #19212E !important; /* Asfalto Nocturno */
}

/* --- SECCIÓN PET FRIENDLY (AHORA SÍ) --- */
 /* --- SECCIÓN PET FRIENDLY (LA BUENA) --- */

/* 1. LA SECCIÓN AZUL ANCHO COMPLETO */
#pet-friendly-section {
  background-color: #19212E; /* Asfalto Nocturno (fondo completo) */
  position: relative;
  /* La franja es angosta: la imagen le da altura */
  padding-top: 0.5rem;    /* py-14 */
  padding-bottom: 0.5rem; /* py-14 */
  /* Quitamos overflow para que la imagen desborde en desktop */
}

/* 2. El grid wrapper DENTRO del container */
#pet-friendly-wrapper {
  display: grid;
  grid-template-columns: 1fr; /* Móvil: 1 columna */
  gap: 2rem;
  align-items: center;
  position: relative;
}

/* 3. Columna de Texto (¡¡CENTRADA!!) */
#pet-text-column {
  position: relative;
  z-index: 10;
  text-align: center; /* ¡¡TEXTOS CENTRADOS!! */
}

/* 4. Patita (MÁS GRANDE, SIN ROTACIÓN) */
.pet-paw-background {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Centrada y más grande */
  transform: translate(-50%, -50%) rotate(0deg); 
  width: 24rem;  /* w-96 */
  height: 24rem; /* h-96 */
  opacity: 0.1;
  pointer-events: none;
  z-index: 1; /* Detrás del texto */
}

/* 5. Contenedor de Imagen Circular */
.pet-image-container {
  position: relative;
  width: 90%; /* Más pequeño en móvil */
  max-width: 400px;
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 5;
}

.pet-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pet-image-container figcaption {
    position: relative;
    bottom: 6rem;
    right: 50%;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transform: translate(71%);
    z-index: 100000;
    text-shadow: 1px 2px 1px #19202d;
}

/* --- Layout de Escritorio (lg: 1024px) --- */
@media (min-width: 1024px) {
  #pet-friendly-section {
    /* La sección puede desbordar */
    overflow: visible;
  }

  #pet-friendly-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Columna de Texto (Izquierda en desktop) */
  #pet-text-column {
    text-align: left; /* Textos a la izquierda en desktop */
  }
  
  /* Patita (Izquierda en desktop) */
  .pet-paw-background {
    left: 6.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
  }
  
  /* Imagen (Sube y se desborda) */
  .pet-image-container {
    width: 100%;
    max-width: 480px; /* Más grande en desktop */
    /* Aquí la magia: se sale de la franja */
    transform: scale(1.25);
  }
}



/* --- Estilos para Clientes Corporativos --- */
.corporate-icon {
  height: 4rem; /* h-16 */
  width: auto;
  margin-bottom: 1.5rem; /* mb-6 */
}

/* En desktop, los textos de las columnas van a la izquierda */
.corporate-item {
  text-align: left;
}

.corporate-item h4 {
  margin-top: 10px;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  font-weight: 600; /* font-semibold */
  color: #19212E; /* Asfalto Nocturno */
  margin-bottom: 0.75rem; /* mb-3 */
}

.corporate-item img {
  width: 120px;
  height: auto;
  margin: auto;
}

.corporate{
  width: 75%;
   margin: auto; 
}

#clientes-corporativos{
  background-color: #afdbf932;
}
/* En móvil, centramos el ícono y el texto de las columnas */
@media (max-width: 767px) {

  .corporate{
  width: 100%;
   margin: auto; 
}


  .corporate-icon {
    margin-left: auto;
    margin-right: auto;
  }
  .corporate-item {
    text-align: center;
  }
}


/* --- Estilos para la sección Reseñas --- */
#reseñas {
  padding-top: 5rem;    /* py-20 */
  padding-bottom: 5rem; /* py-20 */
  background-color: #ffffff; /* Fondo blanco */
}

/* Botón Amarillo (Color del PDF 'Amarillo Maiz') */
.btn-yellow {
    display: inline-block;
    background-color: #F3D779;
    color: #19212E;
    padding: 0.1rem 1.5rem;
    border-radius: 0;
    font-weight: 600;
    transition: all 0.2s 
ease-in-out;
    
    margin-bottom: 2.5rem;
    text-decoration: none;
    font-size: 10px;
    
}


.btn-yellow:hover {
  background-color: #e6c870; /* Un poco más oscuro */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Contenedor del Carrusel */
.review-carousel-wrapper {
  position: relative;
  max-width: 1400px; /* lg:max-w-4xl */
  margin: auto;
}

.review-carousel-container {
  overflow: hidden;
}

.review-carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.review-slide {
  flex: 0 0 100%; /* Ocupa 100% en móvil */
  padding: 0 1rem; /* px-4 */
  text-align: center;
  transition: opacity 0.5s ease-in-out;
}

.review-slide img {
  width: 7rem; 
  height: 7rem; 
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem; /* mb-6 */
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: all 0.5s ease-in-out; 
}

.review-slide .review-text {
  font-style: italic;
  font-size: 0.8rem; /* text-lg */
  line-height: 1rem;
  color: #242B3D;  
  max-width: 640px; /* max-w-2xl */
  margin: auto;
  text-align: justify;
}

.review-slide .review-author {
  margin-top: 1rem; /* mt-4 */
  font-weight: 600; /* font-semibold */
  color: #19212E; /* Asfalto Nocturno */ 
}

/* Dots (Puntos) */
.review-dots {
  display: flex;
  justify-content: center;
  gap: 0.75rem; /* space-x-3 */
  margin-top: 2rem; /* mt-8 */
}

.review-dot {
  width: 0.75rem;  /* w-3 */
  height: 0.75rem; /* h-3 */
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #afdbf9; /* bg-gray-300 */
}
.review-dot:hover {
  background-color: #afdbf9; /* hover:bg-gray-400 */
}

/* El dot activo es AZUL (Asfalto Nocturno), NO NARANJA */
.review-dot.active {
  background-color: #19212E !important; /* Asfalto Nocturno */ 
  transform: scale(1.25);
}


.seguridad{
  margin: auto; 
  max-width: 400px;
   width: 450px; 
   border-radius: 40px;
}

.pd-50{
  padding: 0 50px;
}

.flecha{
  bottom: -318px; 
  position: relative
}

 .mascotica{
    height: 241px;
    position: relative;
    right: 6px;
    top: 5px;
  }
@media (max-width: 768px) {

  .mascotica{
    height: 312px;
    position: relative;
    right: 6px;
    top: 5px;
  }

  .pet-image-container figcaption{
    position: relative;
    bottom: 7rem;
    right: 58%;
    font-size: 14px;
  }
  .flecha{
  left: -50%;
}

  .pd-50{
  padding: 0 5px;
}

  .seguridad{   
  max-width: 100%; 
   width: 100%;
}
}

/* --- Layout de Escritorio (md: 768px) --- */
@media (min-width: 768px) {

  .review-slide {
    flex: 0 0 33.3333%; /* 3 slides visibles */
    padding: 0 0.5rem; /* Menos padding lateral para que no se corten */
  }

  /* Los slides laterales (NO activos) son más pequeños y tenues */
  .review-slide:not(.is-active) {
    opacity: 0.4; /* Más opacidad, pero sigue tenue */
    transform: scale(0.85); /* Más pequeños */
  }
  
  .review-slide.is-active {
    opacity: 1;
    transform: scale(1); /* Tamaño normal */
  }

  /* La imagen del slide activo es más grande */
  .review-slide.is-active img {
    width: 10rem; /* Vuelve a ser w-40 */
    height: 10rem; /* Vuelve a ser h-40 */
  }

  /* Los textos de los slides inactivos también van tenues */
  .review-slide:not(.is-active) .review-text,
  .review-slide:not(.is-active) .review-author {
    color: rgba(36, 43, 61, 0.6); /* Azul Cantera más tenue */
  }
}


#banner-info, footer{
  background-color: #19212E!important; 
}

/* --- Estilos del Nuevo Footer --- */

.nuevo-footer {
  background-color: #19212E; /* El fondo azul oscuro (Asfalto Nocturno) */
  color: #ffffff;
  padding: 2.5rem 1.5rem; /* 40px arriba/abajo, 24px lados */
  font-family: Arial, sans-serif; /* O la fuente que estés usando */
}

.footer-container {
  max-width: 1280px; /* Ancho máximo del contenido */
  margin: 0 auto; /* Centrar el contenedor */
  
  /* --- Layout Móvil (por defecto) --- */
  display: grid;
  grid-template-columns: 1fr; /* Una sola columna */
  gap: 2rem; /* Espacio entre logo, links y copyright */
  text-align: center; /* Todo centrado en móvil */
}

/* --- Columna 1: Logo --- */
.footer-col-logo .footer-logo {
  width: 180px; /* Ajusta el tamaño de tu logo */
  height: auto;
  margin: 0 auto; /* Centrar el logo en móvil */
}

/* --- Columna 2: Links (Vertical) --- */
.footer-col-links ul {
  list-style: none; /* Quita los puntos */
  padding: 0;
  margin: 0;
  line-height: 1;
}

.footer-col-links li {
  margin-bottom: 1rem; /* 16px de espacio ENTRE cada link */
}

.footer-col-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s;
}

.footer-col-links a:hover {
  color: #afdbf9; /* Un color más claro para el hover */
}

/* --- Columna 3: Copyright --- */
.footer-col-copyright p {
  color: #a0aec0; /* Un gris más suave */
  font-size: 0.85rem;
  margin: 0;
}




/* --- Layout Desktop (Pantallas grandes) --- */
@media (min-width: 1024px) {
  
  .footer-container {
    /* ESTA ES LA MAGIA: 3 columnas */
    /* Col 1 (Logo) | Col 2 (Links) | Col 3 (Copyright) */
    grid-template-columns: 250px 1fr 310px;
    
    align-items: anchor-center; /* Alinea todo arriba */
    text-align: left; /* Alinea todo a la izquierda en desktop */
    gap: 2rem; /* Espacio entre columnas */
  }

  .footer-col-logo .footer-logo {
    margin: 0; /* Quita el centrado de móvil */
  }
  
  .footer-col-copyright {
    text-align: right; /* Alinea el texto del copyright a la derecha */
    align-self: flex-end; /* Mueve esta columna al fondo */
    padding-bottom: 5px; /* Pequeño ajuste para alinear con el logo */
  }
}


/* --- ESTILOS DEL NUEVO HEADER --- */
.nuevo-header {
  background-color: #19212E; /* Fondo azul oscuro (Asfalto Nocturno) */
  color: #ffffff;
  width: 100%;
  z-index: 50;
  /* Ya no es 'absolute', es parte del flujo normal de la página */
}

/* Esto arregla las <option> del 'select' de idioma.
  Tu código original las ponía con texto negro ('text-black'), 
  lo cual no se ve en un menú desplegable oscuro.
*/
.nuevo-header select option {
  color: #19212E; /* Texto negro */
  background-color: #ffffff; /* Fondo blanco */
}

.nosotros{
    width: 90%;
     margin: 0 auto 40px;
}

.proposito{
    width: 70%;
    margin: 10px auto 10px
}

.buscamos{
    width: 70%;
    margin: 10px auto 60px;
    font-weight: 600;
}

@media (max-width: 1024px){

    .buscamos{
    width: 100%;
    margin: 25px auto 60px;
    font-weight: 600;
}

    .nosotros{
    width: 100%;
     margin: 0 auto 40px;
}

.proposito{
    width: 100%;
    margin: 10px auto 10px
}

}


.leading-relaxed {
    line-height: 3;
}