*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0a0a0a}
a{text-decoration:none;color:inherit}
section[id]{scroll-margin-top:57px}
@keyframes cg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Nav: hidden at the top, slides in after scrolling ── */
.cg-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #262626;transition:opacity .35s ease,transform .35s ease;opacity:0;transform:translateY(-100%);pointer-events:none}
.cg-nav.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}

/* ── Hover corners on cards ── */
.cg-corner{position:absolute;width:14px;height:14px;border:2px solid #d81e2c;opacity:0;transition:opacity .25s ease;z-index:2;pointer-events:none}
.cg-corner--tl{top:8px;left:8px;border-right:none;border-bottom:none}
.cg-corner--tr{top:8px;right:8px;border-left:none;border-bottom:none}
.cg-corner--bl{bottom:8px;left:8px;border-right:none;border-top:none}
.cg-corner--br{bottom:8px;right:8px;border-left:none;border-top:none}
[data-corners]:hover>.cg-corner{opacity:1}

/* ── Boneco divider ──
   Upside down until the section is well in view; then waits a moment
   and turns slowly so the rotation is easy to see. */
.cg-boneco-img{width:64px;height:auto;display:block;transform-origin:50% 50%;transform:rotate(180deg);transition:transform .3s ease}
.cg-boneco.is-in .cg-boneco-img{transform:rotate(0deg);transition:transform 1.8s cubic-bezier(.34,1.25,.64,1) 1s}
.cg-boneco-line{flex:1;height:1px;background:rgba(0,0,0,.35);transform:scaleX(0);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.cg-boneco-line--left{transform-origin:right}
.cg-boneco-line--right{transform-origin:left}
.cg-boneco.is-in .cg-boneco-line{transform:scaleX(1)}
.cg-boneco-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .6s .4s ease,transform .6s .4s ease;text-align:center}
.cg-boneco-label--top{color:rgba(0,0,0,.75);margin-bottom:12px;transform:translateY(-8px)}
.cg-boneco-label--bottom{color:rgba(0,0,0,.85);margin-top:12px;transform:translateY(8px)}
.cg-boneco.is-in .cg-boneco-label{opacity:1;transform:translateY(0)}

/* ── Services: persona picker + steps ── */
.cg-personas{display:flex;flex-direction:column;gap:10px}
.cg-persona{text-align:left;cursor:pointer;padding:20px 22px;border-radius:20px;border:1px solid #262626;background:#0f0f0f;transition:border-color .2s,background .2s;display:block;width:100%;font-family:inherit;color:inherit}
.cg-persona[aria-selected="true"]{border-color:#d81e2c;background:#141010}
.cg-persona-row{display:flex;align-items:flex-start;gap:10px}
.cg-persona-dot{width:9px;height:9px;margin-top:6px;border-radius:50%;background:#333;flex-shrink:0}
.cg-persona[aria-selected="true"] .cg-persona-dot{background:#d81e2c}
.cg-persona-title{font-family:'Anton',sans-serif;font-weight:400;font-size:22px;letter-spacing:.03em;text-transform:uppercase;line-height:1.3;display:block;color:#b3b3b3}
.cg-persona[aria-selected="true"] .cg-persona-title{color:#fff}
.cg-persona-sub{font-size:14px;color:#c2c2c2;margin-top:10px}
.cg-step{position:relative;margin-bottom:22px}
.cg-step-n{position:absolute;left:-56px;top:0;width:44px;height:44px;border-radius:50%;border:1px solid #d81e2c;background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.06em;color:#d81e2c}
.cg-step-card{background:#0f0f0f;border:1px solid #1f1f1f;border-radius:20px;padding:26px 28px;position:relative}
.cg-step-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:10px}
.cg-step-desc{font-size:16px;color:#b3b3b3;line-height:1.75;margin:0 0 18px;max-width:620px}
.cg-step-cta{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#ff5a63;display:inline-flex;align-items:center;gap:6px}

/* ── Phones ── */
@media (max-width:760px){
  /* Nav: logo on the first row, section links on a second row */
  .cg-nav>div{flex-wrap:wrap;height:auto!important;padding:10px 16px 8px!important;row-gap:8px}
  .cg-nav>div>a:first-child img{height:20px!important}
  .cg-nav-links{width:100%;justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important}
  .cg-nav-links a{white-space:nowrap;font-size:11px!important}
  .cg-nav-links a[href^="https://wa.me"]{display:none}
  section[id]{scroll-margin-top:84px}

  .cg-boneco-center{padding:0 20px!important}

  /* Persona picker becomes a compact 3-up row instead of a tall sticky column */
  .cg-personas-col{position:static!important;max-width:none!important;min-width:0!important;flex:1 1 100%!important}
  .cg-personas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .cg-persona{padding:14px 10px;border-radius:14px;text-align:center}
  .cg-persona-row{display:block}
  .cg-persona-dot{display:none}
  .cg-persona-title{font-size:15px;line-height:1.15}
  .cg-persona-sub{font-size:11px;margin-top:6px;line-height:1.3}
  .cg-steps{padding-left:0!important}
  .cg-steps>div:first-child{display:none}
  .cg-step-n{position:relative;left:auto;width:36px;height:36px;font-size:14px;margin:0 0 -18px 20px;z-index:3}
  .cg-step-card{padding:28px 20px 22px}
  .cg-steps-col p#persona-line{font-size:18px!important}

  .cg-course-aside{position:static!important}
  section[id]>div,section>div[style*="max-width:1160px"]{padding-left:20px!important;padding-right:20px!important}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}