/* ============================================
   pmarau — Design System Premium
   Portal da Península de Maraú · Bahia
   Turismo costeiro + Apple sophistication
   ============================================ */

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

:root {
    /* ── Brand & Turismo ── */
    --orange:         #FF6B00;
    --orange-dark:    #D95A00;
    --orange-light:   #FF8C38;
    --orange-pale:    #FFF4EC;
    --orange-glow:    rgba(255,107,0,0.18);

    --ocean:          #006994;
    --ocean-dark:     #004E70;
    --ocean-mid:      #0096C7;
    --ocean-light:    #90E0EF;
    --ocean-pale:     #EBF8FF;

    --teal:           #00B4A0;
    --teal-pale:      #E0FAF7;

    --sand:           #F5E6C8;
    --sand-dark:      #E8C98A;

    --navy:           #0A1F3C;
    --navy-mid:       #163259;
    --navy-light:     #1E4A80;

    /* ── Neutros (Apple scale) ── */
    --black:   #080C12;
    --gray-9:  #1C1C1E;
    --gray-8:  #2C2C2E;
    --gray-7:  #3A3A3C;
    --gray-6:  #636366;
    --gray-5:  #8E8E93;
    --gray-4:  #AEAEB2;
    --gray-3:  #C7C7CC;
    --gray-2:  #E5E5EA;
    --gray-1:  #F2F2F7;
    --white:   #FFFFFF;

    /* ── Semânticos ── */
    --bg:          #FAFAFA;
    --surface:     #FFFFFF;
    --surface-2:   #F5F5F7;
    --border:      rgba(0,0,0,0.08);
    --border-med:  rgba(0,0,0,0.14);
    --text:        #1A1A1E;
    --text-muted:  #5C5C6E;
    --text-faint:  #AEAEB2;

    /* ── Tipografia ── */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* ── Radii ── */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   14px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  40px;
    --r-full: 9999px;

    /* ── Sombras ── */
    --sh-xs:  0 1px 3px rgba(0,0,0,0.06);
    --sh-sm:  0 2px 8px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    --sh-md:  0 6px 20px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.05);
    --sh-lg:  0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
    --sh-xl:  0 24px 64px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.08);
    --sh-ocean: 0 8px 32px rgba(0,105,148,0.22);
    --sh-orange: 0 6px 24px rgba(255,107,0,0.32);

    /* ── Espaçamento ── */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
    --s6:24px; --s7:28px; --s8:32px; --s10:40px; --s12:48px;
    --s14:56px; --s16:64px; --s20:80px; --s24:96px;

    /* ── Animações ── */
    --ease:     cubic-bezier(0.25,0.46,0.45,0.94);
    --ease-out: cubic-bezier(0.0,0.0,0.2,1);
    --spring:   cubic-bezier(0.34,1.56,0.64,1);
    --fast:     180ms;
    --base:     280ms;
    --slow:     460ms;
}

/* ════════════════════════════════════════════
   BASE
════════════════════════════════════════════ */
html { font-size:16px; scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.55; overflow-x:hidden; }
img  { display:block; max-width:100%; }
a    { color:inherit; }

/* ════════════════════════════════════════════
   TIPOGRAFIA
════════════════════════════════════════════ */
.t-hero    { font-size:clamp(2.8rem,6vw,5rem);   font-weight:800; letter-spacing:-0.035em; line-height:1.04; }
.t-display { font-size:clamp(2.2rem,4.5vw,3.6rem); font-weight:750; letter-spacing:-0.03em;  line-height:1.08; }
.t-xl      { font-size:clamp(1.6rem,3.2vw,2.4rem); font-weight:700; letter-spacing:-0.025em; line-height:1.14; }
.t-lg      { font-size:clamp(1.25rem,2.4vw,1.75rem); font-weight:650; letter-spacing:-0.02em; line-height:1.22; }
.t-md      { font-size:1.1875rem; font-weight:600; letter-spacing:-0.015em; line-height:1.32; }
.t-sm      { font-size:0.9375rem; font-weight:400; line-height:1.6; }
.t-xs      { font-size:0.8125rem; font-weight:400; line-height:1.55; }
.t-label   { font-size:0.6875rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }

/* ════════════════════════════════════════════
   LAYOUT
════════════════════════════════════════════ */
.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--s6); }
.container-wide { max-width:1400px; margin:0 auto; padding:0 var(--s6); }
@media(max-width:768px){ .container,.container-wide { padding:0 var(--s5); } }

/* Reduz espaçamento de seções no mobile */
@media(max-width:767px){
    :root {
        --s20: 40px;
        --s16: 32px;
        --s12: 32px;
    }
    .section    { padding:40px 0; }
    .section-sm { padding:28px 0; }
    .section-xs { padding:20px 0; }
}

/* ════════════════════════════════════════════
   NAVEGAÇÃO
════════════════════════════════════════════ */
.nav {
    position:fixed; top:0; left:0; right:0; z-index:200;
    height:64px;
    background:rgba(255,255,255,0.88);
    backdrop-filter:blur(24px) saturate(200%);
    -webkit-backdrop-filter:blur(24px) saturate(200%);
    border-bottom:1px solid rgba(255,255,255,0.3);
    transition:background var(--base) var(--ease),
               box-shadow var(--base) var(--ease),
               border-color var(--base) var(--ease);
}
.nav.dark {
    background:rgba(10,31,60,0.90);
    border-bottom-color:rgba(255,255,255,0.08);
}
.nav.scrolled { box-shadow:var(--sh-sm); border-bottom-color:var(--border); }

.nav-inner {
    display:flex; align-items:center; justify-content:space-between;
    height:100%; max-width:1280px; margin:0 auto; padding:0 var(--s6);
}

.nav-logo {
    display:flex; align-items:center; gap:10px;
    text-decoration:none; flex-shrink:0;
}
.nav-logo-mark {
    width:36px; height:36px;
    background:var(--orange);
    border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(255,107,0,0.35);
    transition:transform var(--fast) var(--spring);
}
.nav-logo:hover .nav-logo-mark { transform:scale(1.08); }
.nav-logo-text { font-size:1.125rem; font-weight:800; letter-spacing:-0.03em; color:var(--text); }
.nav.dark .nav-logo-text { color:var(--white); }

