@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

:root{
	--black:#000000;
	--surface:#141414;
	--surface-2:#1a1a1a;
	--gray:#cccccc;
	--gray-soft:#f2f2f2;
	--gray-mid:#777777;
	--white:#ffffff;
	--mute:rgba(204,204,204,.68);
	--line:rgba(204,204,204,.18);
	--gold:#af8f64;
	--gold-deep:#88714b;

	/* Colores funcionales del mockup para servicios */
	--service-blue:#2050E0;
	--service-sand:#C9A96A;
	--service-orange:#E8792B;
	--service-green:#17976A;

	--maxw:1240px;
	--radius:5px;
	--radius-lg:26px;
	--shadow:0 24px 80px rgba(0,0,0,0.35);
	--transition:all .35s ease;
}

*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html{
	scroll-behavior:smooth;
}

body{
	margin:0;
	background:var(--black);
	color:var(--white);
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:300;
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

body::selection{
	background:var(--gold);
	color:var(--black);
}

img{
	max-width:100%;
	height:auto;
	display:block;
}

a{
	color:inherit;
	text-decoration:none;
}

p{
	margin:0 0 20px;
	font-size:1.05rem;
	line-height:1.75;
	color:inherit;
}

h1,
h2,
h3,
h4{
	margin:0;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:800;
	line-height:1.02;
	letter-spacing:-0.04em;
}

h1{
	font-size:clamp(3rem,8vw,7.4rem);
}

h2{
	font-size:clamp(2.2rem,5vw,5rem);
}

h3{
	font-size:1.45rem;
}

ul{
	margin:0;
	padding:0;
}

li{
	margin:0;
}

:focus-visible{
	outline:2px solid var(--gold);
	outline-offset:3px;
}

/* HEADER / MENU */

.site-header,
header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
	transition:var(--transition);
}

.site-header.large,
header.large{
	height:104px;
	background:linear-gradient(180deg,rgba(0,0,0,0.88),rgba(0,0,0,0.35),rgba(0,0,0,0));
}

.site-header.small,
header.small{
	height:74px;
	background:rgba(0,0,0,0.96);
	backdrop-filter:blur(18px);
	border-bottom:1px solid rgba(255,255,255,0.12);
	box-shadow:0 12px 40px rgba(0,0,0,0.35);
}

.main-nav,
header nav{
	width:100%;
	max-width:var(--maxw);
	height:100%;
	margin:0 auto;
	padding:0 32px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#logo_box,
#logo_img{
	display:flex;
	align-items:center;
}

.site-header.large #logo_img img,
header.large #logo_img img{
	width:auto;
	height:66px;
	transition:var(--transition);
}

.site-header.small #logo_img img,
header.small #logo_img img{
	width:auto;
	height:54px;
	transition:var(--transition);
}

ul.topnav{
	list-style:none;
	display:flex;
	align-items:center;
	gap:6px;
	margin:0;
	padding:0;
}

ul.topnav li{
	list-style:none;
	font-size:0.82rem;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:0.08em;
}

ul.topnav li a{
	display:block;
	padding:12px 16px;
	color:var(--white);
	border:1px solid transparent;
	border-radius:0;
	transition:var(--transition);
}

ul.topnav li a:hover{
	color:var(--gold);
	border-color:rgba(175,143,100,0.42);
	background:rgba(175,143,100,0.08);
}

ul.topnav li.icon{
	display:none;
}

ul.topnav li.icon a{
	font-size:1.3rem !important;
	line-height:1;
}

.nav-cta,
ul.topnav li.nav-cta a{
	border:1px solid var(--gold);
	color:var(--gold);
	padding:12px 18px;
	font-size:0.78rem;
	font-weight:800;
}

.nav-cta:hover,
ul.topnav li.nav-cta a:hover{
	background:var(--gold);
	color:#000;
}

/* LAYOUT */

main{
	width:100%;
	overflow:hidden;
}

section{
	position:relative;
	padding:105px 0;
}

.wrap,
.container{
	width:min(var(--maxw),calc(100% - 64px));
	margin:0 auto;
	position:relative;
	z-index:2;
}

.section{
	padding:105px 0;
}

.section-dark{
	background:
		radial-gradient(circle at 12% 8%,rgba(175,143,100,0.18),transparent 34%),
		linear-gradient(135deg,#000000 0%,#141414 100%);
	color:var(--white);
}

.section-light{
	background:var(--gray-soft);
	color:var(--black);
}

.section-gold{
	background:linear-gradient(135deg,var(--gold),var(--gold-deep));
	color:var(--black);
}

.section-contact{
	background:
		radial-gradient(circle at 80% 10%,rgba(175,143,100,0.32),transparent 30%),
		linear-gradient(135deg,#000000,#141414);
	color:var(--white);
}

#costo,
#solucion,
#metodologia,
#servicios,
#resultados,
#nosotros,
#contacto,
#casos{
	scroll-margin-top:90px;
}

.eyebrow{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin:0 0 18px;
	color:var(--gold);
	font-size:0.82rem;
	font-weight:800;
	letter-spacing:0.16em;
	text-transform:uppercase;
}

.eyebrow::before{
	content:"";
	display:block;
	width:38px;
	height:1px;
	background:currentColor;
}

/* BUTTONS */

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:52px;
	padding:14px 28px;
	border-radius:0;
	font-size:0.82rem;
	font-weight:800;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:0.08em;
	cursor:pointer;
	border:1px solid transparent;
	transition:var(--transition);
}

