/*
Theme Name: Edrian Vision Theme
Theme URI: https://edrianvision.com/
Author: Adrián Espinoza
Author URI: https://edrianvision.com/
Description: A clean, fast, and responsive custom WordPress theme developed for showcasing a personal brand, services, and creative portfolio. Built with performance, scalability, and SEO in mind.
Version: 1.0.0
Tags: custom-theme, portfolio, personal-branding, responsive, lightweight, modern, minimal, SEO-friendly
Text Domain: edriantheme
*/

/* Poppins Bold */
@font-face {
	font-family: 'TT-First-Black';
	src: url('assets/fonts/TT-First/TT Firs Neue Trial Black.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


@font-face {
	font-family: 'TT-First-DemiBold';
	src: url('assets/fonts/TT-First/TT Firs Neue Trial DemiBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'TT-First-Outline';
	src: url('assets/fonts/TT-First/TT Firs Neue Bold Outline Trial.otf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* Aceh Light */

@font-face {
	font-family: 'SF-PRO';
	src: url('assets/fonts/SF-PRO/SFPRODISPLAYMEDIUM.OTF') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Reset CSS */

/* Basics */


html {
	box-sizing: border-box;
	font-size: 16px;
	scroll-behavior: smooth;
	padding: 1.5rem;
	scroll-behavior: smooth;

}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	min-height: 100vh;
	padding: 0;
	border: 0.05vw solid #ccc;
	/* Borde proporcional al ancho de ventana */
	background-color: #000;
	color: #5d5d5d;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.75;
}


/* Reset CSS end */

/* Basic 2 */

/* Box Sizing Universal */

html {
	box-sizing: border-box;
	font-size: 16px;
	scroll-behavior: smooth;
	padding: 1.5rem;
	/* Espacio entre el borde y el contenido */
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	margin: 0;
	min-height: 100vh;
	padding: 0;
	border: 0.05vw solid #ccc;
	/* Borde proporcional al ancho de ventana */
	background-color: #000;
	color: #5d5d5d;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.75;
}


/* Preload: desactiva transiciones/animaciones hasta que cargue */

body.is-preload *,
body.is-preload *::before,
body.is-preload *::after {
	animation: none !important;
	transition: none !important;
}

/* Tipografías */

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #fff;
	line-height: 1.2;
}

h1 a {
	font-family: 'Aceh', sans-serif;
	text-transform: uppercase;
	font-size: 0.9375rem;
	/* 15px */
	font-weight: 500;
	letter-spacing: 2px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: #fff;
	text-decoration: none;
}

h2 {
	font-size: 2.5rem;
	font-family: 'TT-First-Black', sans-serif;
	line-height: 1.1;
	letter-spacing: 0.1px;
}

h3 {
	font-size: 1.35rem;
	font-family: 'TT-First-Black', sans-serif;
	line-height: 1.1;
	letter-spacing: 0.1px;
	text-transform: uppercase;

}

p,
ul,
ol,
dl,
table {
	margin-bottom: 0.1px;
}

a {
	color: #333;
	text-decoration: underline;
	transition: color 0.3s ease;
}

a:hover {
	text-decoration: none;
	color: #333;
}

/* Contenedor Principal */

.container {
	width: min(100%, 70em);
	margin-inline: auto;
	padding-inline: 2rem;
	padding-bottom: 5em;
}


/* Row */

/* Estilo base para .row, aplicando flexbox */

.row {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-top: -30px;
	margin-left: -30px;
}

.container {
	padding: 0 1.5rem;
}

.row > * {
	padding: 30px 0 0 30px;
	box-sizing: border-box;
}


/* Estilos de alineación */
.row.aln-left {
	justify-content: flex-start;
}

.row.aln-center {
	justify-content: center;
}

.row.aln-right {
	justify-content: flex-end;
}

.row.aln-top {
	align-items: flex-start;
}

.row.aln-middle {
	align-items: center;
}

.row.aln-bottom {
	align-items: flex-end;
}

/* .imp se pone primero en el orden */
.row>.imp {
	order: -1;
}

/* Sistema de columnas: Usamos % para hacerlo flexible */
.row>.col {
	flex: 1 1 100%;
	max-width: 100%;
	padding: 0 1rem;
}

.row>.col-1 {
	flex: 1 1 8.33%;
}

.row>.col-2 {
	flex: 1 1 16.66%;
}

.row>.col-3 {
	flex: 1 1 25%;
}

.row>.col-4 {
	flex: 1 1 33.33%;
}

.row>.col-5 {
	flex: 1 1 41.66%;
}

.row>.col-6 {
	flex: 1 1 50%;
}

.row>.col-7 {
	flex: 1 1 58.33%;
}

.row>.col-8 {
	flex: 1 1 66.66%;
}

.row>.col-9 {
	flex: 1 1 75%;
}

.row>.col-10 {
	flex: 1 1 83.33%;
}

.row>.col-11 {
	flex: 1 1 91.66%;
}

.row>.col-12 {
	flex: 1 1 100%;
}

/* Para las columnas desplazadas (offset) */
.row>.off-1 {
	margin-left: 8.33%;
}

.row>.off-2 {
	margin-left: 16.66%;
}

.row>.off-3 {
	margin-left: 25%;
}

.row>.off-4 {
	margin-left: 33.33%;
}

.row>.off-5 {
	margin-left: 41.66%;
}

.row>.off-6 {
	margin-left: 50%;
}

.row>.off-7 {
	margin-left: 58.33%;
}

.row>.off-8 {
	margin-left: 66.66%;
}

.row>.off-9 {
	margin-left: 75%;
}

.row>.off-10 {
	margin-left: 83.33%;
}

.row>.off-11 {
	margin-left: 91.66%;
}

.row>.off-12 {
	margin-left: 100%;
}

/* Estilos de márgenes y padding */

.row.gtr-uniform>* {
	padding-top: 50px;
}

/* Diferentes tamaños de grid */
.row.gtr-0>* {
	padding: 0;
}

.row.gtr-25>* {
	padding: 12.5px 0;
}

.row.gtr-50>* {
	padding: 25px 0;
}

.row.gtr-150>* {
	padding: 75px 0;
}

.row.gtr-200>* {
	padding: 100px 0;
}


/* Optimización para tablas */
table {
	width: 100%;
	border-collapse: collapse;
	/* Mejora el rendimiento y evita los bordes dobles */
}

table th,
table td {
	padding: 0.5em 1em;
}

table th {
	text-align: left;
	font-weight: 700;
	margin-bottom: 1em;
}

table tr {
	border-top: 1px solid #dddddd;
}

table tr:first-child {
	border-top: none;
}

table thead {
	border-bottom: 2px solid #dddddd;
}


/* Section/Header */


/* Estilos para el encabezado */
header {
	margin-bottom: 1.5em;
}

header>p {
	display: block;
	font-style: italic;
	margin-top: 0.5em;
	padding-bottom: 0.5em;
}

header.major {
	position: relative;
	text-align: center;
	top: 1em;
	margin-bottom: 3em;
}

header.major h2 {
	font-family: 'TT-First-Outline', sans-serif;
	font-size: 2em;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -1px;
	position: relative;
	top: -0.65em;
	margin: 0.1em;
	padding: 0 1em;
}

header.major h3 {

	font-family: 'TT-First-Black', sans-serif;
	font-size: 3em;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: -1px;
	position: relative;
	top: -0.65em;
	margin: 0;
	padding: 0 1em;
}

header.major h4 {
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	letter-spacing: -1.3px;
	font-size: 52px;
	color: #fff;
	margin-bottom: 0.65em;
}

/* Box */

/* Estilo para la caja principal */
.box {
	background: linear-gradient(135deg, #000000 0%, #0b0b0b 25%, #1a1a1a 50%, #111111 75%, #000000 100%);
	border-radius: 1rem;
	box-shadow: 0 0 20px rgba(155, 155, 155, 0.695);
	padding: 2.75em 1.75em;
}

/* Estilo para la imagen destacada dentro de la caja */

.box .image.featured {
	position: relative;
	overflow: hidden;
	border-radius: 1rem 1rem 0 0;
	width: auto;
	left: 1.75em;
	top: 1.75em;
	margin: -4.5em 0 4.25em -3.5em;
}

.box .image.featured img {
	display: block;
	width: 100%;
  height: auto;
  border-radius: inherit;
transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}


.box .image.featured .img-hover {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 100%; height: 100%;
	border-radius: inherit;
	transition: opacity 0.6s ease-in-out, transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
}

.box .image.featured:hover .img-hover {
  opacity: 1;
  transform: scale(1.015);
  pointer-events: auto; 
}

.box .image.featured:hover .img-base {
  opacity: 0;
transform: scale(1.01);

}


.box ul {
	text-align: left;
	list-style: none;
	font-family: 'TT-First-DemiBold', sans-serif;
	color: #fff;
	font-size: clamp(1.2rem, 2vw, 1.125rem);
	font-weight: 400;
	max-width: 100%;
	margin: 0 auto;
	line-height: 1.2;
}

.box li {
	display: flex;
	padding-left: 0;
	align-items: center;
	/* Alinea verticalmente */
	gap: 0.5rem;
	/* Espacio entre ícono y texto */
	font-family: 'TT-First-DemiBold', sans-serif;
	color: #fff;
	font-weight: 400;
	line-height: 1;
	margin-bottom: 0.5rem;
}



.box ul li svg {
	flex-shrink: 0;
	/* Evita que el SVG se deforme */
	width: 1.25rem;
	height: 1.25rem;
}



/* Button */
/* Contenedor de los botones */
.button-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	/* Permite que los botones se ajusten si no caben en la fila */
	gap: 1rem;
	/* Espaciado entre los botones */
	width: 100%;
}

/* Estilos comunes para los botones */
input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	border: 0;
	border-radius: 25px;
	font-weight: 700;
	outline: 0;
	font-size: 1.5em;
	padding: 0.65em 1.5em;
	text-align: center;
	transition: all 0.3s ease;
}

/* Estilos de hover y active (sin cambios) */
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover,
.button:hover {
	transform: translateY(-2px);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active,
.button:active {
	color: #000;
	transform: translateY(2px);
}

/* Variantes (sin cambios) */
input[type="button"].alt,
input[type="submit"].alt,
input[type="reset"].alt,
button.alt,
.button.alt {
	background: linear-gradient(135deg, #ffffff, #c5c1c1);
}

input[type="button"].alt:hover,
input[type="submit"].alt:hover,
input[type="reset"].alt:hover,
button.alt:hover,
.button.alt:hover {
	background: linear-gradient(135deg, #ffffff, #f4f4f4);
}

input[type="button"].alt:active,
input[type="submit"].alt:active,
input[type="reset"].alt:active,
button.alt:active,
.button.alt:active {
	background: linear-gradient(135deg, #ffffff, #f4f4f4);
}

/* Estilos para la variante 'icon' (sin cambios) */
input[type="button"].icon:before,
input[type="submit"].icon:before,
input[type="reset"].icon:before,
button.icon:before,
.button.icon:before {
	opacity: 0.35;
	position: relative;
	top: 0.05em;
	margin-right: 0.75em;
}

/* Estilos para la variante 'large' (sin cambios) */
input[type="button"].large,
input[type="submit"].large,
input[type="reset"].large,
button.large,
.button.large {
	font-size: 1.2em;
	padding: 0.75em 1.5em;
	border-radius: 45px;
	transition: transform 0.2s ease-in-out, background-color 0.3s ease;
}

/* Efecto hover para la variante 'large' (sin cambios) */
input[type="button"].large:hover,
input[type="submit"].large:hover,
input[type="reset"].large:hover,
button.large:hover,
.button.large:hover {
	background: linear-gradient(135deg, #ffffff, #f4f4f4);
	transform: translateY(-3px);
}

/* Efecto active para la variante 'large' (sin cambios) */
input[type="button"].large:active,
input[type="submit"].large:active,
input[type="reset"].large:active,
button.large:active,
.button.large:active {
	background: #f0efef;
	transform: translateY(2px);
}

/* Imagen about me */

.image-featured {
	width: 13.5rem; /* 200px */
	height: 13.5rem; /* 200px */
	border: 0.25rem solid white; /* 4px */
	border-radius: 50%;
	overflow: hidden;
	display: inline-block;
	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); /* 10px */
	
}

.image-featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* Estilo base para todas las imágenes */
.image {
	display: inline-block;
	outline: 0;
}

.image img {
	display: block;
	width: 100%;
	border-radius: 1rem 1rem 0 0;
	/* Bordes redondeados */
	transition: transform 0.3s ease;
}

/* Imagen centrada */
.image.centered {
	display: block;
	margin: 0 auto 2em;
	/* Espaciado consistente */
}

.image.centered img {
	width: auto;
	margin: 0 auto;
}

/* Imagen destacada a tamaño completo */
.image.featured {
	display: block;
	width: 100%;
	margin-bottom: 2em;
}

/* Imagen flotante a la izquierda */
.image.left {
	float: left;
	margin-right: 2em;
	/* Evitar margen innecesario a la izquierda */
	margin-bottom: 2em;
}

/* List */

/* Estilo para listas no ordenadas */
ul {
	list-style: disc;
	padding-left: 1.5rem;
	/* Ajuste con rem para escalabilidad */
}

ul li {
	padding-left: 1rem;
	/* Añadido un poco más de espacio para mejorar la visibilidad */
}

/* Estilo para listas ordenadas */
ol {
	list-style: decimal;
	padding-left: 1.75rem;
	/* Ajuste con rem para escalabilidad */
}

ol li {
	padding-left: 0.75rem;
	/* Mayor espacio para las listas ordenadas */
}

/* Actions */

ul.actions {
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-size: 0.65em;
	/* 15px */
	font-weight: 900;
	letter-spacing: 1px;
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	/* ✅ Alinea verticalmente los botones */
	gap: 1em;
	/* ✅ Espacio horizontal entre los botones */
	flex-wrap: wrap;
}


ul.actions li {
	display: inline-block;
	margin-left: 1rem;
	/* Uso de rem para un espaciado escalable */
	padding-left: 0;
}

ul.actions li:first-child {
	margin-left: 0;
}


/* Links */

/* Estilo para la lista de enlaces */
ul.links {
	list-style: none;
	padding-left: 0;
	margin: 0;
	/* Asegura que no haya márgenes indeseados alrededor */
	display: flex;
	/* Usamos flexbox para distribuir los enlaces de forma eficiente */
	justify-content: flex-start;
	/* Alinea los elementos hacia la izquierda */
	flex-wrap: wrap;
	/* Permite que los elementos se ajusten si no caben en una línea */
}

ul.links li {
	display: inline-block;
	border-left: solid 1px rgba(255, 255, 255, 0.1);
	/* Mayor contraste para mejor visibilidad */
	padding: 0 1.5em;
	/* Padding más espacioso con unidades relativas */
	margin: 0 1em 0 0;
}

ul.links li:first-child {
	border-left: 0;
	padding-left: 0;
	margin-left: 0;
}


/* ===== TESTIMONIOS ===== */


.testimonial-carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 4rem 1rem 5rem 1rem;
	max-width: 600px;
	margin: 0 auto;
	position: relative;
}

.testimonial-carousel input[type="radio"] {
	display: none;
}

#testimonios h2 {
	font-family: 'TT-First-Black', sans-serif;
	line-height: 1.1;
	letter-spacing: -1px;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
}

.carousel-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	transition: height 0.5s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.testimonial {
	width: 100%;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	text-align: center;
	padding: 1rem;
	box-sizing: border-box;
	pointer-events: none;
	position: relative;
	display: none;
}

.testimonial img {
	width: 8em;
	height: 8em;
	border-radius: 50%;
	margin-bottom: 1rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	border: 3px solid white;
}

.testimonial blockquote {
	font-style: italic;
	margin: 0 0 0.5rem;
	color: #f8f8f8;
	background-color: #000;
}

.testimonial .author {
	font-weight: bold;
	color: #EEF4FF;
}

#t-1:checked~.carousel-wrapper .item-1,
#t-2:checked~.carousel-wrapper .item-2,
#t-3:checked~.carousel-wrapper .item-3,
#t-4:checked~.carousel-wrapper .item-4,
#t-5:checked~.carousel-wrapper .item-5,
#t-6:checked~.carousel-wrapper .item-6 {
	display: block;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* Controles */
.carousel-controls {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
}

.carousel-controls label {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #bbb;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

#t-1:checked~.carousel-controls label[for="t-1"],
#t-2:checked~.carousel-controls label[for="t-2"],
#t-3:checked~.carousel-controls label[for="t-3"],
#t-4:checked~.carousel-controls label[for="t-4"],
#t-5:checked~.carousel-controls label[for="t-5"],
#t-6:checked~.carousel-controls label[for="t-6"] {
	background-color: #333;
}



/* Social */

ul.social {
  list-style: none;
  padding-left: 0;
  margin: 0;
  overflow: hidden;
  cursor: default;
  display: flex;
  justify-content: center;
}

ul.social li {
  display: inline-block;
  padding-left: 0;
  margin-left: 0.75em;
}

ul.social li:first-child {
  margin-left: 0;
}

ul.social li a {
  color: #fff;
  display: inline-block;
  width: 3em;
  height: 3em;
  text-align: center;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.3s ease;
  align-items: center;
  display: flex;
  justify-content: center;
}

ul.social li a:hover {
  transform: scale(1.1);
}

ul.social li a:focus {
  outline: 2px solid #fff;
}

ul.social li a svg.icon {
  width: 1em;
  height: 1em;
  display: block;
}



/* Page Wrapper */

#page-wrapper>section {
	margin-bottom: 0;
	/* Sin margen inferior */
}


/* Header */

#header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem 0;
	/* Añadir más espacio vertical */
}



/* Logo link */


/* Logo link */
.logo-link {
	display: block;
	margin: 0 auto;
}

/* Imagen */
.logo-img {
	max-width: 120%;
	height: auto;
	display: block;
	margin: 0 auto;
	margin-bottom: -15px;
	image-rendering: -webkit-optimize-contrast; 
	image-rendering: crisp-edges;
}

/* Title */
.site-title {
	padding-top: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 1em;
}

.site-title a {
	display: inline-block;
	text-decoration: none;
}

/* Header */
#header {
	position: relative;
	border-bottom: solid 1px #ccc;
	text-align: center;
	padding: 2em 0;
	/* Ajuste para dar más espacio */

}

#header h1 {
	color: #252122;
	font-weight: 900;
	font-size: 2.5em;
	letter-spacing: -0.035em;
	line-height: 1;
	margin: 0;
}


/* Nav */

#nav {
	text-align: center;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	background-image: linear-gradient(180deg, #000, #141414);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	padding: 1em 0;
}

#navPanel {
	position: fixed;
}

