@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

body {
	font-size: 17px;
	line-height: 30px;
	font-weight: 400;
	-moz-osx-font-smoothing: grayscale;
	word-break: break-word;
	-webkit-font-smoothing: antialiased;
	font-family: "Inter", sans-serif;
	margin: 0;
	overflow-x: hidden;
	overflow-y: auto;
	background: #000;
}

html {
	overflow-y: auto;
}

body, div { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

img {
	-ms-interpolation-mode: bicubic;
	border: 0;
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

.logos-header {
    position: fixed;
    top: 30px;
    left: 40px;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 20px;
}

.logos-header img {
    height: 60px;
    filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.4));
    transition: all 0.5s ease;
}

.creative-fullpage--slider {
	background-color: #000;
	z-index: 2;
	width: 100%;
	position: relative;
	flex-direction: column;
	height: 100vh;
	font-size: 16px;
	display: flex;
	clip-path: none !important;
}

.creative-fullpage--slider .slider-inner {
	background: #000;
	height: 100vh;
	position: relative;
}

.creative-fullpage--slider .swiper-slide {
	position: relative;
	display: flex;
	justify-content: center;
	text-align: left;
	flex-direction: column;
	overflow: hidden;
}

.creative-fullpage--slider .swiper-slide .slider-inner img {
	object-fit: cover;
	width: 100%;
	height: 100vh;
	opacity: 0.7; /* Oscurecer un poco la imagen para que resalte el texto */
}

.creative-fullpage--slider .swiper-slide .slider-inner .swiper-content {
	position: absolute;
	top: 25%;
	left: 80px;
	z-index: 1;
}

.slide-layout {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
	gap: 40px;
	align-items: flex-start;
	width: 100%;
}

.slide-text,
.slide-media {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.slide-media {
	justify-content: center;
	align-items: flex-start;
}

.creative-fullpage--slider .swiper-slide .slider-inner::after {
	content: "";
	position: absolute;
	width: 101%;
	height: 100%;
	top: 0;
	left: -1px;
	background-color: transparent;
	background-image: radial-gradient(at center left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
}

.swiper-slide .slider-inner .swiper-content .title-area .tag {
	color: #915c9d; /* Color de My Marketing Therapy */
	font-weight: 900;
	font-size: 20px;
	margin-bottom: 10px;
	margin-top: 0px;
	letter-spacing: 2px;
}

.swiper-slide .slider-inner .swiper-content .title-area .title {
	margin-top: 20px;
	color: #fff;
	font-size: 4.5vw;
	font-family: "Inter", sans-serif;
	font-weight: 900;
	line-height: 1.1;
	text-transform: uppercase;
	margin-bottom: 30px;
	margin-left: -5px;
	text-decoration: none;
    display: inline-block;
}

.swiper-slide .slider-inner .swiper-content p.disc {
	font-size: 22px;
	width: 100%;
	margin-top: 15px;
	margin: 20px 0px 40px 0px;
	font-weight: 300;
	line-height: 36px;
	color: #e0e0e0;
    max-width: 800px;
}

.creative-btn--wrap .creative-slide--btn {
	color: #ffffff;
	margin-left: 18px;
	font-size: 1.2em;
	transition: margin-left 300ms cubic-bezier(0.49, 0, 0.01, 1);
	font-weight: 400;
	display: inline-flex;
	position: relative;
	white-space: nowrap;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	user-select: none;
	outline: none;
}

.creative-btn--circle .circle {
	position: absolute;
	right: calc(100% - 10px);
	top: 0;
	bottom: 0;
	margin: auto;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	clip-path: circle(25% at 50% 50%);
	transition: clip-path 500ms cubic-bezier(0.49, 0, 0.01, 1);
}

.creative-btn--circle .circle .circle-fill {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 100%;
	background-color: #915c9d; /* Color primario botón */
	will-change: transform;
	transform: scale(0);
	z-index: 1;
	transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1), background-color 500ms cubic-bezier(0.49, 0, 0.01, 1);
}

.creative-btn--circle .circle-icon {
	transform: translate(-100%, 0%);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	z-index: 2;
	transition: all 500ms cubic-bezier(0.49, 0, 0.01, 1);
}

.creative-btn--circle .circle-icon .icon-arrow {
	width: 20px;
	height: 20px;
	stroke: none;
	fill: #fff;
}

.creative-btn--circle .circle-outline {
	fill: transparent;
	width: 10px;
	stroke: #ffffff;
}

.creative-btn--wrap .creative-slide--btn .creative-btn--label {
	margin-left: 4pt;
	transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1);
}

