:root {
  --ink: #10202d;
  --muted: #5f6d77;
  --line: #dce8e8;
  --soft: #f5fbfa;
  --panel: #ffffff;
  --teal: #008675;
  --teal-2: #16c1a5;
  --teal-3: #e8faf6;
  --night: #01363b;
  --aqua: #bceee5;
  --shadow: 0 24px 70px rgba(16, 32, 45, 0.13);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 10%, rgba(22, 193, 165, 0.12), transparent 34rem),
    linear-gradient(180deg, #ffffff 0%, #f7fbfa 45%, #ffffff 100%);
}

body,
button,
textarea {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
  flex: 0 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 260px 1fr auto;
  gap: 1.5rem;
  align-items: center;
  width: min(100% - 3rem, 1440px);
  margin: 0 auto;
  padding: 1.35rem 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.brand-mark {
  position: relative;
  display: grid;
  gap: 0.18rem;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0.26rem;
}

.brand-mark span {
  display: block;
  width: 100%;
  border-radius: 0.5rem 1rem 1rem 0.5rem;
  background: linear-gradient(135deg, #2fd4bd, #006d77);
}

.brand-mark span:nth-child(2) {
  width: 74%;
}

.brand-mark span:nth-child(3) {
  width: 43%;
}

.brand strong {
  display: block;
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 0.95;
}

.brand small {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.nav {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  min-width: 0;
  max-width: 100%;
  color: #081721;
  font-size: 0.95rem;
  font-weight: 650;
}

.nav a {
  padding: 0.5rem 0;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--teal);
}

.whatsapp,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3.2rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  padding: 0.85rem 1.25rem;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.whatsapp,
.primary {
  color: #fff;
  background: linear-gradient(135deg, #008675, #00675c);
  box-shadow: 0 12px 26px rgba(0, 134, 117, 0.22);
}

.secondary {
  color: var(--night);
  background: #fff;
  border-color: #9fcac5;
}

.ghost {
  color: #dffbf6;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.24);
}

.button:hover,
.button:focus-visible,
.whatsapp:hover,
.whatsapp:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 86, 80, 0.2);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(36rem, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(100% - 3rem, 1440px);
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 4.5rem) 0 3.5rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  max-width: 100%;
  border: 1px solid #8fd8cc;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  color: #006f63;
  background: rgba(232, 250, 246, 0.7);
  font-weight: 750;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 12ch;
  margin: 1.4rem 0 1.15rem;
  font-size: clamp(3.2rem, 6.2vw, 6.6rem);
  line-height: 0.97;
  letter-spacing: 0;
}

h1 span {
  display: block;
  color: var(--teal);
}

.lead {
  max-width: 38rem;
  color: #233644;
  font-size: clamp(1.05rem, 1.4vw, 1.38rem);
  line-height: 1.7;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: clamp(2rem, 4vw, 4rem);
}

.proof-grid article {
  min-width: 0;
}

.proof-grid svg,
.service-grid svg {
  width: 2.3rem;
  height: 2.3rem;
  margin-bottom: 1rem;
  color: var(--teal);
}

.proof-grid h3,
.service-grid h3,
.process-line h3 {
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
  line-height: 1.35;
}

.proof-grid p,
.service-grid p,
.process-line p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-top: 3rem;
}

.hero-media {
  position: relative;
  min-height: 42rem;
}

.hero-media::before {
  content: "";
  position: absolute;
  inset: 0 0 8rem 4rem;
  border-radius: 44% 0 0 44%;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 246, 0.28));
  z-index: 1;
}

.hero-media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 39rem;
  object-fit: cover;
  object-position: 60% center;
  border-radius: 44% 0 0 44%;
  box-shadow: 0 18px 60px rgba(16, 32, 45, 0.1);
}

