@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600|Raleway:300,400,500|Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: 'Trebuchet';
    src: url('../fonts/trebucbi.ttf');
}

@font-face {
    font-family: HelveticaNeueOblique;
    src: url('../fonts/LTe50923.ttf');
}

@font-face {
    font-family: HelveticaNeueCondensed;
    src: url('../fonts/LTe50922.ttf');
}

/* === GENERAL === */
* {
    box-sizing: border-box;
}

.combos-container {
    background-color: #eeeeee;
    width: 100%;
    padding-top:1rem;
}
.combos {
    width: 60%;
    min-width: 400px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #d1d1d1;
    box-shadow: 0 4px 8px 4px #E0E0E0;
    margin-bottom: 12px;
    padding-top: 40px;
/*     border-right: 1px solid #d1d1d1; */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro, .descripcion, .acabados, .masinfo {
    padding: 0 1.5rem;
    width: 100%;
    
}

.caratula {
    background-repeat: no-repeat;
    background-position: right center;
    background-size:cover;
    width: 100%;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    padding: 0 1.5rem;
}
.newsletter-i {
    font-family: Trebuchet, sans-serif;
    font-weight: bold;
    text-align: right;
    font-size:14px;
    display:block;
    width: 100%;
}
.newsletter-i > span {
    font-size: 24px;
    font-family: Trebuchet, sans-serif;
}
.icono-combo {
    width: 100%;
    height: auto;
    margin-bottom:2rem;    
}
.presentacion-texto {
    width: 45%;
    background-color: #fff;
    padding: 2.5rem  1rem 0 1rem;   
}
.presentacion-texto > p:not(.newsletter-i) {
    font-family: Lora, serif;
    text-transform: initial;
    font-style: italic;
    text-align: left;
}
.presentacion-texto > p:not(.newsletter-i)> strong {
    font-family: Lora, serif;
    text-transform: initial;
    font-style: italic;
    font-weight: 600;
    text-align: left;
}
.ilust-intro {
    width: 100%;
    height: auto;
}
.descripcion {
    display:flex;
    flex-direction: column;
}
.combo-intro {
    display:flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-top:2rem;
}
.combo-intro > h2 {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: bold;
    text-align: center;
    width: 80%;
    font-size: 36px;
    padding-bottom:1.5rem;
    text-align: center;
}
.combo-intro > p {
    font-family: Lora, serif;
    font-style: italic;
    text-align: center;
}
.combo-intro > p > strong {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: bold;
}
.descripcion-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}
.row {
    display: flex;
    flex-direction: row;    
}
/* .row-reverse {
    flex-direction:row-reverse;
} */

.nro, .img-container {
    display: flex;
    width: 50%;
}
.nro {
    gap: 1rem;
}
.row-title {
    display: flex;
    padding-top: 3rem;
    gap: 1rem;
    align-items: center
}
.row-title h3 {
    text-align: left;
    font-family: Lora, serif;
    font-style: italic;
    font-weight: 600;
    font-size:24px;
}
.row-content p, .row-content p > strong {
    text-align: left;
    font-family: Lora, serif;
    font-style: italic;
}
.row-content p > strong {
    font-weight: bold;
}
.img-container {
    justify-content: center;
}
.img-container > img {
    height: 185px;
}
.mb {
    margin-bottom: 1rem;
}
.combos-button {
    display: block;
    background:#000;
    border-top-left-radius: 12px;
    border-bottom-right-radius: 12px;
    color:#fff;
    text-transform: uppercase;
    text-decoration: none;
    padding:8px;
    width: 90px;
    text-align: left;
    font-family: Lora, serif;
    font-style: italic;
    font-size: 14px;
}

.acabados > h3 {
    display: block;
    width: 100%;
    text-align: left;
    text-transform: capitalize;
    font-family: HelveticaNeueOblique, sans-serif;
    padding: 2rem 2rem 2rem 3rem;
    margin-top:1rem;
    font-size: 24px;
    background: #dad5d3;
    font-weight: normal;
}
.acabados-container {
    display: flex;
    width: 100%;
    padding: 2rem 0;
}

.img-acabados {
    display: flex;
    width: 50%;
    align-items: center;
    justify-content: center;
}

