/*
* CSSkel v3.0.0
* (c)2019-2026 by Aleks Vas
* A revamp concept inspired by Barebones V3 by Steve Cochran and Skeleton by Dave Gamache
*
* Free to use under the MIT license.
*/

/* Table of contents
--------------------------------------------------
- Media Breakpoints
- Variables
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Navigation
- Media Queries
*/

/* ENV Variables
-------------------------------------------------- */
/*  Media breakpoint variables for use in media queries
*   Note: this section is currently commented out pending release of
* 	final CSS env() spec
*   Breakpoints based on
*   https://medium.freecodecamp.org/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
*
*/

/* Updates
-------------------------------------------------- */
/* v. 2.0.0
* Fixed how to trigger dark theme at will, now you can explicitly activate dark mode adding class enable-dark-mode
* Added box-sizing: border-box because is the usual model for design
* v. 3.0.0
* Reorganized code structure into sections
* Added error, success and warning colors and border utilities
* Added font family variables based on modern font stacks
* Changed base font size default to 100% instead of 62.5% for better accessibility
* Updated normalize.css to v8.0.1
* Updated settings.css to include error, success and warning colors
* Updated whole grid system to include autocols and better responsive behavior
* Updated documentation
* https://chat.deepseek.com/a/chat/s/a2576ee5-2f0a-41a1-a2e5-7c0fb250dac8
*/

@import "normalize.css";
@import "settings.css";

* {
    box-sizing: border-box;
}

/* Grid
-------------------------------------------------- */
.columns,
.grid-container {
  position: relative;
  max-width: 100vw;
  margin: 0 auto;
  text-align: left;
  display: grid;
  gap: var(--grid-gap);

  /* DESKTOP FIRST - Estilos base para escritorio (1280px+) */
    grid-template-columns: repeat(3, minmax(0, 1fr));

    > div {
        padding-left: 0;
        padding-right: 0;
    }

  /* DESKTOP - Clases sin @ que aplican por defecto en desktop y se heredan */
  &.cols\:1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  &.cols\:2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  &.cols\:3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  &.cols\:4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  &.cols\:5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  &.cols\:6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  &.cols\:7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  &.cols\:8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  &.cols\:9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  &.cols\:10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  &.cols\:11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  &.cols\:12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

  &.softcols\:1 { grid-template-columns: repeat(1, 1fr); }
  &.softcols\:2 { grid-template-columns: repeat(2, 1fr); }
  &.softcols\:3 { grid-template-columns: repeat(3, 1fr); }
  &.softcols\:4 { grid-template-columns: repeat(4, 1fr); }
  &.softcols\:5 { grid-template-columns: repeat(5, 1fr); }
  &.softcols\:6 { grid-template-columns: repeat(6, 1fr); }
  &.softcols\:7 { grid-template-columns: repeat(7, 1fr); }
  &.softcols\:8 { grid-template-columns: repeat(8, 1fr); }
  &.softcols\:9 { grid-template-columns: repeat(9, 1fr); }
  &.softcols\:10 { grid-template-columns: repeat(10, 1fr); }
  &.softcols\:11 { grid-template-columns: repeat(11, 1fr); }
  &.softcols\:12 { grid-template-columns: repeat(12, 1fr); }

  /* LAPTOP - (1024px a 1279px) - Hereda de desktop por defecto */
  @media (max-width: 1279px) {
    /* Si no se especifica @laptop, hereda las columnas de desktop */
    
    /* Sobrescrituras específicas para laptop */
    &.cols\:1\@laptop { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    &.cols\:2\@laptop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &.cols\:3\@laptop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    &.cols\:4\@laptop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    &.cols\:5\@laptop { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    &.cols\:6\@laptop { grid-template-columns: repeat(6, minmax(0, 1fr)); }

    &.softcols\:1\@laptop { grid-template-columns: repeat(1, 1fr); }
    &.softcols\:2\@laptop { grid-template-columns: repeat(2, 1fr); }
    &.softcols\:3\@laptop { grid-template-columns: repeat(3, 1fr); }
    &.softcols\:4\@laptop { grid-template-columns: repeat(4, 1fr); }
    &.softcols\:5\@laptop { grid-template-columns: repeat(5, 1fr); }
    &.softcols\:6\@laptop { grid-template-columns: repeat(6, 1fr); }
  }

  /* TABLET - (768px a 1023px) - Por defecto: 2 columnas */
  @media (max-width: 1023px) {
    /* COMPORTAMIENTO POR DEFECTO: 2 columnas en tablet si no se especifica nada */
    &:not([class*="cols:@"]) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    > div {
      padding-left: var(--mobile-padding);
      padding-right: var(--mobile-padding);
    }

    /* Sobrescrituras específicas para tablet */
    &.cols\:1\@tablet { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    &.cols\:2\@tablet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &.cols\:3\@tablet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    &.cols\:4\@tablet { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    &.softcols\:1\@tablet { grid-template-columns: repeat(1, 1fr); }
    &.softcols\:2\@tablet { grid-template-columns: repeat(2, 1fr); }
    &.softcols\:3\@tablet { grid-template-columns: repeat(3, 1fr); }
    &.softcols\:4\@tablet { grid-template-columns: repeat(4, 1fr); }
  }

  /* MOBILE - (640px o menos) - Por defecto: 1 columna */
  @media (max-width: 639px) {
    /* COMPORTAMIENTO POR DEFECTO: 1 columna en móvil si no se especifica @mobile */
    &:not([class*="@mobile"]) {
      grid-template-columns: minmax(200px, 1fr);
    }
    
    /* Sobrescrituras específicas para mobile */
    &.cols\:1\@mobile { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    &.cols\:2\@mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    &.cols\:3\@mobile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    &.cols\:4\@mobile { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    &.softcols\:1\@mobile { grid-template-columns: repeat(1, 1fr); }
    &.softcols\:2\@mobile { grid-template-columns: repeat(2, 1fr); }
    &.softcols\:3\@mobile { grid-template-columns: repeat(3, 1fr); }
    &.softcols\:4\@mobile { grid-template-columns: repeat(4, 1fr); }
  }

  @media (min-width: 640px) {
  /* Column spans (comunes a todos los dispositivos) */
  .colspan\:2 { grid-column-end: span 2; }
  .colspan\:3 { grid-column-end: span 3; }
  .colspan\:4 { grid-column-end: span 4; }
  .colspan\:5 { grid-column-end: span 5; }
  .colspan\:6 { grid-column-end: span 6; }
  .colspan\:7 { grid-column-end: span 7; }
  .colspan\:8 { grid-column-end: span 8; }
  .colspan\:9 { grid-column-end: span 9; }
  .colspan\:10 { grid-column-end: span 10; }
  .colspan\:11 { grid-column-end: span 11; }
  .colspan\:12 { grid-column-end: span 12; }

  /* Row spans (comunes a todos los dispositivos) */
  .rowspan\:2 { grid-row: span 2; }
  .rowspan\:3 { grid-row: span 3; }
  .rowspan\:4 { grid-row: span 4; }
  .rowspan\:5 { grid-row: span 5; }
  .rowspan\:6 { grid-row: span 6; }
  .rowspan\:7 { grid-row: span 7; }
  .rowspan\:8 { grid-row: span 8; }
  .rowspan\:9 { grid-row: span 9; }
  .rowspan\:10 { grid-row: span 10; }
  .rowspan\:11 { grid-row: span 11; }
  .rowspan\:12 { grid-row: span 12; }
  }
}

.gap\:0{
  gap: 0;
}
.gap\:1{
  gap: var(--spacing-unit);
}
.gap\:2{
  gap: calc(var(--spacing-unit) * 2);
}
.gap\:3{
  gap: calc(var(--spacing-unit) * 3);
}
.gap\:4{
  gap: calc(var(--spacing-unit) * 4);
}
.gap\:5{
  gap: calc(var(--spacing-unit) * 5);
}
.gap\:6{
  gap: calc(var(--spacing-unit) * 6);
}
.gap\:7{
  gap: calc(var(--spacing-unit) * 7);
}
.gap\:8{
  gap: calc(var(--spacing-unit) * 8);
}
.gap\:9{
  gap: calc(var(--spacing-unit) * 9);
}
.gap\:10{
  gap: calc(var(--spacing-unit) * 10);
}
.gap\:15{
  gap: calc(var(--spacing-unit) * 15);
}
.gap\:20{
  gap: calc(var(--spacing-unit) * 20);
}



/** AUTOCOLS - Desktop First **/
.autocols {
  --autocols-gap: 5px;
  display: grid;
  gap: var(--autocols-gap);
  
  /* DESKTOP FIRST - Base para escritorio */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));

  /* DESKTOP - Clases sin @ que aplican por defecto en desktop */
  &.maxcols\:1 {
    grid-template-columns: 1fr;
  }
  &.maxcols\:2 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap)) / 2), 1fr)
    );
  }
  &.maxcols\:3 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 2) / 3), 1fr)
    );
  }
  &.maxcols\:4 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 3) / 4), 1fr)
    );
  }
  &.maxcols\:5 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 4) / 5), 1fr)
    );
  }
  &.maxcols\:6 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 5) / 6), 1fr)
    );
  }
  &.maxcols\:7 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 6) / 7), 1fr)
    );
  }
  &.maxcols\:8 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 7) / 8), 1fr)
    );
  }
  &.maxcols\:9 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 8) / 9), 1fr)
    );
  }
  &.maxcols\:10 {
    grid-template-columns: repeat(
      auto-fit,
      minmax(calc((100% - var(--autocols-gap) * 9) / 10), 1fr)
    );
  }

  /* LAPTOP - (1024px a 1279px) */
  @media (max-width: 1279px) {
    /* Si no se especifica @laptop, hereda el maxcols de desktop */
    
    /* Sobrescrituras específicas para laptop */
    &.maxcols\:1\@laptop {
      grid-template-columns: 1fr;
    }
    &.maxcols\:2\@laptop {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap)) / 2), 1fr)
      );
    }
    &.maxcols\:3\@laptop {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 2) / 3), 1fr)
      );
    }
    &.maxcols\:4\@laptop {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 3) / 4), 1fr)
      );
    }
    &.maxcols\:5\@laptop {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 4) / 5), 1fr)
      );
    }
    &.maxcols\:6\@laptop {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 5) / 6), 1fr)
      );
    }
  }

  /* TABLET - (768px a 1023px) */
  @media (max-width: 1023px) {
    /* COMPORTAMIENTO POR DEFECTO: máximo 2 columnas en tablet si no se especifica nada */
    &:not([class*="maxcols:@"]) {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap)) / 2), 1fr)
      );
    }

    /* Sobrescrituras específicas para tablet */
    &.maxcols\:1\@tablet {
      grid-template-columns: 1fr;
    }
    &.maxcols\:2\@tablet {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap)) / 2), 1fr)
      );
    }
    &.maxcols\:3\@tablet {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 2) / 3), 1fr)
      );
    }
    &.maxcols\:4\@tablet {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 3) / 4), 1fr)
      );
    }
  }

  /* MOBILE - (640px o menos) */
  @media (max-width: 639px) {
    /* COMPORTAMIENTO POR DEFECTO: 1 columna en móvil si no se especifica @mobile */
    &:not([class*="@mobile"]) {
      grid-template-columns: 1fr !important;
    }

    /* Sobrescrituras específicas para mobile */
    &.maxcols\:1\@mobile {
      grid-template-columns: 1fr;
    }
    &.maxcols\:2\@mobile {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap)) / 2), 1fr)
      );
    }
    &.maxcols\:3\@mobile {
      grid-template-columns: repeat(
        auto-fit,
        minmax(calc((100% - var(--autocols-gap) * 2) / 3), 1fr)
      );
    }
  }
}

/*** Colors ****/
.bg\:background { background-color: var(--color-background); }
.bg\:text { background-color: var(--color-text); }
.bg\:text-inverse { background-color: var(--color-text-inverse); }
.bg\:primary { background-color: var(--color-primary); }
.bg\:secondary { background-color: var(--color-secondary); }
.bg\:accent { background-color: var(--color-accent); }

.bg\:success { background-color: var(--color-success); }
.bg\:warning { background-color: var(--color-warning); }
.bg\:error { background-color: var(--color-error); }

.color\:background { background-color: var(--color-background); }
.color\:text { background-color: var(--color-text); }
.color\:text-inverse { background-color: var(--color-text-inverse); }
.color\:primary { background-color: var(--color-primary); }
.color\:secondary { background-color: var(--color-secondary); }
.color\:accent { background-color: var(--color-accent); }
.color\:success { background-color: var(--color-success); }
.color\:warning { background-color: var(--color-warning); }
.color\:error { background-color: var(--color-error); }

.bg\:background-5 { background-color: var(--color-bgackground-5); }
.bg\:background-10 { background-color: var(--color-bgackground-10); }
.bg\:background-20 { background-color: var(--color-bgackground-20); }
.bg\:background-30 { background-color: var(--color-bgackground-30); }
.bg\:background-40 { background-color: var(--color-bgackground-40); }
.bg\:background-50 { background-color: var(--color-bgackground-50); }
.bg\:background-60 { background-color: var(--color-bgackground-60); }
.bg\:background-70 { background-color: var(--color-bgackground-70); }
.bg\:background-80 { background-color: var(--color-bgackground-80); }
.bg\:background-90 { background-color: var(--color-bgackground-90); }
.bg\:primary-5 { background-color: var(--color-primary-5); }
.bg\:primary-10 { background-color: var(--color-primary-10); }
.bg\:primary-20 { background-color: var(--color-primary-20); }
.bg\:primary-30 { background-color: var(--color-primary-30); }
.bg\:primary-40 { background-color: var(--color-primary-40); }
.bg\:primary-50 { background-color: var(--color-primary-50); }
.bg\:primary-60 { background-color: var(--color-primary-60); }
.bg\:primary-70 { background-color: var(--color-primary-70); }
.bg\:primary-80 { background-color: var(--color-primary-80); }
.bg\:primary-90 { background-color: var(--color-primary-90); }
.bg\:secondary-5 { background-color: var(--color-secondary-5); }
.bg\:secondary-10 { background-color: var(--color-secondary-10); }
.bg\:secondary-20 { background-color: var(--color-secondary-20); }
.bg\:secondary-30 { background-color: var(--color-secondary-30); }
.bg\:secondary-40 { background-color: var(--color-secondary-40); }
.bg\:secondary-50 { background-color: var(--color-secondary-50); }
.bg\:secondary-60 { background-color: var(--color-secondary-60); }
.bg\:secondary-70 { background-color: var(--color-secondary-70); }
.bg\:secondary-80 { background-color: var(--color-secondary-80); }
.bg\:secondary-90 { background-color: var(--color-secondary-90); }
.bg\:accent-5 { background-color: var(--color-accent-5); }
.bg\:accent-10 { background-color: var(--color-accent-10); }
.bg\:accent-20 { background-color: var(--color-accent-20); }
.bg\:accent-30 { background-color: var(--color-accent-30); }
.bg\:accent-40 { background-color: var(--color-accent-40); }
.bg\:accent-50 { background-color: var(--color-accent-50); }
.bg\:accent-60 { background-color: var(--color-accent-60); }
.bg\:accent-70 { background-color: var(--color-accent-70); }
.bg\:accent-80 { background-color: var(--color-accent-80); }
.bg\:accent-90 { background-color: var(--color-accent-90); }
.bg\:text-5 { background-color: var(--color-text-5); }
.bg\:text-10 { background-color: var(--color-text-10); }
.bg\:text-20 { background-color: var(--color-text-20); }
.bg\:text-30 { background-color: var(--color-text-30); }
.bg\:text-40 { background-color: var(--color-text-40); }
.bg\:text-50 { background-color: var(--color-text-50); }
.bg\:text-60 { background-color: var(--color-text-60); }
.bg\:text-70 { background-color: var(--color-text-70); }
.bg\:text-80 { background-color: var(--color-text-80); }
.bg\:text-90 { background-color: var(--color-text-90); }
.bg\:success-5 { background-color: var(--color-success-5); }
.bg\:success-10 { background-color: var(--color-success-10); }
.bg\:success-20 { background-color: var(--color-success-20); }
.bg\:success-30 { background-color: var(--color-success-30); }
.bg\:success-40 { background-color: var(--color-success-40); }
.bg\:success-50 { background-color: var(--color-success-50); }
.bg\:success-60 { background-color: var(--color-success-60); }
.bg\:success-70 { background-color: var(--color-success-70); }
.bg\:success-80 { background-color: var(--color-success-80); }
.bg\:success-90 { background-color: var(--color-success-90); }
.bg\:warning-5 { background-color: var(--color-warning-5); }
.bg\:warning-10 { background-color: var(--color-warning-10); }
.bg\:warning-20 { background-color: var(--color-warning-20); }
.bg\:warning-30 { background-color: var(--color-warning-30); }
.bg\:warning-40 { background-color: var(--color-warning-40); }
.bg\:warning-50 { background-color: var(--color-warning-50); }
.bg\:warning-60 { background-color: var(--color-warning-60); }
.bg\:warning-70 { background-color: var(--color-warning-70); }
.bg\:warning-80 { background-color: var(--color-warning-80); }
.bg\:warning-90 { background-color: var(--color-warning-90); }
.bg\:error-5 { background-color: var(--color-error-5); }
.bg\:error-10 { background-color: var(--color-error-10); }
.bg\:error-20 { background-color: var(--color-error-20); }
.bg\:error-30 { background-color: var(--color-error-30); }
.bg\:error-40 { background-color: var(--color-error-40); }
.bg\:error-50 { background-color: var(--color-error-50); }
.bg\:error-60 { background-color: var(--color-error-60); }
.bg\:error-70 { background-color: var(--color-error-70); }
.bg\:error-80 { background-color: var(--color-error-80); }
.bg\:error-90 { background-color: var(--color-error-90); }




