body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #fffbe6;
}


.producto-caja {
  border: none;
  border-radius: 5px;
  /* Bordes redondeados */
  transition: background-color 0.3s ease;
  /* Transición suave al cambiar el color de fondo */
  /* establecer el padding automatico */
  padding : 10px;
  margin-bottom: 5px;
  background-color: #f3efd6;
  padding-left: 10px;
}

.producto-caja:hover {
  background-color: #a39067;
}

.bg-cremita-header {
  background-color: #f3efd6;
}



.card-title {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  font-size: 1.6em;
  color: #5C4033;
  font-style: bold;
}

.card-text {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  color: #5C4033;
  /* Un marrón más suave */
  margin-bottom: 30px;
}

.nav-link.active {
  color: #A97142 !important;
  font-weight: bold;
  border-bottom: 2px solid #A97142;
}

.nav-link {
  color: #A97142;
}

.nav-link:hover {
  color: #A97142;
  filter: brightness(0.8);
}

.card {
  background-color: #f3efd6;
  border: none;
  /* saca el borde gris */
  box-shadow: 0 2px 4px rgb(0, 0, 0, 0.15);
  /* sombra suave */
}

.btn-outline-secondary {
  border-width: 0.01px;
  border-color: #a39067;
    color: #a39067;
}

.btn-outline-secondary:hover {
  background-color: #a39067;
  /* Fondo al pasar el mouse */
  color: white;
  /* Texto blanco cuando se pasa el mouse */
}

/*
.img-container {
  height: 450px; /* o el alto que prefieras 
  overflow: hidden;
}

.zoom-img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.zoom-img:hover {
  transform: scale(1.05);
}
*/

textarea::placeholder {
  opacity: 0.3 !important;
  /* se usa !important para que tenga prioridad sobre bootstrap */
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* Sombra más pronunciada al pasar el mouse */
  transform: scale(1.01);
}

.logos-header-footer:hover {
  transform: scale(1.1);
  /* Efecto de zoom al pasar el mouse */
  transition: transform 0.3s ease;
  /* Transición suave */
  filter: brightness(0.8);
  /* Oscurece la imagen al pasar el mouse */
}

.logos-metodos-pago:hover {
  transform: scale(1.05);
  /* Efecto de zoom al pasar el mouse */
  transition: transform 0.3s ease;
  /* Transición suave */
  filter: brightness(0.8);
  /* Oscurece la imagen al pasar el mouse */
}

.logos-redes-footer {
  max-height: 50px;
  object-fit: contain;
}

#perros-container .card {
  max-width: 350px;
  margin: 0 auto;
}

.productos-destacados {
  padding-top: 50px;
}




.productos-destacados h5{
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  font-size: 1.6em;
  color: #5C4033;
  font-weight:510;
  /* Un marrón más suave */
}

.productos-destacados p{
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  color: #5C4033;
  /* Un marrón más suave */
  font-size : 1em;

}

.contenedor-titulo-descripcion {
  padding-top : 20px;
}

/* Imagen base */
.fotos-productos-destacados {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
  display: block;
}

.fotos-productos-destacados:hover {
  transform: scale(1.05);
  /* Aumenta el tamaño al pasar el mouse */
}

/* Importa las fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Quicksand:wght@400;500;700&display=swap');

/* Estilos para la sección de métodos de pago */
.metodos-de-pago {
  padding: 50px;
  background-color: #f3efd6;
  /* Color de fondo suave */
  text-align: center;
  /* Centra todo el contenido de la sección */
}


.logo-mercadopago {
  width: 70px;
  /* Ancho de la imagen del logo */
  height: auto;
  /* Mantiene la proporción de la imagen */
}




.titulo {
  font-family: 'Playfair Display', serif;
  /* Fuente elegante para el título */
  font-size: 2.5em;
  /* Tamaño de fuente más grande */
  color: #8B4513;
  /* Un color marrón oscuro, como de chocolate o café */

  padding-top: 50px;
}


.metodo-nombre {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  font-size: 1em;
  color: #5C4033;
  font-style: bold 1.2em;
  /* Un marrón más suave */
  margin-bottom: 30px;
}








/* Contenedor principal del acordeón para el fondo y bordes generales */
.preguntas-frecuentes .container .accordion {
    background-color: #f3efd6; /* **Fondo principal del acordeón: todo será de este color** */
    padding: 0; /* **QUITAMOS el padding aquí**; lo manejaremos dentro de los items */
}

/* Estilos para cada item del acordeón */
.accordion-item {
    border: none; /* **ELIMINAMOS todos los bordes por defecto** */
    background-color: transparent; /* Asegura que el item no tenga su propio fondo blanco por defecto */
    margin-bottom: 0; /* **ELIMINAMOS el espacio entre los items** */
    border-bottom: 3px solid #fffbe6; /* Línea divisoria suave entre preguntas */
}

/* Estilos para el botón de la pregunta (cabecera del acordeón) */
.accordion-button.pregunta-acordion {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    color: #5C4033;
    background-color: #f3efd6; /* **Fondo inicial de la pregunta: el mismo que el acordeón** */
    padding: 18px 20px; /* Un poco más de padding vertical */
    border-radius: 0; /* **Quitamos los bordes redondeados en los botones** */
}

