body { margin: 0; font-family: 'Work Sans', sans-serif; background: #F8F4EA; color: #16294A; }
h1, h2, h3 { font-family: 'Fraunces', serif; margin: 0; }
.wordmark { font-family: 'Fraunces', serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
a { color: #B8862F; text-decoration: none; }
a:hover { color: #8A6620; }

.btn-cta { display: inline-flex; align-items: center; gap: 10px; background: #1DA851; color: #FFFFFF; font-weight: 700; padding: 16px 30px; border-radius: 999px; border: none; font-size: 16px; font-family: 'Work Sans', sans-serif; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(29,168,81,0.55); }
.btn-cta:hover { background: #178C43; color: #FFFFFF; }
.btn-cta-white { display: inline-flex; align-items: center; gap: 10px; background: #FFFFFF; color: #16294A; font-weight: 700; padding: 16px 30px; border-radius: 999px; border: none; font-size: 16px; font-family: 'Work Sans', sans-serif; cursor: pointer; box-shadow: 0 14px 30px -10px rgba(22,41,74,0.3); transition: background 0.15s ease, color 0.15s ease; }
.btn-cta-white:hover { background: #1DA851; color: #FFFFFF; }
.btn-outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #16294A; font-weight: 600; padding: 14px 26px; border-radius: 999px; border: 1.5px solid #16294A; font-size: 16px; font-family: 'Work Sans', sans-serif; cursor: pointer; }
.btn-outline:hover { background: #16294A; color: #F8F4EA; }
.btn-outline-light { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #F8F4EA; font-weight: 600; padding: 14px 26px; border-radius: 999px; border: 1.5px solid #F8F4EA; font-size: 16px; font-family: 'Work Sans', sans-serif; cursor: pointer; }
.btn-outline-light:hover { background: #F8F4EA; color: #16294A; }

.navlink { color: #F2F0EE; font-weight: 500; font-size: 14.5px; }
.navlink:hover { color: #D8B25A; }

.card { background: #FFFFFF; border: 1px solid #DCE1E8; border-radius: 18px; padding: 32px; box-shadow: 0 16px 32px -26px rgba(22,41,74,0.25); }
.card-link { display: block; transition: transform 0.15s ease; }
.card-link:hover { transform: translateY(-3px); }

.eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #B8862F; }

.ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #E9EDF2; border-radius: 20px; color: #6B7480; text-align: center; box-sizing: border-box; }
.ph-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0 16px; }

.frame-wrap { position: relative; }
.frame-block { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #E8D9B0; border-radius: 22px; }

.badge-chip { position: absolute; display: flex; align-items: center; gap: 8px; background: #FFFFFF; border-radius: 999px; padding: 12px 18px; box-shadow: 0 14px 30px -10px rgba(22,41,74,0.3); font-size: 14.5px; font-weight: 600; color: #16294A; }

.stars { display: inline-flex; gap: 2px; color: #C9A227; }

.chip { display: inline-flex; align-items: center; background: #F5EBD3; color: #8A6A1E; font-size: 14px; font-weight: 600; padding: 7px 16px; border-radius: 999px; }
.chip:hover { background: #EDE0BE; }

.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: #56606B; }
.back-link:hover { color: #B8862F; }

.nav-drop { position: relative; }
.nav-drop > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.nav-drop[open] > summary::after { transform: rotate(-135deg) translateY(2px); }
.nav-drop-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); background: #FFFFFF; border: 1px solid #DCE1E8; border-radius: 12px; padding: 6px; min-width: 200px; box-shadow: 0 16px 32px -16px rgba(22,41,74,0.22); z-index: 30; }
.nav-drop-menu a { display: block; padding: 8px 12px; border-radius: 7px; color: #16294A; font-weight: 400; font-size: 13px; }
.nav-drop-menu a:hover { background: #F3EEDD; color: #16294A; }

details.faq-item { border-bottom: 1px solid #DCE1E8; padding: 22px 0; }
details.faq-item summary { cursor: pointer; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; color: #16294A; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item p { margin: 14px 0 0; color: #56606B; font-size: 15.5px; line-height: 1.7; }
.faq-plus { flex-shrink: 0; font-size: 22px; color: #B8862F; font-weight: 400; }
details.faq-item[open] .faq-plus { transform: rotate(45deg); }

/* Celular: cabeçalho compacto (logo + botão na 1ª linha, menu na 2ª) */
@media (max-width: 720px) {
  .site-header-in { padding: 10px 16px !important; gap: 8px 12px !important; }
  .site-header-in > a:first-child { order: 1; }
  .btn-cta[data-hdr] { order: 2; margin-left: auto; padding: 10px 16px !important; font-size: 13px !important; }
  .site-nav { order: 3; width: 100%; justify-content: space-between; gap: 6px !important; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.14); }
  .navlink { font-size: 14px; }
  .nav-drop-menu { position: static; transform: none; width: 100%; margin-top: 10px; box-shadow: none; border: none; background: rgba(255,255,255,0.06); padding: 4px; }
  .nav-drop-menu a { color: #F2F0EE; text-align: center; }
  .nav-drop-menu a:hover { background: rgba(255,255,255,0.1); }
  .nav-drop[open] { width: 100%; }
}


    .gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    @media (min-width: 900px) { .gal { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
  

    .gal4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 900px; margin: 40px auto 0; }
    @media (min-width: 900px) { .gal4 { gap: 16px; } }
  

    .gal2sq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 900px; margin: 40px auto 0; }
    @media (max-width: 720px) { .gal2sq { grid-template-columns: repeat(2, 1fr); max-width: 460px; } }
  

    .gal2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 900px; margin: 40px auto 0; }
    @media (max-width: 640px) { .gal2 { grid-template-columns: 1fr; } }