/* --------------------------------------------------
DO ------------------------------------- GENERAL ---
---------------------------------------------------*/

html, body {

	background-color:var(--color-white);

	color: var(--color-neutro-darker);

	font-weight:normal;

	}


:root {

	--font-main:'Montserrat', sans-serif;

	--font-second:'Montserrat', sans-serif;

	}


/* --------------------------------------------------
DO -------------------------------------- COLORS ---
---------------------------------------------------*/

:root {

	--color-main-darker:#001b5b;
	--color-main-dark:#001b5b;
	--color-main:#004b90;
	--color-main-soft:#5c65a8;
	--color-main-softer:#c4c8e6;

	--color-second-darker:#222a26;
	--color-second-dark:#539515;
	--color-second:#6fc61c;
	--color-second-soft:#a9dd77;
	--color-second-softer:#e2f4d2;


	--color-neutro-darker:#17191a;
	--color-neutro-dark:#343638;
	--color-neutro:#62686d;
	--color-neutro-soft:#75797C;
	--color-neutro-softer:#E6EAEF;

	--color-ok:#55b88b;
	--color-ok-softer:#a9dac4;
	--color-warning:#fc6161;
	--color-warning-softer:#f3afaf;

	}

/* --------------------------------------------------
DO ------------------------------------- HEADER ---
---------------------------------------------------*/

/* General
------------------------------*/
header  {
	background-color:var(--color-white);
	border-bottom:1px solid var(--color-neutro-softer);
	}


/* Fonts
------------------------------*/
header nav {
	font-size:1rem;
	font-weight:bold;
	font-family:var(--font-main);
	text-transform:none;
	}


/* Separator
------------------------------*/
header nav > ul > li[data-element='separator']{
	background-color:var(--color-neutro-soft);
	height:16px;
	}


/* Buttons
------------------------------*/
header nav > ul > li > *:not(ul, .button),
ul.menu-dropdown > li > *:not(ul) {
	color:var(--color-neutro-darker);
	}


/* Buttons + icons
------------------------------*/
header nav > ul > li > *:not( .button ) .svg-icon,
ul.menu-dropdown > li > * .svg-icon,
ul.menu-dropdown li[data-seccion='back'] > label .svg-icon{
	fill:var(--color-neutro-darker);
	}


/* Hover
------------------------------*/
header nav > ul > li > a:not( .button ):hover,
ul.menu-dropdown > li > a:hover {
	color:var(--color-main);
	}

header nav > ul > li > a:not( .button ):hover > .svg-icon,
ul.menu-dropdown > li > a:hover > .svg-icon{
	fill:var(--color-main);
	}



/* Botones activos
------------------------------*/
body#inicio header nav ul li[data-seccion='inicio'] a, 
body#inicio header nav ul li[data-seccion='inicio'] a:hover,
body.servicios header nav ul li[data-seccion='servicios'] a, 
body.servicios header nav ul li[data-seccion='servicios'] a:hover,
body.empresa header nav ul li[data-seccion='empresa'] a, 
body.empresa header nav ul li[data-seccion='empresa'] a:hover,
body.blog header nav ul li[data-seccion='blog'] a, 
body.blog header nav ul li[data-seccion='blog'] a:hover,
body.contacto header nav ul li[data-seccion='contacto'] a, 
body.contacto header nav ul li[data-seccion='contacto'] a:hover  {
	background-color:transparent;
	color:var(--color-main); 
	}

/* --------------------------------------------------
DO -------------------------------- NAV MOVIL 620 ---
---------------------------------------------------*/

/*  Solo mostramos whatsp
	------------------------------*/
@media only screen and (max-width:620px) {

	header nav ul li{
		display:none!important;

	}

	header nav ul li.klu{
		display:flex!important;

	}

}

/* --------------------------------------------------
DO -------------------------------- NAV MOVIL 1 --- (nunca mostrar)
---------------------------------------------------*/

