@font-face {
  font-family: 'Poppins';
  src: url(../assets/fonts/Poppins/Poppins-Light.woff2) format('woff2'), url(../assets/fonts/Poppins/Poppins-Light.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Poppins';
  src: url(../assets/fonts/Poppins/Poppins-Regular.woff2) format('woff2'), url(../assets/fonts/Poppins/Poppins-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Poppins';
  src: url(../assets/fonts/Poppins/Poppins-Medium.woff2) format('woff2'), url(../assets/fonts/Poppins/Poppins-Medium.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Poppins';
  src: url(../assets/fonts/Poppins/Poppins-SemiBold.woff2) format('woff2'), url(../assets/fonts/Poppins/Poppins-SemiBold.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'League Spartan';
  src: url(../assets/fonts/League_Spartan/static/LeagueSpartan-Regular.woff2) format('woff2'), url(../assets/fonts/League_Spartan/static/LeagueSpartan-Regular.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'League Spartan';
  src: url(../assets/fonts/League_Spartan/static/LeagueSpartan-SemiBold.woff2) format('woff2'), url(../assets/fonts/League_Spartan/static/LeagueSpartan-SemiBold.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'League Spartan';
  src: url(../assets/fonts/League_Spartan/static/LeagueSpartan-Bold.woff2) format('woff2'), url(../assets/fonts/League_Spartan/static/LeagueSpartan-Bold.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'League Spartan';
  src: url(../assets/fonts/League_Spartan/static/LeagueSpartan-ExtraBold.woff2) format('woff2'), url(../assets/fonts/League_Spartan/static/LeagueSpartan-ExtraBold.ttf) format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap
}

@view-transition {
  navigation: auto
}

@media (prefers-reduced-motion:reduce) {

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none
  }
}

:root {
  --color-brand: #00C0F6;
  --color-brand-hover: #00A8D8;
  --color-brand-press: #008DB6;
  --color-brand-strong: #006E96;
  --color-brand-soft: rgba(0, 192, 246, 0.08);
  --color-on-brand: #FFFFFF;
  --nav-surface: var(--color-surface);
  --nav-border: var(--color-border);
  --nav-hover-bg: var(--color-surface-2);
  --nav-hover-ink: var(--color-text-primary);
  --nav-active-bg: var(--color-brand);
  --nav-active-ink: var(--color-on-brand);
  --color-bg: #FFFFFF;
  --color-surface: #F4F7FA;
  --color-surface-2: #E7EEF4;
  --color-text-primary: #112233;
  --color-heading: #081422;
  --color-text-secondary: #33485E;
  --color-text-muted: #586E84;
  --color-text-muted-strong: #3D5268;
  --color-border: #D8E2EC;
  --color-border-strong: #768FA7;
  --color-success-strong: #047857;
  --color-accent-warm: #925400;
  --color-danger: #DC2626;
  --color-danger-strong: #B91C1C;
  --color-on-danger: #FFFFFF;
  --color-whatsapp: #25D366;
  --color-whatsapp-hover: #1EBE5D;
  --color-brand-rgb: 0 192 246;
  --color-surface-rgb: 244 247 250;
  --color-text-secondary-rgb: 51 72 94;
  --color-accent-warm-rgb: 146 84 0;
  --color-white-rgb: 255 255 255;
  --shadow-color-rgb: 10 30 50;
  --shadow-color-rgb-dark: 2 8 18;
  --shadow-card: 0 2px 8px rgb(var(--shadow-color-rgb) / .06), 0 8px 24px rgb(var(--shadow-color-rgb) / .10);
  --shadow-navbar: 0 8px 24px rgb(var(--shadow-color-rgb) / .08), 0 2px 6px rgb(var(--shadow-color-rgb) / .04);
  --color-dark-hero-start: #070D15;
  --color-dark-hero-mid: #0E1724;
  --font-primary: 'League Spartan', sans-serif;
  --font-secondary: 'Poppins', sans-serif;
  --font-mono: 'SF Mono', 'Menlo', 'Courier New', monospace;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-card: 1.5rem;
  --radius-pill: 999px;
  --radius-avatar: 50%;
  --card-media-ratio: 16 / 9;
  --space-1: .5rem;
  --space-2: .75rem;
  --space-3: 1rem;
  --space-4: 1.25rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --heading-identity-size: clamp(2.25rem, 5.5vw, 3.25rem);
  --heading-chapter-size: clamp(1.75rem, 4vw, 2.5rem);
  --heading-local-size: clamp(1.15rem, 2.2vw, 1.375rem);
  --heading-lead-gap: .625rem;
  --heading-description-gap: var(--space-2);
  --heading-content-gap: var(--space-7);
  --chapter-boundary-space: clamp(3rem, 6vw, 8rem);
  --page-end-space: var(--space-8);
  --reading-width: 68ch;
  --reading-width-narrow: 56ch;
  --text-2xs: .75rem;
  --text-xs: .8125rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: 1.625rem;
  --text-2xl: 2rem;
  --motion-instant: .1s;
  --motion-fast: .2s;
  --motion-base: .25s;
  --motion-emphasized: .35s;
  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-base: var(--motion-base) var(--ease-standard);
  --navbar-height: 64px;
  --tabbar-height: 72px;
  --fab-bottom: 1.5rem;
  --fab-right: 1.5rem;
  /* Overlay order above the tabbar (1000), below toasts (2000) and modals. */
  --z-cookie: 1010;
  --z-notification-prompt: 1020;
  --z-notification-fab: 1030;
  --z-whatsapp-fab: 1040;
  --shell-gutter: 1rem;
  --shell-safe-gutter: max(var(--shell-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --shell-pad: 1.25rem;
  --shell-pad-lg: 1.75rem;
  --shell-max: 900px;
  --shell-max-xl: 1000px;
  --shell-max-pwa: 540px;
  --btn-focus: var(--color-brand-strong);
  --btn-primary-fill: var(--color-brand);
  --btn-primary-fill-hover: var(--color-brand-hover);
  --btn-primary-fill-press: var(--color-brand-press);
  --btn-primary-on-fill: var(--color-on-brand);
  --btn-secondary-border: #fff0;
  --btn-secondary-border-hover: #fff0;
  --btn-secondary-border-press: #fff0;
  --btn-secondary-tint: var(--color-surface-2);
  --btn-secondary-tint-hover: var(--color-border);
  --btn-secondary-tint-press: var(--color-border-strong);
  --btn-disabled-bg: #E3E9EF;
  --btn-disabled-ink: #5C6B7A;
  --btn-min-height: 44px;
  --btn-pad-x: 20px;
  --btn-radius: var(--radius-pill);
  --btn-font-size: .9375rem;
  --btn-font-weight: 600;
  --btn-line-height: 1.2;
  --btn-tracking: .01em;
  --btn-gap: 8px;
  --btn-focus-width: 3px;
  --btn-focus-offset: 2px;
  --btn-press-scale: .98;
  --icon-sm: 16px;
  --icon-md: 18px;
  --icon-lg: 20px;
  --icon-fab: 24px;
  --ctrl-size-md: 44px;
  --ctrl-size-lg: 48px;
  --ctrl-size-fab: 56px
}

.icon {
  display: inline-block;
  --icon-ratio: 1.25;
  width: calc(1em * var(--icon-ratio));
  height: 1em;
  min-width: calc(var(--icon-sm) * var(--icon-ratio));
  min-height: var(--icon-sm);
  margin-inline: calc((1 - var(--icon-ratio)) / 2 * max(1em, var(--icon-sm)));
  fill: currentColor;
  flex: 0 0 auto;
  vertical-align: -.125em;
  pointer-events: none
}

.icon-spin {
  animation: iconSpin .8s linear infinite
}

@keyframes iconSpin {
  to {
    transform: rotate(360deg)
  }
}

@media (prefers-reduced-motion:reduce) {
  .icon-spin {
    animation-duration: 2.4s
  }
}

html[data-theme="dark"] {
  --color-bg: #070D15;
  --color-surface: #0E1724;
  --color-surface-rgb: 14 23 36;
  --color-surface-2: #162334;
  --color-text-primary: #E6EEF6;
  --color-heading: #F6FAFD;
  --color-text-secondary: #9CB0C4;
  --color-text-secondary-rgb: 156 176 196;
  --color-text-muted: #687E96;
  --color-text-muted-strong: #889EB6;
  --color-success-strong: #34D399;
  --color-accent-warm: #F59E0B;
  --color-accent-warm-rgb: 245 158 11;
  --color-danger: #F87171;
  --color-danger-strong: #F87171;
  --color-border: #1C2C3E;
  --color-border-strong: #3E5570;
  --color-brand-strong: #38BDF8;
  --color-brand-soft: rgba(0, 192, 246, 0.12);
  --color-on-brand: #FFFFFF;
  --nav-surface: var(--color-surface);
  --nav-border: var(--color-border);
  --nav-hover-bg: var(--color-surface-2);
  --nav-hover-ink: var(--color-text-primary);
  --nav-active-bg: var(--color-brand);
  --nav-active-ink: var(--color-on-brand);
  --shadow-card: 0 2px 8px rgb(var(--shadow-color-rgb-dark) / .60), 0 8px 24px rgb(var(--shadow-color-rgb-dark) / .25);
  --shadow-navbar: 0 10px 30px rgb(var(--shadow-color-rgb-dark) / .55), 0 2px 8px rgb(var(--shadow-color-rgb-dark) / .65);
  --btn-focus: var(--color-brand-strong);
  --btn-primary-fill: var(--color-brand);
  --btn-primary-fill-hover: #24CAFA;
  --btn-primary-fill-press: #00A8D8;
  --btn-primary-on-fill: var(--color-on-brand);
  --btn-secondary-border: var(--color-border-strong);
  --btn-secondary-border-hover: var(--color-border-strong);
  --btn-secondary-border-press: var(--color-border-strong);
  --btn-secondary-tint: #182638;
  --btn-secondary-tint-hover: #223750;
  --btn-secondary-tint-press: #2C4666;
  --btn-disabled-bg: #1A2836;
  --btn-disabled-ink: #6A7C8C
}

html[data-theme="light"] {
  --color-bg: #FFFFFF;
  --color-surface: #F4F7FA;
  --color-surface-rgb: 244 247 250;
  --color-surface-2: #E7EEF4;
  --color-text-primary: #112233;
  --color-heading: #081422;
  --color-text-secondary: #33485E;
  --color-text-secondary-rgb: 51 72 94;
  --color-text-muted: #586E84;
  --color-text-muted-strong: #3D5268;
  --color-success-strong: #047857;
  --color-brand-strong: #006E96;
  --color-brand-soft: rgba(0, 192, 246, 0.08);
  --color-on-brand: #FFFFFF;
  --color-border-strong: #768FA7;
  --color-accent-warm: #925400;
  --color-accent-warm-rgb: 146 84 0;
  --color-danger: #DC2626;
  --color-danger-strong: #B91C1C;
  --color-border: #D8E2EC;
  --nav-surface: var(--color-surface);
  --nav-border: var(--color-border);
  --nav-hover-bg: var(--color-surface-2);
  --nav-hover-ink: var(--color-text-primary);
  --nav-active-bg: var(--color-brand);
  --nav-active-ink: var(--color-on-brand);
  --shadow-card: 0 2px 8px rgb(var(--shadow-color-rgb) / .06), 0 8px 24px rgb(var(--shadow-color-rgb) / .10);
  --shadow-navbar: 0 8px 24px rgb(var(--shadow-color-rgb) / .08), 0 2px 6px rgb(var(--shadow-color-rgb) / .04);
  --btn-focus: var(--color-brand-strong);
  --btn-primary-fill: var(--color-brand);
  --btn-primary-fill-hover: var(--color-brand-hover);
  --btn-primary-fill-press: var(--color-brand-press);
  --btn-primary-on-fill: var(--color-on-brand);
  --btn-secondary-border: #fff0;
  --btn-secondary-border-hover: #fff0;
  --btn-secondary-border-press: #fff0;
  --btn-secondary-tint: var(--color-surface-2);
  --btn-secondary-tint-hover: var(--color-border);
  --btn-secondary-tint-press: var(--color-border-strong);
  --btn-disabled-bg: #E3E9EF;
  --btn-disabled-ink: #5C6B7A
}

@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #070D15;
    --color-surface: #0E1724;
    --color-surface-rgb: 14 23 36;
    --color-surface-2: #162334;
    --color-text-primary: #E6EEF6;
    --color-heading: #F6FAFD;
    --color-text-secondary: #9CB0C4;
    --color-text-secondary-rgb: 156 176 196;
    --color-text-muted: #687E96;
    --color-text-muted-strong: #889EB6;
    --color-success-strong: #34D399;
    --color-accent-warm: #F59E0B;
    --color-accent-warm-rgb: 245 158 11;
    --color-danger: #F87171;
    --color-danger-strong: #F87171;
    --color-border: #1C2C3E;
    --color-border-strong: #3E5570;
    --color-brand-strong: #38BDF8;
    --color-brand-soft: rgba(0, 192, 246, 0.12);
    --color-on-brand: #FFFFFF;
    --nav-surface: var(--color-surface);
    --nav-border: var(--color-border);
    --nav-hover-bg: var(--color-surface-2);
    --nav-hover-ink: var(--color-text-primary);
    --nav-active-bg: var(--color-brand);
    --nav-active-ink: var(--color-on-brand);
    --shadow-card: 0 2px 8px rgb(var(--shadow-color-rgb-dark) / .60), 0 8px 24px rgb(var(--shadow-color-rgb-dark) / .25);
    --shadow-navbar: 0 10px 30px rgb(var(--shadow-color-rgb-dark) / .55), 0 2px 8px rgb(var(--shadow-color-rgb-dark) / .65);
    --btn-focus: var(--color-brand-strong);
    --btn-primary-fill: var(--color-brand);
    --btn-primary-fill-hover: #24CAFA;
    --btn-primary-fill-press: #00A8D8;
    --btn-primary-on-fill: var(--color-on-brand);
    --btn-secondary-border: var(--color-border-strong);
    --btn-secondary-border-hover: var(--color-border-strong);
    --btn-secondary-border-press: var(--color-border-strong);
    --btn-secondary-tint: #182638;
    --btn-secondary-tint-hover: #223750;
    --btn-secondary-tint-press: #2C4666;
    --btn-disabled-bg: #1A2836;
    --btn-disabled-ink: #6A7C8C
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: #fff0
}

:focus-visible {
  scroll-margin-top: calc(var(--navbar-height) + 1rem)
}

a,
button,
[role="button"],
.tabbar-item,
[data-action],
[data-copy],
[data-share-title] {
  touch-action: manipulation
}

.skip-link {
  position: absolute;
  top: .75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  padding: .6rem 1.25rem;
  background: var(--color-surface);
  color: var(--color-brand-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
  font-family: var(--font-primary);
  font-weight: 600;
  text-decoration: none
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip
}

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

html,
body {
  min-height: 100vh
}

body {
  margin: 0;
  font-family: var(--font-secondary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  overflow-x: hidden;
  overflow-x: clip;
  transition: background-color var(--transition-base), color var(--transition-base)
}

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

a {
  color: var(--color-brand-strong);
  text-decoration: none;
  transition: color var(--transition-base)
}

a:hover {
  color: var(--color-text-primary)
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-primary);
  color: var(--color-heading)
}

h1 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  font-size: clamp(2.25rem, 6vw, 3.75rem)
}

h2 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-size: clamp(1.75rem, 4.5vw, 2.75rem)
}

h3 {
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  font-size: clamp(1.35rem, 3vw, 2rem)
}

h4 {
  font-weight: 600;
  line-height: 1.3;
  font-size: clamp(1.125rem, 2.2vw, 1.45rem)
}

p {
  color: var(--color-text-secondary);
  margin-bottom: 1rem
}

main {
  padding-top: calc(var(--navbar-height) + 1rem);
  padding-bottom: var(--page-end-space);
  min-height: calc(100vh - var(--navbar-height))
}

body.is-pwa main {
  padding-top: 0;
  padding-bottom: calc(var(--tabbar-height) + var(--page-end-space) + 1rem);
  padding-bottom: calc(var(--tabbar-height) + var(--page-end-space) + max(1rem, env(safe-area-inset-bottom)))
}

.hero-flush {
  margin-top: calc(-1 * (var(--navbar-height) + 1rem))
}

body.is-pwa .hero-flush {
  margin-top: 0
}

@media (min-width:768px) {
  body {
    font-size: 1.0625rem
  }
}

body.is-pwa #navbar-web {
  display: none !important
}

body.is-pwa #tabbar-pwa {
  display: flex !important
}

body.is-pwa #footer-web {
  display: none
}

body.is-pwa #whatsapp-fab {
  bottom: var(--whatsapp-notice-bottom, calc(var(--tabbar-height) + var(--fab-bottom) + env(safe-area-inset-bottom)))
}

main .container,
#footer-web .container {
  width: 100%;
  max-width: calc(100% - 2 * var(--shell-safe-gutter));
  margin-inline: auto;
  padding-inline: 0
}

@media (min-width:1024px) {

  main .container,
  #footer-web .container {
    max-width: var(--shell-max)
  }
}