#nav>ul {
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav>ul>li {
	margin: 0 0.35em;
	font-style: italic;
}

#nav>ul>li>a {
	font-family: 'TT-First-DemiBold', sans-serif;
	font-style: normal;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	color: #5d5d5d;
	font-size: 0.80rem;
	font-weight: 500;
	padding: 0.6em 1.2em;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
}

#nav>ul>li>a:hover,
#nav>ul>li.active>a {
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(155, 155, 155, 0.459);
}

#nav>ul>li.current>a {
	font-weight: 700;
}



.menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: absolute;
	top: 1rem;
	right: 1.9rem;
	z-index: 1100;
	width: 30px;
	height: 25px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 1100;
	transition: transform 0.3s ease-in-out;
}

.menu-toggle span {
	width: 100%;
	height: 3.5px;
	background-color: #fff;
	border-radius: 3px;
	transition: all 0.4s ease;
	transform-origin: 4px 2px;
}


/* Ocultar el toggle en escritorio */
@media (min-width: 769px) {
	.menu-toggle {
		display: none;
	}
}



/* Responsive */

/* Responsive - para pantallas pequeñas */
@media (max-width: 768px) {



	#nav {
		padding: 1.8em;
	}


	/* Ocultar menú por defecto */
	#nav>ul {
		flex-direction: column;
		align-items: center;
		background: linear-gradient(135deg, #000000 0%, #0b0b0b 25%, #1a1a1a 50%, #111111 75%, #000000 100%);
		box-shadow: 0 0 20px rgba(155, 155, 155, 0.695);
		border-radius: 0 0 25px 25px;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		margin: 0;
	}

	#nav>ul>li>a {
		color: #c9c6c6;
	}

	/* Mostrar menú cuando tiene clase "open" */
	#nav>ul.open {
		display: flex;
	}

	#nav.open {
		display: none;
	}

	#nav>ul>li {
		margin: 0.4em 0;
	}
}




