html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(241, 246, 253);
}

a {
  text-decoration: none;
  color: black;
}

h2 {
  text-align: center;
  margin: 40px;
}

.btn-outline-success {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
--bs-btn-border-color: var(--bs-white);
--bs-btn-hover-bg: var(--bs-white);
--bs-btn-hover-border-color: var(--bs-white);
--bs-btn-hover-color: #F5278B;
}

.btn-locos{
  --bs-btn-font-weight: 600;
  --bs-btn-color: #F5278B;
--bs-btn-border-color: #F5278B;
--bs-btn-hover-bg: #F5278B;
--bs-btn-hover-border-color: #F5278B;
--bs-btn-hover-color: var(--bs-white);
}

.img-tienda {
  width: 100%;          /* ocupa todo el ancho disponible del container */
  height: 650px;        /* altura fija que puedes controlar */
  object-fit: cover;    /* recorta sin deformar */
  object-position: 50% 21%;   /* centrado horizontal, pegado arriba */
}

.display-flex {
 display: flex;
 justify-content: center;
}

.gap-tarjetas {
 gap: 20px;
}

.custom-img {
  height: 240px;        /* 👈 aquí eliges el alto que quieras */
  object-fit: cover;    /* recorta sin deformar */
  object-position: top; /* controla qué parte mostrar (arriba, centro, abajo o % en Y) */
}

.card {
  margin-top: 20px;
}

.footer {
  margin-top: 50px;
}

/* Texto en carrusel */
.carousel-caption {
  font-size: 50px;
  bottom: 50%;        
  transform: translateY(50%); 
  text-align: center; 

  /* Borde negro */
  -webkit-text-stroke: .1px black; /* borde negro de 1px */
  color: white; /* color de relleno de la letra */

  /* Sombra */
  text-shadow: 3px 3px 12px rgba(0, 0, 0, 0.7); 
}

/* redes-sociales */
.redes-sociales {
  display: flex;
justify-content: flex-end;
gap: 20px;
margin-bottom: 20px;
}


  .texto-portada {
  font-size: 50px; /* tamaño por defecto en pantallas grandes */
  font-weight: bold;
}

/* Para pantallas menores a 768px (celulares) */
@media (max-width: 768px) {
  .texto-portada {
    font-size: 28px; /* más pequeño en celulares */
  }
}

.email_pie {
  margin: 0;
}

span {
  font-weight: bold;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: var(--bs-btn-hover-color) !important ;
    background-color: var(--bs-btn-hover-bg) !important ;
    border-color: var(--bs-btn-hover-border-color) !important ;
}