/* ==========================================================================
   Laboratorio Clínico Guzmán — landing page
   Design tokens transcribed from "Landing Lab Guzman.dc.html"
   ========================================================================== */

:root {
  /* --- Brand primitives (from the logo; decorative use only below) ---- */
  --ink-900: #062B4A;
  --ink-800: #0B4E86;
  --ink-700: #0E3352;
  --ink-600: #264B67;
  --body:    #456B87;
  --body-2:  #3D5F79;

  /* --- Semantic text roles -------------------------------------------
     Every value here is verified against the lightest surface it can land
     on (#EAF7FB) at WCAG AA. Change the role, not the call site. */
  --text-primary:      var(--ink-900);
  --text-body:         var(--body);
  --text-secondary:    #4F6E88;   /* 5.36:1 on white, 5.00:1 on #F2F8FC */
  --text-tertiary:     #5A7488;   /* 4.86:1 on white, 4.57:1 on #F2F8FC */
  --text-accent:       #00719B;   /* 5.48:1 on white, 5.00:1 on #EAF7FB */
  --text-link:         #0B63C5;
  --text-link-hover:   #084C99;   /* 8.39:1 — hover must not lose contrast */

  /* On brand-coloured surfaces: explicit colours, never alpha chains,
     tinted from the surface hue rather than gray. */
  --text-on-brand:     #ffffff;
  --text-on-brand-2:   #CFF2F8;   /* 5.35:1 on the CTA glass */
  --text-on-ink:       #9FC2DA;   /* 7.71:1 on --ink-900 */
  --text-on-ink-accent:#5BD9E8;   /* 8.63:1 on --ink-900 */

  --focus:             #0B63C5;   /* 5.90:1 on white */
  --focus-on-dark:     #5BD9E8;   /* 6.46:1 on --ink-900 */

  /* Legacy aliases — kept so existing rules keep resolving */
  --muted:   var(--text-secondary);
  --muted-2: var(--text-tertiary);

  /* Brand */
  --blue:        #0B63C5;
  --blue-dark:   #0A55AB;
  --cyan:        #00A8DE;
  --cyan-dark:   var(--text-accent);
  --cyan-deep:   #00BEDB;
  --teal:        #00C9BC;
  --mint:        #00E3D2;
  --green:       #00A88F;
  --green-dot:   #00D3A9;
  --star:        #FFB020;

  /* On dark */
  --on-dark:      #9FC2DA;
  --on-dark-accent: #5BD9E8;
  --on-dark-soft: #8FE4F0;

  /* Surfaces */
  --white:    #ffffff;
  --surface:  #F2F8FC;
  --surface-2:#FBFDFF;
  --tint:     #EAF7FB;
  --quote:    #CFEAF4;

  /* Lines */
  --line:      #E4EFF8;
  --line-2:    #E1EEF7;
  --line-soft: #EDF4FA;
  --line-blue: #CFE4F2;
  --line-blue-2: #D5EAF7;
  --line-blue-3: #DDEBF6;
  --line-hover: #BFE2F0;
  --line-hover-2: #9FDCEC;

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  /* Layout */
  --shell: 1200px;
  --gutter: 32px;
  --header-h: 76px;

  /* Gradients */
  /* Terminal stop darkened #00A8DE -> #0A7CB4 so white label text clears
     AA across the whole ramp (was 2.74:1 at the cyan end). */
  --grad-cta: linear-gradient(120deg, var(--blue), #0A7CB4);
  --grad-cta-hover: linear-gradient(120deg, var(--blue-dark), #096A99);

  /* Shadows */
  --shadow-cta: 0 8px 20px rgba(11, 99, 197, 0.28);
  --shadow-cta-lg: 0 12px 28px rgba(11, 99, 197, 0.30);
  --shadow-card: 0 18px 40px rgba(6, 43, 74, 0.09);
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink-700);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; }
/* Keep the <img> itself the flex/grid item, not the <picture> wrapper.
   `source` needs the explicit display:none — under display:contents it would
   otherwise be promoted to a zero-width flex item and throw off the layout. */
picture { display: contents; }
picture > source { display: none; }
button { font: inherit; color: inherit; }

a { color: var(--text-link); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--text-link-hover); }

::selection { background: var(--mint); color: var(--ink-900); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--white);
  border-radius: 999px;
  font-weight: 700;
  box-shadow: var(--shadow-card);
}
.skip-link:focus { left: 16px; }

