/*
Theme Name: KATHER
Description: 
Author: Kather Agency
Author URI: 
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


main#main {
  transition: background-color 1s ease !important; /* Duración y tipo de transición */
}
/*******CODIGO PARA NAVBAR Y MENU OFF CANVAS*******/
.no-scroll {
  overflow: hidden;
}
.ka-toggle-btn {
  display: flex;
  justify-content: flex-end;
	z-index:999 !important;
}

.burger {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.75em 2em 1.5em 2em;
  background: rgba(255, 255, 255, 0);
  border-radius: 0.25em;
  outline: none;
  height: 20px;
  width: 28px;
  border: none;
  transition: all 250ms ease-out;
  cursor: pointer;

}

.burger:before,
.burger:after {
  content: "";
  width: 40px;
  height: 2px;
  position: absolute;
  background: #fff;
  transition: all 250ms ease-out;
  will-change: transform;
}

.burger:before {
  transform: translateY(-3px);
}

.burger:after {
  transform: translateY(3px);
}

.active.burger:before {
  transform: translateY(0) rotate(45deg);
}

.active.burger:after {
  transform: translateY(0) rotate(-45deg);
}

.ka-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /*max-height:100vh;*/
  display: flex;
  background: #000;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  will-change: transform;
  /*overflow: hidden !important;*/
}

.ka-overlay-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 90vh;
  display: flex;
  /*gap: 1em;*/
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.ka-menu-item {
  display: flex;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.ka-menu-item p {
  position: relative;
  text-align: center;
  font-family: "Inter";
  font-weight:800;
  font-size: 6rem;
	margin: 1.5rem 0;
  line-height: 100%;
  will-change: transform;
  transition: letter-spacing 0.3s;
}

.ka-menu-item p:hover {
  letter-spacing: 0.075em;
}

/* .menu-item p#active::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 0;
  transform: translateY(-50%);
  background: #c03f13;
  width: 0%;
  height: 12px;
}
 */
.ka-menu-item a {
  color: #fff;
  text-decoration: none;
}

.ka-sub-nav {
  position: absolute;
  bottom: 2% !important;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
  opacity: 0;
}

.ka-sub-nav p a{
  font-family: "Inter";
  text-decoration: none;
  font-size: 20px;
  color: #FFF;
}

@media (max-width: 900px) {
	.ka-menu-item p {  
  		font-size: 7vw;
		margin: 2rem 0;
	}
	.ka-sub-nav {
  		bottom: 15% !important;
 	}
}


/*******FIN CODIGO PARA NAVBAR Y MENU OFF CANVAS*******/
/*****************CODIGO PARA BANNER******************/
body {
  overflow-x: hidden;
}

/* Contenedor principal del carrusel */
.ka-carousel-container {
  position: relative;
  overflow: hidden; /* Oculta los elementos que salen del contenedor */
}

/* Pseudo-elementos para los degradados de los extremos */
.ka-carousel-container::before,
.ka-carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px; /* Ancho del degradado, ajusta según necesites */
  height: 100%;
  z-index: 2; /* Asegura que los degradados estén por encima del carrusel */
  pointer-events: none; /* Evita que interfiera con interacciones del usuario */
}

.ka-carousel-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.ka-carousel-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* Carrusel de logotipos */
.ka-carousel {
  display: flex; /* Flexbox para alinear los logotipos en línea */
  gap: 20px; /* Espacio entre los logotipos, ajusta según necesites */
  white-space: nowrap; /* Evita que los elementos se envuelvan */
}

/* Estilo de los logotipos */
.ka-logo {
  height: 100%; /* Logotipos ajustados a la altura del contenedor */
  max-height: 20px; /* Ajusta según necesites */
  object-fit: contain; /* Mantiene las proporciones de los logotipos */
  transition: transform 0.3s ease; /* Efecto suave en hover */
}

@media only screen and (min-width: 600px){
	.h1-desktop > h1{
		font-size: 7rem !important;
	}
}
/*****************FIN CODIGO PARA BANNER******************/

/*****************CODIGO PARA NOSOTROS****************/
p.p-title{
	text-align:center;
	color:rgba(0,0,0,0.4) !important;
	font-size:1.5vw;
	font-family: var(--body_typography-font-family) !important;
	letter-spacing:0.1px !important;
}