/* Base Styles
-------------------------------------------------- */
html {
    font-size: var(--base-font-size);
    scroll-behavior: smooth;
}

body {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 400;
    font-family: var(--font-system-ui);
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
}

/* Typography
-------------------------------------------------- */

/* Headers */
h1,h2,h3,h4,h5,h6{margin:0;font-weight:var(--headers-weight)}
h1{font-size:2.48rem;line-height:1}
h2{font-size:2.23rem;line-height:1.05}
h3{font-size:1.86rem;line-height:1.1}
h4{font-size:1.49rem;line-height:1.15}
h5{font-size:1.11rem;line-height:1.2}
h6{font-size:1rem;line-height:1.25}

/* Text elements */
b,strong{font-weight:600}
p{margin-top:0}

/* Images */
img{max-width:100%;height:auto;display:block}
.img-inline{display:inline-block};

/* Font Families */
.font\:system-ui{font-family:var(--font-system-ui)}
.font\:transitional{font-family:var(--font-transitional)}
.font\:old-style{font-family:var(--font-old-style)}
.font\:humanist{font-family:var(--font-humanist)}
.font\:geometric-humanist{font-family:var(--font-geometric-humanist)}
.font\:classical-humanist{font-family:var(--font-classical-humanist)}
.font\:neo-grotesque{font-family:var(--font-neo-grotesque)}
.font\:monospace-slab-serif{font-family:var(--font-monospace-slab-serif)}
.font\:monospace-code{font-family:var(--font-monospace-code)}
.font\:industrial{font-family:var(--font-industrial)}
.font\:rounded-sans{font-family:var(--font-rounded-sans)}
.font\:slab-serif{font-family:var(--font-slab-serif)}
.font\:antique{font-family:var(--font-antique)}
.font\:didone{font-family:var(--font-didone)}
.font\:handwritten{font-family:var(--font-handwritten)}

/* Font Weight */
.fw\:100,.weight\:100{font-weight:100}
.fw\:200,.weight\:200{font-weight:200}
.fw\:300,.weight\:300{font-weight:300}
.fw\:400,.weight\:400{font-weight:400}
.fw\:500,.weight\:500{font-weight:500}
.fw\:600,.weight\:600{font-weight:600}
.fw\:700,.weight\:700{font-weight:700}
.fw\:800,.weight\:800{font-weight:800}
.fw\:900,.weight\:900{font-weight:900}


/***** FONT SIZES *****/

/* DESKTOP - Font sizes base */
.fs\:\.5 { font-size: .5rem; }
.fs\:\.6 { font-size: .6rem; }
.fs\:\.7 { font-size: .7rem; }
.fs\:\.8 { font-size: .8rem; }
.fs\:1 { font-size: 1rem; }
.fs\:1\.5 { font-size: 1.5rem; }
.fs\:2 { font-size: 2rem; }
.fs\:2\.5 { font-size: 2.5rem; }
.fs\:3 { font-size: 3rem; }
.fs\:3\.5 { font-size: 3.5rem; }
.fs\:4 { font-size: 4rem; }
.fs\:4\.5 { font-size: 4.5rem; }
.fs\:5 { font-size: 5rem; }
.fs\:5\.5 { font-size: 5.5rem; }
.fs\:6 { font-size: 6rem; }
.fs\:6\.5 { font-size: 6.5rem; }
.fs\:7 { font-size: 7rem; }

/* LAPTOP */
@media (max-width: 1279px) {
  .fs\:\.5\@laptop { font-size: .5rem; }
  .fs\:\.6\@laptop { font-size: .6rem; }
  .fs\:\.7\@laptop { font-size: .7rem; }
  .fs\:\.8\@laptop { font-size: .8rem; }
  .fs\:1\@laptop { font-size: 1rem; }
  .fs\:1\.5\@laptop { font-size: 1.5rem; }
  .fs\:2\@laptop { font-size: 2rem; }
  .fs\:2\.5\@laptop { font-size: 2.5rem; }
  .fs\:3\@laptop { font-size: 3rem; }
  .fs\:3\.5\@laptop { font-size: 3.5rem; }
  .fs\:4\@laptop { font-size: 4rem; }
  .fs\:4\.5\@laptop { font-size: 4.5rem; }
  .fs\:5\@laptop { font-size: 5rem; }
  .fs\:5\.5\@laptop { font-size: 5.5rem; }
  .fs\:6\@laptop { font-size: 6rem; }
  .fs\:6\.5\@laptop { font-size: 6.5rem; }
  .fs\:7\@laptop { font-size: 7rem; }
}

/* TABLET */
@media (max-width: 1023px) {
  .fs\:\.5\@tablet { font-size: .5rem; }
  .fs\:\.6\@tablet { font-size: .6rem; }
  .fs\:\.7\@tablet { font-size: .7rem; }
  .fs\:\.8\@tablet { font-size: .8rem; }
  .fs\:1\@tablet { font-size: 1rem; }
  .fs\:1\.5\@tablet { font-size: 1.5rem; }
  .fs\:2\@tablet { font-size: 2rem; }
  .fs\:2\.5\@tablet { font-size: 2.5rem; }
  .fs\:3\@tablet { font-size: 3rem; }
  .fs\:3\.5\@tablet { font-size: 3.5rem; }
  .fs\:4\@tablet { font-size: 4rem; }
  .fs\:4\.5\@tablet { font-size: 4.5rem; }
  .fs\:5\@tablet { font-size: 5rem; }
  .fs\:5\.5\@tablet { font-size: 5.5rem; }
  .fs\:6\@tablet { font-size: 6rem; }
  .fs\:6\.5\@tablet { font-size: 6.5rem; }
  .fs\:7\@tablet { font-size: 7rem; }
}

/* MOBILE */
@media (max-width: 639px) {
  .fs\:\.5\@mobile { font-size: .5rem; }
  .fs\:\.6\@mobile { font-size: .6rem; }
  .fs\:\.7\@mobile { font-size: .7rem; }
  .fs\:\.8\@mobile { font-size: .8rem; }
  .fs\:1\@mobile { font-size: 1rem; }
  .fs\:1\.5\@mobile { font-size: 1.5rem; }
  .fs\:2\@mobile { font-size: 2rem; }
  .fs\:2\.5\@mobile { font-size: 2.5rem; }
  .fs\:3\@mobile { font-size: 3rem; }
  .fs\:3\.5\@mobile { font-size: 3.5rem; }
  .fs\:4\@mobile { font-size: 4rem; }
  .fs\:4\.5\@mobile { font-size: 4.5rem; }
  .fs\:5\@mobile { font-size: 5rem; }
  .fs\:5\.5\@mobile { font-size: 5.5rem; }
  .fs\:6\@mobile { font-size: 6rem; }
  .fs\:6\.5\@mobile { font-size: 6.5rem; }
  .fs\:7\@mobile { font-size: 7rem; }
}

/**** Letters spacing ****/
/* Letter Spacing Negativo (-0.3em a 0) */
.ls\:-3 { letter-spacing: -0.09em; }
.ls\:-2 { letter-spacing: -0.06em; }
.ls\:-1 { letter-spacing: -0.03em; }

/* Letter Spacing Normal/Cero */
.ls\:0 { letter-spacing: 0em; }
.ls\:normal { letter-spacing: normal; }

/* Letter Spacing Positivo (0.3em a 3.0em) */
.ls\:1 { letter-spacing: 0.3em; }
.ls\:2 { letter-spacing: 0.6em; }
.ls\:3 { letter-spacing: 0.9em; }
.ls\:4 { letter-spacing: 1.2em; }
.ls\:5 { letter-spacing: 1.5em; }
.ls\:6 { letter-spacing: 1.8em; }
.ls\:7 { letter-spacing: 2.1em; }
.ls\:8 { letter-spacing: 2.4em; }
.ls\:9 { letter-spacing: 2.7em; }
.ls\:10 { letter-spacing: 3.0em; }

.lh\:1 { line-height: 1; }
.lh\:1\.2 { line-height: 1.2; }
.lh\:1\.4 { line-height: 1.4; }
.lh\:1\.6 { line-height: 1.6; }
.lh\:1\.8 { line-height: 1.8; }
.lh\:2 { line-height: 2; } 
.lh\:2\.5 { line-height: 2.5; }
.lh\:3 { line-height: 3; }


/** text-transform utilities **/
/* 🖥️ DESKTOP - Text transform base */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.none-case { text-transform: none; }

/* 💻 LAPTOP */
@media (max-width: 1279px) {
  .uppercase\@laptop { text-transform: uppercase; }
  .lowercase\@laptop { text-transform: lowercase; }
  .capitalize\@laptop { text-transform: capitalize; }
  .none-case\@laptop { text-transform: none; }
}

/* 📟 TABLET */
@media (max-width: 1023px) {
  .uppercase\@tablet { text-transform: uppercase; }
  .lowercase\@tablet { text-transform: lowercase; }
  .capitalize\@tablet { text-transform: capitalize; }
  .none-case\@tablet { text-transform: none; }
}

/* 📱 MOBILE */
@media (max-width: 639px) {
  .uppercase\@mobile { text-transform: uppercase; }
  .lowercase\@mobile { text-transform: lowercase; }
  .capitalize\@mobile { text-transform: capitalize; }
  .none-case\@mobile { text-transform: none; }
}


/* Links
-------------------------------------------------- */
/* Links (excluyendo botones) */
a:not(.button){color:var(--accent-color)}
a:not(.button):hover{color:var(--accent-color-hover)}


/**** FORMS & UI ELEMENTS *****/
/* Forms Reset - only the essentials
-------------------------------------------------- */
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;line-height:1.15}
button,input{overflow:visible}
button,select{text-transform:none}
textarea{overflow:auto;resize:vertical}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}

/* ===== SISTEMA UI (Estilos Opcionales) ===== */

/* Botones UI */
.ui button,.ui .button,.ui [type="submit"],.ui [type="reset"],.ui [type="button"]{
display:inline-block;height:var(--button-height);padding:var(--button-padding);
color:var(--color-text-80);text-align:center;font-size:var(--button-fontsize);
font-weight:var(--button-weight);line-height:var(--button-height);text-transform:uppercase;
text-decoration:none;white-space:nowrap;background:transparent;border-radius:var(--button-border-radius);
border:1px solid var(--color-text-60);cursor:pointer;box-sizing:border-box; ;transition: all 0.3s ease-in-out;}

/* Hover/Focus Botones */
.ui button:hover,.ui .button:hover,.ui [type="submit"]:hover,.ui [type="reset"]:hover,.ui [type="button"]:hover,
.ui button:focus,.ui .button:focus,.ui [type="submit"]:focus,.ui [type="reset"]:focus,.ui [type="button"]:focus{
color:var(--color-text);border-color:var(--color-text-80);outline:0}

/* Botón Primario */
.ui button.button-primary,.ui .button.button-primary,.ui [type="submit"].button-primary{
color:var(--button-primary-color);background:var(--accent-color);border-color:var(--accent-color)}
.ui button.button-primary:hover,.ui .button.button-primary:hover,.ui [type="submit"].button-primary:hover,
.ui button.button-primary:focus,.ui .button.button-primary:focus,.ui [type="submit"].button-primary:focus{
background:var(--accent-color-hover);border-color:var(--accent-color-hover)}

/* Inputs/Textareas UI */
.ui [type="email"],.ui [type="number"],.ui [type="search"],.ui [type="text"],.ui [type="tel"],
.ui [type="url"],.ui [type="password"],.ui [type="date"],.ui [type="time"],.ui [type="color"],
.ui [type="file"],.ui [type="datetime-local"],.ui [type="month"],.ui [type="week"],
.ui textarea,.ui select{
height:var(--input-height);padding:var(--input-padding);color:var(--color-text);
background:var(--color-background);border:1px solid var(--color-text-30);border-radius:4px;
box-shadow:none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none}

/* Textarea específico */
.ui textarea{min-height:var(--textarea-min-height)}

/* Focus Inputs */
.ui [type="email"]:focus,.ui [type="number"]:focus,.ui [type="search"]:focus,.ui [type="text"]:focus,
.ui [type="tel"]:focus,.ui [type="url"]:focus,.ui [type="password"]:focus,.ui [type="date"]:focus,
.ui [type="time"]:focus,.ui [type="color"]:focus,.ui [type="datetime-local"]:focus,.ui [type="month"]:focus,
.ui [type="week"]:focus,.ui textarea:focus,.ui select:focus{
border:1px solid var(--color-accent);outline:0}

/* Labels y Fieldset */
.ui label,.ui legend{font-weight:600}
.ui fieldset{padding:0;border-width:0}
.ui [type="checkbox"]{accent-color:var(--color-accent)}


/* Listas UI */
.ui ul{list-style:disc;padding-left:1em}.ui ol{list-style:decimal;padding-left:1em}
.ui li{margin-bottom:0;line-height:1.4}

/* Listas Anidadas UI */
.ui ul ul,.ui ol ul,.ui ul ol,.ui ol ol{
margin:0.5rem 0 1rem 1rem;font-size:0.95em;opacity:0.95}

/* Listas Especiales UI */
.ui.list-unstyled,.ui.list-inline{list-style:none;padding-left:0}
.ui.list-inline li{display:inline-block;margin-right:1rem;margin-bottom:0}
.ui.list-tight li{margin-bottom:0.5rem}
.ui.list-loose li{margin-bottom:1.5rem}
.ui.list-none li{margin-bottom:0}

/* Lista con Íconos UI */
.ui.list-check li{list-style:none;padding-left:1.5em}
.ui.list-check li:before{content:"✓";margin-left:-1.5em;margin-right:0.5em;color:var(--accent-color)}

/* Lista Descriptiva UI */
.ui.list-dl dt{font-weight:600;margin-top:1rem}
.ui.list-dl dd{margin:0.25rem 0 1rem 1rem;color:var(--color-text-70)}

/* Listas Responsive */
@media (max-width:639px){
.ui.list-inline li{display:block;margin-right:0;margin-bottom:0.5rem}}

/* Estilos para checkboxes y radios personalizados */
.ui .ui-checkable input[type="checkbox"],
.ui .ui-checkable input[type="radio"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.ui .ui-checkable label {
  position: relative;
  padding-left: 1.4em;
  margin-right: 1.4em;
  margin-bottom: 0.75em;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  line-height: 1.5;
  font-weight: normal
}

.ui .ui-checkable label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.9em;
  height: 0.9em;
  border: 1px solid var(--color-text-70);
  background-color: var(--color-background);
  transition: all 0.2s ease;
}

.ui .ui-checkable input[type="checkbox"] + label::before {
  border-radius: 3px;
}

.ui .ui-checkable input[type="radio"] + label::before {
  border-radius: 50%;
}

.ui .ui-checkable input[type="checkbox"]:checked + label::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.ui .ui-checkable input[type="checkbox"]:checked + label::after {
  content: '';
  position: absolute;
  left: 0.35em;
  top: 0.3em;
  width: .25em;
  height: 0.55em;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ui .ui-checkable input[type="radio"]:checked + label::before {
  background-color: white;
  border-color: var(--color-primary);
}

.ui .ui-checkable input[type="radio"]:checked + label::after {
  content: '';
  position: absolute;
  left: .5em;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  background-color: var(--color-primary);
}

.ui .ui-checkable input[type="checkbox"]:focus + label::before,
.ui .ui-checkable input[type="radio"]:focus + label::before {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.ui .ui-checkable label:hover::before {
  border-color: var(--color-primary);
}

.ui .ui-checkable input[type="checkbox"]:disabled + label,
.ui .ui-checkable input[type="radio"]:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}

.ui .ui-checkable input[type="checkbox"]:disabled + label::before,
.ui .ui-checkable input[type="radio"]:disabled + label::before {
  background-color: var(--color-text-10);
  border-color: var(--color-text-30);
}


/* Code
-------------------------------------------------- */
code {
    padding: .2rem .5rem;
    margin: 0 .2rem;
    font-size: 90%;
    font-family: var(--font-monospace-code);
    white-space: nowrap;
    background: var(--color-text-10);
    border: 1px solid var(--color-text-20);
    border-radius: 4px;
}

pre>code {
    display: block;
    padding: 1rem 1.5rem;
    white-space: pre;
    overflow: auto;
}


/* ===== TABLAS UI (Estilos Opcionales) ===== */

/* Tabla base UI - Elementos directos */
.ui table{width:100%;border-collapse:collapse;border-spacing:0}

/* Celdas UI - Elementos directos */
.ui th,.ui td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--color-text-30)}

/* Bordes laterales opcionales - Elementos directos */
.ui th:first-child,.ui td:first-child{padding-left:0.3em}
.ui th:last-child,.ui td:last-child{padding-right:0.3em}

/* Variantes de Tablas UI - Clases utilitarias */
.ui .table-bordered th,.ui .table-bordered td{border:1px solid var(--color-text-20)}
.ui .table-striped tr:nth-child(even){background:var(--color-text-5)}
.ui .table-hover tr:hover{background:var(--color-accent-20)}

/* Tablas Compactas UI - Clases utilitarias */
.ui .table-compact th,.ui .table-compact td{padding:8px 12px;font-size:0.9em}

/* Cabeceras UI - Elementos directos */
.ui table thead th{font-weight:600;background:var(--color-text-10);border-bottom:2px solid var(--color-text-30)}

/* CONTENEDOR RESPONSIVE */
.ui .table-container{
display:block;
width:100%;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch}

.ui .table-container table{
min-width:max-content;
width:100%;
margin:0}

/* Responsive: Scroll contenido - Sin colores */
@media (max-width:1023px){
.ui .table-responsive,.ui .table-responsive\@tablet{
display:block;
width:100%;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch}
.ui .table-responsive table,.ui .table-responsive\@tablet table{
min-width:max-content;
width:100%;
margin:0}}

@media (max-width:639px){
.ui .table-responsive\@mobile{
display:block;
width:100%;
max-width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch}
.ui .table-responsive\@mobile table{
min-width:max-content;
width:100%;
margin:0}}

