@layer reset, base, layout, components, pages, utils, overrides;

/*
  Theme Name: Belca
  Author: Nodo
  Author URI: https://nodo.pw/
  Description: Belca Theme
  Version: 1.0
*/
:root {
  /* Custom media rules */

  /** < 640px */

  /** < 1024px */

  /** > 1024px */

  /* Base Colors */
  --color-crimson: #ec2029;
  --color-forest-green: #39964a;
  --color-grey-dark: #252628;
  --color-gray: #808080;
  --color-gray-bold: #58595b;
  --color-gray-heavy: #414042;
  --color-spanish-gray: #929394;
  --color-platinum: #e7e7e7;
  --color-snow: #f9f9f9;
  --color-white: #fff;

  /* Colors definitions */
  --color-primary: var(--color-crimson);
  --color-secondary: var(--color-forest-green);
  --color-accent: var(--color-crimson);
  --color-background: var(--color-white);
  --color-background-alt: var(--color-platinum);
  --color-background-dark: var(--color-grey-dark);
  --color-background-dark-alt: var(--color-gray-heavy);
  --color-text: var(--color-grey-dark);
  --color-text-light: var(--color-white);
  --color-dark: var(--color-grey-dark);
  --color-light: var(--color-white);
  --color-outline: var(--color-primary, currentcolor);
  --color-black: #000;
  --color-grey-medium: var(--color-gray-bold);

  /* Forms */
  --input-border-color: var(--color-gray);

  /* Font families */
  --font-primary: "Montserrat";
  --font-secondary: "Montserrat";

  /* Font sizes */
  --font-base: 16px;
  --font-3xl: 2.625rem; /* 42px */
  --font-2xl: 2rem; /* 32px */
  --font-xl: 1.625rem; /* 26px */
  --font-lg: 1.5rem; /* 24px */
  --font-md-lg: 1.375rem; /* 22px */
  --font-md: 1.25rem; /* 20px */
  --font-md-sm: 1.125rem; /* 18px */
  --font-default: var(--font-base); /* 16px */
  --font-sm: 0.875rem; /* 14px */
  --font-xs: 0.75rem; /* 12px */
  --font-xxs: 0.625rem; /* 10px */

  /* Headlines Sizes */

  /* --heading-1: var(--font-xxl);
  --heading-2: var(--font-xl);
  --heading-3: var(--font-lg-x);
  --heading-4: var(--font-lg);
  --heading-5: var(--font-md-x); */

  /* Text sizes */

  /* --text-1: var(--font-md-x);
  --text-2: var(--font-md);
  --text-3: var(--font-default);
  --text-4: var(--font-sm);
  --text-5: var(--font-xs);
  --text-6: var(--font-xxs); */

  /* Fonts body */

  /* --font-body-1: normal var(--font-md-x) / 1.35 var(--font-primary);
  --font-body-2: normal var(--font-md) / 1.5 var(--font-primary);
  --font-body-3: normal var(--font-default) / 1.5 var(--font-primary);
  --font-body-4: normal var(--font-sm) / 1.5 var(--font-primary);
  --font-body-5: normal var(--font-xs) / 1.5 var(--font-primary);
  --font-body-6: normal var(--font-xxs) / 1.5 var(--font-primary); */

  /* Fonts Headings */

  /* --font-heading-1: 600 var(--heading-1) / 1.5 var(--font-secondary);
  --font-heading-2: 600 var(--heading-2) / 1.5 var(--font-secondary);
  --font-heading-3: 600 var(--heading-3) / 1.5 var(--font-secondary);
  --font-heading-4: 600 var(--heading-4) / 1.5 var(--font-secondary);
  --font-heading-5: 800 var(--heading-5) / 1.5 var(--font-secondary); */

  /* Z Index */
  --z-n1: -1;
  --z-n2: -2;
  --z-0: 0;
  --z-1: 10;
  --z-2: 20;
  --z-3: 30;
  --z-4: 40;

  /* Widths */
  --max-w-sm: 24rem;
  --max-w-xl: 36rem;
  --max-w-2xl: 48rem;
  --max-w-3xl: 60rem;
  --max-w-6xl: 72rem;
  --max-w-7xl: 80rem;

  /* Globals */
  --mobile-width: 40rem;
  --tablet-width: 64rem;
  --header-height: 6rem;
  --max-content-width: 100rem;
  --hr-color: var(--color-hr-blue-300);
}

@media (width < 40rem) {
  :root {
    --header-height: 5rem;
  }
}

@layer reset {
  /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

  /*
Document
========
*/

  /**
Use a better box model (opinionated).
*/

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family:
      system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
    text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  }

  /*
Sections
========
*/

  body {
    margin: 0; /* Remove the margin in all browsers. */
  }

  /*
Text-level semantics
====================
*/

  /**
Add the correct font weight in Chrome and Safari.
*/

  b,
  strong {
    font-weight: bolder;
  }

  /**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

  code,
  kbd,
  samp,
  pre {
    font-family:
      ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
      monospace; /* 1 */

    font-size: 1em; /* 2 */
  }

  /**
Add the correct font size in all browsers.
*/

  small {
    font-size: 80%;
  }

  /**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

  sub,
  sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /*
Tabular data
============
*/

  /**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

  table {
    border-color: currentcolor;
  }

  /*
Forms
=====
*/

  /**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0; /* 2 */
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
  }

  /**
Correct the inability to style clickable types in iOS and Safari.
*/

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    appearance: button;
  }

  /**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

  legend {
    padding: 0;
  }

  /**
Add the correct vertical alignment in Chrome and Firefox.
*/

  progress {
    vertical-align: baseline;
  }

  /**
Correct the cursor style of increment and decrement buttons in Safari.
*/

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  /**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

  [type="search"] {
    appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /**
Remove the inner padding in Chrome and Safari on macOS.
*/

  ::-webkit-search-decoration {
    appearance: none;
  }

  /**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

  ::-webkit-file-upload-button {
    appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /*
Interactive
===========
*/

  /*
Add the correct display in Chrome and Safari.
*/

  summary {
    display: list-item;
  }
}

