/* 1. ESTILOS GENERALES                          */

html {
  scroll-behavior: smooth;
}

body {
  background-color: rgb(138, 66, 110); 
}

h3,h4 {  font-family: "Englebert", cursive;
  font-weight: 400;
  font-style: normal; }


h1,h2 {   
  font-family: "Chewy", system-ui;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5 {
  color: white;
  text-align: center;
  margin: 5px 0;
  font-weight: 600;
}

.pijamas-infantiles {
  background-color: rgb(230, 87, 87);
  margin: 80px 0;
  width: 100%;  
}

.pijamas-largos {
  background-color: rgb(230, 87, 87);
  margin: 40px 0;
  width: 100%;  
}

.pijamas-largos-camisones {
  background-color: rgb(230, 87, 87);
  margin: 40px 0;
  width: 100%;  
}

.pijamas-cortos-animados {
  background-color: rgb(230, 87, 87);
  margin: 40px 0;
  width: 100%;  
}

.pijamas-cortos-fullprint{
  background-color: rgb(230, 87, 87);
  margin: 40px 0;
  width: 100%;  
}

.pijamas-cortos-camisones{
  background-color: rgb(230, 87, 87);
  margin: 40px 0;
  width: 100%;  
}

.pijamas-cortos-shortstops{
  background-color: rgb(230, 87, 87);
  margin: 40px 0;
  width: 100%;  
}


/* 2. NAVBAR                                      */

nav div {
  background-color: rgba(221, 151, 218, 0.986);
}

.navbar-logo {
  width: 45px;
  height: auto;
  object-fit: cover;
  border: 2px solid #e089b5;
  border-radius: 50%;
  margin-right: 10px;
}

.brand-text {
  font-size: 1.5rem;
  font-weight: 600;
  margin-left: 5px;
  display: inline-block;
}

.nav-link-custom {
  font-size: 1.20rem;
  font-weight: 500;
}

.nav-item {
  margin-left: 15px;
}

/* 3. CARRUSELES                                  */

#carouselExampleCaptions {
  max-width: 700px;
  margin: 0 auto;
}

/* Espaciado entre carousels */
.container.text-center {
  margin-top: 75px;
  margin-bottom: 75px;
}

/* 4. IMÁGENES                                    */

img {
  max-width: 300px;
  margin: 15px auto;
  border-radius: 10px;
  border: 2px solid;
}

.logo-whatsapp {
  width: 20%;
  display: block;
  margin: 20px auto;
  object-fit: contain;
}

.logo-instagram {
  width: 26%;
  display: block;
  margin: 20px auto;
  object-fit: contain;
}

/* 5. TARJETAS (CARDS)                            */

.card {
  background-color: rgba(209, 113, 204, 0.986);
  border-radius: 10px;
  padding: 10px;
  border: 2px solid;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 16px rgba(0,0,0,0.15);
}

.card-title {
  font-weight: bold;
  color: white;
}

.card-text {
  color: white;
}

/* 6. SECCIONES                                   */

section {
  margin: 20px 0;
  text-align: center;
}

#Categorias {
  margin-top: 10px;
}

/* Espacio entre bloques con contacto */

.row {
  margin-top: 60px;
  margin-bottom: 60px;
  margin-top: -5px;
}

.adaptable {
  background-color: rgb(238, 158, 207);
  padding-bottom: 50px;
  padding-inline-end: 50px;
  margin-bottom: 10px;
}

.adaptable h4 {
  font-size: 1.1rem;
  line-height: 1.3;
}

/* 7. COLUMNAS RESPONSIVE                         */

.column {
  width: 100%;
}

@media (min-width: 600px) {
  .column {
    width: 190%;
  }
}

/* 8. COLORES VARIOS (textos y listas)            */

header {
  color: rgb(224, 148, 243);
}

ul {
  color: rgb(231, 162, 248);
}

col {
  color: rgb(231, 162, 248);
  text-align: center;
}