/* Banner */


/* Flecha */

#scroll-btn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	border-radius: 50%;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
	background: transparent;
	padding: 0;
	z-index: 1000;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

#scroll-btn.show {
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}

#scroll-btn.show svg {
	animation: bounce 1.5s ease-in-out infinite;
}

@keyframes bounce {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}




/* Video de fondo */
.bg-video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.1;
	transition: opacity 0.5s ease-in-out;
}

/* Banner principal */
#banner {
	position: relative;
	z-index: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: white;
}

/* Contenedor del banner */
#banner header {
	position: relative;
	z-index: 1;
	background: linear-gradient(135deg, #000000 0%, #0b0b0b 25%, #1a1a1a 50%, #111111 75%, #000000 100%);
	padding: 2rem;
	margin: 0 auto;
	max-width: 800px;
	text-align: center;
	box-shadow: 0 0 20px rgba(155, 155, 155, 0.695);
	border-radius: 20px;
}

/* Título del banner */
#banner header h2 {
	font-family: 'TT-First-Black', sans-serif;
	line-height: 1.1;
	letter-spacing: -1px;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	margin: 0.45em 0 0.45em 0;
}

/* Descripción del banner */
#banner header p {
	font-family: 'TT-First-DemiBold', sans-serif;
	font-style: normal;
	color: #f5f4f4;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.1;
	margin: 0.85em 0;
	margin-top: 0;
}