@media only screen and (max-width:1px) {



	/*  Color de fondo 
	------------------------------*/
	header nav,
	ul.menu-dropdown  {
		background: rgb(0,26,90);
		background: linear-gradient(180deg, rgba(0,26,90,1) 30%, rgba(0,59,126,1) 100%);
		}



	/* Borde o linea de botones
	------------------------------*/
	header nav > ul li,
	ul.menu-dropdown li{
		border-bottom:1px solid var(--color-white-30);
		}



	/* Diseno de Botones
	------------------------------*/
	header nav > ul > li > *:not(ul),
	header nav > ul > li > *:not(ul):hover,
	ul.menu-dropdown li > *,
	ul.menu-dropdown li > *:hover {
		background-color:transparent!important;
		color:var(--color-white-80)!important;
		font-size:1.2rem!important;
		height:42px!important;
		line-height:42px!important;
		padding:8px 0px!important;
		}


	/* Icon botones
	------------------------------*/
	header nav > ul > li > *:not(ul) .svg-icon,
	ul.menu-dropdown li[data-seccion='back'] > label .svg-icon {
		fill:var(--color-white-80)!important;
		height:26px;
		margin-left:-4px;
		width:26px;
		}


	body#inicio header nav ul li[data-seccion='inicio'] a, 
	body#inicio header nav ul li[data-seccion='inicio'] a:hover,
	body.servicios header nav ul li[data-seccion='servicios'] a, 
	body.servicios header nav ul li[data-seccion='servicios'] a:hover,
	body.empresa header nav ul li[data-seccion='empresa'] a, 
	body.empresa header nav ul li[data-seccion='empresa'] a:hover,
	body.blog header nav ul li[data-seccion='blog'] a, 
	body.blog header nav ul li[data-seccion='blog'] a:hover,
	body.contacto header nav ul li[data-seccion='contacto'] a, 
	body.contacto header nav ul li[data-seccion='contacto'] a:hover  {
	background-color:inherit;
	color:inherit; 
	}


}


/* --------------------------------------------------
DO -------------------------------------- TITLES ---
---------------------------------------------------*/

/* Default 
------------------------------*/
* .title {
	color:inherit;
	font-size:1em;
	}

* .subtitle {
	color:inherit;
	font-size:0.8em;
	text-transform:uppercase;
	}



.the-title {
	color:var(--color-main-darker);
	font-size:2rem;
	font-weight:var(--fw-bolder);
	}
	@media only screen and (max-width:2200px) {
	.the-title {
	font-size:2rem;
	}}
	@media only screen and (max-width:1600px) {
	.the-title {
	font-size:1.8rem;
	}}


.title-1 {
	color:inherit;
	font-size:1.2em;
	width:100%;
	}

.title-2 {
	color:inherit;
	font-size:1.2em;
	}

.subtitle-1 {
	color:inherit;
	font-size:1em;
	}

.subtitle-2 {
	color:inherit;
	font-size:1em;
	}



/* --------------------------------------------------
DO ------------------------------------- BUTTONS ---
---------------------------------------------------*/
.button,
.button + label,
ul.add-button li > a,
ul.add-button li > span,
ul.add-button li > input[type=submit] + label,
ul.add-button li > input[type=button] + label,
ul.add-button li > input[type=file] + label,
ul.add-button li > input[type=checkbox] + label,
ul.add-button li > input[type=radio] + label,
ul.add-button li > button,
.tag,
ul.add-tag li > *:not(a, p, input, button) {
	background: rgb(0,26,90);
	background: linear-gradient(180deg, rgba(0,26,90,1) 30%, rgba(0,59,126,1) 100%);
	color:var(--color-white-70);
	border-radius:4px;
	}


/* Icons
------------------------------*/
.button .svg-icon,
.button + label .svg-icon,
ul.add-button li > * > .svg-icon,
ul.add-button .svg-icon,
.tag .svg-icon,
ul.add-tag li > *:not(a, p, input, button) .svg-icon{
	fill:var(--color-white-70);
	}


