:root {
	--cian: #54eaff;
	--verde: #00ffae;
	--gris: #666666;
	--gris-claro: #e0e0e0;
}
@font-face {
	font-family: 'Sheldon';
	src: url('../fonts/sheldon.ttf') format('truetype');
	font-style: normal;
}
@font-face {
	font-family: 'Dklemon';
	src: url('../fonts/dklemon.otf') format('opentype');
	font-style: normal;
}
html, body {
	padding: 0;
	margin: 0;
	font-family: Roboto, sans-serif;
	font-weight: 300;
	scroll-behavior: smooth;
}
body {
	padding-top: 150px;
}
/* Estilos para la cabecera */
header.head {
	position: fixed;
	width: 100%;
	z-index: 99;
	top: 0;
	background: white;
	box-shadow: 0px 5px 10px 0px #00000026;
}
header.head::after {
	content: "";
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	right: 0;
	background: var(--verde);
}
header.head .cont {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cont {
	width: 90%;
	max-width: 1600px;
	margin: auto;
}
.responsive {
	width: 100%;
	height: auto;
}
.verde {
	color: var(--verde);
}
.cian {
	color: var(--cian);
}
.fondoverde {
	background: var(--verde);
}
.fondocian {
	background: var(--cian);
}
.fondogris {
	background: var(--gris);
	color: white;
}
.fondonegro {
	background: black;
	color: white;
}
h2.text-stroke{
	position: relative;
	font-family: 'Sheldon';
	font-weight: 100;
	font-size: clamp(50px, 15vw, 160px);
	line-height: .9;
	margin: 0;
}

h2.text-stroke::before {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	transform: translate(-4px, -4px);
	color: transparent;
	-webkit-text-stroke: 1px #000;
	text-stroke: 1px #000;
	pointer-events: none;
}

@supports not (-webkit-text-stroke: 1px #000){
	h2.text-stroke::before{
		-webkit-text-stroke: initial;
		text-stroke: initial;
		text-shadow:
			3px 0 #000, -3px 0 #000, 0 3px #000, 0 -3px #000,
			2px 2px #000, -2px 2px #000, 2px -2px #000, -2px -2px #000;
	}
}

/* Estado inicial de todo lo que espera a entrar al viewport */
.reveal-on-view {
	opacity: 0;
	transform: scale(.5);
	will-change: opacity, transform;
}

/* Clase que el JS agrega al entrar al viewport */
.is-visible {
	opacity: 1;                  /* por accesibilidad, aunque la animación lo cubre */
	transform: none;
}

/* --- Animación tipo: Fade + Scale con pequeño rebote --- */
.anim--fadeScale.is-visible {
	animation: fadeScaleIn 700ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes fadeScaleIn {
	0%   { opacity: 0; transform: scale(.5); }
	60%  { opacity: 1; transform: scale(1.06); } /* overshoot */
	80%  { transform: scale(.98); }              /* rebote atrás */
	100% { transform: scale(1); }                /* settle */
}

/* (Opcional) otro tipo de animación, por si después querés cambiarla */
.anim--slideUp.is-visible {
	animation: slideUpIn 600ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes slideUpIn {
	0%   { opacity: 0; transform: translateY(24px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
	.reveal-on-view,
	.is-visible,
	.anim--fadeScale.is-visible,
	.anim--slideUp.is-visible {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* Hijo que se anima DESPUÉS: +1s respecto al reveal */
.reveal-on-view.is-visible .post-reveal {
 	animation: fadeScaleIn 1000ms cubic-bezier(.22,1,.36,1)
		calc(var(--reveal-delay, 0ms) + 0.2s) both;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
		.reveal-on-view, .reveal-on-view.is-visible .post-reveal {
			transition: none !important; animation: none !important;
		opacity: 1 !important; transform: none !important;
	}
}