.elementor-5581 .elementor-element.elementor-element-9d888a9{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5581 .elementor-element.elementor-element-241ba85{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS for container, class: .elementor-element-9d888a9 */<meta charset="utf-8" />
<!-- ====================================================================
     Tutorial Ramoa Digital — "Registre seu domínio"
     Cole este bloco inteiro dentro de um widget/bloco HTML do WordPress.
     Sem empacotamento: CSS e JS inline, imagens servidas do seu domínio.
     Estilos isolados sob #rd-tutorial para não afetar o tema do site.
     ==================================================================== -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<style>


:root {
  
  --bg-deep: #0A0925;
  --bg-midnight: #16063F;
  --bg-night: #1C1437;
  --bg-twilight: #231B3E;

  
  --neon-magenta: #FF2FDA;
  --neon-violet: #A855F7;
  --neon-cyan: #2DD4FF;
  --neon-violet-deep: #6D2595;

  
  --white: #FFFFFF;
  --gray-100: #E8E8F0;
  --gray-300: #A8A8B8;
  --gray-500: #6B6B7F;

  
  --color-success: #22D88F;
  --color-warning: #FFB02E;
  --color-error: #FF4757;
  --color-info: #2DD4FF;

  
  --gradient-signature: linear-gradient(90deg, #FF2FDA 0%, #A855F7 60%, #2DD4FF 100%);
  --gradient-cta: linear-gradient(90deg, #FF2FDA 0%, #A855F7 100%);
  --gradient-bg-dark: linear-gradient(180deg, #0A0925 0%, #16063F 55%, #1C1437 100%);

  
  --glow-magenta: 0 0 24px rgba(255, 47, 218, 0.4);
  --glow-violet: 0 0 24px rgba(168, 85, 247, 0.4);
  --glow-soft: 0 0 40px rgba(168, 85, 247, 0.25);
  --glow-intense: 0 0 32px rgba(255, 47, 218, 0.6), 0 0 64px rgba(168, 85, 247, 0.3);

  
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  --font: 'Nunito Sans', system-ui, -apple-system, sans-serif;

  --wrap: 1080px;
  --readable: 760px;
}

#rd-tutorial, #rd-tutorial *{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

#rd-tutorial{
  margin: 0;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(1100px 760px at 8% -4%, rgba(255, 47, 218, 0.20), transparent 62%),
    radial-gradient(1050px 760px at 92% 10%, rgba(45, 212, 255, 0.12), transparent 58%),
    radial-gradient(1200px 900px at 50% 45%, rgba(109, 37, 149, 0.32), transparent 66%),
    linear-gradient(180deg, #100331 0%, #16063F 42%, #1C1437 100%);
  color: var(--gray-100);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}


#rd-tutorial .backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 760px at 18% 12%, rgba(255, 47, 218, 0.14), transparent 62%),
    radial-gradient(980px 760px at 88% 16%, rgba(45, 212, 255, 0.09), transparent 60%),
    linear-gradient(rgba(168, 85, 247, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.06) 1px, transparent 1px);
  background-size: auto, auto, 52px 52px, 52px 52px;
}
#rd-tutorial .backdrop::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(760px 520px at 12% 8%, rgba(255, 47, 218, 0.14), transparent 64%),
    radial-gradient(720px 500px at 86% 18%, rgba(45, 212, 255, 0.10), transparent 62%),
    radial-gradient(900px 720px at 48% 54%, rgba(168, 85, 247, 0.18), transparent 70%);
}

#rd-tutorial h1, #rd-tutorial h2, #rd-tutorial h3, #rd-tutorial h4{ color: var(--white); margin: 0; letter-spacing: -0.015em; line-height: 1.18; }
#rd-tutorial p{ margin: 0; }
#rd-tutorial a{ color: var(--neon-violet); text-decoration: none; transition: color .15s ease; }
#rd-tutorial a:hover{ color: var(--neon-magenta); }
#rd-tutorial strong{ color: var(--white); font-weight: 700; }
#rd-tutorial code, #rd-tutorial .mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; }

#rd-tutorial .gradient-text{
  background: var(--gradient-signature);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


#rd-tutorial .wrap{ width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
#rd-tutorial .readable{ max-width: var(--readable); }


#rd-tutorial .step-float{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 11px 18px 12px;
  border-radius: var(--radius-2xl);
  background: rgba(10, 9, 37, 0.82);
  border: 1px solid rgba(168, 85, 247, 0.3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lg), var(--glow-soft);
  pointer-events: none;
}
#rd-tutorial .step-float .sf-row{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-300);
  white-space: nowrap;
}
#rd-tutorial .step-float .sf-row .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 10px var(--neon-magenta);
  flex: none;
}
#rd-tutorial .step-float .sf-text b{ color: var(--white); font-weight: 800; }
#rd-tutorial .step-float .sf-track{
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.16);
  overflow: hidden;
}
#rd-tutorial .step-float .sf-fill{
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--gradient-signature);
  transition: width .12s linear;
}
@media (max-width: 560px) {
  #rd-tutorial .step-float{ left: auto; right: 16px; transform: none; bottom: 16px; padding: 9px 14px 10px; }
  #rd-tutorial .step-float .sf-row{ font-size: 12px; }
}


#rd-tutorial .badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-radius: var(--radius-full);
  background: rgba(168, 85, 247, 0.12);
  color: var(--neon-violet);
  border: 1px solid rgba(168, 85, 247, 0.3);
  white-space: nowrap;
}
#rd-tutorial .badge .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 10px var(--neon-magenta);
}

#rd-tutorial .chips{ display: flex; flex-wrap: wrap; gap: 12px; }
#rd-tutorial .chip{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gray-100);
  border-radius: var(--radius-full);
  background: rgba(22, 6, 63, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.22);
  backdrop-filter: blur(8px);
}
#rd-tutorial .chip svg{ color: var(--neon-violet); flex: none; }


#rd-tutorial .btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: filter .18s ease, box-shadow .18s ease, transform .12s ease, background .18s ease, border-color .18s ease, color .18s ease;
  text-decoration: none;
  white-space: nowrap;
}
#rd-tutorial .btn-primary{ background: var(--gradient-cta); color: var(--white); box-shadow: var(--glow-magenta); }
#rd-tutorial .btn-primary:hover{ filter: brightness(1.08); box-shadow: var(--glow-intense); color: var(--white); }
#rd-tutorial .btn-primary:active{ transform: translateY(1px); filter: brightness(.95); }
#rd-tutorial .btn-ghost{
  background: rgba(168, 85, 247, 0.08);
  color: var(--white);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
}
#rd-tutorial .btn-ghost:hover{ background: rgba(255, 47, 218, 0.1); border-color: var(--neon-magenta); color: var(--white); }


#rd-tutorial section{ position: relative; }
#rd-tutorial .hero{ padding: 96px 0 64px; }
#rd-tutorial .hero h1{ font-size: clamp(40px, 6vw, 68px); font-weight: 900; line-height: 1.04; letter-spacing: -0.025em; }
#rd-tutorial .hero .lead{ font-size: clamp(17px, 2.2vw, 20px); color: var(--gray-100); max-width: 640px; margin-top: 22px; }
#rd-tutorial .hero .badge{ margin-bottom: 26px; }
#rd-tutorial .hero .chips{ margin-top: 34px; }

#rd-tutorial .hero-paw{
  position: absolute;
  right: -60px; top: 10px;
  width: 460px; max-width: 48vw;
  opacity: 0.10;
  pointer-events: none;
  filter: drop-shadow(0 0 60px rgba(168, 85, 247, 0.4));
}
@media (max-width: 760px) { #rd-tutorial .hero-paw{ opacity: 0.06; right: -90px; top: -10px; } }

#rd-tutorial .section-block{ padding: 40px 0; }


#rd-tutorial .infocard{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 30px;
  border-radius: var(--radius-2xl);
  background: rgba(22, 6, 63, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}
#rd-tutorial .infocard .ico{
  flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: var(--neon-cyan);
}
#rd-tutorial .infocard h3{ font-size: 19px; margin-bottom: 6px; }
#rd-tutorial .infocard p{ color: var(--gray-100); }
#rd-tutorial .tag-domain{
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--white);
  background: rgba(45, 212, 255, 0.1);
  border: 1px solid rgba(45, 212, 255, 0.3);
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.92em;
}


