/*
Theme Name: San Juan GA
Theme URI: http://www.garajedoce.com/themes/sanjuanga/
Version: 1.0
Description: El tema de la web de San Juan GA
Author: Raúl Carrión
Author URI: http://www.raulcarrion.com/
Template: Divi
*/



:root {

    /*  ANCHURAS DE CONTENIDO   */
    --ancho-desktop:              80%;
    --ancho-tablet:               90%;
    --ancho-mobile:               95%;
    --ancho-botonera:           100%;
    --ancho-maximo-desktop:      1380px;
    --ancho-maximo-mobile:      100%;
    --ancho-estrecha-desktop:   50%;
    --ancho-estrecha-maximo-desktop:     600px;
    --ancho-estrecha-mobile:   100%;
  
  
    /*   SEPARACIONES ENTRE ELEMENTOS   */
    --separacion:             20px;

  
    /* Definicio de COLORES */
    --color-corporativo: #436c2b;

  }

/*
        ESTILO CALCULADORA
*/
  
.et_pb_divider_0:before, .et_pb_divider_1:before {
    border-top-color: #ebca6f;
    border-top-width: 2px;
}

.et_pb_divider_0.et_pb_module, .et_pb_divider_1.et_pb_module {
    margin-left: auto!important;
    margin-right: auto!important;
}
.et_pb_divider_1, .et_pb_divider_0 {
    width: 13%;
    max-width: 100%;
}

  input[type="submit"]{
    cursor:pointer;
}

.cuerpo-pagina{
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;
}

.cuerpo-pagina p{
    font-family: 'Lora',Georgia,"Times New Roman",serif;
}

.ancho-completo
{
    max-width: 100%;
}
.ancho-completo .contenido
{
    width: var(--ancho-desktop);
    max-width: var(--ancho-maximo-desktop);
    
}

.estrecha{
    width: var(--ancho-estrecha-desktop);
    max-width: var(--ancho-estrecha-maximo-desktop);
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    margin-bottom:50px;
}

.ahorro-total
{
    border:1px solid rgb(252, 206, 6);
    padding: 25px !important;
    border-radius: 50px;
    font-size: 26px;
}

.cuerpo-pagina select,
.cuerpo-pagina input{
    border: 0px;
    padding: 5px;
    font-size: 18px;
    border-bottom: 1px solid #ebca6f;
}


.cuerpo-pagina #select-zona{
   text-align: center;
}

.cuerpo-pagina #contenedor_factura_otro_num{
    margin-top:auto;
 }
 
.cuerpo-pagina #factura_otro_num
{
    text-align: center;
    width: 100px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
}

#cabecera-trans-vehiculo{
    
    background-image: url("/wp-content/uploads/cabecera-quienes-somos.jpg");
    min-height: 550px;
    padding-right: calc(100% - var(--ancho-desktop));
    padding-left:calc(100% - var(--ancho-desktop));
}


#cabecera-trans-vehiculo h2{
    font-family: 'Lato',Helvetica,Arial,Lucida,sans-serif;
    color: #c9c9c9!important;
    line-height: 1.3em;
}

.estrecha .texto-cabecera
{
    text-align: center;
    max-width:750px;
    margin-top: 10px;
    margin-bottom: 25px;
}

.titulo-cabecera
{
    padding-top: 250px;
    padding-bottom: 0px;
    margin-bottom: 5px;
}

.titulo-cabecera h1
{
    font-weight: 700;
    font-size: 40px;
    color: #FFFFFF!important;
}

/*
        PREGUNTA
*/

.oculto
{
    display: none;
}
 .pregunta
 {
     display: none;
     margin-left: auto;
     margin-right: auto;
     border: 1px solid rgb(235, 202, 111);
     padding: 25px;
 }

 .pregunta.visible
 {
     display: block;
 }

.pregunta h2,
.recuadro h2
{
    text-align: center;
    margin-top: 20px;
}

.pregunta p.opcion
{
    display: flex;
    flex-direction: column;
}

.pregunta input,
.pregunta select{
    margin-bottom: 20px;
}

.pregunta select option.placeholder{
    color:#e9e9e9;
}


.pregunta p{
    padding-bottom:0px;
    font-family: 'Lora',Georgia,"Times New Roman",serif;
}

.recuadro
{
    padding: 40px;
    font-size: 18px;
    background-color: var(--color-corporativo);
    color:white;
}

.recuadro h2,
.recuadro h3
{
    color:white;
}