.nav-links { display:flex; align-items:center; gap:0; list-style:none; }
.nav-links a {
    display:block; padding:7px 10px; white-space:nowrap;
    font-size:0.85rem; font-weight:500; letter-spacing:-0.012em;
    color:var(--text-muted); text-decoration:none;
    border-radius:var(--r-sm);
    transition:color var(--fast), background var(--fast);
}
.nav-links a:hover { color:var(--text); background:rgba(0,0,0,0.05); }
.nav-links a.active { color:var(--orange); background:var(--orange-pale); }
.nav.dark .nav-links a { color:rgba(255,255,255,0.7); }
.nav.dark .nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.1); }
.nav.dark .nav-links a.active { color:var(--white); background:rgba(255,255,255,0.15); }

/* ─── NAV: grupos com dropdown ─────────────────────────────────────── */
.nav-links { gap:2px; }
.nav-group { position:relative; }
.nav-group-trigger {
    display:inline-flex; align-items:center; gap:5px;
    padding:8px 13px; border:none; background:none; cursor:pointer;
    font-family:inherit; font-size:0.875rem; font-weight:600; letter-spacing:-0.012em;
    color:var(--text-muted); border-radius:var(--r-sm);
    transition:color var(--fast), background var(--fast);
}
.nav-group-trigger:hover { color:var(--text); background:rgba(0,0,0,0.05); }
.nav-group.is-active > .nav-group-trigger { color:var(--orange); }
.nav-caret { font-size:0.68rem; opacity:0.55; transition:transform var(--fast) var(--ease); }
.nav-group:hover .nav-caret,
.nav-group.open .nav-caret,
.nav-group:focus-within .nav-caret { transform:rotate(180deg); }
.nav.dark .nav-group-trigger { color:rgba(255,255,255,0.72); }
.nav.dark .nav-group-trigger:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav.dark .nav-group.is-active > .nav-group-trigger { color:#fff; }

.nav-dropdown {
    position:absolute; top:calc(100% + 12px); left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:312px; padding:8px;
    background:var(--surface,#fff); border:1px solid var(--border);
    border-radius:18px; box-shadow:0 18px 50px rgba(15,30,55,0.18);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    z-index:250;
}
/* ponte invisível: evita que o hover "caia" no espaço entre gatilho e painel */
.nav-dropdown::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; }
.nav-group:hover > .nav-dropdown,
.nav-group.open > .nav-dropdown,
.nav-group:focus-within > .nav-dropdown {
    opacity:1; visibility:visible; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.nav-group:hover > .nav-dropdown { transition-delay:.12s; }   /* intenção de hover */
.nav-dropdown-inner { display:flex; flex-direction:column; gap:2px; }
.nav-links .nav-dd-item {
    display:flex; align-items:center; gap:12px;
    padding:9px 11px; border-radius:12px; text-decoration:none;
    background:none; transition:background var(--fast);
}
.nav-links .nav-dd-item:hover { background:var(--surface-2); }
.nav-links .nav-dd-item.active { background:var(--orange-pale); }
.nav-dd-ic {
    width:38px; height:38px; flex-shrink:0; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:var(--orange-pale); color:var(--orange); font-size:1.05rem;
    transition:background var(--fast), color var(--fast);
}
.nav-dd-item:hover .nav-dd-ic { background:var(--orange); color:#fff; }
.nav-dd-item.active .nav-dd-ic { background:var(--orange); color:#fff; }
.nav-dd-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.nav-dd-label { font-size:0.9rem; font-weight:700; color:var(--text); letter-spacing:-0.01em; }
.nav-dd-item.active .nav-dd-label { color:var(--orange); }
.nav-dd-desc { font-size:0.75rem; color:var(--text-faint); line-height:1.3; }

.nav-links .nav-direct-plans {
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 15px; margin-left:5px;
    font-size:0.875rem; font-weight:700; letter-spacing:-0.012em;
    color:var(--orange); text-decoration:none; border-radius:var(--r-full);
    border:1.5px solid var(--orange-pale); background:none;
    transition:all var(--fast) var(--ease);
}
.nav-links .nav-direct-plans:hover { background:var(--orange-pale); }
.nav-links .nav-direct-plans.active { background:var(--orange); color:#fff; border-color:var(--orange); }
.nav.dark .nav-links .nav-direct-plans { border-color:rgba(255,107,0,0.5); }

/* ─── Drawer mobile: seções agrupadas ──────────────────────────────── */
.drawer-section { margin-bottom:6px; }
.drawer-section + .drawer-section { border-top:1px solid var(--border); padding-top:8px; margin-top:8px; }
.drawer-section-title {
    font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--text-faint); padding:6px 12px 4px;
}
.drawer-link {
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; border-radius:12px; text-decoration:none;
    transition:background .15s;
}
.drawer-link:hover { background:var(--surface-2); }
.drawer-link.is-active { background:var(--orange-pale); }
.drawer-link-ic {
    width:38px; height:38px; flex-shrink:0; border-radius:11px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); color:var(--gray-5); font-size:1.05rem;
}
.drawer-link.is-active .drawer-link-ic { background:var(--orange); color:#fff; }
.drawer-link-label { display:block; font-size:0.9375rem; font-weight:600; color:var(--text); }
.drawer-link.is-active .drawer-link-label { color:var(--orange); }
.drawer-link-desc { display:block; font-size:0.75rem; color:var(--text-faint); margin-top:1px; }
.drawer-link--plans .drawer-link-ic { background:var(--orange-pale); color:var(--orange); }

.nav-cta {
    display:inline-flex; align-items:center; gap:6px;
    padding:0 18px; height:38px;
    background:var(--orange); color:#fff;
    font-size:0.875rem; font-weight:600;
    border-radius:var(--r-full); text-decoration:none;
    box-shadow:0 2px 8px rgba(255,107,0,0.28);
    transition:all var(--fast) var(--ease);
    white-space:nowrap;
}
.nav-cta:hover { background:var(--orange-dark); transform:translateY(-1px); box-shadow:var(--sh-orange); }

/* ════════════════════════════════════════════
   HERO — Oceano Premium
════════════════════════════════════════════ */
.hero-ocean {
    position:relative; min-height:100svh;
    display:flex; align-items:center;
    padding-top:64px; overflow:hidden;
    background:linear-gradient(160deg, var(--navy) 0%, var(--ocean-dark) 45%, var(--ocean) 80%, #0096C7 100%);
}
@media(max-width:767px) {
    /* Hero mobile: altura para mostrar fundo, subtítulo e chips com folga */
    .hero-ocean { min-height:68svh; align-items:flex-start; padding-top:80px; padding-bottom:0; }
    .hero-ocean-body { padding-bottom:140px !important; } /* espaço para seta + onda (100px) */
    /* Vídeo de fundo: esconde no mobile para não cobrir a imagem fallback */
    .hero-bg-video { display:none !important; }
    .t-hero { font-size: clamp(1.75rem, 8.5vw, 2.25rem); letter-spacing:-0.025em; line-height:1.1; }
}
.hero-ocean::before {
    content:'';
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(0,180,160,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 50% 70% at 20% 80%, rgba(255,107,0,0.12) 0%, transparent 50%);
    pointer-events:none;
}
/* wave divider — must stay above custom bg image */
.hero-ocean::after {
    content:'';
    position:absolute; bottom:-1px; left:0; right:0; z-index:2;
    height:60px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23FAFAFA' d='M0,40 C240,55 480,25 720,40 C960,55 1200,25 1440,40 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size:100% 100%;
    pointer-events:none;
}
/* when custom bg image is used — hide the default decorative ::before overlay */
.hero-ocean.has-custom-bg::before { display:none; }

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

/* ════════════════════════════════════════════
   SEÇÕES
════════════════════════════════════════════ */
.section      { padding:var(--s20) 0; }
.section-sm   { padding:var(--s12) 0; }
.section-xs   { padding:var(--s8) 0; }

.section-eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--orange); margin-bottom:var(--s4);
}
.section-eyebrow.light { color:rgba(255,255,255,0.75); }

/* Wave dividers */
.wave-top { margin-top:-2px; }
.wave-top svg { display:block; width:100%; }

/* ════════════════════════════════════════════
   BOTÕES
════════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:0 22px; height:44px;
    border:none; border-radius:var(--r-full);
    font-family:var(--font); font-size:0.9375rem; font-weight:600;
    cursor:pointer; text-decoration:none;
    transition:all var(--fast) var(--ease);
    white-space:nowrap; letter-spacing:-0.01em;
}
.btn-primary   { background:var(--orange); color:#fff; box-shadow:0 2px 10px rgba(255,107,0,0.3); }
.btn-primary:hover { background:var(--orange-dark); transform:translateY(-2px); box-shadow:var(--sh-orange); }
.btn-ocean     { background:var(--ocean); color:#fff; box-shadow:var(--sh-ocean); }
.btn-ocean:hover { background:var(--ocean-dark); transform:translateY(-2px); }
.btn-white     { background:#fff; color:var(--navy); box-shadow:var(--sh-sm); }
.btn-white:hover { background:var(--gray-1); transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn-outline-white { background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.3); backdrop-filter:blur(8px); }
.btn-outline-white:hover { background:rgba(255,255,255,0.22); }
.btn-ghost     { background:transparent; color:var(--text-muted); }
.btn-ghost:hover { background:var(--gray-1); color:var(--text); }
.btn-ghost-dark { background:transparent; color:rgba(255,255,255,0.7); }
.btn-ghost-dark:hover { background:rgba(255,255,255,0.1); color:#fff; }

.btn-lg { height:54px; padding:0 30px; font-size:1.0625rem; }
.btn-sm { height:36px; padding:0 16px; font-size:0.8125rem; }
.btn-xs { height:30px; padding:0 12px; font-size:0.75rem; font-weight:600; }
.btn-icon { width:44px; height:44px; padding:0; border-radius:var(--r-full); background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); }
.btn-icon:hover { background:rgba(255,255,255,0.2); transform:none; }
.btn-icon.dark { background:var(--gray-1); color:var(--text-muted); }
.btn-icon.dark:hover { background:var(--gray-2); color:var(--text); box-shadow:none; }

/* ════════════════════════════════════════════
   CARDS — Portal
════════════════════════════════════════════ */
.card {
    background:var(--surface);
    border-radius:var(--r-lg);
    border:1px solid var(--border);
    overflow:hidden;
    transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--fast);
}
.card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:var(--border-med); }
.card-body  { padding:var(--s5); }

/* ── Turismo Card ── */
.card-turismo {
    position:relative; border-radius:var(--r-xl); overflow:hidden;
    aspect-ratio:4/5; cursor:pointer;
    background:var(--navy);
    transition:transform var(--base) var(--ease), box-shadow var(--base) var(--ease);
}
.card-turismo:hover { transform:translateY(-6px) scale(1.01); box-shadow:var(--sh-xl); }
.card-turismo img {
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; transition:transform var(--slow) var(--ease);
}
.card-turismo:hover img { transform:scale(1.07); }
.card-turismo-overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(8,18,30,0.85) 0%, rgba(8,18,30,0.2) 50%, transparent 100%);
}
.card-turismo-body {
    position:absolute; bottom:0; left:0; right:0;
    padding:var(--s6);
    color:#fff;
}
.card-turismo-tag {
    display:inline-flex; align-items:center; gap:5px;
    background:rgba(255,255,255,0.15); backdrop-filter:blur(8px);
    color:#fff; font-size:0.6875rem; font-weight:700;
    letter-spacing:0.06em; text-transform:uppercase;
    padding:4px 10px; border-radius:var(--r-full);
    margin-bottom:10px;
}
.card-turismo-title { font-size:1.25rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:6px; line-height:1.2; }
.card-turismo-sub   { font-size:0.8125rem; color:rgba(255,255,255,0.75); }

