/* RESET */
*,
*::before,
*::after{
	box-sizing:border-box;
}

html{
	-webkit-text-size-adjust:100%;
	text-size-adjust:100%;
	scroll-behavior:smooth;
	scroll-padding-top:var(--nav-sticky);
}

body{
	margin:0;
}

img,
video,
svg,
canvas{
	display:block;
	max-width:100%;
}

input,
button,
textarea,
select{
	font:inherit;
	color:inherit;
}

button{
	cursor:pointer;
}

/* BASE */
:root{
	--brand:#d63032;
	--brand-2:#be2c2c;

	--ink:rgba(15,23,42,.92);
	--muted:rgba(15,23,42,.62);

	--white:rgba(255,255,255,.96);
	--glass:rgba(255,255,255,.78);
	--bd:rgba(255,255,255,.18);

	--wrap:1060px;
	--r:18px;
	--r2:999px;

	--sh:0 18px 60px rgba(0,0,0,.18);
	--sh2:0 10px 28px rgba(0,0,0,.14);

	--head-space:86em;
	--nav-sticky:86px;
}

body{
	font-family:'Open Sans', sans-serif;
	font-weight:400;
	font-size:10px;
	color:#fff;
	line-height:1.55;
	background-color:#fff;
	margin-top:var(--head-space);
}

a{
	color:#fff;
	text-decoration:none;
}

a:hover{
	text-decoration:underline;
}

strong{
	font-family:'Roboto', sans-serif;
	font-weight:800;
}

h1{ font-size:1em; }

h1,
h2,
h3,
h4,
h5{
	line-height:1.18;
	font-family:'Roboto', sans-serif;
	font-weight:900;
	letter-spacing:.01em;
	text-transform:none;
}

h2{
	font-size:2.35em;
	margin:0 0 .25em 0;
}

h3{
	font-size:1.85em;
	margin:0 0 .2em 0;
}

h4{
	font-size:1.75em;
	margin:0 0 .2em 0;
}

p{
	font-size:1.55em;
	padding:.55em 0;
	margin:0;
	line-height:1.65;
}

ol{
	font-size:1.5em;
	padding:0 0 0 1.1em;
	line-height:1.7;
}

.muted{
	color:var(--muted);
}

.wr{
	max-width:var(--wrap);
	width:100%;
	margin:0 auto;
	padding:0 2.2em;
}

.fl{ float:left; }
.fr{ float:right; }
.cl{ clear:both; }

.col{
	width:33.333%;
	float:left;
	padding:2em 2.2em;
	min-width:0;
}

.col.b{ width:66.666%; }

/* ANCHORS */
#quienes-somos,
#beneficios,
#como-funciona,
#conoce-nuestros-estudios,
#trabaja-desde-tu-casa,
#contactanos{
	scroll-margin-top:var(--nav-sticky);
}

/* GALLERY */
#lightgallery{
	display:flex;
	flex-wrap:wrap;
	gap:.6em;
	align-content:flex-start;
}

#lightgallery a{
	display:block;
	width:10.5em;
	height:10.5em;
	flex:0 0 auto;
}

#lightgallery a img{
	width:100%;
	height:100%;
	margin:0;
	border-radius:14px;
	box-shadow:0 8px 22px rgba(0,0,0,.18);
	object-fit:cover;
	display:block;
}

.lg-actions{ display:none; }

/* WHATSAPP */
#whatsapp-icon{
	background-image:url(int/whatsapp-icon.png);
	background-repeat:no-repeat;
	background-size:cover;
	width:5.2em;
	height:5.2em;
	position:fixed;
	bottom:max(1em, env(safe-area-inset-bottom));
	right:max(1em, env(safe-area-inset-right));
	display:block;
	z-index:999;
	filter:drop-shadow(0 12px 22px rgba(0,0,0,.22));
}

/* SECTIONS */
.sq{
	padding:1em 0;
	background-color:var(--brand);
}
.sq.b{ 
	padding:3rem 0;
	background-color:var(--brand-2);
}
.sq.c.first{ padding-top: 5rem; }
.sq.c, .sq.e{
	padding:2rem 0;
	background-color:#fff;
}

.sq.c p, .sq.c ol, .sq.e p, .sq.e ol{
	color:rgba(15,23,42,.76);
}
.sq.c h1, .sq.c h2, .sq.c h3, .sq.c h4, .sq.c h5, .sq.c a, .sq.e h1, .sq.e h2, .sq.e h3, .sq.e h4, .sq.e h5,
.sq.e a{
	color:var(--brand);
}