/* Sección de descripción adicional */
#description-banner {
	text-align: center;
	margin-bottom: 2em;
}


/* Servicios */

#services {
	width: 80%;
	margin: 0 auto;
	padding: 2em 0;
	text-align: center;
}


/* Contenedor del carrusel */
.carousel-container {
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 100%;
	margin: 0 auto;
}

/* Carrusel (contiene las tarjetas) */
.carousel {
	display: flex;
	transition: transform 0.5s ease;
	width: 100%;
	flex-wrap: nowrap;
}

/* Cada tarjeta de servicio */
.carousel-item {
	flex: 0 0 auto;
	/* No se estira */
	width: 33.33%;
	/* Muestra 3 elementos por fila */
	padding: 0 15px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	/* Centra el contenido de cada tarjeta */
}

.carousel-item img {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.carousel-item img.loaded {
  opacity: 1;
}

/* Estilo de la tarjeta de servicio */
.service-card {
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.service-card img {
	max-width: 120%;
	height: auto;
	justify-content: center;
	align-items: center;
	border-radius: 25px;
	border: 1px solid white;
	margin-bottom: 15px;
	box-shadow: 0 0 20px rgb(155 155 155 / .695);
}


.service-card h3 {
	font-family: 'TT-First-Black', sans-serif;
	line-height: 1.1;
	letter-spacing: 0.1px;
	font-size: 18px;
	font-weight: bold;
	margin-top: 10px;
}

/* Estilo de los botones de navegación */
.carousel-prev,
.carousel-next {
	position: absolute;
	top: 30%;
	background-color: transparent;
	color: #fff;
	border: none;
	padding: 15px;
	cursor: pointer;
	font-size: 24px;
	border-radius: 50%;
	z-index: 1;
}

.carousel-prev {
	left: 10px;
}

.carousel-next {
	right: 10px;
}





/* Footer */

#footer .row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

/* Estilos para el pie de página */
footer {
	margin-top: 2.25em;
}

.col-tecnologias {
	flex: 1.2;
	/* más pequeño */
}

.col-about {
	flex: 1.8;
	/* más grande */
}

.col-5.about-me {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Centra horizontalmente */
	text-align: center;
	/* Centra el texto */
	padding: 2rem;
	padding-right: 0;
}

#about-me strong,
b {
	font-family: 'TT-First-DemiBold', sans-serif;
	color: #fff;
	line-height: 1.2;
	font-size: clamp(1rem, 1vw, 1rem);
	font-style: normal;
	font-weight: 100;
	max-width: 100%;
	margin: 0 auto;
	line-height: 1.2;
}

#about-me {
	font-family: 'TT-First-DemiBold', sans-serif;
	color: #c5c4c4;
	line-height: 1.5;
	font-size: clamp(0.9rem, 1vw, 1rem);
	font-style: normal;
	font-weight: 100;
	max-width: 70%;
	margin: 0 auto;
	line-height: 1.2;
}

@media (max-width: 600px) {
  #about-me {
    max-width: 100%;
    line-height: 1.4;
  }
}

