/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
/* Hace que el banner sea responsive y ocupe la mitad del ancho de la pantalla */
@font-face {
  font-family: "MiFuente";
  src: url("../fonts/helvetica-webfont.woff2") format("woff2"),
    url("../fonts/helvetica-webfont.woff") format("woff"),
    url("../fonts/helvetica-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.banner-lado {
  display: flex; /* Activa layout en fila */
  align-items: center; /* Centra verticalmente texto e imagen */
  gap: 20px; /* Espacio entre imagen y texto */
}

.form-group-country,
.customer-form .form-group[id*="id_country"],
.customer-form label[for="id_country"],
.address-form .form-group[id*="id_country"],
.address-form label[for="id_country"],
.form-group select[name="id_country"],
.form-group label[for="field-id_country"] {
  display: none !important;
}

.banner-lado img {
  width: 100%; /* Ocupa la mitad del ancho */
  height: auto; /* Mantiene proporción */
}

.banner-lado .banner-text {
  flex: 1; /* Ocupa el espacio restante */
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Móvil: que se pongan en columna */
@media (max-width: 768px) {
  .banner-lado {
    flex-direction: column;
    text-align: center;
  }

  .banner-lado img {
    width: 100%;
  }
}

.banner-mitad img {
  width: 50vw; /* 50% del ancho de la ventana */
  height: auto; /* Mantiene proporción */
  display: block;
  margin: 0 auto; /* Centra horizontalmente */
}

/* Versión para pantallas pequeñas: que ocupe 100% */
@media (max-width: 768px) {
  .banner-mitad img {
    width: 100vw;
  }
}

.btn-centrado {
  display: flex; /* Activa Flexbox */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente (si hay altura definida) */
  padding: 12px 24px;
  width: 100%;
  border: none;
  background-color: #ffffff;
}

.btn-centrado a,
.btn-centrado button {
  background-color: #c7b3d4; /* Azul tipo Bootstrap */
  color: #330f24;
  border: none;
  padding: 12px 24px;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.3s;
  align-items: center; /* Centra verticalmente (si hay altura definida) */
}

.btn-centrado a:hover,
.btn-centrado button:hover {
  background-color: #935bb8; /* Azul más oscuro en hover */
}
.banner-description {
  width: 80%;
}

/* Móvil: ancho completo si quieres que se vea más grande */
@media (max-width: 768px) {
  .btn-centrado a,
  .btn-centrado button {
    width: 100%;
    text-align: center;
  }
}