/* BUTTONS */
button,
.btn{
	font-size:1.35em;
	border:none;
	border-radius:var(--r2);
	height:auto;
	margin-bottom:1em;
	background-color:rgba(255,255,255,.96);
	color:var(--brand);
	transition:transform .15s ease, box-shadow .2s ease, color .2s ease, background .2s ease;
	font-family:'Roboto', sans-serif;
	font-weight:900;
	display:block;
	width:100%;
	box-shadow:0 10px 24px rgba(0,0,0,.16);
	letter-spacing:.04em;
	text-transform:uppercase;
}

.btn{
	text-align:center;
	line-height:2.6em;
	text-decoration:none;
}

button:hover,
.btn:hover{
	color:#000;
	transform:translateY(-1px);
	box-shadow:0 16px 36px rgba(0,0,0,.18);
	text-decoration:none;
}

.sq.c .btn,
.sq.e .btn{
	background-color:var(--brand-2);
	color:#fff;
	box-shadow:0 14px 30px rgba(190,44,44,.22);
}

/* HEAD */
#head{
	position:absolute;
	z-index:999;
	top:0;
	width:100%;
}

#head h1{
	background:url('/ui/int/logo-lollipop.svg') no-repeat left top;
	display:block;
	text-indent:-9999px;
	width:30em;
	height:18em;
	margin:13em auto 1.2em auto;
	z-index:99;
	position:relative;
	background-size:contain;
	background-position:center;
	filter:drop-shadow(0 14px 28px rgba(0,0,0,.28));
}

#head-hero{
	position:relative;
	z-index:120;
	margin:0 auto 1.2em auto;
}

.hero-card{
	padding:1.5em 1.6em;
	border-radius:var(--r);
	background:var(--glass);
	border:1px solid rgba(255,255,255,.22);
	box-shadow:var(--sh);
	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);
	text-align:left;
}

.hero-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1em;
	margin-bottom:.4em;
}

.hero-kicker{
	font-family:'Roboto', sans-serif;
	font-weight:900;
	font-size:1.35em;
	color:rgba(15,23,42,.88);
	letter-spacing:.08em;
	text-transform:uppercase;
}

.hero-meta{
	color:rgba(15,23,42,.86);
	padding:.4em 0 .2em 0;
}

.hero-note{
	color:rgba(15,23,42,.62);
	font-size:1.25em;
	padding:.2em 0 0 0;
}

.hero-btn{
	width:auto;
	padding:0 1.2em;
	line-height:2.6em;
	white-space:nowrap;
	margin:0;
}

.hero-chips{
	display:flex;
	flex-wrap:wrap;
	gap:.6em;
	margin:.9em 0 .2em 0;
}

.chip{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:.5em .8em;
	border-radius:999px;
	background:rgba(15,23,42,.06);
	border:1px solid rgba(15,23,42,.10);
	color:rgba(15,23,42,.84);
	font-size:1.15em;
	font-weight:700;
}

/* NAV */




#head .head-b{
	height:100px;
	overflow:hidden;
	background:url(int/tri-head-b.svg) center bottom no-repeat;
	background-size:cover;
}

/* STEPS */
.steps p{ clear:both; }

.steps strong{
	color:var(--brand);
	background-color:#fff;
	border-radius:var(--r2);
	width:2em;
	height:2em;
	display:inline-block;
	font-size:1.6em;
	margin-right:.5em;
	text-align:center;
	line-height:2em;
	font-weight:900;
	float:left;
	box-shadow:0 10px 22px rgba(0,0,0,.14);
}

/* SPLASH */
#splash-bg{
	position:absolute;
	width:100%;
	z-index:0;
	overflow:hidden;
	/*height:85em;*/
	background-color:#fff;
}

#splash-bg::after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.10), rgba(0,0,0,.22));
	pointer-events:none;
}

#splash-bg .c{ height:108em; }

#splash-bg video{
	width:100%;
	height:100%;
	object-fit:cover;
}

/* TRIANGLES */
.tri{
	position:relative;
	z-index:10;
	min-width:0;
}

.tri.tp,
.tri.bt{
	display:block;
	width:100%;
	height:99px;
	background-color:var(--tri-fill, var(--brand));

	-webkit-mask-repeat:no-repeat;
	-webkit-mask-position:center;
	-webkit-mask-size:100% 100%;

	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:100% 100%;
}

