@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /** BRAND COLORS **/
    --transparent-background: rgba(255, 255, 255, 0);
    --primary-colors-primary: rgba(26, 26, 26, 1);
    --primary-colors-primary-60: rgba(26, 26, 26, 0.6);
    --primary-colors-primary-40: rgba(26, 26, 26, 0.4);
    --primary-colors-primary-05: rgba(26, 26, 26, 0.05);
    --primary-colors-black: rgba(1, 20, 4, 255);
    --primary-colors-secondary: rgba(38, 125, 244, 1);
    --primary-colors-secondary-60: rgba(38, 125, 244, 0.6);
    --primary-colors-secondary-40: rgba(38, 125, 244, 0.4);
    --primary-colors-secondary-05: rgba(38, 125, 244, 0.05);
    --primary-colors-white: rgba(255, 255, 255, 255);
    --secondary-colors-color-1-100: rgba(255, 196, 61, 1);
    --secondary-colors-color-1-60: rgba(255, 196, 61, 0.6);
    --secondary-colors-color-1-40: rgba(255, 196, 61, 0.4);
    --secondary-colors-color-1-20: rgba(255, 196, 61, 0.2);
    --secondary-colors-color-2-100: rgba(145 58, 255, 1);
    --secondary-colors-color-2-60: rgba(102, 37, 180, 0.6);
    --secondary-colors-color-2-40: rgba(102, 37, 180, 0.4);
    --secondary-colors-color-2-20: rgba(102, 37, 180, 0.2);
    --secondary-colors-color-3-100: rgba(239, 70, 111, 1);
    --secondary-colors-color-3-60: rgba(239, 70, 111, 0.6);
    --secondary-colors-color-3-40: rgba(239, 70, 111, 0.4);
    --secondary-colors-color-3-20: rgba(239, 70, 111, 0.2);
    --secondary-colors-color-4-100: rgba(76, 201, 240, 1);
    --secondary-colors-color-4-60: rgba(76, 201, 240, 0.6);
    --secondary-colors-color-4-40: rgba(76, 201, 240, 0.4);
    --secondary-colors-color-4-20: rgba(76, 201, 240, 0.2);
    --neutral-colors-100: rgba(33, 33, 33, 1);
    --neutral-colors-80: rgba(33, 33, 33, 0.8);
    --neutral-colors-70: rgba(33, 33, 33, 0.7);
    --neutral-colors-60: rgba(33, 33, 33, 0.6);
    --neutral-colors-30: rgba(33, 33, 33, 0.3);
    --neutral-colors-20: rgba(33, 33, 33, 0.2);
    --neutral-colors-10: rgba(33, 33, 33, 0.1);
    --neutral-colors-05: rgba(33, 33, 33, 0.05);
    --design-grey : rgba(8, 8, 8, 1);
    --design-grey-05: rgba(8, 8, 8, 0.05);
    --design-grey-1: rgba(234, 234, 234, 1);
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }
}