.btn-primary,
.btn-solid{
	background:var(--gold);
	color:var(--black);
	border-color:var(--gold);
}

.btn-primary:hover,
.btn-solid:hover{
	background:var(--white);
	border-color:var(--white);
	color:var(--black);
	transform:translateY(-2px);
}

.btn-secondary,
.btn-ghost{
	background:rgba(255,255,255,0.06);
	color:var(--white);
	border-color:rgba(255,255,255,0.24);
}

.btn-secondary:hover,
.btn-ghost:hover{
	background:rgba(255,255,255,0.14);
	border-color:rgba(255,255,255,0.44);
	transform:translateY(-2px);
}

.btn-dark{
	background:var(--black);
	color:var(--white);
	border-color:var(--black);
}

.btn-dark:hover{
	background:var(--white);
	color:var(--black);
	border-color:var(--white);
	transform:translateY(-2px);
}

.center{
	text-align:center;
	margin-top:46px;
}

/* HERO */

.hero{
	min-height:calc(100vh - 78px);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:118px 0 70px;
	background:var(--black);
	color:var(--white);
	overflow:hidden;
}

.hero::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(ellipse 60% 80% at 78% 20%,rgba(175,143,100,.16),transparent 62%),
		radial-gradient(ellipse 70% 60% at 12% 92%,rgba(175,143,100,.07),transparent 60%);
	pointer-events:none;
	z-index:1;
}

.hero-media{
	position:absolute;
	inset:0;
	z-index:0;
	background:var(--black);
}

.hero-media video{
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:0.34;
	filter:grayscale(1) contrast(1.18);
}

.hero-overlay{
	position:absolute;
	inset:0;
	z-index:1;
	background:
		radial-gradient(circle at 72% 30%,rgba(175,143,100,0.22),transparent 34%),
		linear-gradient(90deg,rgba(0,0,0,0.92) 0%,rgba(0,0,0,0.70) 44%,rgba(0,0,0,0.25) 100%),
		linear-gradient(180deg,rgba(0,0,0,0.25),rgba(0,0,0,0.92));
}

.hero .wrap,
.hero-content{
	position:relative;
	z-index:2;
}

.hero-grid{
	display:grid;
	grid-template-columns:1.32fr .68fr;
	gap:70px;
	align-items:end;
}

.hero-logo{
	display:none;
}

.hero-h,
.hero h1{
	width:min(920px,100%);
	max-width:13.5ch;
	margin-bottom:26px;
	color:var(--white);
	font-size:clamp(3.6rem,5.9vw,6.2rem);
	font-weight:800;
	line-height:.96;
	letter-spacing:-0.055em;
}

.hero-h em,
.hero h1 em{
	font-style:normal;
	color:var(--gold);
}

.hero-sub,
.hero-text{
	width:min(760px,100%);
	max-width:52ch;
	margin-top:34px;
	margin-bottom:36px;
	color:var(--mute);
	font-size:clamp(1.05rem,1.6vw,1.35rem);
	font-weight:300;
	line-height:1.55;
}

.hero-actions{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin-top:46px;
}

.hero-side{
	border-left:1px solid var(--line);
	padding-left:34px;
	padding-bottom:8px;
}

.hero-side p{
	font-size:14px;
	color:var(--mute);
	line-height:1.65;
}

.hero-side strong{
	display:block;
	font-weight:800;
	font-size:2.4rem;
	color:var(--gold);
	letter-spacing:-0.02em;
	margin-bottom:6px;
}

/* COSTO / CALCULADORA */

.costo{
	background:var(--surface);
	border-top:1px solid var(--line);
	min-height:auto;
}

