:root {
  --rojo: #e17800;
  --negro: #1A1A1A;
  --blanco: #ffffff;
  --azul: #00BFFF;
  --verde: #A3FF00;
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
}



.hero-section {
  position: relative;
  text-align: center;
  color: var(--blanco);
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}
/*nav*/
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}


.bd-mode-toggle {
  z-index: 1500;
}

/* Grid para contacto */
.contact-grid {
  background-color: #1A1A1A;
  border-radius: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "empresa cliente"
    "mapa mapa";
  gap: 2rem;
  margin-top: 2rem;
  margin: 2rem;
}

.contact-box {
  background: #1a1a1a;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
}

.contact-box input,
.contact-box textarea {
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #fff;
  background-color: #1A1A1A;
  color: #fff;
  font-size: 16px;
}


.map-box {
  grid-area: mapa;
  border-radius: 12px;
  overflow: hidden;
  height: 300px;
  border:2px solid #e1dfdf;
}

.map-box iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 12px;
}

/*contacto*/
.contact-container
{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  border: 2px solid #e1dfdf;      /* contorno gris de 2px */
  box-shadow: 5px 5px 30px 0px rgba(0, 0, 0, 0.25);
  

}

/* Responsivo */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "empresa"
      "cliente"
      "mapa";
  }
}

