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

:root {
/* 	colores */
  --anaranjado: #ff8800;
  --anaranjado-60: rgb(255 136 0 / 60%);
  --azul: #51778A;
  --azul-claro: #b5d3d8;
  --gris-oscuro: #1F1F1F;
  --gris-oscuro-90: rgb(31 31 31 / 90%);
  --gris-medio-40: rgb(124 124 124 / 15%);
  --blanco: #ffffff;

/*   fuentes */
	--titulo: "Poppins", serif;
	--texto: "Inter", serif;

}

body {
	font-family: var(--texto);
	font-size: 16px;
	background-image: url('img/fondo.svg');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;

}

/* titulos */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--titulo);
	font-weight: bolder;
}

/* colores de fondo */
.bg-anaranjado {
	background: var(--anaranjado);
}

.bg-azul {
	background: var(--azul);
}

.bg-azul-claro {
	background: var(--azul-claro);
}

.bg-gris-oscuro {
	background: var(--gris-oscuro);
}

.bg-gris-medio-40 {
	background: var(--gris-medio-40);
}

.bg-blanco-10 {
    background: rgb(255 255 255 / 10%);
}

/* colores de texto */
.tx-anaranjado {
	color: var(--anaranjado);
}

.tx-azul {
	color: var(--azul);
}

.tx-azul-claro {
	color: var(--azul-claro);
}

.tx-gris-oscuro {
	color: var(--gris-oscuro);
}

.tx-blanco {
	color: var(--blanco);
}

/* botones */
.btn-anaranjado {
	background: var(--anaranjado);
	color: var(--blanco);
	border: 1px solid transparent;
	border-radius: 15px;
}

.btn-anaranjado:hover {
	background: var(--blanco);
	color: var(--anaranjado);
	border: 1px solid var(--anaranjado);
}

.btn-anaranjado-60 {
	background: var(--anaranjado-60);
	color: var(--blanco);
	border: 1px solid transparent;
	border-radius: 15px;
}

.btn-anaranjado-60:hover {
	background: rgba(255, 255, 255, 0.83);
	color: var(--anaranjado);
	border: 1px solid var(--anaranjado);
}

.btn-azul {
	background: var(--azul);
	color: var(--blanco);
	border: 1px solid transparent;
	border-radius: 15px;
}

.btn-azul:hover {
	background: var(--blanco);
	color: var(--anaranjado);
	border: 1px solid var(--anaranjado);
}