/**********CODIGO PARA SECCIÓN SERVICIOS DE SVG DIBUJANDOSE****************/


:root{
  --primary:#0c5ed3;
  --secondary:#e1e1e1;
  --background:#141414;

 /* --font-heading:"Neue Machina",system-ui,ui-sans-serif,Segoe UI,Roboto,Arial,sans-serif;
  --font-body:system-ui,ui-sans-serif,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  --font-bold:"Neue Machina Plain Ultrabold","Neue Machina",system-ui,ui-sans-serif,Arial,sans-serif; 
*/

  --grid-column:7.03125vw;
  --grid-margin:4.106vw;
  --grid-gutter:calc((100vw - (var(--grid-margin)*2) - (var(--grid-column)*12))/11);

  --vr:calc(100vw/1920);

  /* offset de la rayita junto al título (se recalibra por breakpoint) */
  --title-gap:-17px;
}
@media (min-aspect-ratio:1920/1080){ :root{ --vr:calc(100vh/1080);} }
@media (max-aspect-ratio:1920/1080){ :root{ --vr:calc(100vw/1920);} }
@media (max-width:991px) and (min-aspect-ratio:820/1180){ :root{ --vr:calc(100vh/1180);} }
@media (max-width:991px) and (max-aspect-ratio:820/1180){ :root{ --vr:calc(100vw/820);} }
@media (max-width:767px) and (min-aspect-ratio:414/896){ :root{ --vr:calc(100vh/896);} }
@media (max-width:767px) and (max-aspect-ratio:414/896){ :root{ --vr:calc(100vw/414);} }
@media (min-width:768px){
  :root{
    --grid-margin:calc(17*var(--vr));
    --title-gap:calc(-1*var(--vr)*35);
  }
}
@media (min-width:992px){
  :root{
    --grid-margin:calc(40*var(--vr));
    --title-gap:calc(-1*var(--vr)*30);
  }
}

/*html,body{ height:100%; }
body{ background:var(--background); color:#fff; font-family:var(--font-body); line-height:1.35; }*/

/* -------------------------------------------------
   STEPS SECTION
------------------------------------------------- */
section.ka-steps{
  position:relative;
  padding-top:min(130px,28.98vw);
  padding-bottom:min(256px,61.84vw);
  overflow:hidden;

  /* controla el arranque vertical de la línea */
  --line-top: calc(var(--vr)*188);
}
@media (min-width:768px){ section.ka-steps{ --line-top: calc(var(--vr)*233); } }
@media (min-width:992px){ section.ka-steps{ --line-top: calc(var(--vr)*140); } } /* ajusta 100–220 si quieres */

/* Intro */
.ka-steps-intro-txt{
	width:100vw;
	text-align:center;
}
.ka-steps-intro-txt>h2{
	
	color:#fff!important;
	font-size: 8vw !important;
	font-weight:600 !important;
	mix-blend-mode:difference;
	text-transform:uppercase;
}
p.ka-service-intro-txt{
	text-align:center;
	color:rgba(255,255,255,0.4) !important;
	font-size:1.5vw;
	text-transform:uppercase;
}
/*p.ka-service-txt{
	text-align:center;
	color:rgba(255,255,255,0.4) !important;
	font-size:1.5vw;
	text-transform:uppercase;
	
}*/

/*.ka-steps-intro-txt{
  margin-left:var(--grid-margin);
  margin-right:var(--grid-margin);
  margin-bottom:min(60px,14.49vw);
}
@media (min-width:768px){
  .ka-steps-intro-txt{
    margin-left:calc(var(--grid-margin) + var(--grid-column) + var(--grid-gutter));
    margin-right:calc(var(--grid-margin) + var(--grid-column) + var(--grid-gutter));
  }
}
@media (min-width:992px){
  .ka-steps-intro-txt{ width:calc(var(--grid-column)*5 + var(--grid-gutter)*4); }
}
*/
h2.title-service{
  /*font-family:var(--font-heading); font-weight:400;*/
  font-size:min(32px,6.763vw); line-height:1.25; margin-bottom:.35em;
	color:#fff !important;
}
@media (min-width:768px){
  h2.title-service{ font-size:calc(var(--vr)*47)!important; line-height:calc(var(--vr)*58)!important; margin-bottom:calc(var(--vr)*13)!important; }
}
@media (min-width:1200px){
  h2.title-service{ font-size:calc(var(--vr)*56)!important; line-height:calc(var(--vr)*68)!important; margin-bottom:calc(var(--vr)*15)!important; }
}
p.ka-service-txt{ color:var(--secondary)!important; font-size:14px; }
@media (min-width:768px){ p.ka-service-txt{ font-size:calc(var(--vr)*18);} }
@media (min-width:992px){ p.ka-service-txt{ font-size:calc(var(--vr)*22); line-height:calc(var(--vr)*32);} }