@media (min-width:1920px) {

  main .container,
  #footer-web .container {
    max-width: var(--shell-max-xl)
  }
}

body.is-pwa main .container {
  max-width: min(calc(100% - 2 * var(--shell-safe-gutter)), var(--shell-max-pwa))
}

.content-wrapper {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto
}

.content-wrapper--narrow {
  max-width: 480px
}

@media (min-width:992px) {
  .content-wrapper--narrow {
    max-width: 700px
  }
}

.section-padding {
  padding-block: var(--chapter-boundary-space)
}

#main-content>section.section-padding:last-of-type {
  padding-bottom: 0
}

.section-padding--continuation {
  padding-block-start: 0
}

.heading-identity,
.heading-chapter,
.heading-local {
  margin: 0;
  font-family: var(--font-primary);
  color: var(--color-heading)
}

.heading-identity {
  font-weight: 800;
  font-size: var(--heading-identity-size);
  line-height: 1.05;
  letter-spacing: -.02em
}

.heading-chapter {
  font-weight: 800;
  font-size: var(--heading-chapter-size);
  line-height: 1.1;
  letter-spacing: -.02em
}

.heading-local {
  font-weight: 700;
  font-size: var(--heading-local-size);
  line-height: 1.2
}

.heading-group {
  display: grid;
  gap: var(--heading-description-gap);
  width: 100%;
  max-width: var(--reading-width-narrow);
  margin-block-end: var(--heading-content-gap)
}

