/* BODY */
  
  .textos{
       font-family: 'Montserrat',bold;
    color: #5C4033;
  }
body {
    font-family: 'Times New Roman', Times, serif;
    background-color: #FFF8F0;
    color: #5C4033;
    scroll-behavior: smooth;
}


/* HEADER */
.custom-navbar {
    background: linear-gradient(90deg, #ffb347, #b23a48, #800000);
    
}

.navbar-brand img {
    width: 120px;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: #5C4033 !important;
    transition: color 0.3s;
}

.navbar-nav .nav-link:hover {
    color: #FF914D !important;
}

/* CARRUSEL HERO */
.carrusel {
    position: relative;
    background-color: #d39a6f;

    padding: 20px 0;
}

.carrusel h2 {
  
    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 30px;
    color:#4d352a;
    animation: fadeInDown 1.5s ease;
}

@keyframes fadeInDown {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.carousel-caption p {    
    bottom: 80px; 
    background-color: rgba(255, 255, 255, 0.7);
    padding: 10px 10px;
    border-radius: 10px;
    font-weight: 200;
    animation: fadeInText 1.5s ease;
    position: absolute; 
}

@keyframes fadeInText {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* CARDS SERVICIOS */

.card {
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.5s, box-shadow 0.5s;
    margin-bottom: 30px;
    position: relative;
   
}

.card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.card-img-top {
    transition: transform 0.5s ease;
    width: 100%;       /* Asegura que la imagen ocupe todo el ancho de la tarjeta */
  height: 200px;     /* Puedes ajustar esta altura fija según tu diseño */
  object-fit: cover;
}

.card:hover .card-img-top {
    transform: scale(1.1);
}

/* PARALLAX SUTIL AL SCROLL */
.parallax-card {
    transform: translateY(0px);
    transition: transform 0.5s ease-out;
}

.parallax-card.show {
    transform: translateY(-20px);
}

/* BOTONES */
.btn-primary {
    background-color: #FFB57B;
    border: none;
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #FF914D;
}

.btn-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    padding: 15px 20px;
    font-size: 1.8rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s;
}

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

/* CONTENIDO DETALLADO */
#contenido img {
    border-radius: 15px;
    margin-bottom: 20px;
}

/* FOOTER */
footer {
    background-color: #FFE8D6;
    padding: 40px 0;
    color: #5C4033;
}

.footer-newsletter h3 {
    font-family: 'Times New Roman', Times, serif;
    margin-bottom: 20px;
}

.footer-newsletter input {
    border-radius: 20px;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #FFB57B;
}

.footer-newsletter button {
    border-radius: 20px;
    background-color: #FFB57B;
    border: none;
    padding: 10px 20px;
}

.footer-newsletter button:hover {
    background-color: #FF914D;
}

.social-icons a {
    margin: 0 10px;
    color: #5C4033;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #FF914D;
}
#contenido {
    display: none; 
    padding-top: 10px; /* espacio debajo del navbar */
    min-height: calc(100vh - 70px);
    opacity: 1;
    transition: opacity 0.5s ease;
}

