/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Banner full-width */
.hero-banner{
  width: 100%;
  height: 80vh;              /* o 100vh si quieres pantalla completa */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;        /* importante para overlays */
  overflow: hidden;
}

/* overlay oscuro para legibilidad */
.hero-overlay{
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0,0,0,0.30);
  z-index: 1;
}

/* contenido en el banner (texto y botones) */
.hero-content{
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 2rem;
}

/* Asegura que los containers posteriores no se superpongan */
main.container{
  position: relative;
  z-index: 3;
}

/* Si por alguna razón tu navbar está con position:fixed, añade un padding-top al body */
body.fixed-navbar-padding {
  padding-top: 70px; /* ajusta según la altura del navbar */
}

/* asegura que cada columna use flex y la card se centre en su columna */
.product-grid .col.d-flex {
    align-items: stretch;
}

/* Opcional: ajustar máximo ancho de las cards para que no se peguen al borde en pantallas muy anchas */
.product-grid .card {
    max-width: 100%;
}

/* Cards de categoría */
.category-card .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

    .category-card .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    }
/* Mantener relación 1:1 con Bootstrap 4 (sin ratio nativo) */
.ratio {
    position: relative;
    width: 100%;
    padding-top: 100%;
}

    .ratio > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }