@import url(https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100;0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
@charset "UTF-8";
/* ========================================
   MAIN SCSS FILE - SferaWeb Project
   ========================================

   Import order follows SMACSS methodology:
   1. Settings (variables, functions, mixins)
   2. Base (normalize, reset, typography)
   3. Utilities (spacing, visibility, etc)
   4. Components (buttons, cards, forms, etc)
   5. Partials (header, footer, etc)
   6. Pages (specific page styles)

   ======================================== */
/* ========================================
   MAIN SCSS FILE - SferaWeb Project (Clean)
   ========================================

   Import order follows SMACSS methodology:
   1. Settings (variables, functions, mixins)
   2. Base (normalize, typography)
   3. Components (buttons, cards, forms, etc)
   4. Utilities & Partials (layout, specific sections)

   ======================================== */
/* ========================================
   1. SETTINGS - Design Tokens & Functions
   ======================================== */
/* ========================================
   TOKENS INDEX
   ========================================

   Central import file for all design tokens.
   Import this file to access all tokens.

   ======================================== */
/* ========================================
   DESIGN TOKENS: COLOR PALETTE
   ========================================

   SINGLE SOURCE OF TRUTH for all colors.
   Used by both SCSS and CSS variables (Tailwind).

   Structure:
   - Primary: Brand identity colors
   - Secondary: Complementary colors
   - Neutral: Grays and neutrals
   - Semantic: Functional colors (success, warning, error, info)

   ======================================== */
/* ========================================
   PRIMARY PALETTE - Brand colors
   ======================================== */
/* ========================================
   SECONDARY PALETTE - Complementary colors
   ======================================== */
/* ========================================
   NEUTRAL PALETTE - Grays and neutrals
   ======================================== */
/* ========================================
   IN PALETTE - Indigo colors
   ======================================== */
/* ========================================
   BI PALETTE - Blue colors (Azulado)
   ======================================== */
/* ========================================
   DI PALETTE - Green colors (Verdoso)
   ======================================== */
/* ========================================
   MI PALETTE - Yellow/Gold colors (Amarilloso)
   ======================================== */
/* ========================================
   SEMANTIC COLORS - Functional colors
   ======================================== */
/* ========================================
   LINK HOVER STATES - Colors for links on hover
   ======================================== */
/* ========================================
   COLOR SHORTCUTS - Commonly used
   ======================================== */
/* ========================================
   CSS CUSTOM PROPERTIES (for Tailwind)
   ======================================== */
:root {
  /* PRIMARY */
  --color-primary-50: #F7F3F9;
  --color-primary-100: #EFE6F3;
  --color-primary-200: #DECDE6;
  --color-primary-300: #C4A8D4;
  --color-primary-400: #9E6FB5;
  --color-primary-500: #49164E;
  --color-primary-600: #6B2274;
  --color-primary-700: #5B1E65;
  --color-primary-800: #4B1A56;
  --color-primary-900: #3B1647;
  /* SECONDARY */
  --color-secondary-50: #F3EEFB;
  --color-secondary-100: #E8DFF8;
  --color-secondary-200: #D4C3F3;
  --color-secondary-300: #B39DED;
  --color-secondary-400: #8F6FE0;
  --color-secondary-500: #6B3FA8;
  --color-secondary-600: #5A2E8C;
  --color-secondary-700: #4A2570;
  --color-secondary-800: #3A1F57;
  --color-secondary-900: #2A1540;
  /* NEUTRAL */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F7;
  --color-neutral-200: #EBEBF0;
  --color-neutral-300: #D9D9D8;
  --color-neutral-400: #A9A9A8;
  --color-neutral-500: #3C3935;
  --color-neutral-600: #5A5A58;
  --color-neutral-700: #3C3C3B;
  --color-neutral-800: #1C1B1F;
  --color-neutral-900: #000000;
  /* IN - INDIGO */
  --color-in-50: #F6EEF7;
  --color-in-100: #A267A8;
  --color-in-200: #D0A9D5;
  --color-in-300: #B77FBF;
  --color-in-400: #7B2683;
  --color-in-500: #49164E;
  --color-in-600: #3B1240;
  --color-in-700: #2E0E32;
  --color-in-800: #210A24;
  --color-in-900: #140516;
  /* BI - BLUE */
  --color-bi-50: #F0F7FB;
  --color-bi-100: #E0EFF8;
  --color-bi-200: #C1DFF0;
  --color-bi-300: #92C5E8;
  --color-bi-400: #66ADE0;
  --color-bi-500: #3FA5C6;
  --color-bi-600: #3591B0;
  --color-bi-700: #14627B;
  --color-bi-800: #216884;
  --color-bi-900: #0D2E4D;
  /* DI - DARK */
  --color-di-50: #F0F8F7;
  --color-di-100: #DCF1ED;
  --color-di-200: #81BBBD;
  --color-di-300: #B3D6D7;
  --color-di-400: #5AB3A8;
  --color-di-500: #03777B;
  --color-di-600: #036B6F;
  --color-di-700: #025C64;
  --color-di-800: #014D57;
  --color-di-900: #00444F;
  /* MI - MINT */
  --color-mi-50: #FFFBF0;
  --color-mi-100: #FFF6E0;
  --color-mi-200: #FCC666;
  --color-mi-300: #FFE0A0;
  --color-mi-400: #FFD670;
  --color-mi-500: #FFC940;
  --color-mi-600: #E6B700;
  --color-mi-700: #CC9E00;
  --color-mi-800: #B38600;
  --color-mi-900: #996E00;
  /* SEMANTIC */
  --color-success: #06A77D;
  --color-warning: #F77F00;
  --color-error: #E63946;
  --color-info: #457B9D;
}

/* ========================================
   TYPOGRAPHY TOKENS - FONT FAMILIES ONLY
   ========================================

   Single responsibility: Define font family variables
   All typography classes and scales are in _config.scss

   ======================================== */
/* Export as CSS variables for runtime use */
:root {
  --font-sans: DM Sans, system-ui, -apple-system, sans-serif;
  --font-display: DM Sans, system-ui, -apple-system, sans-serif;
  --font-mono: DM Sans, system-ui, -apple-system, sans-serif;
}

/* ========================================
   DESIGN TOKENS: SPACING & SIZING
   ========================================

   8px base unit system for consistent
   vertical and horizontal rhythm.

   Ratio: 1:1 (8px increments)

   ======================================== */
/* ========================================
   SPACING SCALE (8px base)
   ======================================== */
/* ========================================
   BORDER RADIUS
   ======================================== */
/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 5rem;
  --spacing-5xl: 6rem;
  --spacing-6xl: 8rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
}

/* ========================================
   DESIGN TOKENS: ELEVATION & EFFECTS
   ========================================

   Shadows, transitions, z-index layers,
   and other elevation effects.

   ======================================== */
/* ========================================
   SHADOW SCALE
   Semantic levels for depth perception
   ======================================== */
/* ========================================
   TRANSITIONS
   ======================================== */
/* ========================================
   Z-INDEX SCALE
   Semantic layering system
   ======================================== */
/* ========================================
   BLUR EFFECTS
   ======================================== */
/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */
:root {
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 12px 28px rgba(0, 0, 0, 0.2);
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --z-hide: -1;
  --z-base: 0;
  --z-content: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-notification: 600;
  --z-tooltip: 700;
}

/* ========================================
   COMPONENT SIZES
   ======================================== */
/**
 * Component-specific dimensions
 * These are fixed sizes for hero sections, cards, etc.
 */
/* ========================================
   SCSS FUNCTIONS
   ========================================

   Reusable pure functions for calculations
   and data transformations.

   ======================================== */
/* ========================================
   COLOR FUNCTIONS
   ======================================== */
/**
 * Get a color from the scale maps
 * Usage: color('primary', 500)
 */
/**
 * Lighten a color by a percentage
 * Usage: lighten-color(#000, 20%)
 */
/**
 * Darken a color by a percentage
 * Usage: darken-color(#fff, 20%)
 */
/* ========================================
   SPACING FUNCTIONS
   ========================================

/**
 * Get spacing value from scale
 * Usage: spacing('md')
 */
/**
 * Get border radius from scale
 * Usage: radius('lg')
 */
/* ========================================
   RESPONSIVE FUNCTIONS
   ======================================== */
/**
 * Convert pixels to rem (assumes 16px base)
 * Usage: to-rem(24px) -> 1.5rem
 */
/**
 * Convert rem to pixels
 * Usage: to-px(1.5rem) -> 24px
 */
/**
 * Get a breakpoint value
 * Usage: breakpoint('md')
 */
/* ========================================
   ELEVATION FUNCTIONS
   ======================================== */
/**
 * Get shadow from scale
 * Usage: shadow('lg')
 */
/**
 * Get transition from scale
 * Usage: transition('base')
 */
/**
 * Get z-index value
 * Usage: z('modal')
 */
/* ========================================
   TYPOGRAPHY FUNCTIONS
   ======================================== */
/**
 * Get font family shortcut
 * Usage: font-stack('display') -> DM Sans, sans-serif
 */
/* ========================================
   UTILITY FUNCTIONS
   ======================================== */
/**
 * Calculate contrast ratio (basic)
 * Returns 'light' or 'dark' for text color
 */
/**
 * Safely get map value with fallback
 * Usage: safe-map(color-primary, 500, #000)
 */
/**
 * Merge multiple maps
 * Usage: merge-maps((a: 1), (b: 2)) -> (a: 1, b: 2)
 */
/* ========================================
   SCSS MIXINS
   ========================================

   Reusable mixin library for DRY styling.
   Covers responsive design, animations,
   accessibility, and component patterns.

   ======================================== */
/* ========================================
   RESPONSIVE DESIGN MIXINS
   ======================================== */
/**
 * Breakpoint mixin for media queries
 * Usage: @include respond-to('md') { ... }
 */
/**
 * Mobile-first responsive (minimum width)
 * Usage: @include from('md') { ... }
 */
/**
 * Responsive padding
 * Usage: @include responsive-pad($breakpoint-md, $breakpoint-sm, $xs)
 */
/**
 * Responsive margin
 * Usage: @include responsive-margin($breakpoint-md, $breakpoint-sm, $xs)
 */
/**
 * Responsive gap (for flexbox/grid)
 * Usage: @include responsive-gap($breakpoint-lg, $breakpoint-md, $breakpoint-sm)
 */
/* ========================================
   TYPOGRAPHY MIXINS
   ======================================== */
/**
 * Responsive font size only
 * Usage: @include font-size(48px 32px 24px)
 */
/**
 * Text truncation (single line)
 * Usage: @include truncate
 */
/**
 * Multi-line text clamp
 * Usage: @include line-clamp(3)
 */
/* ========================================
   ANIMATION & TRANSITION MIXINS
   ======================================== */
/**
 * Transition shorthand
 * Usage: @include transition(background-color 0.2s)
 */
/**
 * Transform shorthand
 * Usage: @include transform(scale(1.1) rotate(5deg))
 */
/**
 * Smooth animation helper
 * Usage: @include smooth-animation(300ms, cubic-bezier(0.4, 0, 0.2, 1))
 */
/**
 * Keyframe animation generator
 * Usage: @include keyframes('fade-in') { ... }
 */
/**
 * Animation shorthand
 * Usage: @include animate('fade-in', 0.3s, ease-out)
 */
/* ========================================
   ACCESSIBILITY MIXINS
   ======================================== */
/**
 * Focus visible state for keyboard navigation
 * Usage: @include focus-visible
 */
/**
 * High contrast mode support
 * Usage: @include high-contrast { ... }
 */
/**
 * Reduced motion support (respects user preferences)
 * Usage: @include reduced-motion { ... }
 */
/**
 * Dark mode support
 * Usage: @include dark-mode { ... }
 */
/**
 * Light mode support
 * Usage: @include light-mode { ... }
 */
/**
 * Screen reader only content
 * Usage: @include sr-only
 */
/* ========================================
   LAYOUT MIXINS
   ======================================== */
/**
 * Flexbox centering
 * Usage: @include flex-center
 */
/**
 * Flexbox space-between
 * Usage: @include flex-between
 */
/**
 * CSS Grid center
 * Usage: @include grid-center
 */
/**
 * Aspect ratio box
 * Usage: @include aspect-ratio(16, 9)
 */
/**
 * Absolute center (with transform)
 * Usage: @include absolute-center
 */
/**
 * Sticky positioning
 * Usage: @include sticky(0)
 */
/* ========================================
   COMPONENT PATTERN MIXINS
   ======================================== */
/**
 * Button base styles
 * Usage: @include button-base
 */
/**
 * Card styles (with hover effect)
 * Usage: @include card-base
 */
/**
 * Input base styles
 * Usage: @include input-base
 */
/* ========================================
   PSEUDO-ELEMENT MIXINS
   ======================================== */
/**
 * Pseudo-element base
 * Usage: @include pseudo-element
 */
/**
 * Clearfix for floats
 * Usage: @include clearfix
 */
/**
 * Hardware acceleration
 * Usage: @include gpu-acceleration
 */
/* ========================================
   UTILITY MIXINS
   ======================================== */
/**
 * Hide visually but keep accessible
 * Usage: @include hidden-visual
 */
/**
 * Show/hide with display property
 * Usage: @include display-toggle(flex)
 */
/**
 * Underline text decoration on hover
 * Usage: @include underline-on-hover
 */
/* ========================================
   TYPOGRAPHY HELPER MIXINS
   ======================================== */
/**
 * Truncate text to single line
 * Usage: @include truncate
 */
/**
 * Limit text to N lines
 * Usage: @include line-clamp(3)
 */
/* ========================================
   RESPONSIVE HELPER MIXINS
   ======================================== */
/**
 * Responsive padding helper
 * Usage: @include responsive-padding(lg, md, sm)
 */
/**
 * Responsive margin helper
 * Usage: @include responsive-margin(xl, lg, md)
 */
/* ========================================
   2. BASE STYLES - Clean Reset & Normalize
   ======================================== */
/* ========================================
   GOOGLE FONTS IMPORT
   DM Sans (all weights and styles)
   Inter (all weights and styles)
   ======================================== */
/* Font family assignments */
body {
  font-family: "DM Sans", system-ui, sans-serif;
  color: #3C3935;
}

h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: "DM Sans", system-ui, sans-serif;
}

code, pre,
.font-mono {
  font-family: "DM Sans", system-ui, sans-serif;
}

/* ========================================
   NORMALIZE & BASE STYLES
   ========================================

   Reset + normalize styles for consistency
   across all browsers.

   ======================================== */
/* ========================================
   MEYER RESET v2.0
   ======================================== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ========================================
   BOX-SIZING RESET
   ======================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ========================================
   HTML & BODY DEFAULTS
   ======================================== */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #3C3C3B;
  background-color: white;
}
@media (prefers-reduced-motion: reduce) {
  body {
    scroll-behavior: auto;
  }
}

/* ========================================
   TYPOGRAPHY DEFAULTS
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: inherit;
  line-height: 1.2;
  /* Use .type-hero, .type-xl, .type-lg, etc. for styling */
}

small,
.small {
  font-size: 0.875rem;
}

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

code,
pre {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 0.875rem;
}