.costo .wrap{
	min-height:520px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.costo-head{
	max-width:900px;
}

.mega,
h2.mega{
	font-size:clamp(3.1rem,5.2vw,5.4rem);
	font-weight:800;
	letter-spacing:-0.055em;
	line-height:.98;
}

.costo-q{
	font-size:clamp(1.25rem,2vw,1.75rem);
	color:var(--gold);
	margin-top:26px;
	font-weight:300;
	max-width:26ch;
	line-height:1.35;
}

.calc-launch{
	margin-top:44px;
}

.calc{
	margin-top:46px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	background:var(--black);
	overflow:hidden;
	max-height:0;
	opacity:0;
	transition:max-height .6s ease,opacity .4s ease;
}

.calc.open{
	max-height:900px;
	opacity:1;
}

.calc-in{
	display:grid;
	grid-template-columns:1fr 1.06fr;
}

.calc-inputs{
	padding:46px;
}

.calc-inputs label{
	display:block;
	font-size:12px;
	font-weight:700;
	color:var(--mute);
	margin-bottom:11px;
	letter-spacing:.03em;
}

.field{
	margin-bottom:34px;
}

.field input[type=number]{
	width:100%;
	background:transparent;
	border:0;
	border-bottom:1px solid var(--line);
	color:var(--white);
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-weight:800;
	font-size:2.1rem;
	padding:6px 0;
	letter-spacing:-.02em;
}

.field input[type=number]:focus{
	border-bottom-color:var(--gold);
	outline:none;
}

.field input[type=range]{
	width:100%;
	accent-color:var(--gold);
	margin-top:14px;
}

.rot-val{
	font-weight:800;
	font-size:2.1rem;
	color:var(--white);
}

.rot-val span{
	font-size:1rem;
	color:var(--mute);
	font-weight:400;
	margin-left:8px;
}

.calc-out{
	padding:46px;
	background:linear-gradient(150deg,rgba(175,143,100,.13),rgba(175,143,100,.02));
	border-left:1px solid var(--line);
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.out-label{
	font-size:12.5px;
	color:var(--mute);
	font-weight:500;
	margin-bottom:8px;
}

.out-big{
	font-weight:800;
	font-size:clamp(2.2rem,4.4vw,3.5rem);
	color:#d66a5e;
	letter-spacing:-.035em;
	line-height:1;
}

.out-div{
	height:1px;
	background:var(--line);
	margin:32px 0;
}

.out-big.save{
	color:var(--gold);
}

.out-foot{
	font-size:12px;
	color:var(--mute);
	margin-top:26px;
	line-height:1.6;
}

.calc-cta{
	margin-top:26px;
}

/* PROBLEMA / STATS */

.stats-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0;
	margin-top:76px;
	border-top:1px solid var(--line);
}

.stat{
	padding:56px 40px;
	border-right:1px solid var(--line);
}

.stat:last-child{
	border-right:0;
}

.stat .n{
	font-weight:800;
	font-size:clamp(3.6rem,7vw,5.6rem);
	letter-spacing:-.05em;
	line-height:.9;
	display:block;
	color:var(--gold);
}

.stat p{
	color:var(--mute);
	font-size:1.02rem;
	margin-top:20px;
	max-width:22ch;
	line-height:1.45;
}

.donut{
	margin-bottom:30px;
}

.fuente{
	font-size:11.5px;
	color:rgba(255,255,255,.38);
	margin-top:30px;
}

/* SOLUCIÓN */

.solucion{
	background:var(--surface);
	border-top:1px solid var(--line);
	text-align:center;
	min-height:auto;
}

.sol-h,
.solucion h2.sol-h{
	font-size:clamp(2.2rem,4.1vw,4.3rem);
	max-width:22ch;
	margin:0 auto;
	font-weight:800;
	line-height:1.06;
}

.sol-h b,
.solucion h2.sol-h b{
	color:var(--gold);
	font-weight:800;
}

.sol-eq{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:clamp(18px,4vw,54px);
	margin:54px auto 0;
	flex-wrap:wrap;
}

/* CLIMB / METODOLOGÍA */

#metodologia{
	padding-top:105px;
}

.climb-grid{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:16px;
	margin-top:52px;
}

.climb-card{
	position:relative;
	min-height:260px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:32px 28px;
	overflow:hidden;
	transition:border-color .3s,transform .3s,background .3s;
}

.climb-card:hover{
	border-color:var(--gold);
	transform:translateY(-5px);
	background:var(--surface-2);
}

.climb-card .letter,
.climb-card span{
	display:block;
	margin-bottom:22px;
	color:var(--gold);
	font-size:4.1rem;
	font-weight:800;
	line-height:1;
	letter-spacing:-0.04em;
}

.climb-card h4,
.climb-card h3{
	margin-bottom:12px;
	color:var(--white);
	font-size:1.12rem;
	letter-spacing:-.01em;
}

.climb-card p{
	position:relative;
	z-index:2;
	color:var(--mute);
	font-size:.9rem;
	line-height:1.6;
}

.busca{
	margin-top:70px;
	border:1px solid var(--line);
	border-radius:var(--radius);
	display:grid;
	grid-template-columns:.85fr 2fr;
	overflow:hidden;
}

.busca-l{
	background:var(--gold);
	color:#000;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	font-size:1.55rem;
	padding:44px 30px;
	text-align:center;
	letter-spacing:-.02em;
}

.busca-r{
	display:grid;
	grid-template-columns:repeat(3,1fr);
}

.busca-item{
	padding:44px 32px;
	border-right:1px solid var(--line);
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:12px;
}

.busca-item:last-child{
	border-right:0;
}

.busca-item h4{
	font-size:1.6rem;
	color:var(--white);
}

.busca-item p{
	font-size:13px;
	color:var(--mute);
	line-height:1.5;
}

/* SERVICIOS */

.servicios{
	background:var(--surface);
	border-top:1px solid var(--line);
	padding-top:105px;
	padding-bottom:105px;
}

.serv-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
	margin-top:54px;
}

.serv{
	border:1px solid rgba(255,255,255,.10);
	cursor:pointer;
	text-align:left;
	color:inherit;
	padding:38px 30px;
	min-height:340px;
	border-radius:4px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	transition:transform .3s ease,filter .3s ease,border-color .3s ease;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
}