/* -------------------------------------------------------------- layout -- */

.container {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 1000px; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
}
.btn-lg { padding: 16px 28px; font-size: 15.5px; }

.btn-primary {
  padding: 12px 22px;
  background: var(--grad-cta);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.btn-primary.btn-lg { box-shadow: var(--shadow-cta-lg); }
.btn-primary:hover { background: var(--grad-cta-hover); color: var(--white); transform: translateY(-2px); }

.btn-ghost {
  padding: 11px 16px;
  background: var(--white);
  border-color: var(--line-blue);
  color: var(--ink-800);
}
.btn-ghost.btn-lg { padding: 16px 26px; }
.btn-ghost:hover { border-color: var(--cyan-deep); color: var(--blue); transform: translateY(-2px); }

.btn-white {
  padding: 14px 20px;
  background: var(--white);
  color: var(--ink-800);
}
.btn-white.btn-lg { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18); }
.btn-white:hover { background: var(--tint); color: var(--ink-800); transform: translateY(-2px); }

.btn-outline-light {
  padding: 16px 26px;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}
.btn-outline-light:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------- header -- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.brand { flex: none; display: flex; align-items: center; }
.brand img { height: 46px; width: auto; display: block; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--body-2);
  white-space: nowrap;
}
.nav a:hover { color: var(--blue); }

/* The icon sits a step quieter than the label so it reads as support, not as
   a second thing competing for the same glance. */
.nav-icon {
  flex: none;
  opacity: .62;
  transition: opacity .2s ease;
}
.nav a:hover .nav-icon,
.nav a.is-active .nav-icon { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 11px;
  background: var(--white);
  border: 1.5px solid var(--line-blue);
  border-radius: 12px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink-800);
  transition: transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  overflow: clip;
  background: linear-gradient(165deg, #F4FAFE 0%, #E8F5FC 45%, #FFFFFF 100%);
}
.hero-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-glow-a {
  top: -160px; right: -120px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(0, 227, 210, 0.22), rgba(0, 190, 219, 0) 70%);
}
.hero-glow-b {
  bottom: -200px; left: -140px; width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(11, 99, 197, 0.14), rgba(11, 99, 197, 0) 70%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  padding-block: 76px 84px;
}
.hero-copy { min-width: 0; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 9px;
  background: var(--white);
  border: 1px solid var(--line-blue-2);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(11, 99, 197, 0.07);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-800);
  letter-spacing: 0.01em;
}
.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-dot);
  box-shadow: 0 0 0 4px rgba(0, 211, 169, 0.18);
}

.hero h1 {
  margin: 22px 0 0;
  font-size: clamp(36px, 5.2vw, 57px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink-900);
  text-wrap: balance;
}
.grad {
  /* Ramp compressed toward the ink end: the old tail (#00D9C2) rendered the
     payoff words at 1.79:1 on white — below even the 3:1 large-text floor. */
  background: linear-gradient(100deg, var(--blue), #0A86C4 55%, #0F9A96);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lede {
  margin: 24px 0 0;
  max-width: 480px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--body);
  text-wrap: pretty;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line-blue-3);
}
.hero-proof li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--body-2);
}
.hero-proof li + li::before {
  content: "";
  width: 1px;
  height: 16px;
  margin-right: 5px;
  background: var(--line-blue-3);
}

.hero-figure {
  position: relative;
  min-width: 0;
  height: 500px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-halo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, rgba(0, 190, 219, 0.22), rgba(11, 99, 197, 0.06) 60%, rgba(255, 255, 255, 0) 72%);
}
.hero-portrait {
  position: relative;
  height: 500px;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  /* No drop-shadow here. The source photo crops her coat flat at the
     bottom edge, so that row of the cut-out is ~50% opaque; a blurred
     shadow spreads from that straight cut and reads as a rectangle
     behind the image. The cut-out sits on the gradient unaided. */
}
.hero-badge {
  position: absolute;
  bottom: 34px;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(6, 43, 74, 0.14);
}
.hero-badge img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  background: var(--tint);
}
.hero-badge figcaption { display: flex; flex-direction: column; gap: 2px; }
.hero-badge-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink-900); }
.hero-badge-role { font-size: 12.5px; color: var(--muted); }

/* ------------------------------------------------------- section heads -- */

.eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan-dark);
}
.eyebrow-light { color: var(--on-dark-accent); }

.section-head { text-align: center; max-width: 660px; margin-inline: auto; }
.section-head h2 {
  margin: 16px 0 0;
  text-wrap: balance;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink-900);
}
.section-head .section-sub {
  margin: 16px 0 0;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--body);
}
.section-head-left { text-align: left; margin-inline: 0; max-width: 640px; }

/* ------------------------------------------------------------- síntomas -- */

.pains { position: relative; overflow: clip; background: var(--ink-900); }
.pains-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  width: 700px;
  height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0, 190, 219, 0.16), rgba(0, 190, 219, 0) 70%);
  pointer-events: none;
}
.pains .container { position: relative; padding-block: 92px 96px; }
.pains .section-head h2 { color: var(--white); }
.pains .section-sub { margin: 18px 0 0; font-size: 17px; color: var(--on-dark); }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 52px;
}
.pain-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 20px;
  transition: background .22s ease, transform .22s ease;
}
.pain-card:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-3px); }
.pain-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--white);
  text-wrap: balance;
}
.pain-card p {
  flex: 1;
  margin: 10px 0 0;
  font-size: 14.8px;
  line-height: 1.62;
  color: var(--text-on-ink);
}

/* Each concern names the service that answers it, and links straight to it. */
.pain-service {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-on-ink-accent);
}
.pain-service svg { transition: transform .2s ease; }
.pain-service:hover { color: var(--white); }
.pain-service:hover svg { transform: translateX(3px); }

/* ----------------------------------------------------------- servicios -- */

.services { background: var(--white); }
.services .container { padding-block: 96px 100px; }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.service-card {
  padding: 32px 28px;
  background: linear-gradient(180deg, var(--surface-2), var(--white));
  border: 1px solid var(--line-2);
  border-radius: 22px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.service-card:hover {
  border-color: var(--line-hover-2);
  box-shadow: var(--shadow-card);
  transform: translateY(-3px);
}
.service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: var(--tint);
}
.service-card h3 {
  margin: 22px 0 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}
.service-card p { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--body); }
.service-tag {
  margin-top: 20px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cyan-dark) !important;
}

.service-card-cta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(140deg, var(--blue), #0A7CAE 55%, #0B807A);
  border: none;
  box-shadow: 0 18px 40px rgba(11, 99, 197, 0.24);
}
.service-card-cta:hover { box-shadow: 0 22px 46px rgba(11, 99, 197, 0.30); }
.service-card-cta h3 { margin: 0; font-size: 22px; line-height: 1.25; color: var(--white); }
.service-card-cta p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--text-on-brand); }
.service-card-cta .btn { margin-top: 26px; font-size: 14.5px; }

/* --------------------------------------------------------- testimonios -- */

.testimonials {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.testimonials .container { padding-block: 92px 96px; }

.testimonials-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 40px;
}
.testimonials-head .section-head { flex: 1 1 320px; }
.testimonials-head .section-head { max-width: 560px; }

.rating {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 16px;
}
.stars { display: flex; gap: 2px; }
.rating strong { font-size: 14px; font-weight: 700; color: var(--ink-900); }
.rating-note { font-size: 13.5px; color: var(--muted); }

/* --- Marquee -----------------------------------------------------------
   Two identical groups sit side by side inside one track; the track slides
   exactly one group-plus-gap, so the loop closes with no visible seam. */

.marquee-state {
  position: absolute;
  left: 50%;
  top: 10px;
  z-index: 2;
  transform: translate(-50%, -6px);
  padding: 5px 14px;
  background: var(--ink-900);
  color: var(--white);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.marquee[data-paused] .marquee-state {
  opacity: 1;
  transform: translate(-50%, 0);
}

.marquee {
  position: relative;
  --gap: 18px;
  --duration: 45s;
  margin-top: 48px;
  overflow: clip;
  /* Fades the run-in and run-out without needing to know the section colour,
     which a pair of gradient overlays would have to hard-code. */
  --fade: 90px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--fade),
                      #000 calc(100% - var(--fade)), transparent);
}

.marquee-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  animation: marquee var(--duration) linear infinite;
}
.marquee-group {
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 4px 0;
  list-style: none;
}