/* ---------- SVG line (tres variantes) ---------- */
.ka-steps .ka-line{
  position:absolute;
  right:-30px;
  top:var(--line-top);
  height:calc(100% - var(--line-top));
  width:auto;
  pointer-events:none;
  z-index:-1;
  opacity:1;
}
.ka-steps .ka-line path{
  stroke:var(--primary);
  stroke-width:5;
  fill:none;
  filter:drop-shadow(0 0 20px var(--primary));
}
.ka-steps .ka-line-desktop.ka-blur path{ filter:drop-shadow(0 0 30px var(--primary)); }

.ka-line-mobile{ display:block; width:110%; }
.ka-line-ipad{ display:none; }
.ka-line-desktop{ display:none; }
@media (min-width:768px){
  .ka-line-mobile{ display:none; }
  .ka-line-ipad{ display:block; width:100%; }
}
@media (min-width:992px){
  .ka-line-ipad{ display:none; }
  .ka-line-desktop{ display:block; }
}

/* ---------- Cards base ---------- */
.ka-steps .ka-step{
  position:relative;
  width:calc(var(--grid-column)*8 + var(--grid-gutter)*7);
  text-align:left; /* por defecto: steps a la IZQUIERDA (01, 03) */
  margin-left:calc(var(--grid-margin) + var(--grid-column) + var(--grid-gutter));
}
@media (min-width:768px){
  .ka-steps .ka-step{
    width:calc(var(--grid-column)*6 + var(--grid-gutter)*5);
    margin-left:calc(var(--grid-margin) + var(--grid-column)*2 + var(--grid-gutter)*2);
  }
}
@media (min-width:992px){
  .ka-steps .ka-step{
    width:calc(var(--grid-column)*3 + var(--grid-gutter)*2);
    margin-left:calc(var(--grid-margin) + var(--grid-column)*5 + var(--grid-gutter)*5);
  }
}

/* Números gigantes */
.ka-steps .ka-step .ka-num{
  font-family:var(--font-bold);
  font-size:min(170px,35vw);
  position:absolute;
  top:calc(-1*(var(--vr)*74));
  left:calc(-1*(var(--grid-column) + var(--grid-gutter))); /* por defecto, a la IZQ */
  /*opacity:.04;*/
opacity:0.1!important;
  user-select:none; pointer-events:none;
}
@media (min-width:768px){
  .ka-steps .ka-step .ka-num{ font-size:calc(var(--vr)*231); top:calc(-1*(var(--vr)*118)); }
}
@media (min-width:992px){
  .ka-steps .ka-step .ka-num{
    font-size:calc(var(--vr)*500);
    top:calc(-1*(var(--vr)*111));
    left:calc(var(--vr)*-582);
  }
}
span.ka-num {
    font-family: 'Inter' !important;
    font-weight: 800 !important;
}

/* ---------- Título y rayita: base ---------- */
.ka-steps .ka-step .ka-title-wrapper{ position:relative; display:inline-block; }
.ka-steps .ka-step .ka-title-wrapper .ka-title-line{
  position:absolute; top:50%;
  width:0; height:1px; background:#fff;
}

/* 01 y 03 (ODD, izquierda): rayita a la DERECHA del título, creciendo hacia la DERECHA */
.ka-steps > .ka-step:nth-of-type(odd) .ka-title-wrapper .ka-title-line{
  left:auto;
  right:var(--title-gap);
  transform:translate(100%, -50%);
}