#rd-tutorial .overview-head{ text-align: center; max-width: 640px; margin: 0 auto 36px; }
#rd-tutorial .overview-head h2{ font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; }
#rd-tutorial .overview-head p{ color: var(--gray-300); margin-top: 12px; }

#rd-tutorial .overview-grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 18px;
}
@media (max-width: 720px) { #rd-tutorial .overview-grid{ grid-template-columns: 1fr; } }

#rd-tutorial .ov-card{
  padding: 30px 28px;
  border-radius: var(--radius-2xl);
  background: rgba(22, 6, 63, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.2);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#rd-tutorial .ov-card:hover{ transform: translateY(-3px); border-color: rgba(255, 47, 218, 0.4); box-shadow: var(--shadow-md), var(--glow-soft); }
#rd-tutorial .ov-num{
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neon-violet);
}
#rd-tutorial .ov-card h3{ font-size: 22px; font-weight: 800; margin: 14px 0 10px; display: flex; align-items: center; gap: 12px; }
#rd-tutorial .ov-card h3 .ico{ color: var(--neon-magenta); display: inline-grid; place-items: center; }
#rd-tutorial .ov-card p{ color: var(--gray-300); font-size: 15.5px; }
#rd-tutorial .ov-arrow{ display: grid; place-items: center; color: var(--neon-violet); opacity: .7; }
@media (max-width: 720px) { #rd-tutorial .ov-arrow{ transform: rotate(90deg); padding: 4px 0; } }


#rd-tutorial .etapa-header{ padding: 64px 0 18px; }
#rd-tutorial .etapa-overline{
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--neon-magenta);
}
#rd-tutorial .etapa-overline .n{
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--gradient-cta); color: var(--white);
  font-size: 14px; box-shadow: var(--glow-magenta);
}
#rd-tutorial .etapa-header h2{ font-size: clamp(30px, 4.4vw, 46px); font-weight: 900; margin-top: 16px; letter-spacing: -0.025em; }
#rd-tutorial .etapa-header p{ color: var(--gray-300); margin-top: 10px; max-width: 620px; }
#rd-tutorial .divider-gradient{ height: 1.5px; border: 0; border-radius: 999px; background: var(--gradient-signature); opacity: .8; margin: 8px 0 0; }


#rd-tutorial .timeline{ position: relative; padding-left: 0; }
#rd-tutorial .step{ position: relative; padding: 32px 0 32px 64px; }
#rd-tutorial .step::before{
  content: "";
  position: absolute;
  left: 21px; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, rgba(168,85,247,0.5), rgba(168,85,247,0.12));
}
#rd-tutorial .step:last-child::before{ background: linear-gradient(180deg, rgba(168,85,247,0.5), transparent); }
#rd-tutorial .step-num{
  position: absolute;
  left: 0; top: 30px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--neon-violet);
  color: var(--white);
  font-weight: 800;
  font-size: 18px;
  z-index: 2;
  box-shadow: var(--glow-soft);
}
#rd-tutorial .step.active .step-num{ background: var(--gradient-cta); border-color: transparent; box-shadow: var(--glow-magenta); }
@media (max-width: 600px) {
  #rd-tutorial .step{ padding-left: 50px; }
  #rd-tutorial .step::before{ left: 16px; }
  #rd-tutorial .step-num{ width: 36px; height: 36px; font-size: 15px; }
}

#rd-tutorial .step-kicker{ font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--neon-violet); }
#rd-tutorial .step h3{ font-size: clamp(21px, 2.6vw, 27px); font-weight: 800; margin: 6px 0 14px; }
#rd-tutorial .step p{ color: var(--gray-100); margin-bottom: 14px; max-width: var(--readable); }
#rd-tutorial .step .muted{ color: var(--gray-300); }


#rd-tutorial .substeps{ list-style: none; margin: 0 0 18px; padding: 0; counter-reset: ss; max-width: var(--readable); }
#rd-tutorial .substeps li{
  position: relative;
  padding: 10px 0 10px 44px;
  border-bottom: 1px solid rgba(168, 85, 247, 0.1);
  color: var(--gray-100);
}
#rd-tutorial .substeps li:last-child{ border-bottom: 0; }
#rd-tutorial .substeps li::before{
  counter-increment: ss;
  content: counter(ss);
  position: absolute; left: 0; top: 9px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  color: var(--neon-cyan);
  background: rgba(45, 212, 255, 0.1);
  border: 1px solid rgba(45, 212, 255, 0.3);
}


#rd-tutorial .donot{ list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; max-width: var(--readable); }
#rd-tutorial .donot li{ display: flex; align-items: flex-start; gap: 12px; color: var(--gray-100); }
#rd-tutorial .donot li svg{ flex: none; margin-top: 3px; color: var(--color-error); }


#rd-tutorial .callout{
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-radius: var(--radius-xl);
  margin: 0 0 18px;
  max-width: var(--readable);
  font-size: 15.5px;
  line-height: 1.6;
}
#rd-tutorial .callout .c-ico{ flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); }
#rd-tutorial .callout .c-body{ color: var(--gray-100); }
#rd-tutorial .callout .c-body strong{ display: inline; }
#rd-tutorial .callout.warn{ background: rgba(255, 176, 46, 0.08); border: 1px solid rgba(255, 176, 46, 0.32); }
#rd-tutorial .callout.warn .c-ico{ background: rgba(255, 176, 46, 0.15); color: var(--color-warning); }
#rd-tutorial .callout.warn .c-body strong{ color: var(--color-warning); }
#rd-tutorial .callout.danger{ background: rgba(255, 71, 87, 0.09); border: 1px solid rgba(255, 71, 87, 0.4); box-shadow: 0 0 24px rgba(255,71,87,0.12); }
#rd-tutorial .callout.danger .c-ico{ background: rgba(255, 71, 87, 0.16); color: var(--color-error); }
#rd-tutorial .callout.danger .c-body strong{ color: #FF7A86; }
#rd-tutorial .callout.tip{ background: rgba(45, 212, 255, 0.07); border: 1px solid rgba(45, 212, 255, 0.3); }
#rd-tutorial .callout.tip .c-ico{ background: rgba(45, 212, 255, 0.13); color: var(--neon-cyan); }
#rd-tutorial .callout.tip .c-body strong{ color: var(--neon-cyan); }
#rd-tutorial .callout.secure{
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: var(--glow-soft);
  max-width: none;
  padding: 26px 28px;
}
#rd-tutorial .callout.secure .c-ico{ background: rgba(168, 85, 247, 0.18); color: var(--neon-violet); width: 46px; height: 46px; }
#rd-tutorial .callout.secure .c-body strong{ color: var(--white); }
#rd-tutorial .callout.secure .c-body{ font-size: 16px; }


#rd-tutorial .shot{ margin: 22px 0 6px; }
#rd-tutorial .shot figure{ margin: 0; }
#rd-tutorial .shot .frame{
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: var(--shadow-lg), 0 0 50px rgba(168, 85, 247, 0.12);
  cursor: zoom-in;
  position: relative;
  background: var(--bg-midnight);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#rd-tutorial .shot .frame:hover{ border-color: rgba(255, 47, 218, 0.45); box-shadow: var(--shadow-lg), var(--glow-soft); }
#rd-tutorial .shot .frame img{ display: block; width: 100%; height: auto; }
#rd-tutorial .shot .frame .zoom-hint{
  position: absolute; right: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: rgba(10, 9, 37, 0.82); color: var(--gray-100);
  border: 1px solid rgba(168, 85, 247, 0.3);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
