@import url(submenu.css);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);

.btn-outline-arancio {
    --bs-btn-color: #e95c0c;
    --bs-btn-border-color: #e95c0c;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e95c0c;
    --bs-btn-hover-border-color: #e95c0c;
    --bs-btn-focus-shadow-rgb: 33, 37, 41;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e95c0c;
    --bs-btn-active-border-color: #e95c0c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #e95c0c;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #e95c0c;
    --bs-gradient: none;
}

.btn-arancio{
  --bs-btn-color: #fff;
  --bs-btn-bg: #e95c0c;
  --bs-btn-border-color: #e95c0c;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d74900;
  --bs-btn-hover-border-color: #d74900;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #cc5200;
  --bs-btn-active-border-color: #cc5200;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}
.image-container {
    position: relative;
    overflow: hidden;
    margin: -10px;
    border-radius: 10px;
}
  
.image-container img {
    transition: transform 0.3s ease;
}
  
.image-container:hover img {
    transform: scale(1.05);
}
  
.image-container:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px; /* Valor mayor para redondear más durante el hover */
}
.letra-concreto{
    background-image: url("../img/concreto.jpg");
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.btn-negro {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #000;
  border: 2px solid #fff; /* Agregar borde blanco en el estado base */
  font-size: 16px;
  overflow: hidden;
  transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease; /* Agregar transición para el color del borde */
}

.btn-negro::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #ff8800; /* Naranja */
  transition: left 0.5s ease;
}

.btn-negro:hover::before {
  left: 100%;
}

.btn-negro:hover {
  color: transparent; /* Hacer el texto transparente en el estado de hover */
  font-weight: bold;
  background-color: #e95c0c; /* Cambiar a naranja al hacer hover */
}

.btn-negro::after {
  content: "INGRESAR"; /* Texto a mostrar al hacer hover */
  position: absolute;
  font-size: 25px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff; /* Color de texto del segundo texto */
  opacity: 0; /* Inicialmente oculto */
  transition: opacity 0.5s ease; /* Agregar transición de opacidad */
}

.btn-negro:hover::after {
  opacity: 1; /* Mostrar al hacer hover */
}

