/* =============================================================================
   Medical's — Landings de autogestión
   Sistema de diseño extraído 1:1 del prototipo de Figma Make.
   Mobile-first. Sin dependencias. Sin frameworks.
   ============================================================================= */

/* ---------------------------------------------------------------- 1. Fuentes */
/* Poppins auto-hospedada (subset latin). Evita una conexión a terceros y
   elimina el round-trip a fonts.googleapis.com en el critical path. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- 2. Tokens */
:root {
  /* Marca — valores exactos del prototipo */
  --brand: #ce4a88;
  --brand-dark: #8e2458;
  --brand-soft: #fdeef6;
  --brand-soft-2: #f5e4f0;
  --brand-border: #f5cfe2;

  /* Variantes con contraste AA verificado (diferencia visual imperceptible,
     necesarias para texto pequeño sobre blanco / blanco sobre relleno) */
  --brand-cta: #c4407e;  /* 4.79:1 con texto blanco */
  --brand-text: #be3a76; /* 5.15:1 sobre blanco     */

  /* Texto */
  --ink: #1c1520;
  --ink-2: #3e3040;
  --heading: #404040;
  --body: #574a52;
  --muted: #7a6470;       /* 5.4:1 — para texto real */
  --muted-deco: #907a86;  /* del prototipo — sólo decorativo */

  /* Superficies y líneas */
  --surface: #ffffff;
  --surface-1: #f8f0f5;
  --surface-2: #fdf8fb;
  --line: #ede0ea;
  --line-soft: #f5eaf2;
  --footer-bg: #0d1117;

  /* Planes */
  --p1: #949494;  --p1-ink: #6e6e6e;  --p1-btn-text: #1a1a1a;
  --p2: #99a7ce;  --p2-ink: #54679a;  --p2-btn-text: #233253;
  --p3: #233253;  --p3-ink: #233253;  --p3-btn-text: #ffffff;
  --p4: #333333;  --p4-ink: #333333;  --p4-btn-text: #ffffff;

  /* Geometría */
  --radius: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 99px;
  --header-h: 68px;
  /* Alto del logotipo. El PNG viene recortado a su caja de tinta (456×102),
     así que este valor es el alto real del wordmark, no el de una caja con
     márgenes. El prototipo mostraba 11,4px; acá va algo más grande. */
  --logo-h: 22px;
  --container: 1152px;
  --gutter: 24px;

  /* Movimiento */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.25s;
}

/* ------------------------------------------------------------- 3. Reset base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }

/* Foco visible y consistente en todo el sitio (WCAG 2.4.7 / 2.4.11) */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Salto al contenido para lectores de pantalla y navegación por teclado */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--brand-cta);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ 4. Utilidades */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 72px 0 80px; }
.section--white { background: var(--surface); }
.section--soft { background: var(--surface-1); }
.section--soft-2 { background: var(--surface-2); }

/* Aísla el trabajo de layout/paint de las secciones fuera de pantalla.
   Reduce el tiempo de render inicial sin afectar al DOM ni al SEO. */
.section--defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

.section-head { text-align: center; margin-bottom: 44px; }
.section-head p {
  font-size: 16px;
  color: var(--body);
  max-width: 500px;
  margin-inline: auto;
}

.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-text);
  margin-bottom: 10px;
}

h1, .h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--heading);
}

h2, .h2 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--heading);
}

.accent { color: var(--brand-text); }

/* Salto de línea del título sólo a partir de tablet — en móvil estorba. */
.br-sm { display: none; }
@media (min-width: 640px) { .br-sm { display: inline; } }

/* --------------------------------------------------------------- 5. Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;               /* objetivo táctil AAA */
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity 0.15s var(--ease),
    transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.btn--primary {
  background: var(--brand-cta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(196, 64, 126, 0.22);
}
.btn--primary:hover {
  background: var(--brand);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(196, 64, 126, 0.3);
}
.btn--primary:active { transform: translateY(0); }

.btn--onbrand { background: #fff; color: var(--brand-text); }
.btn--onbrand:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }

.btn--lg { padding: 15px 32px; }
.btn--block { width: 100%; }

.link-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-toggle svg { transition: transform var(--dur) var(--ease); }

/* --------------------------------------------------------------- 6. Header
   Replicado 1:1 del prototipo. Dos modos:
   · < 768px  → logo + hamburguesa, panel a pantalla completa
   · >= 768px → logo + nav en línea + CTA, repartidos con space-between
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background var(--dur) var(--ease),
    border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header[data-scrolled='true'] {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 10px rgba(28, 21, 32, 0.07);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* El prototipo usa el PNG cuadrado de 500×500 a 56px de alto: el logotipo
   ocupa sólo la franja central del archivo, por eso se ve pequeño. Cambiando
   --logo-h se escala todo (header y footer) de una sola vez. */
.brand { display: flex; align-items: center; }
.brand img {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  user-select: none;
}

/* Botón hamburguesa — sólo por debajo de 768px */
.nav-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 8px;
}
/* Área de toque ampliada a 50×44 sin alterar el dibujo (WCAG 2.5.5). */
.nav-toggle::after { content: ''; position: absolute; inset: -6px; }
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span:nth-child(2) { width: 16px; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Panel desplegable.
   Va en `absolute` contra el propio header, no en `fixed` contra el viewport:
   el `backdrop-filter` del header lo convierte en bloque contenedor de sus
   descendientes fixed, así que un `inset: 68px 0 0 0` se resolvería contra los
   68px del header y el panel quedaría con altura cero. */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100svh - var(--header-h));
  z-index: 49;
  display: flex;
  flex-direction: column;
  padding: 8px 0 32px;
  background: #fff;
  border-top: 1px solid var(--line);
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity 0.2s var(--ease),
    visibility 0s linear var(--dur);
}
.nav-panel[data-open='true'] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

.nav-links { display: flex; flex-direction: column; }
.nav-links a {
  display: block;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.nav-links a:hover { color: var(--brand-text); background: var(--surface-2); }
.nav-cta { padding: 28px 24px 0; }
.nav-cta .btn { width: 100%; padding: 15px 32px; }

/* ---------------------------------------------- Header en escritorio (768+) */
@media (min-width: 768px) {
  .nav-toggle { display: none; }

  /* `display: contents` deja al <nav> sin caja propia: sus hijos pasan a ser
     items del flex del header y quedan logo | links | CTA con space-between,
     igual que en el prototipo. El landmark de navegación se conserva. */
  .nav-panel {
    display: contents;
    position: static;
    height: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: none;
    border: 0;
    padding: 0;
    overflow: visible;
  }

  .nav-links { flex-direction: row; align-items: center; gap: 28px; }
  .nav-links a {
    padding: 4px 0;
    border: 0;
    font-size: 14px;
    color: #505353;
    background: none;
  }
  .nav-links a:hover { color: var(--brand-text); background: none; }

  .nav-cta { padding: 0; }
  .nav-cta .btn {
    width: auto;
    min-height: 0;
    padding: 10px 20px;
    font-size: 13px;
  }
}

/* --------------------------------------------- Sin JavaScript (sólo móvil)
   El menú no puede alternarse: el header deja de ser fijo y la navegación se
   despliega en línea debajo del logo. */
@media (max-width: 767px) {
  .no-js .site-header { position: static; }
  .no-js .site-header__inner { height: auto; flex-wrap: wrap; padding-block: 10px; row-gap: 4px; }
  .no-js .nav-toggle { display: none; }
  .no-js .hero { min-height: 0; padding-top: 0; }
  .no-js .nav-panel {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: none;
    overflow: visible;
  }
  .no-js .nav-links { flex-direction: row; flex-wrap: wrap; }
  .no-js .nav-links a { padding: 8px 12px; border: 0; font-size: 14px; }
  .no-js .nav-cta { padding: 0 0 0 8px; }
  .no-js .nav-cta .btn { width: auto; min-height: 40px; padding: 8px 16px; font-size: 12px; }
}

/* ------------------------------------------------------------------ 7. Hero */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}
.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 740px;
  margin-inline: auto;
  padding: 56px var(--gutter) 72px;
  text-align: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 7px 18px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
}
.badge__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
}
.badge__text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-text);
}