@layer base {
  html {
    min-height: 100%;
    font-size: var(--font-base);
    transition: filter 400ms;
  }

  @media print {
    html {
      font-size: 12pt;
    }
  }

  body {
    display: grid;
    min-height: 100vh;
    color: var(--color-text);
    font:
      400 1rem / 1.5 var(--font-primary),
      sans-serif;
    grid-template-rows: auto 1fr auto;
    overflow-x: clip;
  }

  :where:not([class]) {
    font-size: 18px;
  }

  img {
    max-width: 100%;
    height: auto;
    background-repeat: no-repeat;
    background-size: cover;
    font-style: italic;
    object-fit: contain;
    object-position: center;
    shape-margin: 1rem;
    vertical-align: middle;
  }

  picture,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: min(100%, 100vw - 2rem);
    border-collapse: collapse;
  }

  video,
  iframe {
    max-width: calc(100vw - 2rem);
    border: 0;
      @media (width < 40rem) {
      max-width: calc(100vw - 4rem);
    }
  }

  a {
    width: max-content;
    word-break: break-all;
  }

  hr {
    width: 100%;
    height: 2px;
    border: 0;
    background-color: currentcolor;
    margin-block: 2rem;
  }

  blockquote {
    padding: 1rem 2rem;
    margin-inline: 0;
  }

  @media print {
    blockquote {
      break-inside: avoid;
      page-break-inside: avoid;
    }
  }
}

@layer layout {
  .site-header {
    align-content: center;
    background-color: var(--color-background);
    box-shadow: 0 4px 20px -8px
      color-mix(in srgb, var(--color-dark), transparent 80%);
  }

  @media (width < 70rem) {
    .site-header {
      padding-block: 1rem;
    }
  }
}

@layer layout {
  .container {
    --container-width: var(--max-content-width);
    --container-padding-inline: 1rem;

    display: grid;
    container: container / inline-size;
    grid-template-columns:
      [fullwidth-start] minmax(var(--container-padding-inline), 1fr)
      [main-start] minmax(auto, var(--container-width, 80ch))
      [main-end] minmax(var(--container-padding-inline), 1fr)
      [fullwidth-end];
  }

  .container.is-paddingless {
    --container-padding-inline: 0px;
  }

  .container.is-fullwidth {
    --container-width: calc(100% - (var(--container-padding-inline) * 2));
  }

  .container > *:not(.is-fullwidth) {
    grid-column: main;
    padding-inline: 2rem;
  }

  .container > .is-fullwidth,
  .container > .is-fullwidth-content {
    display: grid;
    grid-column: fullwidth;
    grid-template-columns: inherit;
  }

  .container > .is-fullwidth > :not(.is-fullwidth, .is-fullwidth-content),
  .container
    > .is-fullwidth-content
    > :not(.is-fullwidth, .is-fullwidth-content) {
    grid-column: main;
  }

  .container > .is-fullwidth-content > * {
    grid-column: fullwidth;
    padding-inline: var(--container-padding-inline);
  }
}

@layer layout {
  .footer {
    background-color: var(--color-background-dark);
    color: var(--color-light);
    padding-block: 1rem;
  }

  @media print {
    .footer {
      display: none;
    }
  }

  .footer a {
    color: currentcolor;
    text-decoration: none;
    text-decoration: none;
  }

  :is(.footer a):is(:hover, :focus-visible) {
    text-decoration: underline;
    text-decoration: underline;
  }

  .footer-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4rem;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
  }

  .footer-contact p {
    margin-block: 0;
  }

  .footer-contact-title:first-child {
    font-weight: 700;
  }

  .footer-contact-title:not(:first-child) {
    margin-top: auto;
  }

  .footer-menu .menu {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
  }

  .footer-menu .menu-item {
    padding-block: 0 !important;
  }

  .footer-menu a {
    border: 0 !important;
    font-size: var(--font-normal) !important;
    font-weight: 400 !important;
  }

  :is(.footer-menu a)::before {
    color: var(--color-accent);
    content: "\276F  ";
  }

  .footer-social-links {
    min-width: 10rem;
    margin-left: auto;
    text-align: right;
  }

  .footer-brand {
    margin-top: 3rem;
    text-align: right;
  }
}

@layer components {
  /* Headings */
}

@layer components {
  /** Navbar */
  .navbar {
    position: relative;
    display: flex;
    align-items: center;
  }

  @media (width < 70rem) {
    .navbar {
      justify-content: space-between;
    }
  }

  .navbar-brand {
    flex-shrink: 0;
  }

  .navbar-brand img {
    width: clamp(100px, 100px + 5vw, 196px);
  }

  .navbar-menu {
    display: flex;
    flex: 1;
  }

  @media (width < 70rem) {
    .navbar-menu {
      position: absolute;
      z-index: var(--z-1);
      top: calc(100% + 2rem);
      right: 0;
      flex-direction: column;
      padding: 1rem;
      background-color: var(--color-light);
      box-shadow: 0 0 20px -4px var(--color-background-alt);
      opacity: 0;
      pointer-events: none;
      transition:
        opacity 200ms,
        top 200ms;
      user-select: none;
      user-select: none;
    }

    .navbar-menu.is-active {
      top: 100%;
      opacity: 1;
      pointer-events: auto;
    }

    .navbar-menu.is-active ul {
      pointer-events: auto;
    }
  }

  @media (width < 40rem) {
    .navbar-menu {
      left: 0;
    }
  }

  .navbar-start {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
  }

  @media (width < 70rem) {
    .navbar-start {
      justify-content: flex-start;
    }
  }

  .navbar-end {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  @media (width < 70rem) {
    .navbar-end {
      flex-direction: column;
      align-items: initial;
      padding-top: 2rem;
    }
  }

  .navbar-contact {
    display: flex;
    flex-direction: column;
  }

  .navbar-contact a {
    color: currentcolor;
    text-decoration: none;
    text-decoration: none;
  }

  .navbar-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font-xs);
  }

  @media (width >= 70rem) {
    .navbar-button-container {
      display: none;
    }
  }

  .navbar-button {
    width: 2rem;
    border: 0;
    border-radius: 0.25em;
    aspect-ratio: 1;
    background-color: var(--color-background-alt);
    cursor: pointer;
  }

  .navbar-button span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text);
    transform-origin: center;
    transition:
      rotate 300ms,
      translate 200ms;
  }

  :is(.navbar-button span):first-child {
    translate: 0 -0.25em;
  }

  :is(.navbar-button span):last-child {
    translate: 0 0.25em;
  }

  :is(.navbar-button.is-active span):first-child {
    rotate: 45deg;
    translate: 0;
  }

  :is(.navbar-button.is-active span):nth-child(2) {
    display: none;
  }

  :is(.navbar-button.is-active span):last-child {
    rotate: -45deg;
    translate: 0 -2px;
  }
}

