*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
    scroll-behavior:smooth;
}

body{
    background:#ffffff;
    color:white;
}
.titulo-seccion{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;

    font-size: 34px;
    font-weight: 800;
    text-transform: uppercase;
    color: #071d49;
    letter-spacing: 2px;
}

.titulo-seccion span{
    width: 70px;
    height: 3px;
    background: linear-gradient(
        to right,
        #f26b2c,
        #f26b2c,
        rgba(242,107,44,0)
    );
}



header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    position:fixed;
    width:100%;
    top:0;
    left:0;
    backdrop-filter:blur(10px);
    background:rgba(0,0,0,0.45);
    z-index:1000;
}

.logo{
    font-size:30px;
    font-weight:bold;
    color:#F2540D;
}

nav{
    display:flex;
    gap:25px;
}

nav a{
    text-decoration:none;
    color:white;
    transition:0.3s;
    font-weight:bold;
    position:relative;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-5px;
    width:0%;
    height:2px;
    background:#ffb300;
    transition:0.3s;
}

nav a:hover::after{
    width:100%;
}

nav a:hover{
    color:#ffb300;
}




*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}



body{
    font-family:Arial, sans-serif;
    background:#feffff;
    color:white;
    overflow-x:hidden;
}



header{
    width:100%;
    background:#4e4e4e;
    padding:22px 8%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    position:fixed;
    top:0;
    left:0;
    z-index:1000;
}

.logo{
    font-size:22px;
    font-weight:bold;
    color:#ffb300;
}
/* LOGO */

.logo img{
    width:120px;
    height:auto;
    display:block;
}

nav a{
    color:white;
    text-decoration:none;
    font-weight:bold;
    transition:0.3s;
}

nav a:hover{
    color:#ffb300;
}





.hero-content{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:40px;
    flex-wrap:wrap;
}



.hero-text{
    flex:1;
    min-width:300px;
}

.mini-title{
    color:#33ff00;
    font-size:18px;
    margin-bottom:20px;
    font-weight:bold;
}

.hero h1{
    font-size:72px;
    line-height:1.05;
    margin-bottom:25px;
    color:white;
}

.hero h1 span{
    color:#F2540D;
}

.description{
    font-size:19px;
    color:#d8d8d8;
    max-width:550px;
    line-height:1.8;
    margin-bottom:35px;
}


.buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:40px;
}

button{
    border:none;
    cursor:pointer;
    transition:0.3s;
}

.btn-primary{
    background:#F2540D;
    color:black;

    padding:16px 38px;

    border-radius:50px;
    font-size:16px;
    font-weight:bold;

    box-shadow:0 10px 30px rgba(255,179,0,0.35);
}

.btn-primary:hover{
    transform:translateY(-5px);
}

.btn-secondary{
    background:transparent;
    border:2px solid #F2540D;
    color:white;

    padding:16px 38px;

    border-radius:50px;
    font-size:16px;
    font-weight:bold;
}

.btn-secondary:hover{
    background:#F2540D;
    color:black;
}



.info-box{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.info-box div{
    background:rgba(255,255,255,0.08);

    padding:20px;

    border-radius:20px;

    min-width:160px;

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,0.06);
}

.info-box h3{
    color:#F2540D;
    font-size:30px;
    margin-bottom:5px;
}

.info-box p{
    color:#d8d8d8;
}



.hero-image{
    flex:1;
    min-width:300px;

    text-align:center;

    /* MAS ARRIBA */
    margin-top:-80px;
}


.hero-image img{
    width:60%;

    /* MAS PEQUEÑA */
    max-width:380px;

    /* SUBIR IMAGEN */
    position:relative;
    top:-90px;

    animation:float 3s ease-in-out infinite;

    filter:drop-shadow(
    0 20px 40px rgba(0,0,0,0.5)
    );
}




@keyframes float{

0%{
    transform:translateY(0);
}

50%{
    transform:translateY(-15px);
}

100%{
    transform:translateY(0);
}

}



section{
    padding:110px 8%;
}

section h2{
    text-align:center;
    font-size:48px;
    margin-bottom:60px;
    color:#F2540D;
}



