/* ============================================================
   MindSession — Landing Page Styles
   Rediseño basado en Figma (archivo "Uniflou", node 436:4455)
   Stack: Bootstrap 5.3 + CSS Custom Properties
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --ms-violet:         #7F77DD;
  --ms-blue:           #5B8DEF;
  --ms-violet-2:       #A78BDD;

  --ms-navy:           #16233F;
  --ms-navy-2:         #0F1830;

  --ms-green:          #10B981;
  --ms-green-dark:     #1FAE72;
  --ms-green-2:        #34C88A;

  --ms-amber:          #F59E0B;
  --ms-red:            #EF4444;

  --ms-text:           #16233F;
  --ms-text-muted:     #64748B;
  --ms-text-light:     #94A3B8;
  --ms-text-lighter:   #B8C4D8;

  --ms-bg:             #F6F7FA;
  --ms-surface:        #FFFFFF;
  --ms-border:         #E2E8F0;

  --ms-gradient-primary: linear-gradient(120deg, #7F77DD 15%, #5B8DEF 85%);
  --ms-gradient-hero:     linear-gradient(180deg, #16233F 0%, #16233F 100%);

  --ms-shadow-sm:      0 1px 2px rgba(23,36,64,0.04);
  --ms-shadow:         0 4px 12px rgba(23,36,64,0.07);
  --ms-shadow-md:      0 4px 8px rgba(23,36,64,0.06), 0 1px 2px rgba(23,36,64,0.04);
  --ms-shadow-lg:      0 8px 20px rgba(13,26,77,0.08);

  --ms-radius:         12px;
  --ms-radius-md:      16px;
  --ms-radius-lg:      24px;
  --ms-radius-xl:      32px;

  --ms-font-heading:   'Plus Jakarta Sans', -apple-system, sans-serif;
  --ms-font-body:      'Work Sans', -apple-system, sans-serif;
  --ms-font-mono:      'Spline Sans Mono', 'IBM Plex Mono', monospace;
  --ms-font-tag:       'IBM Plex Mono', monospace;
  --ms-font-accent:    'Playwrite US Trad', cursive;

  --ms-ann-height:     0px;
}

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.ms-landing-body {
  font-family: var(--ms-font-body);
  color: var(--ms-text);
  background: var(--ms-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ms-landing-body h1, .ms-landing-body h2, .ms-landing-body h3 {
  font-family: var(--ms-font-heading);
}

/* Acento decorativo "+" con la tipografía manuscrita del diseño */
.ms-accent-plus {
  font-family: var(--ms-font-accent);
  font-weight: 400;
  background: var(--ms-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ───────────────────────────────────────────────── */
.ms-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow);
}

.ms-navbar .container {
  height: 72px;
  transition: height .2s ease;
  display: flex;
  align-items: center;
}

.ms-navbar .ms-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.ms-logo-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ms-gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ms-logo-icon img { width: 18px; height: 18px; }

.ms-navbar .ms-logo-text {
  font-family: var(--ms-font-heading);
  font-weight: 800;
  font-size: 20px;
  color: var(--ms-text);
}

.ms-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-nav-links a {
  font-family: var(--ms-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ms-text);
  text-decoration: none;
  letter-spacing: 0.16px;
  transition: color 0.2s ease;
}

.ms-nav-links a:hover { color: var(--ms-violet); }

.ms-nav-cta {
  font-family: var(--ms-font-body);
  font-size: 15px;
  font-weight: 600;
  color: #fff !important;
  background: var(--ms-gradient-primary);
  border-radius: 999px;
  padding: 13px 28px;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(127,119,221,0.35);
  transition: all 0.2s ease;
  letter-spacing: 0.15px;
}

/* "Ingresar" como enlace: mismo peso que los anclas del menú, no un botón. */
.ms-nav-login {
  font-family: var(--ms-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ms-text-muted);
  text-decoration: none;
  padding: 8px 6px;
  align-items: center;
}
.ms-nav-login:hover { color: var(--ms-text); }
.ms-mobile-nav-actions { margin-top: 16px; width: 100%; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ms-mobile-nav-login { font-family: var(--ms-font-body); font-size: 15px; font-weight: 600; color: var(--ms-text-muted); text-decoration: underline; text-underline-offset: 3px; }

.ms-nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(127,119,221,0.45);
  color: #fff !important;
}

.ms-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: none;
  border: none;
}

.ms-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ms-text);
  border-radius: 2px;
}

/* Mobile nav drawer */
.ms-mobile-nav {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(22, 35, 63, 0.97);
  backdrop-filter: blur(20px);
  z-index: 1100;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.ms-mobile-nav.is-open { display: flex; }

.ms-mobile-nav a {
  font-family: var(--ms-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 12px;
  text-align: center;
}

.ms-mobile-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }

.ms-mobile-nav-close {
  position: absolute;
  top: 24px; right: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* ── Hero Section ─────────────────────────────────────────── */
.ms-hero-section {
  background: var(--ms-surface);
  /* El hero ocupaba demasiado alto y empujaba el resto de la página fuera de
     la primera pantalla. Se bajó el aire vertical (2026-09-13); los 80px
     laterales se mantienen. */
  padding: 24px 80px 56px;
}

.ms-hero-panel {
  background: var(--ms-navy);
  border-radius: var(--ms-radius-xl);
  /* Vertical menor que horizontal: lo que sobraba era alto, no ancho. */
  padding: 44px 64px;
  display: flex;
  gap: 48px;
  align-items: stretch;
  overflow: hidden;
}

.ms-hero-kicker {
  font-family: var(--ms-font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B8C9F7;
  margin-bottom: 32px;
  display: block;
}

.ms-hero-title {
  font-family: var(--ms-font-heading);
  font-weight: 800;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.15;
  color: #F8FAFC;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}

.ms-hero-accent-line {
  width: 180px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--ms-violet) 0%, var(--ms-blue) 60%, rgba(91,140,240,0) 100%);
  margin-top: 8px;
}

.ms-hero-subtitle {
  font-family: var(--ms-font-body);
  font-size: 16px;
  color: #94A3B8;
  line-height: 1.6;
  max-width: 420px;
  margin: 24px 0 32px;
}

.ms-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

.ms-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ms-gradient-primary);
  color: #fff;
  font-family: var(--ms-font-heading);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  min-height: 44px; /* área táctil mínima en móvil */
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ms-btn-primary:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 6px 16px rgba(94,120,222,0.4); }

.ms-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  font-family: var(--ms-font-heading);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ms-btn-secondary:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* Tarjetas de portal en el hero */
.ms-hero-right { display: flex; flex-direction: column; gap: 20px; width: 480px; max-width: 100%; }