/* Hover
------------------------------*/
.button:hover,
.button + label:hover,
ul.add-button li > a:hover,
ul.add-button li > span:hover,
ul.add-button li > input[type=submit] + label:hover,
ul.add-button li > input[type=button] + label:hover,
ul.add-button li > input[type=file] + label:hover,
ul.add-button li > input[type=checkbox] + label:hover,
ul.add-button li > input[type=radio] + label:hover,
ul.add-button li > button:hover {
	background-color:var(--color-main-dark);
	color:var(--color-white);
	text-decoration:none;
	}

.button:hover .svg-icon,
.button + label:hover .svg-icon,
ul.add-button :hover .svg-icon {
	fill:var(--color-white);
	}


/* Checked (if checbox - radio)
------------------------------*/
ul.add-button li > input[type=checkbox]:checked + label,
ul.add-button li > input[type=radio]:checked + label{
	background-color:var(--color-main-darker);
	color:var(--color-white);
	}
ul.add-button li > input[type=checkbox]:checked + label .svg-icon,
ul.add-button li > input[type=radio]:checked + label .svg-icon{
	fill:var(--color-white);
	}



/* + Outline
------------------------------*/
.button.outline,
.button.outline + label,
ul.add-button.outline li > a,
ul.add-button.outline li > span,
ul.add-button.outline li > input[type=submit] + label,
ul.add-button.outline li > input[type=button] + label,
ul.add-button.outline li > input[type=file] + label,
ul.add-button.outline li > input[type=checkbox] + label,
ul.add-button.outline li > input[type=radio] + label,
ul.add-button.outline li > button,
.tag.outline,
ul.add-tag.outline li > *:not(a, p, input, button)  {
	background-color:transparent;
	border:1px solid var(--color-main);
	color:var(--color-main);
	}

.button.outline .svg-icon,
.button.outline + label .svg-icon,
ul.add-button.outline  li > * .svg-icon,
.tag.outline .svg-icon,
ul.add-tag.outline .svg-icon {
	fill:var(--color-main);
	}

.button.outline:hover .svg-icon,
.button.outline + label:hover .svg-icon,
ul.add-button.outline li > *:hover .svg-icon {
	fill:var(--color-white);
	}


.button.outline:hover,
.button.outline + label:hover,
ul.add-button.outline li > a:hover,
ul.add-button.outline li > span:hover,
ul.add-button.outline li > input[type=submit] + label:hover,
ul.add-button.outline li > input[type=button] + label:hover,
ul.add-button.outline li > input[type=file] + label:hover,
ul.add-button.outline li > input[type=checkbox] + label:hover,
ul.add-button.outline li > input[type=radio] + label:hover,
ul.add-button.outline li > button:hover {
	border:1px solid transparent;
	background-color:var(--color-main);
	color:var(--color-white);
	}

/* Checked (if checbox - radio)
------------------------------*/
ul.add-button.outline li > input[type=checkbox]:checked + label,
ul.add-button.outline li > input[type=radio]:checked + label{
	border:1px solid transparent;
	background-color:var(--color-main-darker);
	color:var(--color-white);
	}

ul.add-button.outline li > input[type=checkbox]:checked + label .svg-icon,
ul.add-button.outline li > input[type=radio]:checked + label .svg-icon{
	fill:var(--color-white);
	}




/* --------------------------------------------------
DO ----------------------- BUTTON PERSONALIZADOS ---
---------------------------------------------------*/

/* Button movil
------------------------------*/
.button.btn-movil,
.button.btn-movil + label,
ul.add-button.btn-movil li > a,
ul.add-button.btn-movil li > span,
ul.add-button.btn-movil li > input[type=checkbox] + label,
ul.add-button.btn-movil li > input[type=radio] + label{
	background-color:var(--color-black)!important;
	}