.promo-buttons {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.btn-promo {
  background: var(--rojo);
  color: var(--blanco);
  padding: 10px 20px;
  border: none;
  text-decoration: none;
}

.block {
  padding: 0px 20px;
  text-align: left;
}

.white {
  background: var(--blanco);
  color: var(--negro);
}

.black {
  background: var(--negro);
  color: var(--blanco);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 400px;
  margin: auto;
}

.map iframe {
  width: 100%;
  height: 300px;
  border: none;
  margin-top: 20px;
}

/* Navbar */
/* ====== Neutralización para usar .nav-stack como contenedor fijo ====== */
/* Contenedor exterior: centra el navbar y sepáralo del borde si quieres */
/*.fixed-top-custom {
    position: fixed !important;
    top: 0;
    right: 10px;
    left: 10px;
    z-index: 1030;
}*/
/*.navbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--blanco);
  padding: 10px 20px;
  z-index: 1000;
  }*/
      .fixed-top-custom,
      .navbar {
        position: relative; /* O fixed si deseas que esté fijo arriba */
        z-index: 1055; /* Mayor que el offcanvas por defecto (1045) */
      }
  .container_nav{
    display:flex; justify-content:center; padding:0 10px;
  }

  /* Navbar transparente/gradiente */
  .custom-navbar{
    background: linear-gradient(0deg,
      rgba(233,92,39,0.44) 0%,
      rgba(92,32,2,0.85) 11%,
      rgba(0,0,0,0.88) 20%,
      rgba(0,0,0,0.98) 100%
    );
    padding: 2rem 1rem !important;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    transition: transform .35s ease, opacity .35s ease;
    will-change: transform, opacity;
    width: 100%;
    padding-top: 50px !important;
  }
  @media (max-width: 576px) {
    .custom-navbar{
      padding: 1rem 1rem !important;

    }
  }
  .container_nav{
    display:flex;
    justify-content:center;
    padding:0 10px;
  }
  /* Wrapper fijo que contiene topbar + navbar (esto viene del enfoque anterior) */
  .nav-stack{
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1100;
    transform: translateY(0);
    transition: transform .35s ease;
    will-change: transform;
  }
  /* Estados scroll (el JS pone estas clases en .nav-stack) */
  .nav-stack.show-on-scroll{ transform: translateY(0); }
  .nav-stack.hide-on-scroll{ transform: translateY(calc(-1 * var(--stack-h))); }
  /* Capas internas (topbar debajo del nav, si quieres lo inverso cambia z-index) */
  .topbar{ position: relative; z-index: 1; }
  .custom-navbar{ position: relative; z-index: 2; }
  /* Empuja el contenido del body para que no quede oculto tras el stack.
    El JS recalcula --stack-h en runtime (topbar + navbar). */
    :root{ --stack-h: 120px; }   /* valor fallback */
    body{ padding-top: var(--stack-h); }

  /* Logo */
  .logo { height: 100px; 
    width:auto; 
    display:block; }

  /* Botones */
  /* Normaliza ambos en desktop/tablet */
  /* Botones: coherencia de ancho */
  .btn-call-now,
  .btn-get-quote {
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap;
    width: auto;
  }
  /* MENU OFF CANVAS */
  /* Menú colapsable tipo offcanvas personalizado */
.custom-offcanvas-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #1A1A1A;
  width: 280px;
  border-radius: 0 0 8px 8px;
  z-index: 1045;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Estilos del menú */
.custom-offcanvas-menu .nav-link {
  color: #fff;
  padding: 12px;
  font-size: 1.1rem;
}
.custom-offcanvas-menu .nav-link:hover {
  background-color: #333;
  border-radius: 5px;
}

/* En pantallas pequeñas, centrar el menú y hacerlo más ancho */
@media (max-width: 768px) {
  .custom-offcanvas-menu {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 90%;
  }
}

  .offcanvas {
    width: 280px; /* o 300px si prefieres más espacio */
    background-color: #1A1A1A;
  }

  .offcanvas .nav-link {
    font-size: 1.1rem;
    padding: 12px;
    color: #fff;
  }

  .offcanvas .nav-link:hover {
    background-color: #333;
    border-radius: 8px;
  }
  /*FIN OFF CANVAS*/ 

  /* En el menú colapsado (móvil) que sí ocupen todo el ancho */
  .navbar-collapse .btn-call-now,
  .navbar-collapse .btn-get-quote {
    display: block;
    width: 100%;
  }

  /* Si quieres que en el menú colapsado (móvil) sí sean full-width,
    limítalo SOLO cuando estén dentro del collapse */
    
  .navbar-collapse .btn-call-now,
  .navbar-collapse .btn-get-quote {
    display: block;
    width: 100%;
  }
  /*call now*/

  .btn-call-now{
    background-color: #000000 !important;
    color: #fff !important;
    border: none;
    border:1px solid #E95C27;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold !important;
    transition: background 0.3s;
    justify-content: center;
    text-align: center;
  }
  /*get coute*/
  .btn-get-quote{
    background-color: #E95C27 !important;
    color: #fff !important;
    border: none;
    border-radius: 5px;
    padding: 0.5rem 1rem;
    text-decoration: none;
    font-weight: bold !important;
    transition: background 0.3s;
  }
  .btn-call-now:hover, .btn-get-quote:hover{ opacity:.9; }

/* --- TABLETS/DESKTOP (≥768px) --- */
@media (min-width:768px){
  /* Truco para CENTRAR exactamente el brand: lo posicionamos absoluto en el centro
     y damos 5px de margen a izquierda/derecha para separarlo de menús/botones */
  .center-brand{
    position:absolute; left:50%; transform:translateX(-50%);
    margin-left:5px; margin-right:5px;
  }
  .custom-navbar .container-fluid{ position:relative; }
}

/* --- PHONES (≤600px) --- */
/* Logo centrado, hamburguesa a la derecha (ya lo hace el HTML con order + ms-auto) */
@media (max-width:600px){
  .logo{ height:64px; }
}

/* Animaciones de scroll para navbar */
.custom-navbar.hide-on-scroll{
  transform: translateY(-100%); opacity:0;
}
.custom-navbar.show-on-scroll{
  transform: translateY(0); opacity:1;
}

/* Opcional: espacio bajo el navbar fijo para que no tape el contenido */
/*body{ padding-top: 84px; }/* /* ajusta según alto del navbar */

.btn-get-quote-services{
  background-color: #E95C27 !important;
  color: #fff !important;
  border: none;
  border:2px solid #E95C27;
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: bold !important;
  transition: background 0.3s;
  margin-top: auto; /* esto lo empuja al fondo */
  text-align: center;
  display: block; /* opcional, para centrar en bloque */
}
.btn-call-now-v2{
background-color: #000000 !important;
  color: #fff !important;
  border: none;
  border:2px solid #E95C27;
  
 
  padding: 0.5rem 1rem;
  text-decoration: none;
  font-weight: bold !important;
  transition: background 0.3s;
  margin-top: auto; /* esto lo empuja al fondo */
  text-align: center;
  display: block; /* opcional, para centrar en bloque */
}
/*4grids*/
.servises{
  background-color: #1A1A1A;
  color: #FFFFFF;
  /* -width: 1200px; o el mismo ancho que tu .services-grid */
  margin: 0 auto;    /* centra el contenido */
  padding: 2rem;     /* opcional: para separación */
  text-align: center

}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);/* escritorio */
gap: 2rem;

