/* VARIABLES */
:root {
  /* Colors */
  --color-primary: #139182;
  --color-secondary: #A44A3F;
  --color-aqua: #79E5D8;
  --color-coral: #F19C79;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-green: #1E3D3A;
  --color-lime: #D4E09B;
  --color-darkg: #0F2220;
  --color-darkl: #0E7165;
  --color-gray: #939393;
  --color-blue: #006073;
  --color-cream: #F6F4D2;
  --color-fnave: rgba(19, 145, 130, 0.14);
  --gradiand-menu: linear-gradient(180deg,#112120 0%, #11AE9F 100%);
  --gradiand-hero: linear-gradient(180deg, #050908 0%, rgba(5, 9, 8, 0) 100%);
  --gradient-cover: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
  --gradient-cover2: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 51%, rgba(0, 0, 0, 0) 100%);
  
  
  /* Fonts Size */
  --font-sm: clamp(0.5rem, 3vw, 0.75rem);
  --font-md: clamp(0.8rem, 3vw, 1.125rem);
  --font-lg: clamp(1.3rem, 2vw, 2rem);
  --font-xl: clamp(1.6rem, 3vw, 3.125rem);
  --font-2xl: clamp(3.75rem, 3vw, 5.5rem);
  --font-3xl: clamp(3.75rem, 3vw, 6.125rem);
  --font-hero: clamp(
    .8rem,
    calc(20px + (12 * ((100vw - 745px) / 655))),
    2rem
  );
  /* Paddings & Margins */
  --space-xxs: clamp(4px, 3vw, 5px);
  --space-xs: clamp(8px, 3vw, 10px);
  --space-sm: clamp(11px, 3vw, 15px);
  --space-md: clamp(14px, 3vw, 20px);
  --space-lg: clamp(18px, 3vw, 25px);
  --space-xl: clamp(21px, 3vw, 30px);
  --space-1xl: clamp(28px, 3vw, 40px);
  --space-2xl: clamp(35px, 3vw, 50px);
  --space-3xl: clamp(49px, 3vw, 70px);
  --space-4xl: clamp(56px, 3vw, 80px);
  --space-5xl: clamp(70px, 3vw, 100px);
  --space-6xl: clamp(126px, 3vw, 180px);
  --space-cont: 1400px;
  --padding: min(5vw, 70px);
  /* Borde Radius */
  --radius-pill: 100vmax; /* ya lo tienes */
  --radius-xl: 20px;     /* cards / contenedores */
  --radius-lg: 14px;      /* chat */
  --radius-md: 11px;      /* bubble grande, .chat .msn */
  --radius-sm: 6px;       /* bubble chica */
  /* Utilities */
  --max-bg-deco: 500px;
  --chat-w: 300px;
  --parr-max: 620px;
  --card-mh: 592px;
}

@media (color-gamut: p3) {
  :root {
	--color-primary:   color(display-p3 0.074510 0.568627 0.509804);      
	--color-secondary: color(display-p3 0.643137 0.290196 0.247059);    
	--color-coral:     color(display-p3 0.945098 0.611765 0.474510);         
	--color-aqua:      color(display-p3 0.474510 0.898039 0.847059);        
    --color-lime:      color(display-p3 0.831373 0.878431 0.607843);        
	--color-green:     color(display-p3 0.117647 0.239216 0.227451);     
	--color-white:     color(display-p3 1.000000 1.000000 1.000000);                   
	--color-black:     color(display-p3 0.000000 0.000000 0.000000);  
    --color-gray:      color(display-p3 0.576471 0.576471 0.576471);
    --color-blue:      color(display-p3 0.000000 0.376471 0.450980);
    --color-cream:     color(display-p3 0.964706 0.956863 0.823529);     
    --color-darkg:     color(display-p3 0.058824 0.133333 0.125490);
    --color-darkl:     color(display-p3 0.054902 0.443137 0.396078);
    --color-fnave:   color(display-p3 0.074510 0.568627 0.509804 / 0.14);    
    --gradiand-menu: linear-gradient(180deg,color(display-p3 0.066667 0.129412 0.125490) 0%, color(display-p3 0.066667 0.682353 0.623529) 100%);
    --gradiand-hero: linear-gradient(180deg,color(display-p3 0.019608 0.035294 0.031373) 0%, color(display-p3 0.019608 0.035294 0.031373 / 0) 100%);
  }
}


/* BASE */
html, body { overflow-x: clip;  }
html{
	margin:0;
	padding:0;
	scroll-behavior: smooth;
	font-size:16px;
}
body {
  font-family: 'Outfit', sans-serif;
  font-size: var(--font-lg);
  background-color: var(--color-darkg);
  color: var(--color-primary);
  margin: 0;
  padding: 0;
  position: relative;
  width: 100vw;
}

[gradient] {
  position: absolute;
  width: 100%;
  height: 85vw;
  bottom: 0;
  left: 0;
  background: var(--gradiand-hero);
  transform: rotate(180deg);
}

[color=primary]   { color: var(--color-primary); }
[color=secondary] { color: var(--color-secondary); }
[color=aqua]      { color: var(--color-aqua); }
[color=coral]     { color: var(--color-coral); }
[color=white]     { color: var(--color-white); }
[color=black]     { color: var(--color-black); }
[color=green]     { color: var(--color-green); }
[color=lime]      { color: var(--color-lime); }
[color=darkg]     { color: var(--color-darkg); }
[color=gray]      { color: var(--color-gray); }
[color=blue]      { color: var(--color-blue); }
[color=cream]     { color: var(--color-cream); }

.bg-primary  { background-color: var(--color-primary); }
.bg-secondary{ background-color: var(--color-secondary); }
.bg-aqua     { background-color: var(--color-aqua); }
.bg-coral    { background-color: var(--color-coral); }
.bg-white    { background-color: var(--color-white); }
.bg-black    { background-color: var(--color-black); }
.bg-green    { background-color: var(--color-green); }
.bg-lime     { background-color: var(--color-lime); }
.bg-darkg    { background-color: var(--color-darkg); }
.bg-gray     { background-color: var(--color-gray); }
.bg-blue     { background-color: var(--color-blue); }
.bg-cream    { background-color: var(--color-cream); }

* { box-sizing: border-box; }
[nomargin]{*{ margin: 0;}}
.hide-scrollbars::-webkit-scrollbar{display:none;}
.hide-scrollbars{-ms-overflow-style:none;scrollbar-width:none;}
.container {max-width: var(--space-cont);margin: 0 auto;position: relative;width: 90%;}
a,a:active,a:visited{
	&:not([color]){color:inherit;}
}

section { padding-top: var(--space-6xl); position: relative; }
section .inner { opacity: 0; transform: translateY(100px); }

h1,h2,h3,h4,h5,h6{ font-weight: 400; text-wrap: balance; margin:0;}
p{
	@media (max-width:700px){
		& br{display:none;}
	}
	a{color:var(--color-aqua);}
}

.no-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none;     /* old Edge/IE */
user-select: none;         /* modern browsers */
-webkit-touch-callout: none; /* iOS long-press menu */
}