.acabados-descripcion {
    padding:2rem 2.5rem;
    width: 50%;
}
.acabados-descripcion > p, .acabados-descripcion > p > strong {
    text-align: left;
    font-family: Lora, serif;
    font-style: italic;
}

.acabados-descripcion > p > strong {
    font-weight: bold;
}

.masinfo {
    display: flex;
}
.masinfo-content {
    display: flex;
    width: 50%;
    flex-direction: column;
}
.masinfo-title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2rem 3rem;
    gap: 1rem;
}
.masinfo-img {
    width: 50%;
}

.masinfo-title > h3 {
    color: #fff;
    font-size: 24px;
    font-family: HelveticaNeueCondensed;
    font-weight:normal;

}
.masinfo-title > img {
    width: 60px;
    height: 60px;
}
.masinfo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 3rem 2rem 3rem;
    gap: 1rem;
}

.masinfo-text > p, .masinfo-text > p > strong {
    font-family: Lora, serif;
    font-style: italic;
}

.masinfo-text > p > strong {
    font-weight: bold;
}

/* === ECO PVC === */

.ecopvc .caratula {
    background-image:url('../img/combos/eco-pvc-img/caratula.png');
}
.ecopvc .index {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: bold;
    font-size: 75px;
    color:#bfc086;
}

.ecopvc .row-reverse .index {
    color:#cada78;
}
.ecopvc .combos-button:hover {
    background:#727350;
}

.ecopvc .img-acabados > img {
width: 260px;
height: 64px;
}

.ecopvc .masinfo-title {
    background: #494e34;
}

.ecopvc .masinfo-img {
    background: url('../img/combos/eco-pvc-img/casa.png');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

/* === SECURITY === */

.security .caratula {
    background-image:url('../img/combos/security/caratula.png');
}
.security .index {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: bold;
    font-size: 75px;
    color:#d84928;
}
.security .combos-button:hover {
    background:#3e150b;
}

.security .img-acabados > img {
width: 300px;
height: auto;
}

.security .masinfo-title {
    background: #5c1619;
}

.security .masinfo-img {
    background: url('../img/combos/security/Security_Back.jpeg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

/* === Luxebox === */

.luxebox .caratula {
    background-image:url('../img/combos/luxebox/caratula.png');
}
.luxebox .presentacion-texto {
    display: flex;
    flex-direction: column;
    align-items: center;   
}
.luxebox .ilust-intro {
    width: 80%;
    height: auto;
    margin-top:5rem;
    margin-bottom: 2rem;
}
.luxebox .index {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: bold;
    font-size: 75px;
    color:#eee713;
}
.luxebox .combos-button:hover {
    background:#a19c0c;
}

.luxebox .img-acabados > img {
width: 300px;
height: auto;
}

.luxebox .masinfo-title {
    background: #b6d443;
}

.luxebox .masinfo-img {
    background: url('../img/combos/luxebox/AdobeStock_300150072.jpeg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

/* === Portones === */

.portones .caratula {
    background-image:url('../img/combos/portones/caratula.png');
}
.portones .ilust-intro {
    width: 80%;
    height: auto;
    margin-top:5rem;
    margin-bottom: 2rem;
}
.portones .index {
    font-family: Lora, serif;
    font-style: italic;
    font-weight: bold;
    font-size: 75px;
    color:#d759a1;
}
.portones .combos-button:hover {
    background:#8a3967;
}

.portones .img-acabados > img {
width: 300px;
height: auto;
}

.portones .masinfo-title {
    background: #741c59;
}

.portones .masinfo-img {
    background: url('../img/combos/portones/Porton-Garage-Auto-Luxeperfil.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.portones .acabados > h3 {
    background: #bdb2b3;
}

.portones .presentacion-texto {
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;   
}

.portones .presentacion-texto > p {
    align-self:flex-start;
}

@media (max-width: 900px) {
 .row, .acabados-container, .masinfo {
    flex-direction: column;
    align-items: center;
    gap: 1rem;

 }
 .row-reverse {
    flex-direction: column-reverse;
 }
 .nro, .img-container {
    width: 100%;
 }
 .acabados-descripcion {
    width: 100%;
}
.masinfo-content {
     width: 100%;
}
.masinfo-img {
    width: 100%;
    height: 194px;
}
.portones .presentacion-texto {
    background-color: #fff;
}
}