@import 'tailwindcss';
@import './btn.css';
@import './travel.css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';


@theme {
   --font-main: "Montaga", serif;
   --font-secondary: "Onest", sans-serif;
   --font-mono: "Space Mono", monospace;
   --color-primary100: #C999C7;
   --color-primary200: #363BAD;
   --color-primary300: #D3D3FF;
   --color-primary400: #EFE5DC;
   --color-black: #252727;

   --color-complement100: #EEF;
   --color-complement200: #8787C4;
   --color-complement300: #373760;
   --color-complement400: #725872;
   --color-complement500: #2A172B;
   --color-complement600: #232366;

   --color-black: #0F1010;
   --color-white: #FFFFFF;
   --color-gray: #797979;

   --color-greenme: #0CCE63;
   --color-redme: #FF3819;
   --color-violet: #FCFCFC;

   --text-size-hero: clamp(2rem, calc(1vw + 1.5rem), 3rem); /* para h1 */
   /*
   mínimo: 1.5rem = 24px
   máximo: 2rem = 32px
  */
   --text-size-title: clamp(1.5rem, calc(0.9vw + 1.25rem), 2rem); /* para h2 */
   /*
   mínimo: 1.25rem = 20px
   máximo: 1.5625rem = 25px
  */
   --text-size-subtitle: clamp(1.25rem, calc(0.75vw + 1rem), 1.5625rem); /* para h3, subtítulo */
   /*
   mínimo: 1.125rem = 18px 
   máximo: 1.25rem = 20px
  */
   --text-size-heading: clamp(1.125rem, calc(0.65vw + 0.875rem), 1.25rem); /* para h4 */
   /*
   mínimo: 0.75rem = 12px
   máximo: 0.875rem = 14px
  */
   --text-size-small-heading: clamp(0.625rem, calc(0.6vw + 0.8rem), 0.875rem); /* small */
}

h1, h2, h3, h4, h5, p{
   line-height: 1.4;
}

p,
.parrafo {
   /* Fórmula: clamp(min, calc(0.5vw + 0.75rem), max)
     Tamaño mínimo: 0.875rem = 14px
     Tamaño máximo: 1rem = 15px */
   font-size: clamp(0.875rem, calc(0.5vw + 0.75rem), 0.875rem);
   letter-spacing: 0.14px;
}

.container {
   @apply px-8 sm:px-12 md:px-16;
}

.container-center {
   @apply max-w-5xl mx-auto;
}

#card-w-animated {
   transform: scaleX(0);
   transform-origin: center center;
   opacity: 0;
}

footer{
   border-top: 1px solid rgba(0, 0, 0, 0.11);
}

.border-opacity{
   border: 1px solid rgba(121, 121, 121, 0.50);
}

.bg-gradient-plane{
   background: linear-gradient(180deg, #D3D3FF 0%, #EFE5DC 100%);
}

.nube1, .nubecenter, .nube3, .avion-plane, #cursor-progress {
  will-change: transform;
}