.hero h1 { margin-bottom: 28px; }
.hero__lead { max-width: 560px; margin-bottom: 36px; }
.hero__lead p {
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.7;
  color: var(--body);
}
.hero__lead p + p { margin-top: 4px; }
.hero__lead strong {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-text);
  font-size: clamp(1.375rem, 3.5vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.hero__proof li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
}
.hero__cta { width: 100%; max-width: 360px; margin-bottom: 12px; }
.legal { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------ 8. Cómo funciona */
.steps { display: flex; flex-direction: column; }
.step { display: flex; gap: 16px; }
.step__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  box-shadow: 0 1px 4px rgba(28, 21, 32, 0.06);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-text);
}
.step:first-child .step__num {
  background: var(--brand-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(206, 74, 136, 0.25);
}
.step__line {
  width: 1px;
  flex: 1;
  margin: 6px 0;
  background: rgba(206, 74, 136, 0.19);
}
.step__body { flex: 1; padding: 4px 0 28px; }
.step__body h3 {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}
.step__body p { font-size: 14px; line-height: 1.6; color: var(--body); }

.steps-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 52px;
  text-align: center;
}
.steps-foot p { font-size: 13px; color: var(--muted); }

/* ----------------------------------------------------------------- 9. Planes */
.plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.plan:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(28, 21, 32, 0.09); }
.plan__bar { height: 4px; background: var(--plan); }
.plan__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 24px; }
.plan__title { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.plan__dot { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: var(--plan); }
.plan__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan__sub { margin-bottom: 16px; font-size: 12px; font-weight: 500; color: var(--muted); }
.plan__features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: auto;
  padding-bottom: 20px;
}
.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}
.plan__features svg { flex-shrink: 0; margin-top: 1px; }
.plan__flag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--plan-flag-bg);
  color: var(--plan-ink);
  font-size: 11px;
  font-weight: 600;
}

.plan--md150 { --plan: var(--p1); --plan-ink: var(--p1-ink); --plan-btn-text: var(--p1-btn-text); }
.plan--md250 {
  --plan: var(--p2); --plan-ink: var(--p2-ink); --plan-btn-text: var(--p2-btn-text);
  --plan-flag-bg: rgba(153, 167, 206, 0.14);
  border-color: rgba(153, 167, 206, 0.33);
}
.plan--md350 { --plan: var(--p3); --plan-ink: var(--p3-ink); --plan-btn-text: var(--p3-btn-text); }
.plan--md450 { --plan: var(--p4); --plan-ink: var(--p4-ink); --plan-btn-text: var(--p4-btn-text); }

/* Comparador */
.compare { margin-top: 28px; text-align: center; }
.compare > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.compare > summary::-webkit-details-marker { display: none; }
.compare > summary svg { transition: transform var(--dur) var(--ease); }
.compare[open] > summary svg { transform: rotate(180deg); }

