/* Red de seguridad global (evita scroll horizontal si algo se escapa) */
html, body {
  overflow-x: hidden;
}
/* Utilidad para secciones a todo ancho sin hacks */
.full-bleed {
  width: 100%;
  margin: 0;
}
/* Mantén el banner pegado arriba aunque el body tenga inline padding */
body { padding-top: 0 !important; margin: 0; }

/* Banner base */
.container_banner_hero { position: relative; }

/* Fondo del banner */
.headings_banner_hero{
  position: relative;
  width: 100%;
  min-height: clamp(520px, 100vh, 900px);   /* alto razonable en desktop */
  background-image: url('../assets/imagenes/HEADER/bannerV2.avif');
  background-repeat: no-repeat;
  background-size: cover;                  /* llena sin deformar (puede recortar) */
  background-position: center bottom;      /* ANCLA la parte inferior (la que te importa) */
  display: flex;
  align-items: center;                   /* el texto “debajo” del auto */
  justify-content: center;
  text-align: center;
  color: #fff;
  padding: 10rem 1rem 5.5rem;               /* espacio inferior para el texto */
  box-sizing: border-box;
  overflow: hidden;
  z-index: 0;
}

/* SIN sombra en la base */
.headings_banner_hero::after{
  content: none;
}

/* Caja del texto */
.hero-text{
  position: relative;
  
}

/* Títulos (los tuyos) */
.headings_banner_hero h1{
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 0 0 .3em;
  letter-spacing: 0.15em;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-text-stroke: .6px #fff;
  text-shadow: 5px 5px 5px #000;
  color: #E95C27;
}
.headings_banner_hero h2{
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin: .1em 0 0;
  font-weight: 400;
  line-height: 1.35;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background-color: #000000bd ;
  border-radius: 5px;
}

/* ======= MOBILE (≤576px) ======= 
   Menos alto y empuja encuadre hacia abajo para ver la base */
@media (max-width: 576px){
  .headings_banner_hero{
    min-height: 65vh;
  
    padding: 1.5rem 1rem 3rem;
    background-size: cover;
    background-position: center 92%;
    padding: 10rem 1rem 5.5rem;
   
}
.headings_banner_hero h1{
  font-size: clamp(2rem, 4vw, 3rem);
  
  text-shadow: .5px .5px 1px #000;
  line-height: 1;
}
.headings_banner_hero h2{
  font-size: 12px;
  text-shadow: .5px .5px 1px #000;
  
}
}

/* ======= TABLET (≥768px y <1200px) ======= 
   Ajuste fino del encuadre si quieres */
@media (min-width: 768px) and (max-width: 1199.98px){
  .headings_banner_hero{
    background-position: center 90%;
    min-height: clamp(520px, 100vh, 900px);  
    padding: 10rem 1rem 5.5rem;  
  }
}

/* ======= MONITORES (≥1200px) ======= 
   Mantén la base visible */
@media (min-width: 1017px){
  .headings_banner_hero{
    background-position: center bottom;
    min-height: clamp(780px, 100vh, 900px);
    padding: 10rem 1rem 5.5rem;    
  }
}

/*----------------------------------------------------------------*/
/*BANNER TINT*/
/* Sección centrada */
.window-tint{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0rem 1rem;
}

.container-banner-overlay{
  display:grid;   /* truco: ambas imgs comparten la misma celda */
  place-items:center;
}

/* Contenedor responsivo con relación de aspecto */
.tint-banner{
              
  grid-area: 1 / 1;         /* centra por defecto */
  width:  min(77vw, 900px);    /* ancho fluido máx 900px */
  aspect-ratio: 17 / 6;       /* altura automática según ancho (ajusta la razón) */
  border-radius: 32px;
  overflow:hidden;
  position:relative;
}

/* Fondo ocupa todo, se recorta sin deformar */
.tint-bg{
  width:100%;
  height:100%;
  object-fit:cover;
     /* oscurece un poco para el overlay */
}

/* Overlay “encima”, anclado a una esquina con tamaño relativo */

.tint-overlay{
  grid-area: 1 / 1;           /* misma celda = se superpone */
  justify-self: end;          /* pega a la derecha */
  align-self: end;            /* pega abajo */
  width: clamp(220px, 50%, 480px);  /* tamaño relativo al contenedor */
  height:auto;
 
  translate: 30% 40%; /* pequeño empuje hacia abajo si quieres */
  z-index: 2;
}


/* Ajustes por viewport */
@media (max-width: 768px){
  .tint-banner{
    width: min(74vw, 720px);
    border-radius: 24px;
  }
  .tint-overlay{
    width: clamp(180px, 48%, 380px);
    translate: 10% 30%;
  }
}