/* 02 (EVEN, derecha): rayita a la IZQUIERDA del título, creciendo hacia la IZQUIERDA */
.ka-steps > .ka-step:nth-of-type(even){
  text-align:right;
  margin-left:auto;
  margin-right:calc(var(--grid-margin) + var(--grid-column) + var(--grid-gutter) + 50px);/*AQUI SE MODIFICA QUE TAN A LA DERECHA ESTA EL STEP 02 DE LA PANTALLA SI LE SUMAS SE HACE MÁS A LA IZQUIERDA ( SE DESPEGA DEL EXTREMO DERECHO)*/
}
.ka-steps > .ka-step:nth-of-type(even) .ka-title-wrapper .ka-title-line{
  left:var(--title-gap);
  right:auto;
  transform:translate(-100%, -50%);
}
/* número del step PAR al lado derecho */
.ka-steps > .ka-step:nth-of-type(even) .ka-num{
  right:calc(-1*(var(--grid-column) + var(--grid-gutter)));
  left:auto;
}

/* ---------- Offsets verticales (aprox. referencia) ---------- */
.ka-step.ka-step1{ margin-top:min(150px,36.23vw); }
.ka-step.ka-step2{ margin-top:min(150px,101vw); }
.ka-step.ka-step3{ margin-top:min(150px,79.47vw); padding-bottom:0; }

@media (max-width:768px){
  .ka-steps > .ka-step:nth-of-type(even){
    margin-right:calc(var(--grid-margin) + var(--grid-column) + var(--grid-gutter));
  }
}

@media (min-width:768px){
  .ka-step.ka-step1{ margin-top:calc(var(--vr)*200); }
  .ka-step.ka-step3{ padding-bottom:calc(var(--vr)*231.6); }
}
@media (min-width:992px){
  .ka-step.ka-step1{ margin-top:calc(var(--vr)*366); }
  .ka-step.ka-step2{ margin-top:calc(var(--vr)*500); }
  .ka-step.ka-step3{ margin-top:calc(var(--vr)*500); padding-bottom: 0; }
}

/* Más espacio entre steps en MOBILE */
@media (max-width: 767.98px){
  .ka-step.ka-step1{ margin-top: min(200px, 48vw) !important; }
  .ka-step.ka-step2{ margin-top: min(240px, 130vw) !important; }
  .ka-step.ka-step3{ margin-top: min(220px, 105vw) !important; }
}


/* ================================
   ALINEACIÓN FINA DE LOS STEPS
   - Números 800
   - Copy centrado verticalmente
   - 01/03 sobre el número (más a la izq.)
   ================================ */

/* Tamaño del número como variable — la usamos también para la altura mínima del step */
:root{
  --num-size: min(170px, 35vw);
  --copy-shift-odd: calc(var(--grid-column) * -1.0);   /* cuánto “muerde” el copy a la izquierda en 01/03 */
  --copy-gap: calc(var(--vr) * 14);                    /* separación título ↔ párrafo cuando se centra */
}
@media (min-width:768px){
  :root{
    --num-size: calc(var(--vr) * 231);
    --copy-shift-odd: calc(var(--grid-column) * -1.1);
  }
}
@media (min-width:992px){
  :root{
    --num-size: calc(var(--vr) * 500);
    --copy-shift-odd: calc(var(--grid-column) * -1.35); /* ajusta este valor si quieres “morder” más/menos */
  }
}

/* Número gigante: centrado vertical, 800 de peso y detrás del copy */
.ka-steps .ka-step .ka-num{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size: var(--num-size);
  font-weight: 800;                   
  font-variation-settings: "wght" 800;
  line-height: .82;
  letter-spacing: .01em;
  z-index: 0;                        
  opacity:.04;
  user-select:none; pointer-events:none;
  color:#fff!important;
}

/* ————— LADO IZQUIERDO (01 y 03) ————— */
.ka-steps > .ka-step:nth-of-type(odd) .ka-title-wrapper,
.ka-steps > .ka-step:nth-of-type(odd) > p.ka-service-txt{
  margin-left: var(--copy-shift-odd);
  z-index: 1;                        
  text-align: left;
}

/* ————— LADO DERECHO (02) ————— */
.ka-steps > .ka-step:nth-of-type(even) .ka-num{
  right: calc(var(--grid-column) * -1 - var(--grid-gutter));
}
.ka-steps > .ka-step:nth-of-type(even){
  text-align:right;
}
.ka-steps > .ka-step:nth-of-type(even) .ka-title-wrapper .ka-title-line{
  left: var(--title-gap);
  right: auto;
  transform: translate(-100%, -50%);
}