@layer components {
  /** Menu */

  .menu,
  .menu .sub-menu {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .menu > .menu-item {
    padding-block: calc(var(--header-height) / 2);
  }

  @media (width >= 70rem) {
    :is(.menu > .menu-item):not(:last-child) > a:last-of-type {
      display: inline-block;
      padding-right: 1.5rem;
      border-right: 2px solid;
    }
  }

  @media (width < 70rem) {
    .menu > .menu-item {
      padding-block: 0.5rem;
    }
  }

  .menu-item .sub-menu {
    position: absolute;

    /* top: var(--header-height); */
    top: calc(100% + 2rem);
    width: max-content;
    max-width: min(20rem, 100vw - 4rem);
    padding: 1rem;
    background-color: color-mix(in srgb, var(--color-light), transparent 10%);
    font-size: var(--font-base);
    opacity: 0;
    pointer-events: none;
    transition:
      top 200ms,
      opacity 200ms;
  }

  :is(.menu-item .sub-menu) a {
    font-size: inherit;
  }

  @media (width < 70rem) {
    .menu-item .sub-menu {
      position: initial;
      overflow: hidden;
      max-height: 0;
      opacity: 1;
      padding-block: 0;
      transition: max-height 300ms;
    }

    :is(.menu-item .sub-menu):focus-within {
      max-height: 100vh;
    }
  }

  .menu-item {
    position: relative;
  }

  .menu-item:is(:hover, :focus-within) .sub-menu {
    top: 100%;
    opacity: 1;
    pointer-events: auto;
  }

  .menu-item-arrow {
    display: inline-block;
    margin-inline: 0.125em;
  }

  @media (width < 70rem) {
    .menu-item-arrow:is(:active, :focus-visible, :focus) {
      border-radius: 2px;
      outline: 1px dashed;
    }

    .menu-item-arrow:is(:active, :focus-visible, :focus) ~ .sub-menu {
      max-height: 100vh;
    }
  }

  @media (width >= 70rem) {
    .menu-item-arrow-divider {
      display: none;
    }
  }

  .menu-item > a,
  .menu-link {
    color: currentcolor;
    font-size: var(--font-default);
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    text-decoration: none;
  }

  .menu {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  @media (width < 70rem) {
    .menu {
      display: initial;
    }
  }

  .menu-item-social {
    display: inline-block;
    overflow: hidden;
    width: 2rem;
    border-radius: 4rem;
    aspect-ratio: 1;
  }

  .menu-item-social img {
    aspect-ratio: 1;
    object-fit: cover;
  }

  .sub-menu .menu-item {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
  }

  :is(.sub-menu .menu-item) a {
    max-width: 100%;
    font-weight: 400;
    word-break: break-word;
    word-wrap: break-word;
  }

  .sub-menu a {
    display: flex;
    gap: 0.5rem;
  }

  :is(.sub-menu a)::before {
    content: "\2192";
  }
}

@layer components {
  /** Slider */
}

@layer components {
  .card {
    --card-border-radius: 0.75em;
    --card-background-color: var(--color-background-alt);
    --card-border-color: var(--color-gray);
    --card-border-width: 1px;
    --card-background-image: url("");
    --card-padding: 1rem;
    --card-text-color: var(--color-text);

    padding: var(--card-padding);
    max-width: calc(100vw - 2rem);
    border: var(--card-border-width) solid var(--card-border-color);
    border-radius: var(--card-border-radius, 0.5rem);
    background: var(--card-background-color) var(--card-background-image)
      no-repeat center / cover;
    color: var(--card-text-color);

    a {
      word-break: break-word;
    }
  }

  .card.is-dark {
    --card-background-color: var(--color-background-dark);
    --card-text-color: var(--color-text-light);
  }

  .card.is-light {
    --card-background-color: var(--color-white);
  }

  .card.is-borderless {
    /* --card-border-color: var(--card-background-color); */

    border: 0;
  }

  .card.is-paddingless {
    --card-padding: 0;
  }

  .card.is-square {
    aspect-ratio: 1;
  }

  .card.aspect-2-1 {
    aspect-ratio: 2 / 1;
  }
  .card.aspect-6-5 {
    aspect-ratio: 6/5;
  }

  .card.card-vertical {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
  }

  .card .card {
    --card-border-radius: 0.5em;
  }

  .card-service-cover {
    display: grid;
    overflow: hidden;
    border-radius: 1rem;
    aspect-ratio: 4 / 3;
    grid-template-areas: "stack";
    place-items: end center;
  }

  .card-service-cover > * {
    grid-area: stack;
  }

  .card-service-cover img {
    width: 100%;
    height: 100%;
  }

  .card-service-cover p {
    min-height: 2lh;
    color: var(--color-text-light);
    font-size: var(--font-lg);
    font-weight: 600;
    line-height: 1.2;
    padding-inline: 1rem;
    text-align: center;
    text-wrap: balance;
  }

  .card-service-content {
    color: var(--color-text-light);
    font-size: var(--font-md-sm);
  }

  .card-service-content > p {
    margin-inline: 1rem;
  }

  .card-room {
    padding: 2rem;
    border-radius: 1rem;
    background-color: color-mix(in srgb, var(--color-white), transparent 20%);
    grid-column: -2;
  }

  .card-pack {
    --font-xl: 20px;
    --font-md-sm: 13px;
  }

  .card-pack a:not(.tag) {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    color: currentcolor;
    text-align: center;
    text-decoration: none;
    text-decoration: none;
    word-break: normal;
  }

  .card-pack:has(p:only-of-type) p {
    min-height: 5rem;
    line-height: 1.25;
  }

  .card-pack:has(p:nth-of-type(2)) p {
    margin-bottom: 1rem !important;
  }

  :is(.card-pack:has(p:nth-of-type(2)) p):first-of-type {
    margin-top: 2.5rem;
  }

  .card-pack img:not(.card-photo) {
    max-width: 15rem;
    aspect-ratio: 1;
  }
  .card-pack .card-photo {
    flex-grow: 1;
    height: inherit;
    max-height: calc(100% - 4rem);
  }

  .card-vegetable {
    --card-border-width: 2px;
    --card-padding: 1rem 0.25rem;

    aspect-ratio: 1 / 1.125;
    font-size: var(--font-md-sm);

    img.icon.is-3xl {
      --icon-width: 96px;
      --icon-height: 96px;
      margin-inline: auto;
      display: block;
    }
  }

  .card-vegetable a {
    display: grid;
    place-items: end center;
    text-align: center;
    word-break: normal;
  }

  .card-vegetable span {
    display: grid;
    min-height: 3rem;
    place-content: end center;
  }
}

@layer components {
  .button {
    --button-text-color: var(--color-text-light);
    --button-arrow-color: currentcolor;
    --button-paddings: 1.25em 1.75em;
    --button-paddings-mobile: 0.625em 0.875em;
    --button-background: var(--color-primary);
    --button-font: var(--font-primary);
    --button-font-size: var(--font-md-sm);
    --button-border-radius: 0.5em;
    --button-border-width: 1px;
    --button-active-transparency: 30%;
    --button-icon-size: 1.5cap;
    --button-hover-text-color: var(--button-text-color);
    --button-hover-background: color-mix(
      in srgb,
      var(--button-background),
      var(--color-background-dark) 20%
    );
    --button-hover-border-color: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-paddings);
    border: var(--button-border-width) solid
      var(--button-border-color, transparent);
    border-radius: var(--button-border-radius, 0);
    background-color: var(--button-background, transparent);
    color: var(--button-text-color, currentColor);
    cursor: pointer;
    font-family: var(--button-font, inherit);
    font-size: var(--button-font-size, inherit);
    font-weight: 600;
    gap: 0.5rem;
    line-height: 1;
    text-decoration: none;
    text-decoration: none;
    transition: all var(--transition-timing, 300ms);
  }

  @media (width < 40rem) {
    .button {
      font-size: var(--font-sm);
    }
  }

  /* img {
		width: var(--button-icon-size);
		height: var(--button-icon-size);
		object-fit: contain;
	} */

  .button::after {
    display: inline-block;
    padding-bottom: 0.125em;
    color: var(--button-arrow-color);
    content: "\2192";
    font-size: 1.25em;
    line-height: 0;
  }

  .button.is-secondary {
    --button-background: var(--color-secondary);
    --button-text-color: var(--color-light);
    --button-border-color: var(--color-color-secondary);
  }

  .button.is-white {
    --button-background: var(--color-white);
    --button-text-color: var(--color-text);
    --button-border-color: var(--color-white);
    --button-arrow-color: var(--color-primary);
  }

  .button.is-gray {
    --button-background: var(--color-gray);
    --button-text-color: var(--color-text-light);
    --button-border-color: var(--color-gray);
    --button-arrow-color: var(--color-text-light);
  }

  .button.is-large {
    --button-paddings: 1em 4em;

    width: auto;
  }

  @media (width < 40rem) {
    .button.is-large {
      --button-paddings: 1em 2em;
    }
  }

  .button.is-success {
    --button-background: var(--color-success);
    --button-text-color: var(--color-text);
  }

  .button.is-danger {
    --button-background: var(--color-error);
    --button-text-color: var(--color-text-light);
  }

  .button.is-small {
    --button-paddings: 0.5em 0.75em;
    --button-font-size: var(--font-sm);
  }

  .button.is-fullwidth {
    width: 100%;
  }

  .button.is-loading {
    position: relative;
    color: transparent;
    pointer-events: none;
  }

  .button.is-loading::after {
    position: absolute;
    display: block;
    height: 60%;
    border: 0.25rem solid var(--button-background);
    border-radius: 50%;
    border-right-color: transparent;
    animation: spin 0.75s linear infinite;
    aspect-ratio: 1;
    content: "";
    mix-blend-mode: difference;
    opacity: 0.5;
  }

  .button:is(:hover, :focus-visible) {
    border-color: var(--button-hover-border-color);
    background: var(--button-hover-background);

    /* box-shadow: 0 0 20px -8px
      color-mix(in srgb, var(--color-dark), transparent 50%); */
    color: var(--button-hover-text-color);
  }

  .button:is(:focus, :active, .is-selected) {
    outline: 2px solid
      var(--button-background, var(--button-outline-color, currentcolor));
    outline-offset: 0.125rem;
  }

  .button[disabled],
  .button.is-disabled {
    --button-background: var(--color-disabled);
    --button-text-color: var(--color-text-disabled);

    cursor: not-allowed;
    outline: none;
    pointer-events: none;
  }

  .button-is-text {
    color: var(--color-fourth);
    font-size: var(--font-normal);
    font-weight: 700;
    text-decoration: none;
    text-decoration: none;
  }

  .button-is-text:hover {
    text-decoration: underline;
    text-decoration: underline;
  }

  .button-is-icon {
    --button-icon-size: 2rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 4px solid var(--black);
    border-radius: 50%;
    margin-bottom: 1rem;
    aspect-ratio: 1;
    background: var(--color-background);
    cursor: pointer;
    text-decoration: none;
    text-decoration: none;

    /* transition: box-shadow var(--transition-timing, 300ms); */
  }

  .button-is-icon img {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    object-fit: contain;
  }

  .button-is-icon:is(:focus-within, :focus) {
    outline: 0;
  }

  /* &:hover {
    box-shadow: 0 0 20px -8px
      color-mix(in srgb, var(--color-dark), transparent 50%);
  } */

  .button-is-area {
    --button-icon-size: 5rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    border: none;
    border-radius: 1rem;
    margin-bottom: 1rem;
    background: none;
    cursor: pointer;
    font-size: var(--font-sm);
    gap: 0.3rem;
    text-decoration: none;
    text-decoration: none;

    /* transition: box-shadow var(--transition-timing, 300ms); */
  }

  .button-is-area img {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    object-fit: contain;
  }

  .button-is-area:is(:focus-within, :focus) {
    outline: 0;
  }

  /* &:hover {
    box-shadow: 0 0 20px -8px
      color-mix(in srgb, var(--color-dark), transparent 50%);
  } */
}

@layer components {
  /** Pagination */

  :is(.pagination, .page-numbers) {
    display: flex;
    justify-content: center;
    font-size: var(--font-md);
    gap: 1rem;
    grid-column: span 2;
    list-style: none;

    @media (width < 48rem) {
      grid-column: unset;
    }
  }

  :is(.pagination, .page-numbers) a {
    color: currentcolor;
    text-decoration: none;
    text-decoration: none;
  }
}

@layer components {
  .grid {
    --grid-gap: 1rem;
    --grid-fill-type: auto-fill;
    --grid-columns: 2;
    --grid-column-min-size: 16rem;
    --gap-total: calc((var(--grid-columns) - 1) * var(--grid-gap));
    --column-size: calc((100% - var(--gap-total)) / var(--grid-columns));

    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(
      var(--grid-fill-type),
      minmax(
        min(max(var(--grid-column-min-size), var(--column-size)), 100%),
        1fr
      )
    );
  }

  .grid.columns-1 {
    --grid-columns: 1;
  }

  .grid.columns-2 {
    --grid-columns: 2;
  }

  .grid.columns-3 {
    --grid-columns: 3;
  }

  .grid.columns-4 {
    --grid-columns: 4;
  }

  .grid.columns-5 {
    --grid-column-min-size: 14rem;
    --grid-columns: 5;
  }

  .grid.columns-7 {
    --grid-column-min-size: 8rem;
    --grid-columns: 7;
  }

  .grid.columns-8 {
    --grid-column-min-size: 8rem;
    --grid-columns: 8;
  }

  .grid.is-gapless {
    --grid-gap: 0px;
  }

  .grid.has-centered-items {
    place-items: center;
  }

  .span-2 {
    grid-column: span 2;
  }

  .grid-initial {
    grid-area: 1/1/2/2;
  }

  .order-0 {
    order:0;
  }
  .order-1 {
    order:1;
  }

  @media (width < 40rem) {
    .span-2 {
      grid-column: unset;
    }
  }

  .span-3 {
    grid-column: span 3;
  }

  @media (width < 40rem) {
    .span-3 {
      grid-column: unset;
    }
  }

  .column-push-2 {
    grid-column-start: 2;
  }

  @media (width < 70rem) {
    .column-push-2 {
      grid-column-start: unset;
    }
  }

  @media (width < 40rem) {
    .column-push-2 {
      grid-column-start: unset;
    }
  }

  /* &.span-2 {
    grid-column: 2 / span 2;

    @media (--mobile) {
      grid-column: unset;
    }
  } */

  .column-push-last {
    grid-column-start: -2;
  }

  @media (width < 40rem) {
    .column-push-last {
      grid-column-start: unset;
    }
  }

  .grid.gap-8 {
    --grid-gap: 2rem;
  }

  .grid.gap-12 {
    --grid-gap: 3rem;
  }

  .place-self-start-end {
    place-self: start end;
  }

  .place-start {
    place-self: start;
  }
}

@layer components {
  /** a11y */
}

@layer components {
  /** Hero */

  .hero {
    --hero-height: calc(100dvh - var(--header-height) - 1rem);

    display: grid;
    height: var(--hero-height);
    grid-template-areas: "stack";
    place-items: center;

    &:has(iframe) {
      @media (width < 48rem) {
        --hero-height: unset;
      }

      .hero-media {
        pointer-events: auto;
      }

      .hero-content {
        display: none;
      }
    }
  }

  .hero.is-small {
    --hero-height: 30dvh;
    @media (width < 40rem) {
      min-height: fit-content;
      height: auto;
      padding-bottom: 1rem;
    }
    .hero-media {
      min-height: 100%;
    }
  }

  .hero.is-medium {
    --hero-height: 50dvh;
  }

  @media (width < 40rem) {
    .hero {
      height: calc(var(--hero-height) + 1rem);
    }
  }

  .hero > * {
    grid-area: stack;
  }

  .hero-media {
    width: 100%;
    min-width: 100%;
    height: inherit;
    object-fit: cover;
    pointer-events: none;

    iframe& {
      @media (width < 48rem) {
        height: auto;
        aspect-ratio: 16/9;
      }
    }
  }

  .hero-content {
    text-align: center;
  }

  .hero-controls {
    padding: 1rem;
    place-self: end;
  }

  .hero-controls-button {
    display: inline-flex;
    overflow: hidden;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.25rem;
    appearance: none;
    appearance: none;
    background: none;
    cursor: pointer;
    place-content: center;
    place-items: center;
    transition: rotate 200ms;
  }

  .hero-controls-button.is-dark {
    background-color: var(--color-black);
    color: var(--color-text-light);
  }

  .hero-controls-button.is-active {
    rotate: 45deg;
  }

  .hero-controls-actions {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms;
  }

  .hero-controls-actions.is-active {
    max-height: 8rem;
  }

  .hero-button-play {
    display: inline-grid;
    width: 10rem;
    border: 0;
    aspect-ratio: 1;
    background: none;
    cursor: pointer;
    place-content: center;
    transition: opacity 200ms;

    &:hover {
      opacity: 1 !important;
    }
  }

  .hero-button-play.is-invisible {
    opacity: 0;
    pointer-events: none;
  }

  .hero-button-play img {
    width: 9rem;
  }

  :is(.hero-button-play img):last-child {
    display: none;
  }

  .hero-button-play.is-playing img:first-child {
    display: none;
  }

  .hero-button-play.is-playing img:last-child {
    display: block;
  }
}

@layer components {
  /** Forms */

  input {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--input-border-color, currentcolor);
    border-radius: 0.5em;
    font-size: var(--font-md);
  }

  input.is-grey {
    background-color: var(--color-background-alt);
  }

  input[type="checkbox"]:not(.checkbox-md) {
    scale: 1.5;
  }

  .checkbox-md {
    scale: 1;
  }

  input[type="checkbox"]:first-child {
    margin-right: 0.5rem;
  }

  select {
    padding: 0.5rem;
    border: 1px solid var(--input-border-color, currentcolor);
    border-radius: 0.5em;
    cursor: pointer;
    font-size: var(--font-md);
  }
  .select {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    border: 1px solid var(--input-border-color, currentcolor);
    border-radius: 0.5em;
    font-size: var(--font-md);
  }

  @media (width < 40rem) {
    #filter-form select {
      max-width: calc(100vw - 2rem);
    }
  }

  @media (width >= 70rem) {
    #filter-form select {
      max-width: calc(100% / 3 - 1rem);
    }
  }
}