/* Close menu movil
------------------------------*/
.button.btn-close-menu-movil,
.button.btn-close-menu-movil + label,
ul.add-button.btn-close-menu-movil li > a,
ul.add-button.btn-close-menu-movil li > span,
ul.add-button.btn-close-menu-movil li > input[type=checkbox] + label,
ul.add-button.btn-close-menu-movil li > input[type=radio] + label{
	border:1px solid #004b90!important;
	background-color:var(--color-black)!important;
	}

/* Whatsapp
------------------------------*/
.button.btn-whatsapp,
.button.btn-whatsapp + label,
ul.add-button.btn-whatsapp li > a,
ul.add-button.btn-whatsapp li > span,
ul.add-button.btn-whatsapp li > input[type=checkbox] + label,
ul.add-button.btn-whatsapp li > input[type=radio] + label{
	background:var(--color-whatsapp)!important;
	}


/* Delete
------------------------------*/
.button.btn-delete,
.button.btn-delete + label,
ul.add-button.btn-delete li > a,
ul.add-button.btn-delete li > span,
ul.add-button.btn-delete li > button,
ul.add-button.btn-delete li > input[type=submit] + label,
ul.add-button.btn-delete li > input[type=button] + label{
	background-color:var(--color-warning)!important;
	}


/* Close
------------------------------*/
.button.btn-close,
.button.btn-close + label,
ul.add-button.btn-close li > a,
ul.add-button.btn-close li > span,
ul.add-button.btn-close li > input[type=checkbox] + label,
ul.add-button.btn-close li > input[type=radio] + label{
	background-color:var(--color-black)!important;
	}




/* --------------------------------------------------
DO ----------------------------------- BANNER BOX ---
---------------------------------------------------*/
.banner-box  .title{
	font-size:2.4rem;
	color:var(--color-white);
	text-transform: uppercase;
	order:1;
	}

.banner-box  .subtitle{
	font-size:1.6rem;
	color:var(--color-second-soft);
	text-transform: none;
	order:2;
	}

.banner-box > p{
	color:var(--color-white);
	font-size:1rem;
	font-weight:var(--fw-normal);
	order:3;
	}

.banner-box .button{
	order:4;
	}


/*                                       
-------------------------------------  MOVIL 620 ---
--------------------------------------------------*/

@media only screen and (max-width:620px) {

	.movil-block .banner-box{
	background-color:var(--color-main);
	}


	.banner-box .title{
	color: var(--color-white-80);
	font-size:1.5em;
	}

	.banner-box .subtitle{
	color: var(--color-second);
	font-size:1.3em;
	}

	.banner-box p{
	color: var(--color-white-60);
	font-size:1.2em;
	}


}




/* --------------------------------------------------
DO --------------------------------- BANNER MAIN ---
---------------------------------------------------*/

/* Background color
------------------------------*/
*[data-element='banner-main'] {
	background-color:var(--color-main-soft);
	}

/* Background inside element
------------------------------*/
*[data-element='banner-main'] .inside{
	background-color:var(--color-black);
	}

/* Background Panelz element
------------------------------*/
*[data-element='banner-main'] .panel-1{
	background-color:var(--color-main);
	}

*[data-element='banner-main'] .panel-2{
	background-color:var(--color-neutro);
	}



/* --------------------------------------------------
DO --------------------------------- PANELS ALL ---
---------------------------------------------------*/
*[data-element='panel'] {
	background-color:var(--color-neutro-softer);
	}

*[data-element='panel'] > .inside {
	background-color:var(--color-white);
	}


*[data-element='panel'] .col-img {
	background-color:var(--color-neutro-soft);
	}





/* --------------------------------------------------
DO ---------------------------------------- FOOTER---
---------------------------------------------------*/
footer{
	background: rgb(0,26,90);
	background: linear-gradient(180deg, rgba(0,26,90,1) 30%, rgba(0,59,126,1) 100%);
	color:var(--color-white-60);
	}

/* Title
------------------------------*/
footer .title {
	color:var(--color-main);
	font-family:var(--font-main);
	font-size:1em;
	font-weight:bold;
	text-align:left;
	text-transform:uppercase;
	width:100%;
	}