.creative-btn--wrap .creative-slide--btn .creative-btn__border {
	position: absolute;
	left: 4pt;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform-origin: right;
	transition: transform 500ms cubic-bezier(0.49, 0, 0.01, 1);
}

.creative-btn--wrap .creative-slide--btn:hover .creative-btn--label {
	transform: translateX(18px);
}

.creative-btn--wrap .creative-slide--btn:hover .creative-btn__border {
	transform: scale(0, 1);
}

.creative-btn--wrap .creative-slide--btn:hover {
	margin-left: 38px !important;
}

.creative-btn--wrap .creative-slide--btn:hover .circle {
	clip-path: circle(50% at 50% 50%);
}

.creative-btn--wrap .creative-slide--btn:hover .circle-fill {
	transform: scale(1, 1);
}

.creative-btn--wrap .creative-slide--btn:hover .circle-icon {
	transform: translate(0%, 0%);
	opacity: 1;
}

.creative-fullpage--slider .swiper-container-h .swiper-button-next, 
.creative-fullpage--slider .swiper-container-h .swiper-button-prev {
	bottom: 5%;
	top: unset;
	transform: scale(1);
	background-color: rgba(255,255,255,0.1);
	backdrop-filter: blur(10px);
	height: 70px;
	width: 70px;
	line-height: 70px;
	border-radius: 50%;
	transition: all 0.4s;
    color: #fff;
}

.creative-fullpage--slider .swiper-container-h .swiper-button-next { right: 50px; }
.creative-fullpage--slider .swiper-container-h .swiper-button-prev { left: 50px; }

.swiper-container-h .slider-pagination-area {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 60px;
	left: 50% !important;
	transform: translateX(-50%);
	width: 400px;
	z-index: 1;
}

.swiper-container-h .slider-pagination-area .slide-range {
	font-weight: 500;
	margin: 0 15px;
	color: #ffffff;
	font-size: 18px;
    position: absolute;
}

.swiper-container-h .slider-pagination-area .slide-range.one { left: -50px; }
.swiper-container-h .slider-pagination-area .slide-range.three { right: -50px; }

.swiper-container-h .slider-pagination-area .swiper-pagination {
	bottom: 0 !important;
	width: 400px !important;
}

.swiper-container-h .slider-pagination-area .swiper-pagination .swiper-pagination-progressbar-fill {
	background: #915c9d; /* Progreso con color de la marca */
}

@media (max-width: 991px) {
	.creative-fullpage--slider .swiper-slide .slider-inner .swiper-content {
		width: 90%;
		left: 5%;
	}
	.creative-fullpage--slider .swiper-container-h .swiper-button-next, 
	.creative-fullpage--slider .swiper-container-h .swiper-button-prev {
		height: 50px; width: 50px; line-height: 50px;
	}
}

