/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body { margin: 0; }
/* height:auto is required: without it the width/height attributes act as a fixed
   CSS height, so max-width shrinks the width and the image stretches vertically. */
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }

/* ===== Design tokens ===== */
:root {
  --color-primary: #046288;
  --color-primary-dark: #034b68;
  --color-accent: #03b4ac;
  --color-accent-dark: #028d86;
  --color-bg: #ffffff;
  --color-bg-alt: #f2f9fa;
  --color-text: #1e293b;
  --color-text-muted: #4b5f6e;
  --color-border: #e1edf0;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 2px 8px rgba(4, 98, 136, 0.08);
  --shadow-md: 0 12px 32px rgba(4, 98, 136, 0.12);
  --shadow-lg: 0 24px 48px rgba(4, 98, 136, 0.18);
  --transition-base: 250ms ease;
  --font-base: 'Poppins', system-ui, -apple-system, sans-serif;
  --container-width: 1180px;
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 16px;
}

h1, h2, h3, h4 { font-family: var(--font-base); font-weight: 700; line-height: 1.25; margin: 0 0 16px; color: var(--color-primary); }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 16px; color: var(--color-text-muted); }

.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  border: 2px solid transparent; transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  min-height: 44px;
}
.btn--primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--color-accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--outline { background: transparent; border-color: #fff; color: #fff; }
.btn--outline:hover { background: rgba(255,255,255,0.15); transform: translateY(-2px); }
.btn--sm { padding: 10px 20px; font-size: 0.9rem; }
.btn--block { width: 100%; }
.btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* ===== Navbar ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent; transition: background var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base);
  padding: 18px 0;
}
.navbar--scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
  padding: 12px 0;
}
.navbar__inner { display: flex; align-items: center; justify-content: space-between; }
.navbar__brand { display: flex; align-items: center; gap: 12px; }
/* The icon's ear silhouette is navy, the same as the unscrolled navbar's
   background, so it visually disappeared until scrolling revealed the white
   bar. Two stacked variants (light for the transparent state, original for
   the white scrolled state) cross-fade instead. */
