@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-VariableFont_wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2") format("woff2");
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("../fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2");
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Material Symbols Outlined";
    src: url("../fonts/material-symbols-outlined.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
}

:root {
    --primary: #650017;
    --primary-container: #8e0225;
    --primary-light: #dc3763;
    --primary-fixed: #ffdada;
    --secondary: #755b00;
    --secondary-container: #fed255;
    --secondary-fixed: #ffe08e;
    --tertiary: #745b00;
    --tertiary-container: #cda727;
    --tertiary-fixed: #ffe08b;
    --opposite: #14183e;
    --background: #fcf9f8;
    --surface: #fcf9f8;
    --surface-dim: #dcd9d9;
    --surface-variant: #e5e2e1;
    --surface-low: #f6f3f2;
    --surface-container: #f0eded;
    --surface-high: #eae7e7;
    --surface-highest: #e5e2e1;
    --surface-lowest: #fff;
    --text: #1b1c1c;
    --text-variant: #594141;
    --text-muted: #a3a3a3;
    --outline: #8d7070;
    --outline-variant: #e1bebf;
    --error: #ba1a1a;
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2.5rem;
    --gutter: 1.5rem;
    --gutter-mobile: 1rem;
    --margin: 3rem;
    --margin-mobile: 1.25rem;
    --font-heading: "Playfair Display", Georgia, serif;
    --font-body: "Plus Jakarta Sans", Arial, sans-serif;
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    padding: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overscroll-behavior: none
}

body.modal-open {
    overflow: hidden
}

main>:first-child {
    margin-top: 0 !important
}

main>:last-child {
    margin-bottom: 0 !important
}

::-webkit-scrollbar {
    width: 0;
    height: 0
}

img {
    max-width: 100%;
    display: block
}

a {
    text-decoration: none;
    color: inherit
}

button {
    font: inherit;
    border: 0;
    cursor: pointer
}

ul {
    margin: 0;
    padding: 0;
    list-style: none
}

svg {
    display: block
}

.material-symbols-outlined {
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
}

.selection\:bg-tertiary-fixed::selection {
    background: var(--tertiary-fixed);
    color: var(--primary)
}

.bg-background {
    background: var(--background)
}

.text-background {
    color: var(--background)
}

.bg-surface {
    background: var(--surface)
}

.text-surface {
    color: var(--surface)
}

.bg-surface-container {
    background: var(--surface-container)
}

.text-surface-container {
    color: var(--surface-container)
}

.bg-surface-container-high {
    background: var(--surface-high)
}

.text-surface-container-high {
    color: var(--surface-high)
}

.bg-surface-container-highest {
    background: var(--surface-highest)
}

.text-surface-container-highest {
    color: var(--surface-highest)
}

.bg-surface-container-low {
    background: var(--surface-low)
}

.text-surface-container-low {
    color: var(--surface-low)
}

.bg-surface-container-lowest {
    background: var(--surface-lowest)
}

.text-surface-container-lowest {
    color: var(--surface-lowest)
}

.bg-surface-variant {
    background: var(--surface-variant)
}

.text-surface-variant {
    color: var(--surface-variant)
}

.bg-surface-dim {
    background: var(--surface-dim)
}

.text-surface-dim {
    color: var(--surface-dim)
}

.bg-primary {
    background: var(--primary)
}

.bg-primary-light {
    background: var(--primary-light)
}

.bg-primary-fixed {
    background: var(--primary-fixed)
}

.bg-opposite {
    background: var(--opposite)
}

.bg-surface-low {
    background: var(--surface-low);
}

.bg-transparent {
    background: transparent;
}

.text-primary {
    color: var(--primary)
}

.text-opposite {
    color: var(--opposite)
}

.text-light {
    color: var(--primary-light)
}

.bg-primary-container {
    background: var(--primary-container)
}

.text-primary-container {
    color: var(--primary-container)
}

.bg-tertiary {
    background: var(--tertiary)
}

.text-tertiary {
    color: var(--tertiary)
}

.bg-tertiary-container {
    background: var(--tertiary-container)
}

.text-tertiary-container {
    color: var(--tertiary-container)
}

.bg-tertiary-fixed {
    background: var(--tertiary-fixed)
}

.text-tertiary-fixed {
    color: var(--tertiary-fixed)
}

.bg-secondary {
    background: var(--secondary)
}

.text-secondary {
    color: var(--secondary)
}

.bg-on-primary {
    background: #fff
}

.text-on-primary {
    color: #fff
}

.bg-on-surface {
    background: var(--text)
}

.text-on-surface {
    color: var(--text)
}

.bg-on-surface-variant {
    background: var(--text-variant)
}

.text-on-surface-variant {
    color: var(--text-variant)
}

.text-on-muted {
    color: var(--text-muted)
}

.text-on-opposite {
    color: var(--opposite)
}

.bg-outline-variant {
    background: var(--outline-variant)
}

.text-outline-variant {
    color: var(--outline-variant)
}

.bg-primary\/5 {
    background-color: color-mix(in srgb, var(--primary) 5%, transparent)
}

.bg-primary\/10 {
    background-color: color-mix(in srgb, var(--primary) 10%, transparent)
}

.bg-primary\/15 {
    background-color: color-mix(in srgb, var(--primary) 15%, transparent)
}

.bg-primary\/20 {
    background-color: color-mix(in srgb, var(--primary) 20%, transparent)
}

.bg-primary\/30 {
    background-color: color-mix(in srgb, var(--primary) 30%, transparent)
}