.heading-lead {
  display: flex;
  align-items: center;
  gap: var(--heading-lead-gap)
}

.heading-description {
  max-width: var(--reading-width-narrow);
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted)
}

.reading-width {
  width: 100%;
  max-width: var(--reading-width)
}

.reading-width--narrow {
  max-width: var(--reading-width-narrow)
}

.composition {
  width: 100%
}

.composition--center {
  text-align: center
}

.composition--center .heading-group {
  justify-items: center;
  margin-inline: auto
}

.composition--center .reading-width {
  margin-inline: auto
}

.composition--start {
  text-align: start
}

.composition--start .heading-group {
  justify-items: start;
  margin-inline: 0
}

.composition--start .reading-width {
  margin-inline: 0
}

.text-brand {
  color: var(--color-brand-strong) !important
}

.text-muted-custom {
  color: var(--color-text-muted) !important
}

.fs-7 {
  font-size: .78rem
}

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

.sv-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .1em;
  margin-bottom: -.1em
}

.sv-inner {
  display: inline-block
}

.icon-box,
.section-heading-icon,
.pg-hero-icon,
.donativo-cta-icon,
.salvacion-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text-secondary)
}

.icon-box--md,
.section-heading-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  font-size: 1.15rem;
  border-radius: var(--radius-md)
}

