@import url('./components/icons.css');
@import url('./components/accordion.css');
@import url('./components/header.css');
@import url('./components/hero.css');
@import url('./components/tabs.css');
@import url('./components/form.css');
@import url('./components/footer.css');
@import url('./components/buttons.css');
@import url('./components/pills.css');
@import url('./components/infoboxes.css');
@import url('./components/integrations.css');
@import url('./components/cookies.css');
@import url('./components/reveal.css');
@import url('./pages/legal.css');
@import url('./pages/pricing.css');
@import url('./pages/support.css');
/* RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}

/* Fallback para iOS */
@supports (-webkit-touch-callout: none) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

/* Estilo personalizado para el scrollbar */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

ul {
  list-style: none;
}

.legal ul.num li {
  list-style-type: none;
  margin-left: 0;
}

main {
  padding-top: 55px;
}

button {
  cursor: pointer;
}

:where(h1) {
  margin-block: 0.67em;
  font-size: 2em;
}

h1 {
  margin-block: 0.67em;
  font-size: 2em;
}

/* BASE */

:root {
  /* COLORS */
  --color-deep-black: #000000;
  --color-black: #1d1d1f;
  --color-white: #ffffff;
  --color-yellow: rgba(255, 202, 10, 1);
  --color-deep-yellow: rgba(217, 170, 0, 1);
  --color-yellow-13: rgba(255, 202, 10, 0.13);
  --color-yellow-10: rgba(255, 202, 10, 0.1);
  --color-gray-0: rgba(134, 134, 139, 1);
  --color-gray-1: rgba(207, 207, 207, 0.85);
  --color-gray-2: rgba(217, 217, 217, 1);
  --color-gray-3: rgba(240, 240, 240, 1);

  /* Dark Mode Colors */
  --color-dark-background: #1d1d1f;
  --color-dark-text: #f0f0f0;
  --color-dark-gray: #575757;

  /* FONTS */
  --default-font-family: 'Helvetica', Arial, sans-serif;
  --font-weight-bold: 700;
  --font-weight-regular: 400;
  --font-weight-light: 300;

  /* FONT SIZES */
  --font-size-base: 1rem; /* 16px */
  --font-size-10: 0.625rem; /* 10px */
  --font-size-12: 0.75rem; /* 12px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-15: 0.9375rem; /* 15px */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-24: 1.5rem; /* 24px */
  --font-size-28: 1.75rem; /* 28px */
  --font-size-30: 1.875rem; /* 30px */
  --font-size-32: 2rem; /* 32px */
  --font-size-40: 2.5rem; /* 40px */
  --font-size-48: 3rem; /* 48px */
  --font-size-56: 3.5rem; /* 56px */
  --font-size-64: 4rem; /* 64px */
  --font-size-72: 4.5rem; /* 72px */
  --font-size-80: 5rem; /* 80px */

  /* BREAKPOINTS */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* TYPOGRAPHY */
body {
  background-color: var(--color-white);
  font-family: var(--default-font-family);
  font-size: var(--font-size-base);
  color: var(--color-black);
}

/* Base responsive de imágenes: nunca desbordan su contenedor */
img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: var(--font-size-32);
}

h2 {
  font-size: var(--font-size-28);
}

h3 {
  font-size: var(--font-size-24);
}

h4 {
  font-size: var(--font-size-20);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-light {
  font-weight: var(--font-weight-light);
}

/* Dark Mode */
body.dark-mode {
  background-color: var(--color-dark-background);
  color: var(--color-dark-text);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode p {
  color: var(--color-dark-text);
}

body.dark-mode .nav-links a {
  color: var(--color-dark-text);
}

body.dark-mode .cta-button {
  background-color: var(--color-dark-text);
  color: var(--color-dark-background);
}

body.dark-mode .cta-button:hover {
  background-color: var(--color-yellow);
  color: var(--color-dark-background);
}

body.dark-mode header {
  background-color: var(--color-dark-background);
}

body.dark-mode footer {
  background-color: var(--color-dark-background);
  color: var(--color-dark-text);
}

/* GENERAL */

.container {
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 20px;
}

.hide {
  display: none;
}

.temp-frame {
  width: 100%;
  height: 483px;
  flex-shrink: 0;
  background: var(--color-gray-2);
  margin-top: 55px;
  margin-bottom: 55px;
}

.language-menu .language-selected,
nav ul li a.active-page,
body.dark-mode .language-menu .language-selected,
body.dark-mode nav ul li a.active-page {
  color: var(--color-yellow);
}

.no-address-link {
  text-decoration: none;
  color: inherit;
  cursor: text;
  -webkit-user-select: text;
  user-select: text;
  -webkit-user-drag: none;
}

.no-address-link span {
  display: inline;
}

/* ICONS PRELOADER */

@keyframes preloadIcons {
  from {
    opacity: 0;
  }
  to {
    opacity: 0;
  }
}

.icon-preloader {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  animation: preloadIcons 0.01s;
  content: url('/assets/icons/arrow-left-black.svg')
    url('/assets/icons/arrow-left-white.svg')
    url('/assets/icons/arrow-right-black.svg')
    url('/assets/icons/arrow-right-white.svg')
    url('/assets/icons/tabs/cloud-amarillo.svg')
    url('/assets/icons/tabs/cloud-gris.svg') url('/assets/icons/tabs/cloud.svg')
    url('/assets/icons/tabs/description-amarillo.svg')
    url('/assets/icons/tabs/description.svg')
    url('/assets/icons/tabs/grading-amarillo.svg')
    url('/assets/icons/tabs/grading-gris.svg')
    url('/assets/icons/tabs/grading.svg')
    url('/assets/icons/tabs/group-amarillo.svg')
    url('/assets/icons/tabs/group.svg')
    url('/assets/icons/tabs/mobile_friendly-gris.svg')
    url('/assets/icons/tabs/mobile_friendly.svg')
    url('/assets/icons/tabs/mobile-friendly-amarillo.svg')
    url('/assets/icons/tabs/mobile-friendly.svg')
    url('/assets/icons/tabs/pan_tool_alt-gris.svg')
    url('/assets/icons/tabs/pan_tool_alt.svg')
    url('/assets/icons/tabs/pan-tool-alt-amarillo.svg')
    url('/assets/icons/tabs/pan-tool-alt.svg')
    url('/assets/icons/tabs/receipt-long-amarillo.svg')
    url('/assets/icons/tabs/receipt-long.svg')
    url('/assets/icons/tabs/restaurant-menu-amarillo.svg')
    url('/assets/icons/tabs/restaurant-menu.svg')
    url('/assets/icons/tabs/shopping-bag-amarillo.svg')
    url('/assets/icons/tabs/shopping-bag.svg');
}

/* MEDIA QUERIES */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 1200px;
  }

  main {
    padding-top: 90px;
  }

  h1 {
    font-size: var(--font-size-56);
  }

  h2 {
    font-size: var(--font-size-40);
  }

  h3 {
    font-size: var(--font-size-28);
  }

  h4 {
    font-size: var(--font-size-20);
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}