.email-box {
	padding-top: 1em;
}

.email-box a {
	text-decoration: none;
	color: #fff;
	font-family: 'TT-First-DemiBold', sans-serif;
}



#footer ul.technologies {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer ul.technologies li {
	display: flex;
	align-items: center;
	/* Alinea verticalmente ícono y texto */
	gap: 0.60rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	margin-bottom: 2rem;
}

/* Ícono estilo caja tipo "fecha" */
.technologie-icon {
	background-color: #fff;
	/* o el color del ícono correspondiente */
	color: #161616;
	font-size: 1.5rem;
	font-weight: bold;
	width: 3rem;
	height: 3rem;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-right: 1.5rem;
}

.technologie-icon svg {
	width: 1.5em;      
	height: 1.5em;
	color: #007BFF;
}


/* Contenedor de texto */
.technologie-content {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* Título de tecnología */

.technologie-content h3 {
	font-family: 'TT-First-Black', sans-serif;
	text-align: left;
	line-height: 1.1;
	letter-spacing: 0.1px;
	margin: 0;
	color: #ffffff;
	font-size: 1.1rem;
}

/* Descripción */
.technologie-content p {
	font-family: 'TT-First-DemiBold', sans-serif;
	text-align: left;
	line-height: 1.2;
	margin: 0;
	color: #c5c4c4;
	line-height: 1.4;
}

/* Accesibilidad */
.technologie-icon .sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}



































