/* Painel em estilo game retrô (pixel art). Remover o <link> deste arquivo no index.html volta ao visual anterior. */

.hero-stage .demo-panel{
  --px-font:"Press Start 2P","Courier New",monospace;
  --px-body:"VT323","Courier New",monospace;
  --px-ink:#0d0b12;
  --px-panel:#1b1626;
  --px-panel-2:#262034;
  --px-line:#4b3f66;
  --px-hi:#f2a65a;
  --px-orange:#dd7136;
  --px-green:#7bd88f;
  position:relative;
  background:var(--px-panel);
  border:4px solid var(--px-ink);
  border-radius:0;
  font-family:var(--px-body);
  image-rendering:pixelated;
  box-shadow:
    inset 4px 4px 0 var(--px-line),
    inset -4px -4px 0 #120f1b,
    8px 8px 0 var(--px-ink),
    8px 8px 0 2px var(--px-orange);
}
/* scanlines CRT */
.hero-stage .demo-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(transparent,transparent);
}

/* barra de título */
.hero-stage .demo-panel .panel-head{
  background:var(--px-orange);
  color:var(--px-ink);
  border-bottom:4px solid var(--px-ink);
  font-family:var(--px-font);
  font-size:10px;
  letter-spacing:0;
  padding:12px 14px;
  text-transform:uppercase;
}
.hero-stage .demo-panel .panel-head img{image-rendering:pixelated}
.hero-stage .demo-panel .panel-provider,
.hero-stage .demo-panel .panel-version{color:var(--px-ink);font-family:var(--px-font);font-size:8px;opacity:.85}

.hero-stage .demo-panel .panel-body{font-family:var(--px-body)}
.hero-stage .demo-panel .panel-greeting h2{
  font-family:var(--px-font);font-size:15px;line-height:1.5;letter-spacing:0;
  color:#fff;text-shadow:3px 3px 0 var(--px-ink);
}
.hero-stage .demo-panel .panel-greeting p{font-family:var(--px-body);font-size:21px;color:#cdbfe6}

/* sequência */
.hero-stage .demo-panel .sequence{
  background:var(--px-panel-2);border:3px solid var(--px-ink);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--px-line),inset -3px -3px 0 #120f1b;
  font-family:var(--px-body);
}
.hero-stage .demo-panel .sequence b{font-family:var(--px-font);font-size:9px;line-height:1.5;font-weight:400}
.hero-stage .demo-panel .sequence span{font-size:18px}