background-color: #1A1A1A; /* fondo negro carbón */
color: #FFFFFF; /* letras blancas */

}
.services-grid-audio{
   display: grid;
   grid-template-columns: repeat(3, 1fr);/* escritorio */
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px
  }
  
  
  .service-card-audio {
    flex: 1 1 calc(33.333% - 20px);
    box-sizing: border-box;
  }
  
  @media (max-width: 992px) {
    .services-grid-audio {
      grid-template-columns: repeat(3, 1fr);/* escritorio */
    }
  }
  
  @media (max-width: 576px) {
    .services-grid-audio {
      grid-template-columns: 1fr; /* celulares */
    }
  }
  

.service-card {
  display: flex;
  flex-direction: column;
  background-color: #1A1A1A42;
  border: 1px solid #5f5f5f;
  border-radius: 10px;
  padding: 1rem;
  gap: 1rem;

}

.service-card img {
width: 100%;
border-radius: 8px;
}

.service-card h3 {
margin: 0;
font-size: 1.25rem;
color: #E95C27;
}

.service-card p {
font-size: 0.95rem;
line-height: 1.5;
}

.btn {
align-self: flex-start;
padding: 0.5rem 1rem;
background-color: #E95C27;
color: #fff;
border: none;
border-radius: 5px;
text-decoration: none;
font-weight: bold;
transition: background 0.3s;
}

.btn:hover {
background-color: #E95C27;
}

/* Responsive: se vuelve vertical en móviles */


@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr); /* tablets */
  }
}

@media (max-width: 576px) {
  .services-grid {
    grid-template-columns: 1fr; /* celulares */
  }
}

@media (max-width: 768px) {
.services-grid {
  grid-template-columns: 1fr;
}
}




/*titn-card*/
.tint-card .card-body {
  padding: 2rem;
  

}

@media (max-width: 768px) {
  .tint-card .row {
    flex-direction: column;
  }
  .tint-card .card-body {
    padding: 1rem;
  }
}

/*SCORE HEAT*/
.heat-score {
  margin-top: 2rem;
}

.heat-label {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.bar-wrapper {
  position: relative;
  background-color: #444;
  border-radius: 20px;
  height: 20px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.bar {
  height: 100%;
  border-radius: 20px;
  background-color: #E95C27; /* naranja */
  width: 0;
  animation-fill-mode: forwards;
}

.bar.ceramic {
  animation: fillCeramic 2s ease-out forwards;
}

.bar.regular {
  animation: fillRegular 2s ease-out forwards;
}

@keyframes fillCeramic {
  to {
    width: 6%;
  }
}

@keyframes fillRegular {
  to {
    width: 98%;
  }
}

.bar-tag {
  position: absolute;
  right: 10px;
  top: -25px;
  font-size: 0.8rem;
  background-color: #00A86B;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: bold;
}


/*dot*/
.circle-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #E95C27;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
  top: -1px;
}

/*logos marcas*/




.marcas {
  width: auto;
  height: 40px;
  max-width: 100%;
  display: block;
}
.marcas-v2 {
  width: auto;
  height: 70px;
  max-width: 100%;
  display: block;
}
/* Centrado de marcas */
.marcas-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
  gap: 10px;
  flex-wrap: wrap;
}


/* Imagen centrada dentro de su columna */
/* Estilos generales (para PC y pantallas grandes) */
.vinyl-wrap-image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
.vinyl-image {
  width: 100%;
  /*height: auto;*/
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 8px;

}


/* SOLO para móviles: ajustar tamaño de imagen */
@media (max-width: 767.98px) {
  .vinyl-wrap-image {
    padding: 1rem 0;
  }
 

  .vinyl-image {
    width: 100%;
    max-width: 347px !important;
    max-height: 180px !important;
    height: auto;
    display: block;
    margin: 0 auto;
  
  }
}



