/*
 Theme Name:     Latinato Theme
 Template:       Divi
 Version:        1.0
 Description:    Los estilos personalizados de este sitio web se encuentran dentro de este child theme. Es recomendable no desinstalar o desactivarlo, a menos de que tengas conflicto con otros plugins instalados. Si deseas soporte, escribe al correo contacto@latinato.com
 Author:         Latinato
 Author URI:     https://latinato.com/



/*************************************************************************************/
/*************************************************************************************/
/**************************** ESTILOS GLOBALES ***************************************/
/*************************************************************************************/
/*************************************************************************************/

/* ------------------------------------------------------ */
/* ------------- Colores default del sitio web ---------- */
/* ------------------------------------------------------ */

:root {
	--greenmain1:#157051;
	--greenmain2:#27C894;
	--greensupport1:#DAFFF3;
	--greensupport2:#A5F0D7;
	--greensupport3:#67C5A6;
	--greensupport4:#194637;
	--yellowsupport1:#F0DBA5;
	--redsupport1:#C57A67;
	--redsupport2:#702715;
}

/*************************************************************************************/
/*************************************************************************************/
/***************** ESTILOS GENERALES PARA UN CORRECTO FUNCIONAMIENTO *****************/
/*************************************************************************************/
/*************************************************************************************/

/* ---------- Alinear texto e items verticalmente-------- */

@media only screen and (min-width: 980px){
	.general-align {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}

/* ------ Invertir orden en dispositivos moviles -------- */

@media (max-width:980px) {
	.reverse-columns-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
}


/* -- Eliminar transicion de las blurb en divi ---------- */

.et_pb_main_blurb_image .et_pb_animation_top.et-animated {
    opacity: 1;
    -webkit-animation: none;
    animation: none;
}



/*************************************************************************************/
/*************************************************************************************/
/**************************** ESTILOS DEL MENU ***************************************/
/*************************************************************************************/
/*************************************************************************************/


/* ------------------------------------------------------ */
/* ---------- Otros estilos del menu -------------------- */
/* ------------------------------------------------------ */


/* ---- Quita margen estandar del menu ------------------ */

.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li {
	margin-top: 0px!important;
}

/* ---------- Hover de items en menu -------------------- */

#menu-menu-principal > li.menu-item.menu-item-type-custom.menu-item-object-custom > a:not(.ltn-menu-cta a):hover {
	color:var(--greenmain2)!important;
	text-decoration:underline;
	animation:none;
	transition:none;
}

/* ----- Ajustes para alinear items con CTA en menu ----- */

.et_pb_menu li a {
	padding: 18px 10px;
}




/* ------------------------------------------------------ */
/* ------------- CTA principal del menu ----------------- */
/* ------------------------------------------------------ */ 

/* ------------- Padding del CTA ------------------------ */

.ltn-menu-cta a {
	padding: 15px 15px !important;   
}

/* ------------- Color del CTA en menu ------------------ */

li.ltn-menu-cta.menu-item.menu-item-object-custom > a, #menu-menu-principal > li.ltn-menu-cta.et_pb_menu_page_id-5277.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item > a  {
	color:#ffffff!important;
	background-color:var(--greenmain2);
	margin-left:100px;
	font-weight:700;
}

.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
	color: #ffffff!important;
}


@media (max-width:980px) {
	li.ltn-menu-cta.menu-item.menu-item-object-custom > a, #menu-menu-principal > li.ltn-menu-cta.et_pb_menu_page_id-5277.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item > a {
		margin-left:auto;
		text-align:center;
	}
}

/* ------------- Color CTA menu Hover ------------------- */

li.ltn-menu-cta.menu-item.menu-item-object-custom > a:hover, #menu-menu-principal > li.ltn-menu-cta.et_pb_menu_page_id-5277.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item > a:hover {
	background-color:var(--greenmain1);
	opacity:1;
}


.et-menu .menu-item-has-children>a:first-child:after {
	position: relative!important;
}


/* ------------------------------------------------------ */
/* ---------- Estilos del menu movil -------------------- */
/* ------------------------------------------------------ */