.bg-primary\/40 {
    background-color: color-mix(in srgb, var(--primary) 40%, transparent)
}

.bg-primary\/80 {
    background-color: color-mix(in srgb, var(--primary) 80%, transparent)
}

.bg-primary\/90 {
    background-color: color-mix(in srgb, var(--primary) 90%, transparent)
}

.bg-primary\/95 {
    background-color: color-mix(in srgb, var(--primary) 95%, transparent)
}

.bg-primary-container\/5 {
    background-color: color-mix(in srgb, var(--primary-container) 5%, transparent)
}

.bg-primary-container\/10 {
    background-color: color-mix(in srgb, var(--primary-container) 10%, transparent)
}

.bg-primary-container\/15 {
    background-color: color-mix(in srgb, var(--primary-container) 15%, transparent)
}

.bg-primary-container\/20 {
    background-color: color-mix(in srgb, var(--primary-container) 20%, transparent)
}

.bg-primary-container\/30 {
    background-color: color-mix(in srgb, var(--primary-container) 30%, transparent)
}

.bg-primary-container\/40 {
    background-color: color-mix(in srgb, var(--primary-container) 40%, transparent)
}

.bg-primary-container\/80 {
    background-color: color-mix(in srgb, var(--primary-container) 80%, transparent)
}

.bg-primary-container\/90 {
    background-color: color-mix(in srgb, var(--primary-container) 90%, transparent)
}

.bg-primary-container\/95 {
    background-color: color-mix(in srgb, var(--primary-container) 95%, transparent)
}

.bg-primary-fixed\/20 {
    background-color: color-mix(in srgb, var(--primary-fixed) 20%, transparent)
}

.bg-primary-fixed\/30 {
    background-color: color-mix(in srgb, var(--primary-fixed) 30%, transparent)
}

.bg-secondary-container\/20 {
    background-color: color-mix(in srgb, var(--secondary-container) 20%, transparent)
}

.bg-secondary-container\/30 {
    background-color: color-mix(in srgb, var(--secondary-container) 30%, transparent)
}

.bg-tertiary\/5 {
    background-color: color-mix(in srgb, var(--tertiary) 5%, transparent)
}

.bg-tertiary\/10 {
    background-color: color-mix(in srgb, var(--tertiary) 10%, transparent)
}

.bg-tertiary\/15 {
    background-color: color-mix(in srgb, var(--tertiary) 15%, transparent)
}

.bg-tertiary\/20 {
    background-color: color-mix(in srgb, var(--tertiary) 20%, transparent)
}

.bg-tertiary\/30 {
    background-color: color-mix(in srgb, var(--tertiary) 30%, transparent)
}

.bg-tertiary\/40 {
    background-color: color-mix(in srgb, var(--tertiary) 40%, transparent)
}

.bg-tertiary\/80 {
    background-color: color-mix(in srgb, var(--tertiary) 80%, transparent)
}

.bg-tertiary\/90 {
    background-color: color-mix(in srgb, var(--tertiary) 90%, transparent)
}

.bg-tertiary\/95 {
    background-color: color-mix(in srgb, var(--tertiary) 95%, transparent)
}

.bg-tertiary-container\/5 {
    background-color: color-mix(in srgb, var(--tertiary-container) 5%, transparent)
}

.bg-tertiary-container\/10 {
    background-color: color-mix(in srgb, var(--tertiary-container) 10%, transparent)
}

.bg-tertiary-container\/15 {
    background-color: color-mix(in srgb, var(--tertiary-container) 15%, transparent)
}

.bg-tertiary-container\/20 {
    background-color: color-mix(in srgb, var(--tertiary-container) 20%, transparent)
}

.bg-tertiary-container\/30 {
    background-color: color-mix(in srgb, var(--tertiary-container) 30%, transparent)
}

.bg-tertiary-container\/40 {
    background-color: color-mix(in srgb, var(--tertiary-container) 40%, transparent)
}

.bg-tertiary-container\/80 {
    background-color: color-mix(in srgb, var(--tertiary-container) 80%, transparent)
}

.bg-tertiary-container\/90 {
    background-color: color-mix(in srgb, var(--tertiary-container) 90%, transparent)
}

.bg-tertiary-container\/95 {
    background-color: color-mix(in srgb, var(--tertiary-container) 95%, transparent)
}

.bg-tertiary-fixed\/5 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 5%, transparent)
}

.bg-tertiary-fixed\/10 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 10%, transparent)
}

.bg-tertiary-fixed\/15 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 15%, transparent)
}

.bg-tertiary-fixed\/20 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 20%, transparent)
}

.bg-tertiary-fixed\/30 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 30%, transparent)
}

.bg-tertiary-fixed\/40 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 40%, transparent)
}

.bg-tertiary-fixed\/80 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 80%, transparent)
}

.bg-tertiary-fixed\/90 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 90%, transparent)
}

.bg-tertiary-fixed\/95 {
    background-color: color-mix(in srgb, var(--tertiary-fixed) 95%, transparent)
}

.bg-surface\/5 {
    background-color: color-mix(in srgb, var(--surface) 5%, transparent)
}

.bg-surface\/10 {
    background-color: color-mix(in srgb, var(--surface) 10%, transparent)
}

.bg-surface\/15 {
    background-color: color-mix(in srgb, var(--surface) 15%, transparent)
}

.bg-surface\/20 {
    background-color: color-mix(in srgb, var(--surface) 20%, transparent)
}

.bg-surface\/30 {
    background-color: color-mix(in srgb, var(--surface) 30%, transparent)
}

.bg-surface\/40 {
    background-color: color-mix(in srgb, var(--surface) 40%, transparent)
}

.bg-surface\/80 {
    background-color: color-mix(in srgb, var(--surface) 80%, transparent)
}

.bg-surface\/90 {
    background-color: color-mix(in srgb, var(--surface) 90%, transparent)
}

.bg-surface\/95 {
    background-color: color-mix(in srgb, var(--surface) 95%, transparent)
}

.from-\[\#1b1c1c\]\/40 {}

.from-\[\#1b1c1c\]\/70 {}

.from-\[\#1b1c1c\]\/80 {}

.from-\[\#1b1c1c\]\/90 {}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.grid {
    display: grid
}

.hidden {
    display: none
}

.relative {
    position: relative
}

.absolute {
    position: absolute
}

.fixed {
    position: fixed
}

.sticky {
    position: sticky
}

.overflow-hidden {
    overflow: hidden
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-auto {
    overflow-x: auto
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-grow {
    flex-grow: 1
}

.flex-1 {
    flex: 1 1 0%
}

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

.items-center {
    align-items: center
}

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

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

.items-stretch {
    align-items: stretch
}

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

.justify-center {
    justify-content: center
}

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

.text-center {
    text-align: center
}

.text-left {
    text-align: left
}

.text-right {
    text-align: right
}

.text-justify {
    text-align: justify
}

.uppercase {
    text-transform: uppercase
}

.italic {
    font-style: italic
}

.not-italic {
    font-style: normal
}

.font-bold {
    font-weight: 700
}

.font-semibold {
    font-weight: 600
}

.font-medium {
    font-weight: 500
}

.font-light {
    font-weight: 300
}

.font-serif {
    font-family: Georgia, serif
}

.font-sans {
    font-family: var(--font-body)
}

.tracking-tight {
    letter-spacing: -.02em
}

.tracking-wide {
    letter-spacing: .04em
}

.tracking-wider {
    letter-spacing: .08em
}

.tracking-widest {
    letter-spacing: .12em
}

.leading-none {
    line-height: 1
}

.leading-relaxed {
    line-height: 1.625
}

.object-cover {
    object-fit: cover
}

.object-contain {
    object-fit: contain
}

.h-full {
    height: 100%
}

.h-auto {
    height: auto
}

.w-full {
    width: 100%
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.pointer-events-none {
    pointer-events: none
}

.select-none {
    -webkit-user-select: none;
    user-select: none;
}

.shrink-0 {
    flex-shrink: 0
}

.cursor-pointer {
    cursor: pointer
}

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

.transform {
    transform: translateZ(0)
}

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.mix-blend-multiply {
    mix-blend-mode: multiply
}

.drop-shadow-sm {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .08))
}

.drop-shadow-lg {
    filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .18))
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility
}

.w-0.5 {
    width: 0.125rem
}

.h-0.5 {
    height: 0.125rem
}

.w-1 {
    width: 0.25rem
}

.h-1 {
    height: 0.25rem
}

.w-2.5 {
    width: 0.625rem
}

.h-2.5 {
    height: 0.625rem
}

.w-3 {
    width: 0.75rem
}

.h-3 {
    height: 0.75rem
}

.w-8 {
    width: 2rem
}

.h-8 {
    height: 2rem
}

.w-9 {
    width: 2.25rem
}

.h-9 {
    height: 2.25rem
}

.w-10 {
    width: 2.5rem
}

.h-10 {
    height: 2.5rem
}

.w-12 {
    width: 3rem
}

.h-12 {
    height: 3rem
}

.w-14 {
    width: 3.5rem
}

.h-14 {
    height: 3.5rem
}

.w-16 {
    width: 4rem
}

.h-16 {
    height: 4rem
}

.w-20 {
    width: 5rem
}

.w-48 {
    width: 12rem
}

.h-48 {
    height: 12rem
}

.w-56 {
    width: 14rem
}

.h-56 {
    height: 14rem
}

.w-64 {
    width: 16rem
}

.h-64 {
    height: 16rem
}

.w-72 {
    width: 18rem
}

.h-72 {
    height: 18rem
}

.w-96 {
    width: 24rem
}

.h-96 {
    height: 24rem
}

.w-1 {
    width: .25rem
}

.w-2\.5 {
    width: .625rem
}

.w-3 {
    width: .75rem
}

.w-8 {
    width: 2rem
}

.w-9 {
    width: 2.25rem
}

.w-10 {
    width: 2.5rem
}

.w-12 {
    width: 3rem
}

.w-16 {
    width: 4rem
}

.w-20 {
    width: 5rem
}

.w-96 {
    width: 24rem
}

.h-0\.5 {
    height: .125rem
}

.h-1 {
    height: .25rem
}

.h-2\.5 {
    height: .625rem
}

.h-3 {
    height: .75rem
}

.h-8 {
    height: 2rem
}

.h-9 {
    height: 2.25rem
}

.h-10 {
    height: 2.5rem
}

.h-12 {
    height: 3rem
}

.h-20 {
    height: 5rem
}

.h-48 {
    height: 12rem
}

.h-56 {
    height: 14rem
}

.h-64 {
    height: 16rem
}

.h-72 {
    height: 18rem
}

.h-96 {
    height: 24rem
}

.max-w-xs {
    max-width: 20rem
}

.max-w-xl {
    max-width: 36rem
}

.max-w-2xl {
    max-width: 42rem
}

.max-w-3xl {
    max-width: 48rem
}

.max-w-4xl {
    max-width: 56rem
}

.max-w-5xl {
    max-width: 62rem
}

.max-w-6xl {
    max-width: 72rem
}

.max-w-7xl {
    max-width: 80rem
}

.max-h-20 {
    max-height: 5rem
}

.max-h-\[440px\] {
    max-height: 440px
}

.max-h-\[90vh\] {
    max-height: 90vh
}

.min-h-\[380px\] {
    min-height: 380px
}

.min-h-\[460px\] {
    min-height: 460px
}

.min-h-\[92vh\] {
    min-height: 92vh
}

.p-0 {
    padding: 0
}

.px-0 {
    padding-left: 0;
    padding-right: 0
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.pt-0 {
    padding-top: 0
}

.pb-0 {
    padding-bottom: 0
}

.pl-0 {
    padding-left: 0
}

.pr-0 {
    padding-right: 0
}

.p-0\.5 {
    padding: .125rem
}

.px-0\.5 {
    padding-left: .125rem;
    padding-right: .125rem
}

.py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem
}

.pt-0\.5 {
    padding-top: .125rem
}

.pb-0\.5 {
    padding-bottom: .125rem
}

.pl-0\.5 {
    padding-left: .125rem
}

.pr-0\.5 {
    padding-right: .125rem
}

.p-1 {
    padding: .25rem
}

.p-1\.5 {
    padding: .75rem
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-1\.5 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.pt-1 {
    padding-top: .25rem
}

.pb-1 {
    padding-bottom: .25rem
}

.pl-1 {
    padding-left: .25rem
}

.pr-1 {
    padding-right: .25rem
}

.p-2 {
    padding: .5rem
}

.px-2 {
    padding-left: .5rem;
    padding-right: .5rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.pt-2 {
    padding-top: .5rem
}

.pb-2 {
    padding-bottom: .5rem
}

.pl-2 {
    padding-left: .5rem
}

.pr-2 {
    padding-right: .5rem
}

.p-2\.5 {
    padding: .625rem
}

.px-2\.5 {
    padding-left: .625rem;
    padding-right: .625rem
}

.py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem
}

.pt-2\.5 {
    padding-top: .625rem
}

.pb-2\.5 {
    padding-bottom: .625rem
}

.pl-2\.5 {
    padding-left: .625rem
}

.pr-2\.5 {
    padding-right: .625rem
}

.p-3 {
    padding: .75rem
}

.px-3 {
    padding-left: .75rem;
    padding-right: .75rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.pt-3 {
    padding-top: .75rem
}

.pb-3 {
    padding-bottom: .75rem
}

.pl-3 {
    padding-left: .75rem
}

.pr-3 {
    padding-right: .75rem
}

.p-4 {
    padding: 1rem
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.pt-4 {
    padding-top: 1rem
}

.pb-4 {
    padding-bottom: 1rem
}

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

.pr-4 {
    padding-right: 1rem
}

.p-space-xs {
    padding: var(--space-xs)
}

.px-space-xs {
    padding-left: var(--space-xs);
    padding-right: var(--space-xs)
}

.py-space-xs {
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs)
}

.pt-space-xs {
    padding-top: var(--space-xs)
}

.pb-space-xs {
    padding-bottom: var(--space-xs)
}

.pl-space-xs {
    padding-left: var(--space-xs)
}

.pr-space-xs {
    padding-right: var(--space-xs)
}

.p-space-sm {
    padding: var(--space-sm)
}

.px-space-sm {
    padding-left: var(--space-sm);
    padding-right: var(--space-sm)
}

.py-space-sm {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm)
}

.pt-space-sm {
    padding-top: var(--space-sm)
}

.pb-space-sm {
    padding-bottom: var(--space-sm)
}

.pl-space-sm {
    padding-left: var(--space-sm)
}

.pr-space-sm {
    padding-right: var(--space-sm)
}

.p-space-md {
    padding: var(--space-md)
}

.px-space-md {
    padding-left: var(--space-md);
    padding-right: var(--space-md)
}

.py-space-md {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md)
}

.pt-space-md {
    padding-top: var(--space-md)
}

.pb-space-md {
    padding-bottom: var(--space-md)
}

.pl-space-md {
    padding-left: var(--space-md)
}

.pr-space-md {
    padding-right: var(--space-md)
}

.p-space-lg {
    padding: var(--space-lg)
}

.px-space-lg {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg)
}

.py-space-lg {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg)
}

.pt-space-lg {
    padding-top: var(--space-lg)
}

.pb-space-lg {
    padding-bottom: var(--space-lg)
}

.pl-space-lg {
    padding-left: var(--space-lg)
}

.pr-space-lg {
    padding-right: var(--space-lg)
}

.p-space-xl {
    padding: var(--space-xl)
}

.px-space-xl {
    padding-left: var(--space-xl);
    padding-right: var(--space-xl)
}

.py-space-xl {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl)
}

.pt-space-xl {
    padding-top: var(--space-xl)
}

.pb-space-xl {
    padding-bottom: var(--space-xl)
}

.pl-space-xl {
    padding-left: var(--space-xl)
}

.pr-space-xl {
    padding-right: var(--space-xl)
}

.p-gutter-mobile {
    padding: var(--gutter-mobile)
}

.px-gutter-mobile {
    padding-left: var(--gutter-mobile);
    padding-right: var(--gutter-mobile)
}

.py-gutter-mobile {
    padding-top: var(--gutter-mobile);
    padding-bottom: var(--gutter-mobile)
}

.pt-gutter-mobile {
    padding-top: var(--gutter-mobile)
}

.pb-gutter-mobile {
    padding-bottom: var(--gutter-mobile)
}

.pl-gutter-mobile {
    padding-left: var(--gutter-mobile)
}

.pr-gutter-mobile {
    padding-right: var(--gutter-mobile)
}

.p-margin {
    padding: var(--margin)
}

.px-margin {
    padding-left: var(--margin);
    padding-right: var(--margin)
}

.py-margin {
    padding-top: var(--margin);
    padding-bottom: var(--margin)
}

.pt-margin {
    padding-top: var(--margin)
}

.pb-margin {
    padding-bottom: var(--margin)
}

.pl-margin {
    padding-left: var(--margin)
}

.pr-margin {
    padding-right: var(--margin)
}

.p-gutter {
    padding: var(--gutter)
}

.px-gutter {
    padding-left: var(--gutter);
    padding-right: var(--gutter)
}

.py-gutter {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter)
}

.pt-gutter {
    padding-top: var(--gutter)
}

.pb-gutter {
    padding-bottom: var(--gutter)
}

.pl-gutter {
    padding-left: var(--gutter)
}

.pr-gutter {
    padding-right: var(--gutter)
}

.m-0 {
    margin: 0
}

.mt-1 {
    margin-top: .25rem
}

.mb-1 {
    margin-bottom: .25rem
}

.my-0 {
    margin-top: 0;
    margin-bottom: 0
}

.my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem
}

.mr-1 {
    margin-right: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mb-2 {
    margin-bottom: .5rem
}

.my-2 {
    margin-top: .5rem;
    margin-bottom: .5rem
}

.mr-2 {
    margin-right: .5rem
}

.mt-3 {
    margin-top: .75rem
}

.mb-3 {
    margin-bottom: .75rem
}

.my-3 {
    margin-top: .75rem;
    margin-bottom: .75rem
}

.mr-3 {
    margin-right: .75rem
}

.mt-4 {
    margin-top: 1rem
}

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

.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.mr-4 {
    margin-right: 1rem
}

.mt-5 {
    margin-top: 1.5rem
}

.mb-5 {
    margin-bottom: 1.5rem
}

.my-5 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem
}

.mr-5 {
    margin-right: 1.5rem
}

.mt-space-xs {
    margin-top: var(--space-xs)
}

.mb-space-xs {
    margin-bottom: var(--space-xs)
}

.my-space-xs {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-xs)
}

.mr-space-xs {
    margin-right: var(--space-xs)
}

.mt-space-sm {
    margin-top: var(--space-sm)
}

.mb-space-sm {
    margin-bottom: var(--space-sm)
}

.my-space-sm {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm)
}

.mr-space-sm {
    margin-right: var(--space-sm)
}

.mt-space-md {
    margin-top: var(--space-md)
}

.mb-space-md {
    margin-bottom: var(--space-md)
}

.my-space-md {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md)
}

.mr-space-md {
    margin-right: var(--space-md)
}

.mt-space-lg {
    margin-top: var(--space-lg)
}

.mb-space-lg {
    margin-bottom: var(--space-lg)
}

.my-space-lg {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg)
}

.mr-space-lg {
    margin-right: var(--space-lg)
}

.mt-space-xl {
    margin-top: var(--space-xl)
}

.mb-space-xl {
    margin-bottom: var(--space-xl)
}

.my-space-xl {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-xl)
}

.mr-space-xl {
    margin-right: var(--space-xl)
}

.mt-0 {
    margin-top: 0
}

.mt-0\.5 {
    margin-top: .125rem
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mb-1 {
    margin-bottom: .25rem
}

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

.mr-2 {
    margin-right: .5rem
}

.mx-1 {
    margin-left: .25rem;
    margin-right: .25rem
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.pt-0 {
    padding-top: 0
}

.pt-20 {
    padding-top: 5rem
}

.pt-28 {
    padding-top: 7rem
}

.pb-20 {
    padding-bottom: 5rem
}

.pb-space-sm {
    padding-bottom: var(--space-sm)
}

.pb-space-lg {
    padding-bottom: var(--space-lg)
}

.pr-space-md {
    padding-right: var(--space-md)
}

.gap-1 {
    gap: .25rem
}

.gap-1\.5 {
    gap: .375rem
}

.gap-2 {
    gap: .5rem
}

.gap-space-xs {
    gap: var(--space-xs)
}

.gap-space-sm {
    gap: var(--space-sm)
}

.gap-space-md {
    gap: var(--space-md)
}

.gap-gutter {
    gap: var(--gutter)
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr))
}

.lg\:col-span-1 {}

.lg\:col-span-2 {}

.lg\:col-span-3 {}

.lg\:col-span-4 {}

.lg\:col-span-5 {}

.lg\:col-span-6 {}

.lg\:col-span-7 {}

.lg\:col-span-8 {}

.font-headline-xl,
.font-headline-md,
.font-headline-sm,
.font-headline-xl,
.font-display-lg {
    font-family: var(--font-heading)
}

.font-label-eyebrow,
.font-label-md,
.font-label-sm,
.font-body-md,
.font-body-sm {
    font-family: var(--font-body)
}

.text-headline-xl {
    font-size: 40px;
    line-height: 48px;
    font-weight: 500;
    letter-spacing: -.01em
}

.text-headline-md {
    font-size: 26px;
    line-height: 34px;
    font-weight: 500
}