#rd-tutorial .shot .frame:hover .zoom-hint{ opacity: 1; }
#rd-tutorial .shot figcaption{
  margin-top: 12px;
  font-size: 14px;
  color: var(--gray-300);
  display: flex; align-items: center; gap: 8px;
}
#rd-tutorial .shot figcaption svg{ color: var(--neon-violet); flex: none; }
#rd-tutorial .shot figcaption .cap-text{ flex: 1; }
#rd-tutorial .shot figcaption .legend{
  color: var(--neon-cyan);
  font-weight: 700;
}


#rd-tutorial .tool{
  margin: 22px 0;
  padding: 22px 24px;
  border-radius: var(--radius-xl);
  background: rgba(22, 6, 63, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.25);
  max-width: var(--readable);
}
#rd-tutorial .tool .tool-label{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--neon-violet); margin-bottom: 14px;
}
#rd-tutorial .tool .tool-label svg{ color: var(--neon-cyan); }
#rd-tutorial .val-input-row{ position: relative; }
#rd-tutorial .val-input{
  width: 100%;
  height: 52px;
  padding: 0 16px;
  font-size: 17px;
  font-family: 'JetBrains Mono', monospace;
  background: rgba(10, 9, 37, 0.6);
  border: 1.5px solid rgba(168, 85, 247, 0.35);
  border-radius: var(--radius-md);
  color: var(--white);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#rd-tutorial .val-input::placeholder{ color: var(--gray-500); }
#rd-tutorial .val-input:focus{ border-color: var(--neon-violet); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25); }
#rd-tutorial .val-input.ok{ border-color: var(--color-success); box-shadow: 0 0 0 3px rgba(34, 216, 143, 0.2); }
#rd-tutorial .val-input.bad{ border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.18); }
#rd-tutorial .val-feedback{ margin-top: 14px; display: grid; gap: 8px; }
#rd-tutorial .val-msg{ display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
#rd-tutorial .val-msg svg{ flex: none; }
#rd-tutorial .val-msg.ok{ color: var(--color-success); }
#rd-tutorial .val-msg.bad{ color: #FF7A86; }
#rd-tutorial .val-msg.idle{ color: var(--gray-300); }


#rd-tutorial .accordions{ display: grid; gap: 12px; margin: 4px 0 18px; max-width: var(--readable); }
#rd-tutorial .acc{
  border-radius: var(--radius-lg);
  background: rgba(22, 6, 63, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.22);
  overflow: hidden;
}
#rd-tutorial .acc-btn{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: 16.5px; font-weight: 700;
  color: var(--white); text-align: left;
  transition: background .15s ease;
}
#rd-tutorial .acc-btn:hover{ background: rgba(168, 85, 247, 0.06); }
#rd-tutorial .acc-btn .chev{ flex: none; color: var(--neon-violet); transition: transform .25s ease; }
#rd-tutorial .acc.open .acc-btn .chev{ transform: rotate(180deg); }
#rd-tutorial .acc-panel{ max-height: 0; overflow: hidden; transition: max-height .3s ease; }
#rd-tutorial .acc-panel .acc-inner{ padding: 0 20px 20px; color: var(--gray-100); font-size: 15.5px; }


#rd-tutorial .compare-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
@media (max-width: 640px) { #rd-tutorial .compare-grid{ grid-template-columns: 1fr; } }
#rd-tutorial .cmp{
  padding: 24px;
  border-radius: var(--radius-xl);
  background: rgba(22, 6, 63, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.22);
  position: relative;
}
#rd-tutorial .cmp.intl{ border-color: rgba(45, 212, 255, 0.3); }
#rd-tutorial .cmp.br{ border-color: rgba(255, 47, 218, 0.3); }
#rd-tutorial .cmp .ext{ font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; }
#rd-tutorial .cmp.intl .ext{ color: var(--neon-cyan); }
#rd-tutorial .cmp.br .ext{ color: var(--neon-magenta); }
#rd-tutorial .cmp .sub{ font-size: 13px; color: var(--gray-300); margin: 6px 0 16px; font-weight: 600; }
#rd-tutorial .cmp ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#rd-tutorial .cmp li{ display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--gray-100); }
#rd-tutorial .cmp li svg{ flex: none; margin-top: 2px; }
#rd-tutorial .cmp li > span{ flex: 1; min-width: 0; }
#rd-tutorial .cmp li.good svg{ color: var(--color-success); }
#rd-tutorial .cmp li.warn svg{ color: var(--color-warning); }


#rd-tutorial .fields{ display: grid; gap: 14px; margin: 6px 0 18px; max-width: var(--readable); }
#rd-tutorial .field{
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(22, 6, 63, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.2);
}
#rd-tutorial .field .fn{
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; font-size: 13px; font-weight: 800;
  background: rgba(168, 85, 247, 0.14); color: var(--neon-violet); border: 1px solid rgba(168,85,247,0.3);
}
#rd-tutorial .field .ftext{ flex: 1; min-width: 0; }
#rd-tutorial .field .flabel{ font-size: 13px; color: var(--gray-300); font-weight: 600; }
#rd-tutorial .field .fval{ font-weight: 700; color: var(--white); word-break: break-word; }
#rd-tutorial .field .fval .mono{ color: var(--neon-cyan); }
#rd-tutorial .copy-btn{
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 700; cursor: pointer;
  background: rgba(168, 85, 247, 0.12); color: var(--white);
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  font-family: var(--font);
  white-space: nowrap;
  transition: all .15s ease;
}
#rd-tutorial .copy-btn:hover{ background: rgba(255, 47, 218, 0.12); border-color: var(--neon-magenta); }
#rd-tutorial .copy-btn.done{ background: rgba(34, 216, 143, 0.14); border-color: var(--color-success); color: var(--color-success); }
#rd-tutorial .role-pill{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; color: var(--white);
  background: rgba(34, 216, 143, 0.14); border: 1px solid rgba(34,216,143,0.4);
  padding: 4px 14px; border-radius: var(--radius-full); font-size: 15px; white-space: nowrap;
}
#rd-tutorial .role-pill svg{ color: var(--color-success); }


#rd-tutorial .checklist-wrap{
  padding: 34px 32px;
  border-radius: var(--radius-2xl);
  background: rgba(22, 6, 63, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}
#rd-tutorial .checklist{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
#rd-tutorial .check{
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: rgba(10, 9, 37, 0.4);
  border: 1px solid rgba(168, 85, 247, 0.16);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  user-select: none;
}
#rd-tutorial .check:hover{ border-color: rgba(168, 85, 247, 0.4); }
#rd-tutorial .check .box{
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 2px solid var(--neon-violet);
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
#rd-tutorial .check .box svg{ opacity: 0; transform: scale(.5); transition: all .15s ease; color: var(--white); }
#rd-tutorial .check.checked{ background: rgba(34, 216, 143, 0.08); border-color: rgba(34, 216, 143, 0.4); }
#rd-tutorial .check.checked .box{ background: var(--color-success); border-color: var(--color-success); }
#rd-tutorial .check.checked .box svg{ opacity: 1; transform: scale(1); }
#rd-tutorial .check .label{ font-size: 15.5px; color: var(--gray-100); flex: 1; }
#rd-tutorial .check.checked .label{ color: var(--white); }
#rd-tutorial .check .opt{ font-size: 12px; font-weight: 700; color: var(--neon-violet); text-transform: uppercase; letter-spacing: .05em; }

#rd-tutorial .celebrate{
  margin-top: 20px;
  padding: 22px 26px;
  border-radius: var(--radius-xl);
  text-align: center;
  background: rgba(34, 216, 143, 0.1);
  border: 1px solid rgba(34, 216, 143, 0.4);
  color: var(--white);
  font-size: 18px; font-weight: 800;
  display: none;
}
#rd-tutorial .celebrate.show{ display: block; animation: revealUp .4s ease both; box-shadow: 0 0 36px rgba(34, 216, 143, 0.25); }