.beneficios{

    background:
    linear-gradient(
    rgba(32,19,11,0.88),
    rgba(6,53,207,0.92)
    ),
    url("beneficios.jpg");

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

    background-attachment:fixed;

    padding:120px 8%;
}



.cards{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;
}

.card{
    background:rgba(255,255,255,0.06);

    padding:35px;

    border-radius:25px;

    transition:0.4s;

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.05);
}

.card:hover{
    transform:translateY(-10px);

    background:rgba(255,179,0,0.08);
}

.card h3{
    color:#F2540D;
    font-size:24px;
    margin-bottom:15px;
}

.card p{
    color:#d1d1d1;
    line-height:1.7;
}



@media(max-width:900px){

.hero{
    padding-top:130px;
    text-align:center;
}

.hero-content{
    flex-direction:column;
}

.hero h1{
    font-size:55px;
}

.description{
    margin:auto;
    margin-bottom:35px;
}

.buttons{
    justify-content:center;
}

.info-box{
    justify-content:center;
}

.hero-image{
    margin-top:-30px;
}

.hero-image img{
    max-width:300px;
}

section h2{
    font-size:38px;
}

}



.beneficios{

    background:
    linear-gradient(
    rgba(32, 19, 11, 0.88),
    rgba(6, 53, 207, 0.92)
    ),
    url("beneficios.jpg");

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

    /* EFECTO ESTATICO */

    background-attachment:fixed;

    padding:120px 8%;
}



.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.card{
    background:rgba(255,255,255,0.06);
    padding:35px;
    border-radius:25px;
    transition:0.4s;
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.05);
}

.card:hover{
    transform:translateY(-10px);
    background:rgba(255,179,0,0.08);
}

.card h3{
    margin-bottom:15px;
    color:#F2540D;
    font-size:24px;
}

.card p{
    line-height:1.7;
    color:#d1d1d1;
}



.promo-box{
    background:linear-gradient(135deg,#F2540D,#ff8800);
    padding:60px;
    border-radius:35px;
    text-align:center;
    color:black;
    box-shadow:0 20px 40px rgba(255,136,0,0.25);
}

.promo-box h3{
    font-size:42px;
    margin-bottom:20px;
}

.promo-box p{
    font-size:18px;
    margin-bottom:25px;
}



.contacto{
    text-align:center;
}

.contacto p{
    margin:15px 0;
    font-size:20px;
}


footer{
    text-align: center;
    padding: 15px 10px; /* menos espacio arriba y abajo */
    background: #060b18;
    color: #999;
    font-size: 13px; /* un poco más pequeño */
}



@media(max-width:900px){

.hero h1{
    font-size:48px;
}

header{
    flex-direction:column;
    gap:15px;
}

nav{
    flex-wrap:wrap;
    justify-content:center;
}

.hero-content{
    text-align:center;
}

.buttons{
    justify-content:center;
}

.info-box{
    justify-content:center;
}

Ç

.hero{
    background-attachment:scroll;
}

.beneficios{
    background-attachment:scroll;
}

}
nav{
    display:flex;
    align-items:center;
}

#countdown{
    font-size:37px;
    font-weight:bold;
    color:#ebeaea;
    background:transparent;
    padding:0;
    box-shadow:none;

    font-family: "Segoe UI", Arial, sans-serif;
}
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 20px;
}


#countdown{
    font-size:30px;
    font-weight:bold;
    color:#fffcfc;
    font-family: "Segoe UI", Arial, sans-serif;
}

.whatsapp-btn{
    background:#10ce0a;
    color:white;
    padding:10px 18px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    font-family: Arial, sans-serif;
    box-shadow:0 5px 15px rgba(37,211,102,0.3);
    transition:0.3s;

    margin-left: 600px; 


    animation: pulse 1.5s infinite;
}


@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}


.whatsapp-btn:hover{
    transform: scale(1.2);
    background:#128c7e;
}
.whatsapp-btn:hover{
    background:#fcfcfc;
    transform:scale(1.05);
}

.btn-wsp {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    background: #25D366;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s;

 
    animation: pulse 1.5s infinite;
}