code {
  padding: 0.2em 0.4em;
  background-color: #F5F5F7;
  border-radius: 4px;
}

pre {
  padding: 1rem;
  background-color: #000000;
  color: white;
  border-radius: 8px;
  overflow-x: auto;
}
pre code {
  padding: 0;
  background-color: transparent;
  color: inherit;
}

/* ========================================
   LINKS
   ======================================== */
a {
  color: #49164E;
  text-decoration: none;
  transition: all color cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover {
  font-weight: inherit;
}
a:focus-visible {
  outline: 2px solid #49164E;
  outline-offset: 2px;
}

/* ========================================
   LISTS
   ======================================== */
dt {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

dd {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

/* ========================================
   BLOCKQUOTE
   ======================================== */
blockquote {
  padding-left: 1.5rem;
  border-left: 4px solid #49164E;
  margin-bottom: 1rem;
  font-style: italic;
  color: #5A5A58;
}

/* ========================================
   FORM ELEMENTS
   ======================================== */
legend {
  padding: 0 0.5rem;
  font-weight: 700;
}

input[type=checkbox] {
  margin-right: 0.5rem;
  color: #49164E;
  accent-color: #49164E;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid #D9D9D8;
  border-radius: 8px;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
input:hover,
textarea:hover,
select:hover {
  border-color: #A9A9A8;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #49164E;
  box-shadow: 0 0 0 3px rgba(73, 22, 78, 0.1);
}
input:disabled,
textarea:disabled,
select:disabled {
  background-color: #F5F5F7;
  color: #3C3935;
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22currentColor%22 stroke-width=%222%22%3e%3cpolyline points=%226 9 12 15 18 9%22%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.5em 1.5em;
}

/* ========================================
   IMAGES & MEDIA
   ======================================== */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: block;
}

svg {
  max-width: 100%;
  height: auto;
}

figure {
  margin-bottom: 1.5rem;
}

figcaption {
  font-size: 0.875rem;
  color: #5A5A58;
  margin-top: 0.5rem;
}

/* ========================================
   TABLES
   ======================================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  border: 1px solid #D9D9D8;
}

thead {
  background-color: #F5F5F7;
}

th,
td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid #EBEBF0;
}

th {
  font-weight: 700;
  color: #1C1B1F;
}

tbody tr:hover {
  background-color: #FAFAFA;
}

/* ========================================
   HORIZONTAL RULE
   ======================================== */
hr {
  margin: 3rem 0;
  border: none;
  border-top: 1px solid #EBEBF0;
}

/* ========================================
   ABBREVIATION
   ======================================== */
abbr[title] {
  border-bottom: 1px dotted #A9A9A8;
  cursor: help;
  text-decoration: none;
}

b {
  font-weight: 700 !important;
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ========================================
   TYPOGRAPHY SYSTEM - SIMPLE & SCALABLE

   Mixins para crear tipografías responsive
   Basado en design tokens de _theme.scss
   ======================================== */
/**
 * MIXIN: Tipografía con todas las propiedades responsive
 * Parámetros:
 *   $name     → Nombre de la clase (.type-{name})
 *   $font     → Font family ($font-sans, $font-display, etc)
 *   $weight   → Font weight (400, 600, 700, etc)
 *   $sizes    → Tamaños desktop tablet mobile (ej: 24px 18px 14px)
 *   $lh       → Line heights (opcional: default 1.4)
 *   $ls       → Letter spacing (opcional: default 0)
 */
/* ========================================
   TIPOGRAFÍAS - EJEMPLOS
   ========================================

   Uso: @include type('nombre', $font, weight, sizes, line-height, letter-spacing)

   Parámetros:
   - sizes: 3 valores separados por espacios (desktop, tablet, mobile)
   - Ejemplos:
     '24px 18px 14px'  → Desktop 24px, Tablet 18px, Mobile 14px

   Acceso en HTML: <element class="type-nombre">

   PLANTILLA PARA AGREGAR NUEVAS:
   @include type('mi-tipo', $font-sans, 600, 20px 16px 12px, 1.5, 0.5px);
   ======================================== */
.type-hero {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.22px;
  font-size: 61px;
}
@media (max-width: 767.98px) {
  .type-hero {
    font-size: 42px;
  }
}
@media (max-width: 575.98px) {
  .type-hero {
    font-size: 36px;
  }
}

.type-xl {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.88px;
  font-size: 44px;
}
@media (max-width: 767.98px) {
  .type-xl {
    font-size: 36px;
  }
}
@media (max-width: 575.98px) {
  .type-xl {
    font-size: 31px;
  }
}

.type-lg {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.8px;
  font-size: 36px;
}
@media (max-width: 767.98px) {
  .type-lg {
    font-size: 28px;
  }
}
@media (max-width: 575.98px) {
  .type-lg {
    font-size: 24px;
  }
}

.type-md {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  font-size: 26px;
}
@media (max-width: 767.98px) {
  .type-md {
    font-size: 22px;
  }
}
@media (max-width: 575.98px) {
  .type-md {
    font-size: 20px;
  }
}

.type-body-lg {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.4px;
  font-size: 20px;
}
@media (max-width: 767.98px) {
  .type-body-lg {
    font-size: 16px;
  }
}
@media (max-width: 575.98px) {
  .type-body-lg {
    font-size: 16px;
  }
}

.type-body-md, .fixed-mobile-button {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.32px;
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .type-body-md, .fixed-mobile-button {
    font-size: 16px;
  }
}
@media (max-width: 575.98px) {
  .type-body-md, .fixed-mobile-button {
    font-size: 14px;
  }
}

.type-body-sm {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.28px;
  font-size: 14px;
}
@media (max-width: 767.98px) {
  .type-body-sm {
    font-size: 14px;
  }
}
@media (max-width: 575.98px) {
  .type-body-sm {
    font-size: 12px;
  }
}

.type-label {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.36px;
  font-size: 18px;
}
@media (max-width: 767.98px) {
  .type-label {
    font-size: 16px;
  }
}
@media (max-width: 575.98px) {
  .type-label {
    font-size: 14px;
  }
}

.type-caption {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.48px;
  font-size: 24px;
}
@media (max-width: 767.98px) {
  .type-caption {
    font-size: 20px;
  }
}
@media (max-width: 575.98px) {
  .type-caption {
    font-size: 18px;
  }
}

.type-pretitle, .contact-form-header-title {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.32px;
  text-transform: uppercase;
  font-size: 16px;
}
@media (max-width: 767.98px) {
  .type-pretitle, .contact-form-header-title {
    font-size: 14px;
  }
}
@media (max-width: 575.98px) {
  .type-pretitle, .contact-form-header-title {
    font-size: 12px;
  }
}

.type-D-XL {
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 2%;
}

.type-D-L {
  font-size: 20px;
  line-height: 140%;
  letter-spacing: 2%;
}

.type-D-M {
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 2%;
}

.type-D-XS {
  font-size: 26px;
  line-height: 120%;
  letter-spacing: 2%;
}

.type-D-S {
  font-size: 36px;
  line-height: 120%;
  letter-spacing: 0%;
}

.type-B-M-inter {
  font-family: "Inter";
  font-weight: 300;
  font-style: Light;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 5%;
}

.type-m, .contact-form-header-text {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  line-height: 110%;
  letter-spacing: 0;
  font-size: 44px;
}
@media (max-width: 767.98px) {
  .type-m, .contact-form-header-text {
    font-size: 36px;
  }
}
@media (max-width: 575.98px) {
  .type-m, .contact-form-header-text {
    font-size: 28px;
  }
}

/* ========================================
   COMPONENTES - ESTILOS BASE
   ======================================== */
.link {
  color: #49164E;
  text-decoration: none;
  transition: color opacity 0.2s ease ease-in-out 0s;
}
.link:hover {
  color: #9E6FB5;
  opacity: 0.85;
}
.link:focus-visible {
  outline: 2px solid #49164E;
  outline-offset: 2px;
}

/* ========================================
   CSS VARIABLES EXPORT
   ======================================== */
/**
 * Este archivo genera CSS variables desde los tokens SCSS.
 * Las variables CSS son usadas por Tailwind para personalización.
 *
 * Importar este archivo en app.scss DESPUÉS de _config.scss
 * para que las variables estén disponibles en HTML y Tailwind.
 */
:root {
  /* ========================================
     PRIMARY COLORS
     ======================================== */
  --color-primary-50: #F7F3F9;
  --color-primary-100: #EFE6F3;
  --color-primary-200: #DECDE6;
  --color-primary-300: #C4A8D4;
  --color-primary-400: #9E6FB5;
  --color-primary-500: #49164E;
  --color-primary-600: #6B2274;
  --color-primary-700: #5B1E65;
  --color-primary-800: #4B1A56;
  --color-primary-900: #3B1647;
  /* ========================================
     SECONDARY COLORS
     ======================================== */
  --color-secondary-50: #F3EEFB;
  --color-secondary-100: #E8DFF8;
  --color-secondary-200: #D4C3F3;
  --color-secondary-300: #B39DED;
  --color-secondary-400: #8F6FE0;
  --color-secondary-500: #6B3FA8;
  --color-secondary-600: #5A2E8C;
  --color-secondary-700: #4A2570;
  --color-secondary-800: #3A1F57;
  --color-secondary-900: #2A1540;
  /* ========================================
     NEUTRAL COLORS
     ======================================== */
  --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F7;
  --color-neutral-200: #EBEBF0;
  --color-neutral-300: #D9D9D8;
  --color-neutral-400: #A9A9A8;
  --color-neutral-500: #3C3935;
  --color-neutral-600: #5A5A58;
  --color-neutral-700: #3C3C3B;
  --color-neutral-800: #1C1B1F;
  --color-neutral-900: #000000;
  /* ========================================
     ADDITIONAL COLOR PALETTES
     ======================================== */
  /* Indigo */
  --color-in-50: #F6EEF7;
  --color-in-100: #A267A8;
  --color-in-200: #D0A9D5;
  --color-in-300: #B77FBF;
  --color-in-400: #7B2683;
  --color-in-500: #49164E;
  --color-in-600: #3B1240;
  --color-in-700: #2E0E32;
  --color-in-800: #210A24;
  --color-in-900: #140516;
  /* Blue */
  --color-bi-50: #F0F7FB;
  --color-bi-100: #E0EFF8;
  --color-bi-200: #C1DFF0;
  --color-bi-300: #92C5E8;
  --color-bi-400: #66ADE0;
  --color-bi-500: #3FA5C6;
  --color-bi-600: #3591B0;
  --color-bi-700: #14627B;
  --color-bi-800: #216884;
  --color-bi-900: #0D2E4D;
  /* Dark */
  --color-di-50: #F0F8F7;
  --color-di-100: #DCF1ED;
  --color-di-200: #81BBBD;
  --color-di-300: #B3D6D7;
  --color-di-400: #5AB3A8;
  --color-di-500: #03777B;
  --color-di-600: #036B6F;
  --color-di-700: #025C64;
  --color-di-800: #014D57;
  --color-di-900: #00444F;
  /* Mint */
  --color-mi-50: #FFFBF0;
  --color-mi-100: #FFF6E0;
  --color-mi-200: #FCC666;
  --color-mi-300: #FFE0A0;
  --color-mi-400: #FFD670;
  --color-mi-500: #FFC940;
  --color-mi-600: #E6B700;
  --color-mi-700: #CC9E00;
  --color-mi-800: #B38600;
  --color-mi-900: #996E00;
  /* ========================================
     SEMANTIC COLORS
     ======================================== */
  --color-success: #06A77D;
  --color-warning: #F77F00;
  --color-error: #E63946;
  --color-info: #457B9D;
  /* ========================================
     FONT FAMILIES
     ======================================== */
  --font-sans: DM Sans, system-ui, -apple-system, sans-serif;
  --font-display: DM Sans, system-ui, -apple-system, sans-serif;
  --font-mono: DM Sans, system-ui, -apple-system, sans-serif;
  /* ========================================
     SPACING SCALE
     ======================================== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 5rem;
  --spacing-5xl: 6rem;
  --spacing-6xl: 8rem;
  /* ========================================
     BORDER RADIUS
     ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  /* ========================================
     SHADOWS
     ======================================== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 8px 20px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 12px 28px rgba(0, 0, 0, 0.2);
  /* ========================================
     TRANSITIONS
     ======================================== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ========================================
   3. COMPONENTS - Modern Component Styles
   ======================================== */
/* ========================================
   BUTTON SYSTEM - CENTRALIZED
   ========================================

   Complete button system with typography,
   variants, sizes and states.

   Usage:
   <button class="btn btn--primary">Click</button>
   <a href="#" class="btn--ghost">Link button</a>

   ======================================== */
/* ========================================
   BUTTON TYPOGRAPHY
   ======================================== */
.type-button, .contact-form-button, .btn, .btn--link, .btn--ghost, .btn--sfera, .btn--danger, .btn--warning, .btn--success, .btn--secondary, .btn--grey, .btn-secondary, .btn--primary, .btn--color, .btn-primary {
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.32px;
  text-align: center;
  text-transform: uppercase;
  line-height: 140%;
  letter-spacing: 2%;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
}
@media (max-width: 767.98px) {
  .type-button, .contact-form-button, .btn, .btn--link, .btn--ghost, .btn--sfera, .btn--danger, .btn--warning, .btn--success, .btn--secondary, .btn--grey, .btn-secondary, .btn--primary, .btn--color, .btn-primary {
    font-size: 14px;
    letter-spacing: 0.28px;
  }
}
@media (max-width: 575.98px) {
  .type-button, .contact-form-button, .btn, .btn--link, .btn--ghost, .btn--sfera, .btn--danger, .btn--warning, .btn--success, .btn--secondary, .btn--grey, .btn-secondary, .btn--primary, .btn--color, .btn-primary {
    font-size: 12px;
    letter-spacing: 0.24px;
  }
}

/* ========================================
   BUTTON BASE
   ======================================== */
.btn, .btn--link, .btn--ghost, .btn--sfera, .btn--danger, .btn--warning, .btn--success, .btn--secondary, .btn--grey, .btn-secondary, .btn--primary, .btn--color, .btn-primary {
  transition: all 0.2s ease ease-in-out 0s;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  padding: 14px 32px;
  /*   @include respond-to(md) {
      padding: spacing(md) spacing(md);
    }

    @include respond-to(sm) {
      padding: spacing(sm) spacing(md);
    } */
}
.btn:focus-visible, .btn--link:focus-visible, .btn--ghost:focus-visible, .btn--sfera:focus-visible, .btn--danger:focus-visible, .btn--warning:focus-visible, .btn--success:focus-visible, .btn--secondary:focus-visible, .btn--grey:focus-visible, .btn-secondary:focus-visible, .btn--primary:focus-visible, .btn--color:focus-visible, .btn-primary:focus-visible {
  outline: 2px solid #49164E;
  outline-offset: 2px;
}
.btn:disabled, .btn--link:disabled, .btn--ghost:disabled, .btn--sfera:disabled, .btn--danger:disabled, .btn--warning:disabled, .btn--success:disabled, .btn--secondary:disabled, .btn--grey:disabled, .btn-secondary:disabled, .btn--primary:disabled, .btn--color:disabled, .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn, .btn--link, .btn--ghost, .btn--sfera, .btn--danger, .btn--warning, .btn--success, .btn--secondary, .btn--grey, .btn-secondary, .btn--primary, .btn--color, .btn-primary {
  background-color: #F5F5F7;
  color: #3C3C3B;
  border: 1px solid #D9D9D8;
}
.btn:hover:not(:disabled), .btn--link:hover:not(:disabled), .btn--ghost:hover:not(:disabled), .btn--sfera:hover:not(:disabled), .btn--danger:hover:not(:disabled), .btn--warning:hover:not(:disabled), .btn--success:hover:not(:disabled), .btn--secondary:hover:not(:disabled), .btn--grey:hover:not(:disabled), .btn-secondary:hover:not(:disabled), .btn--primary:hover:not(:disabled), .btn--color:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background-color: #EBEBF0;
  border-color: #A9A9A8;
}
.btn:active:not(:disabled), .btn--link:active:not(:disabled), .btn--ghost:active:not(:disabled), .btn--sfera:active:not(:disabled), .btn--danger:active:not(:disabled), .btn--warning:active:not(:disabled), .btn--success:active:not(:disabled), .btn--secondary:active:not(:disabled), .btn--grey:active:not(:disabled), .btn-secondary:active:not(:disabled), .btn--primary:active:not(:disabled), .btn--color:active:not(:disabled), .btn-primary:active:not(:disabled) {
  transform: scale(0.98);
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */
.btn--primary, .btn--color, .btn-primary {
  background-color: #49164E;
  color: white;
  border-color: #49164E;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.btn--primary:hover:not(:disabled), .btn--color:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  background-color: rgb(110.23, 33.22, 117.78);
  border-color: rgb(110.23, 33.22, 117.78);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.btn--primary:active:not(:disabled), .btn--color:active:not(:disabled), .btn-primary:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn--secondary, .btn--grey, .btn-secondary {
  background-color: #E8DFF8;
  color: #4A2570;
  border-color: #B39DED;
}
.btn--secondary:hover:not(:disabled), .btn--grey:hover:not(:disabled), .btn-secondary:hover:not(:disabled) {
  background-color: #D4C3F3;
  border-color: #8F6FE0;
}

.btn--success {
  background-color: #06A77D;
  color: white;
  border-color: #06A77D;
}
.btn--success:hover:not(:disabled) {
  background-color: rgb(4.2312138728, 117.7687861272, 88.1502890173);
  border-color: rgb(4.2312138728, 117.7687861272, 88.1502890173);
}

.btn--warning {
  background-color: #F77F00;
  color: white;
  border-color: #F77F00;
}
.btn--warning:hover:not(:disabled) {
  background-color: rgb(196, 100.7773279352, 0);
  border-color: rgb(196, 100.7773279352, 0);
}

.btn--danger {
  background-color: #E63946;
  color: white;
  border-color: #E63946;
}
.btn--danger:hover:not(:disabled) {
  background-color: rgb(209.5426008969, 26.4573991031, 40.2152466368);
  border-color: rgb(209.5426008969, 26.4573991031, 40.2152466368);
}

.btn--sfera {
  background-color: #7B2683;
  color: white;
  border-color: #7B2683;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.btn--sfera:hover:not(:disabled) {
  background-color: #5a1d5e;
  border-color: #5a1d5e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.btn--sfera:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.btn--ghost {
  background-color: white;
  color: #7B2683;
  border: 1px solid #49164E;
}
.btn--ghost:hover:not(:disabled) {
  font-weight: 700;
}

.btn--link {
  background-color: transparent;
  color: #49164E;
  border: none;
  box-shadow: none;
  text-decoration: underline;
  padding: 0;
}
.btn--link:hover:not(:disabled) {
  background-color: transparent;
  opacity: 0.8;
}

/* ========================================
   BUTTON SIZES
   ======================================== */
.btn--sm {
  padding: 0.25rem 1rem;
  font-size: 0.875rem;
}
@media (max-width: 575.98px) {
  .btn--sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
}

.btn--lg {
  padding: 1.5rem 3rem;
  font-size: 1.125rem;
}
@media (max-width: 575.98px) {
  .btn--lg {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
}

/* ========================================
   BUTTON MODIFIERS
   ======================================== */
.btn--block {
  width: 100%;
  max-width: none;
}

.btn--loading {
  color: transparent;
  pointer-events: none;
}
.btn--loading::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  top: 50%;
  left: 50%;
  margin-left: -0.5em;
  margin-top: -0.5em;
  border: 2px solid currentColor;
  border-radius: 9999px;
  border-top-color: transparent;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.btn--icon {
  padding: 1rem;
  border-radius: 8px;
}
.btn--icon svg {
  width: 1.5em;
  height: 1.5em;
}

.btn--with-icon svg {
  width: 1.25em;
  height: 1.25em;
}

/* ========================================
   BUTTON GROUPS
   ======================================== */
.btn-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn-group .btn, .btn-group .btn--primary, .btn-group .btn--color, .btn-group .btn-primary, .btn-group .btn--secondary, .btn-group .btn--grey, .btn-group .btn-secondary, .btn-group .btn--success, .btn-group .btn--warning, .btn-group .btn--danger, .btn-group .btn--sfera, .btn-group .btn--ghost, .btn-group .btn--link {
  flex: 1;
  min-width: 150px;
}
@media (max-width: 575.98px) {
  .btn-group {
    flex-direction: column;
  }
  .btn-group .btn, .btn-group .btn--primary, .btn-group .btn--color, .btn-group .btn-primary, .btn-group .btn--secondary, .btn-group .btn--grey, .btn-group .btn-secondary, .btn-group .btn--success, .btn-group .btn--warning, .btn-group .btn--danger, .btn-group .btn--sfera, .btn-group .btn--ghost, .btn-group .btn--link {
    width: 100%;
  }
}

.btn-group--vertical {
  flex-direction: column;
}
.btn-group--vertical .btn, .btn-group--vertical .btn--primary, .btn-group--vertical .btn--color, .btn-group--vertical .btn-primary, .btn-group--vertical .btn--secondary, .btn-group--vertical .btn--grey, .btn-group--vertical .btn-secondary, .btn-group--vertical .btn--success, .btn-group--vertical .btn--warning, .btn-group--vertical .btn--danger, .btn-group--vertical .btn--sfera, .btn-group--vertical .btn--ghost, .btn-group--vertical .btn--link {
  width: 100%;
}

/* ========================================
   LEGACY COMPATIBILITY
   ======================================== */
.btn-info {
  min-width: 5.4rem;
  height: 5.4rem;
  width: 100%;
  max-width: 5.4rem;
  background-image: url("../imgs/icons/plus.png");
  background-repeat: no-repeat;
  background-size: 5.4rem;
  padding: 0;
  border: none;
}
.btn-info.js-show {
  max-width: 5.4rem;
  background-image: url("../imgs/icons/minus.png");
}

/* ========================================
   CONTACT FORM STYLES
   ======================================== */
.contact-form-section {
  overflow: hidden;
  background-color: #49164E;
  padding: 1rem;
}

.contact-form-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 624px;
}
@media (max-width: 767.98px) {
  .contact-form-wrapper {
    padding: 1rem;
  }
}

.contact-form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 5.5rem;
  max-width: 1340px;
  width: 100%;
}
@media (max-width: 767.98px) {
  .contact-form-container {
    max-width: 100%;
  }
}

.contact-form-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.contact-form-header-title {
  color: #CAA8CD;
}

.contact-form-header-text {
  color: white;
  width: 50%;
  margin-top: 0.5rem;
}
@media (max-width: 767.98px) {
  .contact-form-header-text {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .contact-form {
    width: 100%;
  }
}

.contact-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  line-height: 1.6;
  margin-top: 1.5rem;
}
.contact-form-row:first-child {
  margin-top: 0;
}

.form-fieldset--textarea, .form-fieldset {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-shrink: 1;
  justify-content: center;
  align-self: stretch;
  padding: 5px 1rem;
  border-radius: 8px;
  flex-basis: 0;
  min-width: 240px;
  max-width: calc(50% - 0.5rem);
  background-color: white;
}
@media (max-width: 767.98px) {
  .form-fieldset--textarea, .form-fieldset {
    max-width: 100%;
  }
}

.form-fieldset--textarea {
  position: relative;
}

.form-fieldset--checkbox {
  display: flex;
  flex-direction: column;
  flex: 1;
  flex-shrink: 1;
  align-self: stretch;
  border-radius: 20px;
  flex-basis: 0;
  min-width: 240px;
}
@media (max-width: 767.98px) {
  .form-fieldset--checkbox {
    max-width: 100%;
  }
}

.form-label {
  display: flex;
  gap: 0.25rem;
  align-items: flex-start;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #6b6b6b;
  margin-bottom: 0;
  margin-top: 2px;
}

.form-textarea, .form-input {
  width: 100%;
  background-color: transparent;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: #969492;
  border: none;
  outline: none;
}
.form-textarea::-moz-placeholder, .form-input::-moz-placeholder {
  color: #9ca3af;
}
.form-textarea::placeholder, .form-input::placeholder {
  color: #9ca3af;
}

.form-textarea {
  resize: vertical;
  min-height: 96px;
  max-height: 400px;
}
@media (max-width: 767.98px) {
  .form-textarea {
    max-width: 100%;
  }
}

.form-char-counter {
  background-color: #efefef;
  font-size: 0.875rem;
  color: #969492;
  position: absolute;
  bottom: -25px;
}

.form-checkbox-group {
  margin-top: 1rem;
}

.form-checkbox-required-text {
  margin-bottom: 0.5rem;
  color: white;
  font-size: 0.8125rem;
}

.form-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  width: 80%;
}
.form-checkbox-wrapper label {
  cursor: pointer;
}

.contact-form-submit {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.contact-form-button svg {
  width: 1rem;
  height: 1rem;
}

.contact-form-feedback {
  margin-top: 1rem;
  text-align: right;
}

/* ========================================
   4. LAYOUT & PARTIALS
   ======================================== */
/* Header styles - Most styling is now handled by Tailwind CSS */
/* Mobile menu animation - Cannot be replicated easily in Tailwind without custom CSS */
.m-hamb.js-open {
  visibility: visible !important;
  opacity: 1 !important;
  transition: visibility 0s linear 0s, opacity 0.3s ease;
}
.m-hamb.js-open .mobile-menu-content {
  transform: scaleY(1);
}

/* Hamburger icon animation */
.m-toggle.js-open .icon-close {
  display: flex !important;
}
.m-toggle.js-open .icon-burger {
  display: none !important;
}

/* Carousel slide transitions */
.carousel-slide.active {
  opacity: 1 !important;
  z-index: 10 !important;
}

/* Menu item hover styles with custom colors */
.menu-link {
  position: relative;
  /* Underline pseudo-element that extends beyond the text */
}
.menu-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: -8px;
  right: -8px;
  height: 2px;
  background-color: var(--hover-border-color);
  opacity: 0;
}
.menu-link {
  /* Underline appears on group hover */
}
li.group:hover .menu-link {
  color: var(--hover-text-color);
}
li.group:hover .menu-link::after {
  opacity: 1;
}
.menu-link {
  /* Active state underline */
}
.menu-link.active::after {
  opacity: 1;
  background-color: var(--hover-border-color, var(--color-primary-500));
}

/* Submenu interactions for desktop */
.menu li.group:hover > .submenu {
  display: flex;
}

.menu li.has-child > a::after {
  content: "";
  background-image: url("../imgs/chevron-down-solid.svg");
  background-repeat: no-repeat;
  background-size: 1.4rem;
  background-position: right center;
  display: inline-block;
  width: 20px;
  height: 11px;
}

.menu li.group:hover > a::after {
  transform: rotate(180deg);
  transition: 0.4s ease;
}

/* Nested submenu chevron (right-pointing) */
.submenu .menu li.has-child > a::after {
  content: "";
  background-image: url("../imgs/chevron-right-solid.svg");
  background-repeat: no-repeat;
  background-size: 0.8rem;
  background-position: right center;
  display: inline-block;
  width: 20px;
  height: 11px;
}

/* Cubic bezier animation for mobile menu */
.mobile-menu-content {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero background image styling */
.hero-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ========================================
   HERO SECTIONS & CAROUSELS
   ======================================== */
.full {
  height: 650px !important;
}

/* Hero small section - Static banner */
.mdl-hero-sm {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: cover;
}
.mdl-hero-sm .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.mdl-hero-sm .hero-bg-desktop {
  display: block;
}
.mdl-hero-sm .hero-bg-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .mdl-hero-sm .hero-bg-desktop {
    display: none;
  }
  .mdl-hero-sm .hero-bg-mobile {
    display: block;
  }
}
.mdl-hero-sm::after {
  content: "";
  background-color: #000000;
  opacity: 0;
  z-index: 8;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mdl-hero-sm .container {
  position: relative;
  z-index: 9;
}

/* Extended hero small section styles */
.mdl-hero-sm {
  position: relative;
}
.mdl-hero-sm::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #2f2e2e 50%, #1D1D1B 100%);
  opacity: 0.3;
  z-index: 1;
}
.mdl-hero-sm .container {
  position: relative;
  z-index: 11;
}
.mdl-hero-sm .container .container__bx .inverse {
  justify-items: left;
  text-align: left;
  margin-left: 1rem;
  display: grid;
}
.mdl-hero-sm .container .container__bx .inverse .description {
  font-size: 1.25rem;
}
@media (width <= 767.98px) {
  .mdl-hero-sm .container .container__bx .inverse {
    justify-items: left;
    text-align: left;
    margin-left: 1rem;
  }
  .mdl-hero-sm .container .container__bx .inverse .description {
    text-align: left;
  }
}
.mdl-hero-sm .container .container__bx .normal {
  justify-items: left;
  display: grid;
}
.mdl-hero-sm .container .container__bx .normal .description {
  max-width: 400px;
}
.mdl-hero-sm .container .logo {
  width: 327px;
  align-self: center;
  transform: translateY(0.5rem);
}
.mdl-hero-sm .container .title {
  line-height: 1.2;
  margin-top: 1rem;
  font-size: 5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
  word-break: keep-all;
}
.mdl-hero-sm .container .description {
  font-size: 2rem;
  font-weight: 700;
  line-height: 140%;
  text-transform: uppercase;
  color: white;
  text-align: left;
  justify-self: left;
}
@media (width <= 767.98px) {
  .mdl-hero-sm .container .description {
    font-size: 1.625rem;
    justify-self: center;
    text-align: center;
  }
}
@media (max-width: 1200px) {
  .mdl-hero-sm .container {
    margin-left: 0;
    padding: 0 1rem;
  }
  .mdl-hero-sm .container .title {
    line-height: 1.2;
    font-size: 4.375rem;
  }
}
@media (max-width: 1200px) and (max-width: 991.98px) {
  .mdl-hero-sm .container .title {
    font-size: 3.75rem;
  }
}
@media (max-width: 1200px) and (max-width: 767.98px) {
  .mdl-hero-sm .container .title {
    font-size: 3rem;
  }
}

/* Carousel section */
.mdl-hero-carousel {
  position: relative;
  width: 100%;
  height: 650px;
  overflow: hidden;
}
.mdl-hero-carousel .hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}
.mdl-hero-carousel .hero-bg-desktop {
  display: block;
}
.mdl-hero-carousel .hero-bg-mobile {
  display: none;
}
@media (max-width: 767.98px) {
  .mdl-hero-carousel .hero-bg-desktop {
    display: none;
  }
  .mdl-hero-carousel .hero-bg-mobile {
    display: block;
  }
}
.mdl-hero-carousel .carousel {
  position: relative;
  width: 100%;
  height: 100%;
}
.mdl-hero-carousel .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.6s ease-in-out;
  z-index: 0;
  transform: translateX(0);
}
.mdl-hero-carousel .carousel-slide.active {
  opacity: 1;
  z-index: 1;
  transform: translateX(0);
}
.mdl-hero-carousel .carousel-slide.left {
  transform: translateX(-100%);
  opacity: 1;
}
.mdl-hero-carousel .carousel-slide.right {
  transform: translateX(100%);
  opacity: 1;
}
.mdl-hero-carousel .carousel-slide.exiting {
  opacity: 1;
  z-index: 1;
  transition: all 0.6s ease-in-out;
  transform: translateX(0);
}
.mdl-hero-carousel .carousel-slide .mdl-hero-sm {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
@media (max-width: 767.98px) {
  .mdl-hero-carousel .carousel-slide .mdl-hero-sm {
    background-position: 30% center;
  }
}
.mdl-hero-carousel .carousel-slide .container__bx {
  color: #fff;
}
.mdl-hero-carousel .carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("/imgs/demo/arrow.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 100;
  width: 46px;
  height: 46px;
  cursor: pointer;
}
.mdl-hero-carousel .carousel-control.prev {
  left: 20px;
  transform: translateY(-50%) rotate(180deg);
}
.mdl-hero-carousel .carousel-control.next {
  right: 20px;
}

/* ========================================
   LEGAL PAGES STYLES
   ======================================== */
.page-copyright .container__bx,
.page-legal_notice .container__bx,
.page-cookies .container__bx,
.page-system_information .container__bx,
.page-data_protection_policy .container__bx {
  background-color: white;
  border-left: 4px solid #49164E;
}
@media (width <= 767.98px) {
  .page-copyright .container__bx,
  .page-legal_notice .container__bx,
  .page-cookies .container__bx,
  .page-system_information .container__bx,
  .page-data_protection_policy .container__bx {
    padding: 2rem;
  }
}
@media (width <= 480px) {
  .page-copyright .container__bx,
  .page-legal_notice .container__bx,
  .page-cookies .container__bx,
  .page-system_information .container__bx,
  .page-data_protection_policy .container__bx {
    padding: 2rem 1rem;
  }
}
.page-copyright h1,
.page-legal_notice h1,
.page-cookies h1,
.page-system_information h1,
.page-data_protection_policy h1 {
  color: #49164E;
  font-size: clamp(2rem, 4vw, 2.5rem);
  border-bottom: 2px solid #D9D9D8;
  padding-bottom: 1rem;
  text-align: left;
  line-height: 1.3;
}
@media (width <= 480px) {
  .page-copyright h1,
  .page-legal_notice h1,
  .page-cookies h1,
  .page-system_information h1,
  .page-data_protection_policy h1 {
    margin-bottom: 2rem;
  }
}
.page-copyright h2,
.page-legal_notice h2,
.page-cookies h2,
.page-system_information h2,
.page-data_protection_policy h2 {
  color: #5B1E65;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  margin-bottom: 1rem;
  line-height: 1.4;
}
@media (width <= 480px) {
  .page-copyright h2,
  .page-legal_notice h2,
  .page-cookies h2,
  .page-system_information h2,
  .page-data_protection_policy h2 {
    margin-top: 2rem;
  }
}
.page-copyright h3,
.page-legal_notice h3,
.page-cookies h3,
.page-system_information h3,
.page-data_protection_policy h3 {
  color: #49164E;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}
.page-copyright p,
.page-legal_notice p,
.page-cookies p,
.page-system_information p,
.page-data_protection_policy p {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.8;
  margin-bottom: 2rem;
  color: #3C3C3B;
}
@media (width <= 767.98px) {
  .page-copyright p,
  .page-legal_notice p,
  .page-cookies p,
  .page-system_information p,
  .page-data_protection_policy p {
    line-height: 1.7;
  }
}
@media (width <= 480px) {
  .page-copyright p,
  .page-legal_notice p,
  .page-cookies p,
  .page-system_information p,
  .page-data_protection_policy p {
    margin-bottom: 1.5rem;
    line-height: 1.65;
  }
}
.page-copyright ul,
.page-copyright ol,
.page-legal_notice ul,
.page-legal_notice ol,
.page-cookies ul,
.page-cookies ol,
.page-system_information ul,
.page-system_information ol,
.page-data_protection_policy ul,
.page-data_protection_policy ol {
  margin-bottom: 2rem;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
  line-height: 1.8;
}
@media (width <= 767.98px) {
  .page-copyright ul,
  .page-copyright ol,
  .page-legal_notice ul,
  .page-legal_notice ol,
  .page-cookies ul,
  .page-cookies ol,
  .page-system_information ul,
  .page-system_information ol,
  .page-data_protection_policy ul,
  .page-data_protection_policy ol {
    margin-left: 2rem;
    line-height: 1.7;
  }
}
@media (width <= 480px) {
  .page-copyright ul,
  .page-copyright ol,
  .page-legal_notice ul,
  .page-legal_notice ol,
  .page-cookies ul,
  .page-cookies ol,
  .page-system_information ul,
  .page-system_information ol,
  .page-data_protection_policy ul,
  .page-data_protection_policy ol {
    margin-left: 1rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
  }
}
.page-copyright li,
.page-legal_notice li,
.page-cookies li,
.page-system_information li,
.page-data_protection_policy li {
  margin-bottom: 0.5rem;
}
@media (width <= 480px) {
  .page-copyright li,
  .page-legal_notice li,
  .page-cookies li,
  .page-system_information li,
  .page-data_protection_policy li {
    margin-bottom: 0.25rem;
  }
}
.page-copyright strong,
.page-legal_notice strong,
.page-cookies strong,
.page-system_information strong,
.page-data_protection_policy strong {
  color: #49164E;
  font-weight: 600;
}
.page-copyright .table-wrapper,
.page-legal_notice .table-wrapper,
.page-cookies .table-wrapper,
.page-system_information .table-wrapper,
.page-data_protection_policy .table-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
}
@media (width <= 767.98px) {
  .page-copyright .table-wrapper,
  .page-legal_notice .table-wrapper,
  .page-cookies .table-wrapper,
  .page-system_information .table-wrapper,
  .page-data_protection_policy .table-wrapper {
    max-width: calc(100vw - 6rem);
  }
}
@media (width <= 480px) {
  .page-copyright .table-wrapper,
  .page-legal_notice .table-wrapper,
  .page-cookies .table-wrapper,
  .page-system_information .table-wrapper,
  .page-data_protection_policy .table-wrapper {
    margin: 2rem 0;
    border-radius: 0;
    max-width: calc(100vw - 2rem);
  }
}
.page-copyright .table-wrapper,
.page-legal_notice .table-wrapper,
.page-cookies .table-wrapper,
.page-system_information .table-wrapper,
.page-data_protection_policy .table-wrapper {
  background: linear-gradient(90deg, white 30%, rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(255, 255, 255, 0), white 70%) 0 100%, radial-gradient(farthest-side at 0% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0)) 0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (width <= 480px) {
  .page-copyright .table-wrapper::after,
  .page-legal_notice .table-wrapper::after,
  .page-cookies .table-wrapper::after,
  .page-system_information .table-wrapper::after,
  .page-data_protection_policy .table-wrapper::after {
    content: "← Desliza para ver más →";
    display: block;
    text-align: center;
    font-size: 1.1rem;
    color: #3C3935;
    padding: 0.5rem;
    background: #F5F5F7;
    border-top: 1px solid #D9D9D8;
  }
}
.page-copyright table,
.page-legal_notice table,
.page-cookies table,
.page-system_information table,
.page-data_protection_policy table {
  width: 100%;
  min-width: 600px;
  margin: 0;
  border-collapse: collapse;
  display: table;
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
}
@media (width <= 767.98px) {
  .page-copyright table,
  .page-legal_notice table,
  .page-cookies table,
  .page-system_information table,
  .page-data_protection_policy table {
    min-width: 600px;
  }
}
@media (width <= 768px) {
  .page-copyright table,
  .page-legal_notice table,
  .page-cookies table,
  .page-system_information table,
  .page-data_protection_policy table {
    min-width: 650px;
  }
}
@media (width <= 480px) {
  .page-copyright table,
  .page-legal_notice table,
  .page-cookies table,
  .page-system_information table,
  .page-data_protection_policy table {
    min-width: 600px;
  }
}
.page-copyright table th,
.page-legal_notice table th,
.page-cookies table th,
.page-system_information table th,
.page-data_protection_policy table th {
  background-color: #49164E;
  color: white;
  padding: 1rem;
  text-align: left;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 600;
  white-space: nowrap;
}
@media (width <= 767.98px) {
  .page-copyright table th,
  .page-legal_notice table th,
  .page-cookies table th,
  .page-system_information table th,
  .page-data_protection_policy table th {
    padding: 0.75rem 0.6rem;
  }
}
@media (width <= 480px) {
  .page-copyright table th,
  .page-legal_notice table th,
  .page-cookies table th,
  .page-system_information table th,
  .page-data_protection_policy table th {
    padding: 0.6rem 0.5rem;
    font-size: 1.2rem;
  }
}
.page-copyright table td,
.page-legal_notice table td,
.page-cookies table td,
.page-system_information table td,
.page-data_protection_policy table td {
  padding: 1rem 1rem;
  border-bottom: 1px solid #D9D9D8;
  word-wrap: break-word;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.6;
}
@media (width <= 767.98px) {
  .page-copyright table td,
  .page-legal_notice table td,
  .page-cookies table td,
  .page-system_information table td,
  .page-data_protection_policy table td {
    padding: 0.75rem 0.6rem;
  }
}
@media (width <= 480px) {
  .page-copyright table td,
  .page-legal_notice table td,
  .page-cookies table td,
  .page-system_information table td,
  .page-data_protection_policy table td {
    padding: 0.6rem 0.5rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
}
.page-copyright table tr:hover,
.page-legal_notice table tr:hover,
.page-cookies table tr:hover,
.page-system_information table tr:hover,
.page-data_protection_policy table tr:hover {
  background-color: #FAFAFA;
}
@media (width <= 480px) {
  .page-copyright table thead,
  .page-legal_notice table thead,
  .page-cookies table thead,
  .page-system_information table thead,
  .page-data_protection_policy table thead {
    display: table-header-group;
  }
  .page-copyright table tbody,
  .page-legal_notice table tbody,
  .page-cookies table tbody,
  .page-system_information table tbody,
  .page-data_protection_policy table tbody {
    display: table-row-group;
  }
  .page-copyright table tr,
  .page-legal_notice table tr,
  .page-cookies table tr,
  .page-system_information table tr,
  .page-data_protection_policy table tr {
    display: table-row;
  }
  .page-copyright table th, .page-copyright table td,
  .page-legal_notice table th,
  .page-legal_notice table td,
  .page-cookies table th,
  .page-cookies table td,
  .page-system_information table th,
  .page-system_information table td,
  .page-data_protection_policy table th,
  .page-data_protection_policy table td {
    display: table-cell;
  }
}
.page-copyright code,
.page-legal_notice code,
.page-cookies code,
.page-system_information code,
.page-data_protection_policy code {
  background-color: #F5F5F7;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  color: #49164E;
  font-size: 1.4rem;
}

/* ========================================
   FIXED MOBILE BUTTON
   ======================================== */
.fixed-mobile-button {
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 1.5rem);
  padding: 0.5rem 1rem;
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
  background-color: #49164E;
  color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 300;
  cursor: pointer;
  transition: all 0.2s ease ease-in-out 0s;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  opacity: 1;
}
@media (max-width: 767.98px) {
  .fixed-mobile-button {
    display: flex;
  }
}
.fixed-mobile-button:hover {
  background-color: #6B2274;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.fixed-mobile-button:active {
  transform: translateX(-50%) scale(0.98);
}
.fixed-mobile-button.hidden-button {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(1rem);
}

/* ========================================
   PLAN CARD EFFECTS
   ======================================== */
.plan-card-misfera:hover .plan-price {
  color: #7B2683;
  transition: color 0.3s ease;
}

/* ========================================
   FEATURES LIST
   ======================================== */
.features-list ol,
.features-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.features-list ol li,
.features-list ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
}
.features-list ol li::before,
.features-list ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #7B2683;
  font-weight: bold;
  font-size: 18px;
  line-height: 1;
}

.plan-detail ol,
.plan-detail ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  -moz-column-gap: 15px;
       column-gap: 15px;
}
.plan-detail ol li,
.plan-detail ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
}
.plan-detail ol li::before,
.plan-detail ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -5px;
  color: #7B2683;
  font-weight: bold;
  font-size: 30px;
  line-height: 1;
}