.navbar-toggler {
	border: none;
	outline: none;
}
.navbar-toggler .animated-icon span {
	display: block;
	background-color: white;
	height: 3px;
	width: 25px;
	margin: 5px auto;
	transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.navbar-toggler .animated-icon.open span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.navbar-toggler .animated-icon.open span:nth-child(2) {
	opacity: 0;
}
.navbar-toggler .animated-icon.open span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.barra-principal {
	background: var(--gris-oscuro-90);
}

.logo-okai {
	height: 80px;
}

.logo-okai img {
	height: 70px;
}

.menu-lista {
	font-family: var(--titulo);
}

.menu-lista ul li a {
	color: var(--blanco);
	font-size: 1.1rem;
}

.menu-lista ul li a:hover {
	color: var(--anaranjado);
}

.menu-lista ul li a.activo {
	color: var(--anaranjado);
}

.dropdown:hover .dropdown-menu {
	display: block;
}

.dropdown-item.active, .dropdown-item:active {
    text-decoration: none;
    background-color: var(--azul);
}


/* Slide Principal */

.carousel-caption-start {
    position: absolute;
    top: 34%;
    left: 15%;
    width: 25%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
/*     text-align: justify; */
}

.carousel-caption-end {
    position: absolute;
    top: 9%;
    bottom: 5%;
    right: 15%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}

.services-section {
	padding: 80px 0 10px;
}

.service-card {
	background: rgba(255, 255, 255, 0.85);
	transition: transform 0.3s ease-in-out, background 0.3s ease-in-out;
}
.service-card:hover {
	background: #fff;
	transform: scale(1.05);
}

.service-icon {
    font-size: 3rem;
    color: var(--azul);
    transition: transform 1s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

.service-card:hover .service-icon {
    transform: rotate(360deg);
}


/* Carousel CSS Starts */

.logos-clientes {
	width: 95%;
}

.hdcarousel_wrapper {
	display: grid;
	grid-template-rows: 1fr max-content;
	grid-gap: 0.4em;
	position: relative;
	line-height: 1;
	height: 190px;
}

.hdcarousel {
	position: relative;
	overflow-x: clip;
}

.hdcarousel_item {
	position: absolute;
/* 	padding: 2rem; */
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	top: 0;
	transition: all ease-in-out 800ms;
	box-shadow: 0px 0px 6px #d5cbca, 0px 0px 6px #ffffff;
}

.hdcarousel_item img {
	border-radius: 12px;
}

.hdcarousel_item_active {
	background-color: #fff;
	top: -1rem;
}

.hdcarousel_nav {
	width: max-content;
	margin: 0 auto;
}

.hdcarousel_nav_item {
	display: inline-block;
	color: var(--blanco);
	padding: 0.6em;
	box-shadow: 0px 0px 6px #d5cbca, 0px 0px 6px #ffffff;
/* 	background: rgba(255, 255, 255, 0.1); */
	cursor: pointer;
	margin: 0 0.4em;
	border-radius: 8px;
	transition: all ease-in-out 300ms;
}

.hdcarousel_nav_item:hover {
	background-color: var(--blanco);
	color: var(--gris-oscuro);
}


/* porque escogernos */


.nosotros-izq {
    border-radius: 20px 0 0 20px;
    padding: 0 25px;
    width: 56.5%;
    margin-left: 12px;
}

.nosotros-der {
    border-radius: 0 54px 54px 0;
    padding: 0;
}

.nosotros-incio .titulo-nosotros {
	font-size: 48px;
    line-height: 36px;
    position: relative;
    top: -45px;
    left: 10px;
    text-align: end;
}

.btn-agendar {
	font-size: 20px;
}

.btn-agendar i {
	font-size: 11px;
    position: relative;
    bottom: 5px;
    left: -1px;
}

.nosotros-incio .figuras{
	position: absolute;
}

.nosotros-incio .figuras .fig-1 {
    position: relative;
    left: -32px;
    top: 175px;
    transform: scale(0.8);
}

.nosotros-incio .figuras .fig-2{
	position: relative;
	left: 107px;
    top: 269px;
}

.nosotros-incio .figuras .fig-3{
	position: relative;
	left: 45px;
    top: -171px;
}


/* testimonios clientes */


.testimonios-section {
    padding: 80px 0;
    overflow: hidden;
}

.carousel-wrapper {
    width: 100%;
    position: relative;
    padding: 40px 0;
    overflow-x: hidden;
}

.carousel-container {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.testimonio-card {
    flex: 0 0 calc(33.333% - 40px);
    min-width: calc(33.333% - 40px);
    margin: 0 20px;
    background: rgb(255 255 255 / 15%);
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.6s ease;
    transform: scale(0.8);
    opacity: 0.7;
}

.testimonio-card.active {
    transform: scale(1);
    opacity: 1;
}

.testimonio-card h4 {
    color: var(--azul-claro);
    padding: 25px 0 10px;
    font-weight: 200;
}

.testimonio-card p {
    color: var(--blanco);

}

.controls-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 3px;
}

.carousel-btn {
    cursor: pointer;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--azul-claro);
    transition: opacity 0.3s;
}

#prevBtn {
    position: absolute;
    left: 0;
    top: 269px;
}


#nextBtn {
    position: absolute;
    right: 0;
    top: 269px;
}


/* preguntas sobre IA */

.btn-preguntas {
	color: var(--blanco);
    padding: 12px;
    border-radius: 12px;
    display: block;
    width: 100%;
}

.btn-preguntas i {
	position: relative;
    top: 2px;
    left: 5px;
}

.btn-preguntas:hover {
	background: var(--blanco);
	color: var(--gris-oscuro);
}

.img-preguntas {
	transform: scale(0.9);
	height: 300px;
}

.destacados-preguntas{
	border-radius: 12px;
}

/* Breakpoint pantallas XLL inferiores a 1400px */