.btn-wsp:hover {
    background: #1ebe5d;
    transform: scale(1.08);
}


@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}
.card img {
    width: 155px;
    height: 218px;
    object-fit: cover;  
    border-radius: 10px;
    flex-shrink: 0;
}
.card {
    display: flex;
    justify-content: center;
    align-items: center;      
    flex-direction: column;   
}



.convenios{
  width:100%;
  padding:70px 0;
  background:#fff;
  text-align:center;
  overflow:hidden;
}

.convenios h2{
  font-size:40px;
  margin-bottom:40px;
  color:#111;
}

.slider-convenios{
  width:100%;
  overflow:hidden;
  position:relative;
}

.slide-track{
  display:flex;
  width:calc(250px * 10);

  /* MÁS LENTO */
  animation:scroll 40s linear infinite;
}

.slide-track img{
  width:180px;
  height:120px;
  object-fit:contain;
  margin:0 35px;
  background:#fff;
  border-radius:15px;
  padding:10px;
}



@keyframes scroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(calc(-250px * 5));
  }

}







.convenios h2{
  font-size:45px;
  margin-bottom:60px;
  color:#111;
  font-weight:800;
  letter-spacing:3px;
  text-transform:uppercase;
  position:relative;

  display:inline-block;

  padding:0 40px;
}


.convenios h2::before{
  content:"";
  position:absolute;
  left:-80px;
  top:50%;
  transform:translateY(-50%);

  width:70px;
  height:4px;

  background:linear-gradient(to right, transparent, #F2540D);

  border-radius:20px;
}


.convenios h2::after{
  content:"";
  position:absolute;
  right:-80px;
  top:50%;
  transform:translateY(-50%);

  width:70px;
  height:4px;

  background:linear-gradient(to left, transparent, #F2540D);

  border-radius:20px;
}



@media(max-width:768px){

  .convenios h2{
    font-size:32px;
    letter-spacing:2px;
    padding:0 20px;
  }

  .convenios h2::before{
    left:-50px;
    width:40px;
    height:3px;
  }

  .convenios h2::after{
    right:-50px;
    width:40px;
    height:3px;
  }

}

@media(max-width:480px){

  .convenios h2{
    font-size:26px;
    letter-spacing:1px;
    margin-bottom:40px;
  }

  .convenios h2::before,
  .convenios h2::after{
    width:30px;
  }

  .convenios h2::before{
    left:-35px;
  }

  .convenios h2::after{
    right:-35px;
  }

}






*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#050505;
}



.contacto{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:40px 6%;
    overflow:hidden;
    position:relative;

    background:linear-gradient(
        135deg,
        #0b0c5c 0%,
        #021150 40%,
        #f85c02 100%
    );
}


.contacto::before{
    content:""; 
    position:absolute;
    width:350px;
    height:350px;
    background:radial-gradient(
        circle,
        rgba(255,179,0,0.16) 0%,
        transparent 70%
    );
    top:-120px;
    left:-120px;
}

.contacto::after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:radial-gradient(
        circle,
        rgba(255,179,0,0.10) 0%,
        transparent 70%
    );
    bottom:-120px;
    right:-120px;
}



.contacto-info{
    width:40%;
    position:relative;
    z-index:2;
}

.subtitulo{
    color:#F2540D;
    font-size:11px;
    letter-spacing:3px;
    font-weight:700;
}

.contacto-info h2{
    color:#ffffff;
    font-size:42px;
    margin-top:8px;
    margin-bottom:15px;
    font-weight:900;
    letter-spacing:2px;
}

