/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 03/05/2022, 22:00:33
    Author     : Aldana
*/

.modal-landing .modal-dialog{
    width: 60%;
}

.modal-landing .cuerpo-producto h3{
    font-family: Nunito;
    font-size: 1.4em;
    color: var(--negro);
    white-space: nowrap;
    margin-top: 0;
}

.modal-landing .cuerpo-producto > div > h1{ /*Para h1 CEO*/
    font-family: Nunito;
    font-size: 1.4em;
    color: var(--negro);
    white-space: nowrap;
    margin-top: 0;
    text-align: left;
}

.modal-landing .cuerpo-producto h3 > span{
    margin-right: 13em;
    font-size: 1em;
}

.modal-landing .carrousel3 .leftRs {
  margin-top: 1.3em;
}

.modal-landing .carrousel3 .rightRs {
  margin-top: 5em;
}

.modal-landing .modal-header .header-body .cuerpo-producto h3.titulo-producto{
    float:left;
}

.modal-landing h4{
    margin-top: 0em;
    margin-bottom: 0em;
    font-size: 1em;
    line-height: 1.6;
    color: var(--gris);
    height: 3.5em;
}

.modal-landing .cuerpo-producto > div > h2{ /* Para h2 CEO*/
    margin-top: 0em;
    margin-bottom: 0em;
    font-size: 1em;
    line-height: 1.6;
    color: var(--gris);
    height: 3.5em;
    font-family: Roboto;
}

.modal-landing p.precio {
  font-size: 1.2em;
  color: #000000;
  margin-top: 0em;
  margin-bottom: 0em;
  white-space: nowrap;
}

.modal-landing span.tachado {
  font-size: 0.95em;
  color: var(--gris);
  margin-left: 0.2em;
  -webkit-text-decoration-line: line-through;
  text-decoration-line: line-through;
}

.modal-landing p.rojo{
  font-size: 0.75em;
  color: #ff0000;
}

.modal-landing .modal-header{
    background-color: #fce3e3;
}

.modal-landing .modal-header img{
    border-radius: 15px;
}

.modal-landing .promo-nuevo {
    display: table;
    width: 16em;
    padding-left: 0;
}

.modal-landing .promo-nuevo > .destacado{
    padding: 3px 6px;
    display: inline-block;
    text-align: center;
}

.modal-landing .promo-nuevo > .nuevo {
    /*border-radius: 8px;
    background-color: #231f20;
    width: 48%;*/
    padding: 3px 6px;
    display: inline-block;
    text-align: center;
}

.modal-landing .promo-nuevo > .nuevo > span{
  font-family: SFProText-Bold;
  font-size: 0.7em;
  color: #ffffff;
  text-transform: uppercase;
}

.modal-landing .promo-nuevo > .promo {
  /*border-radius: 8px;
  background-color: #231f20;
  width: 48%;*/
  padding: 3px 6px;
  display: inline-block;
  text-align: center;
}

.modal-landing .promo-nuevo > .promo > span {
  font-family: SFProText-Bold;
  font-size: 0.7em;
  color: #ffffff;
  text-transform: uppercase;
}   

.modal-landing .masmenos{
    padding-left: 0;
    /*padding-right: 0;*/
    padding-top: 2em;
}

.modal-landing .masmenos input{
    width: 2.3em;
    height: 1.75em;
    display: inline-block;
    text-align: center;
    padding: 0;
    font-size: 1.2em;
    border-radius: 8px;
    border-color: var(--azul);
}

.modal-landing .masmenos button{
    width: 35px;
    height: 34px;
    border: none;
    border-radius: 17px;
    box-shadow: 0 10px 100px 0 rgba(0, 0, 0, 0.8);
    color: var(--blanco);
    background-color: var(--azul);
    margin: 0 0.2em;
}

.modal-landing .switch-field-lista label {
    height: 1em;
    display: block;
    float: none;
    padding: 0;
    padding: 0.75em 1em 2.5em 1em;
    border-top: solid 1px #666;
    border-bottom: solid 1px #666;
    margin: 0;
}

.modal-landing .switch-field-lista label:first-of-type{
    border-bottom: none;
}

.modal-landing .switch-field-lista label > span:nth-child(2) {
    font-family: SFProDisplay-Regular;
    font-size: 0.9em;
    line-height: 1.6;
    color: #666666;
    height: 3.5em;
}

.modal-landing .botonCeleste{
    width: 100%;
  height: 44px;
  border:none;
  border-radius: 8px;
  background-color: #009EE3;
  
  font-family: Nunito;
  /*font-size: 1.2em;*/
  color: #ffffff;
  text-transform: uppercase;
  
  margin-top: 1em;
}

.modal-landing .botonBlanco{
    width: 100%;
  height: 44px;
  border:none;
  border-radius: 8px;
  background-color: var(--celeste);
  font-family: Nunito;
  font-size: 1em;
  color: #009EE3;
  text-transform: uppercase;
  
  margin-top: 1em;
}