.borrar {
    opacity: 0;
    transition: opacity 0.5s ease;
}
/* Ajuste de tamaño de imágenes del carrusel */
#carouselExampleCaptions .carousel-item img {
    max-height: 600px; /* Ajusta la altura máxima deseada */
    width: auto;        /* Mantiene la proporción original */
    margin: 0 auto;     /* Centra la imagen */
    object-fit: cover;  /* Asegura que la imagen no se distorsione */
}


  .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .footer-column li {
    margin: 8px 0;
  }

  .footer-column a {
    text-decoration: none;
    color: #444;
    font-weight: 500;
    display: inline-block;
    transition: all 0.3s ease;
    border-radius: 5px;
    padding: 5px 8px;
  }

  .footer-column a:hover {
    color: #fff;
    background: #ff7a59;  /* color de realce */
    transform: scale(1.05); /* leve aumento */
  }

  /* Para que el scroll sea suave al navegar */
  html {
    scroll-behavior: smooth;
  }

  /* CARRUSEL MASCOTAS */
  body{
    background-color:#c27e5f;

}
.contenedor{
    height: 200px;
    width: 200px;
    perspective: 1000px;
    margin: 170px auto;
    transform:scale(.9)rotateX(-10deg);
    transform-style: preserve-3d; 
  
}
.contenedor .box{
    animation: rotar 50s infinite linear;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
   transition: 2s;
  
}
.elementos{
    height: 200px;
    width: 150px;
    position: absolute;
    box-shadow: 0 0 10px #fff;
}
:root{
    --transladacion:translateZ(250px);
}
.elementos:nth-child(1){
    transform: rotateY(0deg) var(--transladacion);
}
.elementos:nth-child(2){
    transform: rotateY(45deg) var(--transladacion);
}
.elementos:nth-child(3){
    transform: rotateY(90deg) var(--transladacion);
}
.elementos:nth-child(4){
    transform: rotateY(135deg) var(--transladacion);
}
.elementos:nth-child(5){
    transform: rotateY(180deg) var(--transladacion);
}
.elementos:nth-child(6){
    transform: rotateY(225deg) var(--transladacion);
}
.elementos:nth-child(7){
    transform: rotateY(270deg) var(--transladacion);

}
.elementos:nth-child(8){
    transform: rotateY(315deg) var(--transladacion);

}
.elementos:nth-child(9){
    transform: rotateY(360deg) var(--transladacion);
    
}
.elementos img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    -webkit-box-reflect: below 10px linear-gradient(transparent, transparent, #0005);
    position: absolute;
    backface-visibility: hidden;
    
}
.elementos img:nth-child(2){
    transform: rotateY(180deg)
}
.imagen2:nth-child(1){
    animation: rotar2 50s
}
.piso{
    height: 43em;
    width:43em;
    transform: rotateX(90deg) translateX(-280px) translateY(40px)translateZ(140px);
     background: -webkit-radial-gradient(center center, farthest-side , #9993, transparent);
    border-radius: 50%;
    
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.titulo{
    height: 200px;
    width: 300px;
    flex-direction: column;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1.7em;
}
.titulo p{
    margin: 0;
    padding: 5px;
}

@keyframes rotar{
   
    to{
        transform: rotateY(-360deg) ;
    }
}
.imagenes{
    height: 250px;
    width: 150px;
    transition: 2s
        ;
    transform-style: preserve-3d;
}

/* --- EFECTO BORRADO LATERAL --- */
.ocultar {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.mostrar {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#info-detallada {
  display: block; /* siempre debe estar presente para animación */
  opacity: 0;
}

.carrusel,
#tarjetas-container {
  transition: opacity 0.5s ease;
}
#info-detallada {
    background-color: #f8f9fa; /* Fondo claro */
    padding: 20px;
    border-radius: 10px;
    margin-top: 20px;
}

.contenedor-centrado {
   display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
    height: 100vh;
}
.imgem {
  
  
   max-width: 90%;
  height: auto;
  object-fit: cover;

}
.video {
  /* El video ocupará el 100% del ancho de su contenedor */
  height: auto; /* La altura se ajustará automáticamente para mantener la proporción */
  max-width: 800px; /* Limita el tamaño máximo para que no se vea pixelado en pantallas grandes */
}
.card {
  display: flex;
  flex-direction: column;
  height: 90%;
}

.card img {
  height: 210px; /* puedes ajustar según tus imágenes */
  object-fit: cover; /* recorta sin deformar */
}

.card-body {
  display: flex;
  flex-direction: column;
}

.card-body .btn {
  margin-top: auto; /* lleva el botón al final */
}
/* Imágenes responsivas */
img {
  max-width: 100%;
  height: auto;
}

/* Videos responsivos */
video {
  max-width: 100%;
  height: auto;
}

/* Botón de WhatsApp siempre visible en móvil */
.btn-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  z-index: 1000;
}