/* Copyright */

#copyright {
	font-family: 'TT-First-DemiBold', sans-serif;
	position: absolute;
	bottom: -1em;
	left: 0;
	width: 100%;
	padding: 0.85em 0.5em;
	font-size: 0.8rem;
	color: rgba(238, 244, 255, 0.85);
	text-align: left;
}


#copyright .links {
	display: inline-block;
	margin: 0;
}

/* MEDIA QUERYS ------------------------------------------------------------------------------ */


/* =======================
   Responsive Header Styles
======================= */

/* Medium: tablets */
@media screen and (max-width: 980px) {
	header.major h2 {
		font-size: 2.5em;
		top: -0.5em;
	}

	header.major h4 {
		font-size: 42px;
	}

	.logo-img {
		max-width: 120%;
	height: auto;
	display: block;
	margin: 0 auto;
	image-rendering: -webkit-optimize-contrast; 
	image-rendering: crisp-edges;
	}
}

/* Small: phones */
@media screen and (max-width: 736px) {
	header.major h2 {
		font-size: 2em;
		padding: 0 0.5em;
		top: -0.4em;
	}

	header.major h4 {
		font-size: 32px;
		letter-spacing: -0.8px;
	}

	header>p {
		font-size: 0.95rem;
		padding: 1em;
	}

}