.ms-portal-card {
  position: relative;
  height: 220px;
  border-radius: var(--ms-radius-lg);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ms-portal-card:hover {
  transform: scale(1.05);
  z-index: 2;
  box-shadow: 0 20px 40px rgba(0,0,0,0.30);
}

.ms-portal-card-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ms-portal-card-overlay {
  position: absolute;
  inset: 0;
}

.ms-portal-card.therapist .ms-portal-card-overlay {
  background: linear-gradient(rgba(22,35,63,0.4), rgba(22,35,63,0.4)), rgba(127,119,221,0.8);
}

.ms-portal-card.patient .ms-portal-card-overlay {
  background: linear-gradient(rgba(22,35,63,0.4), rgba(22,35,63,0.4)), rgba(91,141,239,0.85);
}

.ms-portal-card-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }

.ms-portal-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 6px 12px;
  border-radius: 200px;
  font-family: var(--ms-font-mono);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
}

.ms-portal-card.therapist .ms-portal-badge { background: var(--ms-blue); }
.ms-portal-card.patient .ms-portal-badge { background: var(--ms-green); }

.ms-portal-card-title {
  font-family: var(--ms-font-heading);
  font-weight: 700;
  font-size: 22px;
  color: #fff;
}

.ms-portal-card-desc {
  font-family: var(--ms-font-body);
  font-size: 13px;
  color: #fff;
  opacity: 0.85;
}

.ms-portal-card-btn {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  background: #fff;
  color: var(--ms-navy);
  font-family: var(--ms-font-heading);
  font-weight: 700;
  font-size: 12px;
  padding: 8px 16px;
  border-radius: 999px;
}

/* ── Secciones generales ──────────────────────────────────── */
.ms-section-tag {
  display: inline-flex;
  align-items: center;
  background: var(--ms-surface);
  box-shadow: var(--ms-shadow-sm);
  border: 1px solid var(--ms-border);
  font-family: var(--ms-font-tag);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-violet);
  padding: 6px 16px;
  border-radius: 100px;
}

.ms-section-title {
  font-family: var(--ms-font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 36px);
  line-height: 1.2;
  color: var(--ms-text);
  letter-spacing: -0.01em;
}

.ms-section-subtitle {
  font-family: var(--ms-font-body);
  font-size: 16px;
  color: var(--ms-text-muted);
  line-height: 1.6;
}

/* ── Roles section (tarjeta partida) ──────────────────────── */




















/* min-height 44px: es un enlace de texto pero es el CTA de la tarjeta, y en
   móvil medía 21px de alto — por debajo del área táctil mínima. El padding
   vertical no cambia cómo se ve; solo agranda la zona que responde al toque. */

/* ── Proceso (1,2,3) ──────────────────────────────────────── */
.ms-process-section {
  background: var(--ms-surface);
  padding: 72px 80px;
  position: relative;
  overflow: hidden;
}

.ms-process-header, .ms-process-steps { position: relative; z-index: 1; }

.ms-process-header { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 56px; }

.ms-process-steps { display: flex; gap: 24px; flex-wrap: wrap; }

.ms-process-step { flex: 1; min-width: 220px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

.ms-process-step-number {
  width: 40px; height: 40px;
  border-radius: 20px;
  background: var(--ms-gradient-primary);
  color: #fff;
  font-family: var(--ms-font-heading);
  font-weight: 800;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 9px rgba(125,120,222,0.2);
}

.ms-process-step-title { font-family: var(--ms-font-heading); font-weight: 800; font-size: 18px; color: var(--ms-text); }
.ms-process-step-desc { font-family: var(--ms-font-body); font-size: 14px; color: var(--ms-text-muted); line-height: 1.5; }

/* ── Beneficios ───────────────────────────────────────────── */
.ms-benefits-section { background: var(--ms-surface); padding: 72px 80px; }

.ms-benefits-header { max-width: 720px; margin: 0 0 48px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ms-benefits-header .ms-section-title { font-size: clamp(28px, 3.6vw, 40px); }
.ms-benefits-header .ms-section-subtitle { max-width: 560px; }

/* ── Testimonios ──────────────────────────────────────────── */
.ms-testimonials-section { background: var(--ms-bg); padding: 56px 80px; }
.ms-testimonials-inner { max-width: 1240px; margin: 0 auto; }
.ms-testimonials-head { max-width: 680px; margin-bottom: 36px; }
.ms-testimonials-head .ms-section-title { margin-top: 12px; }

.ms-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.ms-testimonial-card {
  margin: 0;
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ms-testimonial-text {
  margin: 0;
  font-family: var(--ms-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ms-text);
}
.ms-testimonial-author { display: flex; align-items: center; gap: 12px; }
.ms-testimonial-author > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.ms-testimonial-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ms-testimonial-initial {
  display: flex; align-items: center; justify-content: center;
  background: var(--ms-navy); color: #fff; font-family: var(--ms-font-heading); font-weight: 700; font-size: 16px;
}
.ms-testimonial-name { font-family: var(--ms-font-heading); font-size: 14px; font-weight: 700; color: var(--ms-text); }
.ms-testimonial-role { font-family: var(--ms-font-body); font-size: 12.5px; color: var(--ms-text-muted); }

/* Un solo testimonio: a lo ancho, con la cita como protagonista. La misma
   tarjeta de 300px en una grilla de tres dejaba dos tercios vacíos. */
.ms-testimonials-grid.is-single { grid-template-columns: 1fr; }
.is-single .ms-testimonial-card { max-width: 860px; padding: 40px 44px; gap: 26px; }
.is-single .ms-testimonial-text { font-family: var(--ms-font-heading); font-size: clamp(19px, 2vw, 24px); font-weight: 600; line-height: 1.45; }
.is-single .ms-testimonial-photo { width: 56px; height: 56px; }
.is-single .ms-testimonial-name { font-size: 16px; }
.is-single .ms-testimonial-role { font-size: 14px; }

@media (max-width: 991px) { .ms-testimonials-section { padding: 48px 40px; } }
@media (max-width: 575px) {
  .ms-testimonials-section { padding: 40px 24px; }
  .ms-testimonial-card, .is-single .ms-testimonial-card { padding: 24px 22px; }
}

/* ── Precios (mantenida, restilizada) ────────────────────── */
.ms-pricing-section { background: var(--ms-surface); padding: 64px 80px 80px; }

.ms-pricing-card {
  position: relative;
  background: var(--ms-surface);
  border: 1.5px solid var(--ms-violet);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  padding: 40px 36px;
  text-align: center;
  overflow: hidden;
}

.ms-pricing-card--discount { border: 2px solid var(--ms-violet); box-shadow: 0 8px 24px rgba(127,119,221,0.22); }

/* Cinta diagonal en la esquina, solo cuando hay descuento activo */
.ms-pricing-ribbon {
  position: absolute;
  top: 18px;
  right: -42px;
  width: 170px;
  transform: rotate(45deg);
  background: var(--ms-gradient-primary);
  color: #fff;
  font-family: var(--ms-font-tag);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 0;
  box-shadow: 0 2px 8px rgba(245,158,11,0.35);
}

.ms-pricing-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ms-font-tag);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-violet);
  margin-bottom: 14px;
}

