/* Ynavor - tema branco e preto | 19/05/2026 @filipemontt */
/* 31/08/2026 04:17 - Fonte Public Sans @filipemontt */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

body {
    font-family: 'Public Sans', sans-serif;
    margin: 0;
    overflow-x: hidden;
    max-width: 100%;
}

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

html {
    overflow-x: hidden;
}

/* 06/07/2026 - utilitários fallback quando Tailwind CDN não carrega @filipemontt */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-1, .flex-grow { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.block { display: block; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-x-0 { left: 0; right: 0; }
.bottom-0 { bottom: 0; }
.left-4 { left: 1rem; }
.right-2 { right: 0.5rem; }
.right-3 { right: 0.75rem; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }
.z-50 { z-index: 50; }
.w-full { width: 100%; }
.w-5 { width: 1.25rem; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-20 { width: 5rem; }
.h-5 { height: 1.25rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-20 { height: 5rem; }
.h-48 { height: 12rem; }
.h-52 { height: 13rem; }
.min-h-screen { min-height: 100vh; }
.max-w-lg { max-width: 32rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mr-1 { margin-right: 0.25rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.mr-4 { margin-right: 1rem; }
.ml-1 { margin-left: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.-mt-10 { margin-top: -2.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-24 { padding-bottom: 6rem; }
.pb-28 { padding-bottom: 7rem; }
.pr-12 { padding-right: 3rem; }
.pl-12 { padding-left: 3rem; }
.pr-14 { padding-right: 3.5rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-x-2 > * + * { margin-left: 0.5rem; }
.space-x-4 > * + * { margin-left: 1rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-center { text-align: center; }
.leading-relaxed { line-height: 1.625; }
.text-white { color: #fff; }
.text-gray-300 { color: #d1d5db; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-red-600 { color: #dc2626; }
.bg-red-50 { background: #fef2f2; }
.border-red-100 { border: 1px solid #fee2e2; }
.border { border: 1px solid #e5e7eb; }
.text-gray-600 { color: #4b5563; }
.text-gray-900 { color: #111827; }
.text-red-600 { color: #dc2626; }
.text-white\/80 { color: rgba(255,255,255,0.8); }
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-gray-200 { background-color: #e5e7eb; }
.bg-gray-300 { background-color: #d1d5db; }
.bg-black { background-color: #000; }
.bg-white\/20 { background-color: rgba(255,255,255,0.2); }
.border { border-width: 1px; border-style: solid; border-color: #e5e7eb; }
.border-t { border-top: 1px solid #e5e7eb; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.overflow-x-auto { overflow-x: auto; }
.overflow-hidden { overflow: hidden; }
.underline { text-decoration: underline; }
.whitespace-nowrap { white-space: nowrap; }
.object-cover { object-fit: cover; }
.cursor-pointer { cursor: pointer; }
.transition-colors { transition: color 0.2s, background-color 0.2s, border-color 0.2s; }

.text-brand { color: #000000; }
.bg-brand { background-color: #000000; }
.border-brand { border-color: #000000; }
.ring-brand:focus { --tw-ring-color: #000000; }

.btn-primary {
    background-color: #000000;
    color: #ffffff;
    transition: background-color 0.2s ease;
}
.btn-primary:hover { background-color: #171717; }
.btn-primary--block {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 1rem;
    border-radius: 9999px;
    font-weight: 500;
    margin-bottom: 1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* 07/07/2026 - btn-primary como link sem underline/azul @filipemontt */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:visited,
a.btn-primary:focus,
a.btn-primary:active {
    text-decoration: none !important;
    color: #fff !important;
    text-align: center;
}
a.btn-primary--block {
    display: block;
}

.btn-outline {
    border: 1px solid #000000;
    color: #000000;
    background: transparent;
}
.btn-outline:hover { background-color: #f9fafb; }

.card { background: #ffffff; border: 1px solid #f3f4f6; border-radius: 0.75rem; }
.card-muted { background: #f9fafb; border-radius: 0.75rem; }

.chip {
    background: #f3f4f6;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

.chip-active {
    background: #000000;
    color: #ffffff;
}

.icon-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box-dark {
    background: #000000;
    color: #ffffff;
}

.yn-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
.pb-nav { padding-bottom: 5.5rem; }

.slide-dots .dot { transition: all 0.3s ease; }
.slide-dots .dot.active { width: 24px; background-color: #000000; }

.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.slide.active { opacity: 1; visibility: visible; position: relative; }

/* 07/07/2026 - splash onboarding (index.html) @filipemontt */
.yn-splash { position: relative; min-height: 100vh; }
.yn-splash-slide {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}
.yn-splash-illustration {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}
.yn-splash-icon {
    width: 10rem;
    height: 10rem;
    border-radius: 2rem;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.75rem;
    color: #000;
}
.yn-splash-content { margin-bottom: 2rem; }
.yn-splash-content h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}
.yn-splash-content p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}
.yn-splash-dots {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
}
.yn-splash-dots .dot {
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 9999px;
    background: #d1d5db;
    cursor: pointer;
}
.yn-splash-dots .dot.active {
    width: 1.5rem;
    background: #000;
}
.yn-splash-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 1rem;
    border-radius: 9999px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}
.yn-splash-btn:active { opacity: 0.9; }
.yn-splash-footer {
    text-align: center;
    font-size: 0.875rem;
    color: #4b5563;
}
.yn-splash-footer a {
    color: #000;
    font-weight: 500;
    text-decoration: none;
}
.yn-splash-footer a:hover { text-decoration: underline; }

.tab-btn.active { color: #000000; border-bottom: 2px solid #000000; }

.map-placeholder {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    min-height: 220px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.rating-stars { color: #FCD34D; }

input:focus, select:focus, textarea:focus {
    outline: none;
    ring: 2px;
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.15);
}

.payment-card-dark {
    border-radius: 10px;
    background: linear-gradient(135deg, #000000 0%, #374151 100%);
    color: white;
}

.alert-gps {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    color: #92400e;
}

/* 06/07/2026 - offcanvas, filtros e detalhes aluguel @filipemontt */
.yn-offcanvas {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.yn-offcanvas.open {
    pointer-events: auto;
    opacity: 1;
}
.yn-offcanvas-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.yn-offcanvas-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.5rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
}
.yn-offcanvas.open .yn-offcanvas-panel {
    transform: translateY(0);
}

.listing-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.listing-card:active {
    transform: scale(0.99);
}

.filter-chip-row {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.filter-chip-row::-webkit-scrollbar { display: none; }

.yn-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    cursor: pointer;
}
.yn-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    border: none;
    cursor: pointer;
}

.yn-check-card input:checked + label {
    background: #000;
    border-color: #000;
    color: #fff;
}

.gallery-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid transparent;
}
.gallery-thumb.active { border-color: #000; }

.spec-box {
    background: #f9fafb;
    border-radius: 0.75rem;
    padding: 0.75rem;
    text-align: center;
}

/* 06/07/2026 - layout padrão template-app (clean) @filipemontt */
.yn-screen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.yn-screen-padded {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0));
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.yn-auth-screen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.yn-header-location p:first-child {
    font-size: 0.75rem;
    color: #6b7280;
}

.yn-btn-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.yn-btn-icon--light { background: #f3f4f6; }
.yn-btn-icon--dark { background: #000; color: #fff; }
.yn-btn-icon--ghost { background: rgba(255, 255, 255, 0.2); color: #fff; }

.yn-page-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    gap: 0.75rem;
}

.yn-page-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.yn-page-header__subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

.yn-search-bar {
    position: relative;
    margin-bottom: 1.5rem;
}

.yn-search-bar input {
    width: 100%;
    padding: 0.75rem 3.5rem 0.75rem 3rem;
    background: #f3f4f6;
    border-radius: 0.75rem;
    border: none;
}

.yn-search-bar input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

.yn-search-bar > i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.yn-search-bar__filter {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #000;
    color: #fff;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

a.yn-search-bar__filter,
a.yn-search-bar__filter:hover,
a.yn-search-bar__filter:visited,
a.yn-search-bar__filter:focus,
a.yn-search-bar__filter:active {
    text-decoration: none !important;
    color: #fff;
}

.yn-section-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.yn-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.yn-section-header a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #000;
    text-decoration: none;
}

.yn-section-header a:hover,
.yn-section-header a:visited {
    color: #000;
    text-decoration: none;
}

/* 06/07/2026 - cards estilo template-app/home (aluguel) @filipemontt */
.yn-type-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.yn-type-scroll::-webkit-scrollbar { display: none; }

/* 07/07/2026 - slider só arrasta (home categorias) @filipemontt */
.yn-type-scroll.yn-drag-scroll {
    overflow-x: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
}
.yn-type-scroll.yn-drag-scroll.is-dragging {
    cursor: grabbing;
}
/* pointer-events só bloqueia após arraste real — clique simples navega */
.yn-type-scroll.yn-drag-scroll.is-dragging a {
    cursor: grabbing;
}

/* 07/07/2026 - categorias sem underline @filipemontt */
.yn-type-scroll a.yn-type-item,
.yn-type-scroll a.yn-type-item:hover,
.yn-type-scroll a.yn-type-item:visited,
.yn-type-scroll a.yn-type-item:focus,
.yn-type-scroll a.yn-type-item:active,
.yn-type-scroll a.yn-type-item .yn-type-item__label {
    text-decoration: none !important;
    -webkit-text-decoration: none !important;
    text-decoration-line: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

a.yn-type-item,
a.yn-type-item:hover,
a.yn-type-item:visited,
a.yn-type-item:focus,
a.yn-type-item:active {
    text-decoration: none !important;
    color: inherit;
}

.yn-type-scroll.yn-drag-scroll a {
    text-decoration: none !important;
}

.yn-type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
.yn-type-item__icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    color: #374151;
    transition: background 0.2s ease, color 0.2s ease;
}
.yn-type-item.active .yn-type-item__icon,
.yn-type-item:hover .yn-type-item__icon {
    background: #000;
    color: #fff;
}
.yn-type-item__label {
    font-size: 0.75rem;
    color: #374151;
    text-decoration: none !important;
}

.yn-card-popular {
    display: block;
    background: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.75rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
}
.yn-card-popular:active { background: #f3f4f6; }
.yn-card-popular__thumb {
    height: 6rem;
    background: #e5e7eb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    color: #9ca3af;
    font-size: 2rem;
}
.yn-card-popular h3 { font-weight: 600; font-size: 0.875rem; margin-bottom: 0.25rem; }
.yn-card-popular__stars { margin-bottom: 0.25rem; }
.yn-card-popular__price { font-weight: 700; color: #000; }
.yn-card-popular__price span { color: #6b7280; font-weight: 400; font-size: 0.875rem; }

.yn-card-recommended {
    display: flex;
    background: #f9fafb;
    padding: 0.75rem;
    border-radius: 0.75rem;
    color: inherit;
    text-decoration: none;
    gap: 0.75rem;
}
.yn-card-recommended__thumb {
    width: 33%;
    max-width: 7rem;
    flex-shrink: 0;
    height: 6rem;
    background: #e5e7eb;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 2rem;
    overflow: hidden;
}
/* 27/08/2026 02:13 - Foto preenche o thumb no lugar do ícone @filipemontt */
.yn-card-recommended__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.yn-card-recommended__body { flex: 1; min-width: 0; }
.yn-card-recommended__body h3 { font-weight: 600; margin-bottom: 0.25rem; }
.yn-card-recommended__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}
.yn-card-recommended__price { font-weight: 700; color: #000; }
.yn-card-recommended__price span { color: #6b7280; font-weight: 400; font-size: 0.875rem; }

.yn-card-featured {
    display: block;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
    padding: 1rem;
    margin-bottom: 1rem;
    color: inherit;
    text-decoration: none;
    position: relative;
}
.yn-card-featured__thumb {
    position: relative;
    height: 10rem;
    background: #f3f4f6;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    color: #d1d5db;
    font-size: 3.5rem;
    overflow: hidden;
}
/* 27/08/2026 02:13 - Foto preenche o thumb no lugar do ícone @filipemontt */
.yn-card-featured__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.yn-card-featured__fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: #ef4444;
    background: none;
    border: none;
    font-size: 1.125rem;
    cursor: pointer;
    padding: 0.25rem;
}
.yn-card-featured__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.yn-card-featured__head h3 { font-weight: 600; }
.yn-card-featured__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.yn-card-featured__foot .yn-card-featured__price { font-weight: 700; color: #000; }
.yn-card-featured__foot .yn-card-featured__price span { color: #9ca3af; font-size: 0.75rem; font-weight: 400; }
.yn-card-featured__tags {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.yn-category-tabs {
    display: flex;
    background: #f3f4f6;
    border-radius: 0.75rem;
    padding: 0.25rem;
    margin-bottom: 1rem;
}
.yn-category-tabs button {
    flex: 1;
    padding: 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.yn-category-tabs button.chip-active {
    background: #000;
    color: #fff;
}

.yn-aluguel-section { margin-bottom: 2rem; }
.yn-aluguel-section.hidden { display: none; }

.yn-menu-card {
    display: flex;
    align-items: center;
    border: 1px solid #f3f4f6;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease;
}

.yn-menu-card:active { border-color: #d1d5db; }

/* 07/07/2026 - cards-link sem underline/azul (locacoes, profile, etc) @filipemontt */
a.yn-menu-card,
a.yn-menu-card:hover,
a.yn-menu-card:visited,
a.yn-menu-card:focus,
a.yn-menu-card:active {
    text-decoration: none !important;
    color: inherit;
}
a.yn-menu-card .yn-menu-card__body h3 { color: #111827; }
a.yn-menu-card .yn-menu-card__body p { color: #6b7280; }
a.yn-menu-card > i:last-child { color: #9ca3af; }

.yn-menu-card__icon {
    width: 3rem;
    height: 3rem;
    background: #000;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    flex-shrink: 0;
    color: #fff;
}

.yn-menu-card__body { flex: 1; min-width: 0; }
.yn-menu-card__body h3 { font-weight: 600; }
.yn-menu-card__body p { font-size: 0.875rem; color: #6b7280; }
.yn-menu-card > i:last-child { color: #9ca3af; margin-left: 0.5rem; }

.yn-list-card {
    display: flex;
    background: #f9fafb;
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease;
}

.yn-list-card:active { background: #f3f4f6; }

/* 07/07/2026 - list-card link sem underline/azul (mapa-busca, marinas, etc) @filipemontt */
a.yn-list-card,
a.yn-list-card:hover,
a.yn-list-card:visited,
a.yn-list-card:focus,
a.yn-list-card:active {
    text-decoration: none !important;
    color: inherit;
}
a.yn-list-card .yn-list-card__body h3 { color: #111827; }
a.yn-list-card .yn-list-card__body p { color: #6b7280; }
a.yn-list-card strong { color: #111827; }

.yn-list-card__thumb {
    width: 5rem;
    height: 5rem;
    background: #e5e7eb;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    flex-shrink: 0;
    color: #6b7280;
}

.yn-list-card__body h3 { font-weight: 600; }
.yn-list-card__body p { font-size: 0.75rem; color: #6b7280; }
.yn-list-card__price { font-weight: 700; margin-top: 0.25rem; }

.yn-form-label {
    display: block;
    font-size: 0.875rem;
    color: #4b5563;
    margin-bottom: 0.5rem;
}

.yn-input {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font: inherit;
}

.yn-fixed-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}

.yn-profile-hero {
    background: #000;
    padding: 1.5rem;
    padding-bottom: 4rem;
    color: #fff;
}

.yn-profile-sheet {
    background: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
    margin-top: -2.5rem;
    padding: 1.5rem;
    flex-grow: 1;
}

.yn-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #9ca3af;
    text-decoration: none;
}
.yn-nav-item.active { color: #000; font-weight: 600; }
.yn-nav-item i { font-size: 1.125rem; }
.yn-nav-item span { margin-top: 0.25rem; font-size: 0.75rem; }

/* 08/07/2026 - menu inferior sem underline em todas as telas @filipemontt */
nav.yn-bottom-nav a.yn-nav-item,
nav.yn-bottom-nav a.yn-nav-item:hover,
nav.yn-bottom-nav a.yn-nav-item:visited,
nav.yn-bottom-nav a.yn-nav-item:focus,
nav.yn-bottom-nav a.yn-nav-item:active,
nav.yn-bottom-nav a.yn-nav-item span,
nav.yn-bottom-nav a.yn-nav-item i {
    text-decoration: none !important;
}
nav.yn-bottom-nav a.yn-nav-item,
nav.yn-bottom-nav a.yn-nav-item:visited { color: #9ca3af; }
nav.yn-bottom-nav a.yn-nav-item.active,
nav.yn-bottom-nav a.yn-nav-item.active:visited,
nav.yn-bottom-nav a.yn-nav-item.active:hover { color: #000; }

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar { display: none; }

/* 06/07/2026 - links do índice de telas @filipemontt */
a.yn-index-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    border: 1px solid #f3f4f6;
    padding: 1rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease;
    text-decoration: none !important;
    color: inherit;
}
a.yn-index-link:hover { border-color: #d1d5db; }
a.yn-index-link > i:first-child {
    color: #9ca3af;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}
a.yn-index-link > div { flex: 1; min-width: 0; }
a.yn-index-link > i.yn-index-link__arrow {
    color: #d1d5db;
    font-size: 0.75rem;
    flex-shrink: 0;
}
a.yn-index-link .yn-index-link__title { font-weight: 600; font-size: 0.875rem; }
a.yn-index-link .yn-index-link__file { font-size: 0.75rem; color: #6b7280; }

/* 06/07/2026 - telas auth e índice sem depender do Tailwind @filipemontt */
body.yn-body-white { background: #fff; color: #111827; }
body.yn-body-muted { background: #f9fafb; color: #111827; }

.yn-auth-header { padding: 1rem 0 1.25rem; flex-shrink: 0; }
.yn-auth-header h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: #111827; }
.yn-auth-header p { font-size: 0.875rem; color: #6b7280; line-height: 1.4; }

.yn-auth-form {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    min-width: 0;
}
.yn-auth-social { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; flex-shrink: 0; }
.yn-btn-social {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid #d1d5db;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    cursor: pointer;
}

.yn-input-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}
.yn-input-wrap .yn-toggle-pw {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.yn-input--pw { padding-right: 3rem; }

.yn-auth-footer { text-align: center; font-size: 0.875rem; color: #4b5563; flex-shrink: 0; padding-bottom: 0.5rem; }
.yn-auth-footer a { font-weight: 500; color: #000; text-decoration: none; }
.yn-auth-footer a:hover { text-decoration: underline; }

.yn-auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: #4b5563;
    width: 100%;
    min-width: 0;
}
.yn-auth-terms span {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.yn-auth-terms input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    accent-color: #000;
}
.yn-auth-terms a { color: #000; font-weight: 500; }

.yn-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.875rem;
    color: #6b7280;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}
.yn-auth-divider::before,
.yn-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #d1d5db;
}

/* Nav inferior standalone (sem depender do Tailwind) */
nav.yn-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem;
    z-index: 50;
}
nav.yn-bottom-nav > div {
    display: flex;
    justify-content: space-around;
}

.yn-index-page {
    min-height: 100vh;
    padding: 1.5rem 1.5rem 2.5rem;
    max-width: 32rem;
    margin: 0 auto;
}

.yn-index-hero { margin-bottom: 2rem; }
.yn-index-logo {
    width: 3.5rem;
    height: 3.5rem;
    background: #000;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: #fff;
    font-size: 1.25rem;
}
.yn-index-hero h1 { font-size: 1.5rem; font-weight: 700; }
.yn-index-hero p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }

.yn-index-section { margin-bottom: 1.5rem; }
.yn-index-section-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.yn-index-section-head h2 { font-weight: 700; font-size: 1.125rem; }
.yn-index-section-head .icon-box,
.yn-index-section-head .icon-box-dark { width: 2rem; height: 2rem; font-size: 0.875rem; }
.yn-index-links { display: flex; flex-direction: column; gap: 0.5rem; }
.yn-index-footer { text-align: center; font-size: 0.75rem; color: #9ca3af; margin-top: 2rem; }
.yn-index-footer code { background: #e5e7eb; padding: 0 0.25rem; border-radius: 0.25rem; }

/* 06/07/2026 - Componentes UI profissionais por tipo de tela @filipemontt */
.yn-screen-map { padding: 0; padding-bottom: 5rem; min-height: 100vh; }
.yn-screen-map .yn-map-toolbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    padding: 1rem; background: linear-gradient(to bottom, rgba(255,255,255,0.95), transparent);
}
.yn-map-canvas {
    position: relative; height: 55vh; min-height: 280px;
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 40%, #f0fdf4 100%);
    overflow: hidden;
}
.yn-map-canvas::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.06) 1px, transparent 1px),
        radial-gradient(circle at 70% 60%, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 24px 24px, 32px 32px;
}
.yn-map-pin {
    position: absolute; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
    background: #000; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); font-size: 0.875rem;
}
.yn-map-pin--user { background: #2563eb; }
.yn-map-pin--alert { background: #dc2626; animation: yn-pulse 2s infinite; }
@keyframes yn-pulse { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.08); } }
.yn-map-float-card {
    position: absolute; bottom: 1rem; left: 1rem; right: 1rem;
    background: #fff; border-radius: 1rem; padding: 1rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 5;
}

.yn-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.yn-kpi-card {
    background: #f9fafb; border-radius: 0.75rem; padding: 0.875rem; text-align: center;
    border: 1px solid #f3f4f6;
}
.yn-kpi-card i { font-size: 1.125rem; color: #000; margin-bottom: 0.375rem; }
.yn-kpi-card strong { display: block; font-size: 1.125rem; font-weight: 700; }
.yn-kpi-card span { font-size: 0.6875rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.02em; }

.yn-stat-row { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 1.25rem; }
.yn-stat-pill {
    flex-shrink: 0; background: #000; color: #fff; border-radius: 9999px;
    padding: 0.625rem 1rem; font-size: 0.8125rem; font-weight: 500;
}
.yn-stat-pill--muted { background: #f3f4f6; color: #374151; }

.yn-segment-tabs {
    display: flex; background: #f3f4f6; border-radius: 0.75rem; padding: 0.25rem; margin-bottom: 1.25rem;
}
.yn-segment-tabs button {
    flex: 1; border: none; background: transparent; padding: 0.625rem 0.5rem;
    border-radius: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: #6b7280; cursor: pointer;
}
.yn-segment-tabs button.active { background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.yn-status {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem; border-radius: 9999px;
}
.yn-status--ok { background: #dcfce7; color: #166534; }
.yn-status--warn { background: #fef3c7; color: #92400e; }
.yn-status--info { background: #dbeafe; color: #1e40af; }
.yn-status--danger { background: #fee2e2; color: #991b1b; }
.yn-status--neutral { background: #f3f4f6; color: #374151; }

.yn-reserva-card {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem;
    padding: 1rem; margin-bottom: 0.875rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.yn-reserva-card__head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.75rem; }
.yn-reserva-card__thumb {
    width: 4rem; height: 4rem; border-radius: 0.75rem; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center; color: #6b7280; margin-right: 0.75rem; flex-shrink: 0;
}
.yn-reserva-card__body { flex: 1; min-width: 0; }
.yn-reserva-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: #6b7280; margin-top: 0.5rem; }
.yn-reserva-card__actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.yn-reserva-card__actions .yn-btn-sm { flex: 1; }

.yn-timeline { position: relative; padding-left: 1.5rem; margin: 1rem 0; }
.yn-timeline::before {
    content: ''; position: absolute; left: 0.4375rem; top: 0.5rem; bottom: 0.5rem;
    width: 2px; background: #e5e7eb;
}
.yn-timeline__item { position: relative; padding-bottom: 1.25rem; }
.yn-timeline__item::before {
    content: ''; position: absolute; left: -1.125rem; top: 0.25rem;
    width: 0.625rem; height: 0.625rem; border-radius: 9999px; background: #d1d5db; border: 2px solid #fff;
}
.yn-timeline__item.done::before { background: #000; }
.yn-timeline__item.active::before { background: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.2); }
.yn-timeline__item h4 { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.125rem; }
.yn-timeline__item p { font-size: 0.75rem; color: #6b7280; }

.yn-checkout-box {
    background: #f9fafb; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem;
    border: 1px solid #f3f4f6;
}
.yn-checkout-row { display: flex; justify-content: space-between; font-size: 0.875rem; padding: 0.375rem 0; }
.yn-checkout-row.total { font-weight: 700; font-size: 1rem; border-top: 1px solid #e5e7eb; margin-top: 0.5rem; padding-top: 0.75rem; }
.yn-checkout-row span:last-child { font-weight: 500; }

.yn-payment-option {
    display: flex; align-items: center; gap: 0.75rem; padding: 1rem;
    border: 2px solid #f3f4f6; border-radius: 0.75rem; margin-bottom: 0.75rem; cursor: pointer;
}
.yn-payment-option.selected { border-color: #000; background: #fafafa; }
.yn-payment-option__icon {
    width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
}

.yn-hero-dark {
    background: #000; color: #fff; border-radius: 1rem; padding: 1.25rem;
    margin-bottom: 1.25rem; position: relative; overflow: hidden;
}
.yn-hero-dark::after {
    content: ''; position: absolute; right: -1rem; top: -1rem; width: 6rem; height: 6rem;
    border-radius: 9999px; background: rgba(255,255,255,0.06);
}
.yn-hero-dark h2 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; position: relative; z-index: 1; }
.yn-hero-dark p { font-size: 0.8125rem; color: rgba(255,255,255,0.75); position: relative; z-index: 1; }

.yn-sos-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    width: 100%; padding: 1.25rem; border-radius: 1rem; border: none;
    background: linear-gradient(135deg, #dc2626, #b91c1c); color: #fff;
    font-size: 1.125rem; font-weight: 700; cursor: pointer;
    box-shadow: 0 8px 20px rgba(220,38,38,0.35);
}
.yn-sos-btn i { font-size: 1.5rem; }

.yn-alert-banner {
    display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem;
    border-radius: 0.75rem; font-size: 0.8125rem; margin-bottom: 1rem;
}
.yn-alert-banner--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.yn-alert-banner--info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.yn-alert-banner--danger { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

a.yn-alert-banner,
a.yn-alert-banner:hover,
a.yn-alert-banner:visited,
a.yn-alert-banner:focus,
a.yn-alert-banner:active {
    text-decoration: none !important;
}
a.yn-alert-banner--info,
a.yn-alert-banner--info:visited { color: #1e40af; }
a.yn-alert-banner--info strong { color: #1e3a8a; }
a.yn-alert-banner--warn,
a.yn-alert-banner--warn:visited { color: #92400e; }
a.yn-alert-banner--danger,
a.yn-alert-banner--danger:visited { color: #991b1b; }

.yn-spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin: 1rem 0; }
.yn-spec-item { background: #f9fafb; border-radius: 0.75rem; padding: 0.75rem; text-align: center; }
.yn-spec-item strong { display: block; font-size: 1rem; }
.yn-spec-item span { font-size: 0.6875rem; color: #6b7280; text-transform: uppercase; }

.yn-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 0; border-bottom: 1px solid #f3f4f6;
}
.yn-toggle-row:last-child { border-bottom: none; }
.yn-toggle {
    width: 2.75rem; height: 1.5rem; border-radius: 9999px; background: #d1d5db;
    position: relative; cursor: pointer; border: none; flex-shrink: 0;
}
.yn-toggle.on { background: #000; }
.yn-toggle::after {
    content: ''; position: absolute; top: 0.125rem; left: 0.125rem;
    width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: #fff;
    transition: transform 0.2s;
}
.yn-toggle.on::after { transform: translateX(1.25rem); }

.yn-steps { display: flex; align-items: center; margin-bottom: 1.5rem; }
.yn-step {
    flex: 1; text-align: center; font-size: 0.6875rem; color: #9ca3af; position: relative;
}
.yn-step::after {
    content: ''; position: absolute; top: 0.75rem; left: 50%; width: 100%; height: 2px; background: #e5e7eb; z-index: 0;
}
.yn-step:last-child::after { display: none; }
.yn-step__dot {
    width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #e5e7eb;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 0.375rem;
    font-size: 0.6875rem; font-weight: 600; position: relative; z-index: 1;
}
.yn-step.done .yn-step__dot { background: #000; color: #fff; }
.yn-step.active .yn-step__dot { background: #2563eb; color: #fff; }
.yn-step.active { color: #000; font-weight: 600; }

.yn-notif-item {
    display: flex; gap: 0.75rem; padding: 0.875rem; background: #fff;
    border-radius: 0.75rem; margin-bottom: 0.5rem; border: 1px solid #f3f4f6;
}
a.yn-notif-item {
    text-decoration: none !important;
    color: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
a.yn-notif-item:hover { border-color: #d1d5db; }
a.yn-notif-item:active { background: #f3f4f6; }
a.yn-notif-item strong { color: #111827; font-weight: 600; }
a.yn-notif-item p { color: #6b7280; margin: 0.125rem 0 0; }
a.yn-notif-item span { color: #9ca3af; }
.yn-notif-item.unread { background: #fafafa; border-color: #e5e7eb; }
a.yn-notif-item.unread strong { color: #000; }

.yn-notif-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
}
.yn-notif-group-title + .yn-notif-group-title,
.yn-notif-group-title.mt-section { margin-top: 1.5rem; }

.yn-page-header__action {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #000;
    cursor: pointer;
    padding: 0.25rem 0;
    text-decoration: none;
}
.yn-page-header__action:hover { opacity: 0.7; }

.yn-notif-item__icon {
    width: 2.5rem; height: 2.5rem; border-radius: 9999px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.875rem;
}
.yn-notif-item__icon--reserva { background: #dbeafe; color: #1d4ed8; }
.yn-notif-item__icon--pagamento { background: #dcfce7; color: #166534; }
.yn-notif-item__icon--gps { background: #fef3c7; color: #b45309; }
.yn-notif-item__icon--marina { background: #f3e8ff; color: #7c3aed; }

.yn-faq-item { border-bottom: 1px solid #f3f4f6; padding: 0.875rem 0; }
.yn-faq-item summary { font-weight: 600; font-size: 0.875rem; cursor: pointer; list-style: none; }
.yn-faq-item summary::-webkit-details-marker { display: none; }
.yn-faq-item p { font-size: 0.8125rem; color: #6b7280; margin-top: 0.5rem; line-height: 1.5; }

.yn-provider-card {
    display: flex; gap: 0.875rem; padding: 1rem; background: #fff;
    border: 1px solid #f3f4f6; border-radius: 1rem; margin-bottom: 0.75rem;
}
.yn-provider-card__avatar {
    width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.yn-provider-card__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }

.yn-slot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.yn-slot {
    padding: 0.625rem 0.25rem; text-align: center; border-radius: 0.5rem;
    font-size: 0.75rem; border: 1px solid #e5e7eb; background: #fff; cursor: pointer;
}
.yn-slot.busy { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }
.yn-slot.selected { background: #000; color: #fff; border-color: #000; }

.yn-route-card {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 1rem; padding: 1rem; margin-bottom: 0.75rem;
}
.yn-route-card__line {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; margin: 0.375rem 0;
}
.yn-route-card__dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #000; flex-shrink: 0; }
.yn-route-card__dot--end { background: #2563eb; }

.yn-voucher-card {
    background: linear-gradient(135deg, #000 0%, #374151 100%); color: #fff;
    border-radius: 1rem; padding: 1.25rem; margin-bottom: 0.875rem; position: relative; overflow: hidden;
}
.yn-voucher-card::before {
    content: ''; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; background: #f9fafb; border-radius: 9999px;
}
.yn-voucher-card::after {
    content: ''; position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%);
    width: 1rem; height: 1rem; background: #f9fafb; border-radius: 9999px;
}

.yn-btn-sm {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem;
    padding: 0.5rem 0.875rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500;
    border: 1px solid #e5e7eb; background: #fff; cursor: pointer; text-decoration: none; color: inherit;
}
.yn-btn-sm--dark { background: #000; color: #fff; border-color: #000; }
.yn-btn-sm--outline { background: transparent; }

.yn-date-bar {
    display: flex; gap: 0.5rem; background: #f9fafb; border-radius: 0.75rem; padding: 0.75rem; margin-bottom: 1.25rem;
}
.yn-date-bar__item { flex: 1; text-align: center; }
.yn-date-bar__item label { font-size: 0.6875rem; color: #6b7280; text-transform: uppercase; display: block; }
.yn-date-bar__item strong { font-size: 0.875rem; display: block; margin-top: 0.125rem; }

.yn-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.yn-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.375rem 0.75rem; border-radius: 9999px; font-size: 0.75rem;
    background: #f3f4f6; color: #374151; border: none; cursor: pointer;
}
.yn-chip.active { background: #000; color: #fff; }

.yn-progress-ring {
    width: 4rem; height: 4rem; border-radius: 9999px;
    background: conic-gradient(#000 0% 72%, #e5e7eb 72% 100%);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem;
}
.yn-progress-ring span {
    width: 3rem; height: 3rem; border-radius: 9999px; background: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}

.yn-camera-scan {
    border: 2px dashed #d1d5db; border-radius: 1rem; padding: 2rem 1rem; text-align: center;
    background: #fafafa; margin: 1rem 0;
}
.yn-camera-scan i { font-size: 2.5rem; color: #9ca3af; margin-bottom: 0.75rem; }

.yn-wallet-balance {
    text-align: center; padding: 1.5rem; background: #000; color: #fff; border-radius: 1rem; margin-bottom: 1.25rem;
}
.yn-wallet-balance strong { font-size: 2rem; font-weight: 700; display: block; }
.yn-wallet-balance span { font-size: 0.8125rem; opacity: 0.75; }

.yn-waypoint-list { margin: 1rem 0; }
.yn-waypoint {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem;
    background: #f9fafb; border-radius: 0.75rem; margin-bottom: 0.5rem;
}
.yn-waypoint__num {
    width: 1.75rem; height: 1.75rem; border-radius: 9999px; background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0;
}

.yn-category-tile {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 1rem 0.5rem; border-radius: 1rem; background: #f9fafb; border: 1px solid #f3f4f6;
    text-decoration: none; color: inherit; transition: border-color 0.2s;
}
.yn-category-tile:active { border-color: #000; }
.yn-category-tile__icon {
    width: 3rem; height: 3rem; border-radius: 9999px; background: #000; color: #fff;
    display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; font-size: 1.125rem;
}
.yn-category-tile span { font-size: 0.75rem; font-weight: 600; }

a.yn-category-tile,
a.yn-category-tile:hover,
a.yn-category-tile:visited,
a.yn-category-tile:focus,
a.yn-category-tile:active,
a.yn-category-tile span {
    text-decoration: none !important;
    color: inherit;
}
a.yn-category-tile span { color: #111827; }

.yn-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.yn-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }

.yn-page-sub { font-size: 0.875rem; color: #6b7280; margin-top: -0.5rem; margin-bottom: 1.25rem; }

.min-w-0 { min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-6xl { font-size: 3.75rem; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leading-relaxed { line-height: 1.625; }
.uppercase { text-transform: uppercase; }
.rounded-full { border-radius: 9999px; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.border-t { border-top: 1px solid #e5e7eb; }
.space-y-4 > * + * { margin-top: 1rem; }
.pb-nav { padding-bottom: 5.5rem; }

/* 08/07/2026 - links de UI do app sem underline (:visited incluído) @filipemontt */
.yn-section-header a.text-sm,
.yn-section-header a.text-sm:hover,
.yn-section-header a.text-sm:visited,
.yn-section-header a.text-sm:focus {
    text-decoration: none !important;
    color: #000;
    font-weight: 500;
}

a.yn-card-popular,
a.yn-card-popular:hover,
a.yn-card-popular:visited,
a.yn-card-featured,
a.yn-card-featured:hover,
a.yn-card-featured:visited,
a.yn-card-recommended,
a.yn-card-recommended:hover,
a.yn-card-recommended:visited {
    text-decoration: none !important;
    color: inherit;
}

a.yn-index-link:hover,
a.yn-index-link:visited,
a.yn-index-link:focus {
    text-decoration: none !important;
    color: inherit;
}
a.yn-index-link .yn-index-link__title { color: #111827; }
a.yn-index-link .yn-index-link__file { color: #6b7280; }

/* 27/08/2026 - Home travel UI + offcanvas swipe @filipemontt */
.yn-home-screen {
    padding: 1.5rem 1.25rem 1rem;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
}

.yn-home-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.yn-home-header__copy {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* 27/08/2026 02:24 - 10px entre cidade e título; zera margem do h1 @filipemontt */
.yn-home-location {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    cursor: pointer;
}

.yn-home-location i {
    font-size: 0.5rem;
}

.yn-home-title {
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #111827;
    margin: 0;
}

.yn-home-avatar {
    width: 3rem;
    height: 3rem;
    margin-top: 30px;
    border-radius: 9999px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.yn-home-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yn-search-bar--pill input {
    border-radius: 9999px;
    padding: 0.875rem 3.5rem 0.875rem 3rem;
    background: #f5f5f5;
    font-size: 0.9375rem;
}

.yn-search-bar--pill .yn-search-bar__filter {
    background: transparent;
    color: #6b7280;
    border-radius: 9999px;
    padding: 0.5rem 0.75rem;
    border: none;
    cursor: pointer;
    font: inherit;
    line-height: 1;
    -webkit-appearance: none;
    appearance: none;
}

.yn-search-bar--pill .yn-search-bar__filter:hover {
    color: #111827;
}

button.yn-search-bar__filter,
button.yn-search-bar__filter:hover,
button.yn-search-bar__filter:focus,
button.yn-search-bar__filter:active {
    text-decoration: none;
    outline: none;
}

.yn-home-section {
    margin-bottom: 1.75rem;
}

.yn-home-section__title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #111827;
}

.yn-home-tabs {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.yn-home-tabs::-webkit-scrollbar { display: none; }

.yn-home-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0 0 0.5rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #9ca3af;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.yn-home-tab.active {
    color: #111827;
    font-weight: 600;
}

.yn-home-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1.25rem;
    height: 3px;
    border-radius: 9999px;
    background: #ef4444;
}

.yn-places-scroll {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin: 0 -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.yn-places-scroll::-webkit-scrollbar { display: none; }

.yn-places-scroll.yn-drag-scroll {
    overflow-x: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
}

.yn-places-scroll.yn-drag-scroll.is-dragging {
    cursor: grabbing;
}

.yn-place-card {
    flex-shrink: 0;
    width: 11.5rem;
    border-radius: 1.5rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.yn-place-card:active {
    transform: scale(0.98);
}

.yn-place-card__media {
    position: relative;
    height: 13rem;
    background: #e5e7eb;
    overflow: hidden;
}

.yn-place-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yn-place-card__fav {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
}

.yn-place-card__fav.is-active {
    color: #ef4444;
}

.yn-place-card__body {
    padding: 0.875rem 1rem 1rem;
}

.yn-place-card__body h3 {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.25rem;
    line-height: 1.25;
}

.yn-place-card__location {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.yn-transport-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.yn-transport-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
    flex: 1;
}

.yn-transport-item__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    color: #111111;
    transition: transform 0.2s ease;
}

.yn-transport-item:active .yn-transport-item__icon {
    transform: scale(0.95);
}

/* 31/08/2026 04:20 - Ícones monocromáticos pretos @filipemontt */
.yn-transport-item__icon--blue,
.yn-transport-item__icon--navy,
.yn-transport-item__icon--yellow,
.yn-transport-item__icon--lime {
    color: #111111;
}

.yn-transport-item__label {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}

.yn-recommended-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.yn-card-recommended--compact {
    background: #f9fafb;
    border-radius: 1.25rem;
    padding: 0.75rem;
}

.yn-card-recommended--compact .yn-card-recommended__thumb {
    border-radius: 1rem;
    height: 5rem;
}

/* Nav inferior flutuante estilo travel */
.pb-nav-pill {
    padding-bottom: 6rem;
}

/* 31/08/2026 03:06 - Margem lateral do pill nav reduzida @filipemontt */
nav.yn-bottom-nav--pill {
    background: transparent;
    border-top: none;
    padding: 0 0.75rem 1.25rem;
    pointer-events: none;
}

nav.yn-bottom-nav--pill > div {
    background: #111827;
    border-radius: 9999px;
    padding: 0.875rem 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    justify-content: space-between;
    /* 31/08/2026 03:05 - Largura ampliada para 5 ícones (Favoritos) @filipemontt */
    max-width: 24rem;
    margin: 0 auto;
}

nav.yn-bottom-nav--pill a.yn-nav-item,
nav.yn-bottom-nav--pill a.yn-nav-item:visited {
    color: rgba(255, 255, 255, 0.45);
    position: relative;
    padding: 0.25rem 0.5rem;
}

nav.yn-bottom-nav--pill a.yn-nav-item i {
    font-size: 1.25rem;
}

nav.yn-bottom-nav--pill a.yn-nav-item span {
    display: none;
}

nav.yn-bottom-nav--pill a.yn-nav-item.active,
nav.yn-bottom-nav--pill a.yn-nav-item.active:visited,
nav.yn-bottom-nav--pill a.yn-nav-item.active:hover {
    color: #fff;
}

nav.yn-bottom-nav--pill a.yn-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: -0.375rem;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: #fff;
}

/* Offcanvas aprimorado com handle e swipe (variante sheet) */
.yn-offcanvas--sheet .yn-offcanvas-panel {
    display: flex;
    flex-direction: column;
    border-radius: 1.75rem 1.75rem 0 0;
    padding: 0;
    max-height: 92vh;
    will-change: transform;
    overflow-y: hidden;
}

.yn-offcanvas--sheet .yn-offcanvas-panel.is-dragging {
    transition: none !important;
}

.yn-offcanvas-handle {
    width: 2.5rem;
    height: 4px;
    border-radius: 9999px;
    background: #d1d5db;
    margin: 0.75rem auto 0;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none;
}

.yn-offcanvas-handle:active {
    cursor: grabbing;
}

.yn-offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1rem 1.5rem 0.5rem;
    flex-shrink: 0;
}

.yn-offcanvas-header__title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.yn-offcanvas-header__subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

.yn-offcanvas-clear {
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
}

.yn-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1.5rem 1rem;
    -webkit-overflow-scrolling: touch;
}

.yn-offcanvas-label {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.75rem;
}

.yn-offcanvas-footer {
    padding: 1rem 1.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    border-top: 1px solid #f3f4f6;
    flex-shrink: 0;
    background: #fff;
}

.yn-offcanvas.open .yn-offcanvas--sheet .yn-offcanvas-panel {
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.yn-offcanvas:not(.open) .yn-offcanvas--sheet .yn-offcanvas-panel {
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

body.yn-offcanvas-open {
    overflow: hidden;
    touch-action: none;
}