.icon-box--circle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  font-size: var(--text-lg);
  border-radius: var(--radius-avatar);
  border: 0
}

.pg-hero-icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  font-size: 1.75rem;
  border-radius: var(--radius-lg)
}

.donativo-cta-icon {
  width: 76px;
  height: 76px;
  min-width: 76px;
  font-size: 2.1rem;
  border-radius: var(--radius-avatar)
}

.badge-outlined {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--color-surface-2);
  border: 0;
  color: var(--color-text-primary);
  padding: .3rem .875rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em
}

.micro-label {
  display: block;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted)
}

.contact-channel-arrow,
.settings-row-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  transition: color var(--transition-base)
}

@media (hover:hover) {

  .contact-channel:hover .contact-channel-arrow,
  a.settings-row:hover .settings-row-chevron {
    color: var(--color-text-secondary)
  }
}

@media (prefers-reduced-motion:reduce) {

  .contact-channel-arrow,
  .settings-row-chevron {
    transition: none
  }
}

.btn-app {
  --bs-btn-padding-x: var(--btn-pad-x);
  --bs-btn-padding-y: 0;
  --bs-btn-font-family: var(--font-secondary);
  --bs-btn-font-size: var(--btn-font-size);
  --bs-btn-font-weight: var(--btn-font-weight);
  --bs-btn-line-height: var(--btn-line-height);
  --bs-btn-border-width: 0;
  --bs-btn-border-color: #fff0;
  --bs-btn-hover-border-color: #fff0;
  --bs-btn-active-border-color: #fff0;
  --bs-btn-disabled-border-color: #fff0;
  --bs-btn-border-radius: var(--btn-radius);
  --bs-btn-disabled-bg: var(--btn-disabled-bg);
  --bs-btn-disabled-color: var(--btn-disabled-ink);
  --bs-btn-disabled-opacity: 1;
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-active-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-min-height);
  letter-spacing: var(--btn-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), transform var(--motion-instant) var(--ease-standard)
}

.btn-app--primary {
  --bs-btn-bg: var(--btn-primary-fill);
  --bs-btn-color: var(--btn-primary-on-fill);
  --bs-btn-hover-bg: var(--btn-primary-fill);
  --bs-btn-hover-color: var(--btn-primary-on-fill);
  --bs-btn-active-bg: var(--btn-primary-fill-press);
  --bs-btn-active-color: var(--btn-primary-on-fill)
}

.btn-app--secondary {
  --bs-btn-bg: var(--btn-secondary-tint);
  --bs-btn-color: var(--color-text-primary);
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: var(--btn-secondary-border);
  --bs-btn-hover-bg: var(--btn-secondary-tint-hover);
  --bs-btn-hover-color: var(--color-text-primary);
  --bs-btn-hover-border-color: var(--btn-secondary-border-hover);
  --bs-btn-active-bg: var(--btn-secondary-tint-press);
  --bs-btn-active-color: var(--color-text-primary);
  --bs-btn-active-border-color: var(--btn-secondary-border-press)
}

@media (hover:hover) {
  .btn-app--primary {
    --bs-btn-hover-bg: var(--btn-primary-fill-hover)
  }

  .btn-app--secondary {
    --bs-btn-hover-bg: var(--btn-secondary-tint-hover);
    --bs-btn-hover-color: var(--color-text-primary);
    --bs-btn-hover-border-color: var(--btn-secondary-border-hover)
  }
}

.btn-app--compact {
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: var(--text-xs);
  flex: 0 0 auto
}

.card-app .btn-app:not(.btn-app--compact) {
  display: flex;
  width: 100%
}

.btn-app:active {
  transform: scale(var(--btn-press-scale))
}

.btn-app:focus-visible {
  outline: var(--btn-focus-width) solid var(--btn-focus);
  outline-offset: var(--btn-focus-offset);
  box-shadow: none
}

.btn-app:disabled {
  cursor: not-allowed;
  pointer-events: none;
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .btn-app {
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard)
  }

  .btn-app:active {
    transform: none
  }
}

.ctrl-app {
  --ctrl-float-bg: var(--btn-primary-fill);
  --ctrl-float-bg-hover: var(--btn-primary-fill-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ctrl-size-md);
  height: var(--ctrl-size-md);
  padding: 0;
  border: 0;
  border-radius: var(--btn-radius);
  background-color: #fff0;
  color: var(--color-text-secondary);
  font-size: var(--icon-md);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-instant) var(--ease-standard)
}

.ctrl-app--surface {
  background-color: var(--btn-secondary-tint);
  color: var(--color-text-secondary);
  border: 1px solid var(--btn-secondary-border)
}

.ctrl-app--float {
  position: fixed;
  z-index: 999;
  background-color: var(--ctrl-float-bg);
  color: var(--color-on-brand);
  box-shadow: 0 4px 12px rgb(var(--shadow-color-rgb) / .22), 0 2px 6px rgb(var(--shadow-color-rgb-dark) / .15)
}

.ctrl-app--md {
  width: var(--ctrl-size-md);
  height: var(--ctrl-size-md);
  font-size: var(--icon-md)
}

