:root{
  --ink:#111111;
  --ink-2:#F7F7F5;
  --paper:#FFFFFF;
  --amber:#0B5D38;
  --teal:#1DC277;
  --slate:#7A7A76;
  --red:#E14B4B;
  --line: rgba(17,17,17,0.10);
  --radius: 16px;
  --display: 'Inter', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

body.theme-dark{
  --ink:#F5F5F3;
  --ink-2:#1B1D1C;
  --paper:#101211;
  --slate:#8C9490;
  --line: rgba(245,245,243,0.12);
}
body.theme-dark{ background: var(--paper); color: var(--ink); }

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select{ font-family: inherit; }

.app-shell{
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 84px;
}

/* -------- status strip -------- */
.statusbar{
  display:flex; align-items:center; gap:8px;
  padding: 14px 18px 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--slate);
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%;
  background: var(--teal);
  box-shadow: 0 0 0 0 rgba(31,200,169,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(31,200,169,0.5); }
  70%{ box-shadow: 0 0 0 6px rgba(31,200,169,0); }
  100%{ box-shadow: 0 0 0 0 rgba(31,200,169,0); }
}
.statusbar-time{ margin-left:auto; }
.lang-row{ display:flex; gap:4px; margin-left:auto; }
.lang-btn{
  background:none; border:1px solid transparent; border-radius:6px;
  font-size:14px; padding:2px 4px; cursor:pointer; opacity:0.45; line-height:1;
}
.lang-btn.is-active{ opacity:1; border-color: var(--line); background: var(--ink-2); }
.theme-btn{
  background: var(--ink-2); border:1px solid var(--line); border-radius:8px;
  width:26px; height:26px; font-size:13px; cursor:pointer; margin-left:8px;
  display:flex; align-items:center; justify-content:center; color: var(--ink);
}

/* -------- views -------- */
.view{ padding: 6px 18px 28px; animation: fadein .25s ease; }
@keyframes fadein{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

.view-title{
  font-family: var(--display);
  font-weight:700;
  font-size: 26px;
  margin: 10px 0 4px;
}
.view-sub{ color: var(--slate); font-size: 13px; margin: 0 0 18px; }

/* -------- home / brand -------- */
.brand-row{ display:flex; align-items:center; gap:12px; margin: 6px 0 14px; }
.brand-mark{
  width:44px; height:44px; border-radius:12px;
  overflow: hidden;
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.brand-mark img{ width:100%; height:100%; object-fit:cover; }
.brand-mark .mark-dark{ display:none; }
body.theme-dark .brand-mark .mark-light{ display:none; }
body.theme-dark .brand-mark .mark-dark{ display:block; }
.brand-name{ font-family: var(--display); font-weight:700; font-size:20px; }
.brand-tag{ color: var(--slate); font-size:12.5px; margin-top:1px; }

.perk-row{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom: 18px;
}
.perk-row span{
  font-size: 11.5px; font-weight:700; color: var(--ink);
  background: var(--ink-2); border:1px solid var(--line);
  padding: 6px 10px; border-radius: 999px;
}

/* -------- signature: dispatch ticket -------- */
.ticket{
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 22px;
  margin-bottom: 26px;
  overflow: hidden;
}
.ticket::before, .ticket::after{
  content:"";
  position:absolute; bottom:-10px;
  width:20px; height:20px; border-radius:50%;
  background: var(--ink);
}
.ticket::before{ left:-10px; }
.ticket::after{ right:-10px; }
.ticket-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 14px;
}
.ticket-label{
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--amber);
}
.ticket-id{ font-family: var(--mono); font-size: 11px; color: var(--slate); }

.ticket-field{ display:block; margin-bottom: 12px; }
.ticket-field span{
  display:block; font-size: 11.5px; color: var(--slate); margin-bottom: 5px;
}
.ticket-field select, .ticket-field input{
  width:100%; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font-size: 14.5px;
}
.ticket-field select{ appearance:none; }

.ticket-row{ display:flex; gap:10px; margin-bottom: 12px; }
.ticket-stat{
  flex:1; background: var(--paper); border:1px solid var(--line);
  border-radius: 10px; padding: 10px 12px;
}
.ticket-stat-label{ display:block; font-size:10.5px; color:var(--slate); margin-bottom:3px; }
.ticket-stat-value{ font-family: var(--mono); font-size: 14px; color: var(--teal); }

.ticket-cta{
  width:100%; border:none; border-radius: 12px;
  background: var(--amber); color: var(--paper);
  font-weight:700; font-size: 15px; padding: 13px;
  cursor:pointer; margin-top: 4px;
}
.ticket-cta:active{ transform: scale(0.99); }