@keyframes marquee {
  to { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

/* Pause on hover, on keyboard focus inside the strip, and on demand */
.marquee { cursor: pointer; }
.marquee:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 12px; }

.marquee:hover .marquee-track,
.marquee:focus .marquee-track,
.marquee:focus-within .marquee-track,
.marquee[data-paused] .marquee-track,
.marquee.is-offscreen .marquee-track { animation-play-state: paused; }

/* --- Testimonial card --------------------------------------------------- */

.avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), #0B807A);
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.author { font-size: 14.5px; font-weight: 700; color: var(--text-primary); }
.author-meta { margin-top: 1px; font-size: 13px; color: var(--text-secondary); }

.t-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: none;
  width: 320px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.t-card:hover {
  border-color: var(--line-hover);
  box-shadow: 0 10px 26px rgba(6, 43, 74, 0.07);
}
.t-card-head { display: flex; align-items: center; gap: 10px; }
.t-card-id { display: flex; flex-direction: column; min-width: 0; }
.t-card-head .avatar { width: 38px; height: 38px; font-size: 13px; }
.t-card-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-600);
  /* Safety net only — the real copy fits well inside six lines, so nothing
     is cut today. It keeps one long review from breaking the row height. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}


/* ---------------------------------------------------------------- faqs -- */

.faqs { background: var(--white); }
.faqs .container { padding-block: 96px 100px; }
.faqs .section-head { max-width: 600px; margin-bottom: 48px; }

.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq {
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  transition: border-color .2s ease;
}
.faq:hover, .faq:focus-within { border-color: var(--line-hover); }
.faq h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 26px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.faq-sign {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tint);
  font-size: 17px;
  font-weight: 600;
  color: var(--blue);
  transition: background .2s ease, color .2s ease;
}
.faq-q[aria-expanded="true"] .faq-sign { background: var(--blue); color: var(--white); }

/* Height animates for real: a 0fr -> 1fr grid row measures the content
   itself, so nothing has to be read back in JS. `visibility` keeps the
   collapsed copy out of the tab order and out of assistive tech. */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .28s cubic-bezier(.32, .72, 0, 1),
              visibility .28s;
}
.faq-a-inner { overflow: hidden; }
.faq[data-open] .faq-a {
  grid-template-rows: 1fr;
  visibility: visible;
}
.faq-a p {
  margin: 0;
  padding: 0 62px 24px 26px;
  font-size: 15.8px;
  line-height: 1.68;
  color: var(--body);
}

/* ----------------------------------------------------------------- cta -- */

.cta { background: var(--white); padding-bottom: 88px; }

.cta-panel {
  position: relative;
  overflow: clip;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  padding: 64px 56px;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--ink-900) 0%, var(--blue) 45%, #0A7FA0 100%);
}
.cta-glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 227, 210, 0.3), rgba(0, 227, 210, 0) 70%);
  pointer-events: none;
}

