:root {
  --qvv-bg: #f5fbfd;
  --qvv-surface: #ffffff;
  --qvv-surface-2: #eaf4f7;
  --qvv-text: #172126;
  --qvv-muted: #657277;
  --qvv-yellow: #f4d51d;
  --qvv-yellow-dark: #705f00;
  --qvv-red: #ba1a1a;
  --qvv-red-soft: #ffdad6;
  --qvv-blue-soft: #dce8ee;
  --qvv-radius: 28px;
}

html {
  scroll-behavior: smooth
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--qvv-bg);
  color: var(--qvv-text);
  overflow-x: hidden
}

h1,
h2,
h3,
.font-display {
  font-family: 'Montserrat', sans-serif
}

a {
  text-decoration: none
}

.section-space {
  padding: 76px 0
}

.qvv-shell {
  max-width: 1120px;
  margin: 0 auto
}

.qvv-header {
  padding: 30px 0 8px
}

.qvv-logo {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  background: var(--qvv-yellow);
  display: grid;
  place-items: center;
  font-family: 'Montserrat';
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -2px;
  color: #292100;
  box-shadow: 0 14px 34px rgba(112, 95, 0, .14)
}

.hero {
  position: relative;
  padding: 36px 0 54px;
  overflow: hidden
}

.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 260px;
  background: rgba(244, 213, 29, .24);
  filter: blur(75px);
  border-radius: 50%;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  pointer-events: none
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 800;
  max-width: 790px;
  margin: 0 auto 26px
}

.hero h1 span {
  color: #b39a00
}

.hero p {
  max-width: 700px;
  margin: 0 auto;
  color: var(--qvv-muted);
  font-size: 1.1rem;
  line-height: 1.7
}

.action-grid {
  /*display: grid;
  grid-template-columns: 1.25fr .875fr .875fr;
  gap: 18px;
  margin-top: 34px*/
}

.action-card {
  border: 0;
  border-radius: 24px;
  padding: 28px;

  text-align: left;
  box-shadow: 0 12px 35px rgba(34, 46, 51, .08);
  transition: .2s ease;
  position: relative;
  overflow: hidden
}

.action-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(34, 46, 51, .12)
}

/*icone com borda branca redonda*/
.action-card .icon {

  color: #6E5E00;
  padding: 10px;
  background: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;

 
}

.action-card strong {
  font-family: 'Montserrat';
  font-size: 1.25rem
}

.action-card small {
  opacity: .78;
  margin-top: 5px
}

.action-emergency {
  background: var(--qvv-red);
  color: #fff
}

.action-talk {
  background: var(--qvv-yellow);
  color: #5b4d00
}

.action-prayer {
  background: var(--qvv-blue-soft);
  color: #34434a
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -.04em
}

.section-subtitle {
  font-size: 1.02rem;
  color: var(--qvv-muted);
  line-height: 1.7;
  max-width: 680px
}

.video-card {
  background: #1e292e;
  border-radius: 30px;
  overflow: hidden;
  min-height: 430px;
  position: relative;
  box-shadow: 0 24px 55px rgba(30, 41, 46, .16)
}

.video-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(22, 30, 34, .18), rgba(22, 30, 34, .75)), radial-gradient(circle at 30% 20%, #73858b, #28363b 60%);
  display: flex;
  align-items: flex-end;
  padding: 34px;
  color: #fff
}

.video-play {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  display: grid;
  place-items: center;
  color: var(--qvv-yellow-dark);
  font-size: 2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 0
}

.video-play:hover {
  transform: translate(-50%, -50%) scale(1.05)
}

.church-section {
  background: #eaf4f7;
  border-radius: 42px 42px 0 0
}

.search-panel {
  background: #fff;
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 18px 45px rgba(36, 50, 56, .08)
}

.search-control {
  border-radius: 50rem;
  padding: .95rem 1.15rem;
  border: 1px solid #dde6e9;
  background: #f9fcfd
}

.search-control:focus {
  border-color: #c3aa00;
  box-shadow: 0 0 0 .2rem rgba(244, 213, 29, .18)
}

.btn-qvv {
  background: var(--qvv-yellow-dark);
  color: #fff;
  border: 0;
  border-radius: 50rem;
  padding: .9rem 1.35rem;
  font-weight: 700
}

.btn-qvv:hover {
  background: #5d5000;
  color: #fff
}

.btn-location {
  border-radius: 50rem;
  padding: .9rem 1.2rem;
  font-weight: 700;
  background: #fff;
  border: 1px solid #d8e0e3;
  color: #344148
}

.btn-location:hover {
  background: #f3f7f8
}

.church-card {
  background: #fff;
  border-radius: 22px;
  padding: 20px;
  border: 1px solid rgba(100, 120, 127, .11);
  height: 100%;
  box-shadow: 0 8px 24px rgba(40, 54, 60, .05)
}

.church-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #e5ecee;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: #58666b;
  flex: 0 0 auto
}

.church-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px
}

.church-meta {
  color: var(--qvv-muted);
  font-size: .9rem;
  line-height: 1.55
}

.distance-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: rgba(244, 213, 29, .18);
  color: #6e5e00;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700
}

.church-actions a {
  font-size: .84rem;
  font-weight: 700;
  color: #615200;
  margin-right: 12px
}

.church-actions a:hover {
  text-decoration: underline
}

.tip-card {
  border-radius: 26px;
  padding: 28px;
  height: 100%;
  min-height: 245px;
  box-shadow: 0 10px 28px rgba(41, 54, 60, .06)
}

.tip-card i {
  font-size: 2rem
}

.tip-card h3 {
  font-size: 1.18rem;
  font-weight: 700;
  margin: 18px 0 10px
}