/* ── Estabelecimento Card ── */
.estab-card { display:block; text-decoration:none; color:inherit; cursor:pointer; }
.estab-cover {
    position:relative; aspect-ratio:16/9;
    background:linear-gradient(135deg, var(--ocean-pale), var(--gray-1));
    /* sem overflow:hidden aqui — o logo precisa "vazar" para baixo */
}
/* wrapper interno que contém a imagem e faz o clip do zoom */
.estab-cover-img {
    position:absolute; inset:0; overflow:hidden; border-radius:inherit;
}
.estab-cover-img img { width:100%; height:100%; object-fit:cover; transition:transform var(--slow) var(--ease); }
.estab-card:hover .estab-cover-img img { transform:scale(1.05); }
.guide-card:hover .estab-cover-img img { transform:scale(1.05); }
.estab-logo {
    position:absolute; bottom:-20px; left:var(--s5);
    width:44px; height:44px; border-radius:var(--r-sm);
    border:2.5px solid var(--surface);
    box-shadow:var(--sh-sm); overflow:hidden;
    background:var(--surface); z-index:2;
}
.estab-logo img { width:100%; height:100%; object-fit:cover; }
.estab-body { padding:var(--s8) var(--s4) var(--s4); }
.estab-name { font-size:0.9375rem; font-weight:650; letter-spacing:-0.015em; margin-bottom:3px; }
.estab-meta { font-size:0.775rem; color:var(--text-muted); display:flex; align-items:center; gap:5px; }