.cta-copy { position: relative; min-width: 0; }
.cta-copy h2 {
  margin: 0;
  font-size: clamp(30px, 3.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--white);
}
.cta-copy > p {
  margin: 18px 0 0;
  max-width: 420px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-on-brand);
}
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.cta-info {
  position: relative;
  padding: 30px 28px;
  /* Was a 10% white veil, which lightened the panel under its own text and
     dropped the contact details to 2.05:1. Ink-tinted glass instead. */
  background: rgba(6, 43, 74, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cta-info .eyebrow { letter-spacing: 0.18em; color: var(--text-on-brand-2); }
.cta-info ul { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.cta-info li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15.2px;
  line-height: 1.55;
  color: var(--white);
}
.cta-info li svg { flex: none; margin-top: 2px; }
.cta-info a { color: inherit; }
.cta-info a:hover { color: var(--text-on-brand-2); }
.cta-info .muted { color: var(--text-on-brand-2); }

/* -------------------------------------------------------------- footer -- */

.site-footer { background: var(--surface); border-top: 1px solid var(--line); }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding-block: 40px;
}
.footer-inner img { height: 44px; width: auto; display: block; }
.footer-inner p { font-size: 13.5px; color: var(--muted); }

/* -------------------------------------------------- mobile actions ---- */

/* Desktop keeps the floating button; phones get a two-up action bar inside
   the thumb zone, since calling and WhatsApp are the page's only two jobs. */
.mobile-actions { display: none; }

/* ---------------------------------------------------- read progress -- */

/* Scroll-driven, so it costs no JS and no scroll listener. Browsers without
   scroll timelines simply never see the bar. */
.read-progress { display: none; }

@supports (animation-timeline: scroll()) {
  .read-progress {
    display: block;
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    height: 2px;
    background: var(--grad-cta);
    transform-origin: 0 50%;
    scale: 0 1;
    animation: read-progress linear;
    animation-timeline: scroll(root block);
  }
  @keyframes read-progress { to { scale: 1 1; } }
}

/* ------------------------------------------------------ whatsapp float -- */

.whatsapp-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  box-shadow: 0 10px 26px rgba(6, 43, 74, 0.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-fab:hover { color: var(--white); transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 32px rgba(6, 43, 74, 0.34); }

/* ------------------------------------------------ focus on dark ------- */

.pains :focus-visible,
.cta-panel :focus-visible,
.service-card-cta :focus-visible {
  outline-color: var(--focus-on-dark);
}

/* --------------------------------------------------------- responsive -- */

/* Hover-driven lift is a pointer affordance; on touch it sticks after a tap.
   Give those surfaces a press state instead. */
@media (hover: none) {
  .btn:hover,
  .pain-card:hover,
  .service-card:hover,
  .service-card-cta:hover,
  .whatsapp-fab:hover { transform: none; }

  .btn:active { transform: scale(0.97); }
  .pain-card:active,
  .service-card:active { transform: scale(0.995); }
  .mobile-action:active { transform: scale(0.97); }
}

@media (max-width: 1080px) {
  .pain-grid, .service-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  :root { --gutter: 24px; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 40px rgba(6, 43, 74, 0.10);
    transform-origin: top;
  }
  .nav[hidden] { display: none; }
  .nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
    text-align: center;
  }
  .nav .nav-icon { opacity: .5; }
  .nav a:last-child { border-bottom: 0; }
  .nav-toggle { display: flex; }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-block: 56px 64px;
  }
  .hero-figure {
    /* Copy first, doctor last: the DOM order already says so, and dropping
       the override lifts the call to action higher up the screen. */
    height: auto;
    flex-direction: column;
    align-items: center;
  }
  .hero-portrait { height: 400px; --drop: 34px; }
  .hero-halo { width: 340px; height: 340px; }
  .hero-badge {
    position: static;
    margin-top: -26px;
    max-width: 100%;
  }
  .hero-badge-name { white-space: nowrap; }
  .lede { max-width: none; }

  .cta-panel { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px; }
  .cta-copy > p { max-width: none; }
}

@media (max-width: 720px) {
  .pain-grid, .service-grid { grid-template-columns: 1fr; }

  /* Reading copy to 16px — the mobile floor before text starts costing effort */
  .pain-card p,
  .service-card p:not(.service-tag),
  .service-card-cta p { font-size: 16px; }
  .faq-a p { font-size: 16px; }
  .cta-info li { font-size: 16px; }

  .pains .container,
  .testimonials .container { padding-block: 64px 68px; }
  .services .container,
  .faqs .container { padding-block: 68px 72px; }
  .cta { padding-bottom: 64px; }

  .pain-grid { margin-top: 36px; }
  .service-grid { margin-top: 36px; }
  /* A percentage fade eats into the copy once the viewport is this narrow */
  .marquee { margin-top: 32px; --fade: 28px; }
  .t-card { width: min(300px, 80vw); }
  .faqs .section-head { margin-bottom: 32px; }

  /* Stacked, the inline dividers read as indentation instead of separators */
  .hero-proof { gap: 10px 14px; }
  .hero-proof li + li::before { display: none; }

  .faq-q { padding: 18px 20px; font-size: 16.5px; gap: 14px; }
  .faq-a p { padding: 0 20px 20px; }

  .cta-panel { padding: 40px 24px; border-radius: 24px; }
  .cta-actions .btn, .hero-ctas .btn { flex: 1 1 100%; }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 88px; /* clears the floating WhatsApp button */
  }

  .whatsapp-fab { display: none; }

  .mobile-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }

  .mobile-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 52px;
    border-radius: 999px;
    background: var(--grad-cta);
    color: var(--text-on-brand);
    font-size: 15.5px;
    font-weight: 700;
    box-shadow: var(--shadow-cta);
    transition: transform .15s ease;
  }
  .mobile-action:hover { color: var(--text-on-brand); }
  .mobile-action-wa { background: #0F7A41; box-shadow: 0 6px 16px rgba(15, 122, 65, 0.24); }

  /* Clear the fixed bar so it never covers the last of the footer */
  body { padding-bottom: 84px; }
  .footer-inner { padding-bottom: 40px; }
}