.tip-yellow {
  background: var(--qvv-yellow);
  color: #5a4c00
}

.tip-blue {
  background: #dce7ed;
  color: #34444b
}

.tip-gray {
  background: #e7edef;
  color: #354248
}

.avoid-box {
  background: rgba(255, 218, 214, .55);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.avoid-box i {
  color: var(--qvv-red);
  font-size: 1.2rem
}

.avoid-box p {
  margin: 0
}

.footer-qvv {
  background: #dfe9ed;
  border-radius: 42px 42px 0 0;
  padding: 58px 0
}

.footer-badge {
  display: inline-block;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .88rem;
  box-shadow: 0 8px 20px rgba(40, 54, 60, .07)
}


/* ==============================
   MODAIS QVV
============================== */

.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  margin: 0;
}

.modal-fullscreen .modal-content {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;

  border: 0;
  border-radius: 0;

  background: var(--qvv-bg);

  display: flex;
  flex-direction: column;

  overflow: hidden;
}


/* CABEÇALHO FIXO */
.modal-header-qvv {
  flex: 0 0 auto;

  background: rgba(245, 251, 253, .96);
  backdrop-filter: blur(16px);

  padding: 16px 20px;

  border-bottom: 1px solid rgba(90, 108, 114, .08);

  z-index: 10;
}


/* CORPO ROLÁVEL */
.modal-body-qvv {
  flex: 1 1 auto;

  width: 100%;
  max-width: 840px;

  margin: 0 auto;

  padding: 24px 20px 100px;

  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;
}


/* FORM */
.modal-body-qvv form {
  width: 100%;
}


/* CARDS */
.form-card {
  position: relative;

  width: 100%;

  background: #fff;

  border-radius: 24px;

  padding: 24px;

  box-shadow: 0 10px 28px rgba(41, 54, 60, .05);

  overflow: hidden;
}


/* OPÇÕES */
.check-option {
  display: flex;

  width: 100%;

  align-items: center;

  gap: 12px;

  border: 1px solid #e0e6e8;

  border-radius: 16px;

  padding: 15px;

  cursor: pointer;

  background: #f9fbfc;

  transition: .15s;

  box-sizing: border-box;
}

.check-option span {
  flex: 1;
  min-width: 0;
}

.check-option input {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  accent-color: #756400;
}


/* CALLOUT */
.callout {
  position: relative;

  width: 100%;

  border-radius: 20px;

  padding: 20px;

  background: #dce7ed;

  color: #405057;

  box-sizing: border-box;
}


/* BOTÃO */
.modal-body-qvv .btn-qvv {
  position: relative;

  width: 100%;

  z-index: 1;
}

.success-box {
  display: none;
  background: #fff4ad;
  border-radius: 20px;
  padding: 24px;
  text-align: center
}

.success-box i {
  font-size: 2.2rem;
  color: #6e5e00
}

.loading-spinner {
  display: none
}

.emergency-modal .modal-content {
  background: #f5d928
}

.emergency-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 60px 20px
}

.emergency-card {
  max-width: 620px;
  text-align: center
}

.emergency-icon {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #4f4400;
  color: #f6dc2a;
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  margin: 0 auto 26px;
  box-shadow: 0 14px 30px rgba(79, 68, 0, .18)
}

.emergency-card h2 {
  font-size: clamp(2.3rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: -.05em
}

.emergency-card p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #544900
}

.emergency-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 17px 22px;
  font-weight: 800;
  margin-top: 12px
}

.emergency-btn.dark {
  background: #4d4300;
  color: #fff
}

.emergency-btn.light {
  background: #fff;
  color: #222
}

.emergency-note {
  font-size: .85rem !important;
  color: #685a00 !important;
  margin-top: 22px
}

.result-empty {
  padding: 34px;
  text-align: center;
  color: var(--qvv-muted);
  background: rgba(255, 255, 255, .55);
  border-radius: 22px
}


@media (max-width: 767.98px) {

  .modal-fullscreen,
  .modal-fullscreen .modal-content {
    height: 100dvh;
    max-height: 100dvh;
  }


  .modal-header-qvv {
    padding: 14px 16px;
  }


  .modal-body-qvv {
    padding:

      16px 12px calc(100px + env(safe-area-inset-bottom));

    overflow-y: auto;
    overflow-x: hidden;
  }


  .modal-hero {
    min-height: 160px;

    padding: 24px 20px;

    border-radius: 22px;
  }


  .modal-hero h2 {
    font-size: 2rem;
  }


  .form-card {
    padding: 20px;

    border-radius: 22px;
  }


  .check-option {
    padding: 15px 14px;
  }


  .callout {
    padding: 18px;
  }
}

@media(max-width:767.98px) {
  .section-space {
    padding: 58px 0
  }

  .qvv-header {
    padding-top: 22px
  }

  .qvv-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    font-size: 24px
  }

  .hero {
    padding-top: 24px
  }

  .hero p {
    font-size: 1rem
  }

  .action-grid {
    /*grid-template-columns: 1fr 1fr*/
  }

  .action-emergency {

  }

  .action-card {

    padding: 22px
  }

  .action-card i {
    top: 20px;
    left: 22px
  }

  .action-card strong {
    font-size: 1.05rem
  }

  .video-card {
    min-height: 260px;
    border-radius: 24px
  }

  .church-section,
  .footer-qvv {
    border-radius: 28px 28px 0 0
  }

  .modal-body-qvv {
    padding-left: 14px;
    padding-right: 14px
  }

  .modal-hero {
    padding: 26px 22px
  }

  .search-panel {
    padding: 14px
  }

  .search-stack {
    display: grid !important;
    grid-template-columns: 1fr
  }

  .search-stack>* {
    width: 100%
  }
}