:root {
  --jcode-blue: #1684ff;
  --jcode-cyan: #22c7ff;
  --jcode-purple: #8a42e8;
  --jcode-green: #16e58d;
  --jcode-ink: #050611;
  --jcode-panel: rgba(12, 14, 31, .74);
  --jcode-line: rgba(139, 118, 255, .2);
}

/* background-color separado do background-image de propósito: se o iOS Safari
   falhar em propagar as camadas de gradiente do body para o canvas da página,
   sobra a cor sólida escura em vez de branco. */
body {
  background-color: #050611;
  background-image:
    radial-gradient(circle at 85% 8%, rgba(22,132,255,.13), transparent 27%),
    radial-gradient(circle at 8% 26%, rgba(138,66,232,.12), transparent 29%),
    linear-gradient(145deg, #121329 0%, #050611 48%, #020204 100%);
}

#jcode-cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}

.background-shapes { position: fixed; }
.shape { animation: ambient-drift 14s ease-in-out infinite alternate; }
.shape2 { animation-delay: -6s; }
@keyframes ambient-drift {
  to { transform: translate3d(8vw, 5vh, 0) scale(1.16); }
}

header {
  width: min(96%, 1500px);
  max-width: 1500px;
  padding-right: 0;
}
header::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 58px;
  background: rgba(5,6,17,.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.logo img {
  width: 220px;
  height: 58px;
  object-fit: contain;
}
header nav {
  padding: 13px 2.2rem;
  border-color: rgba(121, 112, 255, .28);
  background: rgba(8, 9, 24, .7);
  box-shadow: 0 12px 45px rgba(0,0,0,.28), 0 0 30px rgba(80,71,255,.08);
}
nav ul { gap: 34px; }
nav ul li a { font-size: .82rem; }
.contact-button {
  background: linear-gradient(100deg, rgba(255,255,255,.94), #dceaff);
  padding: 11px 22px;
}

main { padding-top: 5.5em; }
.hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69,152,255,.4), rgba(160,78,234,.4), transparent);
}
.hero-content {
  width: min(calc(100% - 48px), 1320px);
  max-width: 1320px;
  margin: 2.5em auto 4em;
  gap: 6rem;
}
.hero-text { max-width: 52%; }
.hero-text h1 {
  max-width: 680px;
  font-size: clamp(2.5rem, 4.2vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  background: linear-gradient(120deg, #fff 10%, #c8d8ff 48%, #a980ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-text p {
  max-width: 620px;
  margin-bottom: 26px;
  color: #aab2c8;
  font-size: 1rem;
}
.hero-buttons {
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 28px;
}
.cta-button {
  min-width: 0;
  padding: 13px 24px;
  border-radius: 14px;
  font-size: .86rem;
}
.cta-button.primary {
  justify-content: center;
  background: linear-gradient(105deg, var(--jcode-blue), var(--jcode-purple));
  box-shadow: 0 12px 35px rgba(87, 69, 220, .25);
}
.cta-button.primary:hover { box-shadow: 0 18px 50px rgba(87,69,220,.42); }
.hero-metrics {
  justify-content: flex-start;
  gap: 0;
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.metric-item {
  padding: 18px 28px 0 0;
  margin-right: 28px;
  text-align: left;
}
.metric-item + .metric-item {
  padding-left: 28px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.metric-item h3 {
  font-size: 1rem;
  color: #dfe6ff;
}
.metric-item p { font-size: .72rem; line-height: 1.5; }
.powered-by-ia { justify-content: flex-start; margin-bottom: 5px; }

.hero-image {
  max-width: 44%;
  min-height: 520px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}
.elisa-orbit {
  position: relative;
  width: min(460px, 40vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(54,106,255,.18), transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 48%, rgba(111,72,223,.12) 49%, transparent 50%);
  filter: drop-shadow(0 35px 60px rgba(0,0,0,.4));
}
.elisa-orbit::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(0,0,0,0), rgba(46,194,255,.28), rgba(138,66,232,.28), rgba(0,0,0,0) 73%);
  filter: blur(24px);
  animation: orbit-spin 13s linear infinite;
}
.orbit {
  position: absolute;
  border: 1px solid rgba(107,127,255,.24);
  border-radius: 50%;
  animation: orbit-spin 18s linear infinite;
}
.orbit::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jcode-cyan);
  box-shadow: 0 0 16px var(--jcode-cyan);
}
.orbit-one { inset: 7%; transform: rotateX(65deg) rotateZ(12deg); }
.orbit-two { inset: 21%; animation-direction: reverse; animation-duration: 11s; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.elisa-core {
  position: relative;
  z-index: 3;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(27,39,81,.94), rgba(21,13,47,.96));
  box-shadow: inset 0 0 35px rgba(69,142,255,.15), 0 0 75px rgba(77,83,255,.24);
  animation: core-float 5s ease-in-out infinite;
}
.elisa-core img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(34,199,255,.35));
}
.elisa-core small { color: #aab6d6; letter-spacing: .18em; font-size: .56rem; }
@keyframes core-float { 50% { transform: translateY(-9px) rotate(2deg); } }
.orbit-message {
  position: absolute;
  z-index: 5;
  padding: 9px 13px;
  border: 1px solid rgba(124,125,255,.24);
  border-radius: 12px;
  color: #cbd4eb;
  background: rgba(7,9,22,.74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px rgba(0,0,0,.24);
  font-size: .66rem;
}
.message-one { left: -3%; top: 27%; }
.message-two { right: -5%; top: 34%; }
.message-three { right: 4%; bottom: 18%; }

.elisa-showcase {
  position: relative;
  width: min(calc(100% - 48px), 1320px);
  margin: 80px auto 150px;
  scroll-margin-top: 120px;
}
.elisa-shell {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 6rem;
  align-items: center;
  padding: 64px;
  overflow: hidden;
  border: 1px solid rgba(121,111,255,.2);
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0, rgba(39,125,255,.14), transparent 35%),
    linear-gradient(145deg, rgba(19,20,45,.9), rgba(7,8,20,.88));
  box-shadow: 0 35px 100px rgba(0,0,0,.35);
}
.section-label {
  display: block;
  margin-bottom: 18px;
  color: #7f8db3;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .15em;
}
.elisa-copy { text-align: left; }
.elisa-copy h2 {
  margin: 0;
  color: #f5f7ff;
  font-size: clamp(2rem, 3.2vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.elisa-copy > p { max-width: 610px; color: #aab2c8; font-size: .94rem; }
.elisa-features { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; }
.elisa-features span {
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #bec8e1;
  background: rgba(255,255,255,.03);
  font-size: .68rem;
}
.elisa-preview {
  padding: 15px;
  border: 1px solid rgba(111,129,255,.25);
  border-radius: 22px;
  background: rgba(4,5,14,.7);
  transform: rotateY(-4deg) rotateX(2deg);
  box-shadow: 0 28px 70px rgba(0,0,0,.4);
}
.preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 3px 14px;
}
.preview-bar span { width: 7px; height: 7px; border-radius: 50%; background: #323853; }
.preview-bar strong { margin-left: auto; color: var(--jcode-green); font-size: .58rem; letter-spacing: .1em; }
.preview-contact {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}
.preview-contact img {
  width: 41px; height: 41px;
  object-fit: contain;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--jcode-blue), var(--jcode-purple));
  padding: 6px;
  box-sizing: border-box;
}
.preview-contact small { display: block; color: #858da6; font-size: .62rem; }
.preview-chat { display: grid; gap: 10px; padding: 22px 4px 4px; }
.preview-chat p {
  max-width: 82%;
  margin: 0;
  padding: 11px 13px;
  border-radius: 13px;
  color: #d4daf0;
  font-size: .7rem;
  animation: chat-bubble-in .35s ease;
}
@keyframes chat-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.preview-chat .client { justify-self: end; background: rgba(37,83,151,.55); border-bottom-right-radius: 4px; }
.preview-chat .elisa { background: rgba(255,255,255,.06); border-bottom-left-radius: 4px; }
.typing-dots { display: flex; gap: 4px; width: fit-content; }
.typing-dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--jcode-cyan); animation: dot-pulse 1s infinite alternate; }
.typing-dots b:nth-child(2) { animation-delay: .2s; }
.typing-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pulse { to { opacity: .25; transform: translateY(-3px); } }

.solutions-section {
  max-width: 1320px;
  margin: 0 auto 130px;
  text-align: left;
  scroll-margin-top: 120px;
}
.solutions-section h2 {
  max-width: 720px;
  margin: 14px 0 10px;
  color: #f5f7ff;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.2;
}
.solutions-section > p { max-width: 620px; color: #aab2c8; font-size: .96rem; margin-bottom: 34px; }
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.solution-card {
  padding: 24px;
  border: 1px solid rgba(121,111,255,.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(39,125,255,.1), transparent 35%),
    linear-gradient(145deg, rgba(19,20,45,.9), rgba(7,8,20,.88));
}
.solution-card-image {
  margin: -24px -24px 20px;
  height: 170px;
  overflow: hidden;
  border-radius: 22px 22px 0 0;
}
.solution-card-image img { width: 100%; height: 100%; object-fit: cover; }
.solution-card h3 { margin: 0 0 10px; color: #fff; font-size: 1.15rem; }
.solution-card > p { color: #aab2c8; font-size: .86rem; line-height: 1.55; margin-bottom: 22px; }
.solution-card .hero-buttons {
  flex-direction: column;
  margin-bottom: 0;
}
.solution-card .hero-buttons .cta-button {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
}

/* A modal original usa content-box: o padding não entra no cálculo do
   max-height:90vh (definido em style.css), o que fazia a caixa estourar a
   tela. box-sizing:border-box faz o max-height valer para a caixa inteira. */
#serviceModal .modal-content {
  box-sizing: border-box;
  padding: 28px;
}
#serviceModal .modal-content img {
  width: calc(100% + 56px);
  max-width: calc(100% + 56px);
  height: 200px;
  margin: -28px -28px 22px;
  border-radius: 15px 15px 0 0;
  object-fit: cover;
}
#serviceModal .modal-content h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 16px 0;
}
#serviceModal .modal-content #modalDescription {
  font-size: .92rem;
  line-height: 1.65;
  margin-bottom: 26px;
}
#serviceModal .service-benefits {
  padding: 20px 22px;
}
#serviceModal .service-benefits h3 {
  font-size: 1rem;
  margin-bottom: 12px;
}
#serviceModal #modalBenefitsList li {
  font-size: .86rem;
  line-height: 1.55;
}
@media (max-width: 768px) {
  #serviceModal .modal-content { padding: 20px; }
  #serviceModal .modal-content img {
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
    height: 150px;
    margin: -20px -20px 18px;
  }
  #serviceModal .modal-content h2 { font-size: 1.3rem; }
}