#rd-tutorial .closing{ text-align: center; padding: 80px 0 132px; position: relative; }
#rd-tutorial .closing h2{ font-size: clamp(28px, 4vw, 42px); font-weight: 900; }
#rd-tutorial .closing p{ color: var(--gray-300); margin-top: 14px; }
#rd-tutorial .contact-row{
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 26px;
}
#rd-tutorial .contact-row a{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--radius-full);
  background: rgba(22, 6, 63, 0.55);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: var(--gray-100); font-weight: 600; font-size: 14.5px;
}
#rd-tutorial .contact-row a:hover{ border-color: var(--neon-magenta); color: var(--white); }
#rd-tutorial .contact-row a svg{ color: var(--neon-violet); flex: none; }
#rd-tutorial .tagline{ margin-top: 30px; font-style: italic; color: var(--neon-violet); font-weight: 700; font-size: 17px; }


#rd-tutorial .video-block{
  margin: 24px auto 0;
  max-width: 720px;
  padding: 22px 24px;
  border-radius: var(--radius-xl);
  background: rgba(10, 9, 37, 0.5);
  border: 1px dashed rgba(168, 85, 247, 0.3);
}
#rd-tutorial .video-block .vb-head{ display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--gray-100); margin-bottom: 6px; }
#rd-tutorial .video-block .vb-head svg{ color: var(--neon-violet); }
#rd-tutorial .video-block .vb-note{ font-size: 13px; color: var(--gray-500); margin-bottom: 16px; }
#rd-tutorial .video-links{ display: grid; gap: 10px; }
#rd-tutorial .video-links a{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: rgba(168, 85, 247, 0.05);
  border: 1px solid rgba(168, 85, 247, 0.15);
  color: var(--gray-100); font-size: 14px; font-weight: 600;
}
#rd-tutorial .video-links a:hover{ border-color: rgba(168,85,247,0.4); color: var(--white); }
#rd-tutorial .video-links a .yt{ flex: none; color: var(--neon-magenta); }
#rd-tutorial .video-links a .ext-ico{ margin-left: auto; color: var(--gray-500); flex: none; }
#rd-tutorial .video-links a .vtitle{ text-align: left; }
#rd-tutorial .video-links a span.lbl{ flex: none; color: var(--gray-300); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }

#rd-tutorial footer.foot{
  text-align: center;
  padding: 40px 0 56px;
  color: var(--gray-500);
  font-size: 13px;
  border-top: 1px solid rgba(168, 85, 247, 0.1);
  margin-top: 40px;
}
#rd-tutorial footer.foot img{ height: 22px; opacity: .8; margin-bottom: 14px; }


#rd-tutorial .lightbox{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 9, 37, 0.92);
  backdrop-filter: blur(16px);
  display: none;
  align-items: center; justify-content: center;
  padding: 28px;
  cursor: zoom-out;
}
#rd-tutorial .lightbox.show{ display: flex; }
#rd-tutorial .lightbox img{ max-width: 96vw; max-height: 92vh; border-radius: var(--radius-lg); border: 1px solid rgba(168, 85, 247, 0.4); box-shadow: var(--shadow-lg); }
#rd-tutorial .lightbox .lb-close{
  position: absolute; top: 22px; right: 22px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(22, 6, 63, 0.8); border: 1px solid rgba(168, 85, 247, 0.4);
  color: var(--white); cursor: pointer;
}
#rd-tutorial .lightbox .lb-close:hover{ border-color: var(--neon-magenta); }


#rd-tutorial .reveal{ opacity: 1; transform: none; }
#rd-tutorial .reveal.in{ animation: revealUp .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes revealUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #rd-tutorial .reveal.in{ animation: none; }
  html{ scroll-behavior: auto; }
}

#rd-tutorial main,
#rd-tutorial .wrap,
#rd-tutorial section,
#rd-tutorial .lightbox{
  position: relative;
  z-index: 2;
}

#rd-tutorial { position: relative; overflow-x: clip; isolation: isolate; }


/* WordPress / Elementor final overrides
   These rules stay inside the HTML because the background must belong to #rd-tutorial, not only to the Elementor parent container. */
#rd-tutorial .hero{
  padding-top: 128px;
}

#rd-tutorial .infocard,
#rd-tutorial .ov-card,
#rd-tutorial .tool,
#rd-tutorial .acc,
#rd-tutorial .cmp,
#rd-tutorial .field,
#rd-tutorial .checklist-wrap,
#rd-tutorial .video-block{
  background:
    linear-gradient(135deg, rgba(22, 6, 63, 0.82), rgba(28, 20, 55, 0.58)) !important;
  border-color: rgba(168, 85, 247, 0.34) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34), 0 0 42px rgba(168, 85, 247, 0.13) !important;
}

#rd-tutorial .acc-btn,
#rd-tutorial .copy-btn{
  background:
    linear-gradient(90deg, rgba(22, 6, 63, 0.94), rgba(68, 22, 112, 0.62), rgba(255, 47, 218, 0.10)) !important;
  border-color: rgba(168, 85, 247, 0.42) !important;
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.12), 0 0 28px rgba(168, 85, 247, 0.14) !important;
}

#rd-tutorial .field .fn,
#rd-tutorial .infocard .ico,
#rd-tutorial .callout .c-ico{
  background: rgba(168, 85, 247, 0.18) !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.16) !important;
}

#rd-tutorial .chip,
#rd-tutorial .contact-row a{
  background-color: rgba(22, 6, 63, 0.58) !important;
  border-color: rgba(168, 85, 247, 0.28) !important;
}

/* Keep the progress pill fixed even when Elementor wraps the HTML widget in transformed containers. */
#rd-tutorial .step-float,
body > .rd-floating-step{
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 24px !important;
  transform: translateX(-50%) !important;
  z-index: 999999 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 11px 18px 12px !important;
  border-radius: var(--radius-2xl) !important;
  background: rgba(10, 9, 37, 0.86) !important;
  border: 1px solid rgba(168, 85, 247, 0.34) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: var(--shadow-lg), var(--glow-soft) !important;
  pointer-events: none !important;
}

body > .rd-floating-step .sf-row{
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-300);
  white-space: nowrap;
}

body > .rd-floating-step .sf-row .dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon-magenta);
  box-shadow: 0 0 10px var(--neon-magenta);
  flex: none;
}

body > .rd-floating-step .sf-text b{ color: var(--white); font-weight: 800; }
body > .rd-floating-step .sf-track{ height: 3px; width: 100%; border-radius: 999px; background: rgba(168, 85, 247, 0.16); overflow: hidden; }
body > .rd-floating-step .sf-fill{ height: 100%; width: 0; border-radius: 999px; background: var(--gradient-signature); transition: width .12s linear; }

@media (max-width: 560px) {
  #rd-tutorial .step-float,
  body > .rd-floating-step{
    left: auto !important;
    right: 16px !important;
    transform: none !important;
    bottom: 16px !important;
    padding: 9px 14px 10px !important;
  }
  body > .rd-floating-step .sf-row{ font-size: 12px; }
}

</style>

<div id="rd-tutorial">
<div class="backdrop"></div>

