/* Variables */
:root{
    --colorArgoa: #2193b7;
    --colorArgoaDos: #046280;
    --colorArgoaClaro: #0cbffb;
    --colorCards: #F5F5F4;

    --margenSector: 24px 0;
    --bordesRadio: 8px;
}

#bannerPrincipal{
    height: 300px;
    background-color: #101114;
    background: rgba(0,0,0,0.4) url(../imagenes/web/banner_principal.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 90px;
    border-bottom: 6px solid var(--colorArgoa);
}

main{
    flex: 1; /* flex-grow: 1; */
    padding: 24px;}

h1, h2, h3, h4, h5, h6{
    font-size: 28px; 
    color: #fff; text-align: center;
    margin: 16px 0;}

h1{font-size: clamp(2.1rem, 1.2rem + 2vw, 2.5rem); margin-bottom: 32px; font-weight: 800;}
h1 span{color: var(--colorArgoaClaro);}
main p{color: #fff; font-size: clamp(1.125rem, 0.9rem + 0.5vw, 1rem); margin-bottom: 32px;}

#intro{margin: 0;}
#intro h2{
    font-weight: 800;
    color: var(--colorArgoaClaro);
}

#movilImg{width: 100%;}
#movilImg img{width: 100%;}

/* Planes */
#tituloPlan{margin-top: 32px;}
#containerPlanes{margin: var(--margenSector)}

.cardPlan{
    padding: 24px;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
    border-radius: var(--bordesRadio);
    background-color: var(--colorCards);}

.lineaSlogan{border-color: rgba(0, 0, 0, 0.7); width: 100%; margin: 24px auto;}