.plan-detail.features ol,
.plan-detail.features ul {
  grid-template-columns: repeat(1, 1fr);
}

/* ========================================
   5. PAGE-SPECIFIC STYLES
   ======================================== */
.two-columns-home {
  background-color: #49164E;
}

.solutions2 .card-home {
  border-radius: 16px;
  background: linear-gradient(102.29deg, rgba(255, 255, 255, 0.56) 5.95%, rgba(255, 255, 255, 0.14) 99.27%);
}

.card-blur {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  backdrop-filter: blur(2px);
  border: 1px solid white;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 20;
  border-radius: 16px;
}

.fc-greyDark {
  color: #3C3935;
}

.fc-purpleSfera {
  color: #49164E;
}

.fc-purpleSferaText {
  color: #7B2683;
}

.bg-purpleSferaText {
  background-color: #7B2683;
}

.bg-purpleSfera {
  background-color: #49164E;
}

.fc-purple1 {
  color: #A267A8;
}

.fc-purple2 {
  color: #CAA8CD;
}

.fc-purple3 {
  color: #E4D3E6;
}

.fc-greyDark {
  color: #3C3935;
}

.bg-greyPolar {
  background-color: #CED4E0;
}

.bg-greyDark {
  background-color: #3C3935;
}

.bg-purple1 {
  background-color: #A267A8;
}

.bg-purple2 {
  background-color: #CAA8CD;
}

.bg-purple3 {
  background-color: #E4D3E6;
}

/* ========================================
   CARD TYPES FOR STAIRS-BLOCKS
   ======================================== */
.two-columns-home {
  background-color: #49164E;
}

.solutions2 .card-home {
  border-radius: 16px;
  background: linear-gradient(102.29deg, rgba(255, 255, 255, 0.56) 5.95%, rgba(255, 255, 255, 0.14) 99.27%);
}

/*# sourceMappingURL=app.css.map*/