@layer components {
  /** Icons */
  .icon {
    --icon-width: 24px;
    --icon-height: 24px;

    width: var(--icon-width);
    height: var(--icon-height);
    object-fit: contain;
    object-position: center;
  }

  .icon.is-xl {
    --icon-width: 48px;
    --icon-height: 48px;
  }

  .icon.is-3xl {
    --icon-width: 64px;
    --icon-height: 64px;
  }
}

@layer components {
  /** Tags */

  .tag {
    --tag-paddings: 0.25rem 1.25rem;
    --tag-background: var(--color-grey-medium);
    --tag-text-color: var(--color-text-light);
    --tag-border-radius: 0.5rem;

    min-width: 7.5rem;
    max-width: max-content;
    padding: var(--tag-border-radius);
    border-radius: var(--tag-border-radius);
    background-color: var(--tag-background);
    color: var(--tag-text-color);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-decoration: none;
  }
}

@layer components {
  /** Carousel */

  .carousel-button {
    width: 2rem;
    align-self: flex-end;
    border: 0;
    margin-bottom: 8rem;
    background: none;
    cursor: pointer;
  }

  .carousel-button:disabled {
    opacity: 0.25;
    pointer-events: none;
  }

  .carousel-button img {
    width: 100%;
  }

  .carousel {
    --carousel-gap: 0px;
    --carousel-slide-width: min(100%, 30rem);

    overflow: hidden;

    &:not(.carousel-fullslide) {
      .carousel-slide {
        padding-inline: 1rem;
      }
    }
  }

  .carousel.carousel-fullslide {
    --carousel-slide-width: 100%;
  }

  .carousel.carousel-fullslide .carousel-button {
    align-self: center;
    margin-bottom: unset;
  }

  .carousel-wrapper {
    display: flex;
    flex: 1;
    gap: var(--carousel-gap);
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .carousel-slide {
    --slide-flex: 0 0 var(--carousel-slide-width);

    max-width: var(--carousel-slide-width);
    flex: var(--slide-flex);
    scroll-snap-align: start;

    a,
    img {
      max-width: var(--carousel-slide-width);
    }
  }

  @media (width < 40rem) {
    .carousel-slide * {
      font-size: var(--font-normal) !important;
    }
  }
}

@layer components {
  /** Accordion */

  .accordion {
    border-bottom: 2px solid currentcolor;
  }

  .accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 2rem;
  }

  :is(.accordion summary)::after {
    display: block;
    width: 2rem;
    height: 1lh;
    background: url("images/icons/chevron-up.png") no-repeat center / contain;
    content: "";
    transform-origin: center;
    transition: rotate 300ms;
  }

  .accordion[open] summary::after {
    rotate: 0.5turn;
  }
}