.cardPlan h3, .cardPlan h4, p{color: #000;}
.cardPlan h3{font-size: 22px; margin: 0; font-weight: 700;}
.cardPlan p{text-align: center; margin: 0; color: #000;}

.cardPlan span{
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0;}

.cardPlan h4{font-size: 24px; margin: 0 auto 8px auto;}

.lista{background-color: var(--colorCards);}
.lista ul{margin: 0; padding: 0; list-style: none;}
.lista ul li{
    font-size: 1.1rem;
    line-height: 30px;}

.botonUno{
    width: 100%;
    height: 40px;
    margin: 0 auto 24px 0;
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: var(--bordesRadio);
    background-color: var(--colorArgoaDos);}

.ejemplos{
    color: var(--colorArgoaDos);
    display: block;
    margin: 24px auto 20px auto;
    padding: 6px;
    border-top: 1px solid var(--colorArgoaDos);
    border-bottom: 1px solid var(--colorArgoaDos);
}    

.lineaGeneral{border-color: rgba(255, 255, 255, 0.7);}

/* Beneficios */
#beneficios{margin: var(--margenSector);}

#containerBeneficios{background-color: transparent;}

.cardBene{
    background-color: var(--colorCards);
    padding: 16px;
    border-radius: var(--bordesRadio);
    margin-bottom: 24px;
}

.cardBene img{
    width: 74px;
    display: block;
    margin: auto;
}
.cardBene h3, .cardBene p{color: #000;}
.cardBene h3{font-size: 24px; font-weight: 700; margin: 8px 0;}
.cardBene p{font-size: 1.15rem; text-align: center;}

#arg{margin: 32px 0;}

#ba{width: 100%; border-radius: var(--bordesRadio);}
#ba img{
    width: 100%;
    border-radius: var(--bordesRadio);
}

/* Preguntas Frecuentes */
#faq{margin: 32px 0;}

#faq h2{font-size: 1.3rem; margin: 0; font-weight: 400;}
#faq h3{margin-top: 8px;}

/* Acordeon de Preguntas */
.accordion-item{margin-bottom: 8px;}
.accordion-button{font-size: 1.2rem; font-weight: 700; letter-spacing: -1px;}
.accordion-body{font-size: 1.15rem;}

/* Grosor de las Flechitas */
.accordion-button::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='3'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* Color de fondo de la pregunta */
.accordion-button:not(.collapsed) {
  background-color: rgba(33, 147, 183, 0.5); /* o el color que quieras */
  color: #000; /* mantiene el color de texto */
  box-shadow: none;
}

.accordion-button:focus{
  border: none !important;  
  border-color: #f000 !important;
  box-shadow: none !important;
  outline: none !important;
}

.vinculoAcordeon{
    color: var(--colorArgoa);
    font-weight: 600;
}

.accordion a:hover{color: var(--colorArgoaDos);}

/* //////////////////////////// */

@media (min-width: 760px){
    main{padding: 50px 100px;}

    #movilImg{display: none;}

    /* Planes */
    #containerPlanes{margin: var(--margenSector);}

    .cardPlan{
    padding: 24px;
    margin-bottom: 32px;
    border-radius: 8px;
    background-color: var(--colorCards);
    }

    /* Beneficios */
    #beneficios{margin: var(--margenSector)}

    #containerBeneficios{
    margin: var(--margenSector);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}

    .cardBene{
    width: 49%;
    background-color: var(--colorCards);
    padding: 16px;
    border-radius: var(--bordesRadio);
    margin-bottom: 24px;}

    .cardBene h3, .cardBene p{color: #000;}
    .cardBene h3{font-size: 24px; font-weight: 700; margin: 8px 0;}
    .cardBene p{font-size: 1.15rem; text-align: center;}
}

@media (min-width: 1024px){
    main{padding: 50px;}

    #textoIntro h2{margin-top: 50px;}
    #parrafoH2{width: 500px; text-align: center; margin: auto;}

    /* Planes */
    #containerPlanes{
    margin: var(--margenSector);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;}

    .cardPlan{width: 48%;}
    .lista{padding-bottom: 32px;}

    #cp3{margin: 0 auto;}

    .ejemplos{
    color: var(--colorArgoaDos);
    display: block;
    margin: auto auto 20px auto;
    padding: 3px;
    border-top: 1px solid var(--colorArgoaDos);
    border-bottom: 1px solid var(--colorArgoaDos);} 

    .ejemplos:hover{color: var(--colorArgoa);}     

     /* Beneficios */
    #beneficios{margin: var(--margenSector);}

    #containerBeneficios{
    margin: var(--margenSector);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}

    .cardBene{
    width: 32%;
    background-color: var(--colorCards);
    padding: 16px;
    border-radius: var(--bordesRadio);
    margin-bottom: 24px;}

    .cardBene h3, .cardBene p{color: #000;}
    .cardBene h3{font-size: 24px; font-weight: 700; margin: 8px 0;}
    .cardBene p{font-size: 1.15rem; text-align: center;}

    /* Argentina */
    #arg{
    margin: 32px 0;
    display: flex;
    justify-content: space-between;
    }

    #ba{
    width: 48%;
    height: 475px;
    border-radius: var(--bordesRadio);}
    
    #ba img{
    width: 100%;
    height: 475px;
    border-radius: var(--bordesRadio);
    object-fit: cover;
    }

    #textoArg{width: 48%;}

    /* Acordeon de Preguntas */
    .accordion-item{margin-bottom: 8px;}
    .accordion-button{font-size: 1.1rem; font-weight: 700; letter-spacing: -1px;}
    .accordion-body{font-size: 1.05rem;}    

    #faq{
    display: flex;
    justify-content: space-between;}

    #titulosFaq{width: 48%;}
    .accordion{width: 48%;}

}

@media (min-width: 1200px){
    main{padding: 50px 150px;}

    #intro{
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;}

    #textoIntro{width: 75%; font-size: 1.2rem; margin-top: -50px;}

    #textoIntro h2{
    font-weight: 800;
    margin: 75px auto 24px;
    color: var(--colorArgoaClaro);}

    #textoIntro p{line-height: 30px;}

    #parrafoH2{width: 600px; margin: auto; font-size: 1.15rem;}
    
    #movilImg{width: 25%; max-width: 400px; display: block; margin-right: 100px; z-index: 100;}

    h1{text-align: left;}


    main h2{font-size: 2.1rem;}

    #containerPlanes{
    height: 1150px;    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 32px 0;}

    .cardPlan{
    width: 30%;
    height: 100%;}

    .cardPlan h3{font-size: 20px;}

    .cardPlan span{
    font-size: 2.3rem;
    font-weight: 900;
    margin: 0;}

    .cardPlan h4{font-size: 22px; margin: 0 auto 8px auto;}

    .lista ul li{
    font-size: 1rem;
    line-height: 30px;}

    #cp3{margin: 0;}

    /* Beneficios */
    #beneficios h2{text-align: left;}

    /* Argentina */    
    #arg{
    margin: 32px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    }

    #arg h2, #faq h2, #faq h3{text-align: left;} 
    #arg p{margin: 0;} 

    #ba{
    width: 48%;
    height: 350px;
    border-radius: var(--bordesRadio);
    }
    
    #ba img{
    width: 100%;
    height: 350px;
    border-radius: var(--bordesRadio);
    object-fit: cover;
    }

}