@media screen and (max-width: 767px) {
	.creative-fullpage--slider,
	.creative-fullpage--slider .slider-inner,
	.creative-fullpage--slider .swiper-slide {
		height: auto !important;
		min-height: auto !important;
		overflow: visible !important;
	}
	.creative-fullpage--slider .swiper-slide .slider-inner img {
		height: auto !important;
		min-height: 224px;
		max-height: 55vh;
		width: 100%;
		object-fit: cover;
	}
	.swiper-slide .slider-inner .swiper-content {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		max-width: 720px !important;
		padding: 24px 16px !important;
		margin: 0 auto !important;
	}
	.swiper-slide .slider-inner .swiper-content .title-area .title {
		font-size: 28px;
	}
	.swiper-slide .slider-inner .swiper-content p.disc {
		font-size: 16px;
		line-height: 28px;
		margin-bottom: 16px;
	}
	.slide-layout {
		display: block;
		width: 100%;
		gap: 18px;
	}
	.slide-layout > * {
		width: 100%;
		box-sizing: border-box;
	}
	.slide-text,
	.slide-media {
		width: 100%;
		background: rgba(255,255,255,0.1);
		border: 1px solid rgba(255,255,255,0.18);
		border-radius: 24px;
		padding: 22px;
		box-shadow: 0 18px 40px rgba(0,0,0,0.18);
		margin-bottom: 18px;
	}
	.slide-text {
		display: block;
		padding: 22px;
	}
	.slide-text {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	button.video-button,
	.video-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f6a623;
		border: 2px solid #f6a623;
		color: #000;
		padding: 14px 24px;
		border-radius: 999px;
		text-decoration: none;
		font-weight: 700;
		margin-top: 12px;
		max-width: 100%;
		min-height: 54px;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	}
	button.video-button:hover,
	.video-button:hover {
		background: #ffd262;
		transform: translateY(-1px);
		box-shadow: 0 8px 18px rgba(0,0,0,0.18);
	}
	.slide-media {
		background: rgba(255,255,255,0.04);
		padding: 16px;
		min-height: 320px;
		aspect-ratio: 1 / 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 16px;
		overflow: hidden;
	}
	.slide-media > * {
		width: 100%;
		max-width: 100%;
	}
	.slide-media img,
	.slide-media .image-frame,
	.slide-media .concept-card,
	.slide-media .phone-timeline-container,
	.slide-media .artwork_cont,
	.slide-media svg {
		width: 100%;
		max-width: 100%;
		height: auto;
		object-fit: contain;
		border-radius: 18px;
	}
	.creative-fullpage--slider .swiper-slide .slider-inner::after {
		display: none;
	}
	.swiper-container-h .swiper-button-next,
	.swiper-container-h .swiper-button-prev,
	.swiper-container-h .slider-pagination-area {
		display: none !important;
	}

	/* Modo lista/tarjetas en móvil para mostrar todo el contenido verticalmente */
	.swiper-container-h {
		overflow: visible !important;
	}
	.swiper-wrapper {
		display: block !important;
		transform: none !important;
		transition: none !important;
	}
	.swiper-slide {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		height: auto !important;
		min-height: auto !important;
		margin-bottom: 24px !important;
		transform: none !important;
	}
	.swiper-slide .slider-inner {
		height: auto !important;
		min-height: auto !important;
		overflow: visible !important;
	}
}

.mobile-slide-fallback {
	display: none;
	padding: 20px;
}
.mobile-slide-card {
	max-width: 760px;
	margin: 0 auto;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 28px;
	padding: 28px 24px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.25);
	text-align: center;
}
.mobile-slide-title {
	font-size: 22px;
	line-height: 1.4;
	color: #ffffff;
	margin-bottom: 24px;
}
.mobile-slide-button {
	display: inline-block;
	background: #915c9d;
	color: #ffffff;
	text-decoration: none;
	padding: 16px 28px;
	border-radius: 999px;
	font-weight: 700;
	transition: transform 0.2s ease, background 0.2s ease;
}
.mobile-slide-button:hover {
	transform: translateY(-2px);
	background: #b56be4;
}

@media screen and (max-width: 767px) {
	.mobile-slide-fallback {
		display: block;
	}
	.creative-fullpage--slider {
		display: none !important;
	}
}

/* Iconos Sociales */
.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 24px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
}
.social-icon:hover {
    background: #fff;
    color: #000;
    transform: translateY(-5px);
}

