[x-cloak] {
  display: none !important;
}

html.lang-es .t-en,
html.lang-en .t-es {
  display: none !important;
}

:root {
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

main > section {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@supports (min-height: 100svh) {
  main > section {
    min-height: 100svh;
  }
}

main > section#redes {
  min-height: auto;
}

@keyframes section-enter {
  from {
    opacity: 0.6;
    transform: translateY(1.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes section-enter-reduced {
  from {
    opacity: 0.85;
  }

  to {
    opacity: 1;
  }
}

.section-entering {
  animation: section-enter 700ms ease-out both;
}

body {
  background-color: #f4edd8;
  color: #2c1a0e;
  font-family: Outfit, system-ui, sans-serif;
}

.font-display {
  font-family: Fraunces, Georgia, serif;
}

::selection {
  background: #a0522d;
  color: #f4edd8;
}

:focus-visible {
  outline: 2px solid #c9a84c;
  outline-offset: 3px;
}

.wa-float {
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  right: calc(1.25rem + env(safe-area-inset-right));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  .section-entering {
    animation: section-enter-reduced 180ms ease-out both;
  }

  .animate-bounce {
    animation: none;
  }
}