/* ————— Ajustes tipográficos del copy para un mejor “overlay” ————— */
.ka-steps .ka-step h2.title-service{ line-height: 1.1; }
.ka-steps .ka-step > p.ka-service-txt{
  line-height: 1.35;
  max-width: 46ch; 
}

/* Empuje extra en desktop para “morder” más el número */
@media (min-width:1200px){
  :root{
    --copy-shift-odd: calc(var(--grid-column) * -1.55);
  }
}

/* Quitar el rectángulo con gradiente al final de cada SVG */
.ka-steps .ka-line rect { display: none !important; }

/* Opcional: si también quieres quitar el “glow” de la línea (el resplandor de la linea del svg)*/
/*.ka-steps .ka-line path { filter: none !important; }*/
















/* === PARCHE MOBILE: que NO salga del viewport y grosor estable === */
@media (max-width: 767.98px){
  /* El SVG ocupa exactamente el ancho del contenedor y se ancla a la izquierda */
  .ka-steps .ka-line{
    left: 0;
    right: 0px !important; /* anula el -30px */
    width: 107% !important;          /* evita el 110% */
  }
  .ka-line-mobile{ width: 107% !important; }
	
	.ka-steps .ka-step h2.title-service{ font-size:3rem !important; }

}
















/**********FIN CODIGO PARA SECCIÓN SERVICIOS DE SVG DIBUJANDOSE****************/
















/*****************CODIGO PARA SERVICIOS******************/
section.servicios {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  /*background-color: #fff;*/
	background-color:transparent;
	margin: 0;
  padding: 0;
}
.sticky-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
	mix-blend-mode: difference !important;
}
.sticky-header h2 {
  font-size: 8vw !important;
  color: #fff;
  text-align: center;
	mix-blend-mode:difference;
}
.sticky-header p{
	text-align:center;
	color:rgba(255,255,255,0.4);
	font-size:1.5vw;
}
.card {
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  width: 40%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-radius: 1em;
  will-change: transform;
  overflow: hidden;
	
}

#card-1 {
  background: url(./assets/card-1-ka.png) no-repeat 50% 50%;
  background-color: #000;
  background-size: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

#card-2 {
  background: url(./assets/card-2-ka.png) no-repeat 50% 50%;
  background-color: #000;
  background-size: cover;
  border: 2px solid rgba(1, 203, 239, 0.35);
}

#card-3 {
  background: url(./assets/card-1-ka.png) no-repeat 50% 50%;
  background-color: #000;
  background-size: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

#card-4 {
  background: url(./assets/card-2-ka.png) no-repeat 50% 50%;
  background-color: #000;
  background-size: cover;
  border: 2px solid rgba(1, 203, 239, 0.35);
}
#card-5 {
  background: url(./assets/card-1-ka.png) no-repeat 50% 50%;
  background-color: #000;
  background-size: cover;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.card-phase {
  position: absolute;
  top: 1em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.125em 0.25em;
  border-radius: 0.25em;
  color: #000;
}

.card-phase p {
  font-size: 24px;
}

#card-1 .card-phase {
  background-color: #dddbd7;
}
#card-2 .card-phase {
  background-color: #01CBEF;
}
#card-3 .card-phase {
  background-color: #e0ff57;
}
#card-4 .card-phase {
  background-color: #7dd8cd;
}

.card-title {
  text-align: center;
}

.card-title p {
  font-size: 36px;
}

.card-title h3 {
  font-family: "Inter-ExtraBold";
  text-transform: uppercase !important;
  font-size: 7rem !important;
  line-height: 90%;
  color:#fff !important;
}

#card-5 .card-title h3{
	font-size:6rem !important;
}

#card-1 .card-title {
  color: #dddbd7;
}
#card-2 .card-title {
  color: #dddbd7;
}
#card-3 .card-title {
  color: #dddbd7;
}
#card-4 .card-title {
  color: #dddbd7;
}
#card-5 .card-title {
  color: #dddbd7;
}

.card-title h3 span {
  color: transparent;
  -webkit-text-stroke: 1.25px #fff;
}

.progress-bar {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  /* background-color: #fff; */
  background-color: transparent;
  opacity: 0;
}

.progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0) 20%,
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 80%,
    rgba(0, 0, 0, 1) 100%
  !important);
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}
@media only screen and (max-width: 600px){


	.card {
    width: 75%;
    height: 30% !important;
  }
	.card-title h3{
		font-size: 3.5rem !important;
	}
	#card-5 .card-title h3{
	font-size:3rem !important;
    }
	.sticky-header h2 {
  font-size: 10vw !important;
  color: #fff;
  text-align: center;
	mix-blend-mode:difference;
}
.sticky-header p{
	text-align:center;
	color:rgba(255,255,255,0.4);
	font-size:3.5vw;
}
}
@media (max-width: 900px) {
  .card {
    width: 75%;
    height: 40%;
  }

  /*.card-phase p {
    font-size: 18px;
  }

  .card-title p {
    font-size: 24px;
  }

  .card-title h3 {
    font-size: 40px;
  }

  .card-title h3 span {
    -webkit-text-stroke: 0.75px #fff;
  }*/


}
/*****************FIN CODIGO PARA SERVICIOS******************/





/*****************CODIGO PARA PROYECTOS DESTACADOS ******************/


.marquee {
	margin-top:60px !important;
  position: relative;
  width: 100%;
  height: 50svh;
  overflow: hidden;
}

.marquee-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  width: 150%;
  height: 100%;
}

.marquee-images {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
  width: 200%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  will-change: transform;
}

.marquee-img {
  flex: 1;
  width: 100%;
  /*aspect-ratio: 5/3;*/
}

.horizontal-scroll {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
}



.horizontal-scroll-wrapper {
  position: relative;
  width: 300%;
  height: 100svh;
  display: flex;
  will-change: transform;
}