/* ---------- Estilos del boton del menu ---------------- */

.et-db #et-boc .et-l .mobile_menu_bar:before {
	background-color:var(--greenmain2);
	color:#ffffff!important;
	font-size:38px;
	position:absolute;
	top:-47px!important;
	left:-30px;
	padding:2px;
	z-index:9999!important;
}

/* ---------- Estilos del contenedor desplegable -------- */


.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
	width: 112%;
	margin-left: -6%;
}

.et-db #et-boc .et-l .et_mobile_menu li a:not(.ltn-menu-cta a) {
	border-bottom:1px solid var(--greenmain1)!important;
}


/*************************************************************************************/
/*************************************************************************************/
/**************************** ESTILOS PARA BLOG **************************************/
/*************************************************************************************/
/*************************************************************************************/

/* --- Margen de los titulos del blog (single post) ----- */

.en-blog-post h2, .en-blog-post h3, .en-blog-post h4, .en-blog-post h5, .en-blog-post h6 {
	margin-bottom:30px;
	margin-top:50px;
}


/* ---------- Estilos de los comentarios en blog -------- */

.comment_area .comment-reply-link {
    position: relative;
    top: 15px;
    display: inline-block;
    font-size:14px!important;
}
 
@media (min-width: 768px) { /** El breakpoint para el formulario de comentarios **/
 body:not(.logged-in) #comment {
 		max-width: 50%; float: right;  height: 105px; margin-top:14px;
 	} /** Incluso las secciones del formularo **/
}

.bypostauthor .comment_avatar img{
    border:2px solid var(--greenmain1);
    border-radius:250px;
}

/* ------------------------------------------------------ */
/* ------------- Aplica para la grilla de blog ---------- */
/* ------------------------------------------------------ */ 

/* ------------- Igualar altura de las tarjetas --------- */

.pa-blog-equal-height .pa-auto-height {
    height: auto !important;
}

.pa-blog-equal-height .pa-auto-margin {
    margin-top: 20px !important;
}



/*************************************************************************************/
/*************************************************************************************/
/**************************** ESTILOS DE SECCIONES COMERCIALES ***********************/
/*************************************************************************************/
/*************************************************************************************/



/* ------------------------------------------------------ */
/* ---------- Para botones Principales CTA Fijos -------- */
/* ------------------------------------------------------ */


/* 2 Columns Mobile */
@media all and (max-width: 767px) {
    .two-col-mob .et_pb_column {
        width:47.25% !important;
    }
    
.two-col-mob .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }
    .two-col-mob .et_pb_column:not(:nth-child(2n)) {
            margin-right:5.5% !important;
    }
}

/* 2 Columns Tablet */
@media all and (min-width: 768px) and (max-width: 980px) {
    .two-col-tab .et_pb_column {
        width:47.25% !important;
    }
.two-col-tab .et_pb_column:nth-last-child(-n+2) {
        margin-bottom:0;
    }
    .two-col-tab .et_pb_column:not(:nth-child(2n)) {
        margin-right:5.5% !important;
    }
}


/* ---------- Tres columnas moviles --------------------- */

@media all and (max-width: 767px) {
    .et-db #et-boc .et-l .three-col-mob .et_pb_column{
        width:33.33% !important;
    }
    .three-col-mob .et_pb_column:nth-last-child(-n+3) {
        margin-bottom:0;
    }
    .three-col-mob .et_pb_column:not(:nth-child(3n)) {
        margin-right:0% !important;
    }
}
/* ---------- Tres columnas tablet --------------------- */

@media all and (min-width: 768px) and (max-width: 980px) {
    .three-col-tab .et_pb_column {
        width:29.6667% !important;
    }
.three-col-tab .et_pb_column:nth-last-child(-n+3) {
        margin-bottom:0;
    }
    .three-col-tab .et_pb_column:not(:nth-child(3n)) {
        margin-right:5.5% !important;
    }
}

/* ------------------------------------------------------ */
/* ---------- Para titulos con logo y division ---------- */
/* ------------------------------------------------------ */