/*card title*/
.card-header-title{
  background-color: #E95C27!important;
  color: #fff !important;
  font-weight: bold !important;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  text-align: center;
}



/*windows-tint-contol*/
.tint-controls {
  position: absolute;
  top: 150px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 90;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 10px;
  border-radius: 10px;
}
.tint-controls .tint-label {
  color: #fff;
  font-weight: bold;
  background-color: #E95C27;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  text-align: right;
}

.tint-controls button {
  padding: 8px 12px;
  margin-bottom: 5px;
  background-color: #000;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  width: 100%;
}
@media (max-width: 576px) {
  .tint-controls {
    top: 320px;
    right: 10px;
    padding: 6px;
  }

  .tint-controls .tint-label {
    font-size: 12px;
  }

  .tint-controls button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

.head-banner {
  position: relative;
}
.finisher-header {
  position: relative;
  width: 100%;
  height: 500px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
}

/*Contacto */
.contacto{
  background-color: #1A1A1A;
  color: #fff;
  padding: 2px;
}
.contact-grid {
  display: grid;
  grid-template-areas: 
    "cliente empresa"
    "mapa mapa";
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  padding: 5px;
}

.contact-info-icons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  padding: 40px;
  color: white;
  border-bottom: 1px solid #fff;
  background-color: transparent;
}
.contact-info-icons.card {
  background-color: transparent;
  
  padding: 30px;
  text-align: center;
  color: white;
  align-items: center;
  box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.25)
}


.icon-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
}

.icon-wrapper:hover {
  transform: translateX(5px);
  opacity: 0.9;
}

.icon {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  filter: invert(1);
}

/* FORMULARIO Y MAPA */
.contact-box,
.map-box {
  width: 100%;
}

/* RESPONSIVE - PANTALLAS PEQUEÑAS */
@media (max-width: 576px) {
  .contact-grid {
    display: grid;
    grid-template-areas:
      "cliente"
      "empresa"
      "mapa";
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .contact-info-icons {
    padding: 20px;
    font-size: small;
  }

  .icon-wrapper {
    flex-wrap: wrap;
  }
  .icon {
    width: 15px;
    height: 15px;
    
  }
}


/* Título del card */
.contact-info-icons .card-header {
  border-bottom: 1px solid white;
  margin-bottom: 20px;
}

.contact-info-icons .card-header h3 {
  margin: 0;
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Ítems individuales */
.contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.contact-item:hover {
  transform: translateY(-2px);
  opacity: 0.95;
}

.contact-item .icon {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  filter: invert(1);
  transition: all 0.3s ease;
}

.contact-item p {
  margin: 0;
}

/* Responsive */
@media (max-width: 576px) {
  .contact-info-icons.card {
    padding: 20px;
  }
}
.accent-titles{
  
  font-size: 3rem;
  text-align: center;
  color: transparent;
  font-family: "Meta", sans-serif;
  text-shadow: 
  10px 10px 0px #fdfdfd, 
  12px 12px 0px #E95C27, 
 
   15px 15px 10px #000;
   z-index: 3;
}

@media (max-width: 576px) {
  .accent-titles{
    font-size: 2rem;
  }
}


/*TXT SOBRE BLANCO*/
.acentuar-txt-negro{
  font-weight: bolder;
  font-family: "Meta", sans-serif;
  font-size: 3rem;
  text-shadow: 1px 1px 5px #fff;
 z-index: 3;
 text-align: center;
 
}
.acentuar-txt-gris{
  font-weight: bold;
  font-size:2rem ;
  color: gray;
  text-align: center;
}
.acentuar-txt-gris-normal{
  font-weight: normal;
  font-size:2rem ;
  color: gray;
  text-align: center;
}

@media (max-width: 576px){
  .acentuar-txt-negro{
    
    font-size: 2.5rem;
    
   
  }
  .acentuar-txt-gris{
    
    font-size:1.5rem ;
    
  }
  .acentuar-txt-gris-normal{
    
    font-size:1.5rem ;
 
  }

}

.boton-overlay{
  transform: translate(0%, 40%); 

}

.btn-redmore{
  color:#E95C27 !important;
  
}
.services{
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(353deg,rgb(175, 175, 175) 0%, rgb(71, 71, 71) 50%, rgb(0, 0, 0) 76%, rgb(0, 0, 0) 100%);
  color:white;
  
}

/*una ide para dividir con un diagonal*/
.divider-white{
  width: 100%;
  height: 50px;
  background-color: rgb(255, 255, 255);
  clip-path: polygon(0 99.9%, 100% 0%, 100% 100%, 0% 100%);
  translate: 0% -90%;

}


.divide-back{
  width: 100%;
  padding: 0%;
  height: 50px;
  background-color: rgb(2, 2, 2);
  clip-path: polygon(0 99.9%, 100% 0%, 100% 100%, 0% 100%);
  translate: 0% 1%;

}

/*--------------mesaje de envio de formulario-----------------*/
/* Modal base */
/* ========= Modal base ========= */
.modal {
  position: fixed;
  inset: 0;
  display: none;                /* se muestra con .is-open */
  z-index: 9998 !important;
  
}

.modal.is-open {
  display: grid;                /* centra el cuadro */
  place-items: center;
}

/* Fondo oscuro semi-transparente */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.75); /* #1A1A1A con transparencia */
  z-index: 9999 !important;
}