.serv:hover{
	transform:translateY(-7px);
	filter:brightness(1.04);
	border-color:rgba(255,255,255,.18);
}

.serv .kicker{
	font-size:12px;
	font-weight:700;
	letter-spacing:.09em;
	opacity:1;
	line-height:1.4;
	text-transform:none;
}

.serv h3{
	font-size:clamp(1.55rem,2vw,2rem);
	margin-top:20px;
	letter-spacing:-.025em;
	line-height:1.05;
	font-weight:800;
}

.serv .more{
	font-size:12px;
	font-weight:700;
	margin-top:26px;
	opacity:1;
	text-transform:none;
	letter-spacing:.04em;
}

/* Colores del mockup para "Qué ofrecemos" */

.s-azul{
	background:var(--service-blue) !important;
	color:#ffffff !important;
	border:1px solid transparent !important;
}

.s-oro{
	background:var(--service-sand) !important;
	color:#000000 !important;
	border:1px solid transparent !important;
}

.s-naranja{
	background:var(--service-orange) !important;
	color:#000000 !important;
	border:1px solid transparent !important;
}

.s-verde{
	background:var(--service-green) !important;
	color:#ffffff !important;
	border:1px solid transparent !important;
}

.s-azul h3,
.s-verde h3{
	color:#ffffff !important;
}

.s-oro h3,
.s-naranja h3{
	color:#000000 !important;
}

.s-azul .kicker,
.s-azul .more,
.s-verde .kicker,
.s-verde .more{
	color:rgba(255,255,255,.88) !important;
}

.s-oro .kicker,
.s-oro .more,
.s-naranja .kicker,
.s-naranja .more{
	color:rgba(0,0,0,.82) !important;
}

/* MODAL */

.modal-bg{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.78);
	backdrop-filter:blur(6px);
	z-index:2000;
	display:none;
	align-items:center;
	justify-content:center;
	padding:26px;
}

.modal-bg.open{
	display:flex;
}

.modal{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--radius);
	max-width:760px;
	width:100%;
	max-height:86vh;
	overflow-y:auto;
	position:relative;
}

.modal-top{
	padding:44px 46px 34px;
	border-bottom:1px solid var(--line);
}

.modal-tag{
	display:inline-block;
	font-size:11px;
	font-weight:800;
	letter-spacing:.06em;
	padding:6px 13px;
	border-radius:0;
	margin-bottom:18px;
	text-transform:uppercase;
}

.modal-top h3{
	font-size:2.05rem;
	letter-spacing:-.03em;
}

.modal-top p{
	color:var(--mute);
	margin-top:14px;
	font-size:1rem;
	max-width:58ch;
}

.modal-body{
	padding:38px 46px 46px;
}

.modal-body h5{
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:700;
	color:var(--mute);
	letter-spacing:.04em;
	margin-bottom:18px;
	text-transform:uppercase;
}

.mrow{
	display:flex;
	gap:16px;
	padding:16px 0;
	border-bottom:1px solid var(--line);
}

.mrow:last-child{
	border-bottom:0;
}

.mrow .idx{
	font-weight:800;
	color:var(--gold);
	font-size:.95rem;
	min-width:26px;
	padding-top:2px;
}

.mrow strong{
	display:block;
	font-weight:700;
	font-size:1rem;
	margin-bottom:4px;
}

.mrow span{
	color:var(--mute);
	font-size:14px;
	line-height:1.5;
}

.pill-row{
	display:flex;
	flex-wrap:wrap;
	gap:9px;
	margin-top:8px;
}

.pill{
	border:1px solid var(--line);
	border-radius:100px;
	padding:8px 15px;
	font-size:12.5px;
	color:var(--mute);
}

.modal-x{
	position:absolute;
	top:18px;
	right:20px;
	background:transparent;
	border:1px solid var(--line);
	color:var(--white);
	width:34px;
	height:34px;
	border-radius:50%;
	cursor:pointer;
	font-size:17px;
	line-height:1;
}

.modal-x:hover{
	border-color:var(--white);
}

/* COMUNIDAD */

.marquee{
	overflow:hidden;
	margin-top:60px;
	position:relative;
}

.marquee::before,
.marquee::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	width:130px;
	z-index:2;
	pointer-events:none;
}

.marquee::before{
	left:0;
	background:linear-gradient(90deg,var(--black),transparent);
}

.marquee::after{
	right:0;
	background:linear-gradient(270deg,var(--black),transparent);
}

.track{
	display:flex;
	gap:14px;
	width:max-content;
	animation:slide 44s linear infinite;
}

.track.rev{
	animation-direction:reverse;
	animation-duration:52s;
	margin-top:14px;
}

.marquee:hover .track{
	animation-play-state:paused;
}

.chip{
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:22px 34px;
	font-weight:800;
	font-size:1.02rem;
	color:rgba(255,255,255,.72);
	white-space:nowrap;
	background:var(--surface);
	letter-spacing:-.01em;
}

@keyframes slide{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}

@media(prefers-reduced-motion:reduce){
	.track{
		animation:none;
	}
}

/* RESULTADOS */