@media (max-width: 576px){
  .tint-banner{
    width: min(74vw, 720px);
    border-radius: 24px;
  }
  .tint-overlay{
    width: clamp(160px, 58%, 320px);
    justify-self:center;   /* en móviles, céntralo si prefieres */
    align-self:end;
    translate: 60% 30%;
  }
}
@media (min-width: 1100px){

    .tint-banner{
      width: min(200vw, 720px);
      border-radius: 24px;
    }
    .tint-overlay{
      width: clamp(180px, 100%, 380px);
     translate: 30% 40%;
    }
  
}
@media (min-width: 1200px){

  .tint-banner{
    width: min(200vw, 720px);
    border-radius: 24px;
  }
  .tint-overlay{
    width: clamp(180px, 100%, 490px);
  translate: 2% 40%;
  }

}




/*----------VIDEO----------*/
/* Banda de video: ancho completo del padre, ratio 1104x352, con recorte diagonal */

.ppf-video-container{
  padding-top: 20%;
  display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
   margin-left: auto;
}
.ppf-video-container-gloss{
 
  display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
   margin-left: auto;
}
.ppf-video-band{
  position: relative;
  width: 100%;
  aspect-ratio: 1104 / 352;         /* << altura automática */
  overflow: hidden;                  /* oculta fuera del corte */
  background: #000;                  /* evita “blanco” mientras carga */
}

/* Fallback si el navegador no soporta aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .ppf-video-band::before{
    content:"";
    display:block;
    padding-top: calc(352 / 1104 * 100%); /* 31.88% → 17:6 aprox */
  }
}

/* Corte diagonal arriba y abajo (ajusta a tu gusto) */
.ppf-clip-diagonal{
  --cut-top: 10%;
  --cut-bottom: 10%;
  /* si te preocupa soporte, puedes duplicar con -webkit-clip-path */
  clip-path: polygon(0% var(--cut-top),
                     100% 0%,
                     100% calc(100% - var(--cut-bottom)),
                     0% 100%);
}

/* El video llena la banda, encuadre inferior */
.ppf-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center bottom;
  display: block;
}

.ppf-text-wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5%;
}

/*--------------------------------------------------------------------*/
/*banner PPF*/
/* Sección centrada */
.ppf-section{
  width: 100%;
    padding-top: 20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg,rgba(212,190,182,1) 0%, rgba(105,57,20,1) 54%, rgba(0,0,0,1) 100%);
    overflow-x: clip; /* evita desbordes */
  
}
.ppf-container{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  padding: 0rem 1rem;
  
 
}

.container-ppf-overlay{
  position: relative;
    display:grid;
    place-items:center;
    width: 100%;
}
.ppf-banner{
  grid-area: 1 / 1;         /* centra por defecto */
  width:  min(77vw, 900px);    /* ancho fluido máx 900px */
  aspect-ratio: 17 / 6;       /* altura automática según ancho (ajusta la razón) */
  border-radius: 32px;
  overflow:hidden;
  position:relative;
  border: 2px solid #E95C27;
}
.ppf-txt{
  display:flex;
  flex-direction:column;
  width:min(90vw, 900px);
  border-radius:32px;
  overflow:hidden;
  position:relative;
  padding:1rem;
  color:#fff;
  text-align:center;
  
}

/* Fondo ocupa todo, se recorta sin deformar */
.ppf-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
 
}
/* Overlay “encima”, anclado a una esquina con tamaño relativo */
.ppf-wrap-circulos{
  grid-area: 1 / 1;
    position: absolute;
    inset: auto 0 -1.5rem 0; /* al borde inferior */
    margin-inline: auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:1rem;
    z-index:2;
     pointer-events: none;
}

.ppf-overlay-img{
  
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E95C27;
  
}

@media (max-width: 768px){
  .ppf-overlay-img{ 
    width: 90px;
     height: 90px; }
}

@media (max-width: 576px){
  .container-ppf-overlay{
    translate: 0 10%;
  }
  .ppf-banner{ aspect-ratio: 4 / 3; } /* 100% del contenedor, sin 160vw */
  .ppf-wrap-circulos{
    inset: auto 0 -1rem 0; /* colócalos un poco encima del borde inferior */
    flex-direction: column;
    align-items: end;
  }
  .ppf-overlay-img{ 
    width: 80px;
     height: 80px; 
     
    }
  .ppf-txt{
    width:min(92vw, 900px);
    padding: 1rem;
    padding-top: 10%;
  }
}


/*------------VINIL WRAPS--------------*/

.wrap-section{
  width: 100%;
  background: transparent !important;
  padding: 0;
  display: block;
  overflow-x: clip; /* clave: nada se sale a los lados */
}
.wrap-container{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  /* elimina los translate que empujaban el layout */
  transform: none;
  translate: 0% -20%;
}

