/* ============================================================================
   Tema "Apple" — a camada de acabamento dos 4 apps da família.
   01/09/2026.

   ⭐ Por que uma FOLHA SOLTA em public/css e não Tailwind: as telas são 4 apps
   clones com centenas de classes utilitárias já escritas. Reescrever tudo em 4
   lugares é caro e quebradiço; esta folha entra DEPOIS do bundle e reafina o
   que aparece em toda tela — tipografia, raio, sombra, toque, barra.
   Trocar o app = trocar --accent (vem do config/social.php).
   ============================================================================ */

:root {
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;
    --ink: #1d1d1f;
    --ink-soft: #6e6e73;
    --ink-faint: #86868b;
    --surface: #ffffff;
    --canvas: #f5f5f7;
    --hairline: rgba(0, 0, 0, .07);
    --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
    --shadow-lift: 0 2px 6px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---- Tipografia: a pilha do sistema. San Francisco no Apple, Segoe no Windows,
        Roboto no Android — em vez de uma webfont baixada em toda visita. ---- */
html, body,
body.font-sans {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
}
body { background: var(--canvas); color: var(--ink); }

h1, h2, h3, .font-bold, .font-extrabold, .font-semibold {
    letter-spacing: -0.021em;
}
h1 { font-weight: 700; }

/* ---- Superfícies: menos borda, mais respiro, raio grande ---- */
.bg-white.rounded-2xl, .bg-white.rounded-xl, .bg-white.shadow, .bg-white.shadow-md {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: none;
}
.rounded-xl  { border-radius: var(--radius-md); }
.rounded-2xl { border-radius: var(--radius-lg); }
.shadow, .shadow-md { box-shadow: var(--shadow-card); }
.shadow-lg, .shadow-xl { box-shadow: var(--shadow-lift); }

/* ---- Barra de cima: translúcida com desfoque, como no iOS ---- */
nav, header.sticky, .app-nav {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* ---- Toque: nada clicável abaixo de 44 px, a régua da Apple ---- */
a.btn, button, [role="button"], .touch-44 {
    min-height: 44px;
}
button, a.btn { transition: transform .18s var(--ease), opacity .18s var(--ease); }
button:active, a.btn:active { transform: scale(.97); }

/* ---- Cartão da conquista: a foto é a estrela, o texto sussurra ---- */
.catch-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.catch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.catch-card__media { position: relative; aspect-ratio: 4 / 5; background: #ececed; overflow: hidden; }
.catch-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catch-card__body { padding: 14px 16px 16px; }
.catch-card__title {
    font-size: 16px; font-weight: 600; color: var(--ink);
    letter-spacing: -0.02em; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.catch-card__meta { font-size: 13px; color: var(--ink-soft); margin-top: 3px; }

/* Selo flutuante sobre a foto (vidro fosco) */
.glass-chip {
    background: rgba(255,255,255,.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    color: var(--ink);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    padding: 5px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
    display: inline-flex; align-items: center; gap: 4px;
    line-height: 1;
}
.glass-chip--dark { background: rgba(0,0,0,.55); color: #fff; box-shadow: none; }

/* ---- Estrelas ---- */
.stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.stars svg { width: 15px; height: 15px; }
.stars--lg svg { width: 26px; height: 26px; }
.star-on  { color: #ff9f0a; }
.star-off { color: #d2d2d7; }

/* Votação: alvo grande, resposta imediata */
.rate-pick { background: none; border: 0; padding: 4px; cursor: pointer; line-height: 0; }
.rate-pick svg { width: 34px; height: 34px; color: #d2d2d7; transition: transform .15s var(--ease), color .15s var(--ease); }
.rate-pick:hover svg { transform: scale(1.16); }
.rate-row:hover .rate-pick svg { color: #d2d2d7; }
.rate-pick.is-on svg { color: #ff9f0a; }

/* ---- Botão principal ---- */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--accent, #0077B6); color: #fff;
    font-weight: 600; font-size: 16px;
    padding: 13px 24px; border-radius: 999px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent, #0077B6) 35%, transparent);
    border: 0; cursor: pointer; text-decoration: none;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: rgba(120,120,128,.10); color: var(--ink);
    font-weight: 600; font-size: 15px;
    padding: 11px 20px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
}

/* ---- Campo de formulário: fundo suave, sem borda dura ---- */
input[type=text], input[type=number], input[type=date], input[type=tel],
input[type=email], select, textarea {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--hairline) !important;
    background: #fbfbfd;
    font-size: 16px; /* 🧨 abaixo de 16px o Safari do iPhone DÁ ZOOM ao focar o campo */
    padding: 12px 14px;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--accent, #0077B6) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #0077B6) 16%, transparent) !important;
}

/* ---- Mural ---- */
.mural {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}
@media (min-width: 640px) { .mural { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } }

.section-title {
    font-size: 22px; font-weight: 700; letter-spacing: -0.022em; color: var(--ink);
}
.section-sub { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }

/* ---- Respeita quem pediu menos animação no sistema ---- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Alpine: esconde o bloco antes do JS assumir */
[x-cloak]{display:none!important}