@media (max-width: 420px) {
  .brand img { height: 38px; }
  .btn-header-cta { padding: 10px 16px; font-size: 13.5px; }
  .hero-portrait { height: 320px; }
  .hero-halo { width: 280px; height: 280px; }
  .hero-badge-name { font-size: 14px; }
}

/* Landscape phone: a full-width bar would eat a fifth of a 375px-tall
   viewport, and pushing it into the flow buries it 6000px down. Fall back to
   the compact floating button so the affordance stays reachable. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 460px) {
  .mobile-actions { display: none; }
  body { padding-bottom: 0; }
  .whatsapp-fab {
    display: flex;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
  }
}

/* Coarse pointer: 44px minimum on everything tappable (WCAG 2.5.8).
   Placed after the width queries so their tighter paddings cannot outrank it. */
@media (pointer: coarse) {
  /* The links grow to 44px, so the list closes up to keep the block compact
     and the leading icons stay aligned to their first line. */
  .cta-info ul { gap: 6px; }
  .cta-info li:has(a) svg { margin-top: 13px; }   /* only the rows whose text gained padding */
  .cta-info a {
    display: inline-block;
    padding-block: 11px;          /* 21px line box -> 43px + border-box slack */
    min-height: 44px;
  }
  .brand { min-height: 44px; }
  .btn-header-cta { padding-block: 14px; }
  .pain-service { padding-bottom: 9px; }   /* 37px -> 45px tap target */
  .nav a { padding-block: 15px; }
}

/* Reduced motion means less travel, not less feedback. Colour, border and
   opacity transitions stay so state changes remain legible; movement goes. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: color, background-color, border-color, box-shadow, opacity, outline-color;
    transition-duration: .12s;
  }

  .btn:hover, .pain-card:hover, .service-card:hover,
  .service-card-cta:hover, .whatsapp-fab:hover, .t-card:hover { transform: none; }

  .faq-a { transition: none; }
  [data-hero], .pain-card, .service-card, .t-card, .cta-panel,
  .site-header, .brand img { animation: none; }
  .read-progress { display: none; }

  /* The strip stops moving and becomes a normal swipeable rail. */
  .marquee-track { animation: none; width: auto; }
  .marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .t-card { scroll-snap-align: start; }
  }