.ctrl-app--lg {
  width: var(--ctrl-size-lg);
  height: var(--ctrl-size-lg);
  font-size: var(--icon-lg)
}

.ctrl-app--fab {
  width: var(--ctrl-size-fab);
  height: var(--ctrl-size-fab);
  font-size: var(--icon-fab)
}

@media (hover:hover) {

  .ctrl-app--ghost:hover,
  .ctrl-app--surface:hover {
    background-color: var(--btn-secondary-tint-hover);
    color: var(--color-text-primary)
  }

  .ctrl-app--float:hover {
    background-color: var(--ctrl-float-bg-hover)
  }
}

.ctrl-app--ghost:active,
.ctrl-app--surface:active {
  background-color: var(--btn-secondary-tint-press);
  color: var(--color-text-primary)
}

.ctrl-app:active {
  transform: scale(var(--btn-press-scale))
}

.ctrl-app:focus-visible {
  outline: var(--btn-focus-width) solid var(--btn-focus);
  outline-offset: var(--btn-focus-offset)
}

.ctrl-app:disabled,
.ctrl-app.swiper-button-disabled {
  cursor: not-allowed;
  background-color: var(--btn-disabled-bg);
  color: var(--btn-disabled-ink);
  transform: none
}

@media (prefers-reduced-motion:reduce) {
  .ctrl-app {
    transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard)
  }

  .ctrl-app:active {
    transform: none
  }
}

.surface-deep {
  color: var(--color-text-primary);
  background-color: var(--color-surface)
}

.surface-deep .heading-description {
  color: var(--color-text-muted-strong)
}

.surface-base {
  color: var(--color-text-primary);
  background-color: var(--color-bg)
}

html[data-theme="dark"] .surface-deep {
  background-color: var(--color-surface)
}

@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .surface-deep {
    background-color: var(--color-surface)
  }
}

.surface-raised {
  color: var(--color-text-primary);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card)
}

.card-app {
  overflow: hidden
}

.card-app--padded {
  padding: var(--space-5) var(--space-4)
}

@media (min-width:768px) {
  .card-app--padded {
    padding: 1.75rem var(--space-6)
  }
}

.card-app .card-img-top {
  object-fit: cover;
  width: 100%;
  aspect-ratio: var(--card-media-ratio);
  height: auto
}

.card-avatar-wrapper {
  position: relative
}

.card-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-avatar);
  object-fit: cover;
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card)
}

.form-input {
  border-radius: .75rem;
  border: 1px solid var(--color-border-strong);
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  padding: .75rem 1rem;
  font-family: var(--font-secondary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base)
}

.form-input:focus {
  border-color: var(--btn-focus);
  box-shadow: 0 0 0 1px var(--btn-focus);
  outline: none
}

.form-textarea {
  resize: vertical
}

.field-error {
  display: block;
  color: var(--color-danger-strong);
  font-size: var(--text-xs);
  margin-top: .3rem
}

.form-submit-error {
  margin-top: var(--space-2)
}

.contact-success-icon {
  font-size: 3rem;
  color: var(--color-success-strong);
  display: block;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: auto
}

.card-social-link,
.footer-social .ctrl-app {
  background-color: var(--color-surface-2)
}

.card-social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
  margin-top: 1rem
}

#navbar-web {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: calc(100% - 2 * var(--shell-safe-gutter));
  min-height: var(--navbar-height);
  height: auto;
  border-radius: 32px;
  background-color: var(--nav-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-navbar);
  border: 1px solid var(--nav-border);
  z-index: 1000;
  padding: 0 var(--shell-pad);
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base)
}

@media (min-width:1024px) {
  #navbar-web {
    max-width: 900px;
    padding: 0 var(--shell-pad-lg)
  }
}

@media (min-width:1920px) {
  #navbar-web {
    max-width: 1000px
  }
}

#navbar-web .container-fluid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: var(--navbar-height) auto;
  align-items: center;
  min-height: var(--navbar-height);
  padding: 0
}

#navbar-web .navbar-brand {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  z-index: 10;
  justify-self: center;
  align-self: center;
  transform: none;
  padding-top: 0;
  padding-bottom: 0
}

#navbar-web .navbar-toggler {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin-left: 0;
  width: var(--ctrl-size-md);
  height: var(--ctrl-size-md);
  min-width: var(--ctrl-size-md);
  min-height: var(--ctrl-size-md);
  padding: 0;
  border-radius: var(--radius-pill);
  position: relative;
  color: var(--color-text-primary);
  transition: color var(--transition-base), background-color var(--transition-base)
}

#navbar-web .navbar-collapse {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  overflow: hidden
}

@media (max-width:991.98px) {
  #navbar-web .navbar-collapse.show {
    max-height: calc(100dvh - var(--navbar-height) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain
  }
}

#navbar-web .navbar-nav {
  padding: .75rem 0 1.25rem;
  border-top: 1px solid var(--nav-border);
  margin-top: 0
}

#navbar-web .nav-mobile-settings {
  border-top: 1px solid var(--nav-border)
}

#navbar-web .nav-mobile-settings .nav-link.disabled {
  color: var(--color-text-muted)
}

#navbar-web .nav-item {
  width: 100%;
  margin-bottom: .35rem
}

#navbar-web .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-secondary);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-tracking);
  color: var(--color-text-secondary);
  padding: .7rem 1.1rem;
  min-height: var(--btn-min-height);
  font-size: var(--text-md);
  border-radius: var(--radius-pill);
  transition: color var(--transition-base), background-color var(--transition-base)
}

@media (min-width:992px) {
  #navbar-web .container-fluid {
    display: flex;
    padding-left: .75rem;
    padding-right: .75rem
  }

  #navbar-web .navbar-collapse {
    width: auto;
    overflow: visible
  }

  #navbar-web .navbar-nav {
    padding: 0;
    border-top: none
  }

  #navbar-web .nav-item {
    width: auto;
    margin-bottom: 0
  }

  #navbar-web .nav-link {
    display: block;
    padding: .5rem .9rem;
    font-size: var(--text-base);
    border-radius: var(--radius-pill)
  }
}

.navbar-logo-mobile {
  height: 38px;
  width: auto;
  -webkit-touch-callout: none
}

.navbar-logo-desktop {
  height: 34px;
  width: auto;
  -webkit-touch-callout: none
}