.resultados{
	background:var(--surface);
	border-top:1px solid var(--line);
	padding-top:105px;
}

.res-tabs{
	display:flex;
	gap:0;
	margin-top:44px;
	border-bottom:1px solid var(--line);
	flex-wrap:wrap;
}

.tab{
	background:transparent;
	border:0;
	border-bottom:2px solid transparent;
	color:var(--mute);
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:700;
	padding:15px 26px;
	cursor:pointer;
	transition:color .25s,border-color .25s;
	margin-bottom:-1px;
	text-transform:uppercase;
	letter-spacing:.04em;
}

.tab.on{
	color:var(--white);
	border-bottom-color:var(--gold);
}

.panel{
	display:none;
	padding-top:44px;
}

.panel.on{
	display:block;
}

.res-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}

.res-card{
	background:var(--black);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:32px 28px;
	min-height:190px;
}

.res-card .n{
	font-weight:800;
	font-size:clamp(2.8rem,4vw,3.8rem);
	color:var(--gold);
	letter-spacing:-.045em;
	line-height:1;
	display:block;
}

.res-card p{
	font-size:13.5px;
	color:var(--mute);
	margin-top:16px;
	line-height:1.45;
}

.res-sub{
	font-size:12px;
	color:var(--gold);
	font-weight:800;
	margin-bottom:24px;
	letter-spacing:.05em;
	text-transform:uppercase;
}

.res-block+.res-block{
	margin-top:48px;
}

.prensa{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}

.nota{
	background:var(--black);
	border:1px solid var(--line);
	border-radius:var(--radius);
	padding:30px 26px;
	display:flex;
	flex-direction:column;
	gap:14px;
	min-height:220px;
}

.nota .medio{
	font-weight:800;
	font-size:.95rem;
	color:var(--gold);
	letter-spacing:.02em;
}

.nota p{
	font-size:14px;
	line-height:1.45;
	color:rgba(255,255,255,.86);
	font-weight:400;
}

.nota .fecha{
	margin-top:auto;
	font-size:11.5px;
	color:var(--mute);
}

/* CREENCIA */

.creencia{
	text-align:center;
	padding:150px 0;
}

.creencia p{
	font-weight:800;
	font-size:clamp(1.7rem,4vw,3.1rem);
	letter-spacing:-.03em;
	line-height:1.14;
	max-width:20ch;
	margin:0 auto;
}

.creencia small{
	display:block;
	margin-top:32px;
	font-size:12.5px;
	color:var(--mute);
	letter-spacing:.04em;
	text-transform:uppercase;
}

/* NOSOTROS */

.nosotros{
	background:var(--surface);
	border-top:1px solid var(--line);
	padding-top:105px;
	padding-bottom:105px;
}

.nos-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center;
}

.nosotros h2.mega,
.contacto h2.mega{
	font-size:clamp(3rem,4.9vw,5.2rem) !important;
	line-height:.98;
	max-width:10.5ch;
}

.nos-grid p{
	color:rgba(204,204,204,.72);
	margin-bottom:20px;
	font-size:1rem;
	max-width:56ch;
	line-height:1.75;
}

.team{
	display:grid;
	gap:12px;
	margin-top:14px;
}

.member{
	display:flex;
	gap:20px;
	align-items:center;
	border:1px solid rgba(204,204,204,.16);
	border-radius:var(--radius);
	padding:22px 24px;
	background:#000;
}

.avatar{
	width:52px;
	height:52px;
	border-radius:50%;
	flex-shrink:0;
	background:var(--gold);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:800;
	color:#000;
	font-size:1rem;
}

.member strong{
	display:block;
	font-size:1.05rem;
	font-weight:700;
}

.member span{
	font-size:13px;
	color:var(--mute);
}

.bio-list{
	margin-top:22px;
	display:grid;
	gap:11px;
}

.bio-list li{
	list-style:none;
	color:var(--mute);
	font-size:14px;
	padding-left:20px;
	position:relative;
	line-height:1.5;
}

.bio-list li::before{
	content:"";
	position:absolute;
	left:0;
	top:9px;
	width:7px;
	height:1px;
	background:var(--gold);
}

/* CONTACTO */

.contacto{
	border-top:1px solid var(--line);
	background:var(--black);
	padding-top:105px;
	padding-bottom:105px;
}

.cont-grid,
.contact-layout{
	display:grid;
	grid-template-columns:1fr 1.05fr;
	gap:80px;
	align-items:center;
}

.form,
.contact-form{
	display:grid;
	gap:20px;
}

.form input,
.form textarea,
.contact-form input,
.contact-form textarea{
	width:100%;
	background:transparent;
	border:0;
	border-bottom:1px solid rgba(204,204,204,.36);
	color:#ffffff;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
	font-size:15px;
	padding:13px 0;
	font-weight:300;
	outline:none;
}

.form input::placeholder,
.form textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder{
	color:rgba(204,204,204,.55);
}

.form input:focus,
.form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus{
	border-bottom-color:var(--gold);
}

.form textarea,
.contact-form textarea{
	resize:vertical;
	min-height:80px;
}

.form-row{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}