@media print {
  .site-header, .whatsapp-fab, .nav-toggle { display: none !important; }
  body { color: #000; }
}

/* ============================================================ motion ==
   Two rules govern everything below.
   1. Content is visible by default. Reveals are an enhancement layered on
      top, never a curtain that JS or an unsupported feature could leave shut.
   2. Reveals animate `translate`, not `transform`, so they compose with the
      hover lifts already on these cards instead of overriding them.
   ==================================================================== */

@keyframes reveal {
  from { opacity: 0; translate: 0 16px; }
  to   { opacity: 1; translate: none; }
}

@media (prefers-reduced-motion: no-preference) {

  /* --- Hero entrance: the one staged sequence on the page -------------- */
  [data-hero] {
    animation: reveal .55s cubic-bezier(.22, .68, .3, 1) both;
  }
  [data-hero="1"] { animation-delay: .04s; }
  [data-hero="2"] { animation-delay: .10s; }
  [data-hero="3"] { animation-delay: .18s; }
  [data-hero="4"] { animation-delay: .26s; }
  [data-hero="5"] { animation-delay: .34s; }

  /* The h1 is the LCP element — fading it in delays the measured paint,
     so it moves without ever dropping below full opacity. */
  h1[data-hero] { animation-name: reveal-rise; }
  @keyframes reveal-rise {
    from { translate: 0 16px; }
    to   { translate: none; }
  }

  /* --- The doctor drops in, then her name slides over ------------------
     Both use an exponential ease-out, so most of the travel is spent
     decelerating and the element reads as settling rather than stopping. */
  .hero-portrait[data-hero] {
    animation-name: hero-drop;
    animation-duration: .85s;
    animation-delay: .1s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  /* --drop has to stay under the hero's top padding: the section is
     `overflow: clip`, so a longer travel would shave the top of her head
     for the first few frames. Narrow layouts have less padding to spend. */
  @keyframes hero-drop {
    from { opacity: 0; translate: 0 calc(-1 * var(--drop, 70px)); }
    to   { opacity: 1; translate: none; }
  }

  /* Starts once the portrait has visually landed. With the curve above the
     drop is ~97% done by .5s, so .8s reads as "after", not as overlap. */
  .hero-badge[data-hero] {
    animation-name: hero-slide-in;
    animation-duration: .6s;
    animation-delay: .8s;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  @keyframes hero-slide-in {
    from { opacity: 0; translate: 54px 0; }
    to   { opacity: 1; translate: none; }
  }

  /* --- Scroll-driven reveals, only where a group benefits ------------- */
  @supports (animation-timeline: view()) {
    .t-card,
    .cta-panel {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 22%;
    }
    /* Cards inside a moving strip must not also react to the viewport. */
    .marquee .t-card { animation: none; }

    /* --- Síntomas and Servicios drop in, like the hero portrait --------
       Same curve as `hero-drop`, so the two reads as one idea. The travel
       is shorter because it has to stay inside `.pains`, which clips. */
    .pain-card,
    .service-card {
      animation: card-drop linear both;
      animation-timeline: view();
      /* Gentler than the hero's exponential curve on purpose. On a scroll
         timeline the reader sets the pace, so a front-loaded ease finishes
         in the first few pixels and the travel goes unseen. */
      animation-timing-function: cubic-bezier(0, 0, .45, 1);
      /* The whole `entry` phase: the card animates for as long as it takes to
         scroll into view, instead of resolving in the first few pixels. */
      animation-range: entry 0% entry 92%;
    }
    @keyframes card-drop {
      from { opacity: 0; translate: 0 -78px; }
      to   { opacity: 1; translate: none; }
    }

    /* Columns land left to right instead of as one block. Cards in a row
       share a scroll position, so the cascade comes from offsetting the
       range rather than from a delay, which a scroll timeline ignores. */
    .pain-card:nth-child(3n + 2),
    .service-card:nth-child(3n + 2) { animation-range: entry 8% entry 93%; }
    .pain-card:nth-child(3n + 3),
    .service-card:nth-child(3n + 3) { animation-range: entry 16% entry 100%; }

    /* --- Single column: alternate sides instead of dropping -------------
       With one card per row there are no columns to cascade, so the cards
       come in from alternating sides as you scroll. This block has to live
       inside the motion layer: the layer sits after the width queries, so a
       plain @media further up the file would be overridden here. */
    @media (max-width: 720px) {
      .pain-card,
      .service-card {
        animation-name: card-slide-right;
        animation-range: entry 0% entry 100%;
      }
      .pain-card:nth-child(even),
      .service-card:nth-child(even) { animation-name: card-slide-left; }

      /* The column cascade above is scoped to the 3-up grid, but its
         nth-child selectors outrank the rule here and would leave half the
         cards waiting on a desktop range. One column, one range. */
      .pain-card:nth-child(3n + 2),
      .service-card:nth-child(3n + 2),
      .pain-card:nth-child(3n + 3),
      .service-card:nth-child(3n + 3) { animation-range: entry 0% entry 100%; }

      /* 105% of the card's own width puts it fully off the page edge before
         it starts, so the card travels all the way in rather than nudging.
         `body` is `overflow-x: clip`, so none of this adds a scrollbar. */
      @keyframes card-slide-right {
        from { opacity: 0; translate: 105% 0; }
        to   { opacity: 1; translate: none; }
      }
      @keyframes card-slide-left {
        from { opacity: 0; translate: -105% 0; }
        to   { opacity: 1; translate: none; }
      }
    }

    /* --- Header condenses past the hero ------------------------------ */
    .site-header {
      animation: header-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 180px;
    }
    @keyframes header-condense {
      to {
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 6px 22px rgba(6, 43, 74, 0.07);
      }
    }
    .brand img {
      animation: brand-condense linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 180px;
    }
    @keyframes brand-condense { to { height: 38px; } }
  }
}

/* --------------------------------------------------- nav active state -- */

.nav a.is-active { color: var(--blue); }
@media (min-width: 961px) {
  .nav a { position: relative; }
  .nav a.is-active::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-cta);
  }
}