.portfolio-section.container { max-width: 1320px; margin: 2.5em auto; }
.portfolio-hero {
  border-radius: 24px;
  background: linear-gradient(110deg, rgba(138,43,226,.86), rgba(0,123,255,.86));
  padding: 34px 24px;
  margin-bottom: 24px;
}
.portfolio-hero h2 { font-size: 1.9em; margin-bottom: 8px; }
.portfolio-hero p { font-size: .98em; }

/* Deixa explícito que parte dos casos é experiência do fundador como
   contratado, e não contrato prestado pela JCode AI. */
.portfolio-disclaimer {
  max-width: 780px;
  margin: 14px auto 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.86);
  font-size: .78em !important;
  line-height: 1.6;
}
.portfolio-disclaimer strong { color: #fff; font-weight: 600; }

.experience-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(159,140,255,.42);
  border-radius: 999px;
  background: rgba(122,102,255,.14);
  color: #c3b6ff;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.4;
}
.project-card { background: rgba(26,28,55,.72); -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px); }

/* Mesma escala compacta do .portfolio-hero, para consistência entre seções */
#sobre-mim .cta-final {
  padding: 34px 24px;
  margin-top: 24px;
}
#sobre-mim .cta-final h2 { font-size: 1.9em; margin-bottom: 8px; }
#sobre-mim .cta-final p { font-size: .98em; margin-bottom: 20px; }