@layer components {
  /** Pack Popup */

  .pack-popup {
    --pack-popup-background-color: color-mix(
      in srgb,
      var(--color-light),
      transparent 40%
    );
    --pack-popup-border-width: 1px;
    --pack-popup-border-color: var(--color-grey-medium);
    --pack-popup-border-radius: 0.5em;
    --pack-popup-arrow-color: var(--color-primary);
    --pack-popup-color: currentcolor;

    /* --pack-popup-font-size: clamp(12px, 6px + 1vw, var(--font-base)); */
    --pack-popup-font-size: 17px;
    --pack-popup-box-shadow-width: 2px;
    --pack-popup-paddings: 0.25em;

    position: absolute;
    top: var(--pack-popup-y, 0);
    left: var(--pack-popup-x, 0);
    display: flex;
    overflow: hidden;
    max-width: 1.5lh;
    height: 1.5lh;
    align-items: center;
    padding: var(--pack-popup-paddings);
    border: var(--pack-popup-border-width) solid var(--pack-popup-border-color);
    border-radius: var(--pack-popup-border-radius);
    backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    background-color: var(--pack-popup-background-color);
    box-shadow: 0 0 var(--pack-popup-box-shadow-width)
      var(--color-background-dark-alt);
    color: var(--pack-popup-color);
    font-size: var(--pack-popup-font-size);
    gap: 0.5em;
    text-decoration: none;
    text-decoration: none;
    transition:
      background 300ms,
      box-shadow 300ms,
      max-width 300ms;

    @media (width < 48rem) {
      --pack-popup-font-size: 12px;
      --pack-popup-paddings: 0.125rem;
    }

    .icon {
      --icon-width: 28px;
      --icon-height: 28px;
    }
  }

  .pack-popup:is(:hover, :focus-visible) {
    --color-light: var(--color-background-alt);
    --pack-popup-box-shadow-width: 4px;

    max-width: 15rem;
  }

  .pack-popup.icon-right {
    flex-flow: row-reverse;
  }

  .pack-popup.icon-right::after {
    content: "\2190";
  }

  .pack-popup::after {
    display: inline-block;
    padding-bottom: 0.125em;
    color: var(--pack-popup-arrow-color);
    content: "\2192";
    font-size: 1.25em;
    font-weight: 600;
    line-height: 0;
  }

  @media (width < 70rem) {
    .pack-popup {
      --pack-popup-box-shadow-width: 2px;

      top: var(--pack-popup-y-mobile);
      left: var(--pack-popup-x-mobile);
      max-width: unset;
    }
  }

  .pack-popup span {
    min-width: max-content;
    font-size: var(--pack-popup-font-size);
  }
}