#navbar-web .nav-link.active,
#navbar-web .nav-link[aria-current="page"] {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg);
  font-weight: 700
}

#navbar-web a.nav-link:focus-visible,
#navbar-web button.nav-link:focus-visible {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg);
  outline: var(--btn-focus-width) solid currentColor;
  outline-offset: var(--btn-focus-offset);
  box-shadow: none
}

@media (hover:hover) {
  #navbar-web .nav-link:not(.active):not([aria-current="page"]):not(:focus-visible):hover {
    color: var(--nav-hover-ink);
    background-color: var(--nav-hover-bg)
  }

  #navbar-web .navbar-toggler:not([aria-expanded="true"]):not(:focus-visible):hover {
    color: var(--nav-hover-ink);
    background-color: var(--nav-hover-bg)
  }
}

#navbar-web .navbar-toggler:focus {
  outline: none;
  box-shadow: none
}

#navbar-web .navbar-toggler:focus-visible {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg);
  outline: var(--btn-focus-width) solid currentColor;
  outline-offset: var(--btn-focus-offset)
}

#navbar-web .navbar-toggler-icon {
  background-image: none !important;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  transition: background-color var(--transition-base);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block
}

#navbar-web .navbar-toggler-icon::before,
#navbar-web .navbar-toggler-icon::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 2px;
  background-color: currentColor;
  border-radius: 2px;
  left: 0;
  transition: transform var(--transition-base)
}

#navbar-web .navbar-toggler-icon::before {
  transform: translateY(-7px)
}

#navbar-web .navbar-toggler-icon::after {
  transform: translateY(7px)
}

#navbar-web .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-color: transparent !important
}

#navbar-web .navbar-toggler[aria-expanded="true"] {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg)
}

#navbar-web .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg)
}

#navbar-web .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg)
}

#navbar-web button.nav-link {
  background: #fff0;
  border: 0;
  cursor: pointer;
  width: 100%
}

#navbar-web button.nav-link:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none
}

.nav-item.d-lg-none button.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill)
}

#navbar-web .nav-link:not(.active):not([aria-current="page"]):active {
  color: var(--nav-hover-ink);
  background-color: var(--nav-hover-bg)
}

@media (min-width:992px) {
  #navbar-web button.nav-link {
    width: auto
  }
}

#tabbar-pwa {
  display: none !important;
  position: fixed;
  bottom: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: calc(100% - 2 * var(--shell-safe-gutter));
  max-width: var(--shell-max-pwa);
  height: var(--tabbar-height);
  border-radius: var(--radius-pill);
  background-color: var(--nav-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-navbar);
  border: 1px solid var(--nav-border);
  z-index: 1000;
  padding: 0 .5rem;
  justify-content: space-around;
  align-items: center;
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base)
}

.tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  padding: .5rem .6rem;
  min-width: 48px;
  min-height: var(--btn-min-height);
  color: var(--color-text-muted-strong);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: transform var(--motion-instant) var(--ease-standard), opacity var(--motion-instant) var(--ease-standard)
}

.tabbar-item .icon {
  font-size: 1.2rem;
  line-height: 1
}

.tabbar-item span {
  font-size: .7rem;
  font-family: var(--font-secondary);
  font-weight: 500;
  line-height: 1
}

.tabbar-item.active span,
.tabbar-item[aria-current="page"] span {
  font-weight: 700
}

.tabbar-item.active,
.tabbar-item[aria-current="page"] {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg)
}

@media (hover:hover) {
  .tabbar-item:not(.active):not([aria-current="page"]):not(:focus-visible):hover {
    color: var(--nav-hover-ink);
    background-color: var(--nav-hover-bg)
  }
}

.tabbar-item:active {
  transform: scale(var(--btn-press-scale));
  opacity: .72;
  transition-duration: 0s
}

@media (prefers-reduced-motion:reduce) {
  .tabbar-item {
    transition: none
  }

  .tabbar-item:active {
    transform: none
  }
}

.tabbar-item:focus-visible {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg);
  outline: var(--btn-focus-width) solid var(--btn-focus);
  outline-offset: var(--btn-focus-offset);
  box-shadow: none
}

.dropdown-settings {
  position: relative
}

.dropdown-menu-custom {
  background-color: var(--nav-surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--nav-border);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-navbar);
  padding: .5rem;
  margin-top: 0.75rem !important;
  min-width: 260px;
  animation: dropdownFadeIn var(--motion-base) var(--ease-standard)
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

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

.dropdown-menu-custom .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  font-family: var(--font-secondary);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-tracking);
  font-size: .9rem;
  color: var(--color-text-secondary);
  min-height: var(--btn-min-height);
  border-radius: var(--radius-pill);
  background: #fff0;
  border: none;
  width: 100%;
  text-align: left;
  transition: background-color var(--transition-base), color var(--transition-base)
}

@media (hover:hover) {
  .dropdown-menu-custom .dropdown-item:not(:focus-visible):hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-hover-ink)
  }
}

.dropdown-menu-custom .dropdown-item:active {
  background-color: var(--nav-hover-bg);
  color: var(--nav-hover-ink)
}

.dropdown-menu-custom .dropdown-item:focus-visible {
  color: var(--nav-active-ink);
  background-color: var(--nav-active-bg);
  outline: var(--btn-focus-width) solid currentColor;
  outline-offset: var(--btn-focus-offset);
  box-shadow: none
}

.dropdown-menu-custom .dropdown-divider {
  border-top: 1px solid var(--nav-border);
  margin: .4rem .5rem
}

.dropdown-badge {
  font-size: .75rem;
  font-weight: 600;
  padding: .2rem .6rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-2);
  color: var(--color-text-secondary);
  font-family: var(--font-secondary);
  transition: background-color var(--transition-base), color var(--transition-base)
}

#footer-web {
  position: relative;
  padding: 2rem 0 max(1.25rem, env(safe-area-inset-bottom));
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: 2rem 2rem 0 0;
  transition: background-color var(--transition-base), border-color var(--transition-base)
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color var(--transition-base)
}

@media (min-width:768px) and (max-width:991.98px) {
  .footer-identity {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-6)
  }

  .footer-identity .footer-brand {
    grid-area: 1 / 1
  }

  .footer-identity .footer-summary {
    grid-area: 2 / 1
  }

  .footer-identity .footer-social {
    grid-area: 1 / 2 / span 2;
    margin-top: 0
  }
}