/* Estilos para el botón de la pregunta cuando está ABIERTO (activo) */
.accordion-button.pregunta-acordion:not(.collapsed) {
    color: #8B4513; /* Un color más vibrante para la pregunta activa */
}

/* Estilos para el texto de la respuesta */
.accordion-body.texto-acordion {
    font-family: 'Quicksand', sans-serif;
    font-size: 1em;
    color: #333;
    background-color: #f3efd6; /* **Fondo de la respuesta: el mismo que el acordeón y la pregunta cerrada** */
    border-bottom: 3px solid #fffbe6; /* Línea divisoria suave entre preguntas */
    line-height: 1.6;
}

/* Estilos para los enlaces dentro del acordeón */
.accordion-body .enlace-acordion {
    color: #a0512da4;
    text-decoration: underline;
}

.accordion-body .enlace-acordion:hover {
    color: #8B4513;
}

/* Estilos para el botón de la pregunta cuando está COLAPSADO (cerrado) */
.accordion-button.collapsed.pregunta-acordion {
    background-color: #f3efd6; /* Fondo del botón cuando está cerrado (mismo que el acordeón) */
    color: #5C4033;
}

/* Ajuste para el icono de la flecha del acordeón */
.accordion-button:not(.collapsed)::after {
    filter: none; /* Elimina el filtro si antes lo tenías para la flecha abierta */
    transform: rotate(-180deg); /* Asegura que la flecha gire correctamente al abrir */
}

.accordion-button.collapsed::after {
    filter: brightness(0.6); /* Oscurece la flecha para que se vea mejor cuando está cerrada */
    transform: rotate(0deg); /* Asegura que la flecha esté en su posición inicial al cerrar */
}

/* Asegurar que los bordes redondeados finales se vean bien si hay más de un item */
.accordion-item:last-child .accordion-button.collapsed.pregunta-acordion {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.accordion-item:last-child .accordion-collapse.collapse:not(.show) + .accordion-button.collapsed.pregunta-acordion {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.accordion-item:last-child .accordion-button.pregunta-acordion:not(.collapsed) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}






.carousel {
    max-height: 450px; 
    overflow: hidden; 
}


.carousel-caption h5{
  font-family: 'Playfair Display', serif;
  /* Fuente elegante para el título */
  font-size: 2.5em;
  /* Tamaño de fuente más grande */
  color: #ffffff;
  text-shadow: #000000 1px 1px 2px;
  /* Sombra para mejorar la legibilidad del texto sobre imágenes */

}

.carousel-caption p {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  color: #ffffff;
  text-shadow: #000000 1px 1px 2px;
  /* Sombra para mejorar la legibilidad del texto sobre imágenes */
  font-size : 1.3em;
}






/* Estilos para la sección de Newsletter */
.newsletter-section {
    padding: 50px 0; /* Un padding similar a otras secciones */
    background-color: #f3efd6; /* Si quieres un fondo para esta sección */
    border-radius: 8px; /* Opcional: un poco de borde redondeado */
    margin-bottom: 50px; /* Espacio inferior si lo necesitas */
}



.newsletter-section p {
    font-family: 'Quicksand', sans-serif;
    color: #5C4033;
    font-size: 1.1em;
}


.newsletter-section {
  padding: 50px;
  background-color: #f3efd6;
  /* Color de fondo suave */
  text-align: center;
  /* Centra todo el contenido de la sección */
}

.newsletter-section h2 {
  margin-bottom: 10px;
}

.newsletter-section .form-control {
  width: 100%;
  max-width: 500px;
  /* Ancho máximo del input */
  margin: 0 auto;
  /* Centra el input */
}

.contenedor-form-encargo label {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  color: #5C4033;
  /* Un marrón más suave */
  font-weight: 600;
}

.contenedor-form-encargo span {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  color: #5C4033;
}


h2 {
  font-family: 'Playfair Display', serif;
  /* Fuente elegante para el título */
  font-size: 2.5em;
  /* Tamaño de fuente más grande */
  color: #8B4513;
  /* Un color marrón oscuro, como de chocolate o café */
  margin-bottom: 20px;
}

p {
    font-family: 'Quicksand', sans-serif;
    color: #5C4033;
    font-size: 1.1em;
}

.preguntas-conocenos h3 {
  font-family: 'Quicksand', sans-serif;
  /* Fuente legible para el texto */
  font-size: 1.6em;
  color: #5C4033;
  font-weight:510;
  /* Un marrón más suave */
}


.cont-oscuro {
  background-color: #f3efd6;
}




.img-banner-full {
  width: 100%;
  height: 400px; /* o lo que prefieras, incluso 100vh si querés toda la altura de la pantalla */
  object-fit: cover;
  display: block;
}

.img-banner-full-productos {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center 57%; /* esto sube la imagen dentro del contenedor */
  display: block;
}


.img-salida-izquierda {
  position: absolute;
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 350px;
  z-index: 1;
  top: 170px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4)); /* sombra sutil */
}

.img-salida-derecha {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  max-width: 450px;
  z-index: 1;
  top: 205px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.4)); /* sombra sutil */
}

.texto-izquierda {
  text-align: left;
}

.texto-derecha {
  text-align: right;
}

@media (max-width: 768px) {
.texto-derecha {
  padding-right: 50px;
}
}