/* Extra Small: very narrow devices */
@media screen and (max-width: 480px) {
	header.major h2 {
		font-size: 1.75em;
	}

	header.major h3 {
		font-size: 2.2em;
		padding-left: 5px;
		margin: 10px auto;
	}

	header.major h3.subtitle {
		font-size: 2.2em;
		padding: 10px;
		margin: -4px auto;

	}
	
	.header.major {
	    margin-botton: 1em;
	}

	#services {
		padding-top: 3em;
		margin: 12em 0 0 0;
	}

	.box ul {
		padding-left: 1px;
	}

	h2.subtitle {
		font-size: 2em;
		letter-spacing: 0.1px !important;
	}

	header.major h4 {
		font-size: 26px;
	}

	header>p {
		font-size: 0.8em !important;
		padding: 0;
		padding-bottom: 1em;
		padding-top: 0.9em;
	}

	#banner {
		height: 50vh;


	}


}


/* ========================
   1. Media Queries: <=1280px
======================== */

@media screen and (max-width: 1280px) {
	.container {
		padding: 0 1.5rem;
	}

	.row {
		margin-top: -30px;
		margin-left: -30px;
	}

	.row>* {
		padding: 30px 0 0 30px;
	}
}

/* ========================
   2. Media Queries: <=980px
======================== */

@media screen and (max-width: 980px) {
	.container {
		padding: 10px;
	}

	html,
	body {
		overflow-x: hidden;
	}

}

/* ========================
   3. Media Queries: <=768px
======================== */

@media screen and (max-width: 768px) {
	.container {
		padding: 10px;
	}

	#header {
		padding: 0;
	}

	#header h1 {
		font-size: 2em;
	}

	#banner header {
		padding: 2.3rem;
		margin: auto;
	}

	#banner header h2 {
		font-size: 1.3em;
	}

	.logo-img {
		max-width: 150%;
		margin-bottom: -15px;
	}


	ul.social li {
		margin-left: 0.5em;
	}

	.carousel-item {
		width: 50%;
	}
}

/* ========================
   4. Media Queries: <=736px
======================== */