.recuadro ul{
    background-color: white;
    border: 2px solid #ebca6f;
    margin-top: 15px;
    padding-bottom: 0px;
    padding-left:0px;
    
}

.recuadro li{
    display: flex;
    justify-content: space-between;
    color: black;
    padding: 10px;
}

.recuadro li.total
{
    border-top: 1px solid #ebca6f;
}

.recuadro li.total{
    background-color: #ebca6f;   
}

.pregunta .wpcf7 input[type="submit"]
{
    /*color:rgb(19, 66, 107) !important;*/
    background-color: rgb(252, 206, 6);
    font-weight: bold;
    font-size:16px;
}
.pregunta .wpcf7 form .wpcf7-response-output{
    padding: 25px;
    color: #5d7c3e;
    background-color: white;
    border:0px;
}



div.wpcf7
{
    margin-top:25px;
}


/*
    ESTILOS GENERAL
*/

 .flex
 {
     display: flex;
     flex-direction: column;
     
 }

 .fila.flex{
     justify-content: center;
     align-items: flex-start;
     align-items: stretch;
 }

 .flex.centrado
 {
     justify-content: center;
     align-items: center;
 }

 .flex.horizontal
 {
     flex-direction: row;
 }

 .flex.separado
 {
    gap:20px;
 }


.contenido
{
    margin-top: 30px;
    margin-bottom:75px;
}

.contenedor{
    gap:50px;
}

.contenedor img{
    max-width:150px;
}


/*  botones */

.botonera{
    width: var(--ancho-botonera);
    display: flex;
    justify-content: space-between;
    margin-top:25px;
}


.cuerpo-pagina button
{
    cursor:pointer  ;    
}


 button.bt-atras
 {
    background-color: transparent;
    border:0px;
    text-transform: none;
    color:var(--color-corporativo);
    font-size: 18px;

 }
 .recuadro button.bt-atras
 {
     color:white;
 }

 button.bt-atras:hover 
 { 
    opacity: .7;
    background-color: transparent;
    border-color: transparent;
 }

 button.bt-siguiente.et_pb_button:disabled{
    background-color: #666666;
    border-color: #666666;
    color:white;
    cursor:not-allowed;
 }

 button.bt-siguiente.et_pb_button:disabled:hover
 {
    background-color: #666666;
    border-color: #666666;
    color:white !important;
 }

 #num_resultado{
     color:#25a0c8;
     font-weight:bold;
     font-size:28px;
 }

 .wpcf7-form select option{
     color:black;
 }

 .wpcf7-form .matricula input[type="text"]
{
    font-size: 40px;
    text-transform: uppercase;
    background-color: white !important;
    height: 100px !important;
    color: black !important;
    text-align: center;
    border-radius: 5px;
    border:4px solid silver !important;
    background-image: url("/wp-content/uploads/matricula.jpg");
    background-position: left;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.wpcf7-form .matricula input[type="text"]::placeholder
{
    color:silver;
}

 /*
        Pie de monarch
 */

.et_monarch .et_pb_section .et_social_inline_bottom {
     margin-top:15px;
 }

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


TABLET                  


***********************************************************************/
@media screen and (max-width: 981px) {

    .titulo-cabecera
    {
        padding-top: 150px;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

}

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


MOBILE                  


***********************************************************************/
@media screen and (max-width: 760px) {

    .titulo-cabecera
    {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 5px;
    }

    #cabecera-trans-vehiculo{
    
        background-image: url("https://sanjuanga.com/wp-content/uploads/cabecera-quienes-somos.jpg");
        min-height: 550px;
        padding-right: calc(100% - var(--ancho-mobile));
        padding-left:calc(100% - var(--ancho-mobile));
    }

    
    .estrecha
    {
        width: var(--ancho-estrecha-mobile);
        margin-top:0px;
    }
    
    .pregunta
    {
        width: var(--ancho-maximo-mobile);
        border: 0px;
    }

    .recuadro
    {
        padding: 20px;
    }

    #cabecera-trans-vehiculo{
        background-image: url("https://sanjuanga.com/wp-content/uploads/cabecera-quienes-somos.jpg");
        min-height: auto;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .ancho-completo .contenido
    {
        width: var(--ancho-mobile);
        max-width: var(--ancho-mobile);
    }

    .wpcf7-form .matricula input[type="text"]
    {
        font-size: 23px;
        height: 70px !important;
    }

}