.linea{
    width:140px;
    height:2px;
    background:linear-gradient(to right,#F2540D,transparent);
    border-radius:20px;
    margin-bottom:28px;
    box-shadow:0 0 10px #F2540D;
}



.item{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:18px;
}



.icono{
    width:55px;
    min-width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #F2540D;
    color:#F2540D;
    font-size:20px;
    background:rgba(255,179,0,0.08);

    box-shadow:
        0 0 12px rgba(255,179,0,0.30),
        inset 0 0 8px rgba(255,179,0,0.15);
}



.texto h4{
    color:#d4d4d4;
    font-size:12px;
    margin-bottom:3px;
    letter-spacing:2px;
}

.texto span{
    color:#ffffff;
    font-size:24px;
    font-weight:700;
}



.whatsapp-box{
    width:100%;
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:20px;
    padding:15px 18px;
    border-radius:22px;
    text-decoration:none;
    border:2px solid #F2540D;
    background:rgba(255,255,255,0.03);

    box-shadow:
        0 0 20px rgba(255,179,0,0.18);

    transition:0.3s;
}

.whatsapp-box:hover{
    transform:translateY(-3px);
    box-shadow:0 0 30px rgba(255,179,0,0.35);
}

.whatsapp{
    color:#25D366;
    border-color:#25D366;
}

.whatsapp-box h4{
    color:#d8d8d8;
    font-size:11px;
    letter-spacing:2px;
}

.whatsapp-box span{
    color:#ffffff;
    font-size:25px;
    font-weight:800;
}

.whatsapp-box p{
    color:#ffffff;
    font-size:20px;
    font-weight:700;
    margin-top:3px;
}



.contacto-footer{
    margin-top:28px;
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.contacto-footer div{
    display:flex;
    align-items:center;
    gap:7px;
    color:#ffffff;
    font-size:10px;
}

.contacto-footer i{
    color:#F2540D;
    font-size:15px;
}



.contacto-img{
    width:43%;
    height:520px;
    position:relative;
    overflow:hidden;
    z-index:2;

   
    border-top-left-radius:220px;
    border-bottom-left-radius:220px;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;

    border:2px solid rgba(255,179,0,0.35);

    box-shadow:
        0 0 25px rgba(255,179,0,0.20);
}



.contacto-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}



.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:linear-gradient(
        to left,
        rgba(0,0,0,0.08),
        rgba(0,0,0,0.40)
    );
}



@media(max-width:1000px){

    .contacto{
        flex-direction:column;
    }

    .contacto-info{
        width:100%;
    }

    .contacto-img{
        width:100%;
        height:400px;

        border-radius:30px;
    }

}

@media(max-width:700px){

    .contacto{
        padding:35px 5%;
    }

    .contacto-info h2{
        font-size:34px;
    }

    .texto span{
        font-size:20px;
    }

    .whatsapp-box span{
        font-size:20px;
    }

    .whatsapp-box p{
        font-size:17px;
    }

    .icono{
        width:50px;
        min-width:50px;
        height:50px;
        font-size:18px;
    }

    .contacto-footer{
        flex-direction:column;
        gap:12px;
    }

}



.beneficios h2{
    color:#ffffff;
    font-size:52px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:2px;
    position:relative;
    display:inline-block;
    margin-bottom:60px;
}



.beneficios h2::before,
.beneficios h2::after{
    content:"";
    position:absolute;
    top:50%;
    width:70px;
    height:4px;
    background:#F2540D;
    border-radius:10px;
    transform:translateY(-50%);
}

.beneficios h2::before{
    left:-90px;
}

.beneficios h2::after{
    right:-90px;
}



.cards{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:stretch;
    gap:30px;
    flex-wrap:wrap;
}



.card{
    width:320px;

    padding:35px 28px;

    border-radius:25px;

    background:rgba(255,255,255,0.06);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 10px 35px rgba(0,0,0,0.35);

    transition:0.4s ease;

    text-align:center;
}



.card:hover{
    transform:translateY(-10px);

    border:1px solid rgba(242,84,13,0.4);

    box-shadow:
    0 15px 40px rgba(242,84,13,0.25);
}



@media(max-width:768px){

    .beneficios h2{
        font-size:38px;
    }

    .beneficios h2::before,
    .beneficios h2::after{
        width:45px;
    }

    .beneficios h2::before{
        left:-60px;
    }

    .beneficios h2::after{
        right:-60px;
    }

}