.ms-pricing-discount-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ms-violet);
  color: #fff;
  font-family: var(--ms-font-tag);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 2px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

.ms-pricing-amount { font-family: var(--ms-font-heading); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--ms-text); margin-bottom: 6px; }
.ms-pricing-amount span { font-family: var(--ms-font-body); font-size: 15px; font-weight: 500; color: var(--ms-text-muted); }
.ms-pricing-amount-before {
  text-decoration: line-through;
  text-decoration-color: var(--ms-red);
  text-decoration-thickness: 2px;
  opacity: 0.65;
  font-size: 0.55em;
  vertical-align: middle;
  margin-right: 8px;
  color: var(--ms-text-muted);
}
.ms-pricing-savings {
  display: inline-block;
  font-family: var(--ms-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ms-green-dark);
  background: rgba(16,185,129,0.1);
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.ms-pricing-note { font-family: var(--ms-font-body); font-size: 13px; color: var(--ms-text-muted); margin-bottom: 24px; }

.ms-pricing-list { text-align: left; }

.ms-pricing-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-pricing-list li { display: flex; align-items: center; gap: 10px; font-family: var(--ms-font-body); font-size: 14px; color: var(--ms-text); }
.ms-pricing-list li i { color: var(--ms-violet); }

.ms-pricing-extras-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ms-pricing-extra { display: flex; align-items: flex-start; gap: 14px; }
.ms-pricing-extra i {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(127,119,221,0.1); color: var(--ms-violet);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.ms-pricing-extra strong { display: block; font-family: var(--ms-font-heading); font-size: 14px; color: var(--ms-text); margin-bottom: 2px; }
.ms-pricing-extra span { font-family: var(--ms-font-body); font-size: 13px; color: var(--ms-text-muted); }

/* ── Contacto ─────────────────────────────────────────────── */
/* Aire bajado junto con el del hero (2026-09-13): la sección medía 946px,
   más que una pantalla completa. */
.ms-contact-section { background: #F0F4FF; padding: 56px 80px 64px; }

/* ── Campos opcionales plegados ────────────────────────────────────────
   Ver el comentario en pages/home.html.erb: el formulario pedía cinco campos
   cuando lo obligatorio son dos. Esto es un <details> nativo; lo único que
   hace el CSS es que no parezca un widget del navegador. */
.ms-form-more { border: 0; }
.ms-form-more-toggle {
  font-family: var(--ms-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ms-primary);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* El triángulo por defecto de Safari/Chrome */
.ms-form-more-toggle::-webkit-details-marker { display: none; }
.ms-form-more-toggle::before {
  content: "+";
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}
.ms-form-more[open] .ms-form-more-toggle::before { content: "−"; }
.ms-form-more-toggle:focus-visible {
  outline: 2px solid var(--ms-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* ⚠️ El display VA condicionado a [open]. El navegador oculta el contenido de
   un <details> cerrado con `display: none`, y una regla suelta
   `.ms-form-more-body { display: flex }` la pisa: el desplegable queda
   "cerrado" pero con los campos a la vista. Pasó al escribir esto. */
.ms-form-more[open] > .ms-form-more-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 14px;
}

.ms-contact-container {
  background: var(--ms-surface);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow-lg);
  /* Tres paddings anidados (sección → contenedor → formulario) se sumaban y
     hacían la tarjeta más alta que una pantalla. Se apretaron los tres
     (2026-09-13). */
  padding: 44px;
  display: flex;
  gap: 56px;
}

.ms-contact-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 28px; }

.ms-contact-title { font-family: var(--ms-font-heading); font-weight: 800; font-size: 36px; color: var(--ms-text); }

.ms-contact-desc { font-family: var(--ms-font-body); font-size: 15px; color: var(--ms-text-muted); line-height: 1.6; }

.ms-contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #F8F9FF;
  border: 1px solid #E8ECF8;
  border-radius: 12px;
  padding: 14px 16px;
}

.ms-contact-item-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #EEF4FC;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-blue);
  flex-shrink: 0;
}

.ms-contact-item-label { font-family: var(--ms-font-body); font-weight: 500; font-size: 11px; text-transform: uppercase; color: var(--ms-text-light); }
.ms-contact-item-value { font-family: var(--ms-font-body); font-weight: 600; font-size: 14px; color: var(--ms-text); }

.ms-contact-form {
  flex: 1;
  min-width: 0;
  background: #FAFBFF;
  border: 1px solid #E8ECF8;
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ms-form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.ms-form-group { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.ms-form-label { font-family: var(--ms-font-body); font-weight: 600; font-size: 13px; color: var(--ms-text); }

.ms-form-input, .ms-form-textarea {
  width: 100%;
  background: var(--ms-surface);
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--ms-font-body);
  font-size: 14px;
  color: var(--ms-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  outline: none;
  transition: border-color 0.2s ease;
}

.ms-form-input { height: 46px; }
.ms-form-textarea { min-height: 130px; resize: vertical; }

.ms-form-input::placeholder, .ms-form-textarea::placeholder { color: var(--ms-text-lighter); }
.ms-form-input:focus, .ms-form-textarea:focus { border-color: var(--ms-violet); box-shadow: 0 0 0 3px rgba(127,119,221,0.15); }

.ms-contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--ms-gradient-primary);
  color: #fff;
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 10px rgba(94,120,222,0.35);
  transition: all 0.2s ease;
}

.ms-contact-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(94,120,222,0.45); }
.ms-contact-submit:disabled { opacity: 0.7; cursor: default; transform: none; }