@media (max-width:1399px) {

	.carousel-caption-start {
	    top: 33%;
	    width: 35%;
	}

	.carousel-caption-end {
	    top: 5%;
	    bottom: 5%;
	    right: 8%;
	    text-align: center;
	    transform: scale(0.8);
	}
}


/* formulario de contacto */

.logo-footer {
	transform: scale(0.8);
}

.card-formulario {
    border-radius: 15px;
    border: none;
}
.form-control {
    border-radius: 15px;
}
textarea {
    resize: none;
}


/* Footer */

.list-unstyled a{
    color: var(--blanco);
}

.list-unstyled a:hover {
    color: var(--azul-claro);
    transition: color 0.3s ease;
}

.list-unstyled i {
    width: 25px;
    text-align: center;
}


/* Banner cookies */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
    z-index: 9999;
    padding: 1.5rem 0;
    display: none;
}

.cookie-banner p {
    font-size: 0.9rem;
    color: #444;
    line-height: 1.5;
    margin: 0;
}

.cookie-link {
    color: #0066cc;
    text-decoration: underline;
}

.cookie-btn {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cookie-banner {
        padding: 1rem;
    }
}


/* Breakpoint pantallas XL inferiores a 1200px */

@media (max-width:1199px) {

	.carousel-caption-start {
	    top: 30%;
	}

	.carousel-caption-end {
	    top: -2%;
	    bottom: 1%;
	    right: 3%;
	    text-align: center;
	    transform: scale(0.6);
	}

	.nosotros-incio .titulo-nosotros {
        font-size: 30px;
        line-height: 25px;
        position: static;
        padding: 20px 0;
    }

	.nosotros-incio .figuras .fig-1 {
        position: relative;
        left: 0px;
        top: 175px;
        transform: scale(0.6);
    }

	.nosotros-incio .figuras .fig-2 {
        position: relative;
        left: 123px;
        top: 247px;
        transform: scale(0.8);
    }

    .nosotros-incio .figuras .fig-3 {
	    position: relative;
	    left: 9px;
	    top: -171px;
	}

	.nosotros-izq {
	    padding: 0 25px 30px;
	}

	.nosotros-der {
	    border-radius: 0 20px 20px 0;
	    padding: 0;
	}
}


/* Breakpoint pantallas LG inferiores a 992px */

@media (max-width: 991px) {
	.offcanvas-menu {
		position: fixed;
		top: 80px;
		left: -250px;
		width: 250px;
		height: 100vh;
		background: #262627;
		transition: left 0.3s ease-in-out;
		padding-top: 60px;
		display: block;
		z-index: 999;
	}

	.nav-link:focus, .nav-link:hover {
    	color: var(--anaranjado);
	}

	.offcanvas-menu.show {
		left: 0;
	}
	.offcanvas-menu ul {
		list-style: none;
		padding: 0;
	}
	.offcanvas-menu ul li {
		padding: 15px;
	}
	.offcanvas-menu ul li a {
		color: white;
		text-decoration: none;
		display: block;
	}

	.offcanvas-menu ul li a:hover {
     color: var(--anaranjado)
    }

    .offcanvas-menu ul li a:focus {
     color: var(--blanco)
    }

    .offcanvas-menu ul li a.activo {
		color: var(--anaranjado);
	}

	.carousel-item img {
	    height: 390px;
	}

	.carousel-caption-start {
	    width: 45%;
	    top: 27%;
	}

	.carousel-caption-end {
	    transform: scale(0.55);
	    top: 1%;
	    bottom: 2%;
	    right: -4%;
	}

	.testimonio-card {
        flex: 0 0 calc(50% - 40px);
        min-width: calc(50% - 40px);
    }

    .testimonio-card.active {
	    transform: scale(0.8);
	    opacity: 1;
	}

    .nosotros-incio .titulo-nosotros {
	    font-size: 25px;
	    line-height: 20px;
	    position: static;
	    padding: 20px 0;
	}

	.nosotros-incio .figuras .fig-1 {
	    position: relative;
	    left: 90px;
	    top: 140px;
	    transform: scale(0.6);
	}

	.nosotros-incio .figuras .fig-2 {
	    position: relative;
	    left: 126px;
	    top: 196px;
	    transform: scale(0.7);
	}

	.nosotros-izq {
	    padding: 0 25px 30px;
	    margin-left: 6px;
	}

}