/* Contenedor del diálogo: se adapta al contenido */
.modal__dialog {
  position: relative;
  background: #1A1A1A;          /* fondo oscuro del modal */
  color: #fdfdfd;               /* texto claro */
  width: min(92vw, 520px);      /* responsivo */
  border-radius: 16px;
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  max-height: 85vh;             /* si el contenido crece, hace scroll interno */
  overflow: auto;
  z-index: 10000;
}

/* Cerrar (arriba a la derecha) */
.modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 28px;
  background: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  color: #fdfdfd;
}


/* Icono + textos */
.modal__icon   { font-size: 40px; margin: 6px 0 8px; }
.modal__lead   { font-size: 1.05rem; margin: 0 0 4px; color: #fdfdfd; }
.modal__sub    { color: #cfcfcf; margin: 0 0 12px; line-height: 1.4; }

.modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Botón primario */
.btn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  background: #E95C27;        /* acento */
  color: #fff;
  font-weight: 700;
}
.btn:hover { opacity: .92; }

/* Evita que el mapa se ponga arriba del modal */
body.modal-open .map-box iframe { pointer-events: none; }

/* ========= Título con acento (.accent-titles) ========= */
/* Añade la clase accent-titles a tu H2 del modal */
.accent-titles{
  font-family: "Meta", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(3rem, 3vw, 2.2rem); /* tamaño responsivo (más contenido = menos espacio) */
  text-align: center;

  /* Evitar separación extra entre letras */
  letter-spacing: 0; 
  line-height: 1.1;

  /* Efecto de color por sombras */
  color: transparent;
  text-shadow:
    8px  8px  0   #fdfdfd,   /* capa clara */
    10px 10px 0   #E95C27,   /* acento naranja */
    12px 12px 10px #000;     /* profundidad */

  
  z-index: 3;
}
.accent-title-sm{
  font-family: "Meta", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(2rem, 3vw, 2.2rem); /* tamaño responsivo (más contenido = menos espacio) */
  text-align: center;

  /* Evitar separación extra entre letras */
  letter-spacing: 0; 
  line-height: 1.1;

  /* Efecto de color por sombras */
  color: transparent;
  text-shadow:
    8px  8px  0   #fdfdfd,   /* capa clara */
    10px 10px 0   #E95C27,   /* acento naranja */
    12px 12px 10px #000;     /* profundidad */

  
  z-index: 3;
}
/* Ajustes en pantallas pequeñas: sombras más cortas para que no “rompa” el layout */
@media (max-width: 480px){
  .accent-titles{
    text-shadow:
      6px 6px 0   #fdfdfd,
      8px 8px 0   #E95C27,
      10px 10px 8px #000;
  }
  .modal__dialog{
    width: 92vw;                /* cabe mejor en móviles */
    border-radius: 14px;
    padding: 16px;
  }
  .modal__icon{ font-size: 34px; }
  .modal__lead{ font-size: 1rem; }
}

/* Por si tu HTML trae clases Bootstrap como .fade, evitamos animación que deje “hueco” */
.modal.fade { opacity: 1 !important; }




/*<--------------------quoteModal--------------------->*/

#quoteModal .modal-content {
  background: #1a1a1a38 !important;
  color: #fdfdfd;
  
  
  max-height: 95vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-content-quote {
  background-color: #1a1a1a00 !important; /* Fondo negro carbón */
  color: #FFFFFF;
 
}

#quoteModal .modal-header {
  border: none;
  justify-content: center;
  position: relative;
  padding: 1rem;
  background-color: #E95C27;
  border-radius: 10px 10px 0 0;
}