/* Forzar scroll - Clases utilitarias */
.ui .table-scroll{table-layout:auto;width:auto;min-width:100%}

/**** SHADOWS ****/
:root {
  --shadow-color: #000000; /* Variable para el color base de la sombra (puede ser hexadecimal, rgb, hsl, etc.) */
}

.shadow {
  -webkit-box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--shadow-color) 15%, transparent) !important;
  box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--shadow-color) 15%, transparent) !important;
}

.shadow\:sm {
  -webkit-box-shadow: 0 0.125rem 0.25rem color-mix(in srgb, var(--shadow-color) 7.5%, transparent) !important;
  box-shadow: 0 0.125rem 0.25rem color-mix(in srgb, var(--shadow-color) 7.5%, transparent) !important;
}

.shadow\:lg {
  -webkit-box-shadow: 0 1rem 3rem color-mix(in srgb, var(--shadow-color) 17.5%, transparent) !important;
  box-shadow: 0 1rem 3rem color-mix(in srgb, var(--shadow-color) 17.5%, transparent) !important;
}

.shadow\:0,
.shadow\:none {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.shadow\:1 {
  -webkit-box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 7%, transparent) !important;
  box-shadow: 0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 7%, transparent) !important;
}

.shadow\:2 {
  -webkit-box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 1px 3px 0 color-mix(in srgb, var(--shadow-color) 7%, transparent), 
    0 1px 2px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:3 {
  -webkit-box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 2px 4px -1px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 4px 6px -1px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 2px 4px -1px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:4 {
  -webkit-box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 4px 6px -2px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 4px 6px -2px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:5 {
  -webkit-box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 10px 10px -5px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 20px 25px -5px color-mix(in srgb, var(--shadow-color) 7%, transparent),
    0 10px 10px -5px color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:6 {
  -webkit-box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 25px 50px -12px color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}

.shadow\:1-soft {
  -webkit-box-shadow: 0 1px 5px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 1px 5px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:2-soft {
  -webkit-box-shadow: 0 2px 10px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 2px 10px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:3-soft {
  -webkit-box-shadow: 0 5px 15px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 5px 15px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:4-soft {
  -webkit-box-shadow: 0 10px 20px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 10px 20px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:5-soft {
  -webkit-box-shadow: 0 15px 30px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 15px 30px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:6-soft {
  -webkit-box-shadow: 0 20px 40px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
  box-shadow: 0 20px 40px 0 color-mix(in srgb, var(--shadow-color) 5%, transparent) !important;
}

.shadow\:1-strong {
  -webkit-box-shadow: 0 1px 5px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 1px 5px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}

.shadow\:2-strong {
  -webkit-box-shadow: 0 2px 10px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 2px 10px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}

.shadow\:3-strong {
  -webkit-box-shadow: 0 5px 15px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 5px 15px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}

.shadow\:4-strong {
  -webkit-box-shadow: 0 10px 20px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 10px 20px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}

.shadow\:5-strong {
  -webkit-box-shadow: 0 15px 30px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 15px 30px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}

.shadow\:6-strong {
  -webkit-box-shadow: 0 20px 40px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
  box-shadow: 0 20px 40px 0 color-mix(in srgb, var(--shadow-color) 21%, transparent) !important;
}


/* Utilities
-------------------------------------------------- */

.pull-right { float: right;}
.pull-left { float: left; }

/**** ALIGNMENT UTILITIES ****/
/* 🖥️ DESKTOP - Text align base */
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }
.start { text-align: start; }
.end { text-align: end; }

/* 💻 LAPTOP */
@media (max-width: 1279px) {
  .left\@laptop { text-align: left; }
  .center\@laptop { text-align: center; }
  .right\@laptop { text-align: right; }
  .justify\@laptop { text-align: justify; }
  .start\@laptop { text-align: start; }
  .end\@laptop { text-align: end; }
}

/* 📟 TABLET */
@media (max-width: 1023px) {
  .left\@tablet { text-align: left; }
  .center\@tablet { text-align: center; }
  .right\@tablet { text-align: right; }
  .justify\@tablet { text-align: justify; }
  .start\@tablet { text-align: start; }
  .end\@tablet { text-align: end; }
}

/* 📱 MOBILE */
@media (max-width: 639px) {
  .left\@mobile { text-align: left; }
  .center\@mobile { text-align: center; }
  .right\@mobile { text-align: right; }
  .justify\@mobile { text-align: justify; }
  .start\@mobile { text-align: start; }
  .end\@mobile { text-align: end; }
}

/* Display Utilities */
.d\:block{display:block}
.d\:inline{display:inline}
.d\:inline-block{display:inline-block}
.d\:flex{display:flex}
.d\:inline-flex{display:inline-flex}
.d\:none{display:none}

/* Laptop */
@media (max-width:1279px){
.d\:block\@laptop{display:block}
.d\:inline\@laptop{display:inline}
.d\:inline-block\@laptop{display:inline-block}
.d\:flex\@laptop{display:flex}
.d\:inline-flex\@laptop{display:inline-flex}
.d\:none\@laptop{display:none}}

/* Tablet */
@media (max-width:1023px){
.d\:block\@tablet{display:block}
.d\:inline\@tablet{display:inline}
.d\:inline-block\@tablet{display:inline-block}
.d\:flex\@tablet{display:flex}
.d\:inline-flex\@tablet{display:inline-flex}
.d\:none\@tablet{display:none}}

/* Mobile */
@media (max-width:639px){
.d\:block\@mobile{display:block}
.d\:inline\@mobile{display:inline}
.d\:inline-block\@mobile{display:inline-block}
.d\:flex\@mobile{display:flex}
.d\:inline-flex\@mobile{display:inline-flex}
.d\:none\@mobile{display:none}}

/* Flexbox */
.flex\:row { flex-direction: row; }
.flex\:row-reverse { flex-direction: row-reverse; }
.flex\:column { flex-direction: column; }
.flex\:column-reverse { flex-direction: column-reverse; }

.flex\:wrap { flex-wrap: wrap; }
.flex\:nowrap { flex-wrap: nowrap; }
.flex\:wrap-reverse { flex-wrap: wrap-reverse; }

.justify\:start { justify-content: flex-start; }
.justify\:end { justify-content: flex-end; }
.justify\:center { justify-content: center; }
.justify\:between { justify-content: space-between; }
.justify\:around { justify-content: space-around; }
.justify\:evenly { justify-content: space-evenly; }

.items\:start { align-items: flex-start; }
.items\:end { align-items: flex-end; }
.items\:center { align-items: center; }
.items\:baseline { align-items: baseline; }
.items\:stretch { align-items: stretch; }

.content\:start { align-content: flex-start; }
.content\:end { align-content: flex-end; }
.content\:center { align-content: center; }
.content\:between { align-content: space-between; }
.content\:around { align-content: space-around; }
.content\:stretch { align-content: stretch; }

.self\:auto { align-self: auto; }
.self\:start { align-self: flex-start; }
.self\:end { align-self: flex-end; }
.self\:center { align-self: center; }
.self\:baseline { align-self: baseline; }
.self\:stretch { align-self: stretch; }

.flex-grow\:0 { flex-grow: 0; }
.flex-grow\:1 { flex-grow: 1; }
.flex-shrink\:0 { flex-shrink: 0; }
.flex-shrink\:1 { flex-shrink: 1; }

.flex-basis\:auto { flex-basis: auto; }
.flex-basis\:0 { flex-basis: 0; }
.flex-basis\:full { flex-basis: 100%; }

/*... Width utilities ...*/
/* .w:auto	Ancho automático según el contenido
.w:max	Ancho máximo que el contenido requiere
.w:min	Ancho mínimo que el contenido requiere
.w:fit	Ancho que se ajusta al contenido disponible */

/* 🖥️ DESKTOP - Width base */
.w\:full, .w\:100, .full-width { width: 100%; }
.w\:90 { width: 90%; }
.w\:80 { width: 80%; }
.w\:70 { width: 70%; }
.w\:60 { width: 60%; }
.w\:50 { width: 50%; }
.w\:40 { width: 40%; }
.w\:30 { width: 30%; }
.w\:20 { width: 20%; }
.w\:10 { width: 10%; }
.w\:0 { width: 0%; }

.w\:auto { width: auto; }
.w\:max { width: max-content; }
.w\:min { width: min-content; }
.w\:fit { width: fit-content; }

/* 💻 LAPTOP */
@media (max-width: 1279px) {
  .w\:full\@laptop, .w\:100\@laptop, .full-width\@laptop { width: 100%; }
  .w\:90\@laptop { width: 90%; }
  .w\:80\@laptop { width: 80%; }
  .w\:70\@laptop { width: 70%; }
  .w\:60\@laptop { width: 60%; }
  .w\:50\@laptop { width: 50%; }
  .w\:40\@laptop { width: 40%; }
  .w\:30\@laptop { width: 30%; }
  .w\:20\@laptop { width: 20%; }
  .w\:10\@laptop { width: 10%; }
  .w\:0\@laptop { width: 0%; }

  .w\:auto\@laptop { width: auto; }
  .w\:max\@laptop { width: max-content; }
  .w\:min\@laptop { width: min-content; }
  .w\:fit\@laptop { width: fit-content; }
}

/* 📟 TABLET */
@media (max-width: 1023px) {
  .w\:full\@tablet, .w\:100\@tablet, .full-width\@tablet { width: 100%; }
  .w\:90\@tablet { width: 90%; }
  .w\:80\@tablet { width: 80%; }
  .w\:70\@tablet { width: 70%; }
  .w\:60\@tablet { width: 60%; }
  .w\:50\@tablet { width: 50%; }
  .w\:40\@tablet { width: 40%; }
  .w\:30\@tablet { width: 30%; }
  .w\:20\@tablet { width: 20%; }
  .w\:10\@tablet { width: 10%; }
  .w\:0\@tablet { width: 0%; }

  .w\:auto\@tablet { width: auto; }
  .w\:max\@tablet { width: max-content; }
  .w\:min\@tablet { width: min-content; }
  .w\:fit\@tablet { width: fit-content; }
}

/* 📱 MOBILE */
@media (max-width: 639px) {
  .w\:full\@mobile, .w\:100\@mobile, .full-width\@mobile { width: 100%; }
  .w\:90\@mobile { width: 90%; }
  .w\:80\@mobile { width: 80%; }
  .w\:70\@mobile { width: 70%; }
  .w\:60\@mobile { width: 60%; }
  .w\:50\@mobile { width: 50%; }
  .w\:40\@mobile { width: 40%; }
  .w\:30\@mobile { width: 30%; }
  .w\:20\@mobile { width: 20%; }
  .w\:10\@mobile { width: 10%; }
  .w\:0\@mobile { width: 0%; }

  .w\:auto\@mobile { width: auto; }
  .w\:max\@mobile { width: max-content; }
  .w\:min\@mobile { width: min-content; }
  .w\:fit\@mobile { width: fit-content; }
}

/* ===== MAX-WIDTH UTILITIES ===== */

/* 🖥️ DESKTOP - Max-width base */
.max-w\:full,.max-w\:100{max-width:100%}
.max-w\:90{max-width:90%}
.max-w\:80{max-width:80%}
.max-w\:70{max-width:70%}
.max-w\:60{max-width:60%}
.max-w\:50{max-width:50%}
.max-w\:40{max-width:40%}
.max-w\:30{max-width:30%}
.max-w\:20{max-width:20%}
.max-w\:10{max-width:10%}
.max-w\:0{max-width:0%}

.max-w\:auto{max-width:auto}
.max-w\:max{max-width:max-content}
.max-w\:min{max-width:min-content}
.max-w\:fit{max-width:fit-content}

/* Valores absolutos comunes */
.max-w\:xs{max-width:20rem}   /* 320px */
.max-w\:sm{max-width:24rem}   /* 384px */
.max-w\:md{max-width:28rem}   /* 448px */
.max-w\:lg{max-width:32rem}   /* 512px */
.max-w\:xl{max-width:36rem}   /* 576px */
.max-w\:2xl{max-width:42rem}  /* 672px */
.max-w\:3xl{max-width:48rem}  /* 768px */
.max-w\:4xl{max-width:56rem}  /* 896px */
.max-w\:5xl{max-width:64rem}  /* 1024px */
.max-w\:6xl{max-width:72rem}  /* 1152px */
.max-w\:7xl{max-width:80rem}  /* 1280px */

/* 💻 LAPTOP */
@media (max-width:1279px){
.max-w\:full\@laptop,.max-w\:100\@laptop{max-width:100%}
.max-w\:90\@laptop{max-width:90%}
.max-w\:80\@laptop{max-width:80%}
.max-w\:70\@laptop{max-width:70%}
.max-w\:60\@laptop{max-width:60%}
.max-w\:50\@laptop{max-width:50%}
.max-w\:40\@laptop{max-width:40%}
.max-w\:30\@laptop{max-width:30%}
.max-w\:20\@laptop{max-width:20%}
.max-w\:10\@laptop{max-width:10%}
.max-w\:0\@laptop{max-width:0%}

.max-w\:auto\@laptop{max-width:auto}
.max-w\:max\@laptop{max-width:max-content}
.max-w\:min\@laptop{max-width:min-content}
.max-w\:fit\@laptop{max-width:fit-content}

.max-w\:xs\@laptop{max-width:20rem}
.max-w\:sm\@laptop{max-width:24rem}
.max-w\:md\@laptop{max-width:28rem}
.max-w\:lg\@laptop{max-width:32rem}
.max-w\:xl\@laptop{max-width:36rem}
.max-w\:2xl\@laptop{max-width:42rem}
.max-w\:3xl\@laptop{max-width:48rem}
.max-w\:4xl\@laptop{max-width:56rem}
.max-w\:5xl\@laptop{max-width:64rem}
.max-w\:6xl\@laptop{max-width:72rem}
.max-w\:7xl\@laptop{max-width:80rem}}

/* 📟 TABLET */
@media (max-width:1023px){
.max-w\:full\@tablet,.max-w\:100\@tablet{max-width:100%}
.max-w\:90\@tablet{max-width:90%}
.max-w\:80\@tablet{max-width:80%}
.max-w\:70\@tablet{max-width:70%}
.max-w\:60\@tablet{max-width:60%}
.max-w\:50\@tablet{max-width:50%}
.max-w\:40\@tablet{max-width:40%}
.max-w\:30\@tablet{max-width:30%}
.max-w\:20\@tablet{max-width:20%}
.max-w\:10\@tablet{max-width:10%}
.max-w\:0\@tablet{max-width:0%}

.max-w\:auto\@tablet{max-width:auto}
.max-w\:max\@tablet{max-width:max-content}
.max-w\:min\@tablet{max-width:min-content}
.max-w\:fit\@tablet{max-width:fit-content}

.max-w\:xs\@tablet{max-width:20rem}
.max-w\:sm\@tablet{max-width:24rem}
.max-w\:md\@tablet{max-width:28rem}
.max-w\:lg\@tablet{max-width:32rem}
.max-w\:xl\@tablet{max-width:36rem}
.max-w\:2xl\@tablet{max-width:42rem}
.max-w\:3xl\@tablet{max-width:48rem}
.max-w\:4xl\@tablet{max-width:56rem}
.max-w\:5xl\@tablet{max-width:64rem}
.max-w\:6xl\@tablet{max-width:72rem}
.max-w\:7xl\@tablet{max-width:80rem}}

/* 📱 MOBILE */
@media (max-width:639px){
.max-w\:full\@mobile,.max-w\:100\@mobile{max-width:100%}
.max-w\:90\@mobile{max-width:90%}
.max-w\:80\@mobile{max-width:80%}
.max-w\:70\@mobile{max-width:70%}
.max-w\:60\@mobile{max-width:60%}
.max-w\:50\@mobile{max-width:50%}
.max-w\:40\@mobile{max-width:40%}
.max-w\:30\@mobile{max-width:30%}
.max-w\:20\@mobile{max-width:20%}
.max-w\:10\@mobile{max-width:10%}
.max-w\:0\@mobile{max-width:0%}

.max-w\:auto\@mobile{max-width:auto}
.max-w\:max\@mobile{max-width:max-content}
.max-w\:min\@mobile{max-width:min-content}
.max-w\:fit\@mobile{max-width:fit-content}

.max-w\:xs\@mobile{max-width:20rem}
.max-w\:sm\@mobile{max-width:24rem}
.max-w\:md\@mobile{max-width:28rem}
.max-w\:lg\@mobile{max-width:32rem}
.max-w\:xl\@mobile{max-width:36rem}
.max-w\:2xl\@mobile{max-width:42rem}
.max-w\:3xl\@mobile{max-width:48rem}
.max-w\:4xl\@mobile{max-width:56rem}
.max-w\:5xl\@mobile{max-width:64rem}
.max-w\:6xl\@mobile{max-width:72rem}
.max-w\:7xl\@mobile{max-width:80rem}}

/***** MARGIN UTILITIES *****/
/* Margin All (m:) - 0 to 11 with 0.5 increments */
.m\:0 { margin: 0 !important; }
.m\:0\.5 { margin: calc(var(--spacer)*0.5) !important; }
.m\:1 { margin: var(--spacer) !important; }
.m\:1\.5 { margin: calc(var(--spacer)*1.5) !important; }
.m\:2 { margin: calc(var(--spacer)*2) !important; }
.m\:2\.5 { margin: calc(var(--spacer)*2.5) !important; }
.m\:3 { margin: calc(var(--spacer)*3) !important; }
.m\:3\.5 { margin: calc(var(--spacer)*3.5) !important; }
.m\:4 { margin: calc(var(--spacer)*4) !important; }
.m\:4\.5 { margin: calc(var(--spacer)*4.5) !important; }
.m\:5 { margin: calc(var(--spacer)*5) !important; }
.m\:6 { margin: calc(var(--spacer)*6) !important; }
.m\:7 { margin: calc(var(--spacer)*7) !important; }
.m\:8 { margin: calc(var(--spacer)*8) !important; }
.m\:9 { margin: calc(var(--spacer)*9) !important; }
.m\:10 { margin: calc(var(--spacer)*10) !important; }
.m\:11 { margin: calc(var(--spacer)*11) !important; }
.m\:auto { margin: auto !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .m\:0\@laptop { margin: 0 !important; }
  .m\:0\.5\@laptop { margin: calc(var(--spacer)*0.5) !important; }
  .m\:1\@laptop { margin: var(--spacer) !important; }
  .m\:1\.5\@laptop { margin: calc(var(--spacer)*1.5) !important; }
  .m\:2\@laptop { margin: calc(var(--spacer)*2) !important; }
  .m\:2\.5\@laptop { margin: calc(var(--spacer)*2.5) !important; }
  .m\:3\@laptop { margin: calc(var(--spacer)*3) !important; }
  .m\:3\.5\@laptop { margin: calc(var(--spacer)*3.5) !important; }
  .m\:4\@laptop { margin: calc(var(--spacer)*4) !important; }
  .m\:4\.5\@laptop { margin: calc(var(--spacer)*4.5) !important; }
  .m\:5\@laptop { margin: calc(var(--spacer)*5) !important; }
  .m\:6\@laptop { margin: calc(var(--spacer)*6) !important; }
  .m\:7\@laptop { margin: calc(var(--spacer)*7) !important; }
  .m\:8\@laptop { margin: calc(var(--spacer)*8) !important; }
  .m\:9\@laptop { margin: calc(var(--spacer)*9) !important; }
  .m\:10\@laptop { margin: calc(var(--spacer)*10) !important; }
  .m\:11\@laptop { margin: calc(var(--spacer)*11) !important; }
  .m\:auto\@laptop { margin: auto !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .m\:0\@tablet { margin: 0 !important; }
  .m\:0\.5\@tablet { margin: calc(var(--spacer)*0.5) !important; }
  .m\:1\@tablet { margin: var(--spacer) !important; }
  .m\:1\.5\@tablet { margin: calc(var(--spacer)*1.5) !important; }
  .m\:2\@tablet { margin: calc(var(--spacer)*2) !important; }
  .m\:2\.5\@tablet { margin: calc(var(--spacer)*2.5) !important; }
  .m\:3\@tablet { margin: calc(var(--spacer)*3) !important; }
  .m\:3\.5\@tablet { margin: calc(var(--spacer)*3.5) !important; }
  .m\:4\@tablet { margin: calc(var(--spacer)*4) !important; }
  .m\:4\.5\@tablet { margin: calc(var(--spacer)*4.5) !important; }
  .m\:5\@tablet { margin: calc(var(--spacer)*5) !important; }
  .m\:6\@tablet { margin: calc(var(--spacer)*6) !important; }
  .m\:7\@tablet { margin: calc(var(--spacer)*7) !important; }
  .m\:8\@tablet { margin: calc(var(--spacer)*8) !important; }
  .m\:9\@tablet { margin: calc(var(--spacer)*9) !important; }
  .m\:10\@tablet { margin: calc(var(--spacer)*10) !important; }
  .m\:11\@tablet { margin: calc(var(--spacer)*11) !important; }
  .m\:auto\@tablet { margin: auto !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .m\:0\@mobile { margin: 0 !important; }
  .m\:0\.5\@mobile { margin: calc(var(--spacer)*0.5) !important; }
  .m\:1\@mobile { margin: var(--spacer) !important; }
  .m\:1\.5\@mobile { margin: calc(var(--spacer)*1.5) !important; }
  .m\:2\@mobile { margin: calc(var(--spacer)*2) !important; }
  .m\:2\.5\@mobile { margin: calc(var(--spacer)*2.5) !important; }
  .m\:3\@mobile { margin: calc(var(--spacer)*3) !important; }
  .m\:3\.5\@mobile { margin: calc(var(--spacer)*3.5) !important; }
  .m\:4\@mobile { margin: calc(var(--spacer)*4) !important; }
  .m\:4\.5\@mobile { margin: calc(var(--spacer)*4.5) !important; }
  .m\:5\@mobile { margin: calc(var(--spacer)*5) !important; }
  .m\:6\@mobile { margin: calc(var(--spacer)*6) !important; }
  .m\:7\@mobile { margin: calc(var(--spacer)*7) !important; }
  .m\:8\@mobile { margin: calc(var(--spacer)*8) !important; }
  .m\:9\@mobile { margin: calc(var(--spacer)*9) !important; }
  .m\:10\@mobile { margin: calc(var(--spacer)*10) !important; }
  .m\:11\@mobile { margin: calc(var(--spacer)*11) !important; }
  .m\:auto\@mobile { margin: auto !important; }
}

/* Margin Top (mt:) & Vertical (my:) */
.mt\:0, .my\:0 { margin-top: 0 !important; }
.mt\:0\.5, .my\:0\.5 { margin-top: calc(var(--spacer)*0.5) !important; }
.mt\:1, .my\:1 { margin-top: var(--spacer) !important; }
.mt\:1\.5, .my\:1\.5 { margin-top: calc(var(--spacer)*1.5) !important; }
.mt\:2, .my\:2 { margin-top: calc(var(--spacer)*2) !important; }
.mt\:2\.5, .my\:2\.5 { margin-top: calc(var(--spacer)*2.5) !important; }
.mt\:3, .my\:3 { margin-top: calc(var(--spacer)*3) !important; }
.mt\:3\.5, .my\:3\.5 { margin-top: calc(var(--spacer)*3.5) !important; }
.mt\:4, .my\:4 { margin-top: calc(var(--spacer)*4) !important; }
.mt\:4\.5, .my\:4\.5 { margin-top: calc(var(--spacer)*4.5) !important; }
.mt\:5, .my\:5 { margin-top: calc(var(--spacer)*5) !important; }
.mt\:6, .my\:6 { margin-top: calc(var(--spacer)*6) !important; }
.mt\:7, .my\:7 { margin-top: calc(var(--spacer)*7) !important; }
.mt\:8, .my\:8 { margin-top: calc(var(--spacer)*8) !important; }
.mt\:9, .my\:9 { margin-top: calc(var(--spacer)*9) !important; }
.mt\:10, .my\:10 { margin-top: calc(var(--spacer)*10) !important; }
.mt\:11, .my\:11 { margin-top: calc(var(--spacer)*11) !important; }
.mt\:auto, .my\:auto { margin-top: auto !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .mt\:0\@laptop, .my\:0\@laptop { margin-top: 0 !important; }
  .mt\:0\.5\@laptop, .my\:0\.5\@laptop { margin-top: calc(var(--spacer)*0.5) !important; }
  .mt\:1\@laptop, .my\:1\@laptop { margin-top: var(--spacer) !important; }
  .mt\:1\.5\@laptop, .my\:1\.5\@laptop { margin-top: calc(var(--spacer)*1.5) !important; }
  .mt\:2\@laptop, .my\:2\@laptop { margin-top: calc(var(--spacer)*2) !important; }
  .mt\:2\.5\@laptop, .my\:2\.5\@laptop { margin-top: calc(var(--spacer)*2.5) !important; }
  .mt\:3\@laptop, .my\:3\@laptop { margin-top: calc(var(--spacer)*3) !important; }
  .mt\:3\.5\@laptop, .my\:3\.5\@laptop { margin-top: calc(var(--spacer)*3.5) !important; }
  .mt\:4\@laptop, .my\:4\@laptop { margin-top: calc(var(--spacer)*4) !important; }
  .mt\:4\.5\@laptop, .my\:4\.5\@laptop { margin-top: calc(var(--spacer)*4.5) !important; }
  .mt\:5\@laptop, .my\:5\@laptop { margin-top: calc(var(--spacer)*5) !important; }
  .mt\:6\@laptop, .my\:6\@laptop { margin-top: calc(var(--spacer)*6) !important; }
  .mt\:7\@laptop, .my\:7\@laptop { margin-top: calc(var(--spacer)*7) !important; }
  .mt\:8\@laptop, .my\:8\@laptop { margin-top: calc(var(--spacer)*8) !important; }
  .mt\:9\@laptop, .my\:9\@laptop { margin-top: calc(var(--spacer)*9) !important; }
  .mt\:10\@laptop, .my\:10\@laptop { margin-top: calc(var(--spacer)*10) !important; }
  .mt\:11\@laptop, .my\:11\@laptop { margin-top: calc(var(--spacer)*11) !important; }
  .mt\:auto\@laptop, .my\:auto\@laptop { margin-top: auto !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .mt\:0\@tablet, .my\:0\@tablet { margin-top: 0 !important; }
  .mt\:0\.5\@tablet, .my\:0\.5\@tablet { margin-top: calc(var(--spacer)*0.5) !important; }
  .mt\:1\@tablet, .my\:1\@tablet { margin-top: var(--spacer) !important; }
  .mt\:1\.5\@tablet, .my\:1\.5\@tablet { margin-top: calc(var(--spacer)*1.5) !important; }
  .mt\:2\@tablet, .my\:2\@tablet { margin-top: calc(var(--spacer)*2) !important; }
  .mt\:2\.5\@tablet, .my\:2\.5\@tablet { margin-top: calc(var(--spacer)*2.5) !important; }
  .mt\:3\@tablet, .my\:3\@tablet { margin-top: calc(var(--spacer)*3) !important; }
  .mt\:3\.5\@tablet, .my\:3\.5\@tablet { margin-top: calc(var(--spacer)*3.5) !important; }
  .mt\:4\@tablet, .my\:4\@tablet { margin-top: calc(var(--spacer)*4) !important; }
  .mt\:4\.5\@tablet, .my\:4\.5\@tablet { margin-top: calc(var(--spacer)*4.5) !important; }
  .mt\:5\@tablet, .my\:5\@tablet { margin-top: calc(var(--spacer)*5) !important; }
  .mt\:6\@tablet, .my\:6\@tablet { margin-top: calc(var(--spacer)*6) !important; }
  .mt\:7\@tablet, .my\:7\@tablet { margin-top: calc(var(--spacer)*7) !important; }
  .mt\:8\@tablet, .my\:8\@tablet { margin-top: calc(var(--spacer)*8) !important; }
  .mt\:9\@tablet, .my\:9\@tablet { margin-top: calc(var(--spacer)*9) !important; }
  .mt\:10\@tablet, .my\:10\@tablet { margin-top: calc(var(--spacer)*10) !important; }
  .mt\:11\@tablet, .my\:11\@tablet { margin-top: calc(var(--spacer)*11) !important; }
  .mt\:auto\@tablet, .my\:auto\@tablet { margin-top: auto !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .mt\:0\@mobile, .my\:0\@mobile { margin-top: 0 !important; }
  .mt\:0\.5\@mobile, .my\:0\.5\@mobile { margin-top: calc(var(--spacer)*0.5) !important; }
  .mt\:1\@mobile, .my\:1\@mobile { margin-top: var(--spacer) !important; }
  .mt\:1\.5\@mobile, .my\:1\.5\@mobile { margin-top: calc(var(--spacer)*1.5) !important; }
  .mt\:2\@mobile, .my\:2\@mobile { margin-top: calc(var(--spacer)*2) !important; }
  .mt\:2\.5\@mobile, .my\:2\.5\@mobile { margin-top: calc(var(--spacer)*2.5) !important; }
  .mt\:3\@mobile, .my\:3\@mobile { margin-top: calc(var(--spacer)*3) !important; }
  .mt\:3\.5\@mobile, .my\:3\.5\@mobile { margin-top: calc(var(--spacer)*3.5) !important; }
  .mt\:4\@mobile, .my\:4\@mobile { margin-top: calc(var(--spacer)*4) !important; }
  .mt\:4\.5\@mobile, .my\:4\.5\@mobile { margin-top: calc(var(--spacer)*4.5) !important; }
  .mt\:5\@mobile, .my\:5\@mobile { margin-top: calc(var(--spacer)*5) !important; }
  .mt\:6\@mobile, .my\:6\@mobile { margin-top: calc(var(--spacer)*6) !important; }
  .mt\:7\@mobile, .my\:7\@mobile { margin-top: calc(var(--spacer)*7) !important; }
  .mt\:8\@mobile, .my\:8\@mobile { margin-top: calc(var(--spacer)*8) !important; }
  .mt\:9\@mobile, .my\:9\@mobile { margin-top: calc(var(--spacer)*9) !important; }
  .mt\:10\@mobile, .my\:10\@mobile { margin-top: calc(var(--spacer)*10) !important; }
  .mt\:11\@mobile, .my\:11\@mobile { margin-top: calc(var(--spacer)*11) !important; }
  .mt\:auto\@mobile, .my\:auto\@mobile { margin-top: auto !important; }
}

/* Margin Bottom (mb:) & Vertical (my:) */
.mb\:0, .my\:0 { margin-bottom: 0 !important; }
.mb\:0\.5, .my\:0\.5 { margin-bottom: calc(var(--spacer)*0.5) !important; }
.mb\:1, .my\:1 { margin-bottom: var(--spacer) !important; }
.mb\:1\.5, .my\:1\.5 { margin-bottom: calc(var(--spacer)*1.5) !important; }
.mb\:2, .my\:2 { margin-bottom: calc(var(--spacer)*2) !important; }
.mb\:2\.5, .my\:2\.5 { margin-bottom: calc(var(--spacer)*2.5) !important; }
.mb\:3, .my\:3 { margin-bottom: calc(var(--spacer)*3) !important; }
.mb\:3\.5, .my\:3\.5 { margin-bottom: calc(var(--spacer)*3.5) !important; }
.mb\:4, .my\:4 { margin-bottom: calc(var(--spacer)*4) !important; }
.mb\:4\.5, .my\:4\.5 { margin-bottom: calc(var(--spacer)*4.5) !important; }
.mb\:5, .my\:5 { margin-bottom: calc(var(--spacer)*5) !important; }
.mb\:6, .my\:6 { margin-bottom: calc(var(--spacer)*6) !important; }
.mb\:7, .my\:7 { margin-bottom: calc(var(--spacer)*7) !important; }
.mb\:8, .my\:8 { margin-bottom: calc(var(--spacer)*8) !important; }
.mb\:9, .my\:9 { margin-bottom: calc(var(--spacer)*9) !important; }
.mb\:10, .my\:10 { margin-bottom: calc(var(--spacer)*10) !important; }
.mb\:11, .my\:11 { margin-bottom: calc(var(--spacer)*11) !important; }
.mb\:auto, .my\:auto { margin-bottom: auto !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .mb\:0\@laptop, .my\:0\@laptop { margin-bottom: 0 !important; }
  .mb\:0\.5\@laptop, .my\:0\.5\@laptop { margin-bottom: calc(var(--spacer)*0.5) !important; }
  .mb\:1\@laptop, .my\:1\@laptop { margin-bottom: var(--spacer) !important; }
  .mb\:1\.5\@laptop, .my\:1\.5\@laptop { margin-bottom: calc(var(--spacer)*1.5) !important; }
  .mb\:2\@laptop, .my\:2\@laptop { margin-bottom: calc(var(--spacer)*2) !important; }
  .mb\:2\.5\@laptop, .my\:2\.5\@laptop { margin-bottom: calc(var(--spacer)*2.5) !important; }
  .mb\:3\@laptop, .my\:3\@laptop { margin-bottom: calc(var(--spacer)*3) !important; }
  .mb\:3\.5\@laptop, .my\:3\.5\@laptop { margin-bottom: calc(var(--spacer)*3.5) !important; }
  .mb\:4\@laptop, .my\:4\@laptop { margin-bottom: calc(var(--spacer)*4) !important; }
  .mb\:4\.5\@laptop, .my\:4\.5\@laptop { margin-bottom: calc(var(--spacer)*4.5) !important; }
  .mb\:5\@laptop, .my\:5\@laptop { margin-bottom: calc(var(--spacer)*5) !important; }
  .mb\:6\@laptop, .my\:6\@laptop { margin-bottom: calc(var(--spacer)*6) !important; }
  .mb\:7\@laptop, .my\:7\@laptop { margin-bottom: calc(var(--spacer)*7) !important; }
  .mb\:8\@laptop, .my\:8\@laptop { margin-bottom: calc(var(--spacer)*8) !important; }
  .mb\:9\@laptop, .my\:9\@laptop { margin-bottom: calc(var(--spacer)*9) !important; }
  .mb\:10\@laptop, .my\:10\@laptop { margin-bottom: calc(var(--spacer)*10) !important; }
  .mb\:11\@laptop, .my\:11\@laptop { margin-bottom: calc(var(--spacer)*11) !important; }
  .mb\:auto\@laptop, .my\:auto\@laptop { margin-bottom: auto !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .mb\:0\@tablet, .my\:0\@tablet { margin-bottom: 0 !important; }
  .mb\:0\.5\@tablet, .my\:0\.5\@tablet { margin-bottom: calc(var(--spacer)*0.5) !important; }
  .mb\:1\@tablet, .my\:1\@tablet { margin-bottom: var(--spacer) !important; }
  .mb\:1\.5\@tablet, .my\:1\.5\@tablet { margin-bottom: calc(var(--spacer)*1.5) !important; }
  .mb\:2\@tablet, .my\:2\@tablet { margin-bottom: calc(var(--spacer)*2) !important; }
  .mb\:2\.5\@tablet, .my\:2\.5\@tablet { margin-bottom: calc(var(--spacer)*2.5) !important; }
  .mb\:3\@tablet, .my\:3\@tablet { margin-bottom: calc(var(--spacer)*3) !important; }
  .mb\:3\.5\@tablet, .my\:3\.5\@tablet { margin-bottom: calc(var(--spacer)*3.5) !important; }
  .mb\:4\@tablet, .my\:4\@tablet { margin-bottom: calc(var(--spacer)*4) !important; }
  .mb\:4\.5\@tablet, .my\:4\.5\@tablet { margin-bottom: calc(var(--spacer)*4.5) !important; }
  .mb\:5\@tablet, .my\:5\@tablet { margin-bottom: calc(var(--spacer)*5) !important; }
  .mb\:6\@tablet, .my\:6\@tablet { margin-bottom: calc(var(--spacer)*6) !important; }
  .mb\:7\@tablet, .my\:7\@tablet { margin-bottom: calc(var(--spacer)*7) !important; }
  .mb\:8\@tablet, .my\:8\@tablet { margin-bottom: calc(var(--spacer)*8) !important; }
  .mb\:9\@tablet, .my\:9\@tablet { margin-bottom: calc(var(--spacer)*9) !important; }
  .mb\:10\@tablet, .my\:10\@tablet { margin-bottom: calc(var(--spacer)*10) !important; }
  .mb\:11\@tablet, .my\:11\@tablet { margin-bottom: calc(var(--spacer)*11) !important; }
  .mb\:auto\@tablet, .my\:auto\@tablet { margin-bottom: auto !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .mb\:0\@mobile, .my\:0\@mobile { margin-bottom: 0 !important; }
  .mb\:0\.5\@mobile, .my\:0\.5\@mobile { margin-bottom: calc(var(--spacer)*0.5) !important; }
  .mb\:1\@mobile, .my\:1\@mobile { margin-bottom: var(--spacer) !important; }
  .mb\:1\.5\@mobile, .my\:1\.5\@mobile { margin-bottom: calc(var(--spacer)*1.5) !important; }
  .mb\:2\@mobile, .my\:2\@mobile { margin-bottom: calc(var(--spacer)*2) !important; }
  .mb\:2\.5\@mobile, .my\:2\.5\@mobile { margin-bottom: calc(var(--spacer)*2.5) !important; }
  .mb\:3\@mobile, .my\:3\@mobile { margin-bottom: calc(var(--spacer)*3) !important; }
  .mb\:3\.5\@mobile, .my\:3\.5\@mobile { margin-bottom: calc(var(--spacer)*3.5) !important; }
  .mb\:4\@mobile, .my\:4\@mobile { margin-bottom: calc(var(--spacer)*4) !important; }
  .mb\:4\.5\@mobile, .my\:4\.5\@mobile { margin-bottom: calc(var(--spacer)*4.5) !important; }
  .mb\:5\@mobile, .my\:5\@mobile { margin-bottom: calc(var(--spacer)*5) !important; }
  .mb\:6\@mobile, .my\:6\@mobile { margin-bottom: calc(var(--spacer)*6) !important; }
  .mb\:7\@mobile, .my\:7\@mobile { margin-bottom: calc(var(--spacer)*7) !important; }
  .mb\:8\@mobile, .my\:8\@mobile { margin-bottom: calc(var(--spacer)*8) !important; }
  .mb\:9\@mobile, .my\:9\@mobile { margin-bottom: calc(var(--spacer)*9) !important; }
  .mb\:10\@mobile, .my\:10\@mobile { margin-bottom: calc(var(--spacer)*10) !important; }
  .mb\:11\@mobile, .my\:11\@mobile { margin-bottom: calc(var(--spacer)*11) !important; }
  .mb\:auto\@mobile, .my\:auto\@mobile { margin-bottom: auto !important; }
}

/* Margin Left (ml:) & Horizontal (mx:) */
.ml\:0, .mx\:0 { margin-left: 0 !important; }
.ml\:0\.5, .mx\:0\.5 { margin-left: calc(var(--spacer)*0.5) !important; }
.ml\:1, .mx\:1 { margin-left: var(--spacer) !important; }
.ml\:1\.5, .mx\:1\.5 { margin-left: calc(var(--spacer)*1.5) !important; }
.ml\:2, .mx\:2 { margin-left: calc(var(--spacer)*2) !important; }
.ml\:2\.5, .mx\:2\.5 { margin-left: calc(var(--spacer)*2.5) !important; }
.ml\:3, .mx\:3 { margin-left: calc(var(--spacer)*3) !important; }
.ml\:3\.5, .mx\:3\.5 { margin-left: calc(var(--spacer)*3.5) !important; }
.ml\:4, .mx\:4 { margin-left: calc(var(--spacer)*4) !important; }
.ml\:4\.5, .mx\:4\.5 { margin-left: calc(var(--spacer)*4.5) !important; }
.ml\:5, .mx\:5 { margin-left: calc(var(--spacer)*5) !important; }
.ml\:6, .mx\:6 { margin-left: calc(var(--spacer)*6) !important; }
.ml\:7, .mx\:7 { margin-left: calc(var(--spacer)*7) !important; }
.ml\:8, .mx\:8 { margin-left: calc(var(--spacer)*8) !important; }
.ml\:9, .mx\:9 { margin-left: calc(var(--spacer)*9) !important; }
.ml\:10, .mx\:10 { margin-left: calc(var(--spacer)*10) !important; }
.ml\:11, .mx\:11 { margin-left: calc(var(--spacer)*11) !important; }
.ml\:auto, .mx\:auto { margin-left: auto !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .ml\:0\@laptop, .mx\:0\@laptop { margin-left: 0 !important; }
  .ml\:0\.5\@laptop, .mx\:0\.5\@laptop { margin-left: calc(var(--spacer)*0.5) !important; }
  .ml\:1\@laptop, .mx\:1\@laptop { margin-left: var(--spacer) !important; }
  .ml\:1\.5\@laptop, .mx\:1\.5\@laptop { margin-left: calc(var(--spacer)*1.5) !important; }
  .ml\:2\@laptop, .mx\:2\@laptop { margin-left: calc(var(--spacer)*2) !important; }
  .ml\:2\.5\@laptop, .mx\:2\.5\@laptop { margin-left: calc(var(--spacer)*2.5) !important; }
  .ml\:3\@laptop, .mx\:3\@laptop { margin-left: calc(var(--spacer)*3) !important; }
  .ml\:3\.5\@laptop, .mx\:3\.5\@laptop { margin-left: calc(var(--spacer)*3.5) !important; }
  .ml\:4\@laptop, .mx\:4\@laptop { margin-left: calc(var(--spacer)*4) !important; }
  .ml\:4\.5\@laptop, .mx\:4\.5\@laptop { margin-left: calc(var(--spacer)*4.5) !important; }
  .ml\:5\@laptop, .mx\:5\@laptop { margin-left: calc(var(--spacer)*5) !important; }
  .ml\:6\@laptop, .mx\:6\@laptop { margin-left: calc(var(--spacer)*6) !important; }
  .ml\:7\@laptop, .mx\:7\@laptop { margin-left: calc(var(--spacer)*7) !important; }
  .ml\:8\@laptop, .mx\:8\@laptop { margin-left: calc(var(--spacer)*8) !important; }
  .ml\:9\@laptop, .mx\:9\@laptop { margin-left: calc(var(--spacer)*9) !important; }
  .ml\:10\@laptop, .mx\:10\@laptop { margin-left: calc(var(--spacer)*10) !important; }
  .ml\:11\@laptop, .mx\:11\@laptop { margin-left: calc(var(--spacer)*11) !important; }
  .ml\:auto\@laptop, .mx\:auto\@laptop { margin-left: auto !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .ml\:0\@tablet, .mx\:0\@tablet { margin-left: 0 !important; }
  .ml\:0\.5\@tablet, .mx\:0\.5\@tablet { margin-left: calc(var(--spacer)*0.5) !important; }
  .ml\:1\@tablet, .mx\:1\@tablet { margin-left: var(--spacer) !important; }
  .ml\:1\.5\@tablet, .mx\:1\.5\@tablet { margin-left: calc(var(--spacer)*1.5) !important; }
  .ml\:2\@tablet, .mx\:2\@tablet { margin-left: calc(var(--spacer)*2) !important; }
  .ml\:2\.5\@tablet, .mx\:2\.5\@tablet { margin-left: calc(var(--spacer)*2.5) !important; }
  .ml\:3\@tablet, .mx\:3\@tablet { margin-left: calc(var(--spacer)*3) !important; }
  .ml\:3\.5\@tablet, .mx\:3\.5\@tablet { margin-left: calc(var(--spacer)*3.5) !important; }
  .ml\:4\@tablet, .mx\:4\@tablet { margin-left: calc(var(--spacer)*4) !important; }
  .ml\:4\.5\@tablet, .mx\:4\.5\@tablet { margin-left: calc(var(--spacer)*4.5) !important; }
  .ml\:5\@tablet, .mx\:5\@tablet { margin-left: calc(var(--spacer)*5) !important; }
  .ml\:6\@tablet, .mx\:6\@tablet { margin-left: calc(var(--spacer)*6) !important; }
  .ml\:7\@tablet, .mx\:7\@tablet { margin-left: calc(var(--spacer)*7) !important; }
  .ml\:8\@tablet, .mx\:8\@tablet { margin-left: calc(var(--spacer)*8) !important; }
  .ml\:9\@tablet, .mx\:9\@tablet { margin-left: calc(var(--spacer)*9) !important; }
  .ml\:10\@tablet, .mx\:10\@tablet { margin-left: calc(var(--spacer)*10) !important; }
  .ml\:11\@tablet, .mx\:11\@tablet { margin-left: calc(var(--spacer)*11) !important; }
  .ml\:auto\@tablet, .mx\:auto\@tablet { margin-left: auto !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .ml\:0\@mobile, .mx\:0\@mobile { margin-left: 0 !important; }
  .ml\:0\.5\@mobile, .mx\:0\.5\@mobile { margin-left: calc(var(--spacer)*0.5) !important; }
  .ml\:1\@mobile, .mx\:1\@mobile { margin-left: var(--spacer) !important; }
  .ml\:1\.5\@mobile, .mx\:1\.5\@mobile { margin-left: calc(var(--spacer)*1.5) !important; }
  .ml\:2\@mobile, .mx\:2\@mobile { margin-left: calc(var(--spacer)*2) !important; }
  .ml\:2\.5\@mobile, .mx\:2\.5\@mobile { margin-left: calc(var(--spacer)*2.5) !important; }
  .ml\:3\@mobile, .mx\:3\@mobile { margin-left: calc(var(--spacer)*3) !important; }
  .ml\:3\.5\@mobile, .mx\:3\.5\@mobile { margin-left: calc(var(--spacer)*3.5) !important; }
  .ml\:4\@mobile, .mx\:4\@mobile { margin-left: calc(var(--spacer)*4) !important; }
  .ml\:4\.5\@mobile, .mx\:4\.5\@mobile { margin-left: calc(var(--spacer)*4.5) !important; }
  .ml\:5\@mobile, .mx\:5\@mobile { margin-left: calc(var(--spacer)*5) !important; }
  .ml\:6\@mobile, .mx\:6\@mobile { margin-left: calc(var(--spacer)*6) !important; }
  .ml\:7\@mobile, .mx\:7\@mobile { margin-left: calc(var(--spacer)*7) !important; }
  .ml\:8\@mobile, .mx\:8\@mobile { margin-left: calc(var(--spacer)*8) !important; }
  .ml\:9\@mobile, .mx\:9\@mobile { margin-left: calc(var(--spacer)*9) !important; }
  .ml\:10\@mobile, .mx\:10\@mobile { margin-left: calc(var(--spacer)*10) !important; }
  .ml\:11\@mobile, .mx\:11\@mobile { margin-left: calc(var(--spacer)*11) !important; }
  .ml\:auto\@mobile, .mx\:auto\@mobile { margin-left: auto !important; }
}

/* Margin Right (mr:) & Horizontal (mx:) */
.mr\:0, .mx\:0 { margin-right: 0 !important; }
.mr\:0\.5, .mx\:0\.5 { margin-right: calc(var(--spacer)*0.5) !important; }
.mr\:1, .mx\:1 { margin-right: var(--spacer) !important; }
.mr\:1\.5, .mx\:1\.5 { margin-right: calc(var(--spacer)*1.5) !important; }
.mr\:2, .mx\:2 { margin-right: calc(var(--spacer)*2) !important; }
.mr\:2\.5, .mx\:2\.5 { margin-right: calc(var(--spacer)*2.5) !important; }
.mr\:3, .mx\:3 { margin-right: calc(var(--spacer)*3) !important; }
.mr\:3\.5, .mx\:3\.5 { margin-right: calc(var(--spacer)*3.5) !important; }
.mr\:4, .mx\:4 { margin-right: calc(var(--spacer)*4) !important; }
.mr\:4\.5, .mx\:4\.5 { margin-right: calc(var(--spacer)*4.5) !important; }
.mr\:5, .mx\:5 { margin-right: calc(var(--spacer)*5) !important; }
.mr\:6, .mx\:6 { margin-right: calc(var(--spacer)*6) !important; }
.mr\:7, .mx\:7 { margin-right: calc(var(--spacer)*7) !important; }
.mr\:8, .mx\:8 { margin-right: calc(var(--spacer)*8) !important; }
.mr\:9, .mx\:9 { margin-right: calc(var(--spacer)*9) !important; }
.mr\:10, .mx\:10 { margin-right: calc(var(--spacer)*10) !important; }
.mr\:11, .mx\:11 { margin-right: calc(var(--spacer)*11) !important; }
.mr\:auto, .mx\:auto { margin-right: auto !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .mr\:0\@laptop, .mx\:0\@laptop { margin-right: 0 !important; }
  .mr\:0\.5\@laptop, .mx\:0\.5\@laptop { margin-right: calc(var(--spacer)*0.5) !important; }
  .mr\:1\@laptop, .mx\:1\@laptop { margin-right: var(--spacer) !important; }
  .mr\:1\.5\@laptop, .mx\:1\.5\@laptop { margin-right: calc(var(--spacer)*1.5) !important; }
  .mr\:2\@laptop, .mx\:2\@laptop { margin-right: calc(var(--spacer)*2) !important; }
  .mr\:2\.5\@laptop, .mx\:2\.5\@laptop { margin-right: calc(var(--spacer)*2.5) !important; }
  .mr\:3\@laptop, .mx\:3\@laptop { margin-right: calc(var(--spacer)*3) !important; }
  .mr\:3\.5\@laptop, .mx\:3\.5\@laptop { margin-right: calc(var(--spacer)*3.5) !important; }
  .mr\:4\@laptop, .mx\:4\@laptop { margin-right: calc(var(--spacer)*4) !important; }
  .mr\:4\.5\@laptop, .mx\:4\.5\@laptop { margin-right: calc(var(--spacer)*4.5) !important; }
  .mr\:5\@laptop, .mx\:5\@laptop { margin-right: calc(var(--spacer)*5) !important; }
  .mr\:6\@laptop, .mx\:6\@laptop { margin-right: calc(var(--spacer)*6) !important; }
  .mr\:7\@laptop, .mx\:7\@laptop { margin-right: calc(var(--spacer)*7) !important; }
  .mr\:8\@laptop, .mx\:8\@laptop { margin-right: calc(var(--spacer)*8) !important; }
  .mr\:9\@laptop, .mx\:9\@laptop { margin-right: calc(var(--spacer)*9) !important; }
  .mr\:10\@laptop, .mx\:10\@laptop { margin-right: calc(var(--spacer)*10) !important; }
  .mr\:11\@laptop, .mx\:11\@laptop { margin-right: calc(var(--spacer)*11) !important; }
  .mr\:auto\@laptop, .mx\:auto\@laptop { margin-right: auto !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .mr\:0\@tablet, .mx\:0\@tablet { margin-right: 0 !important; }
  .mr\:0\.5\@tablet, .mx\:0\.5\@tablet { margin-right: calc(var(--spacer)*0.5) !important; }
  .mr\:1\@tablet, .mx\:1\@tablet { margin-right: var(--spacer) !important; }
  .mr\:1\.5\@tablet, .mx\:1\.5\@tablet { margin-right: calc(var(--spacer)*1.5) !important; }
  .mr\:2\@tablet, .mx\:2\@tablet { margin-right: calc(var(--spacer)*2) !important; }
  .mr\:2\.5\@tablet, .mx\:2\.5\@tablet { margin-right: calc(var(--spacer)*2.5) !important; }
  .mr\:3\@tablet, .mx\:3\@tablet { margin-right: calc(var(--spacer)*3) !important; }
  .mr\:3\.5\@tablet, .mx\:3\.5\@tablet { margin-right: calc(var(--spacer)*3.5) !important; }
  .mr\:4\@tablet, .mx\:4\@tablet { margin-right: calc(var(--spacer)*4) !important; }
  .mr\:4\.5\@tablet, .mx\:4\.5\@tablet { margin-right: calc(var(--spacer)*4.5) !important; }
  .mr\:5\@tablet, .mx\:5\@tablet { margin-right: calc(var(--spacer)*5) !important; }
  .mr\:6\@tablet, .mx\:6\@tablet { margin-right: calc(var(--spacer)*6) !important; }
  .mr\:7\@tablet, .mx\:7\@tablet { margin-right: calc(var(--spacer)*7) !important; }
  .mr\:8\@tablet, .mx\:8\@tablet { margin-right: calc(var(--spacer)*8) !important; }
  .mr\:9\@tablet, .mx\:9\@tablet { margin-right: calc(var(--spacer)*9) !important; }
  .mr\:10\@tablet, .mx\:10\@tablet { margin-right: calc(var(--spacer)*10) !important; }
  .mr\:11\@tablet, .mx\:11\@tablet { margin-right: calc(var(--spacer)*11) !important; }
  .mr\:auto\@tablet, .mx\:auto\@tablet { margin-right: auto !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .mr\:0\@mobile, .mx\:0\@mobile { margin-right: 0 !important; }
  .mr\:0\.5\@mobile, .mx\:0\.5\@mobile { margin-right: calc(var(--spacer)*0.5) !important; }
  .mr\:1\@mobile, .mx\:1\@mobile { margin-right: var(--spacer) !important; }
  .mr\:1\.5\@mobile, .mx\:1\.5\@mobile { margin-right: calc(var(--spacer)*1.5) !important; }
  .mr\:2\@mobile, .mx\:2\@mobile { margin-right: calc(var(--spacer)*2) !important; }
  .mr\:2\.5\@mobile, .mx\:2\.5\@mobile { margin-right: calc(var(--spacer)*2.5) !important; }
  .mr\:3\@mobile, .mx\:3\@mobile { margin-right: calc(var(--spacer)*3) !important; }
  .mr\:3\.5\@mobile, .mx\:3\.5\@mobile { margin-right: calc(var(--spacer)*3.5) !important; }
  .mr\:4\@mobile, .mx\:4\@mobile { margin-right: calc(var(--spacer)*4) !important; }
  .mr\:4\.5\@mobile, .mx\:4\.5\@mobile { margin-right: calc(var(--spacer)*4.5) !important; }
  .mr\:5\@mobile, .mx\:5\@mobile { margin-right: calc(var(--spacer)*5) !important; }
  .mr\:6\@mobile, .mx\:6\@mobile { margin-right: calc(var(--spacer)*6) !important; }
  .mr\:7\@mobile, .mx\:7\@mobile { margin-right: calc(var(--spacer)*7) !important; }
  .mr\:8\@mobile, .mx\:8\@mobile { margin-right: calc(var(--spacer)*8) !important; }
  .mr\:9\@mobile, .mx\:9\@mobile { margin-right: calc(var(--spacer)*9) !important; }
  .mr\:10\@mobile, .mx\:10\@mobile { margin-right: calc(var(--spacer)*10) !important; }
  .mr\:11\@mobile, .mx\:11\@mobile { margin-right: calc(var(--spacer)*11) !important; }
  .mr\:auto\@mobile, .mx\:auto\@mobile { margin-right: auto !important; }
}

/* Padding All (p:) - 0 to 11 with 0.5 increments */
.p\:0 { padding: 0 !important; }
.p\:0\.5 { padding: calc(var(--spacer)*0.5) !important; }
.p\:1 { padding: var(--spacer) !important; }
.p\:1\.5 { padding: calc(var(--spacer)*1.5) !important; }
.p\:2 { padding: calc(var(--spacer)*2) !important; }
.p\:2\.5 { padding: calc(var(--spacer)*2.5) !important; }
.p\:3 { padding: calc(var(--spacer)*3) !important; }
.p\:3\.5 { padding: calc(var(--spacer)*3.5) !important; }
.p\:4 { padding: calc(var(--spacer)*4) !important; }
.p\:4\.5 { padding: calc(var(--spacer)*4.5) !important; }
.p\:5 { padding: calc(var(--spacer)*5) !important; }
.p\:6 { padding: calc(var(--spacer)*6) !important; }
.p\:7 { padding: calc(var(--spacer)*7) !important; }
.p\:8 { padding: calc(var(--spacer)*8) !important; }
.p\:9 { padding: calc(var(--spacer)*9) !important; }
.p\:10 { padding: calc(var(--spacer)*10) !important; }
.p\:11 { padding: calc(var(--spacer)*11) !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .p\:0\@laptop { padding: 0 !important; }
  .p\:0\.5\@laptop { padding: calc(var(--spacer)*0.5) !important; }
  .p\:1\@laptop { padding: var(--spacer) !important; }
  .p\:1\.5\@laptop { padding: calc(var(--spacer)*1.5) !important; }
  .p\:2\@laptop { padding: calc(var(--spacer)*2) !important; }
  .p\:2\.5\@laptop { padding: calc(var(--spacer)*2.5) !important; }
  .p\:3\@laptop { padding: calc(var(--spacer)*3) !important; }
  .p\:3\.5\@laptop { padding: calc(var(--spacer)*3.5) !important; }
  .p\:4\@laptop { padding: calc(var(--spacer)*4) !important; }
  .p\:4\.5\@laptop { padding: calc(var(--spacer)*4.5) !important; }
  .p\:5\@laptop { padding: calc(var(--spacer)*5) !important; }
  .p\:6\@laptop { padding: calc(var(--spacer)*6) !important; }
  .p\:7\@laptop { padding: calc(var(--spacer)*7) !important; }
  .p\:8\@laptop { padding: calc(var(--spacer)*8) !important; }
  .p\:9\@laptop { padding: calc(var(--spacer)*9) !important; }
  .p\:10\@laptop { padding: calc(var(--spacer)*10) !important; }
  .p\:11\@laptop { padding: calc(var(--spacer)*11) !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .p\:0\@tablet { padding: 0 !important; }
  .p\:0\.5\@tablet { padding: calc(var(--spacer)*0.5) !important; }
  .p\:1\@tablet { padding: var(--spacer) !important; }
  .p\:1\.5\@tablet { padding: calc(var(--spacer)*1.5) !important; }
  .p\:2\@tablet { padding: calc(var(--spacer)*2) !important; }
  .p\:2\.5\@tablet { padding: calc(var(--spacer)*2.5) !important; }
  .p\:3\@tablet { padding: calc(var(--spacer)*3) !important; }
  .p\:3\.5\@tablet { padding: calc(var(--spacer)*3.5) !important; }
  .p\:4\@tablet { padding: calc(var(--spacer)*4) !important; }
  .p\:4\.5\@tablet { padding: calc(var(--spacer)*4.5) !important; }
  .p\:5\@tablet { padding: calc(var(--spacer)*5) !important; }
  .p\:6\@tablet { padding: calc(var(--spacer)*6) !important; }
  .p\:7\@tablet { padding: calc(var(--spacer)*7) !important; }
  .p\:8\@tablet { padding: calc(var(--spacer)*8) !important; }
  .p\:9\@tablet { padding: calc(var(--spacer)*9) !important; }
  .p\:10\@tablet { padding: calc(var(--spacer)*10) !important; }
  .p\:11\@tablet { padding: calc(var(--spacer)*11) !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .p\:0\@mobile { padding: 0 !important; }
  .p\:0\.5\@mobile { padding: calc(var(--spacer)*0.5) !important; }
  .p\:1\@mobile { padding: var(--spacer) !important; }
  .p\:1\.5\@mobile { padding: calc(var(--spacer)*1.5) !important; }
  .p\:2\@mobile { padding: calc(var(--spacer)*2) !important; }
  .p\:2\.5\@mobile { padding: calc(var(--spacer)*2.5) !important; }
  .p\:3\@mobile { padding: calc(var(--spacer)*3) !important; }
  .p\:3\.5\@mobile { padding: calc(var(--spacer)*3.5) !important; }
  .p\:4\@mobile { padding: calc(var(--spacer)*4) !important; }
  .p\:4\.5\@mobile { padding: calc(var(--spacer)*4.5) !important; }
  .p\:5\@mobile { padding: calc(var(--spacer)*5) !important; }
  .p\:6\@mobile { padding: calc(var(--spacer)*6) !important; }
  .p\:7\@mobile { padding: calc(var(--spacer)*7) !important; }
  .p\:8\@mobile { padding: calc(var(--spacer)*8) !important; }
  .p\:9\@mobile { padding: calc(var(--spacer)*9) !important; }
  .p\:10\@mobile { padding: calc(var(--spacer)*10) !important; }
  .p\:11\@mobile { padding: calc(var(--spacer)*11) !important; }
}

/* Padding Top (pt:) & Vertical (py:) */
.pt\:0, .py\:0 { padding-top: 0 !important; }
.pt\:0\.5, .py\:0\.5 { padding-top: calc(var(--spacer)*0.5) !important; }
.pt\:1, .py\:1 { padding-top: var(--spacer) !important; }
.pt\:1\.5, .py\:1\.5 { padding-top: calc(var(--spacer)*1.5) !important; }
.pt\:2, .py\:2 { padding-top: calc(var(--spacer)*2) !important; }
.pt\:2\.5, .py\:2\.5 { padding-top: calc(var(--spacer)*2.5) !important; }
.pt\:3, .py\:3 { padding-top: calc(var(--spacer)*3) !important; }
.pt\:3\.5, .py\:3\.5 { padding-top: calc(var(--spacer)*3.5) !important; }
.pt\:4, .py\:4 { padding-top: calc(var(--spacer)*4) !important; }
.pt\:4\.5, .py\:4\.5 { padding-top: calc(var(--spacer)*4.5) !important; }
.pt\:5, .py\:5 { padding-top: calc(var(--spacer)*5) !important; }
.pt\:6, .py\:6 { padding-top: calc(var(--spacer)*6) !important; }
.pt\:7, .py\:7 { padding-top: calc(var(--spacer)*7) !important; }
.pt\:8, .py\:8 { padding-top: calc(var(--spacer)*8) !important; }
.pt\:9, .py\:9 { padding-top: calc(var(--spacer)*9) !important; }
.pt\:10, .py\:10 { padding-top: calc(var(--spacer)*10) !important; }
.pt\:11, .py\:11 { padding-top: calc(var(--spacer)*11) !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .pt\:0\@laptop, .py\:0\@laptop { padding-top: 0 !important; }
  .pt\:0\.5\@laptop, .py\:0\.5\@laptop { padding-top: calc(var(--spacer)*0.5) !important; }
  .pt\:1\@laptop, .py\:1\@laptop { padding-top: var(--spacer) !important; }
  .pt\:1\.5\@laptop, .py\:1\.5\@laptop { padding-top: calc(var(--spacer)*1.5) !important; }
  .pt\:2\@laptop, .py\:2\@laptop { padding-top: calc(var(--spacer)*2) !important; }
  .pt\:2\.5\@laptop, .py\:2\.5\@laptop { padding-top: calc(var(--spacer)*2.5) !important; }
  .pt\:3\@laptop, .py\:3\@laptop { padding-top: calc(var(--spacer)*3) !important; }
  .pt\:3\.5\@laptop, .py\:3\.5\@laptop { padding-top: calc(var(--spacer)*3.5) !important; }
  .pt\:4\@laptop, .py\:4\@laptop { padding-top: calc(var(--spacer)*4) !important; }
  .pt\:4\.5\@laptop, .py\:4\.5\@laptop { padding-top: calc(var(--spacer)*4.5) !important; }
  .pt\:5\@laptop, .py\:5\@laptop { padding-top: calc(var(--spacer)*5) !important; }
  .pt\:6\@laptop, .py\:6\@laptop { padding-top: calc(var(--spacer)*6) !important; }
  .pt\:7\@laptop, .py\:7\@laptop { padding-top: calc(var(--spacer)*7) !important; }
  .pt\:8\@laptop, .py\:8\@laptop { padding-top: calc(var(--spacer)*8) !important; }
  .pt\:9\@laptop, .py\:9\@laptop { padding-top: calc(var(--spacer)*9) !important; }
  .pt\:10\@laptop, .py\:10\@laptop { padding-top: calc(var(--spacer)*10) !important; }
  .pt\:11\@laptop, .py\:11\@laptop { padding-top: calc(var(--spacer)*11) !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .pt\:0\@tablet, .py\:0\@tablet { padding-top: 0 !important; }
  .pt\:0\.5\@tablet, .py\:0\.5\@tablet { padding-top: calc(var(--spacer)*0.5) !important; }
  .pt\:1\@tablet, .py\:1\@tablet { padding-top: var(--spacer) !important; }
  .pt\:1\.5\@tablet, .py\:1\.5\@tablet { padding-top: calc(var(--spacer)*1.5) !important; }
  .pt\:2\@tablet, .py\:2\@tablet { padding-top: calc(var(--spacer)*2) !important; }
  .pt\:2\.5\@tablet, .py\:2\.5\@tablet { padding-top: calc(var(--spacer)*2.5) !important; }
  .pt\:3\@tablet, .py\:3\@tablet { padding-top: calc(var(--spacer)*3) !important; }
  .pt\:3\.5\@tablet, .py\:3\.5\@tablet { padding-top: calc(var(--spacer)*3.5) !important; }
  .pt\:4\@tablet, .py\:4\@tablet { padding-top: calc(var(--spacer)*4) !important; }
  .pt\:4\.5\@tablet, .py\:4\.5\@tablet { padding-top: calc(var(--spacer)*4.5) !important; }
  .pt\:5\@tablet, .py\:5\@tablet { padding-top: calc(var(--spacer)*5) !important; }
  .pt\:6\@tablet, .py\:6\@tablet { padding-top: calc(var(--spacer)*6) !important; }
  .pt\:7\@tablet, .py\:7\@tablet { padding-top: calc(var(--spacer)*7) !important; }
  .pt\:8\@tablet, .py\:8\@tablet { padding-top: calc(var(--spacer)*8) !important; }
  .pt\:9\@tablet, .py\:9\@tablet { padding-top: calc(var(--spacer)*9) !important; }
  .pt\:10\@tablet, .py\:10\@tablet { padding-top: calc(var(--spacer)*10) !important; }
  .pt\:11\@tablet, .py\:11\@tablet { padding-top: calc(var(--spacer)*11) !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .pt\:0\@mobile, .py\:0\@mobile { padding-top: 0 !important; }
  .pt\:0\.5\@mobile, .py\:0\.5\@mobile { padding-top: calc(var(--spacer)*0.5) !important; }
  .pt\:1\@mobile, .py\:1\@mobile { padding-top: var(--spacer) !important; }
  .pt\:1\.5\@mobile, .py\:1\.5\@mobile { padding-top: calc(var(--spacer)*1.5) !important; }
  .pt\:2\@mobile, .py\:2\@mobile { padding-top: calc(var(--spacer)*2) !important; }
  .pt\:2\.5\@mobile, .py\:2\.5\@mobile { padding-top: calc(var(--spacer)*2.5) !important; }
  .pt\:3\@mobile, .py\:3\@mobile { padding-top: calc(var(--spacer)*3) !important; }
  .pt\:3\.5\@mobile, .py\:3\.5\@mobile { padding-top: calc(var(--spacer)*3.5) !important; }
  .pt\:4\@mobile, .py\:4\@mobile { padding-top: calc(var(--spacer)*4) !important; }
  .pt\:4\.5\@mobile, .py\:4\.5\@mobile { padding-top: calc(var(--spacer)*4.5) !important; }
  .pt\:5\@mobile, .py\:5\@mobile { padding-top: calc(var(--spacer)*5) !important; }
  .pt\:6\@mobile, .py\:6\@mobile { padding-top: calc(var(--spacer)*6) !important; }
  .pt\:7\@mobile, .py\:7\@mobile { padding-top: calc(var(--spacer)*7) !important; }
  .pt\:8\@mobile, .py\:8\@mobile { padding-top: calc(var(--spacer)*8) !important; }
  .pt\:9\@mobile, .py\:9\@mobile { padding-top: calc(var(--spacer)*9) !important; }
  .pt\:10\@mobile, .py\:10\@mobile { padding-top: calc(var(--spacer)*10) !important; }
  .pt\:11\@mobile, .py\:11\@mobile { padding-top: calc(var(--spacer)*11) !important; }
}

/* Padding Bottom (pb:) & Vertical (py:) */
.pb\:0, .py\:0 { padding-bottom: 0 !important; }
.pb\:0\.5, .py\:0\.5 { padding-bottom: calc(var(--spacer)*0.5) !important; }
.pb\:1, .py\:1 { padding-bottom: var(--spacer) !important; }
.pb\:1\.5, .py\:1\.5 { padding-bottom: calc(var(--spacer)*1.5) !important; }
.pb\:2, .py\:2 { padding-bottom: calc(var(--spacer)*2) !important; }
.pb\:2\.5, .py\:2\.5 { padding-bottom: calc(var(--spacer)*2.5) !important; }
.pb\:3, .py\:3 { padding-bottom: calc(var(--spacer)*3) !important; }
.pb\:3\.5, .py\:3\.5 { padding-bottom: calc(var(--spacer)*3.5) !important; }
.pb\:4, .py\:4 { padding-bottom: calc(var(--spacer)*4) !important; }
.pb\:4\.5, .py\:4\.5 { padding-bottom: calc(var(--spacer)*4.5) !important; }
.pb\:5, .py\:5 { padding-bottom: calc(var(--spacer)*5) !important; }
.pb\:6, .py\:6 { padding-bottom: calc(var(--spacer)*6) !important; }
.pb\:7, .py\:7 { padding-bottom: calc(var(--spacer)*7) !important; }
.pb\:8, .py\:8 { padding-bottom: calc(var(--spacer)*8) !important; }
.pb\:9, .py\:9 { padding-bottom: calc(var(--spacer)*9) !important; }
.pb\:10, .py\:10 { padding-bottom: calc(var(--spacer)*10) !important; }
.pb\:11, .py\:11 { padding-bottom: calc(var(--spacer)*11) !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .pb\:0\@laptop, .py\:0\@laptop { padding-bottom: 0 !important; }
  .pb\:0\.5\@laptop, .py\:0\.5\@laptop { padding-bottom: calc(var(--spacer)*0.5) !important; }
  .pb\:1\@laptop, .py\:1\@laptop { padding-bottom: var(--spacer) !important; }
  .pb\:1\.5\@laptop, .py\:1\.5\@laptop { padding-bottom: calc(var(--spacer)*1.5) !important; }
  .pb\:2\@laptop, .py\:2\@laptop { padding-bottom: calc(var(--spacer)*2) !important; }
  .pb\:2\.5\@laptop, .py\:2\.5\@laptop { padding-bottom: calc(var(--spacer)*2.5) !important; }
  .pb\:3\@laptop, .py\:3\@laptop { padding-bottom: calc(var(--spacer)*3) !important; }
  .pb\:3\.5\@laptop, .py\:3\.5\@laptop { padding-bottom: calc(var(--spacer)*3.5) !important; }
  .pb\:4\@laptop, .py\:4\@laptop { padding-bottom: calc(var(--spacer)*4) !important; }
  .pb\:4\.5\@laptop, .py\:4\.5\@laptop { padding-bottom: calc(var(--spacer)*4.5) !important; }
  .pb\:5\@laptop, .py\:5\@laptop { padding-bottom: calc(var(--spacer)*5) !important; }
  .pb\:6\@laptop, .py\:6\@laptop { padding-bottom: calc(var(--spacer)*6) !important; }
  .pb\:7\@laptop, .py\:7\@laptop { padding-bottom: calc(var(--spacer)*7) !important; }
  .pb\:8\@laptop, .py\:8\@laptop { padding-bottom: calc(var(--spacer)*8) !important; }
  .pb\:9\@laptop, .py\:9\@laptop { padding-bottom: calc(var(--spacer)*9) !important; }
  .pb\:10\@laptop, .py\:10\@laptop { padding-bottom: calc(var(--spacer)*10) !important; }
  .pb\:11\@laptop, .py\:11\@laptop { padding-bottom: calc(var(--spacer)*11) !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .pb\:0\@tablet, .py\:0\@tablet { padding-bottom: 0 !important; }
  .pb\:0\.5\@tablet, .py\:0\.5\@tablet { padding-bottom: calc(var(--spacer)*0.5) !important; }
  .pb\:1\@tablet, .py\:1\@tablet { padding-bottom: var(--spacer) !important; }
  .pb\:1\.5\@tablet, .py\:1\.5\@tablet { padding-bottom: calc(var(--spacer)*1.5) !important; }
  .pb\:2\@tablet, .py\:2\@tablet { padding-bottom: calc(var(--spacer)*2) !important; }
  .pb\:2\.5\@tablet, .py\:2\.5\@tablet { padding-bottom: calc(var(--spacer)*2.5) !important; }
  .pb\:3\@tablet, .py\:3\@tablet { padding-bottom: calc(var(--spacer)*3) !important; }
  .pb\:3\.5\@tablet, .py\:3\.5\@tablet { padding-bottom: calc(var(--spacer)*3.5) !important; }
  .pb\:4\@tablet, .py\:4\@tablet { padding-bottom: calc(var(--spacer)*4) !important; }
  .pb\:4\.5\@tablet, .py\:4\.5\@tablet { padding-bottom: calc(var(--spacer)*4.5) !important; }
  .pb\:5\@tablet, .py\:5\@tablet { padding-bottom: calc(var(--spacer)*5) !important; }
  .pb\:6\@tablet, .py\:6\@tablet { padding-bottom: calc(var(--spacer)*6) !important; }
  .pb\:7\@tablet, .py\:7\@tablet { padding-bottom: calc(var(--spacer)*7) !important; }
  .pb\:8\@tablet, .py\:8\@tablet { padding-bottom: calc(var(--spacer)*8) !important; }
  .pb\:9\@tablet, .py\:9\@tablet { padding-bottom: calc(var(--spacer)*9) !important; }
  .pb\:10\@tablet, .py\:10\@tablet { padding-bottom: calc(var(--spacer)*10) !important; }
  .pb\:11\@tablet, .py\:11\@tablet { padding-bottom: calc(var(--spacer)*11) !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .pb\:0\@mobile, .py\:0\@mobile { padding-bottom: 0 !important; }
  .pb\:0\.5\@mobile, .py\:0\.5\@mobile { padding-bottom: calc(var(--spacer)*0.5) !important; }
  .pb\:1\@mobile, .py\:1\@mobile { padding-bottom: var(--spacer) !important; }
  .pb\:1\.5\@mobile, .py\:1\.5\@mobile { padding-bottom: calc(var(--spacer)*1.5) !important; }
  .pb\:2\@mobile, .py\:2\@mobile { padding-bottom: calc(var(--spacer)*2) !important; }
  .pb\:2\.5\@mobile, .py\:2\.5\@mobile { padding-bottom: calc(var(--spacer)*2.5) !important; }
  .pb\:3\@mobile, .py\:3\@mobile { padding-bottom: calc(var(--spacer)*3) !important; }
  .pb\:3\.5\@mobile, .py\:3\.5\@mobile { padding-bottom: calc(var(--spacer)*3.5) !important; }
  .pb\:4\@mobile, .py\:4\@mobile { padding-bottom: calc(var(--spacer)*4) !important; }
  .pb\:4\.5\@mobile, .py\:4\.5\@mobile { padding-bottom: calc(var(--spacer)*4.5) !important; }
  .pb\:5\@mobile, .py\:5\@mobile { padding-bottom: calc(var(--spacer)*5) !important; }
  .pb\:6\@mobile, .py\:6\@mobile { padding-bottom: calc(var(--spacer)*6) !important; }
  .pb\:7\@mobile, .py\:7\@mobile { padding-bottom: calc(var(--spacer)*7) !important; }
  .pb\:8\@mobile, .py\:8\@mobile { padding-bottom: calc(var(--spacer)*8) !important; }
  .pb\:9\@mobile, .py\:9\@mobile { padding-bottom: calc(var(--spacer)*9) !important; }
  .pb\:10\@mobile, .py\:10\@mobile { padding-bottom: calc(var(--spacer)*10) !important; }
  .pb\:11\@mobile, .py\:11\@mobile { padding-bottom: calc(var(--spacer)*11) !important; }
}

/* Padding Left (pl:) & Horizontal (px:) */
.pl\:0, .px\:0 { padding-left: 0 !important; }
.pl\:0\.5, .px\:0\.5 { padding-left: calc(var(--spacer)*0.5) !important; }
.pl\:1, .px\:1 { padding-left: var(--spacer) !important; }
.pl\:1\.5, .px\:1\.5 { padding-left: calc(var(--spacer)*1.5) !important; }
.pl\:2, .px\:2 { padding-left: calc(var(--spacer)*2) !important; }
.pl\:2\.5, .px\:2\.5 { padding-left: calc(var(--spacer)*2.5) !important; }
.pl\:3, .px\:3 { padding-left: calc(var(--spacer)*3) !important; }
.pl\:3\.5, .px\:3\.5 { padding-left: calc(var(--spacer)*3.5) !important; }
.pl\:4, .px\:4 { padding-left: calc(var(--spacer)*4) !important; }
.pl\:4\.5, .px\:4\.5 { padding-left: calc(var(--spacer)*4.5) !important; }
.pl\:5, .px\:5 { padding-left: calc(var(--spacer)*5) !important; }
.pl\:6, .px\:6 { padding-left: calc(var(--spacer)*6) !important; }
.pl\:7, .px\:7 { padding-left: calc(var(--spacer)*7) !important; }
.pl\:8, .px\:8 { padding-left: calc(var(--spacer)*8) !important; }
.pl\:9, .px\:9 { padding-left: calc(var(--spacer)*9) !important; }
.pl\:10, .px\:10 { padding-left: calc(var(--spacer)*10) !important; }
.pl\:11, .px\:11 { padding-left: calc(var(--spacer)*11) !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .pl\:0\@laptop, .px\:0\@laptop { padding-left: 0 !important; }
  .pl\:0\.5\@laptop, .px\:0\.5\@laptop { padding-left: calc(var(--spacer)*0.5) !important; }
  .pl\:1\@laptop, .px\:1\@laptop { padding-left: var(--spacer) !important; }
  .pl\:1\.5\@laptop, .px\:1\.5\@laptop { padding-left: calc(var(--spacer)*1.5) !important; }
  .pl\:2\@laptop, .px\:2\@laptop { padding-left: calc(var(--spacer)*2) !important; }
  .pl\:2\.5\@laptop, .px\:2\.5\@laptop { padding-left: calc(var(--spacer)*2.5) !important; }
  .pl\:3\@laptop, .px\:3\@laptop { padding-left: calc(var(--spacer)*3) !important; }
  .pl\:3\.5\@laptop, .px\:3\.5\@laptop { padding-left: calc(var(--spacer)*3.5) !important; }
  .pl\:4\@laptop, .px\:4\@laptop { padding-left: calc(var(--spacer)*4) !important; }
  .pl\:4\.5\@laptop, .px\:4\.5\@laptop { padding-left: calc(var(--spacer)*4.5) !important; }
  .pl\:5\@laptop, .px\:5\@laptop { padding-left: calc(var(--spacer)*5) !important; }
  .pl\:6\@laptop, .px\:6\@laptop { padding-left: calc(var(--spacer)*6) !important; }
  .pl\:7\@laptop, .px\:7\@laptop { padding-left: calc(var(--spacer)*7) !important; }
  .pl\:8\@laptop, .px\:8\@laptop { padding-left: calc(var(--spacer)*8) !important; }
  .pl\:9\@laptop, .px\:9\@laptop { padding-left: calc(var(--spacer)*9) !important; }
  .pl\:10\@laptop, .px\:10\@laptop { padding-left: calc(var(--spacer)*10) !important; }
  .pl\:11\@laptop, .px\:11\@laptop { padding-left: calc(var(--spacer)*11) !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .pl\:0\@tablet, .px\:0\@tablet { padding-left: 0 !important; }
  .pl\:0\.5\@tablet, .px\:0\.5\@tablet { padding-left: calc(var(--spacer)*0.5) !important; }
  .pl\:1\@tablet, .px\:1\@tablet { padding-left: var(--spacer) !important; }
  .pl\:1\.5\@tablet, .px\:1\.5\@tablet { padding-left: calc(var(--spacer)*1.5) !important; }
  .pl\:2\@tablet, .px\:2\@tablet { padding-left: calc(var(--spacer)*2) !important; }
  .pl\:2\.5\@tablet, .px\:2\.5\@tablet { padding-left: calc(var(--spacer)*2.5) !important; }
  .pl\:3\@tablet, .px\:3\@tablet { padding-left: calc(var(--spacer)*3) !important; }
  .pl\:3\.5\@tablet, .px\:3\.5\@tablet { padding-left: calc(var(--spacer)*3.5) !important; }
  .pl\:4\@tablet, .px\:4\@tablet { padding-left: calc(var(--spacer)*4) !important; }
  .pl\:4\.5\@tablet, .px\:4\.5\@tablet { padding-left: calc(var(--spacer)*4.5) !important; }
  .pl\:5\@tablet, .px\:5\@tablet { padding-left: calc(var(--spacer)*5) !important; }
  .pl\:6\@tablet, .px\:6\@tablet { padding-left: calc(var(--spacer)*6) !important; }
  .pl\:7\@tablet, .px\:7\@tablet { padding-left: calc(var(--spacer)*7) !important; }
  .pl\:8\@tablet, .px\:8\@tablet { padding-left: calc(var(--spacer)*8) !important; }
  .pl\:9\@tablet, .px\:9\@tablet { padding-left: calc(var(--spacer)*9) !important; }
  .pl\:10\@tablet, .px\:10\@tablet { padding-left: calc(var(--spacer)*10) !important; }
  .pl\:11\@tablet, .px\:11\@tablet { padding-left: calc(var(--spacer)*11) !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .pl\:0\@mobile, .px\:0\@mobile { padding-left: 0 !important; }
  .pl\:0\.5\@mobile, .px\:0\.5\@mobile { padding-left: calc(var(--spacer)*0.5) !important; }
  .pl\:1\@mobile, .px\:1\@mobile { padding-left: var(--spacer) !important; }
  .pl\:1\.5\@mobile, .px\:1\.5\@mobile { padding-left: calc(var(--spacer)*1.5) !important; }
  .pl\:2\@mobile, .px\:2\@mobile { padding-left: calc(var(--spacer)*2) !important; }
  .pl\:2\.5\@mobile, .px\:2\.5\@mobile { padding-left: calc(var(--spacer)*2.5) !important; }
  .pl\:3\@mobile, .px\:3\@mobile { padding-left: calc(var(--spacer)*3) !important; }
  .pl\:3\.5\@mobile, .px\:3\.5\@mobile { padding-left: calc(var(--spacer)*3.5) !important; }
  .pl\:4\@mobile, .px\:4\@mobile { padding-left: calc(var(--spacer)*4) !important; }
  .pl\:4\.5\@mobile, .px\:4\.5\@mobile { padding-left: calc(var(--spacer)*4.5) !important; }
  .pl\:5\@mobile, .px\:5\@mobile { padding-left: calc(var(--spacer)*5) !important; }
  .pl\:6\@mobile, .px\:6\@mobile { padding-left: calc(var(--spacer)*6) !important; }
  .pl\:7\@mobile, .px\:7\@mobile { padding-left: calc(var(--spacer)*7) !important; }
  .pl\:8\@mobile, .px\:8\@mobile { padding-left: calc(var(--spacer)*8) !important; }
  .pl\:9\@mobile, .px\:9\@mobile { padding-left: calc(var(--spacer)*9) !important; }
  .pl\:10\@mobile, .px\:10\@mobile { padding-left: calc(var(--spacer)*10) !important; }
  .pl\:11\@mobile, .px\:11\@mobile { padding-left: calc(var(--spacer)*11) !important; }
}

/* Padding Right (pr:) & Horizontal (px:) */
.pr\:0, .px\:0 { padding-right: 0 !important; }
.pr\:0\.5, .px\:0\.5 { padding-right: calc(var(--spacer)*0.5) !important; }
.pr\:1, .px\:1 { padding-right: var(--spacer) !important; }
.pr\:1\.5, .px\:1\.5 { padding-right: calc(var(--spacer)*1.5) !important; }
.pr\:2, .px\:2 { padding-right: calc(var(--spacer)*2) !important; }
.pr\:2\.5, .px\:2\.5 { padding-right: calc(var(--spacer)*2.5) !important; }
.pr\:3, .px\:3 { padding-right: calc(var(--spacer)*3) !important; }
.pr\:3\.5, .px\:3\.5 { padding-right: calc(var(--spacer)*3.5) !important; }
.pr\:4, .px\:4 { padding-right: calc(var(--spacer)*4) !important; }
.pr\:4\.5, .px\:4\.5 { padding-right: calc(var(--spacer)*4.5) !important; }
.pr\:5, .px\:5 { padding-right: calc(var(--spacer)*5) !important; }
.pr\:6, .px\:6 { padding-right: calc(var(--spacer)*6) !important; }
.pr\:7, .px\:7 { padding-right: calc(var(--spacer)*7) !important; }
.pr\:8, .px\:8 { padding-right: calc(var(--spacer)*8) !important; }
.pr\:9, .px\:9 { padding-right: calc(var(--spacer)*9) !important; }
.pr\:10, .px\:10 { padding-right: calc(var(--spacer)*10) !important; }
.pr\:11, .px\:11 { padding-right: calc(var(--spacer)*11) !important; }
/* LAPTOP */
@media (max-width: 1279px) {
  .pr\:0\@laptop, .px\:0\@laptop { padding-right: 0 !important; }
  .pr\:0\.5\@laptop, .px\:0\.5\@laptop { padding-right: calc(var(--spacer)*0.5) !important; }
  .pr\:1\@laptop, .px\:1\@laptop { padding-right: var(--spacer) !important; }
  .pr\:1\.5\@laptop, .px\:1\.5\@laptop { padding-right: calc(var(--spacer)*1.5) !important; }
  .pr\:2\@laptop, .px\:2\@laptop { padding-right: calc(var(--spacer)*2) !important; }
  .pr\:2\.5\@laptop, .px\:2\.5\@laptop { padding-right: calc(var(--spacer)*2.5) !important; }
  .pr\:3\@laptop, .px\:3\@laptop { padding-right: calc(var(--spacer)*3) !important; }
  .pr\:3\.5\@laptop, .px\:3\.5\@laptop { padding-right: calc(var(--spacer)*3.5) !important; }
  .pr\:4\@laptop, .px\:4\@laptop { padding-right: calc(var(--spacer)*4) !important; }
  .pr\:4\.5\@laptop, .px\:4\.5\@laptop { padding-right: calc(var(--spacer)*4.5) !important; }
  .pr\:5\@laptop, .px\:5\@laptop { padding-right: calc(var(--spacer)*5) !important; }
  .pr\:6\@laptop, .px\:6\@laptop { padding-right: calc(var(--spacer)*6) !important; }
  .pr\:7\@laptop, .px\:7\@laptop { padding-right: calc(var(--spacer)*7) !important; }
  .pr\:8\@laptop, .px\:8\@laptop { padding-right: calc(var(--spacer)*8) !important; }
  .pr\:9\@laptop, .px\:9\@laptop { padding-right: calc(var(--spacer)*9) !important; }
  .pr\:10\@laptop, .px\:10\@laptop { padding-right: calc(var(--spacer)*10) !important; }
  .pr\:11\@laptop, .px\:11\@laptop { padding-right: calc(var(--spacer)*11) !important; }
}

/* TABLET */
@media (max-width: 1023px) {
  .pr\:0\@tablet, .px\:0\@tablet { padding-right: 0 !important; }
  .pr\:0\.5\@tablet, .px\:0\.5\@tablet { padding-right: calc(var(--spacer)*0.5) !important; }
  .pr\:1\@tablet, .px\:1\@tablet { padding-right: var(--spacer) !important; }
  .pr\:1\.5\@tablet, .px\:1\.5\@tablet { padding-right: calc(var(--spacer)*1.5) !important; }
  .pr\:2\@tablet, .px\:2\@tablet { padding-right: calc(var(--spacer)*2) !important; }
  .pr\:2\.5\@tablet, .px\:2\.5\@tablet { padding-right: calc(var(--spacer)*2.5) !important; }
  .pr\:3\@tablet, .px\:3\@tablet { padding-right: calc(var(--spacer)*3) !important; }
  .pr\:3\.5\@tablet, .px\:3\.5\@tablet { padding-right: calc(var(--spacer)*3.5) !important; }
  .pr\:4\@tablet, .px\:4\@tablet { padding-right: calc(var(--spacer)*4) !important; }
  .pr\:4\.5\@tablet, .px\:4\.5\@tablet { padding-right: calc(var(--spacer)*4.5) !important; }
  .pr\:5\@tablet, .px\:5\@tablet { padding-right: calc(var(--spacer)*5) !important; }
  .pr\:6\@tablet, .px\:6\@tablet { padding-right: calc(var(--spacer)*6) !important; }
  .pr\:7\@tablet, .px\:7\@tablet { padding-right: calc(var(--spacer)*7) !important; }
  .pr\:8\@tablet, .px\:8\@tablet { padding-right: calc(var(--spacer)*8) !important; }
  .pr\:9\@tablet, .px\:9\@tablet { padding-right: calc(var(--spacer)*9) !important; }
  .pr\:10\@tablet, .px\:10\@tablet { padding-right: calc(var(--spacer)*10) !important; }
  .pr\:11\@tablet, .px\:11\@tablet { padding-right: calc(var(--spacer)*11) !important; }
}

/* MOBILE */
@media (max-width: 639px) {
  .pr\:0\@mobile, .px\:0\@mobile { padding-right: 0 !important; }
  .pr\:0\.5\@mobile, .px\:0\.5\@mobile { padding-right: calc(var(--spacer)*0.5) !important; }
  .pr\:1\@mobile, .px\:1\@mobile { padding-right: var(--spacer) !important; }
  .pr\:1\.5\@mobile, .px\:1\.5\@mobile { padding-right: calc(var(--spacer)*1.5) !important; }
  .pr\:2\@mobile, .px\:2\@mobile { padding-right: calc(var(--spacer)*2) !important; }
  .pr\:2\.5\@mobile, .px\:2\.5\@mobile { padding-right: calc(var(--spacer)*2.5) !important; }
  .pr\:3\@mobile, .px\:3\@mobile { padding-right: calc(var(--spacer)*3) !important; }
  .pr\:3\.5\@mobile, .px\:3\.5\@mobile { padding-right: calc(var(--spacer)*3.5) !important; }
  .pr\:4\@mobile, .px\:4\@mobile { padding-right: calc(var(--spacer)*4) !important; }
  .pr\:4\.5\@mobile, .px\:4\.5\@mobile { padding-right: calc(var(--spacer)*4.5) !important; }
  .pr\:5\@mobile, .px\:5\@mobile { padding-right: calc(var(--spacer)*5) !important; }
  .pr\:6\@mobile, .px\:6\@mobile { padding-right: calc(var(--spacer)*6) !important; }
  .pr\:7\@mobile, .px\:7\@mobile { padding-right: calc(var(--spacer)*7) !important; }
  .pr\:8\@mobile, .px\:8\@mobile { padding-right: calc(var(--spacer)*8) !important; }
  .pr\:9\@mobile, .px\:9\@mobile { padding-right: calc(var(--spacer)*9) !important; }
  .pr\:10\@mobile, .px\:10\@mobile { padding-right: calc(var(--spacer)*10) !important; }
  .pr\:11\@mobile, .px\:11\@mobile { padding-right: calc(var(--spacer)*11) !important; }
}

/* Border - Sistema básico y práctico */
.border{border:1px solid var(--border-color)}
.border\:none{border:none}

/* Grosor del borde */
.border\:0{border-width:0}
.border\:1{border-width:1px}
.border\:2{border-width:2px}
.border\:4{border-width:4px}
.border\:8{border-width:8px}

/* Estilo del borde - Aplica a todos los lados */
.border\:solid{border-style:solid}
.border\:dashed{border-style:dashed}
.border\:dotted{border-style:dotted}
.border\:double{border-style:double}

/* Bordes por lados - COMPLETOS (incluyen estilo y color) */
.border-t\:1{border-top:1px solid var(--border-color)}
.border-r\:1{border-right:1px solid var(--border-color)}
.border-b\:1{border-bottom:1px solid var(--border-color)}
.border-l\:1{border-left:1px solid var(--border-color)}

.border-t\:2{border-top:2px solid var(--border-color)}
.border-r\:2{border-right:2px solid var(--border-color)}
.border-b\:2{border-bottom:2px solid var(--border-color)}
.border-l\:2{border-left:2px solid var(--border-color)}

.border-t\:4{border-top:4px solid var(--border-color)}
.border-r\:4{border-right:4px solid var(--border-color)}
.border-b\:4{border-bottom:4px solid var(--border-color)}
.border-l\:4{border-left:4px solid var(--border-color)}

/* Colores de borde */
.border\:primary{border-color:var(--accent-color); border-style: solid;}
.border\:secondary{border-color:var(--border-color); border-style: solid}
.border\:soft{border-color:var(--border-color-softer); border-style: solid}
.border\:error{border-color:var(--color-error); border-style: solid}
.border\:success{border-color:var(--color-success); border-style: solid}
.border\:warning{border-color:var(--color-warning); border-style: solid}
.border\:transparent{border-color:transparent}

/* Bordes por lados con colores específicos */
.border-t\:primary{border-top:1px solid var(--accent-color)}
.border-r\:primary{border-right:1px solid var(--accent-color)}
.border-b\:primary{border-bottom:1px solid var(--accent-color)}
.border-l\:primary{border-left:1px solid var(--accent-color)}

.border-t\:error{border-top:1px solid var(--color-error)}
.border-r\:error{border-right:1px solid var(--color-error)}
.border-b\:error{border-bottom:1px solid var(--color-error)}
.border-l\:error{border-left:1px solid var(--color-error)}

.border-t\:soft{border-top:1px solid var(--border-color-softer)}
.border-r\:soft{border-right:1px solid var(--border-color-softer)}
.border-b\:soft{border-bottom:1px solid var(--border-color-softer)}
.border-l\:soft{border-left:1px solid var(--border-color-softer)}

/* Utilidades combinadas */
.border-x\:1{border-left:1px solid var(--border-color);border-right:1px solid var(--border-color)}
.border-y\:1{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}

.border-x\:2{border-left:2px solid var(--border-color);border-right:2px solid var(--border-color)}
.border-y\:2{border-top:2px solid var(--border-color);border-bottom:2px solid var(--border-color)}

.border-x\:primary{border-left:1px solid var(--accent-color);border-right:1px solid var(--accent-color)}
.border-y\:primary{border-top:1px solid var(--accent-color);border-bottom:1px solid var(--accent-color)}

/*  vertical centered elements: 
*   when used separated it convert the current element to flex,
*   when used in .columns it convert all childs in flex to vertical align it's contents
*/
.vertical-centered{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.columns.vertical-centered>div,
.grid-container.vertical-centered>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.columns.vertical-centered,
.grid-container.vertical-centered{
    display: grid !important;
}

/* Visibility */
.visible { visibility: visible; }
.hidden { visibility: hidden; }

/* Interactive State */
.cursor\:pointer { cursor: pointer; }
.cursor\:not-allowed { cursor: not-allowed; }
.cursor\:default { cursor: default; }

.select\:none { user-select: none; }
.select\:auto { user-select: auto; }
.select\:text { user-select: text; }

.opacity\:0 { opacity: 0; }
.opacity\:25 { opacity: 0.25; }
.opacity\:50 { opacity: 0.5; }
.opacity\:75 { opacity: 0.75; }
.opacity\:100 { opacity: 1; }

.hover\:opacity-75:hover { opacity: 0.75; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:cursor-pointer:hover { cursor: pointer; }

.focus\:outline-none:focus { outline: none; }
.focus\:opacity-100:focus { opacity: 1; }

.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-110:hover { transform: scale(1.1); }
.active\:scale-95:active { transform: scale(0.95); }

/* Show/hide elements depending on device */
/* Hide utilities con revert */
.hide-on\@mobile{display:revert!important}
.hide-on\@tablet{display:revert!important}
.hide-on\@laptop{display:revert!important}

/* Show utilities con revert */
.show-on\@mobile{display:revert!important}
.show-on\@tablet{display:revert!important}
.show-on\@laptop{display:revert!important}

/* Mobile: <= 639px */
@media (max-width:639px){
.hide-on\@mobile{display:none!important}
.show-on\@mobile{display:revert!important}}

/* Tablet: 640px - 1023px */
@media (min-width:640px) and (max-width:1023px){
.hide-on\@tablet{display:none!important}
.show-on\@tablet{display:revert!important}}

/* Laptop: 1024px - 1279px */
@media (min-width:1024px) and (max-width:1279px){
.hide-on\@laptop{display:none!important}
.show-on\@laptop{display:revert!important}}

/**** BORDER RADIUS UTILITIES ****/
/* Border Radius - Sistema con valores numéricos */
.rounded{border-radius:0.5rem} /* Default: 8px - el más común visualmente */

/* Valores en pixels para máximo control (0-50px) */
.rounded\:0{border-radius:0}
.rounded\:1{border-radius:1px}
.rounded\:2{border-radius:2px}
.rounded\:4{border-radius:4px}
.rounded\:6{border-radius:6px}
.rounded\:8{border-radius:8px}
.rounded\:10{border-radius:10px}
.rounded\:12{border-radius:12px}
.rounded\:16{border-radius:16px}
.rounded\:20{border-radius:20px}
.rounded\:24{border-radius:24px}
.rounded\:28{border-radius:28px}
.rounded\:32{border-radius:32px}
.rounded\:40{border-radius:40px}
.rounded\:48{border-radius:48px}
.rounded\:50{border-radius:50px}

/* Circular perfecto */
.rounded\:full, .circle{border-radius:9999px}

/* Bordes por lados - Top */
.rounded-t\:0{border-top-left-radius:0;border-top-right-radius:0}
.rounded-t\:4{border-top-left-radius:4px;border-top-right-radius:4px}
.rounded-t\:8{border-top-left-radius:8px;border-top-right-radius:8px}
.rounded-t\:12{border-top-left-radius:12px;border-top-right-radius:12px}
.rounded-t\:16{border-top-left-radius:16px;border-top-right-radius:16px}
.rounded-t\:20{border-top-left-radius:20px;border-top-right-radius:20px}
.rounded-t\:full{border-top-left-radius:9999px;border-top-right-radius:9999px}

/* Right */
.rounded-r\:0{border-top-right-radius:0;border-bottom-right-radius:0}
.rounded-r\:4{border-top-right-radius:4px;border-bottom-right-radius:4px}
.rounded-r\:8{border-top-right-radius:8px;border-bottom-right-radius:8px}
.rounded-r\:12{border-top-right-radius:12px;border-bottom-right-radius:12px}
.rounded-r\:16{border-top-right-radius:16px;border-bottom-right-radius:16px}
.rounded-r\:20{border-top-right-radius:20px;border-bottom-right-radius:20px}
.rounded-r\:full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}

/* Bottom */
.rounded-b\:0{border-bottom-right-radius:0;border-bottom-left-radius:0}
.rounded-b\:4{border-bottom-right-radius:4px;border-bottom-left-radius:4px}
.rounded-b\:8{border-bottom-right-radius:8px;border-bottom-left-radius:8px}
.rounded-b\:12{border-bottom-right-radius:12px;border-bottom-left-radius:12px}
.rounded-b\:16{border-bottom-right-radius:16px;border-bottom-left-radius:16px}
.rounded-b\:20{border-bottom-right-radius:20px;border-bottom-left-radius:20px}
.rounded-b\:full{border-bottom-right-radius:9999px;border-bottom-left-radius:9999px}

/* Left */
.rounded-l\:0{border-top-left-radius:0;border-bottom-left-radius:0}
.rounded-l\:4{border-top-left-radius:4px;border-bottom-left-radius:4px}
.rounded-l\:8{border-top-left-radius:8px;border-bottom-left-radius:8px}
.rounded-l\:12{border-top-left-radius:12px;border-bottom-left-radius:12px}
.rounded-l\:16{border-top-left-radius:16px;border-bottom-left-radius:16px}
.rounded-l\:20{border-top-left-radius:20px;border-bottom-left-radius:20px}
.rounded-l\:full{border-top-left-radius:9999px;border-bottom-left-radius:9999px}

/* Esquinas individuales */
.rounded-tl\:0{border-top-left-radius:0}
.rounded-tl\:4{border-top-left-radius:4px}
.rounded-tl\:8{border-top-left-radius:8px}
.rounded-tl\:12{border-top-left-radius:12px}
.rounded-tl\:16{border-top-left-radius:16px}
.rounded-tl\:20{border-top-left-radius:20px}
.rounded-tl\:full{border-top-left-radius:9999px}

.rounded-tr\:0{border-top-right-radius:0}
.rounded-tr\:4{border-top-right-radius:4px}
.rounded-tr\:8{border-top-right-radius:8px}
.rounded-tr\:12{border-top-right-radius:12px}
.rounded-tr\:16{border-top-right-radius:16px}
.rounded-tr\:20{border-top-right-radius:20px}
.rounded-tr\:full{border-top-right-radius:9999px}

.rounded-br\:0{border-bottom-right-radius:0}
.rounded-br\:4{border-bottom-right-radius:4px}
.rounded-br\:8{border-bottom-right-radius:8px}
.rounded-br\:12{border-bottom-right-radius:12px}
.rounded-br\:16{border-bottom-right-radius:16px}
.rounded-br\:20{border-bottom-right-radius:20px}
.rounded-br\:full{border-bottom-right-radius:9999px}

.rounded-bl\:0{border-bottom-left-radius:0}
.rounded-bl\:4{border-bottom-left-radius:4px}
.rounded-bl\:8{border-bottom-left-radius:8px}
.rounded-bl\:12{border-bottom-left-radius:12px}
.rounded-bl\:16{border-bottom-left-radius:16px}
.rounded-bl\:20{border-bottom-left-radius:20px}
.rounded-bl\:full{border-bottom-left-radius:9999px}

/* Desktop: >= 1280px (implícito) */
/* Los elementos son visibles por defecto en desktop */

/* Misc
-------------------------------------------------- */
hr {
    margin-top: calc(var(--spacer)*3);
    margin-bottom: calc(var(--spacer)*3);
    border-width: 0;
    border-top: 1px solid var(--border-color-softer);
}

/*Whitespaces*/
.nbr { white-space: nowrap; }
/*Mostrar código preformateado que debe ser responsivo*/
.prewrap { white-space: pre-wrap; }


/* Clearing
-------------------------------------------------- */
/* Self Clearing Goodness */
.container:after,
.row:after,
.clear {
    content: "";
    display: table;
    clear: both;
}

/* Navbar
-------------------------------------------------- */
.navbar {
    background-color: var(--navbar-background);
    position: fixed;
    width: 100%;
    z-index: 3;
    top: 0;
}

.nav-container {
    max-width: 1110px;
    margin: 0 auto;
}

.navbar .menu {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--navbar-background);
}

.menu a {
    display: block;
    padding: 20px 20px;
    text-decoration: none;
    color: var(--navbar-color);
    transition: all .5s;
}

.menu a:hover,
.navbar .menu-btn:hover {
    background-color: var(--navbar-hover-background);
    color: var(--navbar-hover-color);
}

.navbar .navbar-logo {
    display: block;
    float: left;
    font-size: 2em;
    padding: 7px 20px;
    text-decoration: none;
}

/* menu */
.navbar .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */
.navbar .menu-icon {
    cursor: pointer;
    display: block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

.navbar .menu-icon .navicon {
    background: var(--navbar-color);
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.navbar .menu-icon .navicon:before,
.navbar .menu-icon .navicon:after {
    background: var(--navbar-color);
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.navbar .menu-icon .navicon:before {
    top: 5px;
}

.navbar .menu-icon .navicon:after {
    top: -5px;
}

/* menu btn */
.navbar .menu-btn {
    display: none;
}

.navbar .menu-btn:checked~.menu {
    max-height: 80vh;
}

.navbar .menu-btn:checked~.menu-icon .navicon {
    background: transparent;
}

.navbar .menu-btn:checked~.menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.navbar .menu-btn:checked~.menu-icon .navicon:after {
    transform: rotate(45deg);
}

.navbar .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.navbar .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
    top: 0;
}

/* Larger than phablet */
@media (min-width: 900px) {
    .navbar a {
        padding: 20px 30px;
        float: left;
    }

    .navbar .menu {
        clear: none;
        float: right;
        max-height: none;
    }

    .navbar .menu-icon {
        display: none;
    }
}

/*** BREADCRUMBS ****/
.breadcrumbs {
    padding: calc(var(--spacing-unit) * 2) 0;
}

.breadcrumbs ul {
    gap: calc(var(--spacing-unit) * 2);
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
}

.breadcrumbs li {
    align-items: center;
    display: flex
}

.breadcrumbs li:not(:last-child):after {
    content: "/";
    margin-left: calc(var(--spacing-unit) * 2);
    color: var(--color-text-40)
}

.breadcrumbs a {
    color: var(--color-primary);
    transition: var(--transition-base);
    text-decoration: none
}

.breadcrumbs a:hover {
    color: var(--color-primary-40);
    text-decoration: underline
}

.breadcrumbs .active {
    color: var(--color-text-60)
}


/**** ACCORDION ****/
.accordion {
    border: 1px solid var(--color-text-40);
    border-radius: var(--button-border-radius);
    overflow: hidden
}

.accordion label {
    padding: calc(var(--spacing-unit) * 3);
    background: var(--color-background-40);
    color: var(--text);
    cursor: pointer;
    font-weight: bold;
    display: block;
    position: relative
}

.accordion label:after {
    content: "+";
    right: calc(var(--spacing-unit) * 3);
    font-size: 1.5em;
    font-weight: 400;
    transition: transform .3s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.accordion-toggle:checked~label:after {
    content: "−"
}

.accordion-toggle {
    width: 100%;
    padding: calc(var(--spacing-unit) * 3);
    background: var(--cbackground);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-size: var(--spacing-unit);
    border: none;
    outline: none;
    display: none;
}

.accordion-toggle:hover {
    background: var(--color-text-50);
}

.accordion-content {
    max-height: 0;
    padding: 0 calc(var(--spacing-unit) * 3);
    background: var(--background);
    transition: max-height .3s ease-out,padding .3s ease-out;
    overflow: hidden
}

.accordion-toggle:checked~.accordion-content {
    max-height: 200px;
    padding: calc(var(--spacing-unit) * 3);
}
.accordion-item {
  border-bottom: 1px solid var(--color-text-40);
}

.accordion-item:last-child {
  border-bottom: none;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px
}