.mini-card {
  position: absolute;
  right: 3rem;
  bottom: 0;
  z-index: 3;
  width: min(36rem, calc(100% - 4rem));
  border: 1px solid rgba(16, 32, 45, 0.08);
  border-radius: 1.2rem;
  padding: 1.7rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.mini-card h2 {
  margin-bottom: 0.55rem;
  font-size: 1.25rem;
}

.mini-card p {
  color: #40505b;
  line-height: 1.55;
}

.voice-row {
  display: grid;
  grid-template-columns: 4.4rem 1fr auto;
  gap: 1.1rem;
  align-items: center;
  margin-top: 1.2rem;
}

.mic-dot {
  display: grid;
  place-items: center;
  width: 4.4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #20d1b2, #008675);
}

.mic-dot svg {
  width: 2rem;
  height: 2rem;
}

.wave {
  display: block;
  height: 2.8rem;
  border-radius: 0.4rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 0.34rem, rgba(255, 255, 255, 0) 0.34rem 0.54rem),
    linear-gradient(90deg, #13a896, #20d1b2 55%, rgba(32, 209, 178, 0.08));
  mask: url("data:image/svg+xml,%3Csvg width='480' height='58' viewBox='0 0 480 58' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='black' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M4 31V28M15 34V25M26 40V19M37 47V12M48 38V21M59 51V8M70 43V16M81 35V24M92 46V13M103 39V20M114 52V7M125 43V16M136 35V24M147 47V12M158 40V19M169 33V26M180 45V14M191 37V22M202 51V8M213 42V17M224 35V24M235 47V12M246 39V20M257 32V27M268 44V15M279 36V23M290 50V9M301 42V17M312 34V25M323 46V13M334 38V21M345 31V28M356 41V18M367 36V23M378 48V11M389 40V19M400 33V26M411 38V21M422 35V24M433 31V28M444 33V26M455 30V29M466 31V28M476 30V29'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.mini-tags,
.voice-benefits,
.why-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.mini-tags {
  margin-top: 1.2rem;
}

.mini-tags span,
.voice-benefits span {
  border-radius: 999px;
  padding: 0.5rem 0.75rem;
  color: #006b61;
  background: #edf8f6;
  font-size: 0.82rem;
  font-weight: 700;
}

.section {
  width: min(100% - 3rem, 1340px);
  margin: 0 auto;
  padding: clamp(3.5rem, 6vw, 6rem) 0 0;
}

.section-head {
  margin-bottom: 1.8rem;
}

.section h2,
.voice-lab h2,
.about h2 {
  margin-bottom: 0;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.13;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.service-grid article {
  min-height: 15.5rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  padding: 1.45rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 15px 40px rgba(16, 32, 45, 0.05);
}

.process-line {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2rem;
  text-align: center;
}

.process-line article {
  position: relative;
}

.process-line article:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.2rem;
  left: calc(50% + 3rem);
  width: calc(100% - 3rem);
  border-top: 2px dashed #cbdcda;
}

.process-line span {
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.35rem;
  border: 1px solid #c6e9e3;
  border-radius: 50%;
  color: var(--night);
  background: radial-gradient(circle, #fff 45%, #effaf8 46%);
  box-shadow: 0 10px 24px rgba(0, 134, 117, 0.12);
  font-size: 1.5rem;
  font-weight: 850;
}

.voice-lab {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: min(100% - 3rem, 1340px);
  margin: clamp(4rem, 7vw, 7rem) auto 0;
  border-radius: 0.8rem;
  padding: clamp(2rem, 4vw, 4rem);
  color: #fff;
  background:
    radial-gradient(circle at 54% 50%, rgba(38, 226, 188, 0.32), transparent 13rem),
    linear-gradient(135deg, #013039, #00514c);
  box-shadow: 0 28px 70px rgba(1, 48, 57, 0.22);
}

.voice-lab p {
  color: #d9fffa;
  line-height: 1.75;
  font-size: 1.05rem;
}

.voice-benefits {
  margin-top: 2rem;
}

.voice-benefits span {
  color: #e8fffb;
  background: rgba(255, 255, 255, 0.1);
}

.voice-console {
  display: grid;
  gap: 1rem;
}

.record-button {
  display: grid;
  place-items: center;
  justify-self: center;
  width: 6.8rem;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle, #25d4b2 0 45%, rgba(37, 212, 178, 0.26) 46% 66%, rgba(37, 212, 178, 0.12) 67%);
  box-shadow: 0 0 0 1.4rem rgba(37, 212, 178, 0.08), 0 0 0 3rem rgba(37, 212, 178, 0.05);
  cursor: pointer;
}

.record-button svg {
  width: 2.6rem;
  height: 2.6rem;
}

.record-button.is-recording {
  animation: pulse 1.2s ease-in-out infinite;
}

textarea {
  width: 100%;
  min-height: 9rem;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 1rem;
  padding: 1.1rem;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

textarea:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(22, 193, 165, 0.45);
  outline-offset: 3px;
}

.console-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.analysis {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0.9rem;
  padding: 1.15rem;
  background: rgba(255, 255, 255, 0.1);
}

.analysis h3 {
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

.analysis p,
.analysis li {
  color: #e6fffb;
  line-height: 1.6;
}

.analysis ul {
  margin: 0.7rem 0 0;
  padding-left: 1.2rem;
}

.why-strip {
  gap: 0;
  justify-content: space-between;
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.72);
}

.why-strip span {
  flex: 1 1 11rem;
  min-height: 4.4rem;
  border-left: 1px solid var(--line);
  padding: 1rem 1.2rem;
  color: #263a45;
  font-weight: 650;
  line-height: 1.45;
}

.why-strip span:first-child {
  border-left: 0;
}

.about {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.about p {
  max-width: 56rem;
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100% - 3rem, 1340px);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 2rem 0;
  color: var(--muted);
}

.footer p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .nav {
    order: 3;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.25rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-media {
    min-height: 38rem;
  }

  .service-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-line {
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
  }

  .process-line article:not(:last-child)::after {
    display: none;
  }

  .process-line span {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .site-header,
  .hero,
  .section,
  .voice-lab,
  .footer {
    width: min(100% - 1.25rem, 1340px);
  }

  .site-header {
    grid-template-columns: 1fr;
    gap: 0.9rem;
    padding-top: 0.8rem;
  }

  .top-cta {
    width: 100%;
  }

  .hero {
    padding-top: 1.6rem;
  }

  h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 10.8vw, 2.85rem);
  }

  .pill {
    font-size: 0.9rem;
  }

  .proof-grid,
  .service-grid,
  .process-line,
  .voice-lab {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .console-actions,
  .button {
    width: 100%;
  }

  .hero-media {
    min-height: 31rem;
  }

  .hero-media::before {
    inset: 0 0 7rem 0;
  }

  .hero-media img {
    height: 24rem;
    border-radius: 2rem 2rem 0 2rem;
    object-position: 58% center;
  }

  .mini-card {
    right: 0.75rem;
    bottom: 0;
    width: calc(100% - 1.5rem);
    padding: 1rem;
  }

  .voice-row {
    grid-template-columns: 3.5rem 1fr auto;
  }

  .mic-dot {
    width: 3.5rem;
  }

  .service-grid article {
    min-height: auto;
  }

  .about,
  .footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}