/* ── Wrapper do card (posiciona o botão coração fora da <a>) ── */
.estab-card-wrap { position:relative; display:block; }
.estab-card-wrap .estab-card { display:block; }

/* ── Botão de favorito ── */
.fav-btn {
    position:absolute;
    bottom:54px; right:10px;      /* sobre a cover, canto inferior direito */
    z-index:5;
    width:32px; height:32px;
    border-radius:50%;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(4px);
    border:none;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,0.14);
    transition:transform 180ms, background 150ms;
    padding:0;
    line-height:1;
}
.fav-btn i { font-size:1rem; color:var(--text-muted); transition:color 150ms; }
.fav-btn:hover { transform:scale(1.12); background:#fff; }
.fav-btn:hover i { color:#EF4444; }
.fav-btn--active i { color:#EF4444; }
.fav-btn--active { background:#fff; }

/* Animação de pop ao favoritar */
@keyframes favPop {
    0%   { transform:scale(1); }
    40%  { transform:scale(1.35); }
    70%  { transform:scale(0.9); }
    100% { transform:scale(1); }
}
.fav-btn--pop { animation:favPop 320ms ease; }

/* ── Evento Card ── */
.event-card { display:block; text-decoration:none; color:inherit; }
.event-card-img {
    aspect-ratio:16/9; overflow:hidden; border-radius:var(--r-md) var(--r-md) 0 0;
    background:linear-gradient(135deg,var(--navy),var(--ocean));
    position:relative;
}
.event-card-img img { width:100%; height:100%; object-fit:cover; }
.event-date-badge {
    position:absolute; top:12px; left:12px;
    background:#fff; border-radius:var(--r-sm);
    padding:6px 10px; text-align:center;
    box-shadow:var(--sh-sm);
    min-width:48px;
}
.event-date-badge .day   { font-size:1.25rem; font-weight:800; color:var(--orange); line-height:1; }
.event-date-badge .month { font-size:0.625rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; }

/* ── Promo Card ── */
.promo-card { display:block; text-decoration:none; color:inherit; }
.promo-card-inner {
    border-radius:var(--r-lg); overflow:hidden;
    border:1.5px solid var(--border);
    background:var(--surface);
    transition:all var(--base) var(--ease);
}
.promo-card-inner:hover { border-color:var(--orange); box-shadow:0 4px 20px rgba(255,107,0,0.12); transform:translateY(-2px); }

/* ── Categoria Pill ── */
.cat-pill {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px;
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--r-full);
    font-size:0.875rem; font-weight:500; color:var(--text-muted);
    cursor:pointer; text-decoration:none;
    transition:all var(--fast) var(--ease);
    white-space:nowrap;
    -webkit-appearance:none; appearance:none; outline:none;
    font-family:inherit; line-height:1;
}
.cat-pill:hover,.cat-pill.active {
    border-color:var(--ocean); color:var(--ocean);
    background:var(--ocean-pale);
    box-shadow:0 2px 8px rgba(0,105,148,0.12);
}
.cat-pill.orange:hover, .cat-pill.orange.active {
    border-color:var(--orange); color:var(--orange);
    background:var(--orange-pale);
}

/* ── Categoria Card (Grid) ── */
.cat-card {
    display:flex; flex-direction:column; align-items:center;
    gap:var(--s3); padding:var(--s6) var(--s4);
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--r-lg); text-decoration:none;
    transition:all var(--base) var(--spring);
    cursor:pointer; text-align:center;
}
.cat-card:hover {
    border-color:var(--orange); background:var(--orange-pale);
    transform:translateY(-4px); box-shadow:var(--sh-md);
}
.cat-card-icon {
    width:56px; height:56px; border-radius:var(--r-md);
    background:var(--orange-pale); display:flex;
    align-items:center; justify-content:center;
    font-size:1.6rem;
    transition:background var(--fast), transform var(--fast) var(--spring);
}
.cat-card:hover .cat-card-icon { background:var(--orange); transform:scale(1.1); }

/* ════════════════════════════════════════════
   SEARCH BAR
════════════════════════════════════════════ */
.search-wrap {
    background:#fff; border-radius:var(--r-full);
    box-shadow:0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    display:flex; align-items:center;
    padding:6px 6px 6px 22px;
    gap:8px;
}
.search-wrap input {
    flex:1; border:none; outline:none; background:transparent;
    font-family:var(--font); font-size:1rem; color:var(--text);
    padding:6px 0; min-width:0;
}
.search-wrap input::placeholder { color:var(--gray-4); }
.search-wrap .search-divider { width:1px; height:28px; background:var(--gray-2); flex-shrink:0; }
.search-wrap .search-location {
    display:flex; align-items:center; gap:6px; padding:0 14px;
    font-size:0.875rem; color:var(--text-muted); cursor:pointer;
    white-space:nowrap; flex-shrink:0;
}

/* Simple search (inner pages) */
.search-bar { position:relative; }
.search-bar input {
    width:100%; height:50px; padding:0 var(--s5) 0 48px;
    background:var(--surface); border:1.5px solid var(--border);
    border-radius:var(--r-full); font-family:var(--font);
    font-size:0.9375rem; color:var(--text); outline:none;
    transition:border-color var(--fast), box-shadow var(--fast);
}
.search-bar input::placeholder { color:var(--text-faint); }
.search-bar input:focus { border-color:var(--ocean); box-shadow:0 0 0 3px rgba(0,105,148,0.12); }
.search-bar .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-faint); pointer-events:none; }

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 11px; border-radius:var(--r-full);
    font-size:0.6875rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
}
.badge-orange { background:var(--orange-pale);  color:var(--orange); }
.badge-ocean  { background:var(--ocean-pale);   color:var(--ocean); }
.badge-teal   { background:var(--teal-pale);    color:var(--teal); }
.badge-gold   { background:rgba(255,196,0,0.14); color:#996600; }
.badge-green  { background:rgba(52,199,89,0.12); color:#1A7F37; }
.badge-gray   { background:var(--gray-1);        color:var(--gray-6); }
.badge-white  { background:rgba(255,255,255,0.2); color:#fff; backdrop-filter:blur(8px); }

/* ════════════════════════════════════════════
   STATS / NUMBERS
════════════════════════════════════════════ */
.stat-item { text-align:center; }
.stat-number { font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-0.04em; line-height:1; }
.stat-label  { font-size:0.8125rem; font-weight:500; margin-top:5px; }

/* ════════════════════════════════════════════
   GRIDS
════════════════════════════════════════════ */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
.grid-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s5); }
@media(max-width:1024px){ .grid-4 { grid-template-columns:repeat(2,1fr); } .grid-5 { grid-template-columns:repeat(3,1fr); } }
@media(max-width:768px){
    .grid-2,.grid-3,.grid-4,.grid-5 { grid-template-columns:1fr; }
    .grid-2.m-grid-2 { grid-template-columns:repeat(2,1fr); }
}

/* ════════════════════════════════════════════
   SCROLLERS HORIZONTAIS — comportamento unificado
   ──────────────────────────────────────────────
   Padroniza TODAS as barras de abas/pills num só lugar (Component
   Consistency + Responsive Continuity). Evolui o padrão-ouro já usado
   em .estab-tab-nav / .cat-pills para os laggards (.settings-tabs sem
   esconder scrollbar; .plan-tabs sem overflow-x cortando no mobile;
   .itin-picker-tabs escondendo só no Firefox). Puramente aditivo:
   não muda cores, layout ou identidade — só o comportamento do scroll.
════════════════════════════════════════════ */
.scroll-row { display:flex; gap:var(--s3); padding-bottom:4px; }

.scroll-row,
.settings-tabs,
.plan-tabs,
.itin-picker-tabs,
.edit-tab-bar,
.cat-bar-inner,
.cat-pills,
.estab-tab-nav {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;   /* momentum no iOS */
    scrollbar-width:none;               /* Firefox */
    -ms-overflow-style:none;            /* Edge/IE legacy */
    scroll-snap-type:x proximity;       /* continuidade suave */
    scroll-padding-inline:var(--s4);    /* item ativo não cola na borda */
    overscroll-behavior-x:contain;      /* não "vaza" o scroll p/ a página */
}
.scroll-row::-webkit-scrollbar,
.settings-tabs::-webkit-scrollbar,
.plan-tabs::-webkit-scrollbar,
.itin-picker-tabs::-webkit-scrollbar,
.edit-tab-bar::-webkit-scrollbar,
.cat-bar-inner::-webkit-scrollbar,
.cat-pills::-webkit-scrollbar,
.estab-tab-nav::-webkit-scrollbar { display:none; width:0; height:0; }

/* Itens não encolhem (evita "espremer") e alinham ao snap. */
.settings-tabs > *,
.plan-tabs > *,
.itin-picker-tabs > *,
.cat-bar-inner > *,
.cat-pills > * { flex-shrink:0; scroll-snap-align:start; }

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.footer { background:var(--navy); color:rgba(255,255,255,0.65); }
.footer-top { padding:var(--s20) 0 var(--s12); }
.footer a { color:rgba(255,255,255,0.55); text-decoration:none; transition:color var(--fast); }
.footer a:hover { color:#fff; }
.footer-logo { font-size:1.375rem; font-weight:800; color:#fff; letter-spacing:-0.03em; margin-bottom:var(--s3); }
.footer-divider { height:1px; background:rgba(255,255,255,0.08); }
.footer-bottom { padding:var(--s6) 0; }
.footer-heading { font-size:0.6875rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(255,255,255,0.35); margin-bottom:var(--s5); }
.footer-links { display:flex; flex-direction:column; gap:10px; list-style:none; }
.footer-links li a { font-size:0.875rem; }

/* ════════════════════════════════════════════
   UTILITIES
════════════════════════════════════════════ */
.flex           { display:flex; }
.flex-col       { flex-direction:column; }
.items-center   { align-items:center; }
.items-start    { align-items:flex-start; }
.justify-between{ justify-content:space-between; }
.justify-center { justify-content:center; }
.flex-wrap      { flex-wrap:wrap; }
.gap-2  { gap:var(--s2); } .gap-3 { gap:var(--s3); } .gap-4 { gap:var(--s4); }
.gap-5  { gap:var(--s5); } .gap-6 { gap:var(--s6); } .gap-8 { gap:var(--s8); }
.mt-2{margin-top:var(--s2);} .mt-3{margin-top:var(--s3);} .mt-4{margin-top:var(--s4);}
.mt-6{margin-top:var(--s6);} .mt-8{margin-top:var(--s8);} .mt-10{margin-top:var(--s10);}
.mb-2{margin-bottom:var(--s2);} .mb-4{margin-bottom:var(--s4);} .mb-6{margin-bottom:var(--s6);}
.mb-8{margin-bottom:var(--s8);} .mb-10{margin-bottom:var(--s10);}
.text-white   { color:#fff; }
.text-muted   { color:var(--text-muted); }
.text-orange  { color:var(--orange); }
.text-ocean   { color:var(--ocean); }
.text-center  { text-align:center; }
.font-bold    { font-weight:700; }
.font-semibold{ font-weight:600; }
.w-full       { width:100%; }
.overflow-hidden { overflow:hidden; }
.relative     { position:relative; }
.z-1          { position:relative; z-index:1; }

@media(max-width:768px){ .hide-mobile { display:none !important; } }
@media(min-width:769px){ .hide-desktop { display:none !important; } }

/* ─── Conteúdo rico (HTML do editor) — descrições de Sobre/passeios ─── */
.about-rich > *:first-child { margin-top: 0; }
.about-rich > *:last-child { margin-bottom: 0; }
.about-rich h2, .about-rich h3, .about-rich h4 {
    color: var(--text); font-weight: 750; letter-spacing: -0.02em;
    margin: var(--s5) 0 var(--s3); line-height: 1.3;
}
.about-rich h2 { font-size: 1.0625rem; }
.about-rich h3 { font-size: 1rem; }
.about-rich p { margin: 0 0 var(--s3); }
.about-rich ul, .about-rich ol { margin: var(--s3) 0; padding-left: 1.35rem; }
.about-rich li { line-height: 1.55; margin-bottom: 5px; }
.about-rich strong, .about-rich b { color: var(--text); font-weight: 700; }

/* ─── NAV: menu agrupado cabe bem até ~880px; abaixo disso vira hambúrguer ─── */
@media(max-width:880px){
    .nav .nav-links,
    .nav .nav-inner > div:last-child .btn.hide-mobile { display:none !important; }
    .nav #menuBtn { display:inline-flex !important; }
}
@media(min-width:881px){
    .nav #menuBtn { display:none !important; }
}

/* ════════════════════════════════════════════
   ANIMAÇÕES
════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes floatY   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes shimmer  { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

.anim-up    { animation:fadeUp  var(--slow) var(--ease) both; }
.anim-in    { animation:fadeIn  var(--slow) var(--ease) both; }
.anim-float { animation:floatY  4s ease-in-out infinite; }
.d1 { animation-delay:80ms;  }
.d2 { animation-delay:160ms; }
.d3 { animation-delay:240ms; }
.d4 { animation-delay:320ms; }
.d5 { animation-delay:400ms; }

/* ════════════════════════════════════════════
   MISC
════════════════════════════════════════════ */
.divider { height:1px; background:var(--border); }
.glass {
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(16px) saturate(150%);
    -webkit-backdrop-filter:blur(16px) saturate(150%);
    border:1px solid rgba(255,255,255,0.15);
}
.text-gradient-ocean {
    background:linear-gradient(135deg, #90E0EF 0%, #00B4D8 50%, #0096C7 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-gradient-orange {
    background:linear-gradient(135deg, #FF8C38 0%, #FF6B00 60%, #D95A00 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* Alert banner */
.alert-banner {
    display:flex; align-items:center; gap:var(--s3);
    padding:var(--s3) var(--s6);
    background:var(--orange); color:#fff;
    font-size:0.875rem; font-weight:500;
}

/* Paginação */
.pagination { display:flex; gap:6px; align-items:center; }
.page-link {
    display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:var(--r-sm);
    font-size:0.875rem; font-weight:500; text-decoration:none;
    color:var(--text-muted); border:1.5px solid var(--border);
    transition:all var(--fast);
}
.page-link:hover { border-color:var(--ocean); color:var(--ocean); background:var(--ocean-pale); }
.page-link.active { background:var(--ocean); color:#fff; border-color:var(--ocean); }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--gray-3); border-radius:3px; }

/* ════════════════════════════════════════════
   UTILITÁRIOS — Flex / Spacing / Visibility
════════════════════════════════════════════ */
.flex  { display:flex; }
.items-center   { align-items:center; }
.items-end      { align-items:flex-end; }
.justify-between{ justify-content:space-between; }
.justify-center { justify-content:center; }
.flex-col       { flex-direction:column; }
.flex-1         { flex:1; }
.flex-wrap      { flex-wrap:wrap; }
.gap-2  { gap:var(--s2); }
.gap-3  { gap:var(--s3); }
.gap-4  { gap:var(--s4); }
.gap-6  { gap:var(--s6); }
.mb-4   { margin-bottom:var(--s4); }
.mb-6   { margin-bottom:var(--s6); }
.mb-8   { margin-bottom:var(--s8); }
.mb-10  { margin-bottom:var(--s10); }
.mt-4   { margin-top:var(--s4); }
.mt-6   { margin-top:var(--s6); }
.w-full { width:100%; }
.text-center { text-align:center; }
.text-muted  { color:var(--text-muted); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
@media(max-width:900px) {
    .grid-3 { grid-template-columns:repeat(2,1fr); }
    .grid-4 { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:600px) {
    .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
}

/* Hide / show helpers */
@media(max-width:768px) { .hide-mobile { display:none !important; } }
@media(min-width:769px) { .hide-desktop { display:none !important; } }

/* ════════════════════════════════════════════
   CARDS — header / body helpers
════════════════════════════════════════════ */
.card-header {
    padding:var(--s5) var(--s6);
    border-bottom:1px solid var(--border);
    font-size:0.9375rem;
    font-weight:700;
}
.card-body { padding:var(--s5) var(--s6); }

/* ════════════════════════════════════════════
   FORMULÁRIOS — Dashboard / Admin
════════════════════════════════════════════ */
.form-label {
    display:block;
    font-size:0.8125rem;
    font-weight:600;
    margin-bottom:6px;
    color:var(--text);
}
.form-input,
.form-textarea,
.form-select {
    display:block; width:100%;
    padding:10px 14px;
    border:1.5px solid var(--border-med);
    border-radius:var(--r-md);
    font-family:var(--font); font-size:0.9375rem; color:var(--text);
    background:var(--surface);
    transition:border-color var(--fast), box-shadow var(--fast);
    outline:none;
    appearance:none; -webkit-appearance:none;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color:var(--ocean);
    box-shadow:0 0 0 3px rgba(14,116,144,0.12);
}
.form-input::placeholder,
.form-textarea::placeholder { color:var(--text-faint); }
.form-textarea { resize:vertical; min-height:80px; }
.form-select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    padding-right:36px;
    cursor:pointer;
}
.form-input[type="date"],
.form-input[type="time"],
.form-input[type="color"] { cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR
   Only visible on mobile (<640px). Provides quick access to the
   4 most-used sections, mimicking native app tab bars.
═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav { display:none !important; }

@media (max-width:639px) {
    /* The bar itself */
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 200;
        height: calc(58px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--surface);
        border-top: 1.5px solid var(--border);
        box-shadow: 0 -2px 16px rgba(10,31,60,0.09);
    }

    /* Each tab item */
    .mbn-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        text-decoration: none;
        color: var(--text-muted);
        padding: 8px 2px 10px;
        transition: color 120ms;
        position: relative;
        min-width: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .mbn-item.active { color: var(--orange); }
    .mbn-item i {
        font-size: 1.45rem;
        line-height: 1;
        transition: transform 180ms, color 120ms;
    }
    .mbn-item.active i { transform: translateY(-1px); }
    .mbn-item span {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
    }

    /* Orange pill indicator below active icon */
    .mbn-item::before {
        content: '';
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 28px; height: 3px;
        background: var(--orange);
        border-radius: 0 0 var(--r-full) var(--r-full);
        transition: transform 220ms cubic-bezier(.34,1.56,.64,1);
    }
    .mbn-item.active::before { transform: translateX(-50%) scaleX(1); }

    /* Optional badge (e.g. unread count) */
    .mbn-badge {
        position: absolute;
        top: 6px;
        right: calc(50% - 20px);
        background: var(--red);
        color: #fff;
        font-size: 0.55rem;
        font-weight: 800;
        padding: 1px 4px;
        border-radius: var(--r-full);
        min-width: 14px;
        text-align: center;
        line-height: 1.5;
        pointer-events: none;
    }

    /* Push page content up so bottom nav doesn't overlap it — só quando o nav existe */
    body.has-bottom-nav #main   { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    body.has-bottom-nav .footer { margin-bottom:  calc(58px + env(safe-area-inset-bottom, 0px)); }

    /* Hide bottom nav when mobile drawer is open */
    body.drawer-open .mobile-bottom-nav { opacity: 0; pointer-events: none; }
}

/* ============================================================
   SISTEMA DE NOTIFICAÇÕES — pmarau.notify()
   Toast pills flutuantes, global em todo o portal
   ============================================================ */

#pmarau-toast-stack {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 99990;
    pointer-events: none;
    align-items: center;
    width: max-content;
    max-width: min(560px, 92vw);
}

.pmrau-toast {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px 11px 16px;
    border-radius: var(--r-full, 9999px);
    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font, 'Inter', sans-serif);
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
    pointer-events: auto;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
    animation: pmrauToastIn 280ms cubic-bezier(0.34,1.56,0.64,1) both;
    position: relative;
}
.pmrau-toast i { font-size: 1rem; flex-shrink: 0; }

/* Types */
.pmrau-toast.success { background:#F0FDF4; color:#15803D; border:1.5px solid #BBF7D0; }
.pmrau-toast.error   { background:#FEF2F2; color:#DC2626; border:1.5px solid #FECACA; }
.pmrau-toast.warning { background:#FFF7ED; color:#C2410C; border:1.5px solid #FED7AA; }
.pmrau-toast.info    { background:var(--ocean-pale,#EFF6FF); color:var(--ocean,#006994); border:1.5px solid #BAE6FD; }

/* Dismiss button inside toast */
.pmrau-toast-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0 0 6px;
    line-height: 1;
    color: inherit;
    opacity: 0.55;
    font-size: 1rem;
    flex-shrink: 0;
    transition: opacity 120ms;
}
.pmrau-toast-close:hover { opacity: 1; }

/* Animations */
@keyframes pmrauToastIn {
    from { opacity:0; transform:translateY(14px) scale(0.92); }
    to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes pmrauToastOut {
    from { opacity:1; transform:translateY(0) scale(1); }
    to   { opacity:0; transform:translateY(10px) scale(0.94); }
}
.pmrau-toast.dismissing {
    animation: pmrauToastOut 200ms ease forwards;
}

/* On mobile, make toasts go above bottom nav */
@media (max-width: 768px) {
    #pmarau-toast-stack { bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ════════════════════════════════════════════
   ROTEIRO INTELIGENTE — plano (result / show)
════════════════════════════════════════════ */
.itin-wrap { max-width:1180px; margin:0 auto; }

/* Onde ficar */
.itin-stay { margin-bottom:var(--s8); overflow:hidden; }
.itin-stay-inner { display:flex; align-items:center; gap:var(--s4); padding:var(--s5); }
.itin-stay-thumb { width:72px; height:72px; border-radius:var(--r-lg); overflow:hidden; flex-shrink:0; background:var(--surface-2); }
.itin-stay-thumb img { width:100%; height:100%; object-fit:cover; }
.itin-stay-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--ocean-pale); color:var(--ocean); font-size:1.4rem; }
.itin-stay-actions { display:flex; align-items:center; gap:var(--s3); flex-shrink:0; }

/* Grid de dias — usa a largura da tela no desktop */
.itin-days { display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:var(--s5) var(--s6); align-items:start; }
.itin-day { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-xl,18px); padding:var(--s5) var(--s5) var(--s2); }
.itin-day-head { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }
.itin-day-badge { width:42px; height:42px; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--orange),#D95A00); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(255,107,0,.3); }
.itin-day-badge-lbl { font-size:0.55rem; font-weight:700; letter-spacing:0.05em; line-height:1; }
.itin-day-badge-num { font-size:1.1rem; font-weight:900; line-height:1; }
.itin-day-title { font-size:1.15rem; font-weight:800; letter-spacing:-0.02em; margin:0; }
.itin-day-date { font-size:0.78rem; font-weight:700; color:var(--text-faint); text-transform:capitalize; }

/* Timeline */
.itin-timeline { display:flex; flex-direction:column; }
.itin-slot { display:flex; gap:var(--s4); }
.itin-slot-rail { flex-shrink:0; display:flex; flex-direction:column; align-items:center; }
.itin-slot-dot { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.itin-line { flex:1; width:2px; background:var(--border); margin-top:6px; }
.itin-day:last-child .itin-slot:last-child .itin-line,
.itin-slot:last-child .itin-line { display:none; }
.itin-slot-body { flex:1; min-width:0; padding-bottom:var(--s5); }

/* Card do estabelecimento + botão Trocar lateral */
.itin-card-wrap { display:flex; gap:var(--s2); align-items:stretch; }
.itin-card { flex:1; min-width:0; display:flex; gap:var(--s3); align-items:center; padding:var(--s3) var(--s3); text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.itin-card:hover { border-color:var(--orange); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.itin-card-thumb { width:60px; height:60px; border-radius:var(--r-md); overflow:hidden; flex-shrink:0; background:var(--surface-2); }
.itin-card-thumb img { width:100%; height:100%; object-fit:cover; }
.itin-card-thumb-ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--orange-pale); color:var(--orange); }
.itin-card-chev { font-size:0.85rem; color:var(--text-faint); flex-shrink:0; }

.itin-swap-btn { flex-shrink:0; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:62px; border:1.5px solid var(--border-med); border-radius:var(--r-md); background:var(--surface); color:var(--text-muted); font-size:0.66rem; font-weight:700; cursor:pointer; transition:all .15s; padding:4px; }
.itin-swap-btn i { font-size:1rem; }
.itin-swap-btn:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.itin-swap-btn:disabled { opacity:.5; cursor:wait; }
.itin-swap-btn.is-loading i { animation:itinSpin .7s linear infinite; }
.itin-stay-actions .itin-swap-btn { flex-direction:row; width:auto; padding:7px 13px; gap:6px; }
.itin-slot-actions { flex-shrink:0; display:flex; flex-direction:column; gap:6px; }
.itin-slot-actions .itin-swap-btn { width:62px; }
.itin-remove-btn:hover { border-color:#DC2626; color:#DC2626; background:#FEF2F2; }
.itin-slot-empty { display:flex; align-items:center; gap:8px; padding:var(--s3); border:1.5px dashed var(--border-med); border-radius:var(--r-md); color:var(--text-faint); font-size:0.82rem; font-weight:600; }

@media (max-width:560px) {
    .itin-days { grid-template-columns:1fr; }
    .itin-card-wrap { flex-wrap:wrap; }
    .itin-swap-btn { flex-direction:row; width:100%; padding:8px; gap:6px; }
    .itin-slot-actions { flex-direction:row; width:100%; }
    .itin-slot-actions .itin-swap-btn { width:100%; }
    .itin-stay-inner { flex-wrap:wrap; }
    .itin-stay-thumb { width:56px; height:56px; }
    .itin-stay-actions { width:100%; justify-content:space-between; }
}

/* ── Badge "precisa de veículo" ── */
.itin-veh-badge { display:inline-flex; align-items:center; gap:4px; font-size:0.68rem; font-weight:700; color:#B45309; background:#FEF3C7; border:1px solid #FDE68A; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.itin-veh-badge i { font-size:0.72rem; }

/* ── Slot vago (adicionar) ── */
.itin-empty-slot { display:flex; align-items:center; gap:10px; width:100%; padding:13px; border:1.5px dashed var(--border-med); border-radius:var(--r-md); background:var(--surface-2); color:var(--text-muted); font-weight:700; font-size:0.85rem; cursor:pointer; transition:all .15s; font-family:inherit; }
.itin-empty-slot:hover { border-color:var(--orange); color:var(--orange); background:var(--orange-pale); }
.itin-empty-ic { width:34px; height:34px; border-radius:9px; background:var(--surface); border:1.5px solid var(--border-med); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }
.itin-empty-slot:hover .itin-empty-ic { border-color:var(--orange); color:var(--orange); }

/* ── Seletor "trocar/adicionar" por categoria ── */
.itin-picker-overlay { position:fixed; inset:0; z-index:99995; background:rgba(10,31,60,.55); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; }
.itin-picker-overlay.open { display:flex; }
@media(min-width:640px){ .itin-picker-overlay { align-items:center; padding:20px; } }
.itin-picker { background:var(--surface); width:min(700px,100%); max-height:88vh; border-radius:22px 22px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -10px 50px rgba(0,0,0,.25); animation:itinPickerUp .26s var(--spring); }
@media(min-width:640px){ .itin-picker { border-radius:22px; } }
@keyframes itinPickerUp { from{ transform:translateY(28px); opacity:.5;} to{transform:none;opacity:1;} }
.itin-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 12px; }
.itin-picker-head h3 { font-size:1.05rem; font-weight:800; margin:0; letter-spacing:-0.02em; }
.itin-picker-head .sub { font-size:.78rem; color:var(--text-faint); margin-top:2px; }
.itin-picker-close { width:34px;height:34px;border-radius:50%;border:none;background:var(--surface-2);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0; }
.itin-picker-close:hover { background:var(--border); }
.itin-picker-tabs { display:flex; gap:8px; padding:4px 20px 14px; overflow-x:auto; border-bottom:1px solid var(--border); scrollbar-width:none; }
.itin-picker-tabs::-webkit-scrollbar { display:none; }
.itin-picker-tab { flex-shrink:0; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--border-med); background:var(--surface); color:var(--text-muted); font-size:.82rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .15s; font-family:inherit; }
.itin-picker-tab:hover { border-color:var(--orange); color:var(--orange); }
.itin-picker-tab.active { background:var(--orange); border-color:var(--orange); color:#fff; }
.itin-picker-body { padding:14px 16px 20px; overflow-y:auto; }
.itin-picker-grid { display:grid; grid-template-columns:1fr; gap:8px; }
@media(min-width:560px){ .itin-picker-grid { grid-template-columns:1fr 1fr; } }
.itin-pick-card { display:flex; align-items:center; gap:11px; padding:9px; border:1.5px solid var(--border); border-radius:13px; background:var(--surface); cursor:pointer; text-align:left; transition:all .15s; width:100%; font-family:inherit; }
.itin-pick-card:hover { border-color:var(--orange); background:var(--orange-pale); }
.itin-pick-card.in-use { opacity:.5; }
.itin-pick-thumb { width:48px; height:48px; border-radius:10px; overflow:hidden; flex-shrink:0; background:var(--surface-2); display:flex;align-items:center;justify-content:center; color:var(--text-faint); }
.itin-pick-thumb img { width:100%; height:100%; object-fit:cover; }
.itin-pick-info { min-width:0; flex:1; }
.itin-pick-name { font-weight:700; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text); }
.itin-pick-meta { font-size:.72rem; color:var(--text-faint); display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:2px; }
.itin-picker-empty, .itin-picker-loading { text-align:center; color:var(--text-faint); padding:36px 20px; font-size:.85rem; }
body.itin-picker-open { overflow:hidden; }

/* ════════ AUTH: cartões de tipo + chip "voltar" (compartilhado) ════════ */
.rt-cards { display:flex; flex-direction:column; gap:12px; }
.rt-card { display:flex; align-items:center; gap:16px; padding:16px 18px; min-height:80px; border:2px solid var(--border-med); border-radius:var(--r-xl); text-decoration:none; background:var(--surface); transition:border-color .18s, box-shadow .18s, transform .12s, background .15s; -webkit-tap-highlight-color:transparent; cursor:pointer; width:100%; text-align:left; font-family:inherit; }
.rt-card:hover { border-color:var(--rt,var(--ocean)); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.rt-card:active { transform:scale(.985); background:var(--surface-2); }
.rt-card:focus-visible { outline:none; border-color:var(--rt,var(--ocean)); box-shadow:0 0 0 3px var(--rt-ring,rgba(0,105,148,.18)); }
.rt-card-ic { width:52px; height:52px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rt-card-ic i { font-size:1.55rem; }
.rt-card-body { flex:1; min-width:0; }
.rt-card-title { font-size:1.02rem; font-weight:700; color:var(--text); margin-bottom:2px; display:block; }
.rt-card-desc { font-size:.8125rem; color:var(--text-muted); line-height:1.4; display:block; }
.rt-card-chev { font-size:1.15rem; color:var(--text-faint); flex-shrink:0; }
.rt-card:hover .rt-card-chev { color:var(--rt,var(--ocean)); }
@media(max-width:768px){ .rt-card { padding:15px 16px; min-height:74px; gap:14px; } .rt-card-ic { width:48px; height:48px; } }

.auth-switch-type { display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--s5); font-size:.82rem; font-weight:600; color:var(--text-muted); text-decoration:none; padding:7px 12px; border:1px solid var(--border); border-radius:var(--r-full); background:var(--surface-2); transition:border-color .15s, color .15s; -webkit-tap-highlight-color:transparent; cursor:pointer; font-family:inherit; }
.auth-switch-type:hover { border-color:var(--ocean); color:var(--ocean); }