/* HEADER */
#main-header {
	padding: var(--space-xl) 0;
	position: fixed;top: 0;z-index: 100;width: 100%;left: 0;
	
	/* nav */
	nav{
		opacity: 0; 
		overflow: hidden;
		position: absolute;
		right: -100px;
		top: -100px;
		border-bottom-left-radius: 20px;
		background: var(--gradiand-menu);
		transition: right .3s ease-in-out, top .3s ease-in-out,  opacity .5s ease-in-out;
		pointer-events: none;
		padding:60px 150px 60px 60px;
		ul{ margin:0;padding: 0;display: flex;flex-direction: column;gap: var(--space-sm);}
		li{ list-style: none;font-size: var(--font-md);}
		a{text-decoration: none;font-size:1rem;}
	}
	
	.logo{margin-top:9px;}
	
	/* active */
	&.active{
		nav{opacity: 1;right: 0;top: 0;pointer-events: initial;}
	}
	
	@media (max-width:700px){
		& .logo{width:150px;margin-top:10px;}
	}
}

.logo {
	width: 16%;display: block;
	img, svg{ width: 100%; }
}

.menu-btn {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
	right: 5%;
	top: var(--space-xl);
	
	span,
	&::before,
	&::after{width: 35px;background: var(--color-primary);transition: all .5s ease-in-out;}
	span{ position: absolute;height: 2px;}
	&::before{transform: translateY(-8px);content: "";position: absolute;height: 3px;}
	&::after{transform: translateY(8px);content: "";position: absolute;height: 1px;}
	
	/* active */
	.active & span{position: absolute;width: 0;}
	.active &::before{transform: translateY(0) rotate(45deg);}
	.active &::after{transform: translateY(0) rotate(-45deg);}
}