.check,
.privacy{
	display:flex !important;
	gap:11px !important;
	align-items:center;
	font-size:13px;
	color:rgba(204,204,204,.68);
	margin-top:6px;
}

.check input,
.privacy input{
	width:auto;
	accent-color:var(--gold);
}

.privacy span{
	text-transform:none !important;
	letter-spacing:0 !important;
	font-size:0.95rem !important;
	font-weight:500 !important;
}

.cont-info{
	border-left:1px solid var(--line);
	padding-left:40px;
}

.cont-info .dato{
	margin-bottom:26px;
}

.cont-info .dato span{
	display:block;
	font-size:11.5px;
	color:rgba(204,204,204,.52);
	margin-bottom:5px;
	letter-spacing:.03em;
	text-transform:uppercase;
}

.cont-info .dato a,
.cont-info .dato strong{
	font-size:1.02rem;
	font-weight:600;
	color:#ffffff;
}

.form-btn{
	width:100%;
	border:none;
	font-family:'Open Sans', Arial, Helvetica, sans-serif;
}

footer{
	border-top:1px solid var(--line);
	padding:40px 0;
	font-size:12.5px;
	color:rgba(204,204,204,.55);
	background:var(--black);
}

.foot-in{
	display:flex;
	justify-content:space-between;
	gap:20px;
	flex-wrap:wrap;
}

/* LEGACY COMPATIBILITY */

#box_video,
#box_text,
#white,
#black,
#gold,
#white-txt,
#black-txt,
#gold-txt{
	width:auto;
	height:auto;
	padding:0;
	background:none;
}

/* RESPONSIVE */

@media screen and (max-width:1180px){
	.climb-grid{
		grid-template-columns:repeat(3,1fr);
	}

	.serv-grid,
	.services-grid,
	.news-grid{
		grid-template-columns:repeat(2,1fr);
	}

	.logo-cloud{
		grid-template-columns:repeat(3,1fr);
	}

	.prensa,
	.res-grid{
		grid-template-columns:repeat(2,1fr);
	}
}

@media screen and (max-width:1100px){
	.hero-grid,
	.nos-grid,
	.cont-grid{
		grid-template-columns:1fr;
		gap:48px;
	}

	h1.hero-h{
		max-width:15ch;
	}

	.nosotros h2.mega,
	.contacto h2.mega{
		max-width:14ch;
	}
}

@media screen and (max-width:980px){
	.climb-grid{
		grid-template-columns:repeat(2,1fr);
	}
}

@media screen and (max-width:960px){
	.site-header.large,
	.site-header.small,
	header.large,
	header.small{
		height:74px;
		background:rgba(0,0,0,0.92);
		backdrop-filter:blur(18px);
		border-bottom:1px solid rgba(255,255,255,0.12);
	}

	.main-nav,
	header nav{
		padding:0 24px;
	}

	.site-header.large #logo_img img,
	.site-header.small #logo_img img,
	header.large #logo_img img,
	header.small #logo_img img{
		height:54px;
	}

	ul.topnav li:not(.icon){
		display:none;
	}

	ul.topnav li.icon{
		display:block;
	}

	ul.topnav{
		position:relative;
	}

	ul.topnav.responsive{
		position:absolute;
		top:70px;
		right:24px;
		width:min(320px,calc(100vw - 48px));
		display:grid;
		gap:0;
		padding:12px;
		background:rgba(0,0,0,0.96);
		border:1px solid rgba(255,255,255,0.12);
		border-radius:0;
		box-shadow:0 24px 70px rgba(0,0,0,0.55);
	}

	ul.topnav.responsive li{
		display:block;
		width:100%;
	}

	ul.topnav.responsive li.icon{
		position:absolute;
		top:-58px;
		right:0;
	}

	ul.topnav.responsive li a{
		width:100%;
		border-radius:0;
		padding:14px 16px;
		text-align:left;
	}

	section,
	.section{
		padding:90px 0;
	}

	.hero{
		min-height:auto;
		padding:140px 0 90px;
	}

	.hero-grid,
	.impact-layout,
	.about-layout,
	.contact-layout,
	.cont-grid,
	.nos-grid{
		grid-template-columns:1fr;
		gap:44px;
	}

	.hero-side{
		border-left:0;
		border-top:1px solid var(--line);
		padding-left:0;
		padding-top:28px;
	}

	.calc-in,
	.busca{
		grid-template-columns:1fr;
	}

	.calc-out{
		border-left:0;
		border-top:1px solid var(--line);
	}

	.calc.open{
		max-height:1400px;
	}

	.busca-r{
		grid-template-columns:1fr;
	}

	.busca-item{
		border-right:0;
		border-bottom:1px solid var(--line);
	}

	.cont-info{
		border-left:0;
		border-top:1px solid var(--line);
		padding-left:0;
		padding-top:34px;
	}
}

@media screen and (max-width:860px){
	.stats-grid{
		grid-template-columns:1fr;
	}

	.stat{
		border-right:0;
		border-bottom:1px solid var(--line);
	}
}