@layer components {
  /** Mapas */

  #map {
    padding-inline: 3rem;
  }

  @media (width < 70rem) {
    #map {
      padding-inline: 1rem;
    }
  }

  @media (width >= 70rem) {
    .mapa-mobile {
      display: none;
    }
  }

  @media (width < 70rem) {
    .mapa-desktop {
      display: none;
    }
  }
}

@layer components {
  /** Flowpack conf */
  @media (width < 40rem) {
    .flowpack-conf {
      border-bottom: 3px solid var(--color-light);
    }
  }

  @media (width >= 70rem) {
    .flowpack-conf {
      border-right: 3px solid var(--color-light);
    }
  }
}

@layer components {
  /** Ribbon */

  .ribbon {
    font-size: 14px;
  }

  .ribbon .title {
    font-size: 26px !important;

    /* &.text-bold {
			font-weight: 600 !important;
		} */
  }

  .ribbon .text-lg,
  .ribbon .text-md-sm {
    font-size: 14px !important;
  }

  .ribbon-black .title {
    font-size: 14px !important;
    margin-block: 2rem;
  }

  .ribbon-black .text-2xl {
    font-size: 22px !important;
  }

  .ribbon-black .text-lg {
    font-size: 14px !important;
  }
}

@layer pages {
  /** Pages */
}