.btn {
	background-color: var(--color-primary);
	color: var(--color-white);
	padding: var(--space-xs) var(--space-lg);
	border: none;
	border-radius: var(--radius-pill);
	font-size: var(--font-md);
	cursor: pointer;
	text-decoration: none;
	display:inline-block;
	color:white !important;
	text-decoration:none;
	transition:all 0.3s ease;
	&:hover{
		scale:1.1;
		box-shadow:0px 10px 20px rgba(0,0,0,0.8);
	}
}

/* HERO */
#hero {
	background: var(--gradiand-hero);
	padding: 24% 0 10%;
	position: relative;
	margin: 0;
	
	img.hero-bg{
		position: absolute;width: 92%;left: -2.7%;top: var(--space-6xl);
		-webkit-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none; 
	}
	h1{font-size: var(--font-3xl);font-weight: 500;line-height: 1;margin: 0% var(--padding) 4%;
	text-shadow: 0px 0px 34px rgba(0,0,0,0.4);width: 70%}
	.btn{display: inline-block;margin: 0 var(--padding);}
	@media (max-width:700px){
		& h1{width:unset;}
		& img.hero-bg{top:50px;}
	}
}

[pagecontent]{
	max-width: var(--space-cont);
	margin: 0 auto;
	padding:0 5%;
	position: relative;
	width: 90%;
	h2{color:var(--color-aqua);}
	h3{color:var(--color-coral);}
	h4{color:var(--color-lime);}
	p:has(+ :is(h1, h2, h3, h4)) + :is(h1, h2, h3, h4) {
	  margin-top: 10%;
	}
	hr{border:1px solid var(--color-primary);margin:10% 0;opacity:0.1;}
}

#trusted{
	.container{padding-left: var(--padding);}
	.bcakg{
		position: absolute;left: 0;width: 100%;top: 50%;transform: translateY(-50%);
		z-index: -1;mix-blend-mode: multiply;
		img{width:100%;}
	}
	p{margin: 0 0 var(--space-5xl);color: var(--color-dark);width: 40%;}
	
	/* logos */
	.logos{
		display: flex;
		flex-wrap: nowrap;
		gap: var(--space-xl);
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;          /* Firefox */
		-ms-overflow-style: none;       /* IE 10+ / Edge Legacy */
		-webkit-overflow-scrolling: touch; /* inercia en iOS */
		&::-webkit-scrollbar { width: 0;height: 0;display: none;}
	}
	
	@media (max-width: 700px){
		.bcakg{scale:2;top:120%;}
	}
}

.bg-img{
  position: absolute;
  top: 0;
  right: 0;
  width: 30.5vw;
  max-width: var(--max-bg-deco);
}

.feature-card {
	width: 31.5%;
	height: 42.3vw;
	max-height: var(--card-mh);
	border-radius: var(--radius-xl);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	background-blend-mode: overlay;
	padding: 8% 4% 4%;
	transform: translateY(0);
	transition: transform 0.7s ease-in-out;
	position:relative;
	overflow:hidden;
	
	span {font-size: 62px;line-height: 1;margin: 0 auto auto;}
	h3 {margin: 0 0 var(--space-xxs);font-size: var(--font-lg);}
	p {margin: 0;}
	
	/* active */
	.active &{
		&.bg-primary{transform: translateY(var(--space-6xl)); }
		&.bg-secondary{padding-top: 12.5%;transform: translateY(calc(-1 * var(--space-6xl)));}
	}
	
	/* breakpoint */
	@media (max-width:900px){
		&{transform:none !important;width:90%;min-width:300px;padding-top:max(400px,50%) !important;}
		&>span{position:absolute;top:17%;left:50%;transform:translateX(-50%);}/* icon */
		&>*{font-size:1.5rem;}
	}
}