.ms-contact-submit-arrow {
  width: 26px; height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* ── Footer ───────────────────────────────────────────────── */
.ms-footer { background: var(--ms-navy-2); }

.ms-footer-top { padding: 72px 80px 56px; }

.ms-footer-brand { max-width: 380px; display: flex; flex-direction: column; gap: 20px; }

.ms-footer-logo { display: flex; align-items: center; gap: 8px; }
.ms-footer-logo-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ms-gradient-primary);
  display: flex; align-items: center; justify-content: center;
}
.ms-footer-logo-icon img { width: 18px; height: 18px; }
.ms-footer-logo-text {
  font-family: var(--ms-font-heading); font-weight: 800; font-size: 22px;
  background: var(--ms-gradient-primary);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.ms-footer-tagline { font-family: var(--ms-font-body); font-size: 14px; color: var(--ms-text-muted); line-height: 1.65; }

.ms-footer-social { display: flex; gap: 10px; }
.ms-footer-social a {
  width: 36px; height: 36px; border-radius: 10px;
  background: #1B2A4A; border: 1px solid #2D3F69;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7); text-decoration: none; transition: all 0.2s ease;
}
.ms-footer-social a:hover { background: #24365C; color: #fff; }

.ms-footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.ms-footer-col { display: flex; flex-direction: column; gap: 14px; min-width: 140px; }
.ms-footer-col-title { font-family: var(--ms-font-heading); font-weight: 700; font-size: 13px; color: #fff; }
.ms-footer-col-bar { width: 24px; height: 2px; border-radius: 1px; }
.ms-footer-col a, .ms-footer-col span.ms-footer-static {
  font-family: var(--ms-font-body); font-size: 13px; color: var(--ms-text-muted);
  text-decoration: none; transition: color 0.2s ease;
}
.ms-footer-col a:hover { color: rgba(255,255,255,0.85); }

.ms-footer-divider { height: 1px; background: rgba(255,255,255,0.08); border: none; margin: 0; }

.ms-footer-bottom { padding: 24px 80px 32px; font-family: var(--ms-font-body); font-size: 12px; color: #374F72; text-align: center; }

/* ── Animaciones de entrada ───────────────────────────────── */
.ms-fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.ms-fade-in.visible { opacity: 1; transform: translateY(0); }
.ms-fade-in-delay-1 { transition-delay: 0.08s; }
.ms-fade-in-delay-2 { transition-delay: 0.16s; }
.ms-fade-in-delay-3 { transition-delay: 0.24s; }
.ms-fade-in-delay-4 { transition-delay: 0.32s; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ms-hero-section { padding-left: 40px; padding-right: 40px; }
  .ms-process-section, .ms-benefits-section, .ms-pricing-section, .ms-contact-section { padding-left: 40px; padding-right: 40px; }
  .ms-footer-top, .ms-footer-bottom { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 991px) {
  .ms-nav-links, .ms-nav-cta.d-lg-inline-flex { display: none !important; }
  .ms-hamburger { display: flex !important; }

  .ms-hero-panel { flex-direction: column; padding: 40px; }
  .ms-hero-right { width: 100%; }


  .ms-contact-container { flex-direction: column; padding: 40px; }

  .ms-pricing-extras-row { grid-template-columns: 1fr; gap: 20px; }

  .ms-footer-cols { gap: 40px; }
}

@media (max-width: 767px) {
  .ms-hero-section,
  .ms-process-section, .ms-benefits-section, .ms-pricing-section, .ms-contact-section,
  .ms-footer-top, .ms-footer-bottom {
    padding-left: 20px; padding-right: 20px;
  }

  /* Paddings verticales compactos: los de desktop (96-100px) generan
     pantallas de blanco entre secciones en un teléfono */
  .ms-hero-section { padding-bottom: 48px; }
  .ms-process-section { padding-top: 56px; padding-bottom: 56px; }
  .ms-benefits-section { padding-top: 56px; padding-bottom: 56px; }
  .ms-pricing-section { padding-top: 56px; padding-bottom: 56px; }
  .ms-contact-section { padding-top: 48px; padding-bottom: 56px; }

  .ms-benefits-header { margin-bottom: 36px; }
  .ms-process-header { margin-bottom: 36px; }

  /* Sin fade-in en mobile: el observer dispara tarde al scrollear rápido
     y deja secciones enteras invisibles por un instante */
  .ms-fade-in { opacity: 1; transform: none; transition: none; }

  .ms-navbar .container { padding-left: 16px; padding-right: 16px; }

  .ms-hero-panel { padding: 28px; border-radius: var(--ms-radius-lg); }
  .ms-hero-actions a { width: 100%; justify-content: center; }

  /* Título del hero: en 375px el tamaño de desktop quiebra en 3 líneas raras */
  .ms-hero-title { font-size: clamp(30px, 8.5vw, 34px); }
  .ms-hero-kicker { margin-bottom: 20px; }
  .ms-hero-subtitle { margin: 20px 0 24px; }

  /* Tarjetas de portal del hero más compactas: altura automática para
     que el contenido nunca se corte y ambas queden parejas */
  .ms-portal-card { height: auto; min-height: 180px; padding: 24px; gap: 16px; }
  .ms-hero-right { gap: 16px; }

  .ms-process-steps { flex-direction: column; }

  .ms-contact-container { padding: 24px; gap: 32px; }
  .ms-contact-form { padding: 24px; }
  .ms-contact-submit { width: 100%; white-space: nowrap; padding: 14px 20px; }
  .ms-form-row { flex-direction: column; }

  .ms-footer-top { padding-top: 48px; padding-bottom: 40px; }
  .ms-footer-cols { flex-direction: column; gap: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO ORIENTADO A CONVERSIÓN (2026-09-08)
   El hero pasó de dos tarjetas de acceso (Terapeuta / Paciente) a un
   formulario de registro. Las tarjetas quedaron redundantes cuando el login
   se unificó en /ingresar: "Acceder" de la barra sirve para ambos roles.
   ══════════════════════════════════════════════════════════════════════ */

.ms-hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 430px;
}
.ms-hero-points li {
  font-family: var(--ms-font-body);
  font-size: 14.5px;
  color: #CBD5E1;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.ms-hero-points i { color: var(--ms-green); font-size: 16px; flex-shrink: 0; margin-top: 2px; }


/* ── Barra de prueba social bajo el hero ── */
/* Pegada al hero: el espacio grande que quedaba entre ambos la desconectaba
   de lo que acaba de leerse. */
.ms-trustbar { padding: 4px 24px 32px; }
.ms-trustbar-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ms-trustbar-text {
  font-family: var(--ms-font-body);
  font-size: 14.5px;
  color: var(--ms-text-muted);
  margin: 0;
}
.ms-trustbar-text strong { color: var(--ms-text); font-weight: 700; }

/* Botón secundario a propósito: contorno y fondo blanco, para que se note y
   se pueda accionar sin robarle protagonismo al CTA principal del hero, que
   es el único con el degradado lleno. */
.ms-trustbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid rgba(127, 119, 221, 0.45);
  background: var(--ms-surface);
  color: var(--ms-violet);
  font-family: var(--ms-font-body);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--ms-shadow-sm);
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ms-trustbar-btn:hover {
  border-color: var(--ms-violet);
  background: #F6F5FE;
  color: var(--ms-violet);
  transform: translateY(-1px);
  box-shadow: var(--ms-shadow);
}
.ms-trustbar-btn-arrow { transition: transform .18s ease; }
.ms-trustbar-btn:hover .ms-trustbar-btn-arrow { transform: translateX(3px); }

@media (max-width: 992px) {
  .ms-hero-points { max-width: none; }
}

/* ── Sección de seguridad (objeción #1 de quien maneja fichas clínicas) ── */
/* Panel redondeado y contenido, igual que el hero: a sangre completa cortaba
   el ritmo de la página, que en todo lo demás respira con márgenes. */
.ms-security-section { padding: 40px 24px; background: var(--ms-surface); }
.ms-security-inner {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--ms-navy);
  border-radius: var(--ms-radius-xl);
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ms-security-head, .ms-security-list, .ms-security-foot { position: relative; z-index: 1; }
.ms-security-head { max-width: 640px; margin-bottom: 40px; }
.ms-security-head .ms-section-title { color: #F8FAFC; }
.ms-security-head .ms-section-subtitle { color: #94A3B8; max-width: 560px; }

/* Eran seis tarjetas con fondo semiopaco y desenfoque, montadas sobre una foto
   de stock. Sin la foto, las tarjetas dejan de tener razón de ser: queda una
   lista en dos columnas, con un ícono chico y una línea fina entre filas. */
.ms-security-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
}
.ms-security-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* landing_icon emite <svg>, no <i>: con el selector viejo el ícono quedaba
   en 16px y sin color, invisible sobre el navy. */
.ms-security-item > svg {
  width: 18px;
  height: 18px;
  color: var(--ms-green);
  flex-shrink: 0;
  margin-top: 2px;
}
.ms-security-item strong {
  display: block;
  font-family: var(--ms-font-heading);
  font-size: 15.5px;
  font-weight: 700;
  color: #F1F5F9;
  margin-bottom: 4px;
}
.ms-security-item span {
  font-family: var(--ms-font-body);
  font-size: 13.5px;
  color: #94A3B8;
  line-height: 1.55;
}
.ms-security-foot { margin: 28px 0 0; }
.ms-security-foot a {
  font-family: var(--ms-font-body);
  font-size: 14px;
  color: #CBD5E1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ms-security-foot a:hover { color: #fff; }
.ms-security-foot-sep { color: #64748B; margin: 0 10px; }

@media (max-width: 768px) {
  .ms-security-section { padding: 24px 16px; }
  .ms-security-inner { padding: 44px 24px; border-radius: var(--ms-radius-lg); }
  .ms-security-list { grid-template-columns: 1fr; column-gap: 0; }
}

/* ── Preguntas frecuentes ── */
.ms-faq-section { padding: 64px 24px; background: var(--ms-bg); }
.ms-faq-inner { max-width: 780px; margin: 0 auto; }
.ms-faq-head { text-align: center; margin-bottom: 40px; }

.ms-faq-list { display: flex; flex-direction: column; gap: 12px; }
.ms-faq-item {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-md);
  /* El relleno vertical vive en el <summary>, no acá: solo el summary abre
     la pregunta, y con el relleno en la tarjeta la zona que respondía al
     toque era la línea de texto (≈22px). Así el área táctil es la tarjeta
     completa sin cambiar cómo se ve. */
  padding: 0 22px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ms-faq-item[open] { border-color: #C7D2FE; box-shadow: var(--ms-shadow); }
.ms-faq-item > p { padding-bottom: 18px; }
.ms-faq-item summary {
  font-family: var(--ms-font-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--ms-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  min-height: 44px;
}
.ms-faq-item summary::-webkit-details-marker { display: none; }
.ms-faq-item summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--ms-violet);
  line-height: 1;
  flex-shrink: 0;
}
.ms-faq-item[open] summary::after { content: "−"; }
.ms-faq-item p {
  font-family: var(--ms-font-body);
  font-size: 14.5px;
  color: var(--ms-text-muted);
  line-height: 1.65;
  margin: 12px 0 0;
}
.ms-faq-item p a { color: var(--ms-violet); font-weight: 600; }

@media (max-width: 768px) {
  .ms-faq-section { padding: 60px 20px; }
  .ms-faq-item summary { font-size: 15px; }
}

.ms-form-optional { font-weight: 400; color: var(--ms-text-lighter); font-size: 12px; }
.ms-form-fineprint {
  font-family: var(--ms-font-body);
  font-size: 12px;
  color: var(--ms-text-muted);
  margin: 12px 0 0;
  text-align: center;
}

/* El hero ahora comparte espacio con el formulario: la columna de texto es más
   angosta que antes, así que el titular necesita un tope algo menor para no
   partirse en tres líneas. */
/* Acotado a escritorio: más abajo del archivo hay un @media (max-width: 992px)
   que pone .ms-hero-right al 100 %, y esta regla va después en el archivo, así
   que sin el min-width lo pisaría en móvil.
   El panel se topa y se centra: antes se estiraba a todo el ancho de la
   pantalla y en monitores grandes quedaba una franja vacía enorme entre el
   texto (limitado a ~420 px) y la tarjeta del formulario. */
@media (min-width: 993px) {
  .ms-hero-section { padding-bottom: 30px; }
  .ms-hero-panel { max-width: 1240px; margin: 0 auto; }
  /* La órbita se corre a la izquierda para caer en el hueco entre las dos
     personas de la ilustración; centrada en su columna quedaba justo sobre la
     cara del paciente. */
  .ms-orbit-stage { transform: translateX(-130px); }
  .ms-hero-right { width: 430px; flex-shrink: 0; }
  .ms-hero-title { font-size: clamp(34px, 3.4vw, 46px); max-width: 620px; }
  .ms-hero-subtitle, .ms-hero-points { max-width: 520px; }
}

/* ══════════════════════════════════════════════════════════════════════
   TARJETA ORBITAL DEL HERO
   Mantiene el tratamiento de las tarjetas de acceso originales —foto de
   consulta en transparencia bajo un velo de la gama de marca— y encima pone
   el logo con las funcionalidades girando a su alrededor.
   ══════════════════════════════════════════════════════════════════════ */
.ms-orbit-card {
  position: relative;
  padding: 10px 0 0;
  /* Esta columna es la que fija el alto del hero: el texto de la izquierda
     siempre es más corto. Bajar solo los padding no servía de nada mientras
     esto siguiera en 520px. El mínimo no puede bajar mucho más sin que los
     anillos de la órbita (--r hasta 180px) se recorten. */
  min-height: 440px;
  display: flex;
  flex-direction: column;
}

.ms-orbit-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 400px;
}

/* El logo al centro, en vidrio sobre la foto */
.ms-orbit-core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.05), 0 8px 26px rgba(0, 0, 0, 0.25);
}
.ms-orbit-core img { width: 42px; height: 42px; }

/* El anillo gira; cada pastilla contrarresta el giro para que su texto se lea
   siempre horizontal y nunca aparezca de cabeza. */
.ms-orbit-ring {
  position: absolute;
  inset: 0;
  animation: ms-orbit-spin 34s linear infinite;
}
.ms-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r, 128px))) rotate(calc(-1 * var(--a)));
}
.ms-orbit-item > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--ms-font-body);
  font-size: 10.5px;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 1px 6px rgba(10, 18, 38, 0.5);
  animation: ms-orbit-spin-rev 34s linear infinite;
}
.ms-orbit-item i { font-size: 12.5px; opacity: 0.9; }

