:root {
  color-scheme: dark;
  --deep: #173e34;
  --deepest: #0a241f;
  --cream: #f7f5ef;
  --hero-position-desktop: center center;
  --hero-position-mobile: center center;
  font-family: Manrope, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; }
body { min-width: 320px; margin: 0; background: var(--deepest); color: #fff; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid #e7d7a9; outline-offset: 4px; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 54px 24px 72px;
  overflow: clip;
  text-align: center;
  background: #766b69;
}
.hero__poster, .hero__tint { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster {
  z-index: -4;
  background: #766b69 url("../img/hero-poster.webp?v=3") var(--hero-position-desktop) / cover no-repeat;
  filter: blur(20px) saturate(.76) contrast(.9) brightness(.85) sepia(.08);
  transform: scale(1.08);
}
.hero__still, .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: saturate(.78) contrast(.90) brightness(.91) sepia(.07);
}
.hero__still { z-index: -3; background: url("../img/hero-poster.webp?v=3") center / cover no-repeat; }
.hero__video {
  z-index: -2;
  object-fit: cover;
  object-position: var(--hero-position-desktop);
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }
.hero__tint {
  z-index: -1;
  background:
    radial-gradient(ellipse 67% 72% at 50% 48%, rgba(34, 31, 35, .57), rgba(60, 49, 51, .29) 78%, transparent 100%),
    linear-gradient(180deg, rgba(71, 58, 58, .31), rgba(49, 42, 45, .30) 37%, rgba(40, 35, 39, .46) 70%, rgba(26, 25, 31, .76)),
    linear-gradient(112deg, rgba(241, 216, 201, .18), rgba(209, 195, 188, .09) 55%, rgba(237, 209, 188, .15));
}
.hero__content {
  width: min(100%, 850px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-4px);
}
.brand { display: block; width: clamp(244px, 27vw, 332px); height: auto; margin-bottom: clamp(25px, 4vh, 41px); filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .18)); }
.hero__copy { text-shadow: 0 2px 20px rgba(0, 0, 0, .16); }
.hero__topic { max-width: 850px; margin: 0 auto; color: #fff; font-size: clamp(38px, 3.6vw, 52px); font-weight: 700; line-height: 1.16; letter-spacing: -.045em; text-wrap: balance; }
.hero__headline { margin: 16px 0 0; color: #f8eee6; font-size: clamp(24px, 2.35vw, 34px); font-weight: 550; line-height: 1.25; letter-spacing: -.028em; text-wrap: balance; }
.hero__subtitle { max-width: 650px; margin: 15px auto 0; font-size: clamp(16px, 1.25vw, 18px); font-weight: 400; line-height: 1.55; letter-spacing: -.012em; color: #faf6f1; text-wrap: balance; }
.hero__actions { display: flex; flex-direction: column; gap: 10px; width: min(100%, 418px); margin-top: clamp(30px, 5vh, 45px); }
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 57px;
  padding: 13px 50px 13px 20px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 11px;
  background: rgba(250, 249, 244, .96);
  box-shadow: 0 9px 22px rgba(4, 26, 22, .13), inset 0 1px 0 #fff;
  color: var(--deep);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  text-align: center;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.cta .fa-whatsapp { position: absolute; right: 21px; top: 50%; transform: translateY(-50%); font-size: 21px; opacity: .82; }
.cta:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 14px 26px rgba(4, 26, 22, .21); }
.cta:active { transform: translateY(0); }
.hero__legal { position: absolute; bottom: max(19px, env(safe-area-inset-bottom)); left: 20px; right: 20px; display: flex; justify-content: center; gap: 12px; font-size: 12px; letter-spacing: .015em; color: rgba(255, 255, 255, .83); }
.hero__legal a { text-decoration-color: rgba(255, 255, 255, .38); text-underline-offset: 4px; }
.hero__legal a:hover { text-decoration-color: currentColor; }

.contact { position: fixed; z-index: 20; right: max(26px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: 15px; }
.contact__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 157px;
  height: 49px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 10px;
  background: linear-gradient(140deg, #258863, #19674c 78%);
  box-shadow: 0 9px 31px rgba(0, 20, 13, .32), inset 0 1px 1px rgba(255, 255, 255, .35);
  color: #fff;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: contact-heartbeat 5.8s ease-in-out 1s infinite;
}
.contact__toggle:hover { transform: translateY(-3px); box-shadow: 0 13px 34px rgba(0, 20, 13, .37); animation: none; }
.contact__toggle[aria-expanded="true"] { animation: none; }
.contact__toggle .fa-whatsapp { font-size: 22px; }
@keyframes contact-heartbeat {
  0%, 4%, 11%, 22%, 100% { transform: scale(1); }
  7% { transform: scale(1.065); }
  15% { transform: scale(1.105); }
}
.contact__panel {
  position: relative;
  width: min(348px, calc(100vw - 32px));
  max-height: calc(100dvh - 110px - env(safe-area-inset-bottom));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 20px 56px rgba(4, 25, 19, .32);
  color: #203b34;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.985);
  transform-origin: bottom right;
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
  scrollbar-width: thin;
}
.contact__panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.contact__photo { height: 141px; overflow: hidden; background: #dee8dd; }
.contact__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.contact__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: rgba(19, 49, 40, .75); color: #fff; cursor: pointer; }
.contact__close .fa-times { font-size: 15px; }
.contact__body { padding: 22px 24px 20px; }
.contact__eyebrow { font-size: 11px; font-weight: 750; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: #447565; }
.contact__body h2 { margin: 8px 0 9px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.04em; }
.contact__body p { margin: 0; font-size: 14px; line-height: 1.55; color: #4b5e55; }
.contact__cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 47px; margin-top: 20px; padding: 11px 14px; border-radius: 8px; background: var(--deep); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.contact__cta:hover { background: #24594c; transform: translateY(-1px); }
.contact__cta .fa-external-link-alt { font-size: 13px; }

@media (max-width: 700px) {
  .hero { min-height: 100dvh; padding: max(26px, env(safe-area-inset-top)) 20px calc(93px + env(safe-area-inset-bottom)); }
  .hero__still { background-image: url("../img/hero-poster-mobile.webp"); }
  .hero__video { object-position: var(--hero-position-mobile); }
  .hero__tint { background: radial-gradient(ellipse 92% 70% at 50% 45%, rgba(40, 35, 39, .68), rgba(64, 54, 55, .39) 85%, transparent), linear-gradient(180deg, rgba(81, 67, 65, .39), rgba(48, 41, 44, .35) 45%, rgba(24, 23, 30, .82)), linear-gradient(110deg, rgba(244, 218, 201, .17), rgba(215, 197, 187, .12)); }
  .hero__content { transform: none; }
  .brand { width: clamp(213px, 59vw, 265px); margin-bottom: 25px; }
  .hero__topic { max-width: 390px; font-size: clamp(30px, 7.6vw, 38px); line-height: 1.16; }
  .hero__headline { margin-top: 12px; font-size: clamp(21px, 5.5vw, 27px); line-height: 1.25; letter-spacing: -.029em; }
  .hero__subtitle { max-width: 390px; margin-top: 13px; font-size: 16px; line-height: 1.48; }
  .hero__actions { width: min(90vw, 420px); margin-top: 25px; gap: 9px; }
  .cta { min-height: 55px; font-size: 14px; }
  .hero__legal { bottom: calc(78px + env(safe-area-inset-bottom)); justify-content: center; left: 16px; right: 16px; gap: 7px; font-size: 11px; }
  .contact { right: calc(16px + env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); gap: 11px; }
  .contact__toggle { min-width: 150px; height: 47px; padding-inline: 12px; }
}
@media (max-width: 360px) {
  .hero { padding-left: 15px; padding-right: 15px; }
  .brand { width: 205px; margin-bottom: 17px; }
  .hero__topic { font-size: 29px; }
  .hero__headline { margin-top: 9px; font-size: 20px; }
  .hero__subtitle { font-size: 15px; margin-top: 12px; }
  .hero__actions { margin-top: 20px; }
  .cta { min-height: 52px; padding-left: 12px; padding-right: 36px; font-size: 13px; }
  .cta .fa-whatsapp { right: 11px; font-size: 19px; }
}
@media (max-height: 650px) {
  .hero { padding-top: 22px; }
  .brand { width: min(230px, 55vw); margin-bottom: 15px; }
  .hero__headline { margin-top: 8px; }
  .hero__subtitle { margin-top: 11px; }
  .hero__actions { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .hero__video { display: none; }
  .contact__toggle { animation: none; }
}