.navbar__logo-wrap { position: relative; display: grid; height: 48px; }
.navbar__logo { grid-area: 1 / 1; height: 48px; width: auto; transition: opacity var(--transition-base); }
.navbar__logo--dark { opacity: 0; }
.navbar--scrolled .navbar__logo--light { opacity: 0; }
.navbar--scrolled .navbar__logo--dark { opacity: 1; }
.navbar__brand-text { display: flex; flex-direction: column; line-height: 1.15; font-weight: 700; font-size: 1.05rem; color: #fff; transition: color var(--transition-base); }
.navbar__brand-text small { font-weight: 500; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #7fe3dc; transition: color var(--transition-base); }
.navbar--scrolled .navbar__brand-text { color: var(--color-primary); }
.navbar--scrolled .navbar__brand-text small { color: var(--color-accent-dark); }
.navbar__toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; background: transparent; border: none; padding: 0;
}
.navbar__toggle span { display: block; width: 26px; height: 2px; background: #fff; transition: background var(--transition-base), transform var(--transition-base), opacity var(--transition-base); }
.navbar--scrolled .navbar__toggle span { background: var(--color-primary); }
.navbar__menu { display: flex; align-items: center; gap: 28px; }
.navbar__menu a:not(.btn) { font-weight: 500; color: #fff; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color var(--transition-base), border-color var(--transition-base); }
.navbar__menu a:not(.btn):hover { border-color: var(--color-accent); }
.navbar--scrolled .navbar__menu a:not(.btn) { color: var(--color-primary); }

@media (max-width: 860px) {
  .navbar__toggle { display: flex; }
  .navbar__menu {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: #fff; box-shadow: var(--shadow-md); padding: 16px 24px; gap: 4px;
    max-height: 0; overflow: hidden; opacity: 0; transition: max-height var(--transition-base), opacity var(--transition-base);
  }
  .navbar__menu--open { max-height: 400px; opacity: 1; padding: 20px 24px; }
  /* Mobile dropdown always has a white background, so its links must stay dark regardless of scroll state */
  .navbar__menu a:not(.btn) { color: var(--color-primary); padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
  .navbar__menu .btn { margin-top: 8px; }
}

/* ===== Hero ===== */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: #fff; padding: 160px 0 100px;
}
.hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.hero__eyebrow { display: inline-block; background: rgba(3, 180, 172, 0.2); color: #7fe3dc; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; margin-bottom: 20px; }
.hero h1 { color: #fff; }
.hero p.hero__lead { color: rgba(255,255,255,0.9); font-size: 1.1rem; max-width: 46ch; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 32px; }
.hero__media { position: relative; }
/* Soft halo so the cut-out sits on the gradient instead of floating on it */
.hero__media::before {
  content: ""; position: absolute; z-index: 1;
  left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 108%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(3, 180, 172, 0.22) 0%, rgba(3, 180, 172, 0.08) 45%, transparent 70%);
  pointer-events: none;
}
/* The subject's torso runs all the way to the bottom edge of the PNG, so without
   a mask it ends in a hard straight line. Feathering the lower third makes her
   dissolve into the hero instead. border-radius/box-shadow are useless here:
   the corners are already transparent and the shadow would draw a rectangle. */
.hero__media img {
  position: relative; z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,0.86) 80%, rgba(0,0,0,0.4) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 66%, rgba(0,0,0,0.86) 80%, rgba(0,0,0,0.4) 92%, transparent 100%);
}
.hero__wave { position: absolute; inset: 0; opacity: 0.25; z-index: 1; pointer-events: none; }
.hero__wave path { stroke: #7fe3dc; stroke-width: 3; fill: none; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw-wave 3.5s ease-out forwards infinite alternate; }
@keyframes draw-wave { to { stroke-dashoffset: 0; } }
@media (max-width: 860px) {
  .hero { padding: 130px 0 64px; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__cta { justify-content: center; }
  .hero__media { max-width: 320px; margin: 0 auto; }
}

/* ===== Sections ===== */
.section { padding: 88px 0; }
.section--alt { background: var(--color-bg-alt); }
.section__header { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.section__eyebrow { display: inline-block; color: var(--color-accent); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 12px; }

/* ===== Trust bar ===== */
.trust-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: -56px; position: relative; z-index: 5; }
.trust-bar__item {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 24px 16px; text-align: center;
}
.trust-bar__number { font-size: 1.8rem; font-weight: 700; color: var(--color-accent); display: block; }
.trust-bar__label { font-size: 0.9rem; color: var(--color-text-muted); margin: 4px 0 0; }
@media (max-width: 860px) { .trust-bar { grid-template-columns: repeat(2, 1fr); margin-top: 24px; } }

/* ===== Cards / Services grid ===== */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.service-card {
  background: #fff; border-radius: var(--radius-lg); padding: 32px 24px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--color-border);
}
.service-card:hover, .service-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card__icon {
  width: 56px; height: 56px; border-radius: 16px; background: var(--color-bg-alt); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base);
}
.service-card:hover .service-card__icon { transform: rotate(-6deg) scale(1.08); }
.service-card__icon svg { width: 28px; height: 28px; }
.service-card h3 { margin-bottom: 0; font-size: 1.1rem; }
.service-card p { margin-bottom: 0; font-size: 0.95rem; }
.service-card__link { margin-top: auto; font-weight: 600; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; }
.service-card__link svg { width: 16px; height: 16px; transition: transform var(--transition-base); }
.service-card:hover .service-card__link svg { transform: translateX(4px); }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }

/* ===== Why us ===== */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-card { text-align: center; padding: 8px; }
.why-card__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; }
.why-card__icon svg { width: 30px; height: 30px; }
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid { grid-template-columns: 1fr; } }

/* ===== About / Nosotros ===== */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ===== Anatomical ear + sound wave animation (floats on the light background) ===== */
.ear-animation { background: transparent; padding: 0; }
.ear-animation__svg {
  width: 100%; height: auto; display: block; overflow: visible;
  filter: drop-shadow(0 18px 32px rgba(4, 98, 136, 0.16));
}

.ambient-halo { transform-box: fill-box; transform-origin: center; animation: halo-breathe 6s ease-in-out infinite; }
@keyframes halo-breathe {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.09); opacity: 1; }
}