@keyframes ms-orbit-spin     { to { transform: rotate(360deg); } }
@keyframes ms-orbit-spin-rev { to { transform: rotate(-360deg); } }


/* Quien pidió menos movimiento en su sistema ve la órbita quieta. */
@media (prefers-reduced-motion: reduce) {
  .ms-orbit-ring, .ms-orbit-item > span { animation: none; }
}

@media (max-width: 992px) {
  .ms-orbit-card { min-height: 400px; }
  .ms-orbit-item { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r, 128px) * 0.82)) rotate(calc(-1 * var(--a))); }
}
@media (max-width: 420px) {
  .ms-orbit-item { transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r, 128px) * 0.62)) rotate(calc(-1 * var(--a))); }
  .ms-orbit-item > span { font-size: 10.5px; padding: 5px 9px; }
  .ms-orbit-core { width: 84px; height: 84px; }
  .ms-orbit-core img { width: 38px; height: 38px; }
}

/* ── Ilustración de fondo del hero ─────────────────────────────────────── */
.ms-hero-panel { position: relative; }
.ms-hero-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 68%;
  max-width: 760px;
  height: auto;
  opacity: 0.36;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* Se desvanece hacia la izquierda y hacia arriba para fundirse con el navy
     en vez de quedar recortada. */
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%),
                      linear-gradient(to top, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to left, #000 55%, transparent 100%),
                      linear-gradient(to top, #000 60%, transparent 100%);
          mask-composite: intersect;
}
/* El contenido va por encima de la ilustración. */
.ms-hero-panel > .ms-fade-in,
.ms-hero-panel > .ms-hero-right { position: relative; z-index: 1; }

@media (max-width: 992px) {
  .ms-hero-bg { width: 100%; max-width: none; opacity: 0.2; }
  .ms-orbit-card { min-height: 360px; }
}

/* ── Cierre con llamada a la acción ─────────────────────────────────────
   La página terminaba en el FAQ; quien se convencía leyendo tenía que volver
   a subir para actuar. */
/* A todo el ancho y en navy: es el último bloque antes del footer y tiene
   que verse como un cambio de escena, no como otra tarjeta más. */
.ms-closing { padding: 0; background: var(--ms-navy); }
.ms-closing-panel {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 68px;
  text-align: center;
}
.ms-btn-lg { font-size: 16px; padding: 16px 32px; }
.ms-closing-title {
  font-family: var(--ms-font-heading);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  color: #F8FAFC;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.ms-closing-sub {
  font-family: var(--ms-font-body);
  font-size: 16px;
  color: #94A3B8;
  margin: 0 auto 30px;
  max-width: 520px;
  line-height: 1.6;
}
.ms-closing-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 768px) {
  .ms-closing-panel { padding: 56px 24px; }
  .ms-closing-actions .ms-btn-primary,
  .ms-closing-actions .ms-btn-secondary { width: 100%; justify-content: center; }
}