/* Face animation style for Slide 3 */
.face-container {
    --eye-size: 30%;
    --eye-gap: 18%;
    --eye-color: white;
    --background: #915c9d; /* Lila color of 'emoción' */
    --user-button-main: #D770AD;
    
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--background);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    perspective: 25rem;
}
.face {
    --left-lower-rotation: 0deg;
    --left-lower-position: 0%;
    --left-upper-rotation: 0deg;
    --left-upper-position: 0%;
    --right-lower-rotation: 0deg;
    --right-lower-position: 0%;
    --right-upper-rotation: 0deg;
    --right-upper-position: 0%;
    --face-rotation-x: 0deg;
    --face-rotation-y: 0deg;
    --face-rotation-z: 0deg;
    
    display: grid;
    grid-template-columns: var(--eye-size) var(--eye-gap) var(--eye-size);
    grid-template-rows: var(--eye-size);
    grid-template-areas: "left . right";
    width: 100%;
    height: 100%;
    justify-content: center;
    align-content: center;
    filter: blur(6px) contrast(8);
    transform: translateZ(20px) rotateX(var(--face-rotation-x)) rotateY(var(--face-rotation-y)) rotateZ(var(--face-rotation-z));
    transition: .75s cubic-bezier(.25, .5, .5, 1);
    mix-blend-mode: lighten;
}
.face .eye {
    position: relative;
    background: white;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 0 0 12px black;
}
.face .eye, .face .eye * {
    transition: .5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}
.face .eye > div {
    --rotation: 0deg;
    --position: 0%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(var(--rotation));
}
.face .eye > div .lid {
    position: absolute;
    width: 100%;
    height: 100%;
    background: black;
}
.face .eye > div.lower .lid {
    top: calc(100% - var(--position));
}
.face .eye > div.upper .lid {
    bottom: calc(100% - var(--position));
}
.face .eye.left {
    grid-area: left;
}
.face .eye.left .lower {
    --rotation: var(--left-lower-rotation);
    --position: var(--left-lower-position);
}
.face .eye.left .upper {
    --rotation: var(--left-upper-rotation);
    --position: var(--left-upper-position);
}
.face .eye.right {
    grid-area: right;
}
.face .eye.right .lower {
    --rotation: var(--right-lower-rotation);
    --position: var(--right-lower-position);
}
.face .eye.right .upper {
    --rotation: var(--right-upper-rotation);
    --position: var(--right-upper-position);
}

/* Handshake Animation Container */
.handshake-container {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff; /* Opaque white background as requested */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
}

/* Background animated SVG for My Marketing Therapy slides */
.creative-fullpage--slider .swiper-slide .slider-inner svg.slider-bg-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fee440; /* Yellow background */
    z-index: 0;
}

/* Duo Animated Background */
.creative-fullpage--slider .swiper-slide .slider-inner .duo-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
    background-color: #0b1a16; /* Dark tech green background */
    overflow: hidden;
    opacity: 0.65; /* opacity to let slide text stand out */
}
.duo-slide-bg svg {
    width: 100%;
    height: 100%;
}
.duo-slide-bg path {
    stroke-width: 2px;
}

/* Microchip Animation for Slide 8 (Ser encontrado por la IA) */
.microchip-container {
    --hue: 153;
    --primary1: hsl(var(--hue),90%,90%);
    --primary3: hsl(var(--hue),90%,70%);
    --primary7: hsl(var(--hue),90%,30%);
    --primary9: hsl(var(--hue),90%,10%);
    --trans-dur: 0.3s;
    
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--primary9);
    border: 1px solid var(--primary7);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.microchip {
    display: block;
    margin: auto;
    width: 250px;
    height: 250px;
}
.microchip__center,
.microchip__dot,
.microchip__line,
.microchip__lines,
.microchip__spark,
.microchip__wave {
    animation-duration: 5s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    animation-iteration-count: infinite;
}
.microchip__core,
.microchip__dot {
    fill: var(--primary7);
    transition: fill var(--trans-dur);
}
.microchip__center,
.microchip__wave {
    transform-origin: 25px 25px;
}
.microchip__center {
    animation-name: center-scale;
}
.microchip__line,
.microchip__spark,
.microchip__wave {
    transition: stroke var(--trans-dur);
}
.microchip__line {
    stroke: var(--primary7);
}
.microchip__lines {
    animation-name: lines-scale;
    transform-origin: 54px 54px;
}
.microchip__spark,
.microchip__wave {
    animation-timing-function: linear;
    stroke: var(--primary3);
}

