/* Seguiu · nova home — estilos base extraídos da referência */
body{margin:0;background:#FFFFFF;font-family:"Open Runde",Figtree,system-ui,sans-serif;color:#1B1533;-webkit-font-smoothing:antialiased}
a{color:#6701E6;text-decoration:none}a:hover{color:#4701A1}
*{box-sizing:border-box}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
.h{font-family:"Bricolage Grotesque",Figtree,sans-serif;letter-spacing:-.035em}
.num{font-variant-numeric:tabular-nums}
.muted{color:#5F5A72}
.panel{border-radius:40px;background:#F6F5F8;position:relative;overflow:hidden}
.card{background:#FFFFFF;border:1px solid #E3E0EA;border-bottom-width:3px;border-radius:18px}
.pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;background:#FFFFFF;border:1px solid #E3E0EA}
.btn{display:inline-flex;align-items:center;gap:14px;height:62px;padding:0 8px 0 24px;border-radius:18px;font-weight:700;font-size:17px;white-space:nowrap}
.btn-d{background:#1B1533;color:#FFFFFF;border-bottom:5px solid #0B0716}
.btn-d:hover{color:#FFFFFF;background:#2A2245}
.btn-d .chip{width:48px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#FFFFFF;border-bottom:3px solid rgba(0,0,0,.25)}
.btn-l{background:#FFFFFF;color:#1B1533;border:1px solid #DDD9E6;border-bottom-width:5px;padding:0 24px}
.btn-l:hover{color:#1B1533;background:#FAF8FE}
.field{display:flex;align-items:center;gap:10px;height:62px;padding:0 7px 0 18px;border-radius:18px;background:#FFFFFF;border:1px solid #DDD9E6;border-bottom-width:4px}
.field input{flex-grow:1;min-width:0;border:0;background:transparent;font-size:17px;outline:none;color:#1B1533}
.field:focus-within{border-color:#6701E6}
.av{display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;flex-shrink:0}
.bar{height:10px;border-radius:999px;background:#EFEDE9;overflow:hidden;position:relative}
.bar>span{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:#6701E6}
.row{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#FFFFFF;border:1px solid #E3E0EA;border-bottom-width:3px;color:#1B1533}
.row:hover{color:#1B1533;border-color:#CDB6F6}
.feat{display:flex;gap:12px;font-size:17px;line-height:1.45}
.feat svg{flex-shrink:0;margin-top:2px}
.faq{border-top:1px solid #E3E0EA}
.faq button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;border:0;background:transparent;text-align:left;font-weight:700}
.fontrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#FAF9FB;border:1px solid #EFEDF3}
.fontrow span{flex-grow:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px}
.fontrow button{height:36px;padding:0 12px;border-radius:10px;border:1px solid #E0CBFA;background:#F4EBFF;color:#4701A1;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
.svcbtn{display:flex;align-items:center;justify-content:space-between;height:74px;padding:0 20px 0 26px;border-radius:18px;font-weight:700;font-size:19px;background:#2C2442;color:#FFFFFF}
.svcbtn:hover{color:#FFFFFF;background:#3A3156}
.svcbtn.first{background:#FFFFFF;color:#1B1533}
.svcbtn.first:hover{color:#1B1533;background:#F4EBFF}
.svcbtn i{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);font-style:normal}
.svcbtn.first i{background:#1B1533;color:#FFFFFF}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#1B1533;border-radius:26px 26px 0 0;padding:8px 8px 0}
.tabs button{height:78px;border:0;background:transparent;color:#C9C2DD;font-weight:700;font-size:14.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:20px 20px 0 0}
.tabs button.on{background:#FFFFFF;color:#1B1533}
.flink{color:#5F5A72;font-size:15px}
.flink:hover{color:#6701E6}
.pen path{fill:none;stroke-linecap:round;stroke-linejoin:round}
@keyframes pen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes lit{from{background-position:100% 0}to{background-position:0 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes floatb{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes speed{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes wob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes fill{0%{width:6%}70%,100%{width:100%}}
@keyframes cursor{0%{transform:translate(140px,120px);opacity:0}15%{opacity:1}45%{transform:translate(0,0)}52%{transform:translate(0,0) scale(.86)}58%{transform:translate(0,0) scale(1)}85%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes press{0%,48%{transform:translateY(0)}52%{transform:translateY(3px)}58%,100%{transform:translateY(0)}}
@keyframes ripple{0%,50%{transform:scale(.2);opacity:0}52%{opacity:.7}80%,100%{transform:scale(2.4);opacity:0}}
.pen path{stroke-dasharray:1;stroke-dashoffset:0;animation:pen .9s .3s ease-out both}
.fl1{animation:float 5s ease-in-out infinite}
.fl2{animation:floatb 6s ease-in-out infinite}
.fl3{animation:float 7s ease-in-out infinite .8s}
.wob{animation:wob 4s ease-in-out infinite}
@keyframes twk{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.78) rotate(14deg)}}
.twk{animation:twk 3s ease-in-out infinite}
.marq{display:flex;width:max-content;animation:marquee 40s linear infinite}
.lit{background:linear-gradient(90deg,#1B1533 50%,#A29CB6 50%);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
@supports (animation-timeline: view()){
 .rise{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 .pen.sv path{animation:pen linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
 .lit{animation:lit linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
@media (prefers-reduced-motion: reduce){.rise,.pen path,.lit,.fl1,.fl2,.fl3,.wob,.twk,.marq,.anim{animation:none!important}.lit{background-position:0 0}}


/* Responsive Shell & Layout */
html, body {
  overflow-x: hidden;
  width: 100%;
}
.sg-shell {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  position: relative;
  overflow-x: hidden;
}

/* Mobile Drawer */
.sg-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(27, 21, 51, .6);
  backdrop-filter: blur(2px);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.sg-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}
.sg-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 310px;
  max-width: 85vw;
  background: #FFFFFF;
  z-index: 999;
  transform: translateX(100%);
  transition: transform .25s ease;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  box-sizing: border-box;
}
.sg-drawer-backdrop.is-open .sg-drawer {
  transform: translateX(0);
}

/* Responsive Media Queries (<= 900px) - Match home-celular.html */
@media (max-width: 900px) {
  /* Enforce viewport bounds and prevent horizontal scroll */
  html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  *, *::before, *::after {
    box-sizing: border-box !important;
  }
  .sg-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0 auto !important;
  }

  /* Header */
  .sg-header {
    height: 70px !important;
    padding: 0 18px !important;
    border-bottom: 1px solid #EFEDF3 !important;
  }
  .sg-header-logo {
    width: 106px !important;
    height: 28px !important;
  }
  .sg-nav-desktop, .sg-actions-desktop {
    display: none !important;
  }
  .sg-actions-mobile {
    display: flex !important;
  }

  /* Hero Section */
  .sg-hero-section {
    margin: 0 10px !important;
    padding: 26px 18px 22px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #EFE7FF 0%, #F6F5F8 55%) !important;
  }
  .sg-hero-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
  }
  .sg-hero-left {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-top: 0 !important;
  }
  .sg-hero-title {
    font-size: 44px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.035em !important;
  }
  .sg-hero-grifo-com {
    width: 27px !important;
    height: 27px !important;
  }
  .sg-hero-grifo-underline {
    height: 13px !important;
    bottom: -6px !important;
  }
  .sg-hero-desc {
    font-size: 17px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .sg-hero-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sg-hero-right {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0 !important;
    flex-shrink: 1 !important;
  }
  .sg-hero-ana {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-top: 4px !important;
  }

  /* Section 2: Marquee ticker */
  .sg-marquee-section {
    padding: 22px 0 !important;
  }
  .sg-marquee-item {
    padding: 0 22px !important;
    font-size: 16px !important;
  }

  /* Section 3: Serviços da Seguiu */
  .sg-services-section {
    padding: 36px 18px !important;
    gap: 40px !important;
  }
  .sg-services-section h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-services-grifo-circle {
    height: 52px !important;
    top: -9px !important;
  }
  .sg-services-subtitle {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .sg-services-block, .sg-services-block--reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .sg-services-block-text {
    order: 2 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .sg-services-block-text h3 {
    font-size: 30px !important;
    line-height: 1.05 !important;
  }
  .sg-services-block-text p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }
  .sg-services-block-svg {
    order: 1 !important;
    width: 100% !important;
    max-width: 327px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    flex-shrink: 1 !important;
  }

  /* Sections 4, 5, 6, 7: Vitrine panels */
  .sg-vitrine-panel {
    margin: 0 10px !important;
    padding: 28px 20px !important;
    border-radius: 30px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .sg-vitrine-panel h2 {
    font-size: 32px !important;
    line-height: 1.02 !important;
  }
  .sg-vitrine-content {
    display: contents !important;
  }
  .sg-vitrine-header {
    order: 1 !important;
  }
  .sg-vitrine-panel h2 {
    order: 2 !important;
  }
  .sg-vitrine-svg {
    order: 3 !important;
    width: 100% !important;
    max-width: 322px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    flex-shrink: 1 !important;
  }
  .sg-vitrine-feats {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .sg-vitrine-btn {
    order: 5 !important;
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* Section 8: Dashboard */
  .sg-dashboard-panel {
    margin: 0 10px !important;
    padding: 32px 20px !important;
    border-radius: 30px !important;
    background: #F3EEFD !important;
  }
  .sg-dashboard-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
    width: 100% !important;
  }
  .sg-dashboard-text {
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }
  .sg-dashboard-text h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-dashboard-text p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .sg-dashboard-art {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
  }
  .sg-dashboard-blob-svg {
    display: none !important;
  }
  .sg-dashboard-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important;
    border-radius: 24px !important;
    gap: 16px !important;
    flex-shrink: 1 !important;
    box-sizing: border-box !important;
  }

  /* Section 9: Ferramentas grátis */
  .sg-tools-section {
    padding: 40px 18px !important;
    gap: 36px !important;
  }
  .sg-tools-section h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-ferramentas-grifo {
    height: 16px !important;
    bottom: -6px !important;
  }
  .sg-tools-section p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .sg-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .sg-tool-card {
    padding: 20px 14px !important;
    border-radius: 20px !important;
    gap: 14px !important;
  }

  /* Section 10: Depoimentos vídeos */
  .sg-depoimentos-section {
    padding: 36px 18px !important;
    gap: 36px !important;
  }
  .sg-depoimentos-section h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-depoimentos-grifo {
    height: 15px !important;
    bottom: -10px !important;
  }
  .sg-depoimentos-section p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .sg-depoimentos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .sg-depoimentos-grid button {
    height: 300px !important;
    border-radius: 26px !important;
  }

  /* Section 11: Garantias */
  .sg-garantias-section {
    padding: 36px 10px !important;
    gap: 36px !important;
  }
  .sg-garantias-section h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-garantias-section p {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .sg-garantias-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .sg-garantia-card {
    padding: 26px 20px !important;
    border-radius: 24px !important;
  }

  /* Section 12: FAQ */
  .sg-faq-section {
    padding: 36px 18px !important;
    gap: 32px !important;
  }
  .sg-faq-section h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-faq-section p.sg-faq-sub {
    font-size: 17px !important;
    line-height: 1.55 !important;
  }
  .sg-faq-accordion {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sg-faq-accordion .faq button {
    font-size: 17px !important;
    padding: 20px 0 !important;
  }
  .sg-faq-accordion .faq p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  /* Section 13: Todos os serviços */
  .sg-todos-servicos-section {
    padding: 36px 10px !important;
    gap: 32px !important;
  }
  .sg-todos-servicos-section h2 {
    font-size: 36px !important;
    line-height: 1.03 !important;
  }
  .sg-todos-dark-panel {
    padding: 26px 18px !important;
    border-radius: 30px !important;
    gap: 24px !important;
  }
  .sg-todos-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .svcbtn {
    height: 64px !important;
    font-size: 17px !important;
    padding: 0 18px 0 20px !important;
  }

  /* Section 14: CTA final */
  .sg-cta-section {
    margin: 10px 0 0 !important;
    padding: 48px 22px !important;
    gap: 22px !important;
  }
  .sg-cta-title {
    font-size: 50px !important;
    line-height: .95 !important;
    gap: 10px !important;
  }
  .sg-cta-smile {
    width: 47px !important;
    height: 52px !important;
  }
  .sg-cta-lit {
    font-size: 22px !important;
    line-height: 1.28 !important;
    max-width: 100% !important;
  }
  .sg-cta-btns {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 320px !important;
    gap: 12px !important;
  }
  .sg-cta-btns .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Footer */
  .sg-footer {
    padding: 40px 20px 32px !important;
    gap: 36px !important;
  }
  .sg-footer-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }
  .sg-footer-brand {
    max-width: 100% !important;
    width: 100% !important;
  }
  .sg-footer-cols {
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
  }
  .sg-footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* Modal */
  .sg-modal-box {
    max-width: 300px !important;
  }

  /* General SVGs */
  svg[role="img"] {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .sg-avatar-ring {
    animation: none !important;
  }
}