#services .feature-card .card-media{position:absolute;inset:0;display:block;}
#services .feature-card .card-media img{width:100%;height:100%;object-fit:cover;}

#services{
	background:var(--gradient-cover);
	.cards-dig {display: flex;justify-content:space-between;padding: var(--space-6xl) 0;overflow:hidden;overflow-x:auto;gap:20px;}
	.parraf {padding-left: var(--padding);}
	.parraf h2 {font-size: var(--font-lg);}
	.parraf:last-of-type {left: 0%;position: relative;transition: left 0.5s ease-in-out;}
	&.active .parraf:last-of-type {left: 35%;width: 65%;}
	@media (max-width:700px){
		& .cards-dig{padding:40px 0;}
		& .parraf{padding:0;left:0 !important;width:100% !important;}
	}
}

#features{
	background:var(--gradient-cover2);
	.container{
		display: flex;justify-content: space-between;flex-wrap: wrap;column-gap:var(--space-1xl);
		&>*{flex:1;min-width:300px;flex-basis:40%;}
		.no-flex > * {width: 100%;}
		h3{margin-top:0;}
	}
	
	.box {
		width: calc(50% - var(--space-md));
		margin-bottom: calc(2 * var(--space-md));
		border-radius: var(--radius-xl);
		padding: var(--space-lg);
		display: flex;
		align-items: flex-start;
		gap: 5%;
		position: relative;
		z-index: -1;
		&.animate-visible {z-index: 1;}
		.material-symbols-outlined {font-size: var(--font-xl);margin-bottom: var(--space-4xl);}
		h3{margin: 0 0 var(--space-md);}
		p {font-size: var(--font-md);margin: 0;}
		p + p{margin-top: var(--space-md);}
		svg {width: var(--space-6xl);margin-bottom: var(--space-4xl);}
	}
	
	.bg-img {top: calc(100% - var(--space-5xl));right: calc(50% - var(--space-4xl));}
}

#more{
	background:var(--gradient-cover2);
	margin-top: var(--space-2xl);
	div{text-align: center;width: 84%;margin: 0 auto;}
	p{margin:0;}
}

#aboutus{
	background:var(--gradient-cover2);
	.container{
		display:flex;flex-wrap:wrap;
		&>*{flex:1;min-width:300px;}
	}
	img{width:90%;margin-bottom: calc(-1 * var(--space-xl));mix-blend-mode:multiply;opacity:0.9;}
	h3{font-size: var(--font-3xl);margin: 0 0 var(--space-xl) var(--padding);}
	p{margin: 0 0 0 var(--padding);}
	p:last-of-type{margin: var(--space-xl) 0 40px var(--padding);}
	
	.meters{
		--color:var(--color-aqua);
		display:flex;flex-direction:column;gap:40px;
		margin:40px var(--padding);
		[meter]{position:relative;display:flex;align-items:center;background:black;
			border-radius:200em;border:5px solid black;}
		label{font-size:18px;display:inline-block;padding:2px 15px;margin:0;color:black;
			position:relative;z-index:2;width:150px;background:rgba(0,0,0,0.2);}
		i{display:block;position:absolute;top:0px;left:0;width:0%;height:100%;
			background:var(--color);z-index:1;overflow:hidden;text-align:right;
			border-radius:200em;font-size:16px;padding:3px 10px;color:rgba(0,0,0,0.7);}
	}
	
}

#givingback{
	.container{
		display:flex;flex-wrap:wrap;
		&>*{flex:1;min-width:300px;padding:0 5%;}
	}
	h3{font-size: var(--font-3xl);color:var(--color-aqua);}
	span{color:var(--color-coral);}

	[col2]{
		display:flex;flex-direction:column;
		padding:0;justify-content:center;
		[media]{
			overflow:hidden;border-radius:20px;margin-top:5%;
			img{object-fit:cover;width:100%;height:100%;}
		}
	}
}