/* Dots Transform Origins and Animations */
.microchip__dot--1 { transform-origin: 3px 38px; animation-name: dot-scale1; }
.microchip__dot--2 { transform-origin: 3px 54px; animation-name: dot-scale2; }
.microchip__dot--3 { transform-origin: 3px 70px; animation-name: dot-scale3; }
.microchip__dot--4 { transform-origin: 3px 3px; animation-name: dot-scale4; }
.microchip__dot--5 { transform-origin: 20px 3px; animation-name: dot-scale5; }
.microchip__dot--6 { transform-origin: 3px 30px; animation-name: dot-scale6; }
.microchip__dot--7 { transform-origin: 37px 3px; animation-name: dot-scale7; }
.microchip__dot--8 { transform-origin: 54px 3px; animation-name: dot-scale8; }
.microchip__dot--9 { transform-origin: 71px 3px; animation-name: dot-scale9; }

/* Lines Animations mapping */
.microchip__line--1 { animation-name: line-draw1; }
.microchip__line--2 { animation-name: line-draw2; }
.microchip__line--3 { animation-name: line-draw3; }
.microchip__line--4 { animation-name: line-draw4; }
.microchip__line--5 { animation-name: line-draw5; }
.microchip__line--6 { animation-name: line-draw6; }
.microchip__line--7 { animation-name: line-draw7; }
.microchip__line--8 { animation-name: line-draw8; }
.microchip__line--9 { animation-name: line-draw9; }

/* Sparks Animations mapping */
.microchip__spark--1 { animation-name: spark1; }
.microchip__spark--2 { animation-name: spark2; }
.microchip__spark--3 { animation-name: spark3; }
.microchip__spark--4 { animation-name: spark4; }
.microchip__spark--5 { animation-name: spark5; }
.microchip__spark--6 { animation-name: spark6; }
.microchip__spark--7 { animation-name: spark7; }
.microchip__spark--8 { animation-name: spark8; }
.microchip__spark--9 { animation-name: spark9; }

/* Waves Animations mapping */
.microchip__wave--1 { animation-name: wave-scale1; }
.microchip__wave--2 { animation-name: wave-scale2; }