/* Incoming sound streams converging on the ear canal */
.stream {
  fill: none; stroke: url(#streamFade); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 26 34; animation: stream-flow 1.6s linear infinite;
}
.stream--d1 { stroke-width: 2.4; animation-duration: 1.9s; animation-delay: -0.4s; }
.stream--d2 { stroke-width: 3.4; animation-duration: 1.4s; animation-delay: -0.8s; }
.stream--d3 { stroke-width: 2.4; animation-duration: 1.8s; animation-delay: -0.2s; }
.stream--d4 { stroke-width: 3; animation-duration: 2.1s; animation-delay: -1.1s; }
@keyframes stream-flow { to { stroke-dashoffset: -60; } }

/* Ear anatomy: helix, antihelix, concha, tragus, lobe */
.ear-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ear-line--helix { stroke: url(#earNeon); stroke-width: 7; }
.ear-line--soft { stroke: url(#earNeonSoft); stroke-width: 4; }
.ear-line--concha { stroke: url(#earNeonSoft); stroke-width: 4.5; opacity: 0.9; }

/* A bright highlight that travels around the outer rim. Kept narrower than the
   7px helix beneath it so it never spills onto the light background. */
.ear-pulse {
  fill: none; stroke: #eafffd; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 55 900; stroke-dashoffset: 955;
  animation: rim-travel 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes rim-travel {
  0% { stroke-dashoffset: 955; opacity: 0; }
  12% { opacity: 0.85; }
  85% { opacity: 0.85; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Cochlea */
.cochlea-core { transform-box: fill-box; transform-origin: center; animation: core-pulse 2.4s ease-in-out infinite; }
@keyframes core-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.75; }
  50% { transform: scale(1.15); opacity: 1; }
}
.cochlea-spiral { fill: none; stroke: #03b4ac; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
/* Narrower than the spiral it rides on, so the pulse stays inside the teal line */
.cochlea-energy {
  fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20 145; animation: cochlea-travel 2.8s linear infinite;
}
@keyframes cochlea-travel { to { stroke-dashoffset: -165; } }

/* Pressure ripples at the canal entrance */
.ripple {
  fill: none; stroke: #03b4ac; stroke-width: 2; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: ripple-pulse 2.7s ease-out infinite;
}
.ripple--d1 { animation-delay: 0.9s; }
.ripple--d2 { animation-delay: 1.8s; }
@keyframes ripple-pulse {
  0% { transform: scale(0.45); opacity: 0.8; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Ambient sparkles */
.spark { fill: #03b4ac; opacity: 0; animation-name: spark-twinkle; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
@keyframes spark-twinkle {
  0%, 100% { opacity: 0; transform: translateY(0); }
  50% { opacity: 0.55; transform: translateY(-6px); }
}

@media (max-width: 860px) {
  .ear-animation { margin-top: 8px; }
}

/* ===== CTA banner ===== */
.cta-banner {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  color: #fff; text-align: center; padding: 72px 24px; border-radius: var(--radius-lg);
  margin: 0 24px;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: rgba(255,255,255,0.92); max-width: 56ch; margin-left: auto; margin-right: auto; }

/* ===== FAQ accordion ===== */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.faq__question {
  width: 100%; text-align: left; background: none; border: none; padding: 20px 24px; font-weight: 600; color: var(--color-primary);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px;
}
.faq__question svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--transition-base); color: var(--color-accent); }
.faq__item[data-open="true"] .faq__question svg { transform: rotate(180deg); }
.faq__answer { max-height: 0; overflow: hidden; transition: max-height var(--transition-base) ease; }
.faq__answer p { padding: 0 24px 20px; margin: 0; }
.faq__question:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
/* Grid items default to min-width:auto, so the <select>'s intrinsic width (set by
   its longest option) would stretch the column past the viewport on phones. */
.contact-grid > * { min-width: 0; }
.contact-form { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 32px; border: 1px solid var(--color-border); }
.form-group { margin-bottom: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-group label { font-weight: 600; font-size: 0.92rem; color: var(--color-primary); }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; max-width: 100%; min-width: 0;
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-bg-alt);
  transition: border-color var(--transition-base); min-height: 44px;
}
.form-group textarea { min-height: 96px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); }
.contact-info__item { display: flex; gap: 14px; margin-bottom: 24px; align-items: flex-start; }
.contact-info__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-bg-alt); color: var(--color-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info__icon svg { width: 22px; height: 22px; }
/* Inline links here are only ~23px tall on their own; pad them up to a usable target */
.contact-info__item a { display: inline-block; padding: 4px 0; }
.map-frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); margin-top: 8px; }
.map-frame iframe { width: 100%; height: 260px; border: 0; display: block; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ===== Footer ===== */
.footer { background: var(--color-primary-dark); color: rgba(255,255,255,0.85); padding: 64px 0 24px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer__logo { height: 96px; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: 16px; }
/* The global `p` rule sets a dark muted colour that would otherwise win over the
   footer's inherited white and drop contrast to ~1.3:1 on the navy background. */
.footer p { color: rgba(255, 255, 255, 0.82); }
.footer__bottom { color: rgba(255, 255, 255, 0.72); }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a, .footer a { display: inline-block; padding: 6px 0; }
.footer__col a:hover, .footer a:hover { color: var(--color-accent); }
.footer__social { display: flex; gap: 12px; margin-top: 16px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: background var(--transition-base); }
.footer__social a:hover { background: var(--color-accent); }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom { padding-top: 24px; text-align: center; font-size: 0.85rem; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr; } }

/* ===== WhatsApp float button ===== */
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 60px; height: 60px; border-radius: 50%; background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 30px; height: 30px; }

/* ===== Scroll reveal ===== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease, transform 400ms ease; }
.reveal--visible { opacity: 1; transform: translateY(0); }

/* ===== Service page specific ===== */
.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step-card { background: #fff; border-radius: var(--radius-md); padding: 28px 20px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); position: relative; }
.step-card__number { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 700; margin-bottom: 16px; }
@media (max-width: 1024px) { .steps-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps-grid { grid-template-columns: 1fr; } }

.audience-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.audience-list li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: var(--radius-md); padding: 18px 20px; border: 1px solid var(--color-border); }
.audience-list li svg { width: 22px; height: 22px; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 700px) { .audience-list { grid-template-columns: 1fr; } }

.service-hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: #fff; padding: 150px 0 72px; text-align: center; }
.service-hero h1 { color: #fff; max-width: 20ch; margin: 0 auto 16px; }
.service-hero p { color: rgba(255,255,255,0.9); max-width: 60ch; margin: 0 auto 32px; }
.breadcrumb { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-bottom: 20px; }
/* inline-block + padding lifts these from 19px to a tappable height */
.breadcrumb a { text-decoration: underline; display: inline-block; padding: 4px 2px; }

/* ===== Testimonials: 3D perspective carousel ===== */
.testimonials { overflow: hidden; }

/* Card height drives the stage height so the two can never drift apart */
.tcarousel { position: relative; --tcard-h: 340px; }
.tcarousel__stage { position: relative; height: calc(var(--tcard-h) + 44px); perspective: 1500px; perspective-origin: 50% 45%; }

.tcard {
  position: absolute; top: 0; left: 50%;
  width: min(470px, 82vw); height: var(--tcard-h);
  padding: 34px 32px 26px;
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 18px;
  pointer-events: none; will-change: transform, opacity;
  transition: transform 750ms cubic-bezier(0.22, 0.85, 0.28, 1), opacity 600ms ease, box-shadow 600ms ease;
}
.tcard[data-pos="0"]  { transform: translateX(-50%)  translateZ(0)      rotateY(0deg)    scale(1);    opacity: 1;    z-index: 5; box-shadow: var(--shadow-lg); pointer-events: auto; }
.tcard[data-pos="-1"] { transform: translateX(-116%) translateZ(-190px) rotateY(26deg)   scale(0.94); opacity: 0.5;  z-index: 3; }
.tcard[data-pos="1"]  { transform: translateX(16%)   translateZ(-190px) rotateY(-26deg)  scale(0.94); opacity: 0.5;  z-index: 3; }
.tcard[data-pos="-2"] { transform: translateX(-168%) translateZ(-380px) rotateY(34deg)   scale(0.88); opacity: 0.18; z-index: 1; }
.tcard[data-pos="2"]  { transform: translateX(68%)   translateZ(-380px) rotateY(-34deg)  scale(0.88); opacity: 0.18; z-index: 1; }
.tcard[data-pos="hidden"] { transform: translateX(-50%) translateZ(-520px) scale(0.8); opacity: 0; z-index: 0; }

.tcard__mark { position: absolute; top: 20px; right: 24px; width: 34px; height: 34px; color: var(--color-accent); opacity: 0.15; }

/* "Voice signature": a waveform unique to each person, replacing a stock photo.
   It only comes alive on the active card, as if that person were speaking. */
.tcard__wave { display: flex; align-items: center; gap: 3px; height: 44px; }
.tcard__wave span {
  flex: 1; min-width: 0; height: 100%; border-radius: 3px;
  background: linear-gradient(180deg, var(--color-accent), var(--color-primary));
  transform: scaleY(var(--h)); opacity: 0.28; transition: opacity 500ms ease;
}
.tcard[data-pos="0"] .tcard__wave span {
  opacity: 1;
  animation: bar-dance 1.15s ease-in-out infinite alternate;
  animation-delay: var(--d);
}
@keyframes bar-dance {
  from { transform: scaleY(var(--h)); }
  to   { transform: scaleY(calc(var(--h) * 1.55)); }
}

.tcard__quote { flex: 1; margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--color-text); }
.tcard__meta { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.tcard__avatar {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  color: #fff; font-weight: 700; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.tcard__who { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.tcard__who strong { color: var(--color-primary); font-size: 0.97rem; }
.tcard__who small { color: var(--color-text-muted); font-size: 0.79rem; }
.tcard__chip {
  margin-left: auto; flex-shrink: 0; padding: 6px 13px; border-radius: 999px;
  background: var(--color-bg-alt); color: var(--color-primary); border: 1px solid var(--color-border);
  font-size: 0.74rem; font-weight: 600; white-space: nowrap;
}

.tcarousel__controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 26px; }
.tcarousel__btn {
  width: 48px; height: 48px; border-radius: 50%; background: #fff;
  border: 1.5px solid var(--color-border); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.tcarousel__btn svg { width: 22px; height: 22px; }
.tcarousel__btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); }
.tcarousel__btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.tcarousel__dots { display: flex; align-items: center; gap: 10px; }
.tcarousel__dot {
  position: relative; width: 10px; height: 10px; padding: 0; border: none; border-radius: 999px;
  background: rgba(4, 98, 136, 0.22);
  transition: background var(--transition-base), width var(--transition-base);
}
/* Keeps the visual dot small while meeting the 44px touch-target minimum */
.tcarousel__dot::after { content: ""; position: absolute; inset: -17px -8px; }
.tcarousel__dot.is-active { width: 30px; background: var(--color-accent); }
.tcarousel__dot:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }

@media (max-width: 760px) { .tcarousel { --tcard-h: 400px; } .tcard { padding: 28px 24px 22px; } }
@media (max-width: 460px) { .tcarousel { --tcard-h: 440px; } .tcard__chip { display: none; } }

/* ===== Hearing self-test ===== */
.htest {
  max-width: 720px; margin: 0 auto; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); overflow: hidden;
}
.htest__bar { height: 5px; background: var(--color-bg-alt); }
.htest__bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); transition: width 350ms ease; }

.htest__body { position: relative; }
.htest__panel { display: none; padding: 44px 40px; text-align: center; animation: panel-in 350ms ease both; }
.htest__panel.is-active { display: block; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.htest__hero-icon { width: 64px; height: 64px; margin: 0 auto 18px; color: var(--color-accent); }
.htest__panel h3 { font-size: 1.35rem; margin-bottom: 12px; }
.htest__note { font-size: 0.8rem; color: var(--color-text-muted); margin: 18px 0 0; }
.htest__step { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; }
.htest__question { max-width: 34ch; margin: 0 auto 28px; line-height: 1.45; }

.htest__options { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin: 0 auto; }
.htest__option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; padding: 14px 22px;
  background: var(--color-bg-alt); border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-weight: 600; color: var(--color-primary); text-align: left;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base), color var(--transition-base);
}
.htest__option svg { width: 18px; height: 18px; opacity: 0; transform: translateX(-6px); transition: opacity var(--transition-base), transform var(--transition-base); }
.htest__option:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); }
.htest__option:hover svg { opacity: 1; transform: translateX(0); }
.htest__option:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