.ticket-perf{
  position:absolute; left:14px; right:14px; bottom:8px; height:0;
  border-top: 1.5px dashed var(--line);
}

.section-title{
  font-family: var(--display); font-weight:600; font-size:15px;
  color: var(--slate); text-transform: uppercase; letter-spacing:.04em;
  margin: 4px 0 12px;
}

/* -------- home search -------- */
.home-search{
  width:100%; background: var(--ink-2); color: var(--ink);
  border:1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size:14px; margin-bottom: 18px;
}

/* -------- activity ticker -------- */
.activity-ticker{
  min-height: 30px; margin-bottom: 14px; position:relative; overflow:hidden;
}
.activity-toast{
  display:flex; align-items:center; gap:8px;
  background: var(--ink-2); border:1px solid var(--line); border-radius: 999px;
  padding: 7px 13px; font-size:11.5px; color: var(--ink);
  width: fit-content; max-width:100%;
  animation: ticker-in-out 4.5s ease forwards;
}
.activity-toast .dot{ width:6px; height:6px; border-radius:50%; background: var(--teal); flex:none; }
.activity-toast b{ font-weight:700; }
@keyframes ticker-in-out{
  0%{ opacity:0; transform: translateY(6px); }
  8%{ opacity:1; transform: translateY(0); }
  85%{ opacity:1; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(-6px); }
}

/* -------- popular service tiles -------- */
.pop-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-bottom: 22px;
}
.pop-tile{
  background: var(--ink-2); border:1px solid var(--line); border-radius: 14px;
  padding: 14px 8px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.pop-tile span{ font-size:20px; }
.pop-tile em{ font-style:normal; font-size:11.5px; font-weight:600; color: var(--ink); }
.pop-tile.pop-more{ background: rgba(29,194,119,0.08); border-color: rgba(29,194,119,0.3); }
.pop-tile.pop-more em{ color: var(--teal); }

/* -------- feature strip -------- */
.feature-strip{
  display:flex; flex-direction:column; gap:6px; margin-bottom: 14px;
}
.feature-strip span{
  font-size: 12px; color: var(--slate);
  padding: 2px 0;
}

.cat-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin-bottom: 18px;
}
.cat-card{
  background: var(--ink-2); border:1px solid var(--line); border-radius: 14px;
  padding: 12px 6px; text-align:center; color: var(--ink);
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  font-size: 11px; font-weight:600; line-height:1.2;
}
.cat-icon{
  font-size: 18px; width:38px; height:38px; border-radius:50%;
  background: var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}

@media (max-width: 360px){
  .cat-grid{ gap:6px; }
  .cat-card{ font-size:10px; padding:10px 4px; }
  .cat-icon{ width:34px; height:34px; font-size:16px; }
}

.link-card{
  display:flex; align-items:center; justify-content:space-between;
  background: linear-gradient(120deg, rgba(31,200,169,0.14), rgba(31,200,169,0.04));
  border: 1px solid rgba(31,200,169,0.3);
  border-radius: 14px; padding: 15px 16px; cursor:pointer;
}
.link-card-title{ font-weight:700; font-size:14.5px; }
.link-card-sub{ color: var(--slate); font-size:12px; margin-top:2px; }
.link-card-arrow{ color: var(--teal); font-size:18px; }

/* -------- services / accordion -------- */
.search-input{
  width:100%; background: var(--ink-2); color: var(--ink);
  border:1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; font-size:14.5px; font-weight:600; margin-bottom:16px;
}
.acc-group{ margin-bottom: 10px; border:1px solid var(--line); border-radius: 14px; overflow:hidden; }
.acc-head{
  width:100%; text-align:left; background: var(--ink-2); color: var(--ink);
  border:none; padding: 14px 16px; font-family: var(--display); font-weight:600;
  font-size: 14.5px; display:flex; justify-content:space-between; align-items:center;
  cursor:pointer;
}
.acc-head .chev{ color: var(--slate); transition: transform .2s; }
.acc-group.open .acc-head .chev{ transform: rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition: max-height .25s ease; background: var(--paper); }
.acc-group.open .acc-body{ max-height: 900px; }
.acc-item{
  font-weight:600;
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 16px; font-size: 13.5px; border-top: 1px solid var(--line);
}
.acc-item button{
  background: none; border: 1px solid var(--line); color: var(--teal);
  border-radius: 999px; font-size: 11.5px; padding: 5px 10px; cursor:pointer;
}