@layer utilities {
  /* Utilities */
}

@layer utilities {
  .sr-only {
    display: flex;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }
}

@layer utilities {
  /* @import "contrast.css"; */

  /* @import "headlines.css"; */
}

@layer utilities {
  /* Text Sizes */
  .is-balanced {
    text-wrap: balance;
  }

  .is-uppercase {
    text-transform: uppercase;
  }

  .is-italic {
    font-style: italic;
  }

  /* Text Colors */
  .has-text-primary {
    color: var(--color-primary);
  }

  .has-text-accent {
    color: var(--color-accent);
  }

  .has-text-light {
    color: var(--color-text-light);
  }

  .has-text-white {
    color: var(--color-text-light);
  }

  .has-text-right {
    text-align: right;
  }

  .has-text-centered {
    text-align: center;
  }

  .title {
    /* font-size: var(--font-2xl); */
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
  }

  @media (width < 40rem) {
    .title {
      font-size: var(--font-lg);
    }
  }

  .title-xl {
    /* font-size: var(--font-3xl); */

    font-size: 32px;
    line-height: 1;
  }

  @media (width < 40rem) {
    .title-xl {
      font-size: var(--font-xl);
    }
  }

  .title-sm {
    /* font-size: var(--font-xl); */

    font-size: 24px;
  }

  .text-2xl {
    font-size: var(--font-2xl);
  }

  .text-xl {
    font-size: var(--font-xl);
  }
  .text-no-space {
    line-height: 1;
    margin-block: var(--font-lg) 0;
    min-height: auto;
  }

  .text-lg {
    /* font-size: var(--font-lg); */

    font-size: 18px;
  }

  .text-md {
    font-size: var(--font-md);
  }

  .text-md-sm {
    font-size: var(--font-md-sm);
  }

  .text-md-lg {
    font-size: var(--font-md-lg);
  }

  .text-xl {
    font-size: 28px;
  }

  .text-sm {
    font-size: var(--font-sm);
  }

  .text-normal {
    font-weight: 400;
  }

  .text-semibold {
    font-weight: 600;
  }

  .text-bold {
    font-weight: 700;
  }

  .text-heavy {
    font-weight: 800;
  }

  .hero-title {
    font-size: 37px;
    font-weight: 600;
  }

  @media (width < 40rem) {
    .hero-title {
      font-size: var(--font-xl);
    }
  }

  .currentcolor {
    color: currentcolor;
  }

  .nodecoration {
    text-decoration: none;
    text-decoration: none;
  }

  .lh-0 {
    line-height: 0;
  }

  .lh-sm {
    line-height: 1.2;
  }
}

@layer utilities {
  /** Positions */

  .is-relative {
    position: relative;
  }

  .is-absolute {
    position: absolute;
  }

  .object-bottom {
    object-position: center bottom;
  }
}

@layer utilities {
  /* @import "sizes.css"; */
}

