/* =================================
   CONTENEDOR DE BANNERS
================================= */

.grupo-zt-banner{
display:grid;
grid-template-columns:1fr;
gap:28px;
max-width:1400px;
margin:auto;
padding:0 10px;
}

/* =================================
   BANNER BASE
================================= */

.zt-banner{
position:relative;
display:flex;
align-items:center;
gap:24px;
padding:20px;

background:#f8fafc;
border:1px solid #d4dde8;
border-radius:14px;

overflow:hidden;
transition:box-shadow .25s ease, transform .25s ease;

/* reveal animation base */
opacity:0;
transform:translateY(40px);
transition:opacity .7s ease, transform .7s ease;
}

/* visible when JS adds class */

.zt-banner.zt-visible{
opacity:1;
transform:translateY(0);
}

/* =================================
   GRID TECNICO SUAVE
================================= */

.zt-banner::before{
content:"";
position:absolute;
inset:0;

background-image:
linear-gradient(transparent 19px, rgba(0,0,0,0.04) 20px),
linear-gradient(90deg, transparent 19px, rgba(0,0,0,0.04) 20px);

background-size:20px 20px;
opacity:.12;

pointer-events:none;
}

/* =================================
   HOVER
================================= */

.zt-banner:hover{
box-shadow:0 12px 26px rgba(15,23,42,.18);
transform:translateY(-4px);
}

/* =================================
   IMAGEN
================================= */

.zt-banner-img{
position:relative;

width:52%;
aspect-ratio:16/9;

background-size:cover;
background-position:center;

border-radius:10px;
flex-shrink:0;

transition:transform .45s ease;
}

.zt-banner:hover .zt-banner-img{
transform:scale(1.05);
}

/* overlay suave */

.zt-banner-img::after{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
90deg,
rgba(10,20,35,.55) 0%,
rgba(10,20,35,.25) 45%,
rgba(10,20,35,0) 75%
);
}

/* =================================
   CONTENIDO
================================= */

.zt-banner-content{
position:relative;
z-index:2;

flex:1;

display:flex;
flex-direction:column;
gap:10px;

padding:4px;
}

/* =================================
   TITULO
================================= */

.zt-title{
position:relative;

font-size:24px;
font-weight:700;
color:#0b2239;

padding-left:14px;
margin:0;
}

/* accent industrial */

.zt-title::before{
content:"";
position:absolute;

left:0;
top:50%;
transform:translateY(-50%);

width:4px;
height:70%;

background:linear-gradient(
180deg,
#0074d9,
#00a8ff
);

border-radius:2px;
}

/* =================================
   SPECS
================================= */

.zt-specs{
display:flex;
flex-wrap:wrap;
gap:8px 16px;

padding:0;
margin:4px 0;

list-style:none;

font-size:15px;
color:#1f2933;
}

.zt-specs li{
transition:color .2s ease, transform .2s ease;
   font-size:17.5px;
}

.zt-specs li:hover{
color:#005fa8;
transform:translateX(2px);
}

/* =================================
   BOTON
================================= */

.zt-btn{
width:fit-content;

padding:10px 20px;

background:#0065c3;
color:#fff;

font-size:15px;
font-weight:600;

border-radius:8px;
text-decoration:none;

transition:
background .25s ease,
transform .2s ease,
box-shadow .2s ease;
}

.zt-btn:hover{
background:#0a7be0;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,95,168,.35);
}

/* =================================
   MICRO TEXTO
================================= */

.zt-micro{
font-size:13px;
color:#667084;
margin-top:4px;
}

/* =================================
   ANIMACION ESCALONADA ELEMENTOS
================================= */

.zt-title,
.zt-specs,
.zt-btn,
.zt-micro{
opacity:0;
transform:translateY(12px);
transition:opacity .5s ease, transform .5s ease;
}

.zt-banner.zt-visible .zt-title{
opacity:1;
transform:none;
transition-delay:.15s;
}

.zt-banner.zt-visible .zt-specs{
opacity:1;
transform:none;
transition-delay:.30s;
}

.zt-banner.zt-visible .zt-btn{
opacity:1;
transform:none;
transition-delay:.45s;
   text-transform:uppercase;
   text-decoration:none;
}
.zt-banner.zt-visible .zt-btn:hover{
background-color:#405d8ede;
   color:white;
}

.zt-banner.zt-visible .zt-micro{
opacity:1;
transform:none;
transition-delay:.60s;
   font-size:14px;
}

/* =================================
   TABLET
================================= */

@media (max-width:1024px){

.zt-banner{
gap:18px;
padding:18px;
}

.zt-title{
font-size:21px;
}

.zt-specs{
font-size:14px;
}

}

/* =================================
   MOBILE
================================= */

@media (max-width:768px){

.zt-banner{
flex-direction:column;
padding:16px;
gap:14px;
}

.zt-banner-img{
width:100%;
aspect-ratio:16/9;
border-radius:10px;
}

.zt-banner-content{
width:100%;
text-align:center;
align-items:center;
}

.zt-specs{
justify-content:center;
}

.zt-btn{
width:100%;
max-width:240px;
}

.zt-micro{
font-size:12px;
}

}

/* ===============================
   ALTERNAR BANNERS AUTOMATICO
================================ */

.grupo-zt-banner .zt-banner:nth-child(even){
flex-direction:row-reverse;
}

/* mobile vuelve a normal */

@media (max-width:768px){

.grupo-zt-banner .zt-banner:nth-child(even){
flex-direction:column;
}

}

/* overlay cuando la imagen esta a la derecha */

.grupo-zt-banner .zt-banner:nth-child(even) .zt-banner-img::after{

background:linear-gradient(
270deg,
rgba(10,20,35,.55) 0%,
rgba(10,20,35,.25) 45%,
rgba(10,20,35,0) 75%
);

}

/* =========================
   SHINE EFFECT
========================= */

.zt-banner-img{
position:relative;
overflow:hidden;
}

/* capa de brillo */

.zt-banner-img::before{
content:"";
position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:linear-gradient(
120deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.35) 50%,
rgba(255,255,255,0) 100%
);

transform:skewX(-25deg);

transition:left .8s ease;

pointer-events:none;
}

/* animación al hover */

.zt-banner:hover .zt-banner-img::before{
left:130%;
}

section.zt-section.zt-section-banners {
    margin-bottom:40px !important;
}