.tri.tp{ margin-top:-4rem; }

.tri.bt{
	padding-top:1px;
	margin-bottom:-9.8em;
}

/* TOP */
.tri.tp{
	--tri-fill:var(--brand);
	-webkit-mask-image:url(int/sq-top-a-mask.svg);
	mask-image:url(int/sq-top-a-mask.svg);
}

.tri.b.tp{
	--tri-fill:var(--brand-2);
	-webkit-mask-image:url(int/sq-top-b-mask.svg);
	mask-image:url(int/sq-top-b-mask.svg);
}

.tri.c.tp{
	--tri-fill:var(--brand);
	-webkit-mask-image:url(int/sq-top-b-mask.svg);
	mask-image:url(int/sq-top-b-mask.svg);
}

.tri.d.tp{
	--tri-fill:var(--brand-2);
	-webkit-mask-image:url(int/sq-top-a-mask.svg);
	mask-image:url(int/sq-top-a-mask.svg);
}

.tri.e.tp{
	--tri-fill:#fff;
	-webkit-mask-image:url(int/sq-top-b-mask.svg);
	mask-image:url(int/sq-top-b-mask.svg);
}

/* BOTTOM */
.tri.bt{
	--tri-fill:var(--brand);
	-webkit-mask-image:url(int/sq-bot-a-mask.svg);
	mask-image:url(int/sq-bot-a-mask.svg);
}

.tri.b.bt{
	--tri-fill:var(--brand-2);
	-webkit-mask-image:url(int/sq-bot-b-mask.svg);
	mask-image:url(int/sq-bot-b-mask.svg);
}

.tri.c.bt{
	--tri-fill:var(--brand-2);
	-webkit-mask-image:url(int/sq-bot-a-mask.svg);
	mask-image:url(int/sq-bot-a-mask.svg);
}

.tri.d.bt{
	--tri-fill:var(--brand);
	-webkit-mask-image:url(int/sq-bot-b-mask.svg);
	mask-image:url(int/sq-bot-b-mask.svg);
}

.tri.e.bt{
	--tri-fill:#fff;
	-webkit-mask-image:url(int/sq-bot-a-mask.svg);
	mask-image:url(int/sq-bot-a-mask.svg);
}

/* BACKGROUNDS */
.bg{
	background-attachment:fixed;
	width:100%;
	display:block;
	height:550px;
	background-size:cover;
	background-position:center;
	margin-bottom: -7rem;
}

.bg.a{ background-image:url(int/bg-model-lolli-opt.jpg); }
.bg.c{ background-image:url(int/model-back.jpg); }
.bg.d{ background-image:url(int/bg-city-opt.jpg); }
.bg.e{ background-image:url(int/bg-friends.jpg); }

/* FOOTER */
#footer{
	position:relative;
	background-color:var(--brand-2);
	font-size:1.5em;
	z-index:999;
	line-height:1.7em;
	padding:1.3em 0;
}

.social{
	margin-top:-30px;
	margin-bottom:10px;
}

.social .in{
	display:block;
	width:2.6em;
	height:2.6em;
	float:left;
	margin-right:1em;
	background-size:8.6em;
	background-image:url(int/social-networks.png);
	background-repeat:no-repeat;
	background-position:-6em 0;
}

/* RESPONSIVE */
@media (max-width:1481px){
	:root{ --head-space:74em; }

	#head h1{
		margin:11em auto 1.1em auto;
		height:15em;
	}
}

@media (max-width:960px){
	:root{ --head-space:68em; }

	.col{ width:50%; }
	.col.b{ width:100%; }
}

@media (max-width:780px){
	:root{
		--head-space:62em;
		--nav-sticky:74px;
	}

	.col{ width:100%; }

	.bg{
		height:450px;
		background-position:bottom center;
		background-attachment:scroll;
	}

	#head h1{
		width:28em;
		height:10em;
		margin:9em auto 1em auto;
	}

	.hero-top{
		flex-direction:column;
		align-items:stretch;
	}

	.hero-btn{ width:100%; }
}

@media (max-width:481px){
	:root{ --head-space:60em; }

	.wr{ padding:0 1.4em; }
	.col{ padding:1.6em 1.4em; }

	#head h1{
		width:19em;
		height:11em;
		margin:7.2em auto .6em auto;
	}

	#lightgallery{
		width:100%;
		justify-content:space-between;
		gap:.55em;
	}

	#lightgallery a{
		flex:0 0 32%;
		width:auto;
		height:auto;
	}

	#lightgallery a img{
		height:auto;
		aspect-ratio:1/1;
		border-radius:12px;
	}
}










