@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary-dark: #0f2a2a;
    --primary-light: #f8fafc;
    --accent-blue: #595668;
    /* Nuevas variables con prefijo específico para el card-logo */

}

.dark {
    color-scheme: dark;
}

.card-neu {
    background: linear-gradient(145deg, #61789c, #394a70);
    border-radius: 1rem;
    box-shadow: 8px 8px 16px #262727, -8px -8px 16px #38423b;
    transition: all 0.3s ease;
}

.navbar {
    width: 100%;
    max-width: 100%;
    transition: all 0.3s ease;
}
@media screen and (max-width: 640px) {
    .navbar {
        max-width: 100%;
        padding: 0.5rem;
    }
}
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
#mobile-menu.hidden {
    display: none;
}

.card-neu:hover {
    transform: translateY(-5px);
    box-shadow: 8px 8px 14px #131826,
               -12px -12px 20px #243858;
}
.card-neu-rrss {
    background: linear-gradient(100deg, #61789c, #394a70);
    border-radius: 1rem;
    box-shadow: 6px 6px 12px #262727, -6px -6px 12px #38423b;
    transition: all 0.3s ease;
}




.card-neu-rrss:hover {
    transform: translateY(-5px);
    box-shadow: 6px 6px 12px #131826,
               -6px -6px px #243858;
}
/* Nueva variante para iconos sociales */
.card-neu-social {
    background: linear-gradient(145deg, #61789c, #394a70);
    border-radius: 9999px; /* Hace el ícono perfectamente circular */
    box-shadow: 4px 4px 8px #262727, -4px -4px 8px #38423b;
    transition: all 0.3s ease;
    width: 2.5rem; /* Tamaño fijo */
    height: 2.5rem; /* Tamaño fijo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.card-neu-social:hover {
    transform: scale(1.1); /* Cambiado a scale para un efecto más apropiado para íconos */
    box-shadow: 6px 6px 10px #131826,
               -6px -6px 10px #243858;
}

/* Ajuste del ícono dentro del botón */
.card-neu-social svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Glass Card Styles */
.glass-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
}
/* Primero definimos las variables CSS necesarias */

.card-logo-container {
    --card-height: 65px;
    --card-width: 150px;
    --rotate: 10deg;
}
@property --rotate {
	syntax: "<angle>";
	initial-value: 132deg;
	inherits: false;
  }
  /* Estilo base para el contenedor */
.card-logo {
	background: #191c29;
	width: var(--card-width);
	height: var(--card-height);
	padding: 3px;
	position: relative;
	border-radius: 6px;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;
	font-size: 1.5em;
	color: rgb(88 199 250 / 0%);
	cursor: pointer;
	font-family: cursive;
	isolation: isolate; /* Mejora el rendimiento de las capas */
	overflow: hidden;   /* Contiene los efectos dentro de la tarjeta */
  }
  
  .card-logo:hover {
	color: rgb(88 199 250 / 100%);
	transition: color 4s;
  }
  
  .card-logo:hover:before, 
  .card-logo:hover:after {
	animation: none;
	opacity: 0;
  }
  
  .card-logo::before {
	content: "";
	width: 104%;
	height: 102%;
	border-radius: 8px;
	background-image: linear-gradient(
	  var(--rotate),
	  #5ddcff, 
	  #3c67e3 43%, 
	  #4e00c2
	);
	position: absolute;
	z-index: -1;
	top: -1%;
	left: -2%;
	animation: spin 7.5s linear infinite;
  }
  
  .card-logo::after {
	position: absolute;
	content: "";
	top: calc(var(--card-height) / 6);
	left: 0;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	transform: scale(0.8);
	filter: blur(calc(var(--card-height) / 6));
	background-image: linear-gradient(
	  var(--rotate),
	  #5ddcff, 
	  #3c67e3 43%, 
	  #4e00c2
	);
	opacity: 1;
	transition: opacity .5s;
	animation: spin 2.5s linear infinite;
  }
  
  @keyframes spin {
	0% {
	  --rotate: 0deg;
	}
	100% {
	  --rotate: 360deg;
	}
  }
  
  .a-1-logo {
	color: #212534;
	text-decoration: none;
	font-family: sans-serif;
	font-weight: bold;
	margin-top: 2rem;
	position: relative; /* Añadido para mejor posicionamiento */
	z-index: 1;        /* Asegura que el texto esté sobre los efectos */
}
/* Animated Background */
.animated-bg {
    background: linear-gradient(-45deg, #277aa4, #277aa4, #37c7e1, #277aa4);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.animated-bg-2 {
    background: linear-gradient(-45deg, #0F2027, #203A43, #2C5364, #373B44);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
.animated-bg-3 {
    background: linear-gradient(-45deg, #3554a8, #17b7df, #31ca76, #8742be);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

.animated-bg-4 {
    background: linear-gradient(-45deg, #2980B9, #203A43, #2980B9, #373B44);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
/* Fondo opaco aplicado en las imágenes */
.filter-opacity {
    opacity: 0.9;  /* Baja la opacidad del fondo */
}

/* Backdrop opaco */
.backdrop-opacity {
    background-color: rgba(26, 18, 18, 0.5); /* Fondo oscuro con opacidad */
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1e293b;
}

::-webkit-scrollbar-thumb {
    background: #676d77;
    border-radius: 4px;
}

/* Floating Animation */
.float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/*Background */

/* margen */
.div1 {
    margin-bottom: 30px; /* Espacio entre los divs */
  }
.div2 {
    margin-bottom: 60px; /* Espacio entre los divs */
}

.div3 {
    margin-bottom: 90px; /* Espacio entre los divs */
}
.spaciate-card {
	margin-left: 20px; /* Espacio lateral por defecto */
	margin-right: 20px; /* Espacio lateral por defecto */
  }
  
  /* Para pantallas pequeñas (≥ 640px) */
  @media (min-width: 640px) {
	.spaciate-card {
	  margin-left: 30px;
	  margin-right: 30px;
	}
  }
  
  /* Para pantallas medianas (≥ 768px) */
  @media (min-width: 768px) {
	.spaciate-card {
	  margin-left: 40px;
	  margin-right: 40px;
	}
  }
  
  /* Para pantallas grandes (≥ 1024px) */
  @media (min-width: 1024px) {
	.spaciate-card {
	  margin-left: 50px;
	  margin-right: 50px;
	}
  }
  
  /* Para pantallas extra grandes (≥ 1280px) */
  @media (min-width: 1280px) {
	.div1 {
	  margin-left: 60px;
	  margin-right: 60px;
	}
  }
  

@font-face {
    font-family: 'MarxureBold';  /* Nombre con el que te referirás a la fuente */
    src: url('../fonts/marxure-headline-typeface-webfont/Marxure-Bold.ttf') format('truetype');  /* Ruta al archivo .ttf */
    font-weight: bold;  /* Como es la versión "Bold", especificamos el peso */
    font-style: normal;  /* Estilo normal */
}
.h1-1 {
    font-family: 'MarxureBold', serif;
}

.p-1 {
    font-family: 'MarxureBold', sans-serif;
}
@font-face {
    font-family: 'MarxureExtraBold';  /* Nombre con el que te referirás a la fuente */
    src: url('../fonts/marxure-headline-typeface-webfont/Marxure-ExtraBold.ttf') format('truetype');  /* Ruta al archivo .ttf */
    font-weight: bold;  /* Como es la versión "Bold", especificamos el peso */
    font-style: normal;  /* Estilo normal */
}
.h1-2 {
    font-family: 'MarxureBold', serif;
}

.p-2 {
    font-family: 'MarxureBold', sans-serif;
}

.slider {
	width: calc(3 * var(--slide-width));
	height: calc(2 * var(--slide-height));
	display: flex;
	align-items: center;
}

.slider--btn {
	--size: 40px;

	display: inline-flex;
	justify-content: center;
	align-items: center;
	opacity: 0.7;
	transition: opacity 250ms cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 999;

	& svg {
		width: var(--size);
		height: var(--size);
		stroke: #ffffff;
	}

	&:hover {
		opacity: 1;
	}
}

.slides__wrapper {
	width: 100%;
	height: 100%;

	display: grid;
	place-items: center;

	& > * {
		grid-area: 1 / -1;
	}
}

.slides,
.slides--infos {
	width: 100%;
	height: 100%;

	pointer-events: none;

	display: grid;
	place-items: center;
	& > * {
		grid-area: 1 / -1;
	}
}

/* ------------------------------------------------ */
/* -------------------- SLIDE --------------------- */
/* ------------------------------------------------ */

.slide {
	--slide-tx: 0px;
	--slide-ty: 0vh;
	--padding: 0px;
	--offset: 0;

	width: var(--slide-width);
	height: auto;
	aspect-ratio: var(--slide-aspect);
	user-select: none;
	perspective: 800px;

	transform: perspective(1000px)
		translate3d(var(--slide-tx), var(--slide-ty), var(--slide-tz, 0))
		rotateY(var(--slide-rotY)) scale(var(--slide-scale));
	transition: transform var(--slide-transition-duration)
		var(--slide-transition-easing);
}

.slide[data-current] {
	--slide-scale: 1.2;
	--slide-tz: 0px;
	--slide-tx: 0px;
	--slide-rotY: 0;

	pointer-events: auto;
}

.slide[data-next] {
	--slide-tx: calc(1 * var(--slide-width) * 1.07);
	--slide-rotY: -45deg;
}

.slide[data-previous] {
	--slide-tx: calc(-1 * var(--slide-width) * 1.07);
	--slide-rotY: 45deg;
}

.slide:not([data-current]) {
	--slide-scale: 1;
	--slide-tz: 0;
	/* --slide-tx: calc(var(--offset) * var(--slide-width) * 1.05); */
	/* --slide-rotY: calc(var(--dir) * -45deg); */

	pointer-events: none;
}

.slide[data-current] {
	& .slide--image {
		filter: brightness(0.8);
	}
}

.slide:not([data-current]) {
	& .slide--image {
		filter: brightness(0.5);
	}
}

.slide__inner {
	--rotX: 0;
	--rotY: 0;
	--bgPosX: 0%;
	--bgPosY: 0%;

	position: relative;
	left: calc(var(--padding) / 2);
	top: calc(var(--padding) / 2);
	width: calc(100% - var(--padding));
	height: calc(100% - var(--padding));
	transform-style: preserve-3d;
	transform: rotateX(var(--rotX)) rotateY(var(--rotY));
}

.slide--image__wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.slide--image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	object-fit: cover;
	transform: translate(-50%, -50%) scale(1.25)
		translate3d(var(--bgPosX), var(--bgPosY), 0);
	transition: filter var(--slide-transition-duration)
		var(--slide-transition-easing);
}

.slide__bg {
	position: fixed;
	inset: -20%;
	background-image: var(--bg);
	background-size: cover;
	background-position: center center;

	z-index: -1;
	pointer-events: none;

	transition: opacity var(--slide-transition-duration) ease,
		transform var(--slide-transition-duration) ease;

	&::before {
		content: "";
		position: absolute;
		inset: 0;
	}

	&::before {
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(8px);
	}

	&:not([data-current]) {
		opacity: 0;
	}

	&[data-previous] {
		transform: translateX(-10%);
	}

	&[data-next] {
		transform: translateX(10%);
	}
}

/* ------------ SLIDE INFO ---------------- */

.slide-info {
	--padding: 0px;

	position: relative;
	width: var(--slide-width);
	height: 100%;
	aspect-ratio: var(--slide-aspect);
	user-select: none;
	perspective: 800px;
	z-index: 100;
}

.slide-info[data-current] {
	& .slide-info--text span {
		opacity: 1;
		transform: translate3d(0, 0, 0);
		transition-delay: 250ms;
	}
}

.slide-info:not([data-current]) {
	& .slide-info--text span {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
		transition-delay: 0ms;
	}
}

.slide-info__inner {
	position: relative;
	left: calc(var(--padding) / 2);
	top: calc(var(--padding) / 2);
	width: calc(100% - var(--padding));
	height: calc(100% - var(--padding));
	transform-style: preserve-3d;
	transform: rotateX(var(--rotX)) rotateY(var(--rotY));
}

.slide-info--text__wrapper {
	--z-offset: 45px;

	position: absolute;
	height: fit-content;
	left: -15%;
	bottom: 15%;
	transform: translateZ(var(--z-offset));
	z-index: 2;
	pointer-events: none;
}

.slide-info--text {
	font-family: var(--font-clash-display);
	color: #fff;
	overflow: hidden;

	& span {
		display: block;
		white-space: nowrap;
		transition: var(--slide-transition-duration) var(--slide-transition-easing);
		transition-property: opacity, transform;
	}

	&[data-title],
	&[data-subtitle] {
		font-size: min(3cqw, 2.4rem);
		font-weight: 800;
		letter-spacing: 0.2cqw;
		white-space: nowrap;
		text-transform: uppercase;
	}

	&[data-subtitle] {
		margin-left: 2cqw;
		font-size: min(2.2cqw, 1.8rem);
		font-weight: 600;
	}

	&[data-description] {
		margin-left: 1cqw;
		font-size: min(1.5cqw, 0.95rem);
		font-family: var(--font-archivo);
		font-weight: 300;
	}
}

/* ------------------------------------------------ */
/* -------------------- LOADER --------------------- */
/* ------------------------------------------------ */



/* ------------------------------------------- */

.support {
	position: absolute;
	right: 10px;
	bottom: 10px;
	padding: 10px;
	display: flex;
	a {
		margin: 0 10px;
		color: #fff;
		font-size: 1.8rem;
		backface-visibility: hidden;
		transition: all 150ms ease;
		&:hover {
			transform: scale(1.1);
		}
	}
}


/* Custom Gallery*/

/* Wrapper class to encapsulate all slider styles */
.custom-image-slider-wrapper {
    --active-color: hsl(204 100 53);
    --slider-bg-color: #e1e3e5;
    --icon-default: hsl(203 5 75);
    --icon-accent: hsl(203 15 98);
    --navigation-color: hsl(203 5 25 / 0.3);
}

.custom-image-slider-wrapper *,
.custom-image-slider-wrapper *::after,
.custom-image-slider-wrapper *::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.custom-image-slider-wrapper .image-slider {
    display: flex;
    flex-flow: column;
    width: clamp(360px, 96vw, 830px);
    aspect-ratio: 16 / 9;
    min-height: 300px;
    overflow: hidden;
    border-radius: 8px;
    container-type: inline-size;
    contain: content;
    background-color: #0006;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px, rgba(0, 0, 0, 0.3) 0px 2px 4px,
        rgba(0, 0, 0, 0.25) 0px 4px 8px, rgba(0, 0, 0, 0.2) 0px 8px 16px,
        rgba(0, 0, 0, 0.15) 0px 16px 32px;
}

.custom-image-slider-wrapper .slider__content {
    flex-grow: 1;
    display: flex;
    justify-content: space-between;
}

.custom-image-slider-wrapper .slider-control--button {
    border: 0;
    background: 0;
    outline: 0;
    cursor: pointer;
    place-content: center;
    padding-inline: 3vw;
    z-index: 1;
    display: grid;
}

.custom-image-slider-wrapper .icon {
    height: 2rem;
    width: 2rem;
    fill: var(--icon-default);
    border-radius: 50%;
}

.custom-image-slider-wrapper .slider-control--button:where(:hover) {
    background-image: linear-gradient(
        to var(--position),
        #0000 0%,
        #0002,
        80%,
        #0006 100%
    );
}

.custom-image-slider-wrapper .slider-control--button:where(:hover) .icon {
    fill: var(--icon-accent);
    background: #0001;
}

.custom-image-slider-wrapper .slider-control--button:active {
    outline: 0.2em solid var(--active-color);
    outline-offset: -0.5em;
}

.custom-image-slider-wrapper .prev-button {
    --position: left;
}

.custom-image-slider-wrapper .next-button {
    --position: right;
}

/* es importante que la imagen principal en el contenedor
.image-display tenga reglas adecuadas de tamaño. Asegúrate de que la imagen seleccionada 
(en el contenedor image-display) también tenga propiedades como width: 100% y object-fit:
 cover para asegurar que se ajuste bien al espacio disponible. Si no tiene esas propiedades,
  intenta añadir algo similar:*/
.custom-image-slider-wrapper .image-display img {
    
	width: 100%;
	height:  100%; /* Puedes ajustar la altura según lo que necesites */
	object-fit: cover;
}
.image-display {
	width: 100%;
	height: 400px; /* Puedes ajustar la altura según lo que necesites */
	overflow: hidden;
	position: relative;
}

.image-display img.loading {
	opacity: 0;
}
.custom-image-slider-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%; /* Evita que el slider se expanda más allá de su contenedor */
}
    /* Configurar los botones de navegación */
.slider-control--button {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para los botones */
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
}

.slider-control--button svg {
    width: 20px;
    height: 20px;
}
.custom-image-slider-wrapper .slider-navigation {
    z-index: 10;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-columns: 100%;
    gap: 1.25rem;
    padding: 1rem;
    place-content: center;
    background-color: var(--navigation-color);
    backdrop-filter: blur(6px);
	
}


.custom-image-slider-wrapper .nav-button {
    display: grid;
    width: 100%;
    height: 100%;
    border-radius: 0.5em;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border: 0;
    aspect-ratio: 16 / 9;
    transition: filter 150ms linear, scale 266ms ease;
}

.custom-image-slider-wrapper .thumbnail {
    display: block;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    height: 100%;
}

.custom-image-slider-wrapper .nav-button[aria-selected="true"] {
    scale: 1.1;
}

.custom-image-slider-wrapper .nav-button[aria-selected="true"],
.custom-image-slider-wrapper .nav-button:focus-visible {
    outline: 0.2em solid var(--active-color);
    outline-offset: 0.2em;
}

.custom-image-slider-wrapper .nav-button[aria-selected="false"] {
    filter: opacity(0.7);
}

.custom-image-slider-wrapper .nav-button[aria-selected="false"]:where(:hover, :focus-visible) {
    filter: opacity(1);
}

@container (max-width: 660px) {
    .custom-image-slider-wrapper .nav-button:not(:has(img)) {
        background-color: rgb(241, 235, 232);
    }
    
    .custom-image-slider-wrapper .slider-navigation {
        display: flex;
        justify-content: center;
        padding-block: 1.5em;
		
    }
    
    .custom-image-slider-wrapper .nav-button {
        inline-size: 0.625rem;
        aspect-ratio: 1;
        border-radius: 50%;
    }
    
    .custom-image-slider-wrapper .nav-button > .thumbnail {
        display: none;
    }
    
    .custom-image-slider-wrapper .nav-button[aria-selected="true"] {
        background-color: black;
        scale: 1.5;
    }
}



/*Miniaturas en formato carrousel*/