/* ====== ESTILOS PERSONALIZADOS ====== */
body {
  font-family:  'Josefin Sans', sans-serif;
  background-color: #EAE4DD;
  font-size: 20px;
  margin: 4%; /* espacio para navbar fijo */
}
.bg-bouquet {
  background-color: #EAE4DD !important;
}


/* Navbar */
.nav-link {
  font-family:  'Josefin Sans', sans-serif;
  color: #000 !important;
  font-weight: 600;
  text-decoration: none;
}
.nav-link.active, .nav-link:hover {
  color: #7a1c5d !important;
}

/* Hero */
.carousel-control-prev,
.carousel-control-next {
  width: auto; /* ajusta al tamaño del ícono */
}

.carousel-control-prev .custom-icon,
.carousel-control-next .custom-icon {
  width: 20%;   /* ajusta tamaño según necesites */
  height: auto;
}

.carousel-indicators [data-bs-target] {
  width: 1em !important;   /* tamaño del circulito */
  height: 1em !important;
  border-radius: 50%;          /* que sea redondo */
  background-color: #ffff !important; 
  border: 4px solid #750151 !important;   /* borde color ciruela/uva */
  margin: 0 5px;
  opacity: 1;                  /* deshabilita el fade de bootstrap */
}
.carousel-indicators .active {
  background-color: #750151 !important;   /* circulito relleno */
}

@media (max-width: 760px) {
  .carousel-indicators [data-bs-target] {
    width: 0.2em !important;  /* ajusta tamaño de texto en tablet */
    height: 0.2em !important;
    border: 2px solid #750151 !important; 
  }
}



/* Catálogo */
.catalogo {
  background: #EEEEEE;
  background: -webkit-linear-gradient(180deg,rgba(238, 238, 238, 1) 0%, rgba(236, 233, 229, 1) 50%, rgba(234, 228, 221, 1) 100%);
  background: -moz-linear-gradient(180deg,rgba(238, 238, 238, 1) 0%, rgba(236, 233, 229, 1) 50%, rgba(234, 228, 221, 1) 100%);
  background: linear-gradient(180deg,rgba(238, 238, 238, 1) 0%, rgba(236, 233, 229, 1) 50%, rgba(234, 228, 221, 1) 100%);
    startColorstr="#EEEEEE",
    endColorstr="#EAE4DD",
    GradientType=0
  )
    startColorstr="#EEEEEE",
    endColorstr="#EAE4DD",
    GradientType=0
  )
  filter: progid:DXImageTransform.Microsoft.gradient(
    startColorstr="#EEEEEE",
    endColorstr="#EAE4DD",
    GradientType=0
  )
    startColorstr="#EEEEEE",
    endColorstr="#EAE4DD",
    GradientType=0
  );
}
.titulo {
  font-family: 'Libre Baskerville';
  font-size: 2.5rem;
  font-weight: bold;
  color: #750151;
}
.subtitulo {
  font-family:  'Libre Baskerville', serif;
  font-size: 1.5rem;
  font-weight: bold;
  color: #750151;
}
.descripcion {
  font-family:  'Libre Baskerville', serif;
  font-size: 1rem;
  font-weight: bold;
}
.stock {
  font-family:  'Josefin Sans', sans-serif;
  font-size: 1.rem;  
  font-style: italic;
  font-weight: bold;
  margin-left: 8px;
}

.catalogo .card {
  font-family:  'Josefin Sans', sans-serif;
  border-radius: 36px;
  overflow: hidden;
}
.catalogo .card:hover {
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.24);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.24);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.24);
}
.card-img-top {
  height: 350px;
  width: auto;
  object-fit: cover;
  object-position: center;
}
.catalogo .card-body {
  border-top: 6px solid #750151;
}
.catalogo .card-title {
  font-weight: regular;
  color: #000;
}
.catalogo .card-text.precio {
  font-weight: 600;
  font-size: 1.5rem;
  color: #750151;
  padding: 0;
}
.catalogo .btn {
  background-color: transparent;
  border-radius: 36px;
  border: 1px solid #750151;
  font-weight: 600;
  color: #750151;
}
.catalogo .btn:hover {
  background-color: #750151;
  color: #ffff;
}
.nota {
  font-family:  'Josefin Sans', sans-serif;
  font-size: 1.1rem;  
  font-style: italic;
  color: #750151;
  margin-top: 10px;
}
.flor {
  width: 16px;
  height: 16px;
}

/* Oferta */
.oferta {
  border-top: 18px solid #750151;
  border-bottom: 16px solid #EAE4DD;
}
.ramosemana {
  max-width: 350px;
  height: auto;
  border-radius: 36px;
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.24);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.24);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.24);
}
.oferta .btn {
  background-color: transparent;
  border-radius: 36px;
  border: 1px solid #750151;
  font-family: 'josefin Sans', sans-serif;
  font-weight: 600;
  color: #750151;
}
.oferta .btn:hover {
  background-color: #750151;
  color: #ffff;
}
span.precio {
  font-weight: 600;
  font-size: 1.5rem;
  color: #750151;
  padding: 0;
}

/* pedido-zona*/
.pedido-zonas {
  font-family: josefin Sans, sans-serif;
  font-weight: 500;
}

.bg-beige {
  background-color: #EAE4DD !important;
}
.icon   {
  width: 48px;
  height: 48px;
}
.card-pedido {
  border: none !important;
}
.pedido-zonas .btn {
  background-color: transparent;
  border-radius: 36px;
  border: 1px solid #750151;
  font-weight: 600;
  color: #750151;
}
.pedido-zonas .btn:hover {
  background-color: #750151;
  color: #ffff;
}

/* FAQ */
.accordion-button {
  color: #750151 !important;
  font-weight: 500;
  font-family: josefin Sans, sans-serif;
}
.accordion-button:not(.collapsed) {
  background-color: #f3e6f0;
}

.accordion-body {
  font-family: josefin Sans, sans-serif;
  font-weight: 400;
  color: #000;
}


/* Cambiar borde y sombra del accordion al hacer foco o estar abierto */
.accordion-button:focus {
  border-color: #80004a !important;   /* color del texto */
  box-shadow: 0 0 0 0.25rem rgba(128, 0, 74, 0.25) !important; /* sombra con tono bordó */
}

/* También cuando está activo/abierto */
.accordion-button:not(.collapsed) {
  font-weight: 700;
  color: #000 !important;
  background-color: #a3005f9b !important;
  border-color: #80004a !important;
}


/* Footer */
footer {
  font-size: 0.9rem;
  background-color: #EAE4DD;
  font-family: josefin Sans, sans-serif;
  font-size: 1.25em;
}
footer h6 {
  font-weight: bold;
  font-family: josefin Sans, sans-serif;
  font-size: 1.25em;
  color: #750151;
}
footer a {
  text-decoration: none;
  color: #000;
}
footer a:hover {
  color: #750151;
  text-decoration: none;
}
.bg-derechos {
  background-color: #750151 !important;
  font-family: josefin Sans, sans-serif;
  font-size: 1.25em;
}
.faq-section {
  background-image: url('../img/FAQ.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
}
/* Versión para pantallas hasta 768px (mobile) */
@media (max-width: 768px) {
  .faq-section {
    background-image: url('../img/FAQ_mb.png'); /* tu versión mobile */
  }
}