@media(max-width:480px){

    .beneficios h2{
        font-size:28px;
        text-align:center;
    }

    .beneficios h2::before,
    .beneficios h2::after{
        display:none;
    }

    .card{
        width:100%;
    }

    .card h3{
        font-size:22px;
    }

    .card p{
        font-size:15px;
    }

}





.btn-llamar{
    position:fixed;
    right:25px;
    bottom:25px;

    width:68px;
    height:68px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #09caec,
        #030ea1
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:28px;

    text-decoration:none;

    box-shadow:
    0 0 25px rgba(242,84,13,.45);

    z-index:9999;

    transition:.3s ease;

    animation:latido 1.8s infinite;
}

.btn-llamar:hover{
    transform:scale(1.1);
    box-shadow:
    0 0 35px rgba(242,84,13,.70);
}

@keyframes latido{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.12);
    }

    100%{
        transform:scale(1);
    }
}

.hero{
    padding-bottom:0;
}

.hero-image{
    margin-bottom:-130px;
    padding-bottom:0;
    line-height:0;
}

.hero-image img{
    display:block;
    margin-bottom:0;
}

.cards{
    margin-top:0px;
    margin-bottom:0px;

    padding-top:0;
    padding-bottom:0;
}

.card{
    padding:14px;
}

.card{
    padding:14px;
}



*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#eef2f8;
    overflow-x:hidden;
}




.pagos{

    width:100%;
    padding:65px 6%;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #edf2ff
    );

    text-align:center;

    position:relative;
    overflow:hidden;
}




.titulo-box{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin-bottom:45px;
}

.icono-titulo{

    width:65px;
    height:65px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #ff5a00,
        #ff7b00
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:28px;

    box-shadow:
    0 8px 18px rgba(255,90,0,.25);
}

.titulo-box h2{

    font-size:44px;
    font-weight:800;
    text-transform:uppercase;

    letter-spacing:1px;

    color:#08245c;
}

.titulo-box h2 span{
    color:#ff5a00;
}




.pagos-container{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:22px;
}

.pago-card{

    width:170px;
    height:195px;

    background:rgba(255,255,255,.95);

    border-radius:26px;

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(0,0,0,.05);

    box-shadow:
    0 10px 28px rgba(0,0,0,.08);

    transition:.35s;
}

.pago-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 14px 35px rgba(255,90,0,.18);
}

.pago-card img{

    width:95px;
    object-fit:contain;
}

.pago-btn{

    position:absolute;

    bottom:14px;
    left:50%;

    transform:translateX(-50%);

    width:78%;

    padding:9px;

    border-radius:40px;

    background:linear-gradient(
        135deg,
        #ff5a00,
        #ff7b00
    );

    color:#fff;

    font-size:21px;
    font-weight:700;

    letter-spacing:.5px;

    box-shadow:
    0 6px 15px rgba(255,90,0,.25);
}