.container-wrap-overlay{
  position: relative;
  width: 100%;
  display:grid;   /* truco: ambas imgs comparten la misma celda */
  place-items:center;
}
.wrap-banner{
  grid-area: 1 / 1;
  width: 100%;
  /* Elige una altura responsiva:
     - Usa clamp para no ser ni muy chica ni demasiado alta */
  min-height: clamp(240px, 40vw, 600px);
  position: relative;           /* contenedor de la imagen */
  overflow: hidden;
 
}
.wrap-txt{
 display: flex;
 flex-direction: column;
 place-items: center;
 padding: 5%;
 justify-content: center;
 color: white;
 text-align: center;
  
}

/* Fondo ocupa todo, se recorta sin deformar */
.wrap-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; 
 
}
/* Overlay “encima”, anclado a una esquina con tamaño relativo */
.wrap-wrap-circulos{
  grid-area: 1 / 1;
  position: absolute;
  inset: auto 0  -2rem 0; /* abajo centrado, ajusta a gusto */
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  z-index: 2;
  pointer-events: none; /* opcional: no bloquea clicks del banner */
}

.wrap-overlay-img{
  
  width: 130px;
  height: 130px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #E95C27;
  
}

/* Breakpoints */
@media (max-width: 768px){
  .wrap-overlay-img{ 
      width: 90px;
       height: 90px; }
  .wrap-txt{ 
      padding: 1.5rem 1rem; }
}

@media (max-width: 576px){
  .wrap-banner{ aspect-ratio: 4 / 3; } /* ya no uses 160vw */
  .wrap-wrap-circulos{
    inset: auto 0 -1rem 0; /* colócalos un poco encima del borde inferior */
    flex-direction: column;
    align-items: end;
  }
  .wrap-overlay-img{ 
      width: 80px;
       height: 80px; }
  .wrap-txt{ 
      padding: 1.25rem 1rem; }
}
/*--------------------------Audio-banner--------------------------*/
.audio-card {
  position: relative;            /* ancla para el overlay */
  background-color: #000; 
  color: #fff;
  border: 0;
  padding: 0;
  margin-top: auto;
  text-align: center;
  overflow: hidden;              /* recorta lo que se salga */
}

.audio-card-banner {
  display: block;                /* elimina espacios fantasmas de inline-img */
  width: 100%;
  height: auto;
  /* Si quieres mantener el recorte hexagonal, deja tu clip-path aquí */
  clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* Capa de overlay centrada y por encima de la imagen */
.card-banner {
  position: absolute;
  inset: 0;                      /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;                    /* clave: sobre la imagen */
  padding: 1rem;
  pointer-events: none;          /* opcional: que no bloquee clics a la imagen */
}

/* Caja del texto (por si quieres limitar ancho) */
.card-banner-txt {
  max-width: 90ch;               /* limita ancho, rompe líneas bonitas */
  margin: 0 auto;
}

/* El propio título */
.heading-overlay {
  margin: 0;
  color: #fff;
  text-align: center;
  text-wrap: balance;
  /* Mejora legibilidad sobre fondos claros */
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Responsivo */
@media (min-width: 768px) {
  .card-banner-txt { max-width: 50%; }
}
@media (max-width: 576px) {
  .card-banner-txt { max-width: 100%; font-size: smaller; }
}
.banner-heading {
  text-align: center;
  font-family: 'Poppins', sans-serif; /* O la fuente que uses */
  margin: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.banner-heading .big {
  font-size: 6rem;
  font-weight: 800;
  color: #FFF;
  margin-right: 0.25em;
  text-shadow: 5px 5px 1px #000000a1;
}

.banner-heading .upgrades {
  font-size: 2rem;
  font-weight: 700;        /* peso medio */
  color: #fff;
  margin-right: 0.5em;
  text-shadow: 5px 5px 1px #000000a1;
}

.banner-heading .small {
  font-size: 3rem;
  font-weight: 400;
  color: #ffffff;
  margin-right: 0.25em;
  text-shadow: 5px 5px 1px #000000a1;
  letter-spacing: 6px;
}


.banner-heading .payments {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 5px 5px 1px #000000a1;
  letter-spacing: 2px;
}
@media (max-width: 576px) {
  .banner-heading .big {
    font-size: 4rem;
 
  }
  
  .banner-heading .upgrades {
    font-size: 1.3rem;
  }
  
  .banner-heading .small {
    font-size: 2rem;
    letter-spacing: 4px;
  }
  
  
  .banner-heading .payments {
    font-size: 1.3rem;
    letter-spacing: 1px;
  }

}
/*--------------REMOTE START-----------*/
.remote-start{
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  padding: 0rem 1rem;

}
.remote-start-container-banner-overlay{
  display:grid;   /* truco: ambas imgs comparten la misma celda */
  place-items:center;
  translate: 0% -20%;
}