h2.division-logo-texto-70:after {
	content: "";
    display: block;
    width: 70%;
    height: 2px;
    background: var(--greenmain1);
    right: 0;
    top: 40%;
    position: absolute;
}

h2.division-logo-texto-60:after {
	content: "";
    display: block;
    width: 60%;
    height: 2px;
    background: var(--greenmain1);
    right: 0;
    top: 40%;
    position: absolute;
}

h2.division-logo-texto-50:after {
	content: "";
    display: block;
    width: 50%;
    height: 2px;
    background: var(--greenmain2);
    right: 0;
    top: 40%;
    position: absolute;
}

@media all and (max-width: 767px) {
	h2.division-logo-texto-70:after, h2.division-logo-texto-60:after, h2.division-logo-texto-50:after {
		content: "";
	    display: block;
	    width: 100%;
	    height: 1px;
	    background: var(--greenmain2);
	    right: 0;
	    top: 100%;
	    position: absolute;
	}
}

/* ------------------------------------------------------ */
/* ---------- Slider principal personalizado ------------ */
/* ------------------------------------------------------ */

a.et_pb_button.et_pb_more_button.button-main-slider {
	width:100%;
}



/* ------------------------------------------------------ */
/* ---------- Slider reviews personalizado -------------- */
/* ------------------------------------------------------ */

.swipe-scrollbar::-webkit-scrollbar {
	width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
	background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
	background: #E4FAFF;
	border-radius: 50px;
	border:1px solid var(--greenmain2);
}



/* estilos tienda listado */

/*boton de ver producto*/


li.product.type-product > a.button.add_to_cart_button, a.button.product_type_simple, .woocommerce a.button, .woocommerce-page a.button {
	background:var(--greenmain2);
	border-radius:0px;
	color:#ffffff!important;
	font-size:14px;
	font-weight:500;
	border:none;
	padding:8px 30px;
	margin-bottom:15px;
	bottom:0;
	right:0;
	width:90%;
}

li.product.type-product > a.button.add_to_cart_button:after, a.button.product_type_simple:after, .woocommerce a.button:after, .woocommerce-page a.button:after  {
	font-size:22px;

}



@media all and (max-width: 767px) {
	li.product.type-product > a.button.add_to_cart_button, a.button.product_type_simple, .woocommerce a.button, .woocommerce-page a.button  {
		width:100%;
		padding:8px 20px;
		text-align:center;
}
}

li.product.type-product > a.button.add_to_cart_button:hover, a.button.product_type_simple:hover,.woocommerce a.button:hover, .woocommerce-page a.button:hover {
	background-color:var(--greenmain2);
	cursor:pointer;
	padding:7px 20px;
	
}

/*texto en la miniatura previa*/
.et-db #et-boc .et-l .et_overlay:before {
    content: 'VER PRODUCTO';
    font-family: 'Poppins', Arial !important;
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding: 5px 0;
}






/* titulo resumen*/
div.summary.entry-summary > div > h1 {
	font-weight:800;
	line-height:1.3em;
	font-size:24px;
	color:var(--greenmain1)
}

/*precio resumen*/
div.summary.entry-summary > div > p > span > bdi, .entry-summary p.price span {
	color:var(--greenmain2);
	font-weight:700;
}


/*descripcion resumen*/
div.summary.entry-summary > div > div.woocommerce-product-details__short-description > p {
	margin-top:15px;
	font-size:16px!important;
	font-weight:300!important;
	line-height:1.4em;
}



/* cantidad campo*/
.woocommerce .quantity input.qty, .woocommerce-page .quantity input.qty {
	background-color: #ffffff;
	border:2px solid var(--greenmain1);
	border-radius: 0;
	color: var(--greenmain1);
	font-size: 14px;
	font-weight:900;
	padding: 18px;
	line-height: 1.2em;

}


/* boton resumen*/

div.summary.entry-summary > div > form > button {
	background-color:var(--greenmain1)!important;
	color:#ffffff!important;
	border:none!important;
	border-radius:0px!important;
	font-size:18px!important;
	padding: 11px 30px!important;
}