@media screen and (max-width: 736px) {

	body,
	input,
	textarea,
	select {
		font-size: 11pt;
	}

	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size: 1.3em;
	}

	input[type="button"].large,
	input[type="submit"].large,
	input[type="reset"].large,
	button.large,
	.button.large {
		font-size: 1.1em;
		padding: 0.65em 1.5em;
	}

	ul.actions li {
		display: block;
		padding: 0em;
	}

	ul.actions li .button {
		width: 100%;
	}

	ul.actions li:first-child {
		margin-top: 0;
	}
}

/* ========================
   5. Media Queries: <=480px
======================== */

@media screen and (max-width: 480px) {
	.carousel-item {
		width: 100%;
	}
}



/* BOTONES */

@media (max-width: 768px) {

	/* Alineación horizontal de los botones */
	.button-container {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}

	/* Reducir tamaño de los botones */
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		font-size: 1em;
		padding: 0.55em 1.2em;
		border-radius: 20px;
	}

	/* Ajustar la variante 'large' */
	input[type="button"].large,
	input[type="submit"].large,
	input[type="reset"].large,
	button.large,
	.button.large {
		font-size: 1.1em;
		padding: 0.65em 1.3em;
		border-radius: 35px;
	}

	/* Ajuste de variantes 'alt' y 'icon' */
	.button.alt,
	.button.icon {
		font-size: 1em;
	}
}

/* Pantallas de 480px o menos */
@media (max-width: 480px) {

	/* Alineación horizontal de los botones */
	.button-container {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 0.8rem;
	}

	/* Reducir más los botones */
	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		font-size: 0.9em;
		padding: 0.7em 1.5em;
		border-radius: 15px;
	}

	/* Ajustar la variante 'large' */
	input[type="button"].large,
	input[type="submit"].large,
	input[type="reset"].large,
	button.large,
	.button.large {
		font-size: 2em;
		padding: 0.55em 1.2em;
		border-radius: 30px;
	}

	/* Ajuste de variantes 'alt' y 'icon' */
	.button.alt,
	.button.icon {
		font-size: 1.5em;
	}
}

/* TESTIMONIOS */

@media (max-width: 768px) {
	.testimonial-carousel {
		padding: 2rem 1rem;
	}

	.testimonial img {
		width: 90px;
		height: 90px;
	}

	.testimonial blockquote {
		font-size: 0.95rem;
	}

	.testimonial .author {
		font-size: 1rem;
		margin: 1px;
	}
}

@media (max-width: 480px) {
	.testimonial-carousel {
		padding: 1px 14px 1px 1px;
	}

	.testimonial img {
		width: 90px;
		height: 90px;
		margin-bottom: 0.75rem;
	}

	.testimonial blockquote {
		font-size: 0.9rem;
		line-height: 1.4;
		padding: 0 0.5rem;
	}

	.carousel-controls {
		gap: 0.3rem;
		margin: 1px;
	}

	.carousel-controls label {
		width: 8px;
		height: 8px;
	}
}


/*********************/



@media (max-width: 768px) {
	#footer .row {
		flex-direction: column;
	}

	.col-tecnologias,
	.col-about {
		flex: 1 1 100%;
		width: 100%;
		padding: 1rem 0;
	}

	#footer ul.technologies li {
		flex-direction: column;
		align-items: flex-start;
	}

	.technologie-icon {
		margin-right: 0;
		margin-bottom: 0.75rem;
	}
	
	.technologie-icon svg {
	width: 1.5em;      
	height: 1.5em;
	color: #007BFF;
}

	.technologie-content h3,
	.technologie-content p {
		text-align: left;
		font-size: 1em;
	}
}

@media (max-width: 480px) {
	.col-5.about-me {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin: 10px 5px 10px 45px;
		width: 100%;
		max-width: 90%;
		padding: 0;
	}

	.technologie-icon {
		width: 4rem;
		height: 4rem;
		font-size: 1.5rem;
	}
	
	.technologie-icon svg {
	width: 2em;      
	height: 2em;
	color: #007BFF;
}

	#copyright {
		position: relative;
		bottom: 0;
		text-align: center;
		font-size: 0.75rem;
		padding: 1em 0.5em;

	}

	#copyright .links {
		display: block;
		text-align: center;
		margin-top: 0.5em;
		margin-left: 35px;
	}
}