.compare__scroll {
  margin-top: 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  text-align: left;
  -webkit-overflow-scrolling: touch;
}
.compare table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13px;
}
.compare thead tr { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.compare th {
  padding: 14px 12px;
  font-weight: 700;
  text-align: center;
  font-family: inherit;
}
.compare th:first-child { padding: 14px 16px; text-align: left; color: var(--ink); }
.compare th[data-plan='md150'] { color: var(--p1-ink); }
.compare th[data-plan='md250'] { color: var(--p2-ink); }
.compare th[data-plan='md350'] { color: var(--p3-ink); }
.compare th[data-plan='md450'] { color: var(--p4-ink); }
.compare tbody tr { border-top: 1px solid var(--line-soft); background: #fff; }
.compare tbody tr:nth-child(odd) { background: var(--surface-2); }
.compare tbody th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 400;
  color: var(--body);
}
.compare td { padding: 12px; text-align: center; }

/* El icono de incluido / no incluido se dibuja en CSS y el valor real ("Sí" /
   "No") queda en el DOM para lectores de pantalla, crawlers y agentes. */
.compare td[data-v]::before {
  content: '';
  display: block;
  width: 17px;
  height: 17px;
  margin-inline: auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px 17px;
}
.compare td[data-v='no']::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%23f0f0f0'/%3E%3Cpath d='M6 8.5h5' stroke='%23bbb' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.compare td[data-v='si']:nth-of-type(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%23949494' fill-opacity='.12'/%3E%3Cpath d='M5 8.5l2.5 2.5 4.5-4.5' stroke='%23949494' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compare td[data-v='si']:nth-of-type(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%2399A7CE' fill-opacity='.12'/%3E%3Cpath d='M5 8.5l2.5 2.5 4.5-4.5' stroke='%2399A7CE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compare td[data-v='si']:nth-of-type(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%23233253' fill-opacity='.12'/%3E%3Cpath d='M5 8.5l2.5 2.5 4.5-4.5' stroke='%23233253' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.compare td[data-v='si']:nth-of-type(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17' fill='none'%3E%3Ccircle cx='8.5' cy='8.5' r='8.5' fill='%23333333' fill-opacity='.12'/%3E%3Cpath d='M5 8.5l2.5 2.5 4.5-4.5' stroke='%23333333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Aclaración chica al lado del nombre de la fila (ej.: salud mental «con copago»). */
.compare .compare__nota {
  display: inline;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--brand-muted, #7a6470);
  white-space: nowrap;
}

/* ------------------------------------------------------------- 10. Banda CTA */
.cta-band {
  padding: 56px var(--gutter);
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand-soft-2) 100%);
  text-align: center;
}
.cta-band__inner { max-width: 680px; margin-inline: auto; }
.cta-band h2 { margin-bottom: 10px; font-size: clamp(1.4rem, 2.8vw, 1.875rem); }
.cta-band p { margin-bottom: 28px; font-size: 16px; color: var(--body); }

/* ---------------------------------------------------------- 11. Sobre Medical's */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 768px) {
  .about { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 1024px) { .about { gap: 64px; } }

.about__media { order: 2; }
.about__text { order: 1; }
@media (min-width: 768px) {
  .about__media { order: 1; }
  .about__text { order: 2; }
}

.about__figure {
  overflow: hidden;
  border-radius: var(--radius-xl);
  aspect-ratio: 4 / 3;
  box-shadow: 0 12px 48px rgba(28, 21, 32, 0.11);
}
.about__figure img { width: 100%; height: 100%; object-fit: cover; }

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 12px;
}
.stats div {
  padding: 13px 6px;
  text-align: center;
  background: #fff;
  border-left: 1px solid var(--line);
}
.stats div:first-child { border-left: 0; }
.stats dt {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--brand-text);
}
.stats dd {
  margin: 3px 0 0;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--muted);
}

.about__text h2 { margin-bottom: 36px; }
.features { display: flex; flex-direction: column; gap: 22px; }
.feature { display: flex; align-items: flex-start; gap: 14px; }
.feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
}
.feature h3 { margin-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--heading); }
.feature p { font-size: 13px; line-height: 1.6; color: var(--body); }

/* ------------------------------------------------------- 12. Banda beneficio */
.benefit {
  position: relative;
  overflow: hidden;
  padding: 72px var(--gutter) 80px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;

  /* Amplitud del parallax por capa. Una sola fuente de verdad: las toman tanto
     los @keyframes como el respaldo en JavaScript. */
  --pl-deep: 70px;   /* filigrana del fondo, la que más se mueve */
  --pl-mid: 26px;    /* cifra grande de la columna izquierda */
  --pl-glow: 40px;   /* halo radial */

  /* Amplitud del flotado continuo (independiente del scroll). */
  --fl-a: 16px;      /* filigrana */
  --fl-b: 11px;      /* cifra */
}
@media (min-width: 768px) {
  .benefit {
    --pl-deep: 96px; --pl-mid: 46px; --pl-glow: 58px;
    --fl-a: 24px; --fl-b: 15px;
  }
}