<!-- Floating step indicator (only fixed element; sits clear of the host
     site's fixed header & footer). Updates its label on scroll. -->
<div class="step-float" id="stepFloat" aria-hidden="true">
  <div class="sf-row">
    <span class="dot"></span>
    <span class="sf-text" id="stepText">Guia em <b>2 etapas</b></span>
  </div>
  <div class="sf-track"><div class="sf-fill" id="progress"></div></div>
</div>

<main>

<!-- ══════════════════ HERO ══════════════════ -->
<section class="hero" data-screen-label="Hero">
  <img class="hero-paw" src="https://ramoadigital.com/wp-content/uploads/2026/06/symbol-paw.png" alt="" aria-hidden="true" />
  <div class="wrap">
    <span class="badge reveal"><span class="dot"></span> Primeiro passo do seu projeto</span>
    <h1 class="reveal">Parabéns! Você acaba de dar o <span class="gradient-text">primeiro passo</span>.</h1>
    <p class="lead reveal">Se você chegou até aqui, é porque vamos construir algo juntos. Este guia mostra, com calma, como registrar o seu domínio na Hostinger e liberar o acesso para a Ramoa cuidar de toda a parte técnica. São só duas etapas e leva poucos minutos.</p>
    <div class="chips reveal">
      <span class="chip"><i data-lucide="clock"></i> ~5 minutos</span>
      <span class="chip"><i data-lucide="shield-check"></i> Sua conta sempre protegida</span>
      <span class="chip"><i data-lucide="sparkles"></i> A gente faz o resto 🐾</span>
    </div>
  </div>
</section>

<!-- ══════════════════ O QUE É UM DOMÍNIO ══════════════════ -->
<section class="section-block">
  <div class="wrap">
    <div class="infocard reveal">
      <div class="ico"><i data-lucide="globe"></i></div>
      <div>
        <h3>O que é um domínio?</h3>
        <p>O domínio é o endereço do seu site — por exemplo, <span class="tag-domain">suamarca.com</span>. É o que as pessoas digitam para te encontrar na internet. Registrar o domínio é garantir esse endereço no seu nome.</p>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════════ VISÃO GERAL ══════════════════ -->
<section class="section-block">
  <div class="wrap">
    <div class="overview-head reveal">
      <h2>Como funciona: <span class="gradient-text">duas etapas</span></h2>
      <p>São só duas etapas. A primeira você faz em poucos minutos. Na segunda, você libera um acesso limitado e seguro — e o resto é com a gente.</p>
    </div>
    <div class="overview-grid">
      <a href="#etapa1" class="ov-card reveal" style="color:inherit;">
        <div class="ov-num">Etapa 1</div>
        <h3><span class="ico"><i data-lucide="shopping-cart"></i></span> Comprar o domínio</h3>
        <p>Você faz a compra na Hostinger, em poucos minutos.</p>
      </a>
      <div class="ov-arrow reveal"><i data-lucide="arrow-right" style="width:30px;height:30px;"></i></div>
      <a href="#etapa2" class="ov-card reveal" style="color:inherit;">
        <div class="ov-num">Etapa 2</div>
        <h3><span class="ico"><i data-lucide="key-round"></i></span> Compartilhar o acesso</h3>
        <p>Você libera um acesso limitado e seguro — e a partir daí é com a gente.</p>
      </a>
    </div>
  </div>
</section>

<!-- ══════════════════ ETAPA 1 ══════════════════ -->
<section id="etapa1" class="etapa-header" data-step="1" data-screen-label="Etapa 1">
  <div class="wrap">
    <span class="etapa-overline reveal"><span class="n">1</span> Etapa 1</span>
    <h2 class="reveal">Comprar o <span class="gradient-text">domínio</span></h2>
    <p class="reveal">Vamos garantir o endereço do seu site na Hostinger. Siga os passos abaixo na ordem.</p>
    <hr class="divider-gradient reveal" />
  </div>
</section>

<div class="wrap">
  <div class="timeline">

    <!-- Passo 1 -->
    <div class="step reveal" data-step="1">
      <div class="step-num">1</div>
      <div class="step-kicker">Etapa 1 · Passo 1</div>
      <h3>Pesquise o seu domínio</h3>
      <p>Acesse a Hostinger pelo botão abaixo. Em seguida, é só fazer a busca em 3 passos.</p>
      <p><a class="btn btn-primary" href="https://www.hostinger.com/br/registro-de-dominio" target="_blank" rel="noopener">Abrir a Hostinger <i data-lucide="external-link" style="width:17px;height:17px;"></i></a></p>
      <ol class="substeps">
        <li>No campo de busca, apague o exemplo (<span class="tag-domain">meu-projeto-na-ramoa.com</span>) e digite o domínio que você quer.</li>
        <li>Clique na seta de pesquisar (→).</li>
        <li>Se estiver disponível, clique em <strong>Registrar</strong> para avançar.</li>
      </ol>

      <div class="callout warn">
        <div class="c-ico"><i data-lucide="alert-triangle"></i></div>
        <div class="c-body"><strong>Confira a escrita 2 ou 3 vezes.</strong> Esse vai ser o endereço que todo mundo vai digitar para te achar. Depois que o registro é concluído, não existe "corrigir": qualquer erro de digitação ou de escolha só se resolve registrando outro domínio. Vale caprichar aqui.</div>
      </div>

      <div class="callout tip">
        <div class="c-ico"><i data-lucide="lightbulb"></i></div>
        <div class="c-body"><strong>Ainda não se preocupe com outras extensões</strong> (.net, .org, .online…). Se quiser uma extensão extra — como <span class="tag-domain">.com.br</span> — a gente faz isso já já, no carrinho.</div>
      </div>

      <!-- Validador -->
      <div class="tool" id="validator">
        <div class="tool-label"><i data-lucide="spell-check-2"></i> Confira a escrita do seu domínio</div>
        <div class="val-input-row">
          <input class="val-input" id="valInput" type="text" placeholder="ex.: suamarca.com" autocomplete="off" spellcheck="false" />
        </div>
        <div class="val-feedback" id="valFeedback">
          <div class="val-msg idle"><i data-lucide="info" style="width:18px;height:18px;"></i> Digite acima para conferir o formato do endereço.</div>
        </div>
        <p class="muted" style="font-size:13px;margin-top:12px;margin-bottom:0;">Esta verificação confere apenas a <strong>escrita</strong> (espaços, maiúsculas, caracteres e extensão). A disponibilidade real você confirma na própria Hostinger.</p>
      </div>

      <div class="shot">
        <figure>
          <div class="frame" data-zoom="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-1.webp">
            <img src="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-1.webp" alt="Tela de busca de domínio da Hostinger com os 3 passos numerados" />
            <span class="zoom-hint"><i data-lucide="maximize-2" style="width:13px;height:13px;"></i> Ampliar</span>
          </div>
          <figcaption><i data-lucide="image" style="width:16px;height:16px;"></i> <span class="cap-text">Tela "Encontre o seu domínio" — busque (1 e 2) e clique em Registrar (3).</span></figcaption>
        </figure>
      </div>
    </div>

    <!-- Passo 2 -->
    <div class="step reveal" data-step="1">
      <div class="step-num">2</div>
      <div class="step-kicker">Etapa 1 · Passo 2</div>
      <h3>Ajuste o carrinho: o que <span style="color:var(--color-error)">não</span> adicionar</h3>
      <p>Dois cuidados importantes antes de finalizar — e o porquê de cada um.</p>
      <ul class="donot">
        <li><i data-lucide="calendar-check" style="color:var(--neon-violet)"></i><span><strong>Escolha o período:</strong> dá para registrar por <strong>1 ano</strong> (renovação anual) ou por <strong>até 3 anos</strong> de uma vez (mais barato). Fica a seu critério.</span></li>
        <li><i data-lucide="x-circle"></i><span><strong>Não adicione o plano de hospedagem.</strong></span></li>
        <li><i data-lucide="x-circle"></i><span><strong>Não adicione o produto de e-mail.</strong></span></li>
      </ul>

      <div class="accordions">
        <div class="acc">
          <button class="acc-btn"><span>Por que não adicionar hospedagem?</span> <i class="chev" data-lucide="chevron-down"></i></button>
          <div class="acc-panel"><div class="acc-inner">Aqui estamos comprando só o domínio. Toda a hospedagem do seu projeto — onde o conteúdo do site fica guardado — roda dentro da estrutura gerenciada pela Ramoa, com suporte e manutenção contínuos. Se você contratar hospedagem por conta própria, essa infraestrutura passa a ser <strong>sua responsabilidade</strong> e não entra no nosso suporte.</div></div>
        </div>
        <div class="acc">
          <button class="acc-btn"><span>Por que não adicionar e-mail?</span> <i class="chev" data-lucide="chevron-down"></i></button>
          <div class="acc-panel"><div class="acc-inner">Como seu projeto fica hospedado na Ramoa, a gente já disponibiliza uma conta de e-mail profissional com o seu domínio (ex.: <span class="tag-domain"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f794989983968398b78482969a96859496d994989a">[email&#160;protected]</a></span>), do tipo <strong>Free Business Email</strong>. Você não precisa pagar pelo e-mail da Hostinger.</div></div>
        </div>
      </div>

      <div class="shot">
        <figure>
          <div class="frame" data-zoom="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-2.webp">
            <img src="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-2.webp" alt="Carrinho da Hostinger com hospedagem e e-mail marcados para não adicionar" />
            <span class="zoom-hint"><i data-lucide="maximize-2" style="width:13px;height:13px;"></i> Ampliar</span>
          </div>
          <figcaption><i data-lucide="image" style="width:16px;height:16px;"></i> <span class="cap-text">No carrinho, <strong>não</strong> clique em "Adicionar hospedagem" nem "Adicionar e-mail".</span></figcaption>
        </figure>
      </div>
    </div>

    <!-- Passo 3 -->
    <div class="step reveal" data-step="1">
      <div class="step-num">3</div>
      <div class="step-kicker">Etapa 1 · Passo 3</div>
      <h3>Proteja sua marca: extensões <span class="muted" style="font-weight:600;font-size:.7em;">(opcional)</span></h3>
      <p>Agora sim: se quiser registrar <strong>também</strong> o <span class="tag-domain">.com.br</span> (ou o <span class="tag-domain">.com</span>, caso sua escolha principal tenha sido <span class="tag-domain">.com.br</span>), este é o momento — é só adicionar ao carrinho.</p>
      <p class="muted"><strong style="color:var(--gray-100)">Por que ter mais de uma extensão?</strong> Ter as versões mais usadas da sua marca registradas evita que concorrentes — ou golpistas — peguem um endereço parecido com o seu. No funcionamento não muda nada: a Ramoa configura tudo para que, digitando <span class="tag-domain">.com</span> ou <span class="tag-domain">.com.br</span>, o visitante caia sempre no seu site.</p>

      <div class="compare-grid">
        <div class="cmp intl">
          <div class="ext">.com</div>
          <div class="sub">GLOBAL · PROTEÇÃO DE MARCA</div>
          <ul>
            <li class="good"><i data-lucide="check-circle-2" style="width:18px;height:18px;"></i> <span>Ideal para projetos globais e internacionais.</span></li>
            <li class="good"><i data-lucide="check-circle-2" style="width:18px;height:18px;"></i> <span>Ótimo para proteger a marca.</span></li>
            <li class="good"><i data-lucide="lock" style="width:18px;height:18px;"></i> <span>Permite manter os dados do dono <strong>privados</strong> (não ficam expostos publicamente).</span></li>
          </ul>
        </div>
        <div class="cmp br">
          <div class="ext">.com.br</div>
          <div class="sub">FOCO NO BRASIL</div>
          <ul>
            <li class="good"><i data-lucide="map-pin" style="width:18px;height:18px;color:var(--neon-magenta)!important"></i> <span>Foco no público do Brasil.</span></li>
            <li class="warn"><i data-lucide="alert-triangle" style="width:18px;height:18px;"></i> <span>Regido pela regra brasileira, que <strong>exige e exibe publicamente</strong> os dados do proprietário (nome, CPF/CNPJ, contato e endereço).</span></li>
          </ul>
        </div>
      </div>

      <div class="callout tip">
        <div class="c-ico"><i data-lucide="lightbulb"></i></div>
        <div class="c-body"><strong>Pode começar com só um domínio.</strong> Se mais para frente você quiser registrar o outro (<span class="tag-domain">.com</span> ou <span class="tag-domain">.com.br</span>), a Ramoa adiciona e configura na sua infraestrutura <strong>sem custo nenhum</strong>.</div>
      </div>

      <div class="shot">
        <figure>
          <div class="frame" data-zoom="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-3.webp">
            <img src="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-3.webp" alt="Seção Proteja sua marca com extensões opcionais no carrinho da Hostinger" />
            <span class="zoom-hint"><i data-lucide="maximize-2" style="width:13px;height:13px;"></i> Ampliar</span>
          </div>
          <figcaption><i data-lucide="image" style="width:16px;height:16px;"></i> <span class="cap-text">Seção "Proteja sua marca" — adicionar uma extensão extra é <span class="legend">opcional</span>.</span></figcaption>
        </figure>
      </div>
    </div>

    <!-- Passo 4 -->
    <div class="step reveal" data-step="1">
      <div class="step-num">4</div>
      <div class="step-kicker">Etapa 1 · Passo 4</div>
      <h3>Crie sua conta e finalize o pagamento</h3>
      <p>Depois de selecionar os produtos, <strong>crie sua conta</strong> na Hostinger para concluir a compra e escolher a forma de pagamento.</p>

      <div class="callout danger">
        <div class="c-ico"><i data-lucide="alert-octagon"></i></div>
        <div class="c-body"><strong>Antes de pagar, confira mais uma vez o nome do seu domínio.</strong> Olhe com atenção a escrita exata (letra por letra) antes de confirmar o pagamento. O registro é <strong>irreversível</strong>: se houver qualquer erro, não dá para alterar — só comprando um domínio novo. Essa é a última chance de corrigir.</div>
      </div>

      <p>Confirmado? Pode finalizar. Pronto — o domínio é seu! 🎉</p>
    </div>

  </div>
</div>

<!-- ══════════════════ ETAPA 2 ══════════════════ -->
<section id="etapa2" class="etapa-header" data-step="2" data-screen-label="Etapa 2">
  <div class="wrap">
    <span class="etapa-overline reveal"><span class="n">2</span> Etapa 2</span>
    <h2 class="reveal">Compartilhar o <span class="gradient-text">acesso</span> com a Ramoa</h2>
    <p class="reveal">Agora você libera um acesso limitado e seguro para a gente configurar tudo. Veja primeiro como isso protege a sua conta.</p>
    <hr class="divider-gradient reveal" />
  </div>
</section>

<div class="wrap">
  <div class="callout secure reveal" style="margin-top:32px;">
    <div class="c-ico"><i data-lucide="shield-check"></i></div>
    <div class="c-body"><strong>Antes de começar:</strong> para configurar o seu domínio, a gente precisa de um acesso — mas <strong>você nunca precisa entregar a sua senha</strong>. A Hostinger permite conceder um acesso de <strong>Colaborador</strong>: limitado e seguro. Com ele, a Ramoa gerencia o serviço, mas <strong>não vê seus dados pessoais</strong> e <strong>não pode fazer nenhuma compra</strong> na sua conta. E você pode remover esse acesso quando quiser.</div>
  </div>

  <div class="timeline">

    <!-- Passo 1 -->
    <div class="step reveal" data-step="2">
      <div class="step-num">1</div>
      <div class="step-kicker">Etapa 2 · Passo 1</div>
      <h3>Abra o Compartilhamento de conta</h3>
      <p>Logado na sua conta Hostinger, clique no <strong>ícone de conta</strong> (a pessoinha) no canto superior direito e depois em <strong>"Compartilhamento de conta"</strong>.</p>
      <div class="shot">
        <figure>
          <div class="frame" data-zoom="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-4.webp">
            <img src="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-4.webp" alt="Menu da conta no hPanel da Hostinger apontando para Compartilhamento de conta" />
            <span class="zoom-hint"><i data-lucide="maximize-2" style="width:13px;height:13px;"></i> Ampliar</span>
          </div>
          <figcaption><i data-lucide="image" style="width:16px;height:16px;"></i> <span class="cap-text">Ícone de conta (1) → "Compartilhamento de conta" (2).</span></figcaption>
        </figure>
      </div>
    </div>

    <!-- Passo 2 -->
    <div class="step reveal" data-step="2">
      <div class="step-num">2</div>
      <div class="step-kicker">Etapa 2 · Passo 2</div>
      <h3>Vá em "Dar acesso" e clique em "Conceder acesso"</h3>
      <p>Na página de Compartilhamento de Conta, abra a aba <strong>"Dar acesso"</strong> e clique no botão <strong>"Conceder acesso"</strong>.</p>
      <div class="shot">
        <figure>
          <div class="frame" data-zoom="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-5.webp">
            <img src="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-5.webp" alt="Aba Dar acesso com o botão Conceder acesso destacado" />
            <span class="zoom-hint"><i data-lucide="maximize-2" style="width:13px;height:13px;"></i> Ampliar</span>
          </div>
          <figcaption><i data-lucide="image" style="width:16px;height:16px;"></i> <span class="cap-text">Aba "Dar acesso" (1) → botão "Conceder acesso" (2).</span></figcaption>
        </figure>
      </div>
    </div>

    <!-- Passo 3 -->
    <div class="step reveal" data-step="2">
      <div class="step-num">3</div>
      <div class="step-kicker">Etapa 2 · Passo 3</div>
      <h3>Preencha os dados do acesso</h3>
      <p>São três campos. Preencha exatamente assim:</p>

      <div class="fields">
        <div class="field">
          <div class="fn">1</div>
          <div class="ftext">
            <div class="flabel">Para quem você quer dar acesso?</div>
            <div class="fval"><span class="mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7aea2a5bef9a7a2b8b3adbea2a497bfb8a3bab6bebbf9b4b8ba">[email&#160;protected]</a></span></div>
          </div>
          <button class="copy-btn" id="copyEmail" data-email="yuri.puodzius@hotmail.com"><i data-lucide="copy" style="width:15px;height:15px;"></i> Copiar e-mail</button>
        </div>
        <div class="field">
          <div class="fn">2</div>
          <div class="ftext">
            <div class="flabel">Quais serviços compartilhar?</div>
            <div class="fval">Selecione o <strong>SEU domínio</strong> <span class="muted" style="font-weight:600;font-size:14px;">(o que você acabou de registrar)</span></div>
          </div>
        </div>
        <div class="field">
          <div class="fn">3</div>
          <div class="ftext">
            <div class="flabel">Atribuir função</div>
            <div class="fval"><span class="role-pill"><i data-lucide="check" style="width:16px;height:16px;"></i> Colaborador</span></div>
          </div>
        </div>
      </div>

      <div class="callout danger">
        <div class="c-ico"><i data-lucide="alert-triangle"></i></div>
        <div class="c-body">Selecione <strong>Colaborador</strong>, <strong>NÃO Administrador</strong>. É isso que mantém sua conta protegida: a gente gerencia o serviço, sem acesso aos seus dados e sem poder comprar nada.</div>
      </div>

      <div class="shot">
        <figure>
          <div class="frame" data-zoom="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-6.webp">
            <img src="https://ramoadigital.com/wp-content/uploads/2026/06/registro-de-dominio-6.webp" alt="Formulário Conceder acesso com Colaborador marcado como correto e Administrador como incorreto" />
            <span class="zoom-hint"><i data-lucide="maximize-2" style="width:13px;height:13px;"></i> Ampliar</span>
          </div>
          <figcaption><i data-lucide="image" style="width:16px;height:16px;"></i> <span class="cap-text">Em "Quais serviços", <span class="legend">selecione o SEU domínio aqui</span> (no exemplo aparece o domínio da Ramoa). Em "Atribuir função", escolha <strong style="color:var(--color-success)">Colaborador</strong>.</span></figcaption>
        </figure>
      </div>
    </div>

    <!-- Passo 4 -->
    <div class="step reveal" data-step="2">
      <div class="step-num">4</div>
      <div class="step-kicker">Etapa 2 · Passo 4</div>
      <h3>Conceder acesso → Pronto!</h3>
      <p>Clique em <strong>"Conceder acesso"</strong> e pronto! 🐾 A partir daqui é com a gente: vamos configurar todo o restante para o seu projeto entrar no ar.</p>
    </div>

  </div>
</div>

<!-- ══════════════════ CHECKLIST ══════════════════ -->
<section class="section-block" style="padding-top:64px;" data-screen-label="Checklist">
  <div class="wrap readable" style="margin:0 auto;">
    <div class="overview-head reveal" style="margin-bottom:28px;">
      <h2>Checklist <span class="gradient-text">final</span></h2>
      <p>Confira se passou por tudo. Marque cada item conforme concluir.</p>
    </div>
    <div class="checklist-wrap reveal">
      <ul class="checklist" id="checklist">
        <li class="check"><span class="box"><i data-lucide="check" style="width:18px;height:18px;"></i></span><span class="label">Conferi a escrita do meu domínio 2–3x</span></li>
        <li class="check"><span class="box"><i data-lucide="check" style="width:18px;height:18px;"></i></span><span class="label">Não adicionei hospedagem</span></li>
        <li class="check"><span class="box"><i data-lucide="check" style="width:18px;height:18px;"></i></span><span class="label">Não adicionei e-mail</span></li>
        <li class="check" data-optional="1"><span class="box"><i data-lucide="check" style="width:18px;height:18px;"></i></span><span class="label">Adicionei a extensão extra (.com / .com.br)</span> <span class="opt">Opcional</span></li>
        <li class="check"><span class="box"><i data-lucide="check" style="width:18px;height:18px;"></i></span><span class="label">Conferi o domínio <strong>mais uma vez antes de pagar</strong> e finalizei a compra</span></li>
        <li class="check"><span class="box"><i data-lucide="check" style="width:18px;height:18px;"></i></span><span class="label">Concedi acesso de <strong>Colaborador</strong> para <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88f1fdfae1a6f8fde7ecf2e1fdfbc8e0e7fce5e9e1e4a6ebe7e5">[email&#160;protected]</a></span></li>
      </ul>
      <div class="celebrate" id="celebrate">Tudo certo! 🐾 Agora é com a gente.</div>
    </div>
  </div>
</section>

<!-- ══════════════════ ENCERRAMENTO (conteúdo) ══════════════════ -->
<section class="closing" data-screen-label="Encerramento">
  <div class="wrap">
    <h2 class="reveal">Deixa com a gente. 🐾</h2>
    <p class="reveal">Qualquer dúvida, é só chamar.</p>

    <!-- Vídeo discreto — último bloco de conteúdo -->
    <div class="video-block reveal">
      <div class="vb-head"><i data-lucide="play-circle" style="width:18px;height:18px;"></i> Prefere acompanhar em vídeo?</div>
      <div class="vb-note">Estes tutoriais de terceiros mostram o passo a passo na prática.</div>
      <div class="video-links">
        <a href="https://www.youtube.com/watch?v=Bh9dcXC77LY" target="_blank" rel="noopener"><i class="yt" data-lucide="play-circle"></i> <span class="lbl">Etapa 1</span> <span class="vtitle">Compra de domínio na Hostinger</span> <i class="ext-ico" data-lucide="external-link" style="width:15px;height:15px;"></i></a>
        <a href="https://www.youtube.com/watch?v=VcSPNvdV8N8" target="_blank" rel="noopener"><i class="yt" data-lucide="play-circle"></i> <span class="lbl">Etapa 2</span> <span class="vtitle">Concessão de acesso como Colaborador</span> <i class="ext-ico" data-lucide="external-link" style="width:15px;height:15px;"></i></a>
      </div>
    </div>
  </div>
</section>

</main>

<!-- Lightbox -->
<div class="lightbox" id="lightbox">
  <button class="lb-close" id="lbClose" aria-label="Fechar"><i data-lucide="x"></i></button>
  <img id="lbImg" alt="" />
</div>
</div>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://unpkg.com/lucide@latest"></script>
<script>
/* ════════════════════════════════════════════════════════════════════
   Tutorial Ramoa — interactions
   ════════════════════════════════════════════════════════════════════ */
(function () {
  'use strict';

  /* ─── Lucide icons ─── */
  function drawIcons() { if (window.lucide) lucide.createIcons(); }
  drawIcons();

  /* ─── Scroll-driven UI: progress, step pill, reveals, active step ───
     (Uses getBoundingClientRect rather than IntersectionObserver, which
      does not reliably fire callbacks inside this preview iframe.)        */
  var floatEl = document.getElementById('stepFloat');
  if (floatEl && floatEl.parentElement !== document.body) {
    floatEl.classList.add('rd-floating-step');
    document.body.appendChild(floatEl);
  }
  var progress = document.getElementById('progress');
  var stepText = document.getElementById('stepText');
  var etapaSections = Array.prototype.slice.call(document.querySelectorAll('section[data-step]'));
  var revealEls = Array.prototype.slice.call(document.querySelectorAll('.reveal'));
  var steps = Array.prototype.slice.call(document.querySelectorAll('.step'));
  var pillDot = '<span style="width:7px;height:7px;border-radius:50%;background:var(--neon-magenta);box-shadow:0 0 10px var(--neon-magenta);"></span> ';

  function tick() {
    var h = document.documentElement;
    var vh = window.innerHeight;
    var max = h.scrollHeight - h.clientHeight;
    var pct = max > 0 ? (h.scrollTop / max) * 100 : 0;
    if (progress) progress.style.width = pct + '%';

    // reveal anything whose top has entered the lower ~92% of the viewport.
    // We add .in to play the entrance animation, then strip it shortly after
    // so the element rests on its always-visible base state — this prevents
    // content getting stuck hidden if CSS animations are throttled.
    for (var i = revealEls.length - 1; i >= 0; i--) {
      var el = revealEls[i];
      if (el.getBoundingClientRect().top < vh * 0.92) {
        el.classList.add('in');
        (function (e) { setTimeout(function () { e.classList.remove('in'); }, 850); })(el);
        revealEls.splice(i, 1);
      }
    }

    // active step = the one crossing viewport center
    var center = vh * 0.45;
    steps.forEach(function (s) {
      var r = s.getBoundingClientRect();
      s.classList.toggle('active', r.top < center && r.bottom > center);
    });

    // current etapa label
    if (stepText) {
      var current = null;
      etapaSections.forEach(function (el) {
        if (el.getBoundingClientRect().top <= vh * 0.4) current = el;
      });
      if (current) {
        stepText.innerHTML = 'Etapa <b>' + current.getAttribute('data-step') + '</b> de 2';
      } else {
        stepText.innerHTML = 'Guia em <b>2 etapas</b>';
      }
    }
  }

  window.addEventListener('scroll', tick, { passive: true });
  window.addEventListener('resize', tick);
  tick();
  requestAnimationFrame(tick);
  window.addEventListener('load', tick);

  /* ─── Domain syntax validator ─── */
  var input = document.getElementById('valInput');
  var fb = document.getElementById('valFeedback');

  function msg(type, text) {
    var ic = type === 'ok' ? 'check-circle-2' : (type === 'bad' ? 'alert-circle' : 'info');
    return '<div class="val-msg ' + type + '"><i data-lucide="' + ic + '" style="width:18px;height:18px;"></i> ' + text + '</div>';
  }

  function validate() {
    var raw = input.value;
    if (!raw.trim()) {
      input.classList.remove('ok', 'bad');
      fb.innerHTML = msg('idle', 'Digite acima para conferir o formato do endereço.');
      drawIcons();
      return;
    }
    var problems = [];
    var v = raw.trim();

    if (/\s/.test(raw)) problems.push('Há <strong>espaços</strong> — um domínio não pode ter espaços.');
    if (/[A-Z]/.test(v)) problems.push('Tem <strong>letras maiúsculas</strong> — use tudo em minúsculo (ex.: suamarca.com).');
    // invalid chars: allow letters, digits, hyphen, dot
    var invalid = v.replace(/[a-z0-9.\-]/gi, '');
    // unique invalid chars (excluding spaces already flagged)
    var badChars = invalid.replace(/\s/g, '').split('').filter(function (c, i, a) { return a.indexOf(c) === i; });
    if (badChars.length) problems.push('Caractere inválido: <strong>' + badChars.map(function (c) { return '"' + c + '"'; }).join(', ') + '</strong>. Use só letras, números e hífen.');
    if (v.indexOf('.') === -1) problems.push('Falta a <strong>extensão</strong> (ex.: <strong>.com</strong>, .com.br, .net).');
    else {
      var parts = v.split('.');
      var tld = parts[parts.length - 1].toLowerCase();
      if (tld.length < 2 || !/^[a-z]+$/.test(tld)) problems.push('A <strong>extensão</strong> parece incompleta (depois do último ponto deve vir algo como "com", "br", "net").');
      if (parts[0] === '' ) problems.push('O nome não pode <strong>começar com ponto</strong>.');
    }
    if (/--/.test(v)) problems.push('Evite <strong>dois hífens seguidos</strong>.');
    if (/^-|-\./.test(v) || /\.-/.test(v)) problems.push('O nome não deve começar ou terminar partes com <strong>hífen</strong>.');

    if (problems.length) {
      input.classList.remove('ok'); input.classList.add('bad');
      fb.innerHTML = problems.map(function (p) { return msg('bad', p); }).join('');
    } else {
      input.classList.remove('bad'); input.classList.add('ok');
      fb.innerHTML = msg('ok', 'A <strong>escrita</strong> está num formato válido. Confira a disponibilidade na Hostinger — e revise letra por letra antes de registrar!');
    }
    drawIcons();
  }
  if (input) input.addEventListener('input', validate);

  /* ─── Accordions ─── */
  document.querySelectorAll('.acc-btn').forEach(function (btn) {
    btn.addEventListener('click', function () {
      var acc = btn.closest('.acc');
      var panel = acc.querySelector('.acc-panel');
      var isOpen = acc.classList.toggle('open');
      panel.style.maxHeight = isOpen ? panel.scrollHeight + 'px' : '0px';
    });
  });

  /* ─── Copy email ─── */
  var copyBtn = document.getElementById('copyEmail');
  if (copyBtn) {
    copyBtn.addEventListener('click', function () {
      var email = copyBtn.getAttribute('data-email');
      var done = function () {
        copyBtn.classList.add('done');
        copyBtn.innerHTML = '<i data-lucide="check" style="width:15px;height:15px;"></i> Copiado!';
        drawIcons();
        setTimeout(function () {
          copyBtn.classList.remove('done');
          copyBtn.innerHTML = '<i data-lucide="copy" style="width:15px;height:15px;"></i> Copiar e-mail';
          drawIcons();
        }, 2200);
      };
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(email).then(done).catch(fallback);
      } else { fallback(); }
      function fallback() {
        var t = document.createElement('textarea');
        t.value = email; document.body.appendChild(t); t.select();
        try { document.execCommand('copy'); } catch (e) {}
        document.body.removeChild(t); done();
      }
    });
  }

  /* ─── Checklist (memory only) ─── */
  var checklist = document.getElementById('checklist');
  var celebrate = document.getElementById('celebrate');
  if (checklist) {
    var items = Array.prototype.slice.call(checklist.querySelectorAll('.check'));
    items.forEach(function (li) {
      li.addEventListener('click', function () {
        li.classList.toggle('checked');
        evalChecklist();
      });
    });
    function evalChecklist() {
      // celebration when all REQUIRED (non-optional) are checked
      var required = items.filter(function (li) { return !li.hasAttribute('data-optional'); });
      var allDone = required.every(function (li) { return li.classList.contains('checked'); });
      celebrate.classList.toggle('show', allDone);
    }
  }

  /* ─── Lightbox ─── */
  var lb = document.getElementById('lightbox');
  var lbImg = document.getElementById('lbImg');
  var lbClose = document.getElementById('lbClose');
  document.querySelectorAll('.frame[data-zoom]').forEach(function (f) {
    f.addEventListener('click', function () {
      lbImg.src = f.getAttribute('data-zoom');
      lb.classList.add('show');
    });
  });
  function closeLb() { lb.classList.remove('show'); lbImg.src = ''; }
  if (lb) {
    lb.addEventListener('click', function (e) { if (e.target === lb || e.target === lbImg) closeLb(); });
    lbClose.addEventListener('click', closeLb);
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeLb(); });
  }

})();

</script>/* End custom CSS */