.zonas{

    width:100%;

    margin-top:28px;

    padding:55px 5%;

    border-radius:38px;

    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        rgba(11, 12, 92, 0.863),
        rgba(11, 12, 92, 0.28)
    ),
    url("img/fondo_sonas_reparto.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}




.zonas-content{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;

    position:relative;
    z-index:2;
}

.zonas-left{
    width:58%;
}

.zonas-right{

    width:42%;

    display:flex;
    justify-content:center;
}




.titulo-zona{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:35px;
}

.titulo-zona i{

    font-size:42px;
    color:#ff5a00;
}

.titulo-zona h2{

    font-size:46px;
    font-weight:800;

    text-transform:uppercase;

    color:#fff;
}

.titulo-zona h2 span{
    color:#ff5a00;
}



.zonas-grid{

    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.zona-card{

    min-width:170px;

    padding:16px 20px;

    border-radius:18px;

    background:rgba(255,255,255,.97);

    text-align:center;

    color:#08245c;

    font-size:21px;
    font-weight:700;

    border:1px solid rgba(255,255,255,.18);

    box-shadow:
    0 8px 22px rgba(0,0,0,.15);

    transition:.35s;
}

.zona-card:hover{

    transform:translateY(-6px);

    background:#ff5a00;
    color:#fff;
}




.camion{

    width:100%;
    max-width:390px;

    filter:
    drop-shadow(
        0 12px 30px rgba(0,0,0,.35)
    );
}




.beneficios{

    margin-top:45px;

    width:100%;

    padding:22px 25px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        #08245c,
        #00153f
    );

    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:20px;

    position:relative;
    z-index:2;

    border:1px solid rgba(255,255,255,.10);

    box-shadow:
    0 10px 28px rgba(0,0,0,.22);
}

.beneficio{

    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:19px;
    font-weight:600;
}

.beneficio i{

    font-size:28px;
    color:#ff5a00;
}



@media(max-width:1100px){

    .zonas-content{
        flex-direction:column;
    }

    .zonas-left,
    .zonas-right{
        width:100%;
    }

    .zonas-grid{
        justify-content:center;
    }

    .camion{
        max-width:320px;
    }
}

@media(max-width:768px){

    .titulo-box{
        flex-direction:column;
    }

    .titulo-box h2{
        font-size:30px;
    }

    .titulo-zona{
        flex-direction:column;
        text-align:center;
    }

    .titulo-zona h2{
        font-size:32px;
    }

    .pago-card{
        width:145px;
        height:175px;
    }

    .pago-card img{
        width:80px;
    }

    .pago-btn{
        font-size:18px;
    }

    .zona-card{
        width:100%;
        min-width:100%;
        font-size:19px;
    }

    .beneficios{
        flex-direction:column;
    }
}



.metodos-zonas{
    position:relative;
    width:100%;
    padding:35px 20px;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #ffffff,
        #eef3ff
    );

    font-family:'Poppins', sans-serif;
}



.fondo-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,102,0,.10),
        transparent 30%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(0,55,145,.15),
        transparent 30%
    );

    z-index:1;
}

.metodos-container,
.zonas-container,
.info-bottom{
    position:relative;
    z-index:2;
}



.titulo-principal{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin-bottom:25px;
}

.icono-titulo{
    width:55px;
    height:55px;

    background:linear-gradient(
        135deg,
        #ff6a00,
        #ff3c00
    );

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:22px;

    box-shadow:0 8px 20px rgba(255,102,0,.25);
}

.titulo-principal h2{
    margin:0;

    font-size:36px;
    font-weight:900;
    letter-spacing:1px;

    color:#002b7f;
}

.titulo-principal h2 span{
    color:#ff5b00;
}



.metodos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.metodo-card{
    background:#f5f5f5;
    height:180px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:20px;
}

.metodo-card img{
    width:120px;
    height:120px;

    object-fit:contain;
    display:block;
}

.btn-metodo{
    background:#ff6600;
    color:#fff;

    padding:10px 25px;
    margin-top:15px;

    font-weight:bold;
}



.zonas-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;

    padding:100px 100px; /* mas largo arriba y abajo */

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        rgba(10, 22, 133, 0.986),
        rgba(248, 100, 31, 0)
    ),
    url("img/sona_reparto.png");

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

    border-top:4px solid #ff6a00;
    border-bottom:4px solid #ff6a00;
}





.titulo-zonas{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:28px;
}

.titulo-zonas i{
    font-size:48px;
    color:#ff6a00;
}

.titulo-zonas h2{
    margin:0;

    font-size:40px;
    font-weight:900;

    color:#fff;
}

.titulo-zonas h2 span{
    color:#ff6a00;
}



.zonas-grid{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}


.zona-item{
    width:100%;
    max-width:240px;
    min-width:180px;

    padding:14px 18px;

    background:#fff;

    color:#0b2d78;

    font-size:18px;
    font-weight:800;
    text-align:center;

    border-left:5px solid #ff6a00;

    box-shadow:0 8px 20px rgba(0,0,0,.18);

    border-radius:12px;

    transition:.3s;

    box-sizing:border-box;

    /* mantiene las palabras completas */
    white-space:normal;

    word-break:keep-all;

    overflow-wrap:normal;
}


.zona-item:hover{
    transform:translateY(-4px);
}

/* Tablet */
@media(max-width:768px){

    .zona-item{
        max-width:220px;

        font-size:16px;

        padding:12px 15px;
    }

}