/* -------- book form -------- */
.book-form{ display:flex; flex-direction:column; gap:14px; }
.book-form label{ font-size:12.5px; color: var(--slate); display:flex; flex-direction:column; gap:6px; }
.book-form input{
  background: var(--ink-2); color: var(--ink); border:1px solid var(--line);
  border-radius: 10px; padding: 12px 13px; font-size:14.5px;
}
.primary-btn{
  border:none; border-radius:12px; background: var(--amber); color: var(--paper);
  font-weight:700; font-size:15px; padding:13px; cursor:pointer; margin-top:4px;
}
.quickcall{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }
.quickcall-btn{
  flex:1; text-align:center; text-decoration:none; color: var(--ink);
  background: var(--ink-2); border:1px solid var(--line); border-radius:12px;
  padding: 12px; font-size:13px; font-weight:600;
}

/* -------- areas -------- */
.chip-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  background: var(--ink-2); border:1px solid var(--line); color: var(--ink);
  border-radius: 999px; padding: 8px 13px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.chip:active{ background: #ECEBE6; }

/* -------- more -------- */
.more-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.more-item{
  display:flex; justify-content:space-between; align-items:center;
  background: var(--ink-2); border:1px solid var(--line); color: var(--ink);
  border-radius: 12px; padding: 14px 16px; font-size:14px; font-weight:700; cursor:pointer; text-align:left;
}
.more-item span{ color: var(--slate); }
.social-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.social-row a{
  color: var(--teal); text-decoration:none; font-size:12.5px;
  border:1px solid var(--line); border-radius:999px; padding:7px 12px;
}
.footnote{ color: var(--slate); font-size:11.5px; text-align:center; }
.brand-lockup-frame{
  background:#FFFFFF; border-radius:14px; padding:16px;
  max-width:220px; margin: 18px auto 4px; border:1px solid var(--line);
}
.brand-lockup{ width:100%; display:block; }

/* -------- bottom tab bar -------- */
.tabbar{
  position: fixed; bottom:0; left:50%; transform: translateX(-50%);
  width:100%; max-width:480px;
  display:flex; justify-content:space-around;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab-btn{
  background:none; border:none; color: var(--slate);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size: 10.5px; font-weight:700; padding: 4px 8px; cursor:pointer;
}
.tab-btn svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.tab-btn.is-active{ color: var(--amber); }
.tab-btn.is-active svg{ stroke: var(--amber); }

/* -------- install toast -------- */
.install-toast{
  position: fixed; left:50%; transform: translateX(-50%);
  bottom: 84px; max-width:440px; width: calc(100% - 32px);
  background: var(--teal); color: var(--ink);
  border-radius: 12px; padding: 11px 12px;
  display:none; align-items:center; gap:10px; font-size:12.5px; font-weight:600;
  z-index: 20;
}
.install-toast.show{ display:flex; }
.install-toast button{
  border:none; border-radius:999px; padding:6px 10px; font-size:11.5px; cursor:pointer;
}
#install-btn{ background: var(--ink); color: var(--paper); font-weight:700; }
#install-dismiss{ background:transparent; color: var(--ink); margin-left:auto; font-size:14px; }

@media (min-width: 720px) and (max-width: 899px){
  body{
    background:
      radial-gradient(circle at 15% 10%, rgba(29,194,119,0.10), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(11,93,56,0.08), transparent 45%),
      #F3F3F0;
    min-height: 100vh;
    padding: 48px 20px;
  }
  body.theme-dark{
    background:
      radial-gradient(circle at 15% 10%, rgba(29,194,119,0.14), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(29,194,119,0.08), transparent 45%),
      #0A0B0A;
  }
  .app-shell{
    box-shadow: 0 40px 90px -30px rgba(10,20,15,0.35), 0 0 0 1px var(--line);
    border-radius: 32px;
    overflow: hidden;
  }
  .tabbar{ border-radius: 0 0 32px 32px; }
}

@media (prefers-reduced-motion: reduce){
  .pulse-dot, .view{ animation: none; }
}

/* ================= TRUST BAR ================= */
.trust-bar{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:8px;
  margin-bottom: 20px;
}
.trust-stat{
  background: var(--ink-2); border:1px solid var(--line); border-radius: 12px;
  padding: 10px 6px; text-align:center;
}
.trust-stat strong{ display:block; font-family: var(--display); font-size:14px; color: var(--teal); }
.trust-stat span{ display:block; font-size:9.5px; color: var(--slate); margin-top:2px; font-weight:600; }

/* ================= REVIEWS ================= */
.review-grid{ display:flex; flex-direction:column; gap:10px; margin-bottom: 22px; }
.review-card{
  background: var(--ink-2); border:1px solid var(--line); border-radius: 14px;
  padding: 14px 16px;
}
.review-stars{ color: #F5A623; font-size:13px; margin-bottom:6px; letter-spacing:2px; }
.review-card p{ margin:0 0 8px; font-size:13px; line-height:1.5; color: var(--ink); font-weight:500; }
.review-author{ font-size:11.5px; color: var(--slate); font-weight:700; }

/* ================= TRUST BADGES (shared sidebar/rail) ================= */
.trust-badge{
  display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700;
  color: var(--ink); padding: 7px 0;
}

/* ================= FLOATING HELP BUTTON ================= */
.fab-help{
  position: fixed; right:18px; bottom: 96px; z-index: 25;
  width:52px; height:52px; border-radius:50%; border:none;
  background: var(--teal); color:#fff; font-size:22px; cursor:pointer;
  box-shadow: 0 6px 18px rgba(29,194,119,0.4);
  display:flex; align-items:center; justify-content:center;
}

/* ================= DESKTOP SIDEBAR (hidden on mobile) ================= */
.sidebar{ display:none; }
.sidebar-brand{ display:flex; align-items:center; gap:10px; padding: 4px 4px 18px; }
.sidebar .tab-btn{
  flex-direction:row; justify-content:flex-start; gap:12px; width:100%;
  padding: 11px 12px; border-radius: 10px; font-size:13.5px;
}
.sidebar .tab-btn:hover{ background: var(--ink-2); }
.sidebar .tab-btn.is-active{ background: rgba(29,194,119,0.1); }
.sidebar .tab-btn svg{ width:19px; height:19px; }
.sidebar-trust{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
}
.sidebar-trust-title{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color: var(--slate); font-weight:700; margin-bottom:8px; }
.sidebar-help-btn{
  width:100%; margin-top:10px; border:none; border-radius:10px;
  background: var(--amber); color:#fff; font-weight:700; font-size:13px;
  padding: 11px; cursor:pointer; display:flex; align-items:center; gap:8px; justify-content:center;
}

/* ================= DESKTOP RIGHT RAIL (hidden on mobile) ================= */
.right-rail{ display:none; }
.rail-card{
  background: var(--ink-2); border:1px solid var(--line); border-radius: 16px;
  padding: 18px; margin-bottom: 16px;
}
.rail-card-title{ font-family: var(--display); font-weight:700; font-size:15px; margin-bottom:4px; }
.rail-card-sub{ font-size:12px; color: var(--slate); margin:0 0 12px; }
.track-form{ display:flex; gap:8px; }
.track-form input{
  flex:1; background: var(--paper); border:1px solid var(--line); border-radius:10px;
  padding: 10px 12px; font-size:13px; font-family: var(--mono);
}
.track-form button{
  border:none; border-radius:10px; background: var(--ink); color: var(--paper);
  font-weight:700; font-size:12.5px; padding: 0 16px; cursor:pointer;
}
.track-result{ margin-top:12px; font-size:12.5px; line-height:1.5; }
.track-result .tr-status{ font-weight:700; color: var(--teal); }
.rail-card-contact{ background: linear-gradient(135deg, rgba(29,194,119,0.12), rgba(29,194,119,0.03)); border-color: rgba(29,194,119,0.3); }
.rail-whatsapp-btn{
  display:flex; align-items:center; gap:8px; justify-content:center;
  background: var(--teal); color:#fff; text-decoration:none; font-weight:700; font-size:13.5px;
  padding: 12px; border-radius:10px; margin-bottom:10px;
}
.rail-call-link{ display:block; text-align:center; color: var(--ink); font-weight:700; font-size:12.5px; text-decoration:none; }

/* ================= DESKTOP BREAKPOINT ================= */
@media (min-width: 900px){
  body{ background: var(--ink-2); }
  body.theme-dark{ background: #08090A; }

  .app-shell{
    max-width: 1180px;
    display:grid;
    grid-template-columns: 240px minmax(0,640px) 300px;
    gap: 24px;
    align-items:start;
    padding: 28px 24px 60px;
    min-height: auto;
  }

  .sidebar{
    display:flex; flex-direction:column;
    position: sticky; top:28px;
    background: var(--paper); border:1px solid var(--line); border-radius: 18px;
    padding: 20px 16px; min-height: 70vh;
  }

  .main-col{
    background: var(--paper); border:1px solid var(--line); border-radius: 18px;
    padding: 4px 8px 24px;
  }

  .right-rail{
    display:block; position: sticky; top:28px;
  }

  .main-col .view#view-home .brand-row{ display:none; } /* avoid duplicate brand shown in sidebar */

  .tabbar{ display:none; }
  .fab-help{ right: calc(50% - 590px + 24px); }

  .cat-grid{ grid-template-columns: repeat(4, 1fr); }
  .pop-grid{ grid-template-columns: repeat(3, 1fr); }
  .review-grid{ flex-direction: row; }
  .review-card{ flex:1; }
}

@media (min-width: 1180px){
  .fab-help{ right: calc(50% - 590px - 60px); }
}