.p01{
  background-image: url(https://katheragency.com/wp-content/uploads/2025/09/KA-Sedal.jpg);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
 background-position: center;
}
.p02{
  background-image: url(https://katheragency.com/wp-content/uploads/2025/09/KA-Chinoinn.jpg);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
background-position: center;
}

.horizontal-slide {
  flex: 1;
  height: 100%;
  display: flex;
 /* gap: 2rem;
  padding: 2rem;*/
} 




.horizontal-slide:not(.horizontal-spacer) {
  background-color: var(--dark);
  color: var(--light);
}

.horizontal-slide .col:nth-child(1) {
  flex: 3;
}

.horizontal-slide .col:nth-child(2) {
  flex: 2;
}

.horizontal-scroll .col {
  display: flex;
  justify-content: center;
  align-items: center;
}

.horizontal-slide .col h3,
.horizontal-slide .col img {
  width: 75%;
}

.horizontal-slide .col img {
  height: 75%;
}


@media (max-width: 1000px) {
  

  .marquee-wrapper {
    width: 300%;
  }

  .horizontal-slide {
    padding: 4rem;
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .horizontal-slide .col:nth-child(1) {
    align-items: flex-start;
  }

  .p01{
  background-image: url(https://katheragency.com/wp-content/uploads/2025/10/KA-sedal-V.jpg);
  /*background-size: 100vw 100vh;*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
 background-position: center;
}
.p02{
  background-image: url(https://katheragency.com/wp-content/uploads/2025/10/KA-CE-V.jpg);
  /*background-size: 100vw 100vh;*/
  background-size: 100% 100%;
  background-repeat: no-repeat;
background-position: center;
}
}


.title-section h2.white {
  font-size: 8vw !important;
  color: #fff;
  text-align: center;
	mix-blend-mode:difference;
margin-bottom:0 !important;
}
.title-section p.white{
	text-align:center;
	color:rgba(255,255,255,0.4);
	font-size:1.5vw;
}




/* Capa fija para el clon */
#ka-fixed-layer{
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* por encima de todo */
  pointer-events: none;
  isolation: isolate;          /* evita interferencias de stacking/filters */
  contain: layout paint style; /* capa propia, menos “parpadeos” */
}

/* (opcional) por si el navegador intenta despromocionar la capa */
#ka-fixed-layer img{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}


/**/


/*****************FIN CODIGO PARA PROYECTOS DESTACADOS ******************/

/*****************CODIGO PARA nuestros clientes******************/


.title-section h2 {
  font-size: 8vw !important;
  color: #000;
  text-align: center;
	mix-blend-mode:difference;
margin-bottom:0 !important;
}
.title-section p{
	text-align:center;
	color:rgba(0,0,0,0.4);
	font-size:1.5vw;
}



.ka-parallax-grid {
  position: relative;
  height: 300vh; /* Espacio para scroll */
  padding: 0;
		margin-top:-100px;
}

.ka-column {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 22%; /* Tamaño uniforme para las columnas */
}

.ka-column-1 {
  left: 0; /* Pegada al borde izquierdo */
  z-index: 3;
  gap: 250px;
  padding-top: 200px;
}

.ka-column-2 {
  left: 14%; /* Posición personalizada */
  padding-top: 400px;
  gap: 350px;
}

.ka-column-3 {
  right: 25%; /* Posición personalizada */
  gap: 275px;
  padding-top: 700px;
}

.ka-column-4 {
  right: 0; /* Pegada al borde derecho */
  z-index: 3;
  gap: 250px;
  padding-top: 200px;
}

.ka-column-5 {
  left: 39%; /* Centrada en la pantalla (ajusta si es necesario) */
  gap: 350px; /* Espacio entre las filas */
  z-index: 2; /* Capa intermedia entre las columnas 1 y 4 */
  padding-top: 430px; /* Ajuste vertical */
}

.ka-grid-item {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.25);
}

.ka-grid-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.ka-grid-item:hover img {
  transform: scale(1.05);
}

.ka-column-2 > .ka-grid-item{
  width: 80%;
}

.ka-column-3 > .ka-grid-item{
  width: 85%;
}

.ka-column-5 > .ka-grid-item{
  width: 115%;
}

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

.ka-parallax-grid {
  height: 120vh; /* Espacio para scroll */
}
	.title-section h2{
	 font-size: 10vw !important;
  color: #000;
  text-align: center;
	mix-blend-mode:difference;
}

.title-section p{
	text-align:center;
	color:rgba(0,0,0,0.4);
	font-size:3.5vw;
}
	.ka-parallax-grid {
		margin-top:-50px;
}
	
	
  .ka-column-3, .ka-column-5 {
      display: none;
  }
  .ka-column-1, .ka-column-4, .ka-column-2{
      width: 35vw;
  }
  .ka-column-2 > .ka-grid-item{
      width: 90%;
  }

  .ka-column-1, .ka-column-4 {
      gap: 50px;
  }

  .ka-column-4{
      padding-top: 280px;
  }

  .ka-column-2 {
      left: 16%; /* Posición personalizada */
      padding-top: 270px;
      gap: 50px;
  }
}
/***************** FIN CODIGO PARA nuestros clientes******************/




.glassy-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(50px);
  pointer-events: none;
	/*z-index:99;*/
}
/*.banner-canvas-overlay{
	position:sticky !important;
}*/
/*canvas{
	
	width:100vw!important;
	height:100% !important;
}*/
@media only screen and (max-width: 600px){
	 .glassy-overlay {
  
  width: 110vw;
 
  
}
}



/********************************************codigo para banner con webgl**************************************************/
/* Lienzo WebGL en Avada */
.ka-gradient{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  --ka-overlay: rgba(0,0,0,.75); /* .25 = 25% negro */
}

.ka-gradient .gradient-canvas{
  position: absolute;
  inset: 0;
  z-index: 0;              /* canvas al fondo */
  pointer-events: none;
}
.ka-gradient::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ka-overlay);
  z-index: 1;              /* sobre el canvas */
  pointer-events: none;
}

/* contenido por encima del overlay */
.ka-gradient > *:not(.gradient-canvas){
  position: relative;
  z-index: 2;
}
/********************************************fin codigo para banner con webgl***********************************************/








/********************************************codigo para CTA HOME**************************************************/
:root {
  --base-100: #fff;
  --base-200: #333;
  --base-300: #262626;
  --base-400: #141414;
  --base-500: #0f0f0f;
}
.ka-feature-content > p {
	margin-bottom:0px !important;
}

section.ka-spotlight {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  color:#fff !important;
}