#quoteModal .modal-title {
  font-weight: 700;
  text-align: center;
  color: #ffffff;
}

#quoteModal .btn-close {
  position: absolute;
  right: 16px;
  top: 16px;
  filter: invert(1);
  opacity: 0.85;
}
#quoteModal .btn-close:hover {
  opacity: 1;
}

#quoteModal .modal-body {
  flex-grow: 1;
  overflow: hidden;
  padding: 0;
}

/* Contenedor del iframe que ocupa el espacio restante */
.iframe-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0;
  background-color: #1A1A1A;
}

/* El iframe ocupa todo el contenedor */
.form-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background-color: #1A1A1A;
}

/* Footer si decides usarlo */
#quoteModal .modal-footer {
  border: none;
}

/* Botón estilo primario */
#quoteModal .btn-primary {
  background-color: #E95C27;
  border-color: #E95C27;
  font-weight: 700;
  padding: 10px 16px;
}
#quoteModal .btn-primary:hover {
  filter: brightness(1.05);
}

/*-------------------PROMOS------------------*/


/* 1) Toda la sección y cards en fondo negro */
.deals-section,
.deal-card {
  background-color: #000; /* bg-black */
}

/* 2) Misma altura/ancho de cards
   - En HTML ya se usa: col-12 col-md-6 (mismo ancho por breakpoint)
   - Para misma altura: h-100 + d-flex + flex-column en .deal-card
*/

/* 3) Gap entre cards (col-md-6)
   - Controlado por .deals-grid.g-3 (puedes subir a g-4 si quieres más espacio)
*/
.deals-grid {
  
  --bs-gutter-x: 1rem; 
  --bs-gutter-y: 1rem;
  
}

/* 4) Botones inferiores centrados (ya centrados con mx-auto y empujados con mt-auto) */
.btn-get-quote-services {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .6rem 1.25rem;
  font-weight: 600;
  border: 0;
  border-radius: .5rem;
  background: #ff6600;     /* naranja */
  color: #fff;
  transition: transform .15s ease, opacity .15s ease, background .2s ease;
}
.btn-get-quote-services:hover {
  background: #e65c00;
  transform: translateY(-1px);
}
.btn-get-quote-services:active {
  transform: translateY(0);
  opacity: .9;
}

/* 5) Video columna derecha: escritorio → ocupa todo el alto posible + recorte */
.video-OFERTAS {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* recorte */
  clip-path: polygon(100% 0%, 87% 50%, 100% 100%, 25% 100%, 8% 50%, 25% 0%);

  padding: 10px;
}

.ofertas-video {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* llena y recorta */
  object-position: 50% 50%;
  display: block;
}

/* 6) En pantallas chicas (≤576px) el video ocupa todo el ancho disponible,
      mantiene overflow hidden y usa orientación apaisada (aspect-ratio) */
@media (max-width: 575.98px) {
  .video-OFERTAS {
    height: auto;             /* no forzar altura */
    aspect-ratio: 16 / 9;     /* horizontal */
  }
  .ofertas-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.deal-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Ajustes útiles opcionales */

.border-secondary { border-color: rgba(255,255,255,.15) !important; }

/* Si algún CSS previo afecta .themed-grid-col o .deal-card, neutraliza: */
.themed-grid-col { padding: 0 !important; background: transparent !important; }

.text-muted-v2{
  color: rgb(163, 163, 163);
}