.footer-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden
}

.footer-brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.3333)
}

.footer-brand-text {
  display: block;
  font-family: var(--font-primary);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.1;
  color: inherit
}

.footer-summary {
  max-width: 30ch;
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary)
}

.footer-heading {
  margin-bottom: var(--space-2);
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted)
}

#footer-web .micro-label {
  font-weight: 600;
  letter-spacing: .04em
}

@media (max-width:991.98px) {
  .footer-group {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border)
  }
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-4)
}

.footer-row-list {
  display: grid;
  gap: var(--space-1);
  margin: 0 -8px;
  padding: 0;
  list-style: none
}

.footer-row-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-1)
}

.footer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: .375rem 8px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color var(--transition-base), color var(--transition-base)
}

.footer-row:focus-visible {
  outline: var(--btn-focus-width) solid var(--btn-focus);
  outline-offset: calc(-1 * var(--btn-focus-width))
}

.footer-brand:focus-visible {
  outline: var(--btn-focus-width) solid var(--btn-focus);
  outline-offset: var(--btn-focus-offset);
  border-radius: var(--radius-pill)
}

.footer-row-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface-2);
  transition: background-color var(--transition-base), color var(--transition-base)
}

.footer-row-info {
  display: grid;
  gap: .25rem;
  min-width: 0
}

.footer-row-value {
  font-size: var(--text-base);
  color: inherit;
  overflow-wrap: anywhere
}

.footer-row-ext {
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  transition: color var(--transition-base)
}

.footer-bottom {
  display: grid;
  justify-items: center;
  gap: .375rem;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-align: center
}

.footer-devotion,
.footer-copy {
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.5
}

.footer-devotion .icon {
  color: var(--color-danger)
}

@media (hover:hover) {
  .footer-brand:hover {
    color: var(--color-brand-strong)
  }

  .footer-row:hover {
    background-color: var(--color-surface-2);
    color: var(--color-text-primary)
  }

  .footer-row:hover .footer-row-icon {
    background-color: var(--color-surface);
    color: var(--color-text-primary)
  }

  .footer-row:hover .footer-row-ext {
    color: var(--color-text-primary)
  }
}

@media (hover:none) {
  .footer-row:active {
    background-color: var(--color-surface-2)
  }
}

@media (min-width:768px) {
  #footer-web {
    padding: 2.5rem 0 1.5rem;
    border-radius: 2.75rem 2.75rem 0 0
  }

  .footer-bottom {
    grid-template-columns: 1fr 1fr;
    align-items: baseline;
    gap: var(--space-3);
    text-align: left
  }

  .footer-copy {
    grid-area: 1 / 1;
    justify-self: center
  }

  .footer-devotion {
    grid-area: 1 / 2;
    justify-self: end
  }
}

@media (min-width:1280px) {
  #footer-web {
    padding: 3rem 0 1.75rem
  }
}

#whatsapp-fab {
  --ctrl-float-bg: var(--color-whatsapp);
  --ctrl-float-bg-hover: var(--color-whatsapp-hover);
  color: rgb(var(--color-white-rgb));
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  bottom: var(--whatsapp-notice-bottom, calc(var(--fab-bottom) + env(safe-area-inset-bottom)));
  z-index: var(--z-whatsapp-fab);
  right: var(--fab-right);
  right: max(var(--fab-right), env(safe-area-inset-right));
  box-shadow: 0 4px 12px rgb(var(--shadow-color-rgb-dark) / .18), 0 2px 6px rgb(var(--shadow-color-rgb-dark) / .12)
}

#notification-fab {
  z-index: var(--z-notification-fab);
  --ctrl-float-bg: var(--btn-primary-fill);
  --ctrl-float-bg-hover: var(--btn-primary-fill-hover);
  right: var(--fab-right);
  right: max(var(--fab-right), env(safe-area-inset-right));
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom))
}

#notification-fab[data-whatsapp-visible="true"] {
  bottom: calc(var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + env(safe-area-inset-bottom))
}

body.is-pwa #notification-fab {
  bottom: calc(var(--tabbar-height) + var(--fab-bottom));
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + env(safe-area-inset-bottom))
}

body.is-pwa #notification-fab[data-whatsapp-visible="true"] {
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2));
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + env(safe-area-inset-bottom))
}

.notification-permission-prompt {
  position: fixed;
  right: var(--shell-safe-gutter);
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom));
  z-index: var(--z-notification-prompt);
  width: min(24rem, calc(100% - 2 * var(--shell-safe-gutter)));
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  color: var(--color-text-primary);
  font-family: var(--font-secondary)
}

body.is-pwa .notification-permission-prompt {
  bottom: calc(var(--tabbar-height) + var(--fab-bottom));
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + env(safe-area-inset-bottom))
}

#notification-denied-prompt {
  bottom: calc(var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + env(safe-area-inset-bottom))
}

#notification-denied-prompt[data-whatsapp-visible="true"] {
  bottom: calc(var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + var(--ctrl-size-fab) + var(--space-2) + env(safe-area-inset-bottom))
}

body.is-pwa #notification-denied-prompt {
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2));
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + env(safe-area-inset-bottom))
}

body.is-pwa #notification-denied-prompt[data-whatsapp-visible="true"] {
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + var(--ctrl-size-fab) + var(--space-2));
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + var(--ctrl-size-fab) + var(--space-2) + var(--ctrl-size-fab) + var(--space-2) + env(safe-area-inset-bottom))
}

.notification-permission-prompt-heading {
  display: flex;
  align-items: center;
  gap: var(--space-2)
}

.notification-permission-prompt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-2);
  color: var(--color-text-secondary)
}

.notification-permission-prompt-title {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.2
}

.notification-permission-prompt-copy {
  margin: var(--space-2) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: 1.45
}

.notification-permission-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3)
}

@media (prefers-reduced-motion:reduce) {
  .notification-permission-prompt {
    transition: none
  }
}

#nav-install-item,
#mobile-install-item,
.nav-install-divider {
  display: none
}

.pg-hero {
  position: relative;
  overflow: hidden;
  min-height: 52vh;
  padding-top: calc(var(--navbar-height) + 2rem);
  padding-bottom: 2.5rem;
  display: flex;
  align-items: center
}