@media all and (max-width: 767px) {
	div.summary.entry-summary > div > form > button {
	font-size:18px!important;
	padding: 11px 25px!important;
}
.woocommerce .quantity input.qty, .woocommerce-page .quantity input.qty {
	padding: 16px;
	line-height: 1.3em;

}
	
}


/*wompi button*/

.waybox-button {
    height: 58px!important;
	width:300px!important;
	font-weight: 700!important;
    font-size: 20px!important;
	margin-bottom:30px;

}

.waybox-button strong {
 	font-weight: 700!important;
    font-size: 20px!important;

}


/*woo checkout error */

.woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message {
    background: var(--yellowsupport1);
	color: var(--redsupport2)!important;
}

#post-8 > div > div > div > div.et_pb_section.et_pb_section_0.et_section_regular > div > div > div.et_pb_module.et_pb_code.et_pb_code_0 > div > div > div.woocommerce-form-login-toggle > div > a {
		color: var(--redsupport2)!important;
	text-decoration:underline;
}

.woocommerce-error li, .woocommerce-info li, .woocommerce-message li {
  color:var(--redsupport2);
	font-size:15px;
	line-height:1.3em;
}

/*** EXISTING ACCOUNT / ERROR BOXES BACKGROUND COLOR ***/
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
	    background: var(--yellowsupport1);

}

.woocommerce .woocommerce-checkout .col2-set .col-1,
.woocommerce .woocommerce-checkout .col2-set .col-2 {
    width: 100% !important;
}

.woocommerce .woocommerce-checkout .col2-set .col-1 {
    margin-bottom: 30px;
}



/*****************************************************/
/******** WOO CART / CHECKOUT / ACCOUNT PAGES ********/
/*****************************************************/



/*** MAIN FORMS BACKGROUND COLOR ***/

.woocommerce-cart #payment, .woocommerce-checkout #payment {
	background-color:var(--greensupport1);
}

h3#order_review_heading, div.woocommerce-billing-fields > h3, div.woocommerce-additional-fields > h3 {
	font-weight:700;
	font-size:30px;
	color:var(--greenmain1);
	margin-top:30px;
	border-top:2px solid var(--blue1);
	padding-top: 40px;
	border-style: dotted;
}

/*** FIELDS ON CHECKOUT, CART, ACCOUNT PAGES ***/
.woocommerce-account input, 
.woocommerce-checkout input,
#order_comments.input-text {
	background-color: #ffffff !important;
	color: black !important; /* not the placeholder, the text color when typed */
	border: 1px solid #00000030!important; /* optional */
}


/*** PAYMENT BOX ON CHECKOUT ***/
#add_payment_method #payment div.payment_box, 
.woocommerce-cart #payment div.payment_box, 
.woocommerce-checkout #payment div.payment_box {
	background-color: #ffffff;
	color: var(--greensupport4);
}
#add_payment_method #payment div.payment_box::before, 
.woocommerce-cart #payment div.payment_box::before, 
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #ffffff;
}




/*** ORDER NOTES ON CHECKOUT ***/
.woocommerce-checkout .woocommerce form .form-row textarea {
	min-height: 150px; /* height of optional notes box */
}



#payment > ul > li.wc_payment_method > label {
	color:var(--greensupport4);
	font-weight: 700;
}

.woocommerce #payment #place_order, .woocommerce-page #payment #place_order {
	width:100%;
	background-color:var(--greenmain2)!important;
	color:#ffffff;
	border-radius:0px;
	text-transform:uppercase!important;
	font-weight:600;

}



/***custom thank you****/

.page-id-5739 {
	font-family:Poppins!important;
	margin-top:170px;
}

/*change Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
    content: '\4d';
}



#qlwapp .qlwapp-toggle, #qlwapp .qlwapp-box .qlwapp-header, #qlwapp .qlwapp-box .qlwapp-user, #qlwapp .qlwapp-box .qlwapp-user:before {
	background-color: #000000;
	margin-top:15px!important;
}