@media screen and (max-width:760px){
	section,
	.hero,
	.costo,
	.solucion,
	.servicios,
	.resultados,
	.nosotros,
	.contacto{
		padding-top:78px;
		padding-bottom:78px;
	}

	h1.hero-h{
		font-size:clamp(3rem,14vw,4.7rem);
	}

	h2.mega,
	.nosotros h2.mega,
	.contacto h2.mega{
		font-size:clamp(2.6rem,12vw,4rem) !important;
		max-width:100%;
	}

	.serv{
		min-height:240px;
	}

	.res-card{
		min-height:auto;
	}

	.costo .wrap{
		min-height:auto;
	}
}

@media screen and (max-width:720px){
	body{
		font-size:15px;
	}

	.wrap,
	.container{
		width:min(100% - 36px,1180px);
	}

	.main-nav,
	header nav{
		padding:0 18px;
	}

	.hero{
		padding:120px 0 70px;
	}

	.hero-h,
	.hero h1{
		font-size:clamp(3rem,14vw,4.8rem);
	}

	.hero-sub,
	.hero-text{
		font-size:1.05rem;
	}

	.hero-actions{
		display:grid;
		width:100%;
	}

	.btn{
		width:100%;
	}

	.climb-grid,
	.serv-grid,
	.services-grid,
	.news-grid,
	.logo-cloud,
	.res-grid,
	.prensa{
		grid-template-columns:1fr;
	}

	.climb-card{
		min-height:auto;
	}

	.climb-card span,
	.climb-card .letter{
		margin-bottom:28px;
		font-size:4.6rem;
	}

	.serv{
		min-height:230px;
	}

	.form-row{
		grid-template-columns:1fr;
	}

	.modal-top,
	.modal-body{
		padding-left:26px;
		padding-right:26px;
	}
}

@media screen and (max-width:480px){
	.site-header.large #logo_img img,
	.site-header.small #logo_img img,
	header.large #logo_img img,
	header.small #logo_img img{
		height:46px;
	}

	ul.topnav.responsive{
		right:18px;
		width:calc(100vw - 36px);
	}

	.metric{
		padding:26px;
	}
}

/* =========================================================
   AJUSTE FINAL HOME / HERO
   ========================================================= */

.hero{
	min-height:calc(100vh - 78px);
	padding-top:105px;
	padding-bottom:80px;
	align-items:center;
}

.hero-grid{
	grid-template-columns:1.18fr .82fr;
	gap:64px;
	align-items:end;
}

.hero-h,
.hero h1{
	max-width:15.8ch;
	font-size:clamp(3.2rem,5.2vw,5.45rem);
	line-height:1.01;
	letter-spacing:-0.052em;
	margin-bottom:24px;
}

.hero-sub,
.hero-text{
	max-width:50ch;
	font-size:clamp(1rem,1.25vw,1.18rem);
	line-height:1.6;
	margin-top:24px;
	margin-bottom:30px;
	color:rgba(204,204,204,.72);
}

.hero-actions{
	margin-top:34px;
}

.hero-side{
	padding-left:32px;
	padding-bottom:18px;
}

.hero-side strong{
	font-size:2.25rem;
}

.hero-side p{
	max-width:30ch;
	font-size:13px;
}

/* En pantallas grandes, evitar que el hero se sienta aplastado abajo */
@media screen and (min-width:1280px){
	.hero-h,
	.hero h1{
		max-width:16.5ch;
		font-size:clamp(3.4rem,5vw,5.6rem);
	}
}

/* En laptop / navegador con poca altura */
@media screen and (max-height:820px) and (min-width:900px){
	.hero{
		padding-top:92px;
		padding-bottom:58px;
	}

	.hero-h,
	.hero h1{
		font-size:clamp(3rem,4.8vw,5.1rem);
		line-height:.99;
	}

	.hero-sub,
	.hero-text{
		margin-top:20px;
		margin-bottom:24px;
		font-size:1rem;
	}

	.hero-actions{
		margin-top:26px;
	}
}

/* =========================================================
   FIX LOGO HEADER
   ========================================================= */

.site-header .main-nav,
header .main-nav,
header nav{
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:32px;
}

.brand,
#logo_box,
#logo_img{
	display:flex !important;
	align-items:center !important;
	flex-shrink:0;
}

#logo_box{
	min-width:150px;
}

#logo_img img{
	display:block !important;
	width:auto !important;
	height:58px !important;
	opacity:1 !important;
	visibility:visible !important;
}

.site-header.large #logo_img img,
header.large #logo_img img{
	height:62px !important;
}

.site-header.small #logo_img img,
header.small #logo_img img{
	height:50px !important;
}

ul.topnav{
	margin-left:auto !important;
}

/* En desktop, evita que el menú se coma el logo */
@media screen and (min-width:961px){
	.main-nav,
	header nav{
		padding-left:32px !important;
		padding-right:32px !important;
	}

	ul.topnav{
		display:flex !important;
		align-items:center !important;
		justify-content:flex-end !important;
	}
}

/* =========================================================
   CORRECCIÓN FINAL HEADER / LOGO / HOME
   ========================================================= */

.site-header .main-nav,
header .main-nav,
header nav{
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:28px !important;
}