#cta{
	.container{border-radius: var(--radius-xl);overflow: hidden;width: 90%;max-width: 1215px;}
	img{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;mix-blend-mode: overlay;z-index: -1;}
	div{position: relative; padding: var(--padding);}
	p{ margin: 0 0 var(--space-xl); }
}

/* FOOTER */
footer{
	margin-top: var(--space-6xl);
	.container{display: flex;justify-content:space-between;align-items: flex-start;}
	svg,div,img {width: 36%;margin-top: var(--space-sm);}
	@media (max-width:700px){
		& img,svg{display:none;}
		& .container{justify-content:center;}
		& .container>div:not(nav){display:none;}
	}
}

.nav-list {
	display: flex;
	list-style: none;
	align-items: center;
	gap: var(--space-lg);
	padding: var(--space-sm) var(--space-3xl);
	margin: 0 0 var(--space-md);
	background-color: var(--color-fnave);
	border-radius: var(--radius-pill); /* estilo cápsula */
	font-weight: 400;
	
	li{display: flex;align-items: center;margin: 0;padding: 0;}
	a{font-size: var(--font-md);text-decoration: none;font-weight: 400;}
}

.nav-extra {
  display: flex;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0 0 var(--space-3xl);
  gap: var(--space-xs); /* espacio alrededor del separador */
  
  li{position: relative;font-size: var(--font-sm);color: var(--color-primary);opacity: .64;}
  li:not(:last-child)::after {content: "·";margin-left: var(--space-xs);color: currentColor;opacity: 0.6;}
  a{ color: var(--color-primary); text-decoration: none; }
}

/* modal contact form */
[modal]{
  opacity:0;height:0;font-size:1rem;overflow:hidden;
  position:fixed;inset:0;background:var(--color-green);backdrop-filter: blur(10px);
  transition:all 0.5s ease;z-index:101;
  & [close]{
    position:fixed;top:5vw;right:5vw;text-decoration:none;z-index:101;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  [close]::before,
  [close]::after {
    width: 35px;
    background: var(--color-primary);
  }
      
  [close]::before {
    content: "";
    position: absolute;
    height: 3px;
    transform: translateY(0) rotate(45deg);
  }
  
  [close]::after {
    content: "";
    position: absolute;
    height: 1px;
    transform: translateY(0) rotate(-45deg);
  }
  & [wrap]{display:flex;align-items:center;flex-direction:column;justify-content:start;height:100%;overflow:hidden;overflow-y:auto;background: var(--gradiand-hero);}
  & img {object-fit:cover;width:100%;height:100%;position: absolute; mix-blend-mode: multiply; }
  & form{padding:max(30px, 5%);margin:auto;width:800px;max-width:100%;display:flex;flex-direction:column;gap:2rem;position:relative;opacity:0;transition:all 1s ease-in-out;}
  & h3{margin:0;font-size:var(--font-2xl);line-height:1.2;color:var(--color-aqua);}
  & label{display:flex;gap:1rem;background:rgba(0,0,0,0.8);outline: 1px solid black;transition:all 0.3s ease;}
  & label:focus-within{outline: 1px solid var(--color-aqua);}
  & label>span{padding:22px;min-width:10%;color:var(--color-aqua);}
  & input,textarea{border:0;background:none;color:var(--color-aqua);font-size:1.3rem;padding:20px;line-height:1.2;flex-grow:1;outline:none;}
  & textarea{height:200px;}
  & button{margin:auto;}
  & ::placeholder{color:rgb(from var(--color-aqua) r g b / 0.5);font-style:italic;}
  & [notice]{display:none;}
  & [thankyou]{opacity:0;transition:all 0.5s ease;margin:auto;z-index:101;text-align:center;}
  /* open */
  &[open]{
    opacity:1;height:auto;min-height:1px;
    & form{opacity:1;}
  }
  /* success */
  &[success]{
    [thankyou]{opacity:1;}
    form{opacity:0;display:none;}
  }
  &[error]{
    [notice]{display:block;}
    [notice] h3{color:var(--color-coral);font-size:1.6rem;}
  }
}