/* botões de tarefa */
.hero-stage .demo-panel .task{
  background:var(--px-panel-2);
  border:3px solid var(--px-ink);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--px-line),inset -3px -3px 0 #120f1b,4px 4px 0 var(--px-ink);
  color:#fff;font-family:var(--px-body);
  transition:none;
}
.hero-stage .demo-panel .task:hover{transform:translate(-2px,-2px);box-shadow:inset 3px 3px 0 var(--px-line),inset -3px -3px 0 #120f1b,6px 6px 0 var(--px-ink)}
.hero-stage .demo-panel .task:active{transform:translate(3px,3px);box-shadow:inset 3px 3px 0 #120f1b,inset -3px -3px 0 var(--px-line),1px 1px 0 var(--px-ink)}
.hero-stage .demo-panel .task b{font-family:var(--px-font);font-size:9px;line-height:1.6;font-weight:400;letter-spacing:0}
.hero-stage .demo-panel .task small{font-family:var(--px-body);font-size:19px;line-height:1.05;color:#cdbfe6}
.hero-stage .demo-panel .task svg{stroke-linecap:square;stroke-linejoin:miter;shape-rendering:crispEdges}
.hero-stage .demo-panel .task img{image-rendering:pixelated}
.hero-stage .demo-panel .task[aria-pressed="true"],
.hero-stage .demo-panel .task.active{
  background:#4a2b18;border-color:var(--px-ink);
  box-shadow:inset 3px 3px 0 var(--px-hi),inset -3px -3px 0 #8a3d14,4px 4px 0 var(--px-ink);
}
.hero-stage .demo-panel .task[aria-pressed="true"] b::before,
.hero-stage .demo-panel .task.active b::before{content:"▶ ";color:var(--px-hi)}
.hero-stage .demo-panel .task-main b{font-size:11px}
.hero-stage .demo-panel .task-tag{
  background:var(--px-ink);color:var(--px-hi);border:2px solid var(--px-hi);border-radius:0;
  font-family:var(--px-font);font-size:7px;letter-spacing:0;
}

/* resumo + mascote */
.hero-stage .demo-panel .mini-label{font-family:var(--px-font);font-size:7px;letter-spacing:0;line-height:1.6;color:var(--px-hi)}
.hero-stage .demo-panel .demo-summary strong{font-family:var(--px-font);font-size:10px;line-height:1.5;font-weight:400;color:#fff}
.hero-stage .demo-panel .copy-chip{font-family:var(--px-body);font-size:19px;color:var(--px-green)}
.hero-stage .demo-panel .copy-chip svg{shape-rendering:crispEdges;stroke-linecap:square;stroke-linejoin:miter}
.hero-stage .demo-panel .panel-mascot canvas{image-rendering:pixelated}
.hero-stage .demo-panel #switch-mascot{
  background:var(--px-ink);color:var(--px-hi);border:2px solid var(--px-hi);border-radius:0;
  font-family:var(--px-font);font-size:8px;
}

/* botão principal */
.hero-stage .demo-panel .demo-start{
  background:var(--px-orange);color:var(--px-ink);
  border:4px solid var(--px-ink);border-radius:0;
  box-shadow:inset 4px 4px 0 #f6a26f,inset -4px -4px 0 #9a4617,5px 5px 0 var(--px-ink);
  font-family:var(--px-font);font-size:10px;font-weight:400;letter-spacing:0;text-transform:uppercase;
  transition:none;
}
.hero-stage .demo-panel .demo-start:hover{transform:translate(-2px,-2px);box-shadow:inset 4px 4px 0 #f6a26f,inset -4px -4px 0 #9a4617,7px 7px 0 var(--px-ink)}
.hero-stage .demo-panel .demo-start:active{transform:translate(4px,4px);box-shadow:inset 4px 4px 0 #9a4617,inset -4px -4px 0 #f6a26f,1px 1px 0 var(--px-ink)}
.hero-stage .demo-panel .demo-start svg{shape-rendering:crispEdges}

/* foco visível */
.hero-stage .demo-panel button:focus-visible{outline:3px dashed var(--px-hi);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .hero-stage .demo-panel .task:hover,.hero-stage .demo-panel .demo-start:hover{transform:none}
}

/* timeline + textos em volta do painel */
.hero-stage .timeline{
  position:relative;
  background:#1b1626;
  border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 4px 4px 0 #4b3f66,inset -4px -4px 0 #120f1b,6px 6px 0 #0d0b12;
  font-family:"VT323","Courier New",monospace;
  image-rendering:pixelated;
}
.hero-stage .timeline::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:linear-gradient(transparent,transparent);
}
.hero-stage .timeline-head,
.hero-stage .timeline-head span{font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;line-height:1.6;color:#f2a65a}
.hero-stage .timeline-ruler span{font-family:"VT323","Courier New",monospace;font-size:17px;color:#cdbfe6}
.hero-stage .timeline-tracks .track>span{font-family:"VT323","Courier New",monospace;font-size:16px;letter-spacing:0;color:#cdbfe6}
.hero-stage .timeline-tracks .track i{
  border-radius:0;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.35),0 0 0 2px #0d0b12;
}
.hero-stage .timeline-tracks .playhead{border-radius:0;background:#fff;box-shadow:2px 0 0 #0d0b12}
.hero-stage .timeline-tracks .playhead::before,.hero-stage .timeline-tracks .playhead::after{border-radius:0}

.hero-stage .stage-label,
.hero-stage .stage-label>span{font-family:"Press Start 2P","Courier New",monospace;letter-spacing:0;line-height:1.6}
.hero-stage .stage-label>span:last-child{border-radius:0;border:2px solid #dd7136;box-shadow:2px 2px 0 #0d0b12}
.hero-stage .demo-note{font-family:"VT323","Courier New",monospace;font-size:19px;line-height:1.1;color:#cdbfe6}

/* destaque do título do hero */
.hero h1 em{
  font-family:"Press Start 2P","Courier New",monospace;
  font-style:normal;font-weight:400;letter-spacing:0;text-transform:uppercase;
  font-size:clamp(24px,4.6vw,40px);line-height:1.4;
  margin-top:14px;
  text-shadow:4px 4px 0 #6b2f10;
  -webkit-font-smoothing:none;
}

/* a frase reage como um botão de arcade */
.hero h1 em{
  width:fit-content;cursor:pointer;user-select:none;
  transition:transform .08s steps(2,end),text-shadow .08s steps(2,end);
}
.hero h1 em:hover{transform:translate(2px,2px);text-shadow:2px 2px 0 #6b2f10}
.hero h1 em:active{transform:translate(4px,4px);text-shadow:0 0 0 #6b2f10}
@media (prefers-reduced-motion:reduce){.hero h1 em{transition:none}}

/* botões de game em todo o site */
body .button,
body .provider-link,
body .suri-search button{
  --btn-bg:#dd7136;--btn-hi:#f6a26f;--btn-lo:#9a4617;--btn-ink:#0d0b12;
  background:var(--btn-bg);color:var(--btn-ink);
  border:4px solid var(--btn-ink);border-radius:0;
  box-shadow:inset 3px 3px 0 var(--btn-hi),inset -3px -3px 0 var(--btn-lo),4px 4px 0 var(--btn-ink);
  font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0;line-height:1.5;
  text-transform:uppercase;
  transition:transform .06s steps(2,end),box-shadow .06s steps(2,end);
  image-rendering:pixelated;
}
body .button{font-size:10px!important;padding:14px 16px!important;gap:12px}
body .button.small{font-size:9px!important;padding:11px 12px!important}
body .button svg{width:16px;height:16px;shape-rendering:crispEdges;stroke-linecap:square;stroke-linejoin:miter}
body .button.outline{background:transparent;color:inherit;--btn-hi:transparent;--btn-lo:transparent}
body .provider-link{font-size:9px;padding:10px 12px;background:#262034;color:#fff;--btn-hi:#4b3f66;--btn-lo:#120f1b}
body .provider-link.recommended{background:var(--btn-bg);color:var(--btn-ink);--btn-hi:#f6a26f;--btn-lo:#9a4617}
body .suri-search button{font-size:9px;padding:0 12px}

body .button:hover,
body .provider-link:hover,
body .suri-search button:hover{
  background:var(--btn-bg);
  transform:translate(-2px,-2px);
  box-shadow:inset 3px 3px 0 var(--btn-hi),inset -3px -3px 0 var(--btn-lo),6px 6px 0 var(--btn-ink);
}
/* clique: o botão afunda */
body .button:active,
body .provider-link:active,
body .suri-search button:active{
  transform:translate(4px,4px);
  box-shadow:inset 3px 3px 0 var(--btn-lo),inset -3px -3px 0 var(--btn-hi),0 0 0 var(--btn-ink);
}
body .button:focus-visible,
body .provider-link:focus-visible{outline:3px dashed #f2a65a;outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  body .button,body .provider-link,body .suri-search button{transition:none}
}

/* troca de cor ao passar o mouse / clicar, e sem seleção de texto nos botões */
body .button,body .provider-link,body .suri-search button{user-select:none;-webkit-user-select:none}
body .button:hover,body .suri-search button:hover{--btn-bg:#f08a4f}
body .button:active,body .suri-search button:active{--btn-bg:#c45f28}
body .provider-link:hover{--btn-bg:#7b5cc4;--btn-hi:#a98ae8;--btn-lo:#4a3585;color:#fff;background:var(--btn-bg)}
body .provider-link:active{--btn-bg:#3d2c6e;--btn-hi:#4a3585;--btn-lo:#a98ae8;color:#fff;background:var(--btn-bg)}
body .provider-link.recommended:hover{--btn-bg:#f08a4f;--btn-hi:#f6a26f;--btn-lo:#9a4617;color:var(--btn-ink)}
body .provider-link.recommended:active{--btn-bg:#c45f28;--btn-hi:#9a4617;--btn-lo:#f6a26f;color:var(--btn-ink)}

/* cards de planos em estilo game */
body .price-card{
  background-color:#1b1626;
  background-image:linear-gradient(transparent,transparent);
  border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 4px 4px 0 #4b3f66,inset -4px -4px 0 #120f1b,8px 8px 0 #0d0b12;
  font-family:"VT323","Courier New",monospace;
  image-rendering:pixelated;
}
body .price-card.featured{
  background-color:#2a1a16;
  box-shadow:inset 4px 4px 0 #dd7136,inset -4px -4px 0 #8a3d14,8px 8px 0 #0d0b12;
}
body .price-card .mini-label{font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0;line-height:1.6;color:#f2a65a}
body .price-card .price{font-family:"Press Start 2P","Courier New",monospace;letter-spacing:0}
body .price-card .price strong{font-family:"Press Start 2P","Courier New",monospace;font-weight:400;font-size:34px;letter-spacing:0;line-height:1.3;color:#fff;text-shadow:4px 4px 0 #6b2f10}
body .price-card .price span{font-family:"Press Start 2P","Courier New",monospace;font-size:12px;color:#f2a65a}
body .price-card .price small,
body .price-card .billing{font-family:"VT323","Courier New",monospace;font-size:20px;line-height:1.1;letter-spacing:0;color:#cdbfe6}
body .price-card hr{border:0;height:4px;background:repeating-linear-gradient(to right,#4b3f66 0 8px,transparent 8px 12px)}
body .price-card li{font-family:"VT323","Courier New",monospace;font-size:21px;line-height:1.1;color:#fff}
body .price-card li::before{font-family:"Press Start 2P","Courier New",monospace;border-radius:0}
body .price-card li svg{shape-rendering:crispEdges}

/* faixa "economize" */
body .price-card .saving{
  background:#dd7136;color:#0d0b12;border:3px solid #0d0b12;border-radius:0;
  box-shadow:inset 2px 2px 0 #f6a26f,inset -2px -2px 0 #9a4617,3px 3px 0 #0d0b12;
  font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;line-height:1.5;
}
/* fita do desconto */
body .monthly-promotion .holo-ribbon{border-radius:0;border:3px solid #0d0b12;box-shadow:3px 3px 0 #0d0b12}
body .monthly-promotion .holo-track span{
  font-family:"Press Start 2P","Courier New",monospace;font-size:8px;letter-spacing:0;color:#0d0b12;
}
body .price-card .price small{font-size:19px!important;display:inline-block;margin-left:8px}

/* alinhamento entre os cards de planos */
body .price-card{display:flex;flex-direction:column}
body .price-card .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-height:76px;margin-bottom:6px}
body .price-card .price small{margin-left:0}
body .price-card .billing{min-height:24px;margin:0}
body .price-card li{font-size:18px!important;white-space:nowrap}
body .price-card ul{flex:0 0 auto}
body .price-card .button{margin-top:auto!important}
body .price-card .billing{height:24px;min-height:0;line-height:24px!important;white-space:nowrap;font-size:19px!important;padding:0!important}
body .price-card.promoted .billing,body .price-card.featured .billing,body .price-card .billing{height:24px!important;min-height:0!important;max-height:24px!important}

/* "Como funciona": só os elementos de destaque em estilo game */
.steps .step-number{
  display:inline-block;padding:6px 8px;
  background:#0d0b12;color:#f2a65a;
  font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0;line-height:1;
  box-shadow:3px 3px 0 #dd7136;
}
.steps .step-art svg{shape-rendering:crispEdges;stroke-linecap:square;stroke-linejoin:miter}
.steps .task-art svg{
  border:3px solid #0d0b12;border-radius:0;background:#fff;color:#b9531b;
  box-shadow:inset 2px 2px 0 #f6a26f,4px 4px 0 #0d0b12;
}
.steps .brief-art>span{
  border:3px solid #0d0b12;border-radius:0;background:#fff;
  box-shadow:4px 4px 0 #0d0b12;
  font-family:"Press Start 2P","Courier New",monospace;font-size:14px;letter-spacing:0;
}
.steps .brief-art i,.steps .tracks-art i{
  border-radius:0;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.2),0 0 0 2px #0d0b12;
}
.steps article h3{
  font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0;
  font-size:12px;line-height:1.6;text-shadow:2px 2px 0 rgba(221,113,54,.45);
}

/* bloco "O trabalho de uma hora em menos de 15 minutos" */
.time-story{
  border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 4px 4px 0 #f6c9a3,inset -4px -4px 0 #d7a77c,8px 8px 0 #0d0b12;
}
.time-story .eyebrow,.time-story .mini-label{font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0;line-height:1.7}
.time-story h3{
  font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0;
  font-size:clamp(16px,2vw,24px);line-height:1.5;text-shadow:3px 3px 0 rgba(221,113,54,.45);
}
.time-story .clock-face svg{shape-rendering:crispEdges;stroke-linecap:square;stroke-linejoin:miter}
.time-story .clock-count{font-family:"Press Start 2P","Courier New",monospace;letter-spacing:0}
.time-story .clock-count span{font-size:7px}
.time-story .clock-copy strong{font-family:"Press Start 2P","Courier New",monospace;font-weight:400;font-size:15px;letter-spacing:0;line-height:1.5}
.time-story .clock-copy small{font-family:"VT323","Courier New",monospace;font-size:17px}
.time-story .time-range,.time-story .time-range span{font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0}
.time-story .range-number{font-size:clamp(30px,4vw,54px);text-shadow:4px 4px 0 #0d0b12}
.time-story .range-separator{font-size:clamp(20px,2.6vw,34px)}
.time-story .range-unit{font-size:14px}
.time-story .time-track i{border-radius:0;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.2),0 0 0 2px #0d0b12}
.time-story .time-metric .mini-label{font-size:12px;line-height:1.7}

/* "Conhecer ChatGPT Plus": mantém a cor ao passar o mouse / clicar; contorno escuro */
body .provider-link:not(.recommended):hover,
body .provider-link:not(.recommended):active,
body .provider-link:not(.recommended):focus-visible{
  --btn-bg:#262034;--btn-hi:#4b3f66;--btn-lo:#120f1b;background:#262034;color:#fff;
}
body .provider-link:focus-visible,
body .button:focus-visible{outline:3px solid #0d0b12;outline-offset:0}

/* botão principal do hero: fonte maior */
body .hero .actions .button{font-size:13px!important;padding:16px 20px!important}
@media (max-width:600px){body .hero .actions .button{font-size:12px!important}}

/* botão "Simular edit": fonte maior */
body .hero-stage .demo-panel .demo-start{font-size:13px!important}
@media (max-width:600px){body .hero-stage .demo-panel .demo-start{font-size:12px!important}}