.text-headline-sm {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600
}

.text-headline-xs {
    font-size: 14px;
    line-height: 25px;
    font-weight: 600
}

.text-body-lg {
    font-size: 18px;
    line-height: 28px
}

.text-body-md {
    font-size: 16px;
    line-height: 24px
}

.text-body-sm {
    font-size: 14px;
    line-height: 20px
}

.text-body-xs {
    font-size: 12px;
    line-height: 16px
}

.text-label-md {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: .01em
}

.text-label-sm {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em
}

.text-label-xs {
    font-size: 10px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em
}

.text-label-eyebrow {
    font-size: 11px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .12em
}

.text-display-lg {
    font-size: 56px;
    line-height: 64px;
    font-weight: 600;
    letter-spacing: -.02em
}

.text-xs {
    font-size: 12px
}

.text-sm {
    font-size: 14px
}

.text-base {
    font-size: 16px
}

.text-lg {
    font-size: 18px
}

.text-2xl {
    font-size: 24px
}

.text-3xl {
    font-size: 30px
}

.text-5xl {
    font-size: 48px
}

.text-\[18px\] {
    font-size: 18px
}

.text-\[20px\] {
    font-size: 20px
}

.text-\[24px\] {
    font-size: 24px
}

.text-\[28px\] {
    font-size: 28px
}

.text-\[110px\] {
    font-size: 110px
}

.border {
    border: 1px solid var(--outline-variant)
}

.border-2 {
    border-width: 2px
}

.border-b {
    border-bottom: 1px solid var(--outline-variant)
}

.border-t {
    border-top: 1px solid var(--outline-variant)
}

.border-t-2 {
    border-top: 2px solid var(--tertiary-container)
}

.border-l-4 {
    border-left: 4px solid var(--primary-container)
}

.border-primary {
    border-color: var(--primary)
}

.border-primary-container {
    border-color: var(--primary-container)
}

.border-surface {
    border-color: var(--surface)
}

.border-surface-container-high {
    border-color: var(--surface-high)
}

.border-tertiary-container {
    border-color: var(--tertiary-container)
}

.rounded {
    border-radius: .125rem
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-xl {
    border-radius: .75rem
}

.rounded-2xl {
    border-radius: 1rem
}

.rounded-full {
    border-radius: 9999px
}

.shadow-sm {
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06)
}

.shadow-md {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08)
}

.shadow-lg {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .10)
}

.shadow-xl {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12)
}

.shadow-2xl {
    box-shadow: 0 25px 50px rgba(0, 0, 0, .22)
}

.shadow-inner {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .08)
}

.inset-0 {
    inset: 0
}

.top-0 {
    top: 0
}

.top-1\/2 {
    top: 50%
}

.top-3 {
    top: .75rem
}

.top-4 {
    top: 1rem
}

.top-20 {
    top: 5rem
}

.bottom-0 {
    bottom: 0
}

.bottom-2 {
    bottom: .5rem
}

.bottom-3 {
    bottom: .75rem
}

.bottom-4 {
    bottom: 1rem
}

.left-0 {
    left: 0
}

.left-1\/2 {
    left: 50%
}

.left-2 {
    left: .5rem
}

.left-3 {
    left: .75rem
}

.left-6 {
    left: 1.5rem
}

.right-0 {
    right: 0
}

.right-2 {
    right: .5rem
}

.right-3 {
    right: .75rem
}

.right-4 {
    right: 1rem
}

.right-6 {
    right: 1.5rem
}

.-mt-8 {
    margin-top: -2rem
}

.-mt-10 {
    margin-top: -2.5rem
}

.-mt-20 {
    margin-top: -5rem
}

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

.-translate-x-1\/2 {
    transform: translateX(-50%)
}

.-translate-y-1\/2 {
    transform: translateY(-50%)
}

.transition-all,
.transition-colors,
.transition-opacity,
.transition-transform {
    transition: all .3s ease
}

.duration-200 {
    transition-duration: .2s
}

.duration-300 {
    transition-duration: .3s
}

.duration-500 {
    transition-duration: .5s
}

.opacity-80 {
    opacity: .8
}

.opacity-90 {
    opacity: .9
}

.group:hover .group-hover\:scale-105 {
    transform: scale(1.05)
}

.group:hover .group-hover\:scale-110 {
    transform: scale(1.1)
}

.group:hover .group-hover\:opacity-95 {
    opacity: .95
}

.group:hover .group-hover\:text-primary-container {
    color: var(--primary-container)
}

.hover\:text-surface:hover {
    color: var(--surface)
}

.hover\:bg-primary:hover {
    background: var(--primary)
}

.hover\:bg-primary-container:hover {
    background: var(--primary-container)
}

.hover\:bg-primary-light:hover {
    background: var(--primary-light)
}

.hover\:bg-opposite:hover {
    background: var(--opposite)
}

.hover\:bg-surface-container-low:hover {
    background: var(--surface-low)
}

.hover\:bg-surface-container:hover {
    background: var(--surface-container)
}

.hover\:bg-surface-variant:hover {
    background: var(--surface-variant)
}

.hover\:bg-surface\/20:hover {
    background: rgba(255, 255, 255, .2)
}

.hover\:bg-tertiary:hover {
    background: var(--tertiary)
}

.hover\:bg-tertiary-container\/30:hover {
    background: color-mix(in srgb, var(--tertiary-container) 30%, transparent)
}

.hover\:text-primary:hover {
    color: var(--primary)
}

.hover\:text-on-primary:hover {
    color: #fff
}

.hover\:text-tertiary-fixed:hover {
    color: var(--tertiary-fixed)
}

.hover\:underline:hover {
    text-decoration: underline
}

.hover\:scale-110:hover {
    transform: scale(1.1)
}

.hover\:-translate-y-0\.5:hover {
    transform: translateY(-2px)
}

.hover\:-translate-y-1:hover {
    transform: translateY(-4px)
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .12)
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: center
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--gradient-from, transparent), var(--gradient-to, transparent))
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--gradient-from, transparent), var(--gradient-to, transparent))
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--gradient-from, transparent), var(--gradient-to, transparent))
}

.from-transparent {
    --gradient-from: transparent
}

.to-transparent {
    --gradient-to: transparent
}

.from-primary {
    --gradient-from: var(--primary)
}

.from-primary-container {
    --gradient-from: var(--primary-container)
}

.to-primary-container {
    --gradient-to: var(--primary-container)
}

.via-tertiary-container {
    --gradient-mid: var(--tertiary-container)
}

.via-primary {
    --gradient-mid: var(--primary)
}

.from-tertiary-container {
    --gradient-from: var(--tertiary-container)
}

.to-tertiary-container {
    --gradient-to: var(--tertiary-container)
}

.via-primary\/50 {
    --gradient-mid: color-mix(in srgb, var(--primary) 50%, transparent)
}

.bg-\[\#1a0107\]\/80 {
    background: rgba(26, 1, 7, .8)
}

.from-\[\#1a0107\] {
    --gradient-from: #1a0107
}

.to-\[\#240007\]\/75 {
    --gradient-to: rgba(36, 0, 7, .75)
}

.to-\[\#120004\]\/90 {
    --gradient-to: rgba(18, 0, 4, .9)
}

.via-\[\#1a0107\]\/40 {
    --gradient-mid: rgba(26, 1, 7, .4)
}

.container {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 var(--gutter-mobile)
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50
}

.language-btn {
    transition: .4s
}

.language-btn.active {
    background: var(--primary-container);
    color: #fff
}

.modal-open {
    overflow: hidden
}

.gallery-item[hidden] {
    display: none !important
}

.gallery-tab {
    cursor: pointer
}

.gallery-tab.active {
    background: var(--primary-container);
    color: #fff
}

.stop-node span:first-child {
    transition: .2s
}

.is-open {
    display: flex !important
}

.xl\:hidden {
    display: block;
}

@media(min-width:640px) {
    .sm\:block {
        display: block
    }

    .sm\:inline-flex {
        display: inline-flex
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .sm\:h-80 {
        height: 20rem
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:flex-wrap {
        flex-wrap: wrap
    }

    .sm\:items-center {
        align-items: center
    }

    .sm\:text-headline-xs {
        font-size: 18px;
        line-height: 28px
    }

    .sm\:text-label-sm {
        font-size: 10px;
        line-height: 16px
    }
}

@media(min-width:768px) {
    .md\:block {
        display: block
    }

    .md\:flex {
        display: flex
    }

    .md\:flex-row {
        flex-direction: row
    }
    
    .md\:flex-col {
        flex-direction: column
    }
    
    .md\:items-start  {
        align-items: flex-start
    }

    .md\:flex-row-reverse {
        flex-direction: row-reverse
    }

    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .md\:col-span-2 {
        grid-column: span 2/span 2
    }

    .md\:divide-x>*+* {
        border-left: 1px solid var(--surface-high)
    }

    .md\:divide-y-0>*+* {
        border-top: 0
    }

    .md\:justify-end {
        justify-content: flex-end
    }

    .md\:justify-start {
        justify-content: flex-start
    }

    .md\:max-w-sm {
        max-width: 24rem
    }

    .md\:mb-0 {
        margin-bottom: 0
    }

    .md\:pl-space-xl {
        padding-left: var(--space-xl)
    }

    .md\:pr-space-xl {
        padding-right: var(--space-xl)
    }

    .md\:pt-space-sm {
        padding-top: var(--space-sm)
    }

    .md\:text-left {
        text-align: left
    }

    .md\:text-right {
        text-align: right
    }

    .md\:w-32 {
        width: 8rem;
    }

    .md\:w-1\/2 {
        width: 50%
    }

    .md\:divide-y-0 {
        border-top: 0
    }
    
    .md\:text-body-lg {
        font-size: 18px;
        line-height: 28px
    }

    .md\:text-headline-xl {
        font-size: 40px;
        line-height: 48px
    }
    
    .md\:text-headline-md {
        font-size: 26px;
        line-height: 34px
    }
    
    .md\:text-headline-sm {
        font-size: 20px;
        line-height: 28px
    }
    
    .md\:text-headline-xs {
        font-size: 18px;
        line-height: 28px
    }
    
    .md\:text-body-md {
        font-size: 16px;
        line-height: 24px
    }
    
    .md\:text-label-sm {
        font-size: 12px;
        line-height: 16px
    }

    .md\:text-label-md {
        font-size: 14px;
        line-height: 20px
    }

    .md\:text-\[160px\] {
        font-size: 160px
    }

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }
}

@media(min-width:1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr))
    }

    .lg\:col-span-1 {
        grid-column: span 1/span 1
    }

    .lg\:col-span-2 {
        grid-column: span 2/span 2
    }

    .lg\:col-span-3 {
        grid-column: span 3/span 3
    }

    .lg\:col-span-4 {
        grid-column: span 4/span 4
    }

    .lg\:col-span-5 {
        grid-column: span 5/span 5
    }

    .lg\:col-span-6 {
        grid-column: span 6/span 6
    }

    .lg\:col-span-7 {
        grid-column: span 7/span 7
    }
    
    .lg\:col-span-8 {
        grid-column: span 8/span 8
    }

    .lg\:gap-gutter {
        gap: var(--gutter)
    }

    .lg\:p-space-lg {
        padding: var(--space-lg)
    }

    .lg\:p-margin {
        padding: var(--margin)
    }

    .lg\:px-margin {
        padding-left: var(--margin);
        padding-right: var(--margin)
    }

    .lg\:text-display-lg {
        font-size: 56px;
        line-height: 64px
    }
    
    .lg\:text-headline-sm {
        font-size: 20px;
        line-height: 28px
    }

    .lg\:font-display-lg {
        font-family: var(--font-heading)
    }

    .lg\:text-label-sm {
        font-size: 14px;
        line-height: 20px
    }

    .container {
        padding-left: var(--margin);
        padding-right: var(--margin)
    }
}