.project-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-size: 2.4rem;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(22,132,255,.18), rgba(138,66,232,.14));
  color: var(--jcode-cyan);
}
.project-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.contact-section.container { max-width: 720px; margin: 3em auto; }
.contact-section .form-container {
  border-radius: 24px;
  background: rgba(30,30,62,.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 30px;
}
.contact-section .contact-header { margin-bottom: 20px; }
.contact-header h2 { font-size: 1.9em; margin-bottom: 8px; }
.contact-header p { font-size: .96em; }

#contactForm .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section textarea {
  margin-bottom: 12px;
  padding: 13px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  color: #d4daf0;
  font-size: .88rem;
  font-family: inherit;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.contact-section input::placeholder,
.contact-section textarea::placeholder { color: #7f8db3; }
.contact-section input:focus,
.contact-section textarea:focus {
  outline: none;
  border-color: var(--jcode-cyan);
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 0 3px rgba(34,199,255,.14);
}
.contact-section textarea { min-height: 96px; }

.contact-section .button-group { margin-top: 4px; }
.contact-section .form-btn {
  max-width: none;
  width: 100%;
  padding: 13px;
  border-radius: 14px;
  font-size: .9rem;
}
.contact-section .btn-submit {
  background: linear-gradient(105deg, var(--jcode-blue), var(--jcode-purple));
  box-shadow: 0 12px 35px rgba(87,69,220,.25);
}
.contact-section .btn-submit:hover { box-shadow: 0 18px 50px rgba(87,69,220,.42); }

.contact-form-status {
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(37,211,102,.35);
  border-radius: 12px;
  background: rgba(37,211,102,.1);
  color: #cdeede;
  font-size: .86rem;
  text-align: center;
}

@media (max-width: 640px) {
  #contactForm .form-row { grid-template-columns: 1fr; }
  .contact-section .form-container { padding: 22px; }
}
.site-footer { position: relative; z-index: 2; background: rgba(4,5,14,.82); -webkit-backdrop-filter: blur(14px);
 backdrop-filter: blur(14px); }

.enhance-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.enhance-reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  header nav { padding-inline: 1.5rem; }
  nav ul { gap: 20px; }
  .hero-content { gap: 2rem; }
  .hero-text h1 { font-size: clamp(2.4rem, 5vw, 3.4rem); }
  .elisa-shell { gap: 3rem; padding: 45px; }
}

@media (max-width: 900px) {
  header::after { display: none; }
  .logo img { width: 190px; height: 52px; }
  .hero { min-height: auto; }
  .hero-content { flex-direction: column; margin-top: 1.5em; text-align: left; }
  .hero-text { max-width: 100%; }
  .hero-text p { margin-inline: 0; }
  .hero-buttons, .hero-metrics { justify-content: flex-start; }
  .hero-image { order: 0; max-width: 100%; min-height: 430px; }
  .elisa-orbit { width: min(440px, 80vw); }
  .solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .elisa-shell { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .hero-content, .elisa-showcase { width: min(calc(100% - 28px), 1320px); }
  .hero-text { text-align: left; }
  .hero-text h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
  .hero-buttons {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .hero-buttons .cta-button {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    text-align: center;
  }
  .hero-metrics { display: none; }
  .hero-image { min-height: 360px; }
  .elisa-core { width: 125px; height: 125px; border-radius: 36px; }
  .orbit-message { font-size: .58rem; }
  .message-one { left: 0; }
  .message-two { right: 0; }
  .elisa-showcase { margin: 50px auto 100px; }
  .elisa-shell { padding: 32px 20px; border-radius: 22px; }
  .elisa-copy h2 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .elisa-preview { transform: none; }
  .solutions-grid { grid-template-columns: 1fr; }
  .solutions-section { padding-inline: 14px; box-sizing: border-box; }
}

/* ---------------------------------------------- */
/* Página de apresentação da Elisa AI              */
/* ---------------------------------------------- */
.elisa-page-hero {
  max-width: 820px;
  margin: 0 auto;
  padding-top: 2em;
  text-align: left;
}
.elisa-page-hero h1 {
  margin: 14px 0 16px;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.16;
  letter-spacing: -.03em;
  background: linear-gradient(120deg, #fff 10%, #c8d8ff 48%, #a980ef);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.elisa-page-hero p { color: #aab2c8; font-size: 1rem; max-width: 660px; margin-bottom: 26px; }
.elisa-page-hero .hero-buttons { justify-content: flex-start; }

.elisa-brand-visual {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 56px;
}
.elisa-brand-media {
  display: grid;
  place-items: center;
  padding: 40px;
}
.elisa-brand-media img {
  width: 100%;
  max-width: 560px;
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: contain;
}
.elisa-brand-copy { text-align: left; }
.elisa-wordmark {
  position: relative;
  display: inline-block;
  margin-bottom: 14px;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.elisa-wordmark i {
  position: absolute;
  top: -2px;
  right: -14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jcode-cyan);
  box-shadow: 0 0 10px var(--jcode-cyan);
}
.elisa-brand-copy h2 {
  margin: 0 0 16px;
  color: #f5f7ff;
  font-size: clamp(1.6rem, 2.8vw, 2.3rem);
  line-height: 1.22;
}
.elisa-brand-copy p { color: #aab2c8; font-size: .96rem; margin-bottom: 22px; max-width: 480px; }
.whatsapp-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #e4e8f5;
  font-size: .82rem;
}
.whatsapp-badge i { color: #25D366; font-size: 1rem; }

@media (max-width: 900px) {
  .elisa-brand-visual { grid-template-columns: 1fr; text-align: center; }
  .elisa-brand-copy { text-align: center; }
  .elisa-brand-copy p { margin-inline: auto; }
}

.pains-section, .elisa-explain, .features-section, .how-it-works {
  max-width: 1100px;
  margin: 0 auto 56px;
  text-align: left;
}
.pains-section h2, .features-section h2, .how-it-works h2 {
  max-width: 700px;
  margin: 0 0 30px;
  color: #f5f7ff;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.25;
}
.pains-grid, .features-grid, .steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.pain-card, .feature-card, .step-card {
  padding: 24px 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
}
.pain-card i { color: var(--jcode-cyan); font-size: 1.2rem; margin-bottom: 12px; display: block; }
.pain-card p { margin: 0; color: #bec8e1; font-size: .86rem; line-height: 1.5; }

.elisa-explain-text { max-width: 780px; }
.elisa-explain-text h2 {
  margin: 14px 0 18px;
  color: #f5f7ff;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.25;
}
.elisa-explain-text p { color: #aab2c8; font-size: .96rem; margin-bottom: 14px; }

.feature-card i { color: var(--jcode-cyan); font-size: 1.4rem; margin-bottom: 14px; display: block; }
.feature-card h3 { margin: 0 0 8px; color: #fff; font-size: 1.02rem; }
.feature-card p { margin: 0; color: #bec8e1; font-size: .84rem; line-height: 1.55; }

.step-card { text-align: left; position: relative; padding-top: 72px; }
.step-number {
  position: absolute;
  top: 18px;
  left: 22px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(105deg, var(--jcode-blue), var(--jcode-purple));
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
.step-card p { margin: 0; color: #bec8e1; font-size: .86rem; line-height: 1.55; }

@media (max-width: 900px) {
  .pains-grid, .features-grid, .steps-grid { grid-template-columns: 1fr; }
  .elisa-page-hero .hero-buttons {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .elisa-page-hero .hero-buttons .cta-button {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    text-align: center;
  }
  .elisa-page-hero, .pains-section, .elisa-explain, .features-section, .how-it-works,
  .elisa-brand-visual {
    padding-inline: 20px;
    box-sizing: border-box;
  }
  .elisa-brand-media { padding: 24px 0; }
}

/* ---------------------------------------------- */
/* Página de Planos (planos.html)                 */
/* ---------------------------------------------- */
.plans-hero {
  max-width: 780px;
  margin: 0 auto;
  padding-top: 2em;
  text-align: left;
}
.plans-hero h1 {
  margin: 14px 0 10px;
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -.03em;
  color: #f5f7ff;
}
.plans-hero p { color: #aab2c8; font-size: .96rem; max-width: 620px; }

.quiz-shell {
  max-width: 900px;
  margin: 40px auto 90px;
  padding: 44px;
  text-align: left;
  border: 1px solid rgba(121,111,255,.2);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(19,20,45,.9), rgba(7,8,20,.88));
  box-shadow: 0 35px 100px rgba(0,0,0,.35);
}
.quiz-progress {
  height: 4px;
  margin-bottom: 30px;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.quiz-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--jcode-blue), var(--jcode-purple));
  transition: width .35s ease;
}
.quiz-step-label {
  display: block;
  margin-bottom: 10px;
  color: #7f8db3;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.quiz-step h2 {
  margin: 0 0 26px;
  color: #f5f7ff;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  text-align: left;
}
.quiz-step h2 small {
  display: block;
  margin-top: 6px;
  color: #7f8db3;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.quiz-option {
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  color: #d4daf0;
  font-family: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, transform .2s ease;
}
.quiz-option:hover { border-color: rgba(139,118,255,.5); transform: translateY(-2px); }
.quiz-option.active {
  border-color: var(--jcode-cyan);
  background: linear-gradient(105deg, rgba(22,132,255,.18), rgba(138,66,232,.18));
  color: #fff;
}

.quiz-result-sub { color: #aab2c8; font-size: .88rem; max-width: 640px; margin-bottom: 22px; }
.billing-toggle { display: inline-flex; gap: 8px; padding: 5px; margin-bottom: 30px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.03); }
.billing-option {
  padding: 9px 18px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #aab2c8;
  font-family: inherit;
  font-size: .78rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.billing-option.active {
  background: linear-gradient(105deg, var(--jcode-blue), var(--jcode-purple));
  color: #fff;
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.plan-card {
  padding: 26px 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.025);
  text-align: left;
}
.plan-card h3 { margin: 0 0 8px; color: #fff; font-size: 1.1rem; }
.plan-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.plan-price .price-current { font-size: 1.7rem; font-weight: 700; color: #fff; }
.plan-price .price-current small { font-size: .62rem; font-weight: 500; color: #aab2c8; }
.plan-price .price-old {
  color: #7f8db3;
  font-size: .85rem;
  text-decoration: line-through;
}
.plan-cycle-note { margin: 2px 0 16px; color: #7f8db3; font-size: .68rem; }
.plan-specs { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.plan-specs li {
  padding-left: 18px;
  position: relative;
  color: #bec8e1;
  font-size: .78rem;
}
.plan-specs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jcode-cyan);
}
.plan-card .cta-button {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 13px 16px;
  text-align: center;
  justify-content: center;
}
.quiz-restart { margin-top: 30px; }

.quiz-continue { margin-top: 26px; }
.quiz-continue .cta-button {
  min-width: 0;
  box-sizing: border-box;
}
.quiz-continue .cta-button:disabled {
  opacity: .4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.plans-footnote { margin-top: 24px; color: #7f8db3; font-size: .74rem; max-width: 700px; }

.plans-final-cta {
  max-width: 780px;
  margin: 0 auto 110px;
  padding: 60px 40px;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(110deg, rgba(138,43,226,.86), rgba(0,123,255,.86));
}
.plans-final-cta h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.plans-final-cta p { margin: 0 0 26px; color: rgba(255,255,255,.9); font-size: 1rem; }
.plans-final-cta a {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  background: #fff;
  color: #1A1A2E;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease;
}
.plans-final-cta a:hover { transform: translateY(-3px); }

@media (max-width: 900px) {
  .quiz-shell { padding: 30px 22px; margin: 30px auto 60px; width: calc(100% - 28px); box-sizing: border-box; }
  .quiz-options { grid-template-columns: 1fr; }
  .plans-grid { grid-template-columns: 1fr; }
  .plans-hero, .plans-final-cta { margin-inline: 14px; }
  .plans-final-cta { padding: 40px 24px; box-sizing: border-box; width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  #jcode-cosmos { display: none; }
  .shape, .orbit, .elisa-orbit::before, .elisa-core, .typing-dots b, .preview-chat p { animation: none !important; }
  .enhance-reveal { opacity: 1; transform: none; }
}

/* Blur animado é caro para o WebKit em celular — desliga em telas pequenas */
@media (max-width: 768px) {
  .shape { animation: none; filter: blur(36px); }
}

/* ---------------------------------------------- */
/* Página de Privacidade (privacidade.html)        */
/* ---------------------------------------------- */
.legal-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 3em 0 5em;
  text-align: left;
}
.legal-page h1 {
  margin: 14px 0 6px;
  color: #f5f7ff;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  letter-spacing: -.02em;
}
.legal-updated { color: #7f8db3; font-size: .8rem; margin-bottom: 30px; }
.legal-page h2 {
  margin: 40px 0 12px;
  color: #f5f7ff;
  font-size: 1.2rem;
}
.legal-page h3 {
  margin: 22px 0 8px;
  color: #dfe6ff;
  font-size: 1rem;
}
.legal-page p, .legal-page li {
  color: #bec8e1;
  font-size: .92rem;
  line-height: 1.7;
}
.legal-page p { margin: 0 0 14px; }
.legal-page ul { margin: 0 0 14px; padding-left: 20px; }
.legal-page li { margin-bottom: 6px; }
.legal-page a { color: var(--jcode-cyan); }
.legal-page strong { color: #e4e8f5; }

@media (max-width: 768px) {
  .legal-page { padding: 2em 20px 4em; box-sizing: border-box; }
}