@layer utilities {
  /** Spacings */
  .m-0 {
    margin: 0;
  }

  .my-auto {
    margin-block: auto;
  }

  .my-0 {
    margin-block: 0;
  }

  .my-4 {
    margin-block: 1rem;
  }

  .my-8 {
    margin-block: 2rem;
  }

  .my-12 {
    margin-block: 3rem;
  }

  .my-16 {
    margin-block: 4rem;
  }

  .my-24 {
    margin-block: 6rem;
  }

  .my-32 {
    margin-block: 8rem;
  }

  .mb-0 {
    margin-bottom: 0;
  }

  .mb-2 {
    margin-bottom: 0.5rem;
  }

  .mb-4 {
    margin-bottom: 1rem;
  }

  .mb-8 {
    margin-bottom: 2rem;
  }

  .mb-12 {
    margin-bottom: 3rem;
  }

  .mb-24 {
    margin-bottom: 6rem;
  }

  .mb-32 {
    margin-bottom: 8rem;
  }

  .mb-48 {
    margin-bottom: 12rem;
  }

  .mr-8 {
    margin-right: 2rem;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mt-0 {
    margin-top: 0;
  }

  .mt-12 {
    margin-top: 3rem;
  }

  .mt-16 {
    margin-top: 4rem;
  }

  .mt-24 {
    margin-top: 6rem;
  }

  .mt-32 {
    margin-top: 8rem;
  }

  .mt-64 {
    margin-top: 16rem;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .p-0 {
    padding: 0;
  }
  .mobile-m-0 {
      @media (width < 40rem) {
        margin: 0;
    }
  }
  .mobile-my-0 {
      @media (width < 40rem) {
        margin-block: 0;
    }
  }
  .mobile-mx-0 {
      @media (width < 40rem) {
        margin-inline: 0;
    }
  }
  .mobile-p-0 {
      @media (width < 40rem) {
        padding: 0;
    }
  }
  .mobile-py-0 {
      @media (width < 40rem) {
        padding-block: 0;
    }
  }
  .mobile-px-0 {
      @media (width < 40rem) {
        padding-inline: 0;
    }
  }

  .py-4 {
    padding-block: 1rem;
  }

  .py-8 {
    padding-block: 2rem;
  }

  .py-12 {
    padding-block: 3rem;
  }

  .py-16 {
    padding-block: 4rem;
  }

  .py-24 {
    padding-block: 6rem;
  }

  .py-32 {
    padding-block: 8rem;
  }

  .px-4 {
    padding-inline: 1rem;
  }

  .px-12 {
    padding-inline: 3rem;
  }
  .px-16 {
    padding-inline: 4rem;
  }

  .pt-8 {
    padding-top: 2rem;
  }

  .pb-16 {
    padding-bottom: 4rem;
  }

  .pb-24 {
    padding-bottom: 6rem;
  }

  .pb-48 {
    padding-bottom: 12rem;
  }

  .pl-4 {
    padding-left: 1rem;
  }

  .overflowed-y-24 {
    --overflow-y: 4rem;

    height: calc(100% + var(--overflow-y));
    object-fit: cover;
    translate: 0 calc(var(--overflow-y) / 2 * -1);
  }

  @media (width < 70rem) {
    .overflowed-y-24 {
      --overflow-y: 4rem;
    }
  }

  @media (width < 40rem) {
    .overflowed-y-24 {
      height: auto;
      margin-block: 1rem;
      translate: 0;
    }
  }
}

@layer utilities {
  /* .is-hidden-desktop {
	@media (--desktop) {
		display: none;
	}
}

.is-hidden-tablet {
	@media (--tablet) {
		display: none !important;
	}
} */
  @media (width < 40rem) {
    .is-hidden-mobile {
      display: none !important;
    }
  }
}

@layer utilities {
  .has-background-primary {
    background-color: var(--color-primary);
    color: var(--color-text-light);
  }

  .has-background-white {
    background-color: var(--color-light);
  }

  .has-background-alt {
    background-color: var(--color-background-alt);
  }

  .has-background-accent {
    background-color: var(--color-accent);
    color: var(--color-text-light);
  }

  .has-background-dark {
    background-color: var(--color-background-dark-alt);
    color: var(--color-text-light);
  }

  .has-bg-image {
    background: var(--bg-image) no-repeat center / cover;
  }
}

@layer utilities {
  /* @import "animations.css"; */
}

@layer utilities {
  @layer utils {
    .rounded {
      --roundness: 1rem;

      border-radius: var(--roundness);
    }
  }
}

@layer utilities {
  .flex {
    --flex-gap: 0;

    display: flex;
    gap: var(--flex-gap);
  }

  .flex.gap-2 {
    --flex-gap: 0.5rem;
  }

  .flex.gap-4 {
    --flex-gap: 1rem;
  }

  .flex.gap-8 {
    --flex-gap: 2rem;
  }

  .flex.gap-12 {
    --flex-gap: 3rem;
  }

  .flex-column {
    flex-direction: column;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .align-start {
    align-items: flex-start;
  }

  .align-center {
    align-items: center;
  }

  .align-end {
    align-items: flex-end;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }
  .mobile-columns {
    @media (width < 40rem) {
      flex-direction: column;
    }
  }
}

@layer utilities {
  /** Widths */
  .fullwidth {
    width: 100%;
  }

  .w-4 {
    width: 1rem;
  }

  .min-w-full {
    min-width: 100%;
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-sm {
    max-width: var(--max-w-sm);
  }

  .max-w-xl {
    max-width: var(--max-w-xl);
  }
  .max-w-2xl {
    max-width: var(--max-w-2xl);
  }
  .max-w-3xl {
    max-width: var(--max-w-3xl);
  }

  .max-w-6xl {
    max-width: var(--max-w-6xl);
  }

  .max-w-7xl {
    max-width: var(--max-w-7xl);
  }
}

@layer utilities {
  /** Heights */

  .fullheight {
    height: 100%;
  }

  .max-h-22 {
    max-height: 5.5rem;
  }

  .max-h-48 {
    max-height: 3rem;
  }
}

@layer utilities {
  /** Lists */
  .list-dashed {
    font-size: 18px;
    list-style-type: "- ";
  }

  .list-triangle {
    list-style-type: "▸ ";
  }
}

@layer utilities {
  /** Aspects */

  .aspect-video {
    aspect-ratio: 16 / 9;
  }

  .aspect-crt {
    aspect-ratio: 4 / 3;
  }

  .aspect-crt-vertical {
    aspect-ratio: 3 / 4;
  }
}

@layer utilities {
  /** Fits */

  .object-cover {
    object-fit: cover;
  }
}

@layer utilities {
  /** Shadows */

  .has-shadow {
    box-shadow: 0 0 10px -2px
      color-mix(in srgb, var(--color-dark), transparent 50%);
  }
}

@layer overrides {
  /** Overrides */
  :is(.tax-tecnologia, .tax-aplicacion) .icon.is-xl {
    --icon-width: 96px;
    --icon-height: 96px;
  }

  :is(.tax-tecnologia, .tax-aplicacion) .card-vegetable.flex-shrink-0 {
    width: 11rem;
    text-align: center;
  }

  /*:is(.tax-tecnologia-envasado) .card {
	 background-color: #fff;
  }*/

  .single-maquinas-aplicacion .card-vegetable {
    padding: 1rem;
    aspect-ratio: unset;
  }

  .single-maquinas-aplicacion .flex:has(.card-vegetable:nth-child(2)) {
    flex-wrap: wrap;
  }

  :is(.single-maquinas-aplicacion .flex:has(.card-vegetable:nth-child(2)))
    .card-vegetable {
    width: 9rem;
  }

  .single-maquinas-aplicacion .icon.is-3xl {
    --icon-width: 96px;
    --icon-height: 96px;
  }

  .page-template-page-nosotros .container .title-xl:not(.ribbon .title-xl) {
    font-size: 26px !important;
    /*font-weight: 600 !important;*/
  }

  /* Single */
  .single-article img {
    border-radius: 0.5rem;
  }

  .container-single {
    font-size: var(--font-lg);
  }

  .container-single h1.title-xl {
    max-width: 64rem;
    text-wrap: balance;
  }

  .container-single .image-single {
    position: relative;
    max-width: 80rem;
    margin-block: 2rem;
    margin-inline: auto;
  }

  :is(.container-single .image-single) img {
    border-radius: 0.5rem;
  }

  :is(.container-single .image-single) .card {
    position: absolute;
    right: 3rem;
    bottom: 3rem;
    width: 8rem;
  }

  @media (width < 40rem) {
    :is(.container-single .image-single) .card {
      right: 0;
      bottom: 0;
      scale: 0.75;
    }
  }

  .container-single .video-single {
    margin-block: 2rem;
    text-align: center;
  }

  .container-single iframe {
    max-width: 80rem;
    margin-inline: auto;
  }

  .container-single .hero-controls {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}


.index-1{
  z-index: var(--z-1);
}
.banner-image {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  height: 100%;
  width: 100%;
}
.landing-video {
  height: 232px;
}
.landing-logos {
  @media (width < 40rem) {
    gap: 2rem;
  }
}
.landing-logos img{
  max-width: 180px;
  max-height: 45px;
  width: fit-content;
  height: fit-content;
}
.landing-logos .title-xl{
  flex-shrink: 0;
}

.landing-form {
  max-width: var(--max-w-2xl);
  width: 100%;
  padding-inline: 4rem;
  padding-block: 2rem;
  margin-block: 2rem;
  @media (width < 40rem) {
    padding-inline: 1rem;
  }
}

.landing-container {
  @media (width < 40rem) {
    padding-inline: 0;
  }
}

.landing-card {
  @media (width < 40rem) {
    aspect-ratio: 1 !important;
  }
}