.benefit__deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.benefit__glow {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 70%);
}
.benefit__watermark {
  position: absolute;
  top: 50%;
  left: 2%;
  /* El centrado va en `translate` y no en `transform`, para dejar `transform`
     libre para la animación de parallax. Las dos propiedades se componen. */
  translate: 0 -50%;
  font-size: clamp(120px, 20vw, 220px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.07);
  user-select: none;
}
.benefit__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
}
@media (min-width: 768px) { .benefit__grid { grid-template-columns: 1fr 1fr; } }

.benefit__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(72px, 13vw, 130px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.22);
  user-select: none;
}
.benefit__body { display: flex; flex-direction: column; gap: 18px; }
.benefit__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.benefit h2 { color: #fff; }
.benefit__body > p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.88); }
.benefit__body strong { color: #fff; }
.benefit__note { font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.benefit__note--fine { color: rgba(255, 255, 255, 0.62); }

/* ------------------------------------------------- Parallax de la banda
   Tres capas a distinta velocidad. El recorrido se mide sobre el paso completo
   de la sección por el viewport, así que el movimiento es lento y continuo.

   Camino rápido: scroll-driven animations. El navegador las resuelve en el
   compositor, sin tocar el hilo principal, así que no hay jank ni escuchas de
   scroll. Donde no existan, medicals.js hace lo mismo con requestAnimationFrame
   leyendo estas mismas variables.
   ---------------------------------------------------------------------------- */
@keyframes benefit-deep {
  from { transform: translate3d(0, var(--pl-deep), 0) scale(1.1); }
  to   { transform: translate3d(0, calc(var(--pl-deep) * -1), 0) scale(0.94); }
}
@keyframes benefit-mid {
  from { transform: translate3d(0, var(--pl-mid), 0); }
  to   { transform: translate3d(0, calc(var(--pl-mid) * -1), 0); }
}
@keyframes benefit-glow {
  from { transform: translate3d(0, var(--pl-glow), 0); }
  to   { transform: translate3d(0, calc(var(--pl-glow) * -1), 0); }
}

/* Flotado continuo. Va en una capa interna (.benefit__drift) porque el parallax
   de scroll ya ocupa el `transform` de la capa de afuera: anidándolos, los dos
   movimientos se componen en vez de pisarse.

   Dos duraciones distintas y sin relación armónica entre sí, para que las dos
   cifras nunca se sincronicen y el movimiento no se lea como un bucle. */
@keyframes benefit-flotar-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%  { transform: translate3d(calc(var(--fl-a) * 0.4), calc(var(--fl-a) * -0.65), 0) rotate(-0.9deg); }
  50%  { transform: translate3d(0, calc(var(--fl-a) * -1), 0) rotate(0deg); }
  75%  { transform: translate3d(calc(var(--fl-a) * -0.4), calc(var(--fl-a) * -0.5), 0) rotate(0.9deg); }
}
@keyframes benefit-flotar-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30%  { transform: translate3d(calc(var(--fl-b) * -0.5), calc(var(--fl-b) * -0.8), 0) rotate(1.1deg); }
  60%  { transform: translate3d(calc(var(--fl-b) * 0.35), calc(var(--fl-b) * -1), 0) rotate(-0.6deg); }
  85%  { transform: translate3d(calc(var(--fl-b) * 0.2), calc(var(--fl-b) * -0.35), 0) rotate(0.3deg); }
}