.pg-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, var(--color-bg));
  pointer-events: none;
  z-index: 1
}

.pg-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0
}

.pg-hero-blob {
  display: none
}

.pg-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.25rem
}

.pg-hero-text {
  flex: 1;
  min-width: 0;
  margin-block-end: 0
}

.pg-hero-desc {
  color: var(--color-text-muted-strong);
  line-height: 1.6
}

@media (min-width:768px) {
  .pg-hero {
    padding-top: calc(var(--navbar-height) + 2.5rem);
    padding-bottom: 3rem
  }
}

.pg-hero.hero-flush {
  min-height: 30vh;
  padding-top: calc(var(--navbar-height) + 1.25rem);
  padding-bottom: 1.5rem
}

.pg-hero.hero-flush::after {
  height: 2.5rem
}

@media (min-width:768px) {
  .pg-hero.hero-flush {
    padding-top: calc(var(--navbar-height) + 1.75rem);
    padding-bottom: 2rem
  }
}

@media (prefers-color-scheme:dark) {
  html:not([data-theme="light"]) .pg-hero-icon {
    box-shadow: 0 8px 24px rgb(var(--shadow-color-rgb-dark) / .18), inset 0 1px 0 rgb(var(--color-white-rgb) / .12)
  }
}

.section-heading {
  max-width: 560px;
  margin-inline: auto;
  justify-items: center
}

.section-heading-lead {
  margin-bottom: 0
}

.section-heading-desc {
  font-size: .92rem;
  max-width: 460px;
  margin: 0 auto
}

.scroll-hint {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted-strong)
}

.scroll-hint .icon {
  font-size: .95rem;
  display: block
}

.scroll-hint.scroll-hint--on-image {
  color: rgb(var(--color-white-rgb) / .85)
}

@media (min-width:768px) {
  .scroll-hint {
    bottom: var(--space-7)
  }
}

body.is-pwa .scroll-hint {
  bottom: calc(var(--tabbar-height) + var(--space-5) + max(1rem, env(safe-area-inset-bottom)))
}

body.is-pwa.cookie-banner-open .scroll-hint {
  opacity: 0
}

@media (min-width:768px) {
  body.cookie-banner-open .scroll-hint {
    bottom: calc(9rem + env(safe-area-inset-bottom))
  }
}

.hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-base) var(--ease-standard)
}

.hint.is-hinting {
  opacity: 1
}

@media (max-width:767.98px) {
  body.cookie-banner-open .scroll-hint {
    opacity: 0
  }
}

.scroll-hint-hand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .15rem;
  margin-top: .25rem;
  font-size: 1.15rem
}

.scroll-hint-hand-arrow {
  font-size: .85em
}

.scroll-hint-hand-icon {
  transform: rotate(-30deg)
}

.scroll-hint.is-hinting .scroll-hint-hand {
  animation: hintScrollHand 1.8s var(--ease-standard) infinite
}

@keyframes hintScrollHand {
  0% {
    transform: translateY(-4px);
    opacity: 0
  }

  30% {
    opacity: 1
  }

  70% {
    opacity: 1
  }

  100% {
    transform: translateY(10px);
    opacity: 0
  }
}

.carousel-hint {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .75rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--color-surface-rgb) / .92);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text-secondary)
}

.carousel-hint-label {
  font-size: var(--text-2xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600
}

.carousel-hint-hand {
  font-size: .95rem
}

.carousel-hint.is-hinting .carousel-hint-hand {
  animation: hintSwipeHand 1.8s ease-in-out infinite
}

@keyframes hintSwipeHand {

  0%,
  100% {
    transform: translateX(-6px)
  }

  50% {
    transform: translateX(6px)
  }
}

.map-hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 650;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--color-surface-rgb) / .9);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  color: var(--color-text-secondary);
  font-size: var(--text-2xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap
}

.map-hint .icon {
  font-size: .9rem
}

.map-hint.is-hinting .icon {
  animation: hintMapDrift 2.6s ease-in-out infinite
}

@keyframes hintMapDrift {

  0%,
  100% {
    transform: translate(0, 0)
  }

  20% {
    transform: translate(3px, -3px)
  }

  40% {
    transform: translate(4px, 2px)
  }

  60% {
    transform: translate(-2px, 4px)
  }

  80% {
    transform: translate(-4px, -1px)
  }
}

@media (prefers-reduced-motion:reduce) {

  .scroll-hint-hand,
  .carousel-hint-hand,
  .map-hint .icon {
    animation: none !important
  }

  .hint,
  .hint.is-hinting {
    opacity: 0 !important
  }
}

.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: calc(var(--fab-bottom) + env(safe-area-inset-bottom));
  z-index: var(--z-cookie);
  width: calc(100% - 2 * var(--shell-safe-gutter));
  max-width: var(--shell-max-pwa);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(1rem);
  transition: opacity var(--motion-base) var(--ease-standard), transform var(--motion-base) var(--ease-standard)
}

.cookie-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}

.cookie-banner-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-accent-warm);
  background: rgb(var(--color-accent-warm-rgb) / .18)
}

.cookie-banner-cookie {
  display: block;
  width: 30px;
  height: 30px
}

.cookie-banner-chips {
  fill: var(--color-text-primary);
  opacity: .72
}

.cookie-banner-title {
  margin: 0 0 .15rem;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--text-base);
  line-height: 1.2;
  color: var(--color-text-primary)
}

.cookie-banner-text {
  margin: 0;
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-secondary)
}

.cookie-banner-text a {
  color: var(--color-brand-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap
}

.cookie-banner-accept {
  grid-column: 1 / -1
}

body.is-pwa .cookie-banner {
  max-width: var(--shell-max-pwa);
  bottom: calc(var(--tabbar-height) + var(--fab-bottom) + env(safe-area-inset-bottom))
}

body.cookie-banner-open #notification-fab,
body.cookie-banner-open .notification-permission-prompt {
  display: none !important
}

@media (min-width:576px) {
  .cookie-banner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-4);
    max-width: 40rem
  }

  .cookie-banner-accept {
    grid-column: auto;
    justify-self: end
  }
}

@media (prefers-reduced-motion:reduce) {
  .cookie-banner {
    transition: none
  }
}

@media (prefers-reduced-motion:reduce) {
  [data-gsap] {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important
  }

  #share-toast,
  #sw-update-toast {
    transition: none !important
  }
}