/* Este estilo oculta el elemento <br> por defecto */
.br-1280x800 {
  display: none;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.overlay:hover {
  opacity: 1;
}

.overlay button {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay:hover button {
  opacity: 1;
}

.custom-hr {
  width: 100%; /* Ancho del hr */
  height: 5px; /* Altura del hr */
  background: #e95c0c; /* Efecto degradado */
  border: none;
  margin: 15px auto;
  border-radius: 50% / 100%; /* Para que termine en punta */
}

.ratio-9x16 {
  --bs-aspect-ratio: 177.78%;
}

/* Consulta de medios para pantallas con una resolución de 1280x800 */
@media only screen and (min-width: 1250px) and (max-width: 1300px) and (min-height: 750px) and (max-height: 850px) {
  /* Este estilo muestra el elemento <br> solo en pantallas 1280x800 */
  .br-1280x800 {
      display: block;
  }
}

@media screen and (max-width: 960px) {
  .btn-negro::after {
    font-size: 19px; 
  }
}

@media (max-width: 768px) {
  #boton-cotizar {
    margin-right: 0; /* Elimina el margen derecho en pantallas pequeñas */
  }
  .only-mt-sm-5 {
    margin-top: 3rem !important;
  }
}

@media (min-width: 768px){
  .w-90{
    width: 90% ;
  }
} 

/* Margin Classes for Mobile (MM) */
@media only screen and (max-width: 960px) {
  .mmt-0 { margin-top: 0 !important; }
  .mmt-1 { margin-top: calc(1rem * 0.25) !important; }
  .mmt-2 { margin-top: calc(1rem * 0.5) !important; }
  .mmt-3 { margin-top: 1rem !important; }
  .mmt-4 { margin-top: calc(1rem * 1.5) !important; }
  .mmt-5 { margin-top: calc(1rem * 3) !important; }
  
  .mmb-0 { margin-bottom: 0 !important; }
  .mmb-1 { margin-bottom: calc(1rem * 0.25) !important; }
  .mmb-2 { margin-bottom: calc(1rem * 0.5) !important; }
  .mmb-3 { margin-bottom: 1rem !important; }
  .mmb-4 { margin-bottom: calc(1rem * 1.5) !important; }
  .mmb-5 { margin-bottom: calc(1rem * 3) !important; }
  
  .mms-0 { margin-left: 0 !important; }
  .mms-1 { margin-left: calc(1rem * 0.25) !important; }
  .mms-2 { margin-left: calc(1rem * 0.5) !important; }
  .mms-3 { margin-left: 1rem !important; }
  .mms-4 { margin-left: calc(1rem * 1.5) !important; }
  .mms-5 { margin-left: calc(1rem * 3) !important; }
  
  .mme-0 { margin-right: 0 !important; }
  .mme-1 { margin-right: calc(1rem * 0.25) !important; }
  .mme-2 { margin-right: calc(1rem * 0.5) !important; }
  .mme-3 { margin-right: 1rem !important; }
  .mme-4 { margin-right: calc(1rem * 1.5) !important; }
  .mme-5 { margin-right: calc(1rem * 3) !important; }
  
  .mmx-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mmx-1 { margin-left: calc(1rem * 0.25) !important; margin-right: calc(1rem * 0.25) !important; }
  .mmx-2 { margin-left: calc(1rem * 0.5) !important; margin-right: calc(1rem * 0.5) !important; }
  .mmx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
  .mmx-4 { margin-left: calc(1rem * 1.5) !important; margin-right: calc(1rem * 1.5) !important; }
  .mmx-5 { margin-left: calc(1rem * 3) !important; margin-right: calc(1rem * 3) !important; }
  
  .mmy-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .mmy-1 { margin-top: calc(1rem * 0.25) !important; margin-bottom: calc(1rem * 0.25) !important; }
  .mmy-2 { margin-top: calc(1rem * 0.5) !important; margin-bottom: calc(1rem * 0.5) !important; }
  .mmy-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .mmy-4 { margin-top: calc(1rem * 1.5) !important; margin-bottom: calc(1rem * 1.5) !important; }
  .mmy-5 { margin-top: calc(1rem * 3) !important; margin-bottom: calc(1rem * 3) !important; }
  
  .mm-0 { margin: 0 !important; }
}

/* Padding Classes for Mobile (PM) */
@media only screen and (max-width: 960px) {
  .pmt-0 { padding-top: 0 !important; }
  .pmt-1 { padding-top: calc(1rem * 0.25) !important; }
  .pmt-2 { padding-top: calc(1rem * 0.5) !important; }
  .pmt-3 { padding-top: 1rem !important; }
  .pmt-4 { padding-top: calc(1rem * 1.5) !important; }
  .pmt-5 { padding-top: calc(1rem * 3) !important; }
  
  .pmb-0 { padding-bottom: 0 !important; }
  .pmb-1 { padding-bottom: calc(1rem * 0.25) !important; }
  .pmb-2 { padding-bottom: calc(1rem * 0.5) !important; }
  .pmb-3 { padding-bottom: 1rem !important; }
  .pmb-4 { padding-bottom: calc(1rem * 1.5) !important; }
  .pmb-5 { padding-bottom: calc(1rem * 3) !important; }
  
  .pms-0 { padding-left: 0 !important; }
  .pms-1 { padding-left: calc(1rem * 0.25) !important; }
  .pms-2 { padding-left: calc(1rem * 0.5) !important; }
  .pms-3 { padding-left: 1rem !important; }
  .pms-4 { padding-left: calc(1rem * 1.5) !important; }
  .pms-5 { padding-left: calc(1rem * 3) !important; }
  
  .pme-0 { padding-right: 0 !important; }
  .pme-1 { padding-right: calc(1rem * 0.25) !important; }
  .pme-2 { padding-right: calc(1rem * 0.5) !important; }
  .pme-3 { padding-right: 1rem !important; }
  .pme-4 { padding-right: calc(1rem * 1.5) !important; }
  .pme-5 { padding-right: calc(1rem * 3) !important; }
  
  .pmx-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .pmx-1 { padding-left: calc(1rem * 0.25) !important; padding-right: calc(1rem * 0.25) !important; }
  .pmx-2 { padding-left: calc(1rem * 0.5) !important; padding-right: calc(1rem * 0.5) !important; }
  .pmx-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .pmx-4 { padding-left: calc(1rem * 1.5) !important; padding-right: calc(1rem * 1.5) !important; }
  .pmx-4-5 { padding-left: calc(1rem * 2.25) !important; padding-right: calc(1rem * 2.25) !important; }
  .pmx-5 { padding-left: calc(1rem * 3) !important; padding-right: calc(1rem * 3) !important; }
  
  .pmy-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .pmy-1 { padding-top: calc(1rem * 0.25) !important; padding-bottom: calc(1rem * 0.25) !important; }
  .pmy-2 { padding-top: calc(1rem * 0.5) !important; padding-bottom: calc(1rem * 0.5) !important; }
  .pmy-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
  .pmy-4 { padding-top: calc(1rem * 1.5) !important; padding-bottom: calc(1rem * 1.5) !important; }
  .pmy-5 { padding-top: calc(1rem * 3) !important; padding-bottom: calc(1rem * 3) !important; }
  
  .pm-0 { padding: 0 !important; }
}