.benefit__drift { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .benefit { view-timeline: --benefit block; }

  .benefit__watermark,
  .benefit__figure,
  .benefit__glow,
  .benefit__drift { will-change: transform; }

  .benefit__drift {
    animation: benefit-flotar-a 15s ease-in-out infinite;
  }
  .benefit__drift--b {
    animation: benefit-flotar-b 11s ease-in-out infinite;
    animation-delay: -3s;
  }

  /* Fuera de pantalla no hay nada que mirar: se pausa para no gastar batería.
     Si el JS no corre, `data-inview` nunca se pone y el flotado sigue activo. */
  .benefit[data-inview='false'] .benefit__drift { animation-play-state: paused; }

  @supports (animation-timeline: view()) {
    .benefit__watermark,
    .benefit__figure,
    .benefit__glow {
      animation-timeline: --benefit;
      animation-range: cover;
      animation-timing-function: linear;
      animation-fill-mode: both;
      /* Con un timeline de scroll la duración tiene que ser `auto`: es lo que
         mapea la animación al rango completo. Un tiempo fijo la haría terminar
         de golpe al principio del recorrido. */
      animation-duration: auto;
    }
    .benefit__watermark { animation-name: benefit-deep; }
    .benefit__figure    { animation-name: benefit-mid; }
    .benefit__glow      { animation-name: benefit-glow; }
  }
}

/* --------------------------------------------------------- 13. Testimonios */
.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) { .quotes { grid-template-columns: repeat(3, 1fr); } }
.quotes > li { display: flex; }

.quote {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.quote:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(28, 21, 32, 0.08); }
.quote__stars { display: flex; gap: 3px; }
.quote blockquote {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
}
.quote figcaption { display: flex; align-items: center; gap: 12px; }
.quote__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-text);
}
.quote__who { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.quote__ctx { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ 14. FAQ */
.faq-wrap {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.faq-wrap > h2 { margin-bottom: 44px; text-align: center; }
.faq {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 0 24px;
}
.faq__item { border-bottom: 1px solid var(--line-soft); }
.faq__item:last-child { border-bottom: 0; }

.faq__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
  transition: color 0.15s var(--ease);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary:hover { color: var(--brand-text); }

.faq__sign {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  transition: transform 0.28s var(--ease), background 0.2s var(--ease);
}
.faq__item[open] .faq__sign { transform: rotate(45deg); }

.faq__answer { padding-bottom: 20px; font-size: 14px; line-height: 1.7; color: var(--body); }

/* Animación nativa de apertura donde el navegador la soporta. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content,
  .compare::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size 0.32s var(--ease), content-visibility 0.32s allow-discrete,
      opacity 0.22s var(--ease);
  }
  .faq__item[open]::details-content,
  .compare[open]::details-content { block-size: auto; opacity: 1; }
}

/* --------------------------------------------------------------- 15. Footer */
.site-footer {
  padding: 48px var(--gutter) 40px;
  background: var(--footer-bg);
  text-align: center;
}
.site-footer__inner { max-width: 960px; margin-inline: auto; }
.site-footer__logo { display: flex; justify-content: center; margin-bottom: 28px; }
.site-footer__logo img {
  height: var(--logo-h);
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.site-footer p {
  font-size: clamp(11px, 1.5vw, 13px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.site-footer p + p { margin-top: 14px; }
.site-footer .fine { font-size: clamp(10px, 1.3vw, 11.5px); color: rgba(255, 255, 255, 0.55); }
.site-footer a { color: rgba(255, 255, 255, 0.9); }

/* ------------------------------------------------------ 16. CTA fija inferior */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 48;
  padding: 10px 16px max(10px, env(safe-area-inset-bottom, 10px));
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 16px rgba(28, 21, 32, 0.07);
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s var(--ease), opacity 0.25s var(--ease);
}
.sticky-cta[data-visible='true'] { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* En pantallas grandes el botón flotante no se muestra: queda reservado
   exclusivamente para mobile, donde un CTA fija inferior sí aporta. */
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

/* ----------------------------------------------------- 17. Aparición suave */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* -------------------------------------------- 18. Preferencias del usuario */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --body: #3a3038;
    --muted: #5d4b55;
    --line: #c9b3c2;
    --line-soft: #d9c7d3;
  }
}

/* ------------------------------------------------------------ 19. Impresión */
@media print {
  .site-header, .nav-panel, .sticky-cta, .hero__bg, .hero__veil { display: none !important; }
  body { color: #000; background: #fff; }
  .section, .hero { padding: 12px 0; min-height: 0; }
  .faq__item::details-content, .compare::details-content { block-size: auto !important; opacity: 1 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 10px; }
}