#nav{
	position: relative;
	z-index: 20;
	top: 0;
	
}
#nav a{
	text-transform:uppercase;
	font-weight:300;
	line-height:1.4em;
	padding:0 .6em .2em .6em;
	color:#fff;
	font-size:2em;
	color:#fff;
	display:block;
	transition:transform .2s, color .4s, border-bottom .4s, opacity .3s, font-weight .3s;
	opacity: .9;
}
#nav a:hover{
	text-decoration: none;
	opacity: 1;
	transform: scale(1.04);
}
#nav .nav-inner{
	position: relative;
	z-index: 2;
	padding: 70px 0 0 0;
	text-align: center;
	background-image: url(int/tri-head.svg);
	background-position: center top;
	background-size: cover;
}

#nav .nav-bg-bottom{
	bottom:0;
	height:70px;
	width:100%;
	background-image:url(int/tri-head-b.svg);
	background-position: center bottom;
	background-size: cover;
}













/* HERO CTA: lo menos invasivo posible */
#head-hero .hero-card.hero-cta{
	max-width:760px;
	margin:0 auto;
	padding:1.25em 1.35em;

	/* apenas una película para legibilidad, sin tapar el video */
	background:rgba(255,255,255,.4);
	border:1px solid rgba(255,255,255,.18);
	box-shadow:0 14px 44px rgba(0,0,0,.12);

	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
}

#head-hero .hero-cta .hero-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1.4em;
}

#head-hero .hero-cta .hero-copy{
	min-width:0;
}

#head-hero .hero-cta .hero-kicker{
	font-family:'Roboto', sans-serif;
	font-weight:900;
	font-size:1.75em;
	line-height:1.2;
	letter-spacing:0;
	text-transform:none;
	color:rgba(15,23,42,.92);
	margin:0 0 .2em 0;
}

#head-hero .hero-cta .hero-sub{
	font-size:1.35em;
	line-height:1.5;
	color:rgba(15,23,42,.70);
	padding:.1em 0 0 0;
}

#head-hero .hero-cta .hero-sub strong{
	color:rgba(15,23,42,.86);
}

#head-hero .hero-cta .hero-micro{
	margin-top:.55em;
	font-size:1.15em;
	line-height:1.4;
	color:rgba(15,23,42,.56);
}

#head-hero .hero-cta .hero-btn.hero-btn-lite{
	width:auto;
	margin:0;

	/* menos “pesado” que el btn global */
	background:rgba(255,255,255,.72);
	color:rgba(15,23,42,.88);
	border:1px solid rgba(15,23,42,.12);
	box-shadow:0 10px 26px rgba(0,0,0,.12);

	text-transform:none;
	letter-spacing:0;
	font-size:1.25em;
	padding:0 1.15em;
	line-height:2.5em;
}

#head-hero .hero-cta .hero-btn.hero-btn-lite:hover{
	transform:translateY(-1px);
	box-shadow:0 16px 34px rgba(0,0,0,.14);
	color:rgba(15,23,42,.92);
}

/* Responsive */
@media (max-width:780px){
	#head-hero .hero-card.hero-cta{
		max-width:100%;
	}
	#head-hero .hero-cta .hero-row{
		flex-direction:column;
		align-items:stretch;
	}
	#head-hero .hero-cta .hero-btn.hero-btn-lite{
		width:100%;
	}
}



































/* =========================
	OVERRIDE (mobile):
	- Sticky nav rojo, más elegante/minimalista (sin logo)
	- 1 sola línea con scroll + fade derecho
	- Ángulo inferior sutil con tri-head-b.svg
	- (Incluye fix de .fl/.fr/.cfl centrado en mobile)
========================= */