.border-gradient-green {
  background: linear-gradient(to right, #B5B5B5, #267df4); /* bordo con gradiente */
  padding: 1px;
}

/**** HEADER ****/
span.higlighted-text { font-weight: 700; }
.header-logo{height: 40px;}


/**** HERO ****/
@media (max-width: 768px) { .hero-background { background-image: none!important; } }

/**** CARDS SECTION ****/
.react-tabs__tab--selected { background-color: #fff; color: #000 !important; }
.react-tabs__tab--selected.job { background-color: #fff; color: #267df4 !important; border-bottom: 2px solid #267df4; }
.react-tabs__tab-panel--selected.job-tab-panel { min-height: 160px; }

/**** CAROUSEL ****/
.carousel { --slide-spacing: 1rem; --slide-size: 100%;}
.carousel__container { touch-action: pan-y pinch-zoom; margin-left: calc(var(--slide-spacing) * -1); }
.carousel__slide { transform: translate3d(0, 0, 0); flex: 0 0 var(--slide-size); padding-left: var(--slide-spacing); }

/**** TIMELINE ****/
.timeline { --slide-spacing: 1rem; --slide-size: 100%; --slide-spacing-sm: 1.6rem; --slide-size-sm: 50%; --slide-spacing-lg: 2rem; --slide-size-lg: calc(100% / 5);}
.timeline__container { backface-visibility: hidden; touch-action: pan-y pinch-zoom; margin-left: calc(var(--slide-spacing) * -1);}
.timeline__slide { flex: 0 0 var(--slide-size); padding-left: var(--slide-spacing);}
@media (min-width: 750px) { .timeline__container { margin-left: calc(var(--slide-spacing-sm) * -1); } }
@media (min-width: 1200px) { .timeline__container { margin-left: calc(var(--slide-spacing-lg) * -1); } }
@media (min-width: 750px) { .timeline__slide { flex: 0 0 var(--slide-size-sm); padding-left: var(--slide-spacing-sm); } }
@media (min-width: 1200px) { .timeline__slide { flex: 0 0 var(--slide-size-lg); padding-left: var(--slide-spacing-lg); } }


/**** casestudies ****/
.casestudies { --caseslide-spacing: 1rem; --caseslide-size: 100%; --caseslide-spacing-sm: 1.6rem; --caseslide-size-sm: 50%; --caseslide-spacing-lg: 2rem; --caseslide-size-lg: 25%;}
.casestudies__container { backface-visibility: hidden; touch-action: pan-y pinch-zoom; margin-left: calc(var(--caseslide-spacing) * -1);}
.casestudies__slide { flex: 0 0 var(--caseslide-size); padding-left: var(--caseslide-spacing);}
@media (min-width: 750px) { .casestudies__container { margin-left: calc(var(--caseslide-spacing-sm) * -1); } }
@media (min-width: 1200px) { .casestudies__container { margin-left: calc(var(--caseslide-spacing-lg) * -1); } }
@media (min-width: 750px) { .casestudies__slide { flex: 0 0 var(--caseslide-size-sm); padding-left: var(--caseslide-spacing-sm); } }
@media (min-width: 1200px) { .casestudies__slide { flex: 0 0 var(--caseslide-size-lg); padding-left: var(--caseslide-spacing-lg); } }


.reviews { --caseslide-spacing: 1rem; --caseslide-size: 100%; --caseslide-spacing-sm: 1.6rem; --caseslide-size-sm: 50%; --caseslide-spacing-lg: 2rem; --caseslide-size-lg: 33.33%;}
.reviews__container { backface-visibility: hidden; touch-action: pan-y pinch-zoom; margin-left: calc(var(--caseslide-spacing) * -1);}
.reviews__slide { flex: 0 0 var(--caseslide-size); padding-left: var(--caseslide-spacing);}
@media (min-width: 750px) { .reviews__container { margin-left: calc(var(--caseslide-spacing-sm) * -1); } }
@media (min-width: 1200px) { .reviews__container { margin-left: calc(var(--caseslide-spacing-lg) * -1); } }
@media (min-width: 750px) { .reviews__slide { flex: 0 0 var(--caseslide-size-sm); padding-left: var(--caseslide-spacing-sm); } }
@media (min-width: 1200px) { .reviews__slide { flex: 0 0 var(--caseslide-size-lg); padding-left: var(--caseslide-spacing-lg); } }


.embla__controls {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.8rem;
}
.embla__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
}
.embla__dot {
  -webkit-tap-highlight-color: rgba(230, 230, 230, 0.5);
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  touch-action: manipulation;
  display: inline-flex;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.embla__dot:after {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  content: '';
  background-color: #000;

}
.embla__dot.review:after {
  background-color: rgba(33, 33, 33, 1);

}
.embla__dot--selected:after, .embla__dot--selected.review:after {
  background-color: #267df4;
}


/**** MODALS ****/
@keyframes fadeIn {  0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
.animate-fadeIn {  animation: fadeIn 0.3s ease-out forwards; }

/**** FEATURES LIST ****/
.feature-list-card .feature-list-card-content strong { color: var(--primary-colors-white); }

/**** VIDEO LIST ****/
.video-section video { object-fit: cover; border-radius: 0.5rem; }

/**** PDF FLIP BOOK ****/
@keyframes flipbookSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.pdf-flipbook-spinner { display: flex; justify-content: center; align-items: center; height: 200px; }
.pdf-flipbook-spinner > div { width: 40px; height: 40px; border: 5px solid #ccc; border-top: 5px solid #333; border-radius: 50%; animation: flipbookSpin 1s linear infinite }
.pdf-flipbook-lockoverlay {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(255,255,255,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 20;
  text-align: center,
}

.ck-content ul{
  list-style: square;
  margin-left: 1.5em;
}

.ck-content ul li::marker {
  color: #267df4;
}