/*   
Theme Name: Kubox2025
Theme URL: 
Description: 
Author: @kubox
Text Domain: underscores
Template: underscores
Version:
Tags: 
*/


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

html, body {
	background-color:var(--color-white);
	color: var(--color-neutro-darker);
	font-weight:normal;
	letter-spacing:0.18px;
	}


:root {

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

	--color-main-darker:#262b36;
	--color-main-dark:#2cb17b;
	--color-main:#53c496;
	--color-main-soft:#96d2ba;
	--color-main-softer:#d2eae0;

	--color-second-darker:#262b36;
	--color-second-dark:#372F7B;
	--color-second:#4745A1;
	--color-second-soft:#8785DC;
	--color-second-softer:#C2C8EC;

	--color-neutro-darker:#252728;
	--color-neutro-dark:#505456;
	--color-neutro:#747b7e;
	--color-neutro-soft:#aab0b5;
	--color-neutro-softer:#e5e8ea;

	--color-ok:#67b259;
	--color-ok-softer:#d9efd5;
	--color-caution:#edbc2a;
	--color-caution-softer:#f9f8ea;
	--color-warning:#d34040;
	--color-warning-softer:#f3d5d5;




	--gradient-uno:
	linear-gradient(to bottom right, var(--color-main-soft), transparent),
	linear-gradient(to bottom left, var(--color-second-softer), transparent),
	linear-gradient(to top right, #f3e0f3, transparent);



	--gradient-dos:linear-gradient(to right top, #2c2565, #363076, #403b89, #4a469b, #5452ae);



	--gradient-tres:linear-gradient(to bottom, var(--color-white) -12%, var(--color-main-softer) 140%);

	}

.bg-gradient-uno {background:var(--gradient-uno);}
.bg-gradient-dos {background:var(--gradient-dos);}
.bg-gradient-tres {background:var(--gradient-tres);}
.blend-mode-screen {background-blend-mode: screen;}

/*-------------------------------------------------- 
---     INTERLINEADO   //////////////////////////
---------------------------------------------------*/
body, p{
	line-height: 1.6;
	}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	}


/*-------------------------------------------------- 
---     TITLES    //////////////////////////////////
---------------------------------------------------*/
[class*="title-main"] {
	font-size:2em;
	}

[class*="title-1"]{
	font-size:1.8rem; 
	font-weight:bold;
	line-height:1.4em;
	}

[class*="title-2"] {
	font-size:1.6rem; 
	font-weight:bold;
	line-height:1.6em;
	}

[class*="title-3"] {
	font-size:1.4rem; 
	font-weight:400;
	line-height:1.4em;
	}

[class*="subtitle-1"]{
	font-size:1em!important;
	}

[class*="subtitle-2"] {
	font-size:1em!important;
	}

[class*="subtitle-3"] {
	color:var(--color-main);
	font-size:0.9rem;
	font-weight:bold;
	line-height:1.2em;
	letter-spacing:0.2em;
	margin:0px;
	padding:0px;
	text-transform:uppercase;
	}


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


/* General
------------------------------*/
header.header-main  {
	background-color:var(--color-white);
	border-bottom:1px solid var(--color-neutro-softer);
	padding-block:clamp(2px, 1vw, 8px);
	}


/* Altura
----------------------------------------*/
header.header-main {
	height:clamp(60px, 10vh, 120px);
	}


/* Fonts
------------------------------*/
header.header-main nav[class^="nav-main"] {
	font-weight:bold;
	font-family:var(--font-main);
	text-transform:uppercase;
	}


/* Separator
------------------------------*/
header.header-main nav[class^="nav-main"] > ul > li[data-element='separator']{
	background-color:var(--color-neutro-soft);
	}


/* UL
------------------------------*/
header.header-main nav[class^="nav-main"] ul {
	gap:clamp(1px, 0.5vw, 4px);
	}


/* Buttons
------------------------------*/
header.header-main nav[class^="nav-main"] > ul > li > *:not(ul, .button),
header.header-main nav[class^="nav-main"] > ul > li .btn-dropdown + label {
	color:var(--color-neutro-darker);
	}


/* Buttons + icons
------------------------------*/
header.header-main nav[class^="nav-main"] > ul > li > *:not( .button ) .svg-icon,
header.header-main nav[class^="nav-main"] > ul > li .btn-dropdown + label .svg-icon{
	fill:var(--color-neutro-darker);
	}


/* Hover
------------------------------*/
header.header-main nav[class^="nav-main"] > ul > li > a:not( .button ):hover,
header.header-main nav[class^="nav-main"] > ul > li .btn-dropdown + label:hover {
	color:var(--color-second);
	}


header.header-main nav[class^="nav-main"] > ul > li > a:not( .button ):hover > .svg-icon,
header.header-main nav[class^="nav-main"] > ul > li .btn-dropdown:hover  + label .svg-icon{
	fill:var(--color-second);
	}



/* 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); 
	}

/* Logotipo
------------------------------*/
header.header-main a.logotipo img,
header.header-main a.logotipo svg{
	display:flex;
	height:45px;	
	width:180px;	
	}
	@media only screen and (max-width:820px) {
	header.header-main a.logotipo img,
	header.header-main a.logotipo svg{
	height:45px;
	width:180px;
	}}
	@media only screen and (max-width:720px) {
	header.header-main a.logotipo img{
	/* En opciones Movil */
	}}


 .st0{fill:#5ABF95;}
 .st1{fill:#081B33;}
 .st00{fill:#5ABF95;}
 .st11{fill:#fff;}



/*------------------------------------------------------------------------ 
PANEL MOVIL /////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
.panel-movil{
	background:var(--gradient-dos);
	}


/* Menu movil
------------------------------*/
.panel-movil .menu-movil *{
	color:var(--color-white-80);
	font-weight:bold;
	}


.panel-movil > * .svg-icon{
	fill:var(--color-white-80);
	}


.panel-movil  hr,
.panel-movil .menu-movil hr {
	background-color:var(--color-white-20)!important;
	}



/*---------------------------------------------------
//////////   ACTIVAMOS ELEMENTOS MOVILES   //////////
---------------------------------------------------*/
@media only screen and (max-width:1020px) {

	header.header-main li{
	display:none!important;
	}


	.panel-to-show{
	display:flex!important;
	}


	header.header-main li[data-element='btn-movil'] {
	display:flex!important;
	}


}


/*------------------------------------------------------------------------ 
BANNERS  /////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/

/*-------------------------------------------------- 
---     BANNER MAIN ///////////////////////////////
---------------------------------------------------*/
[data-element='banner-main'] {
	background:var(--gradient-uno);
	background-blend-mode: screen;
	}


[data-element='banner-main'] [class*="col-img"] picture img{
	opacity:1;
	}

[data-element='banner-main'] [class*="content-box"]{
	width:clamp(40%,  55%, 60%);
	}

[data-element='banner-main'] [class*="content-box"]  [class*="title"]{
	color: var(--color-main);
	order:1;
	}

[data-element='banner-main'] [class*="content-box"]  [class*="subtitle"]{
	color: var(--color-black);
	font-size:1.4em!important;
	order:2;
	}

[data-element='banner-main'] [class*="content-box"] > p{
	color:var(--color-black);
	font-size:1.2em;
	order:3;
	}

[data-element='banner-main'] [class*="content-box"] [class*="button"] {
	order:4;
	}



/*-------------------------------------------------- 
---     BANNER  ////////////////////////////////////
---------------------------------------------------*/
[data-element='banner'] {
	background:var(--gradient-uno);
	background-blend-mode: screen;
	}

[data-element='banner'] .inside{
	background-color:var(--color-neutro);
	}

[data-element='banner'] .col-img{
	background:var(--color-neutro);
	}
[data-element='banner'] .col-content{
	color:inherit;
	}


[data-element='banner'] [class*="content-box"]{
	width:50%;
	}

[data-element='banner'] [class*="content-box"]  [class*="title"]{
	order:2;
	}

[data-element='banner'] [class*="content-box"]  [class*="subtitle"]{
	order:1;
	}

[data-element='banner'] [class*="content-box"] > p{
	color:var(--color-black);
	order:3;
	}

[data-element='banner'] [class*="content-box"] [class*="button"]{
	order:4;
	}





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

	.add-gradient{
	background-image:none;
	}


	[data-element*='banner'] [class*="col-content"]{
	background:var(--color-main)!important;
	}

	[data-element*='banner'] [class*="content-box"]{
	width:100%!important;
	}


	[data-element^='banner'] [class*="content-box"] [class*="title"]{
	color: var(--color-white);
	}

	[data-element^='banner'] [class*="content-box"] [class*="subtitle"]{
	color: var(--color-black);
	}

	[data-element^='banner'] [class*="content-box"] p{
	color: var(--color-black);
	}

	[data-element^='banner'] [class*="content-box"] ul.menu li > *,
	[data-element^='banner'] [class*="content-box"] ul.menu li > *:hover,
	[data-element^='banner'] [class*="content-box"] .button,
	[data-element^='banner'] [class*="content-box"] .button:hover{
	background-color:var(--color-white);
	color:var(--color-black);
	order:4;
	}


	[data-element^='banner'] [class*="content-box"] ul.menu li > * .svg-icon,
	[data-element^='banner'] [class*="content-box"] ul.menu li > *:hover .svg-icon,
	[data-element^='banner'] [class*="content-box"] .button .svg-icon,
	[data-element^='banner'] [class*="content-box"] .button:hover .svg-icon{
	fill:var(--color-black);
	}

}


/*------------------------------------------------------------------------ 
INPUTS  //////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/


/* Fondo y borde
------------------------------*/
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel],
input[type=search],
input:focus,
textarea,
textarea:focus,
seelct
select:focus,
div.input,
div.input > span,

/* box search */
div.box-search,

/* div.select */
div.select {
	border:1px solid var(--color-neutro-softer);
	background-color:var(--color-neutro-softer);
	}


/* Default Border radius
------------------------------*/
form.inputs input[type=text],
form.inputs input[type=number],
form.inputs input[type=password],
form.inputs input[type=email],
form.inputs input[type=tel],
form.inputs input[type=search],
form.inputs select,
form.inputs div.input,

/*inputs*/
input[type=text],
input[type=number],
input[type=password],
input[type=email],
input[type=tel],
input[type=search],
select,
textarea,

/* div input */
div.input,

/* box search */
div.box-search,

/* div select */
div.select,

/* botones */
.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,

/* tag */
ul.add-button li > button,
.tag,
ul.add-tag li > *:not(a, p, input, button),

div.checkbox-set input[type=checkbox] + label span{
	border-radius:0px;
	}


/*------------------------------------------------------------------------ 
RIBBON  //////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
.ribbon {
  --f: 12px; /* control the folded part */

  letter-spacing:2px;
  text-transform: uppercase;
  font-weight:500;
  font-size:0.8em;
  
  position: absolute;
  top: 0;
  color: #fff;
  padding: 6px 40px;
  background: var(--c,var(--color-main));
  border-bottom :var(--f) solid var(--color-main-darker);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px))
}


.right {
  right: 0;
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
}


.left {
  left: 0;
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
}


/* a fix for firefox that show some strange lines*/
@supports (-moz-appearance:none) {
  .ribbon {
    background:
      linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box,
      linear-gradient(var(--c,#45ADA8) 0 0) 50%/
       calc(100% - 2px) calc(100% - 2px) no-repeat border-box;
    border-bottom-color: #0000;
   }
}
/*------------------------------------------------------------------------ 
FOOTER  //////////////////////////////////////////////////////////////////
------------------------------------------------------------------------*/
footer{
	background-color:var(--color-neutro-darker);
	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%;
	}

footer .col .logotipo .svg-icon{
	height:45px;
	width:180px;
	}