@media(min-width:1280px) {
    .xl\:flex {
        display: flex
    }

    .xl\:hidden {
        display: none
    }
}

@media(max-width:1279px) {
    header > div > nav.xl\:flex {
        display: none !important
    }
}

@media(max-width:767px) {
    .timeline-line {
        display: none
    }

    .container {
        padding-left: var(--gutter-mobile);
        padding-right: var(--gutter-mobile)
    }

    .text-headline-xl {
        font-size: 30px;
        line-height: 38px
    }

    .text-display-lg {
        font-size: 38px;
        line-height: 44px
    }
}

.divide-y>*+* {
    border-top: 1px solid var(--surface-high)
}

.space-y-1>*+* {
    margin-top: .25rem
}

.space-y-1\.5>*+* {
    margin-top: .375rem
}

.space-y-space-sm>*+* {
    margin-top: var(--space-sm)
}

.space-y-space-md>*+* {
    margin-top: var(--space-md)
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden
}

header {
    background: rgba(252, 249, 248, .92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    box-shadow: 0 4px 20px -2px rgba(142, 2, 37, .06)
}

main {
    padding-top: 5rem
}

.hero-bg {
    position: absolute;
    inset: 0
}

.hero-content {
    position: relative;
    z-index: 10
}

.map-section {}

.modal {
    display: none
}

.gallery-item {
    transition: opacity .25s ease, transform .25s ease
}

.route-map {
    width: 100%;
    height: auto;
    max-height: 440px
}

.site-footer {
    background: var(--primary-container);
    color: #fff
}

/** CSS PARA EL ENTRADA Y SALIDA */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/** CSS PARA ENTRADA DE DERECHA A IZQUIERDA */
.reveal-left {
    opacity: 0;
    transform: translateX(48px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.transition-delay {
    transition-delay: 0.6s;
}

.transition-delay-1\/2 {
    transition-delay: 0.3s;
}

.transition-delay-1\/4 {
    transition-delay: 0.15s;
}

.transition-delay-1\/6 {
    transition-delay: 0.1s;
}

/* ==========================================================
   MENU / HEADER MOBILE
   Equivalentes de utilidades Tailwind usadas en el menú
   ========================================================== */

.top-full {
    top: 100%;
}

.z-\[-1\] {
    z-index: -1;
}


/* ==========================================================
   TAMAÑO
   ========================================================== */

.max-h-\[calc\(100vh-5rem\)\] {
    max-height: calc(100vh - 5rem);
}


/* bg-black/30 */

.bg-black\/30 {
    background: rgba(0, 0, 0, 0.30);
}

/* ==========================================================
   BACKDROP
   ========================================================== */

.backdrop-blur-xl {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.backdrop-blur-md {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}


/* ==========================================================
   TIPOGRAFÍA / CURSOR
   ========================================================== */

.list-none {
    list-style: none;
}


/* ==========================================================
   TRANSICIONES
   ========================================================== */

.transition-colors {
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

/* ==========================================================
   GROUP OPEN
   Para:
   group-open:rotate-180
   ========================================================== */

.group[open] .group-open\:rotate-180 {
    transform: rotate(180deg);
}


/* ==========================================================
   MENU ICON OPEN / CLOSE
   Estas NO son clases Tailwind.
   Son clases personalizadas de tu HTML.
   ========================================================== */

.menu-icon-open {
    display: inline-block;
}

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

#mobile-menu-toggle {
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

#mobile-menu summary {
    list-style: none;
}

#mobile-menu summary::-webkit-details-marker {
    display: none;
}

/* Cuando el botón está abierto */

#mobile-menu-toggle[aria-expanded="true"] .menu-icon-open {
    display: none;
}

#mobile-menu-toggle[aria-expanded="true"] .menu-icon-close {
    display: inline-block;
}


/* ==========================================================
   CONTROL DEL MENU MOBILE
   ========================================================== */

/* Estado cerrado por defecto */
#mobile-menu {
    display: none;
}

/* JS quita/pone la clase .hidden — .hidden ya existe como utilidad global,
   pero la forzamos aquí con !important para que nada más la pise */
#mobile-menu:not(.hidden) {
    display: block !important;
}

/* En desktop, el menú mobile nunca debe mostrarse, pase lo que pase */
@media (min-width: 1280px) {
    #mobile-menu {
        display: none !important;
    }
}


/* ==========================================================
   BLOQUEO DE SCROLL
   ========================================================== */

body.no-scroll {
    overflow: hidden;
}