@media(max-width:480px){

    .zona-item{
        max-width:200px;
        min-width:160px;

        font-size:14px;

        padding:10px 12px;

        border-left:4px solid #ff6a00;
    }

}



.zona-item:hover{
    transform:scale(1.05);
}



.motorizado-img{
    min-width:300px;
}

.motorizado-img img{
    width:100%;
    max-width:340px;

    display:block;

    filter:drop-shadow(
        0 20px 30px rgba(0,0,0,.35)
    );
}


.info-bottom{
    margin-top:25px;

    padding:22px;

    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:18px;

    background:linear-gradient(
        135deg,
        #002b7f,
        #00184d
    );

    border-top:3px solid #ff6a00;
}

.info-item{
    display:flex;
    align-items:center;
    gap:10px;

    color:#fff;

    font-size:18px;
    font-weight:700;
}

.info-item i{
    font-size:24px;
    color:#ff6a00;
}



@media(max-width:1000px){

    .zonas-container{
        flex-direction:column;
        text-align:center;
    }

    .zonas-grid{
        justify-content:center;
    }

    .titulo-zonas{
        justify-content:center;
    }
}

@media(max-width:768px){

    .titulo-principal h2{
        font-size:28px;
    }

    .titulo-zonas h2{
        font-size:28px;
    }

    .metodo-card img{
        width:65px;
        height:65px;
    }

    .zona-item{
        width:100%;
        text-align:center;
    }

    .info-item{
        font-size:15px;
    }
}


.metodo-card img{
    width:80px;
    height:80px;

    object-fit:contain;

    margin-bottom:14px;

    transition:.3s;
}


.metodo-card img[src="img/pago2.png"]{
    width: 120px;
    height:120px;
}


.metodo-card img[src="img/pago3.png"]{
    width:160px;
    height:160px;
}


.metodo-card img[src="img/pago4.png"]{
    width:230px;
    height:230px;
}


.metodo-card img[src="img/pago5.png"]{
    width:300px;
    height:300px;
}
.titulo-productos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    font-size:38px;
    font-weight:800;
    text-transform:uppercase;
    margin-bottom:35px;
}

.titulo-productos::before,
.titulo-productos::after{
    content:'';
    width:80px;
    height:4px;
    border-radius:10px;
}

.titulo-productos::before{
    background:linear-gradient(to right, transparent, #ff6600, transparent);
}

.titulo-productos::after{
    background:linear-gradient(to right, transparent, #0b2e83, transparent);
}

.icono-productos{
    width:55px;
    height:55px;
    background:#ff6600;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
}

.texto-productos{
    display:flex;
}

.naranja{
    color:#ff6600;
}

.azul{
    color:#0b2e83;
}

@media(max-width:768px){
    .titulo-productos{
        font-size:26px;
    }

    .titulo-productos::before,
    .titulo-productos::after{
        width:40px;
    }

    .icono-productos{
        width:45px;
        height:45px;
        font-size:22px;
    }
}
/* ANIMACIÓN PROFESIONAL AL HACER SCROLL */

.metodo-card {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: transform, opacity;
}

.metodo-card.show {
    opacity: 1;
    transform: translateY(0);
}

/* Entrada escalonada */
.metodo-card:nth-child(1) {
    transition-delay: 0.1s;
}

.metodo-card:nth-child(2) {
    transition-delay: 0.2s;
}

.metodo-card:nth-child(3) {
    transition-delay: 0.3s;
}

.metodo-card:nth-child(4) {
    transition-delay: 0.4s;
}
/* Estado inicial */
.zona-item {
    opacity: 0;
    transition: all 0.8s ease;
}

/* Impares entran por la izquierda */
.zona-item:nth-child(odd) {
    transform: translateX(-80px);
}

/* Pares entran por la derecha */
.zona-item:nth-child(even) {
    transform: translateX(80px);
}

/* Cuando aparecen */
.zona-item.show {
    opacity: 1;
    transform: translateX(0);
}
.info-item {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s ease;
}

/* cuando aparece */
.info-item.show {
    opacity: 1;
    transform: translateY(0);
}