.modal-landing .modal-body{
    padding-top: 0;
}

.modal-landing .relacionados-titulo h3{
    font-family: Nunito;
    text-align: center;
    font-size: 1.2em;
}

.modal-landing .relacionados{
    accent-color: green;
}

.modal-landing .relacionados > div{
    border-top: 1px solid #e5e5e5;
    padding:  1.5em 1em 1em;
}

.modal-landing .relacionados h3{
    font-family: Roboto;
    font-size: 1em;
    margin-top: 0;
}

.modal-landing .relacionados img{
    border-radius: 12px;
}

.modal-landing .relacionados p.precio {
  font-size: 1em;
}

.modal-landing .relacionados label>span{
    margin-top: 0em;
    margin-bottom: 0em;
    font-family: SFProDisplay-Regular;
    font-size: 0.9em;
    line-height: 1.6;
    color: #666666;
    height: 3.5em;
    font-weight: 100;
}

.modal-landing .modal-footer{
    padding-top: 0;
}

.modal-landing .modal-footer .row.totales > div:first-of-type{
    padding-left: 2em;
    padding-top: 0.9em;
    text-align: left;
}

.modal-landing .modal-footer .row.totales > div:first-of-type h3{
    margin-top: 0;
    font-size: 1.2em;
}

.modal-landing .modal-footer .row.totales-2{
    padding-top: 1em;
}

.modal-landing .modal-footer .row.totales-2 h3{
    font-size: 1em;
    width: 50%;
    margin-top: 1em;
}

.modal-landing .modal-footer .row > div.masmenos{
    padding-top: 1.4em;
}

.modal-landing .modal-footer p{
    font-size: 1em;
    color: #666;
    margin-bottom: 0;
}

@media (min-width: 769px) and (max-width: 1110px){
    .modal-landing .modal-dialog{
        width: 90%;
    }
}

@media (max-width: 768px){
    .modal-landing .modal-dialog{
        width: 100%;
        margin: 0;
    }
    .modal-landing .modal-header{
        background-color: #ffffff;
    }
    .modal-landing .modal-header > div{
        margin-bottom: 1em;
    }
    .modal-landing .modal-header .logo img{
        width: 40%;
    }
    .modal-landing .modal-header .atras{
        width: 1em;
        height: 19px;
        border: none;
        background-image: url("../img/atras.svg");
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: center;
        background-size: cover;
        margin-top: 1em;
    }
    
    .modal-landing .modal-header .header-body{
        background-color: #fce3e3;
    }
    .modal-landing .modal-header .header-body .imagen-producto{
        padding: 1em 0 0 0;
        margin-bottom: 1em;
    }
    .modal-landing .modal-header .header-body img{
        display: block;
        margin-left: auto;
        margin-right: auto;
        /*width: 50%;*/
    }
    .modal-landing .modal-header .header-body h3{
        text-align: center;
    }
    .modal-landing .modal-header .header-body .cuerpo-producto h3.titulo-producto{
        float:none;
    }
    .modal-landing .modal-header .header-body h4{
        margin: 1em;
    }
    
    .modal-landing .modal-header .header-body .promo-nuevo {
        /*width: 13em;
        position: absolute;
        z-index: 1;
        margin-top: -12em;*/
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        
        padding-left: 0;
        margin-top: 0;
    }
    
    .modal-landing p.precio {
        text-align: center;
    }
    
    .modal-landing .relacionados p.precio {
        text-align: left;
    }

    .modal-landing span.tachado {
        text-align: center;
    }

    .modal-landing .rojo {
        text-align: left;
    }
    
    .modal-landing .relacionados p.rojo {
        text-align: left;
        font-size: 0.75em;
    }
    
    .modal-landing .relacionados .promo-nuevo {
        /*width: 13em;
        position: absolute;
        z-index: 1;
        margin-top: -12em;*/
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        
        padding-left: 0;
        margin-top: 0;
    }

    .modal-landing .masmenos{
        padding-top: 0;
    }
    .modal-landing .modal-footer .row > div.masmenos{
        padding-top: 0;
    }
    .modal-landing button.mas{
        float: right;
    }
    .modal-landing button.menos{
        float: left;
    }
    .modal-landing .botonCeleste{
        margin-top: 0;
    }
    .modal-landing .botonBlanco{
        margin-top: 0;
    }
    .modal-landing h4{
        height: auto;
    }
}

@media (max-width: 390px){
    .modal-landing .masmenos input{
        width: 1.5em;
    }
}

@media (max-width: 300px){
    .modal-landing .masmenos input{
        width: 1em;
    }
    .modal-landing .masmenos button{
        width: 27px;
        height: 27px;
    }
    .modal-landing .masmenos button{
        width: 27px;
        height: 27px;
    }
}