@media (max-width:780px){

	:root{
		--nav-h:62px;
		--nav-sticky:calc(var(--nav-h) + env(safe-area-inset-top));

		--nav-red:rgba(190,44,44,.88);		/* #be2c2c */
		--nav-red2:rgba(214,48,50,.88);	/* #d63032 */
		--nav-px:.95rem;
	}
	
	body{ margin-top: 23rem; }
	
	.sq.c, .sq.e{ padding:1rem 0; }
	.tri.tp, .tri.bt{ height: 4rem; }
	.tri.d.bt, .tri.c.bt, .tri.e.bt{ top: -2.13rem; }
	.tri.e.tp{ top:0; }
	
	#splash-bg { 
		height: 27rem;
		--tri-fill: #fff;
		mask-image:linear-gradient(#000,#000), url(int/sq-top-a-mask.svg);
		mask-repeat:no-repeat, no-repeat;
		mask-position:center, center bottom;
		mask-size:100% 100%, 100% 10%;
		mask-composite:exclude; /* Chrome/Spec */
	}
	
	/* NAV sticky */
	#nav{
		position:fixed;
		top:0;
		left:0;
		right:0;
		z-index:9999;

		height:var(--nav-sticky);
		padding-top:env(safe-area-inset-top);

		/*
		background:linear-gradient(180deg, var(--nav-red2), var(--nav-red));
		border-bottom:1px solid rgba(255,255,255,.14);

		box-shadow:0 14px 34px rgba(0,0,0,.18);
		
		backdrop-filter:blur(10px) saturate(120%);
		
		-webkit-backdrop-filter:blur(10px) saturate(120%);
		*/

		text-align:left;
		font-size:1.32em;
		font-weight:700;
		text-transform:none;
		line-height:1;
		overflow:hidden;
		height: 5rem;
	}


	#nav .nav-inner{
		position:relative;
		height:var(--nav-h);
	
		display:flex;
		align-items:center;
		gap:.5em;
	
		padding:0 var(--nav-px);
	
		overflow-x:auto;
		overflow-y:hidden;
		white-space:nowrap;
	
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	
		background:transparent;
		box-shadow:none;
		
		background:url(int/tri-head-b.svg) center bottom no-repeat;
		background-size:cover;
		
		padding-bottom: 1rem;
		height: 5rem;
	}

	
	#nav .nav-inner::-webkit-scrollbar{ display:none; }
	
	
	#nav .nav-inner a:hover{
		background:rgba(255,255,255,.10);
		border-color:rgba(255,255,255,.14);
		transform:translateY(-1px);
	}
	
	/* CTA dentro del nav, sutil (no botón pesado) */
	#nav .nav-inner a.nav-cta{
		background:rgba(214,48,50,.18);
		border-color:rgba(214,48,50,.26);
		color:rgba(255,255,255,.96);
	}
	
	#nav .nav-inner a.nav-cta:hover{
		background:rgba(214,48,50,.26);
		border-color:rgba(214,48,50,.34);
	}
	
	

	#nav .nav-inner::-webkit-scrollbar{
		display:none;
	}

	/* fade derecho (insinúa scroll) */
	#nav .nav-inner::after{
		content:'';
		position:fixed;
		top:0;
		right:0;
		height:100%;
		width:3.2rem;
		pointer-events:none;
		background:linear-gradient(90deg,
			rgba(190,44,44,0),
			rgba(190,44,44,.88) 70%
		);
		height: 3rem;
	}

	/* links: minimal (sin pill fuerte por defecto) */
	#nav .nav-inner a{
		display:inline-flex;
		align-items:center;
		justify-content:center;

		padding:.46em .72em;
		border-radius:10rem;

		color:rgba(255,255,255,.96);
		text-decoration:none;

		background:transparent;
		

		transition:background .2s ease, border-color .2s ease, transform .15s ease;
		font-size: 1.1rem;
	}

	#nav .nav-inner a:hover{
		background:rgba(255,255,255,.10);
		border-color:rgba(255,255,255,.14);
	}

	/* CTA: sutil, blanco con rojo (marca) */
	#nav .nav-inner a.nav-cta{
		background:rgba(255,255,255,.92);
		border-color:rgba(255,255,255,.92);
		color:rgba(190,44,44,.96);

		box-shadow:0 10px 22px rgba(0,0,0,.12);
	}

	#nav .nav-inner a.nav-cta:hover{
		background:rgba(255,255,255,.98);
		border-color:rgba(255,255,255,.98);
	}

	/* ángulo inferior sutil (sin “bloque” grande) */
	#nav .nav-bg-bottom{
		display:block;
		position:absolute;
		left:0;
		right:0;
		bottom:-10px;
		height:10px;

		background:url(int/tri-head-b.svg) center bottom no-repeat;
		background-size:cover;

		opacity:.16;
		pointer-events:none;
	}
	
	.fl, .fr{
		float: none;
		display: inline-block;
		margin: 0 auto;
	}
	
	.tri.tp {
		margin-top: 1rem;
	}
	.bg.a{ margin-bottom: -11rem; }
}