.htest__back {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; min-height: 44px; padding: 0 8px;
  background: none; border: none; color: var(--color-text-muted); font-weight: 600; font-size: 0.9rem;
  transition: color var(--transition-base);
}
.htest__back svg { width: 16px; height: 16px; }
.htest__back:hover { color: var(--color-primary); }
.htest__back:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* Result */
.htest__gauge { position: relative; max-width: 280px; margin: 0 auto 4px; }
.htest__gauge svg { width: 100%; height: auto; display: block; overflow: visible; }
.htest__gauge-track { fill: none; stroke: var(--color-bg-alt); stroke-width: 18; stroke-linecap: round; }
.htest__gauge-fill {
  fill: none; stroke: url(#gaugeFill); stroke-width: 18; stroke-linecap: round;
  transition: stroke-dashoffset 1100ms cubic-bezier(0.22, 0.85, 0.28, 1);
}
.htest__level {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font-size: 1.15rem; font-weight: 700; color: var(--color-primary); white-space: nowrap;
}
.htest__result-title { max-width: 26ch; margin: 18px auto 12px; }
.htest__result-text { max-width: 46ch; margin: 0 auto; }
.htest__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.htest__restart { background: transparent; border: 2px solid var(--color-border); color: var(--color-primary); }
.htest__restart:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.htest__disclaimer { max-width: 52ch; margin: 22px auto 0; }

@media (max-width: 560px) {
  .htest__panel { padding: 34px 22px; }
  .htest__question { font-size: 1.15rem; }
}

/* ===== Mobile spacing pass ===== */
@media (max-width: 700px) {
  .section { padding: 60px 0; }
  .section__header { margin-bottom: 34px; }
  .cta-banner { margin: 0; padding: 52px 24px; }
  .container { padding: 0 20px; }
  .contact-form { padding: 24px 20px; }
  .trust-bar { gap: 14px; }
  .trust-bar__item { padding: 20px 12px; }
}