@media (min-width: 992px) {
	.offcanvas-menu { display: none !important; }
}


/* Breakpoint pantallas MD inferiores a 768px */

@media (max-width: 767px) {

	#slidePrincipal {
		margin-top: 96px;
	}

	.carousel-item img {
	    height: 350px;
	}

	.carousel-caption-end {
	    display: none;
	}

	.carousel-caption-start {
	    top: 8%;
	    left: 12%;
	    right: 9%;
	    width: 75%;
	    text-align: center;
	}

	.carousel-caption-start h3 {
	    font-size: 26px;
	}

	.carousel-caption-start p {
	    line-height: 18px;
	}

	#carrusel-logos {
		display: none;
	}

	.testimonio-card {
        flex: 0 0 calc(100% - 40px);
        min-width: calc(100% - 40px);
    }

    .testimonio-card.active {
	    transform: scale(0.85);
	    opacity: 1;
	}

	.nosotros-izq {
		border-radius: 20px 20px 0 0;
		padding: 0 25px 35px;
		width: 100%;
		margin-left: 0;
	}

	.nosotros-der {
	    border-radius: 0 0 20px 20px;
	    padding: 20px;
	}

	.nosotros-incio .figuras .fig-1 {
        position: relative;
        left: -45px;
        top: 140px;
        transform: scale(0.6);
    }

	.nosotros-incio .figuras .fig-3 {
	    position: relative;
	    left: 15px;
	    top: -171px;
	}

	.nosotros-incio .titulo-nosotros {
	    font-size: 32px;
	    line-height: 36px;
	    position: static;
	    padding: 24px 0;
	}
	
}

/* Breakpoint pantallas SM inferiores a 576px */

@media (max-width: 575px) {

	.testimonio-card.active {
	    transform: scale(0.85);
	    opacity: 1;
	}

	.testimonios-section {
	    padding: 80px 0 0;
	}

	section.nosotros-incio > div {
	    width: 90%;
	}

	.nosotros-izq {
		border-radius: 20px 20px 0 0;
		padding: 0 25px 35px;
		width: 100%;
		margin-left: 0;
	}

	.nosotros-der {
	    border-radius: 0 0 20px 20px;
	    padding: 20px;
	}

	.nosotros-incio .titulo-nosotros {
	    font-size: 32px;
	    line-height: 29px;
	    position: static;
	    padding: 18px 0;
	}

	.nosotros-incio .figuras .fig-1 {
        position: relative;
        left: -18px;
        top: 108px;
    }

    .nosotros-incio .figuras .fig-2 {
        position: relative;
        left: 24px;
        top: 271px;
        transform: scale(0.7);
    }

	.nosotros-incio .figuras .fig-3 {
	    position: relative;
        left: -40px;
        top: -163px;
	}
	
}

/* Estilos para el botón flotante de WhatsApp */
.whatsapp-flotante {
	position: fixed; /* Posicionamiento fijo relativo a la ventana del navegador */
	width: 60px;     /* Ancho del botón */
	height: 60px;    /* Alto del botón */
	bottom: 40px;    /* Distancia desde el borde inferior */
	right: 40px;     /* Distancia desde el borde derecho */
	background-color: #ff8800; /* Color de fondo de WhatsApp */
	color: #FFF;     /* Color del icono (blanco) */
	border-radius: 50%; /* Hace el botón circular */
	text-align: center; /* Centra el icono dentro del botón */
	font-size: 30px;    /* Tamaño del icono (si fuera un carácter de fuente) */
	box-shadow: 2px 2px 6px rgba(0,0,0,0.3); /* Sombra para darle profundidad */
	z-index: 1000;   /* Asegura que esté por encima de otros elementos */
	display: flex;   /* Para centrar el SVG fácilmente */
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, background-color 0.3s ease; /* Transición suave para hover */
}

.whatsapp-flotante:hover {
	transform: scale(1.1); /* Agranda un poco el botón al pasar el mouse */
	background-color: #1DAA54; /* Color de fondo ligeramente más oscuro al pasar el mouse */
}

.whatsapp-flotante svg {
	width: 32px;  /* Tamaño del icono SVG */
	height: 32px;
	fill: #FFF; /* Color del icono SVG */
}