* {
  box-sizing:border-box
}
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  color:#1f2329;
  background:#f5f6f8
}
a {
  color:inherit;
  text-decoration:none
}
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 16px
}
.btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:6px;
  background:var(--primary, #1e50a2);
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:14px
}
.btn:hover {
  opacity:.9
}
@media (max-width: 768px) {
  body {
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))
}

}


.mobile-contact-bar {
  display:none
}
@media (max-width: 768px) {
  .mobile-contact-bar {
  display:flex;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
  gap:10px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
  background:#fffffff5;
  box-shadow:0 -2px 12px #0000001f;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px)
}
.bar-btn {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 8px;
  border:none;
  border-radius:10px;
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1;
  cursor:pointer
}
.bar-btn:disabled {
  opacity:.6;
  cursor:wait
}
.bar-btn.whatsapp {
  background:linear-gradient(135deg,#28d146,#12a832)
}
.bar-btn.email {
  background:linear-gradient(135deg,#f5a623,#f2741c)
}
.bar-btn.call {
  background:linear-gradient(135deg,var(--primary),#16407f)
}
.bar-icon {
  display:inline-flex;
  align-items:center
}

}
.cb-banner {
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:1200;
  max-width:380px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 30px #00000026;
  padding:16px
}
.cb-text {
  margin:0 0 12px;
  font-size:13px;
  line-height:1.6;
  color:#374151
}
.cb-actions {
  display:flex;
  gap:8px;
  justify-content:flex-end
}
.cb-btn {
  border:none;
  border-radius:8px;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer
}
.cb-ok {
  background:#0eb2c6;
  color:#fff
}
.cb-ok:hover {
  background:#0a96a8
}
.cb-ghost {
  background:transparent;
  color:#6b7280;
  border:1px solid #d1d5db
}
.cb-ghost:hover {
  color:#374151;
  border-color:#9ca3af
}
.cb-slide-enter-active,.cb-slide-leave-active {
  transition:opacity .25s,transform .25s
}
.cb-slide-enter-from,.cb-slide-leave-to {
  opacity:0;
  transform:translateY(12px)
}
@media (max-width: 640px) {
  .cb-banner {
  left:12px;
  right:12px;
  bottom:72px;
  max-width:none
}

}

.lp-page {
  min-height:100dvh;
  background:#e9eef1;
  --ink: #17242e;
  --line: #e3e9ed;
  --radius: 16px;
  color:var(--ink);
  font-size:16px;
  line-height:1.5
}
.chat-app {
  max-width:640px;
  margin:0 auto;
  min-height:100dvh;
  background:#f6f8f9;
  display:flex;
  flex-direction:column
}
.chat-header {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  padding:12px 16px;
  border-bottom:1px solid var(--line)
}
.ch-avatar,.msg-ava {
  width:44px;
  height:44px;
  border-radius:50%;
  overflow:hidden;
  flex:none;
  background:var(--brand);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px
}
.ch-avatar img,.msg-ava img {
  width:100%;
  height:100%;
  object-fit:cover
}
.msg-ava {
  width:34px;
  height:34px;
  font-size:14px
}
.ch-info {
  flex:1;
  min-width:0
}
.ch-name {
  font-weight:700;
  font-size:16px;
  color:var(--ink)
}
.ch-status {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:#6b7a85;
  margin-top:1px
}
.status-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#2ecc71;
  flex:none
}
.ch-verified {
  color:var(--brand);
  display:inline-flex
}
.lp-banner {
  position:relative;
  overflow:hidden;
  background:#eef2f4
}
.lp-banner-slide {
  display:none;
  position:relative
}
.lp-banner-slide.active,.lp-banner-slide a {
  display:block
}
.lp-banner-slide img {
  width:100%;
  height:280px;
  object-fit:cover;
  display:block
}
.lp-banner-caption {
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  text-align:center
}
.lp-banner-caption h2 {
  font-size:26px;
  margin:0 0 8px
}
.lp-banner-caption p {
  font-size:15px;
  margin:0;
  line-height:1.5
}
.lp-banner-nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#00000052;
  color:#fff;
  border:none;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:22px;
  line-height:1;
  transition:background .2s
}
.lp-banner-nav:hover {
  background:#0000008c
}
.lp-banner-nav.prev {
  left:12px
}
.lp-banner-nav.next {
  right:12px
}
.lp-banner-dots {
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translate(-50%);
  display:flex;
  gap:8px
}
.lp-banner-dots span {
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ffffff80;
  cursor:pointer;
  transition:background .2s
}
.lp-banner-dots span.on {
  background:#fff
}
@media (max-width: 480px) {
  .lp-banner-slide img {
  height:200px
}
.lp-banner-caption h2 {
  font-size:20px
}
.lp-banner-caption p {
  font-size:13px
}
.lp-banner-nav {
  width:32px;
  height:32px;
  font-size:18px
}

}
.chat-list {
  flex:1;
  padding:20px 14px calc(130px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:14px
}
.msg-row {
  display:flex;
  align-items:flex-end;
  gap:8px
}
.msg-row.me {
  justify-content:flex-end
}
.msg-body {
  max-width:82%;
  min-width:0
}
.bubble {
  display:inline-block;
  background:#fff;
  border-radius:var(--radius) var(--radius) var(--radius) 4px;
  padding:11px 14px;
  font-size:15px;
  color:var(--ink);
  box-shadow:0 1px 2px #102a3914;
  animation:pop-in .28s ease
}
.me-bubble {
  background:var(--brand);
  color:#fff;
  border-radius:var(--radius) var(--radius) 4px var(--radius)
}
.msg-time {
  font-size:11px;
  color:#93a1ab;
  margin-top:4px;
  padding:0 4px
}
.me-time {
  text-align:right
}
.chat-card {
  max-width:88%;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 4px 14px #102a391a;
  animation:pop-in .28s ease
}
.cc-grid {
  display:grid;
  gap:2px
}
.cc-grid.g1 {
  grid-template-columns:1fr
}
.cc-grid.g2,.cc-grid.g4 {
  grid-template-columns:1fr 1fr
}
.cc-grid.g3 {
  grid-template-columns:1fr 1fr 1fr
}
.cc-grid img {
  width:100%;
  height:130px;
  object-fit:cover;
  display:block;
  background:#eef2f4
}
.cc-grid.g1 img {
  height:200px
}
.cc-img {
  cursor:zoom-in;
  transition:transform .15s,filter .15s
}
.cc-img:hover {
  transform:scale(1.02);
  filter:brightness(1.04)
}
.lp-lightbox {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background:#000000eb;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  cursor:zoom-out
}
.lp-lightbox img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:6px
}
.lp-lightbox-close {
  position:absolute;
  top:16px;
  right:26px;
  color:#fff;
  font-size:42px;
  line-height:1;
  cursor:pointer
}
.options {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%
}
.option-btn {
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  color:var(--brand);
  border:1.5px solid var(--brand);
  border-radius:14px;
  padding:13px 18px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,transform .15s,opacity .2s;
  animation:opt-in .3s ease both
}
.option-btn:hover:not(:disabled) {
  background:color-mix(in srgb,var(--brand) 8%,#fff);
  transform:translateY(-1px)
}
.option-btn.picked {
  background:var(--brand);
  color:#fff
}
.option-btn:disabled {
  opacity:.45;
  cursor:default
}
.option-btn.picked:disabled {
  opacity:1
}
.typing-bubble {
  background:#fff;
  border-radius:var(--radius) var(--radius) var(--radius) 4px;
  padding:14px 16px;
  display:inline-flex;
  gap:5px;
  box-shadow:0 1px 2px #102a3914
}
.typing-bubble span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#a9b7c0;
  animation:typing-bounce 1.2s infinite ease-in-out
}
.typing-bubble span:nth-child(2) {
  animation-delay:.15s
}
.typing-bubble span:nth-child(3) {
  animation-delay:.3s
}
.final-box {
  max-width:100%
}
.wa-btn {
  margin-top:12px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25d366;
  color:#fff;
  border:none;
  border-radius:14px;
  padding:15px 18px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 18px #25d36659;
  transition:transform .15s,filter .15s;
  animation:pop-in .3s ease
}
.wa-btn:hover:not(:disabled) {
  transform:translateY(-2px);
  filter:brightness(1.03)
}
.wa-btn:disabled {
  opacity:.7;
  cursor:wait
}
.browse-link {
  display:block;
  text-align:center;
  margin-top:10px;
  color:var(--brand);
  font-size:14px;
  font-weight:600;
  text-decoration:underline
}
.restart-btn {
  align-self:center;
  margin:6px auto 0;
  background:none;
  border:none;
  color:#8a98a3;
  font-size:13px;
  cursor:pointer;
  padding:8px
}
.restart-btn:hover {
  color:var(--brand)
}
@keyframes pop-in {
  0% {
  opacity:0;
  transform:translateY(10px)
}
to {
  opacity:1;
  transform:translateY(0)
}

}
@keyframes opt-in {
  0% {
  opacity:0;
  transform:translateY(8px)
}
to {
  opacity:1;
  transform:translateY(0)
}

}
@keyframes typing-bounce {
  0%,60%,to {
  transform:translateY(0);
  opacity:.5
}
30% {
  transform:translateY(-5px);
  opacity:1
}

}
@media (min-width: 641px) {
  .lp-page {
  padding:28px 0
}
.chat-app {
  min-height:calc(100dvh - 56px);
  max-height:calc(100dvh - 56px);
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 0 40px #102a3914
}
.chat-list {
  overflow-y:auto
}

}
@media (max-width: 380px) {
  .bubble,.option-btn {
  font-size:14.5px
}
.option-btn {
  padding:12px 15px
}
.chat-list {
  padding-left:10px;
  padding-right:10px
}

}


/* Keyboard controls and native links keep the original visual layout. */
[hidden] { display: none !important; }
.lp-banner-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff80;
  cursor: pointer;
  transition: background .2s;
}
.lp-banner-dots button.on { background: #fff; }
.lp-lightbox-close { border: 0; background: none; padding: 0; font-family: inherit; }
a.wa-btn { text-align: center; }
button:focus-visible, a:focus-visible, .cc-img:focus-visible { outline: 3px solid #087e91; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}