.brand{
	display:flex !important;
	align-items:center !important;
	justify-content:flex-start !important;
	flex:0 0 auto !important;
	min-width:176px !important;
	height:100% !important;
	opacity:1 !important;
	visibility:visible !important;
}

.brand img{
	display:block !important;
	width:auto !important;
	height:62px !important;
	max-width:176px !important;
	opacity:1 !important;
	visibility:visible !important;
}

.site-header.small .brand img,
header.small .brand img{
	height:50px !important;
	max-width:150px !important;
}

ul.topnav{
	margin-left:auto !important;
	justify-content:flex-end !important;
}

/* Ajuste fino del home para que el titular no se rompa de más */
.hero-grid{
	grid-template-columns:1.22fr .78fr !important;
	gap:60px !important;
}

.hero-h,
.hero h1{
	max-width:16.3ch !important;
	font-size:clamp(3.15rem,4.95vw,5.45rem) !important;
	line-height:1.01 !important;
	letter-spacing:-0.052em !important;
}

.hero-sub,
.hero-text{
	max-width:54ch !important;
}

@media screen and (max-width:1180px){
	.brand{
		min-width:145px !important;
	}

	.brand img{
		height:52px !important;
		max-width:145px !important;
	}

	ul.topnav li{
		font-size:.72rem !important;
		letter-spacing:.07em !important;
	}

	ul.topnav li a{
		padding:10px 10px !important;
	}
}

@media screen and (max-width:960px){
	.brand{
		min-width:130px !important;
	}

	.brand img{
		height:48px !important;
		max-width:130px !important;
	}

	.hero-grid{
		grid-template-columns:1fr !important;
	}
}

/* =========================================================
   FIX HEADER DIFUMINADO + LOGO + HOME
   ========================================================= */

/* Header con espejo / degradado difuminado */
.site-header,
header.site-header{
	position:fixed !important;
	top:0;
	left:0;
	width:100%;
	z-index:999;
}

.site-header.large{
	height:118px !important;
	background:
		linear-gradient(
			180deg,
			rgba(0,0,0,0.96) 0%,
			rgba(0,0,0,0.82) 38%,
			rgba(0,0,0,0.42) 72%,
			rgba(0,0,0,0.00) 100%
		) !important;
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	border-bottom:0 !important;
	box-shadow:none !important;
}

.site-header.small{
	height:78px !important;
	background:rgba(0,0,0,0.94) !important;
	backdrop-filter:blur(18px);
	-webkit-backdrop-filter:blur(18px);
	border-bottom:1px solid rgba(204,204,204,.16) !important;
	box-shadow:0 14px 44px rgba(0,0,0,.42) !important;
}

/* Navegación */
.site-header .main-nav,
header .main-nav,
header nav{
	height:100% !important;
	max-width:1240px !important;
	margin:0 auto !important;
	padding:0 32px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:space-between !important;
	gap:34px !important;
}

/* Logo directo dentro de .brand */
.brand{
	display:flex !important;
	align-items:center !important;
	flex-shrink:0 !important;
	width:150px !important;
	min-width:150px !important;
	position:relative !important;
	z-index:3 !important;
}

.brand img{
	display:block !important;
	width:auto !important;
	height:62px !important;
	opacity:1 !important;
	visibility:visible !important;
}

.site-header.small .brand img{
	height:50px !important;
}

/* Menú */
ul.topnav{
	margin-left:auto !important;
	display:flex !important;
	align-items:center !important;
	justify-content:flex-end !important;
	gap:6px !important;
	position:relative !important;
	z-index:3 !important;
}

ul.topnav li a{
	color:#ffffff !important;
}

/* Evita que el hero se meta debajo del logo */
.hero{
	padding-top:145px !important;
	min-height:calc(100vh - 0px) !important;
}

.hero .wrap{
	padding-top:20px !important;
}

.hero-grid{
	align-items:end !important;
}

/* Ajuste fino del titular para que no choque con header */
.hero-h,
.hero h1{
	font-size:clamp(3.1rem,5vw,5.25rem) !important;
	max-width:16.2ch !important;
	line-height:1.01 !important;
	margin-top:0 !important;
}

/* En pantallas bajas, compacta sin subir demasiado */
@media screen and (max-height:820px) and (min-width:900px){
	.site-header.large{
		height:104px !important;
	}

	.hero{
		padding-top:118px !important;
		padding-bottom:58px !important;
	}

	.hero-h,
	.hero h1{
		font-size:clamp(2.9rem,4.7vw,5rem) !important;
		max-width:16.8ch !important;
	}

	.brand img{
		height:56px !important;
	}
}

/* Responsive */
@media screen and (max-width:960px){
	.site-header.large,
	.site-header.small{
		height:74px !important;
		background:rgba(0,0,0,.94) !important;
		backdrop-filter:blur(18px);
		-webkit-backdrop-filter:blur(18px);
		border-bottom:1px solid rgba(204,204,204,.16) !important;
	}

	.brand{
		width:120px !important;
		min-width:120px !important;
	}

	.brand img{
		height:48px !important;
	}

	.hero{
		padding-top:115px !important;
	}
}