/* ── Iconos SVG en línea ───────────────────────────────────────────────
   Reemplazan a la fuente de Bootstrap Icons. Se dimensionan con la tipografía
   que los rodea (1em) y heredan su color, igual que hacía la fuente, para que
   ninguna regla existente tenga que cambiar. */
.ms-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  flex-shrink: 0;
}

/* ── Barra fija de acción (solo móvil) ─────────────────────────────────
   En celular la página mide unas 16 pantallas. Sin esto, quien se convence
   leyendo las preguntas tiene que volver arriba para poder actuar. */
.ms-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(22, 35, 63, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ms-sticky-cta-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ms-sticky-cta-text strong {
  font-family: var(--ms-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #F8FAFC;
}
.ms-sticky-cta-text span { font-family: var(--ms-font-body); font-size: 11.5px; color: #94A3B8; }
.ms-sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ms-gradient-primary);
  color: #fff;
  text-decoration: none;
  font-family: var(--ms-font-body);
  font-weight: 700;
  font-size: 14.5px;
  padding: 11px 22px;
  min-height: 44px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ms-sticky-cta-btn:hover, .ms-sticky-cta-btn:active { color: #fff; }

/* El footer necesita aire extra para que la barra no lo tape. */
@media (max-width: 991.98px) {
  .ms-footer { padding-bottom: 96px; }
}


/* ── Microcopy bajo el CTA principal ───────────────────────────────────
   "7 días gratis · Sin tarjeta · Configuración simple". Va debajo del botón
   y no dentro: la objeción que resuelve (¿me van a cobrar?) aparece justo
   después de decidir hacer clic, no antes. */
.ms-hero-microcopy {
  font-family: var(--ms-font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  margin: 14px 0 0;
}
.ms-closing-microcopy {
  font-family: var(--ms-font-body);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.68);
  margin: 18px 0 0;
  text-align: center;
}
.ms-closing-microcopy span { color: rgba(255, 255, 255, 0.5); }

@media (max-width: 767px) {
  .ms-hero-microcopy { font-size: 12px; margin-top: 12px; }
  .ms-closing-microcopy { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   EL PROBLEMA — banda "hoy → con MindSession"

   Sin tarjetas, sin sombras y sin degradados a propósito: el brief pide
   evitar el patrón de tres cards, y además el contenido pide lo contrario
   de una grilla prolija. La columna izquierda desalinea las etiquetas
   (--x las corre, --rot las inclina un grado) para que se LEA el desorden;
   la derecha es un bloque sólido, alineado, sin ruido.
   ══════════════════════════════════════════════════════════════════════ */
.ms-problem-section { background: var(--ms-bg); padding: 64px 80px; }
.ms-problem-inner { max-width: 1240px; margin: 0 auto; }

.ms-problem-head { max-width: 720px; margin-bottom: 40px; }
.ms-problem-head .ms-section-title { margin-bottom: 14px; }

.ms-problem-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 32px;
}

.ms-problem-label {
  display: inline-block;
  font-family: var(--ms-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-text-muted);
  margin-bottom: 18px;
}
.ms-problem-label-on-dark { color: rgba(255, 255, 255, 0.6); }

/* ── Columna "hoy": el desorden ── */
/* Ancho acotado: con cuatro etiquetas en una columna de 1fr quedaban en una
   sola línea larga y se perdía la idea de "cosas sueltas". Así caen en dos
   filas desalineadas. */
.ms-problem-scatter { list-style: none; margin: 0 0 18px; padding: 0; max-width: 340px; }
.ms-problem-scatter li {
  display: inline-block;
  margin: 0 0 10px var(--x, 0%);
  padding: 9px 15px;
  background: var(--ms-bg);
  border: 1px dashed #C9D4E6;
  border-radius: 8px;
  font-family: var(--ms-font-body);
  font-size: 14px;
  color: var(--ms-text-muted);
  transform: rotate(var(--rot, 0deg));
}
.ms-problem-caption {
  font-family: var(--ms-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ms-text-muted);
  max-width: 38ch;
  margin: 0;
}

.ms-problem-arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ms-bg);
  color: var(--ms-primary);
  flex-shrink: 0;
}
.ms-problem-arrow svg { width: 20px; height: 20px; }

/* ── Columna "con MindSession": el orden ── */
.ms-problem-after {
  background: var(--ms-navy);
  border-radius: var(--ms-radius-lg);
  padding: 32px;
  color: #fff;
}
.ms-problem-after-title {
  font-family: var(--ms-font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 18px;
}
.ms-problem-after-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-problem-after-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--ms-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
.ms-problem-after-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: #8FE3C0; }

@media (max-width: 991px) {
  .ms-problem-section { padding: 48px 40px; }
  /* La flecha apunta hacia abajo cuando las columnas se apilan. */
  .ms-problem-split { grid-template-columns: 1fr; gap: 24px; justify-items: stretch; }
  .ms-problem-arrow { justify-self: center; transform: rotate(90deg); }
  .ms-problem-scatter li { margin-left: 0; transform: none; }
}

@media (max-width: 575px) {
  .ms-problem-section { padding: 40px 24px; }
  .ms-problem-after { padding: 24px; }
  .ms-problem-after-title { font-size: 21px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BENEFICIOS — lista editorial

   Reemplaza seis tarjetas idénticas en dos filas de tres. Sin fondo, sin
   borde, sin sombra y sin ícono: el peso lo lleva la tipografía y una línea
   fina entre filas. El índice numerado SÍ codifica algo real — son tres
   cambios que ocurren en ese orden en la semana de la terapeuta— y por eso
   se mantiene; no es decoración.
   ══════════════════════════════════════════════════════════════════════ */
.ms-benefits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 980px;
}

.ms-benefit-row {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--ms-border);
}
.ms-benefit-row:last-child { border-bottom: 1px solid var(--ms-border); }

.ms-benefit-index {
  font-family: var(--ms-font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--ms-primary);
  opacity: 0.28;
  font-variant-numeric: tabular-nums;
}

.ms-benefit-row-title {
  font-family: var(--ms-font-display);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ms-text);
  margin: 0 0 8px;
  text-wrap: balance;
}
.ms-benefit-row-desc {
  font-family: var(--ms-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ms-text-muted);
  margin: 0;
  max-width: 62ch;
}

@media (max-width: 767px) {
  .ms-benefit-row { grid-template-columns: 52px 1fr; gap: 16px; padding: 22px 0; }
  .ms-benefit-index { font-size: 24px; }
  .ms-benefit-row-desc { font-size: 15px; }
}

/* ── Precios: garantías y lista compacta ──────────────────────────────── */
.ms-pricing-assurances {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.ms-pricing-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ms-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ms-text);
}
.ms-pricing-assurances svg { width: 16px; height: 16px; color: #15803D; }

/* Diez funciones en una columna quedaban larguísimas; en dos columnas se leen
   de un vistazo y la tarjeta deja de empujar el CTA fuera de pantalla. */
.ms-pricing-list-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
@media (max-width: 575px) {
  .ms-pricing-list-compact { grid-template-columns: 1fr; }
  .ms-pricing-assurances { gap: 8px 18px; }
  .ms-pricing-assurances li { font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════════════
   EL PRODUCTO DE VERDAD — capturas reales

   La captura ES el contenido, así que el marco tiene que desaparecer: un
   borde de 1px y una sombra muy suave bastan para separarla del fondo sin
   convertirla en "otra tarjeta más". Nada de mockups de laptop ni marcos de
   navegador falsos.
   ══════════════════════════════════════════════════════════════════════ */
.ms-product-section { background: var(--ms-bg); padding: 72px 80px; }
.ms-product-inner { max-width: 1240px; margin: 0 auto; }

.ms-product-head { max-width: 680px; margin-bottom: 40px; }
.ms-product-head .ms-section-title { margin: 12px 0 14px; }

.ms-product-hero-shot,
.ms-product-shot { margin: 0; }

.ms-product-hero-shot img,
.ms-product-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--ms-border);
  border-radius: 12px;
  /* Solo el borde separa la captura del fondo: sin sombra, la imagen es la
     protagonista y no "una tarjeta con una imagen dentro". */
}

.ms-product-hero-shot {
  max-width: 1240px;
  margin: 0 auto 72px;
}

.ms-product-row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  align-items: center;
  gap: 56px;
  margin-bottom: 64px;
}
.ms-product-row:last-child { margin-bottom: 0; }
.ms-product-row-reverse { grid-template-columns: minmax(0, 1.38fr) minmax(0, 0.62fr); }

.ms-product-row-title {
  font-family: var(--ms-font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 700;
  line-height: 1.24;
  color: var(--ms-text);
  margin: 0 0 12px;
  text-wrap: balance;
}
.ms-product-row-desc {
  font-family: var(--ms-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ms-text-muted);
  margin: 0;
  max-width: 52ch;
}

@media (max-width: 991px) {
  .ms-product-section { padding: 56px 40px; }
  .ms-product-hero-shot { margin-bottom: 48px; }
  /* Apiladas, el texto va SIEMPRE arriba de su captura, también en la fila
     invertida: si no, en móvil aparece una imagen sin explicación previa. */
  .ms-product-row,
  .ms-product-row-reverse { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
  .ms-product-row-reverse .ms-product-text { order: -1; }
}

@media (max-width: 575px) {
  .ms-product-section { padding: 44px 24px; }
  .ms-product-row-desc { font-size: 15px; }
  .ms-product-hero-shot img,
  .ms-product-shot img { border-radius: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════
   OPTIMIZACIÓN DE CONVERSIÓN (2026-09-13) — reglas nuevas, sin color nuevo
   ══════════════════════════════════════════════════════════════════════ */

/* ── Prueba social: texto + hasta tres perfiles reales ─────────────────── */
.ms-trustbar { padding: 8px 24px 40px; }
.ms-trustbar-inner { flex-direction: column; gap: 22px; }
.ms-trustbar-copy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.ms-trust-people {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; width: 100%;
  /* Con tres perfiles ocupan la fila completa: nada de tarjetas angostas
     centradas con aire a los lados, ni un 2+1 con hueco (visto en producción
     el 2026-09-13). Con uno o dos, centradas y acotadas. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ms-trust-people--2 { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
.ms-trust-people--1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
.ms-trust-person {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ms-border); border-radius: 12px; background: var(--ms-surface);
  text-align: left;
}
.ms-trust-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.ms-trust-avatar-initial { display: grid; place-items: center; background: var(--ms-navy); color: #fff; font-family: var(--ms-font-heading); font-weight: 700; }
.ms-trust-person-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ms-trust-person-name { font-family: var(--ms-font-heading); font-size: 14.5px; font-weight: 700; color: var(--ms-text); line-height: 1.25; }
.ms-trust-person-role { font-family: var(--ms-font-body); font-size: 12.5px; color: var(--ms-text-muted); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ms-trust-person-link { font-family: var(--ms-font-body); font-size: 13px; font-weight: 600; color: var(--ms-primary); text-decoration: none; flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; }
.ms-trust-person-link:hover { text-decoration: underline; }

/* ── Problema: lista "con MindSession" en dos columnas ──────────────────── */
.ms-problem-after-list-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }

/* ── Producto: la captura principal sube al primer tercio ──────────────── */
.ms-product-section-lead { padding-top: 64px; padding-bottom: 56px; }
.ms-product-section-lead .ms-product-hero-shot { margin-bottom: 0; }
.ms-product-section-stories { background: var(--ms-surface); }

/* Indicadores bajo cada captura: solo nombres de zonas que están en la
   imagen. Texto plano en línea, no tarjetas. */
.ms-shot-hints {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-family: var(--ms-font-body); font-size: 12.5px; color: var(--ms-text-muted);
}
.ms-shot-hints li::before { content: "·"; margin-right: 6px; color: var(--ms-primary); font-weight: 700; }
.ms-shot-hints-center { justify-content: center; }

/* ── Beneficios: comparación antes / ahora ─────────────────────────────── */
.ms-benefit-compare { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; max-width: 720px; }
.ms-benefit-compare > div { display: flex; flex-direction: column; gap: 3px; }
.ms-benefit-compare dt { font-family: var(--ms-font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ms-text-muted); }
.ms-benefit-compare > div:last-child dt { color: var(--ms-primary); }
.ms-benefit-compare dd { margin: 0; font-family: var(--ms-font-body); font-size: 15px; line-height: 1.55; color: var(--ms-text); }
.ms-benefit-compare > div:first-child dd { color: var(--ms-text-muted); }

/* ── Seguridad: la objeción del paciente, como nota y no como tarjeta ──── */
.ms-patient-note {
  position: relative; z-index: 1;
  margin: 28px 0 0; padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 8px 40px;
}
.ms-patient-note strong { font-family: var(--ms-font-heading); font-size: 17px; color: #F1F5F9; }
.ms-patient-note span { font-family: var(--ms-font-body); font-size: 14px; line-height: 1.6; color: #94A3B8; }

/* ── Barra móvil: oculta hasta salir del hero (ver landing_controller.js) ─ */
.ms-sticky-cta { transform: translateY(110%); transition: transform .25s ease; }
.ms-sticky-cta.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .ms-sticky-cta { transition: none; } }

@media (max-width: 991px) {
  .ms-patient-note { grid-template-columns: 1fr; }
  .ms-benefit-compare { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 575px) {
  .ms-trustbar { padding-bottom: 32px; }
  .ms-trust-people, .ms-trust-people--2, .ms-trust-people--1 { grid-template-columns: 1fr; }
  .ms-problem-after-list-2col { grid-template-columns: 1fr; }
  .ms-product-section-lead { padding-top: 44px; padding-bottom: 40px; }
}

/* ── Capturas en móvil: versión móvil real de la app, más angosta y alta ─ */
@media (max-width: 767px) {
  .ms-product-hero-shot picture, .ms-product-shot picture { display: block; }
  .ms-product-hero-shot img, .ms-product-shot img {
    max-width: 360px;
    margin: 0 auto;
    border-radius: 18px;
  }
}


/* ══ Pulido final (2026-09-13) ═══════════════════════════════════════════ */
/* Header: al hacer scroll baja de 72 a 60px y deja más pantalla al contenido. */
.ms-navbar.scrolled .container { height: 60px; }

/* Prueba social: "Ver sus perfiles" pasa a botón principal (mismo estilo que
   el resto de CTA), con el texto al lado y no arriba. */
.ms-trustbar-copy .ms-trustbar-btn {
  background: var(--ms-gradient-primary); color: #fff !important; border: 0;
  padding: 12px 22px; min-height: 44px; font-weight: 700;
  box-shadow: 0 4px 6px rgba(127,119,221,0.3);
}
.ms-trustbar-copy .ms-trustbar-btn svg { color: #fff; }

/* Testimonio único: menos alto, la cita manda. */
.is-single .ms-testimonial-card { padding: 32px 36px; gap: 20px; }
.ms-testimonials-head { margin-bottom: 28px; }
.ms-testimonials-section + .ms-pricing-section { padding-top: 56px; }

/* Precio: el encabezado más pegado a la tarjeta. */
.ms-pricing-section .mb-5 { margin-bottom: 1.75rem !important; }
.ms-pricing-assurances { margin-top: 14px; }

/* Pacientes sin app: bloque propio, separado de la lista de seguridad. */
.ms-patient-note {
  margin: 32px 0 0; padding: 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--ms-radius-md);
  background: rgba(255, 255, 255, 0.04);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px 36px; align-items: center;
}
.ms-patient-note strong { font-size: 20px; line-height: 1.25; }

@media (max-width: 767px) {
  .ms-navbar.scrolled .container { height: 56px; }
  .ms-patient-note { padding: 20px; }
  .ms-patient-note strong { font-size: 18px; }
}

/* ── Barra de promoción (septiembre 2026) ─────────────────────
   Antes del navbar sticky, en flujo normal. Se oculta con
   html.ms-ann-hidden (landing#closeAnnouncement, recordado por sesión). */
.ms-ann {
  background: linear-gradient(90deg, #16233F 0%, #2D4A6B 60%, #3E6BC7 100%);
  color: #fff;
  font-family: var(--ms-font-body);
  font-size: 14px;
  line-height: 1.35;
}
.ms-ann-inner {
  max-width: 1140px; margin: 0 auto; padding: 9px 56px 9px 20px;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  position: relative;
}
.ms-ann-tag {
  font-family: var(--ms-font-tag); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
}
.ms-ann-text strong { font-weight: 700; color: #fff; }
.ms-ann-cta {
  color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); transition: background .15s;
}
.ms-ann-cta:hover, .ms-ann-cta:focus-visible { background: rgba(255,255,255,.26); color: #fff; outline: 2px solid #fff; outline-offset: 1px; }
.ms-ann-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; color: rgba(255,255,255,.8); font-size: 22px; line-height: 1;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
}
.ms-ann-close:hover, .ms-ann-close:focus-visible { background: rgba(255,255,255,.16); color: #fff; outline: none; }
html.ms-ann-hidden .ms-ann { display: none; }
@media (max-width: 575px) {
  .ms-ann-inner { padding: 8px 44px 8px 14px; gap: 8px; font-size: 13px; text-align: center; }
  .ms-ann-tag { display: none; }
}