/* Keyframe Definitions */
@keyframes center-scale {
    from, to { transform: scale(0); }
    12.5%, 75% { transform: scale(1); }
}
@keyframes dot-scale1 {
    from, 20%, 81.25%, to { transform: scale(0); }
    32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale2 {
    from, 10.5%, 87.5%, to { transform: scale(0); }
    23%, 75% { transform: scale(1); }
}
@keyframes dot-scale3 {
    from, 20%, 81.25%, to { transform: scale(0); }
    32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale4 {
    from, 20%, 81.25%, to { transform: scale(0); }
    32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale5 {
    from, 11.5%, 87.5%, to { transform: scale(0); }
    24%, 75% { transform: scale(1); }
}
@keyframes dot-scale6 {
    from, 14.5%, 85%, to { transform: scale(0); }
    27%, 72.5% { transform: scale(1); }
}
@keyframes dot-scale7 {
    from, 20%, 81.25%, to { transform: scale(0); }
    32.5%, 68.75% { transform: scale(1); }
}
@keyframes dot-scale8 {
    from, 11%, 87.5%, to { transform: scale(0); }
    23.5%, 75% { transform: scale(1); }
}
@keyframes dot-scale9 {
    from, 20%, 81.25%, to { transform: scale(0); }
    32.5%, 68.75% { transform: scale(1); }
}
@keyframes line-draw1 {
    from, 93.75%, to { stroke-dashoffset: 59; }
    25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes line-draw2 {
    from, 93.75%, to { stroke-dashoffset: 42; }
    25%, 68.75% { stroke-dashoffset: 0; }
}
@keyframes line-draw3 {
    from, 93.75%, to { stroke-dashoffset: 59; }
    25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes line-draw4 {
    from, 93.75%, to { stroke-dashoffset: 78; }
    25%, 68.75% { stroke-dashoffset: 18; }
}
@keyframes line-draw5 {
    from, 93.75%, to { stroke-dashoffset: 60; }
    25%, 68.75% { stroke-dashoffset: 0; }
}
@keyframes line-draw6 {
    from, 93.75%, to { stroke-dashoffset: 91; }
    25%, 68.75% { stroke-dashoffset: 31; }
}
@keyframes line-draw7 {
    from, 93.75%, to { stroke-dashoffset: 60; }
    25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes line-draw8 {
    from, 93.75%, to { stroke-dashoffset: 43; }
    25%, 68.75% { stroke-dashoffset: 0; }
}
@keyframes line-draw9 {
    from, 93.75%, to { stroke-dashoffset: 60; }
    25%, 68.75% { stroke-dashoffset: 17; }
}
@keyframes lines-scale {
    from { opacity: 1; transform: scale(0); }
    12.5%, 75% { opacity: 1; transform: scale(1); }
    93.75%, to { opacity: 0; transform: scale(0.5); }
}
@keyframes spark1 {
    from, 27.5% { stroke-dashoffset: 59; }
    50%, 52.5% { stroke-dashoffset: -25; }
    75%, to { stroke-dashoffset: -109; }
}
@keyframes spark2 {
    from, 27.5% { stroke-dashoffset: 42; }
    50%, 52.5% { stroke-dashoffset: -42; }
    75%, to { stroke-dashoffset: -126; }
}
@keyframes spark3 {
    from, 27.5% { stroke-dashoffset: 59; }
    50%, 52.5% { stroke-dashoffset: -25; }
    75%, to { stroke-dashoffset: -109; }
}
@keyframes spark4 {
    from, 27.5% { stroke-dashoffset: 78; }
    50%, 52.5% { stroke-dashoffset: -42; }
    75%, to { stroke-dashoffset: -162; }
}
@keyframes spark5 {
    from, 27.5% { stroke-dashoffset: 60; }
    50%, 52.5% { stroke-dashoffset: -60; }
    75%, to { stroke-dashoffset: -180; }
}
@keyframes spark6 {
    from, 27.5% { stroke-dashoffset: 91; }
    50%, 52.5% { stroke-dashoffset: -29; }
    75%, to { stroke-dashoffset: -149; }
}
@keyframes spark7 {
    from, 27.5% { stroke-dashoffset: 60; }
    50%, 52.5% { stroke-dashoffset: -26; }
    75%, to { stroke-dashoffset: -112; }
}
@keyframes spark8 {
    from, 27.5% { stroke-dashoffset: 43; }
    50%, 52.5% { stroke-dashoffset: -43; }
    75%, to { stroke-dashoffset: -129; }
}
@keyframes spark9 {
    from, 27.5% { stroke-dashoffset: 60; }
    50%, 52.5% { stroke-dashoffset: -26; }
    75%, to { stroke-dashoffset: -112; }
}
@keyframes wave-scale1 {
    from, 0%, 25%, 50%, 75% {
        stroke-width: 6px;
        transform: scale(1);
    }
    10%, 35%, 60%, 85%, to {
        animation-timing-function: steps(1);
        stroke-width: 0;
        transform: scale(2);
    }
}
@keyframes wave-scale2 {
    from, 5%, 30%, 55%, 80% {
        stroke-width: 6px;
        transform: scale(1);
    }
    15%, 40%, 65%, 90%, to {
        animation-timing-function: steps(1);
        stroke-width: 0;
        transform: scale(2);
    }
}

/* Lissajous Text Animation */
.lissajous-container {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff; /* Fondo blanco */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lissajous-wrapper {
  --size: 100%;
  --animation-length: 16s;
  aspect-ratio: 1;
  border-radius: 2px;
  height: var(--size);
  position: relative;
  width: var(--size);
  align-items: center;
  display: flex;
  gap: 20px;
}

.lissajous-wrapper .border {
  height: 100%;
  position: absolute;
  width: 100%;
}

.lissajous-wrapper .box {
  animation: move var(--animation-length) linear reverse infinite;
  animation-delay: calc(
    var(--sibling-index) / var(--sibling-count) *
      calc(var(--animation-length) * -1)
  );
  font-size: clamp(14px, 3.5vw, 24px); /* Escalado para el contenedor de 450px */
  font-weight: 800;
  color: #222228;
  offset-path: path(var(--path));
  position: absolute;
  text-shadow: 2px 2px 10px rgba(0,0,0,.1);
}

.lissajous-wrapper .box:nth-child(2n) {
  opacity: 0;
}

@keyframes move {
  100% {
    offset-distance: 0%;
    opacity: 0;
  }
  90% {
    offset-distance: 10%;
    opacity: 1;
  }
  10% {
    offset-distance: 90%;
    opacity: 1;
  }
  0% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@media (min-width: 700px) {
  .lissajous-wrapper .box:nth-child(2n) {
    opacity: 1;
  }
}

/* Custom styling for Tweakpane inside the slide */
#tweakpane-container {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 180px;
  opacity: 0.85;
  transition: opacity 0.3s;
}
#tweakpane-container:hover {
  opacity: 1;
}

/* Phone Timeline Styles (Slide 8) */
.phone-timeline-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* Fondo blanco sólido */
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

#phone-timeline-main {
    width: 300px;
    text-align: center;
}

/* timeline */
.phone-timeline-container .timeline {
    overflow: hidden;
    position: relative;
    margin-top: 2.25em;
    padding-left: 100px;
}

.phone-timeline-container .timeline::before,
.phone-timeline-container .timeline::after {
    content: '';
    width: 75px;
    position: absolute;
    top: 0;
    height: 96px;
    z-index: 1;
}

.phone-timeline-container .timeline::before {
    left: 0;
    background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
}

.phone-timeline-container .timeline::after {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff);
}

/* timeline ul */
.phone-timeline-container .timeline-list {
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
    transition: transform 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.phone-timeline-container .timeline-item {
    display: inline-block;
    vertical-align: top;
    width: 24px;
    color: rgb(45,44,46);
}

.phone-timeline-container .timeline-item::before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 2px;
    height: 8px;
    background: rgb(45,44,46);
}

.phone-timeline-container .timeline-item.-date {
    width: 36px;
}

.phone-timeline-container .timeline-item.-date span {
    font-family: 'Roboto', sans-serif;
    display: block;
    margin: 2em 0;
    font-weight: 700;
}

.phone-timeline-container .timeline-item.-date::before {
    width: 4px;
    height: 14px;
}

.phone-timeline-container .c {
    position: absolute;
    bottom: 10px;
    right: 15px;
    display: inline-block;
    font-size: 11px;
    font-family: Monaco, monospace;
    color: #888888;
    text-decoration: none;
    z-index: 2;
}

/* YouTube Logo Scaled for Slider */
.yt-wrapper {
  font-size: 3px; /* Escala base para el logo */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#youtube-logo {
  position: relative;
  background-color: #ff0000;
  width: 60em;
  height: 36em;
  border-radius: 5em / 15em;
}

#youtube-logo:before {
  content: "";
  position: absolute;
  background-color: #ff0000;
  z-index: -1;
  width: 53em;
  height: 40.3em;
  border-radius: 24em / 3em;
  left: 3.5em;
  bottom: -2.2em;
}

#youtube-logo:after {
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 8em 0 8em 15em;
  border-color: transparent transparent transparent #fff;
  left: 24.5em;
  bottom: 10em;
}

/* EEAT Bicycle Animation */
.eeat-svg-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.eeat-svg-wrapper > svg {
  display: block;
  width: 100%;
  max-width: 250px;
  height: auto;
}

#bicycle, #bicycle-sge {
  offset-path: path("M 0 0 l 200 -200 a 50 50 0 0 1 50 0 l 100 100 a 50 50 0 0 0 50 0 l 125 -125");
  offset-distance: 0%;
  animation: offsetDistance 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite alternate;
}

@keyframes offsetDistance {
  to {
    offset-distance: 100%;
  }
}

/* GEO Artwork Container */
.artwork_cont {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
}

/* Fallback for drawSVG if the plugin is not present */
.splash {
  stroke-dasharray: 50px;
  stroke-dashoffset: 50px;
}