.ka-hero-title {
  text-align: center;
  font-size: 6rem;
  font-weight: 800;
  /*line-height: 0.9;*/
	line-height: 1.2;
  font-family: "Inter";
text-transform:uppercase;
}
.ka-intro,
.ka-outro {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Antes: .intro h1, .outro h1 */
.ka-intro .ka-hero-title,
.ka-outro .ka-hero-title {
  width: 40%;
}

.ka-spotlight-content,
.ka-header {
  position: absolute;
  width: 100%;
/*width:100vw;*/
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: transform;
}

.ka-spotlight-bg {
  position: absolute;
  transform: scale(0.8);
  opacity: 0.25;
}

/* Antes: .spotlight-content h1 */
.ka-spotlight-content .ka-hero-title {
 /* width: 55%;*/
width: 75%;
}

.ka-header-content {
  /*width: 60%;*/
width: 75%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  will-change: transform, opacity;
  transform: translateY(-100px);
  opacity: 0;
}
.ka-header-content{
	/*background-image: url('https://katheragency.com/wp-content/uploads/2024/09/gradient-bg-banner.png');
	    height: 100vh;
    display: flex;
    justify-content: center;
    background-size: cover;*/
background: #0C5ED3;
background: linear-gradient(333deg, rgba(12, 94, 211, 0.5) 0%, rgba(12, 94, 211, 0) 25%, rgba(12, 94, 211, 0) 75%, rgba(12, 94, 211, 0.5) 100%);
	height: 100vh;
	width: 100vw;
    display: flex;
    justify-content: center;
}

.ka-feature {
  position: absolute;
  width: max-content;
  height: max-content;
  /*padding: 1rem 1.5rem;*/
  padding: 2rem 3rem;
  transform: translate(-50%, -50%);
  will-change: top, left;
}

.ka-feature-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /*background-color: var(--base-400);*/
  /*border: 0.125rem solid var(--base-300);*/
	border: 0.250rem solid #0c5ed3;
  border-radius: 0.5rem;
  will-change: width, height, border-radius, border-width;
}

.ka-feature-content {
  position: relative;
  will-change: opacity;
}

.ka-feature-content p {
  text-transform: uppercase;
  /*font-family: "DM Mono";*/
  font-family:"Avenir Next Regular";
  font-weight: 400;
  /*font-size: 0.85rem;*/
  font-size:1.5rem;
  line-height: 1;
}

.ka-search-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*width: 3rem;
  height: 3rem;*/
  width: 4rem;
  height: 4rem;
  border-radius: 25rem;
  /*border: 0.35rem solid var(--base-300);*/
  border: 0.4rem solid #0c5ed3;
  /*background-color: var(--base-400);*/
  opacity: 0;
  display: flex;
  align-items: center;
  will-change: opacity, width, height, transform;
  cursor: pointer;
  justify-content: center;
}

/* Antes: .search-bar p */
.ka-search-bar .ka-search-button {
  position: relative;
  opacity: 0;
  /*transform: translateX(2rem);*/
  transform: translateX(0);
  will-change: opacity;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 2rem;
}

@media (max-width: 1000px) {
  /* Antes: h1 */
  .ka-hero-title {
    /*font-size: 2.5rem;*/
	  font-size: 3.2rem;
  }
	p.ka-cta-title{
		font-size: 2.5rem !important;
	}
	.ka-search-bar .ka-search-button{
		font-size: 1.5rem !important;
	}
	.ka-search-bar{
		border: 0.3rem solid #0c5ed3 !important;
	}

  /* Antes: .intro h1, .outro h1, .spotlight-content h1, .header-content */
  .ka-intro .ka-hero-title,
  .ka-outro .ka-hero-title,
  .ka-spotlight-content .ka-hero-title,
  .ka-header-content {
    width: 100%;
    /*padding: 2rem;*/
	  padding: 0rem 15px;
  }

  .ka-spotlight-bg {
    /*transform: scale(2);*/
	  transform: scale(2.0);
	  opacity: 0.25;
  }

  .ka-feature {
    padding: 1.5rem;
  }

  .ka-feature-content p {
    /*font-size: 0.7rem;*/
	  font-size: 1.2rem;
  }
}










/********************************************fin codigo para CTA HOME**************************************************/














.guesty-root-element .selectr-selected {
    overflow: hidden;
    background-color: transparent!important;
    cursor: pointer;
    outline: none;
    transition: all .2s 
ease;
    border-color: transparent;
    border-radius: 2px;
    padding: 9px 52px 9px 20px;
    color: #565a5c;
    height: 40px;
}