/* ============================================================
   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:     #52606F; /* antes #64748B: 4,4:1 sobre el fondo claro, bajo el mínimo 4,5:1 (PageSpeed 2026-10-21) */
  --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); }

/* Desplegables Recursos y Legal de la barra superior */
.ms-nav-dropdown-toggle {
  font-family: var(--ms-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ms-text);
  letter-spacing: 0.16px;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.ms-nav-dropdown-toggle .ms-icon { width: 11px; height: 11px; font-size: 11px; transition: transform 0.2s ease; }
.ms-nav-dropdown-toggle:hover,
.ms-nav-dropdown-toggle[aria-expanded="true"] { color: var(--ms-violet); }
.ms-nav-dropdown-toggle[aria-expanded="true"] .ms-icon { transform: rotate(180deg); }
.ms-nav-dropdown-toggle:focus-visible { outline: 2px solid var(--ms-violet); outline-offset: 4px; border-radius: 4px; }
.ms-nav-dropdown .dropdown-menu {
  margin-top: 14px !important;
  padding: 8px;
  border: 1px solid rgba(127, 119, 221, 0.18);
  border-radius: 14px;
  box-shadow: var(--ms-shadow);
  min-width: 250px;
}
.ms-nav-links .ms-nav-dropdown .dropdown-item {
  font-size: 15px;
  font-weight: 500;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--ms-text);
}
.ms-nav-links .ms-nav-dropdown .dropdown-item:hover,
.ms-nav-links .ms-nav-dropdown .dropdown-item:focus { background: rgba(127, 119, 221, 0.10); 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); }

/* Grupo "Recursos y legal" del menú del celular: enlaces más chicos para
   que el menú quepa en pantallas bajas. */
.ms-mobile-nav { overflow-y: auto; justify-content: safe center; }
.ms-mobile-nav-group { display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.ms-mobile-nav-group-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 2px; }
.ms-mobile-nav .ms-mobile-nav-group a { font-family: var(--ms-font-body); font-size: 15px; font-weight: 500; padding: 7px 20px; color: rgba(255,255,255,0.75); }

.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: #5B54C4; /* violeta más oscuro: #7F77DD daba 3,9:1 en texto de 12 px */
  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; }

/* ── 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; }
}

/* ── Instagram (pages/_instagram_feed) ───────────────────── */
.ms-instagram-section { background: var(--ms-bg); padding: 56px 80px; }
.ms-instagram-inner { max-width: 1240px; margin: 0 auto; }
.ms-instagram-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.ms-instagram-head > div:first-child { max-width: 640px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ms-instagram-head .ms-section-subtitle { margin: 0; }

.ms-instagram-controls { display: flex; gap: 10px; flex-shrink: 0; }
.ms-instagram-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ms-surface); color: var(--ms-text);
  border: 1px solid var(--ms-border); box-shadow: var(--ms-shadow-sm);
  transition: border-color .15s ease, color .15s ease;
}
.ms-instagram-arrow:hover { border-color: #5B54C4; color: #5B54C4; }
.ms-instagram-arrow:focus-visible { outline: 2px solid #5B54C4; outline-offset: 2px; }
.ms-instagram-arrow.is-prev .ms-icon { transform: rotate(180deg); }
.ms-instagram-toggle .is-play,
.ms-instagram-toggle.is-paused .is-pause { display: none; }
.ms-instagram-toggle.is-paused .is-play { display: block; }
/* En pantallas táctiles se desliza con el dedo: las flechas sobran, pero la
   pausa del avance automático se queda. */
@media (pointer: coarse) { .ms-instagram-arrow:not(.ms-instagram-toggle) { display: none; } }

.ms-instagram-track {
  list-style: none; margin: 0; padding: 4px 2px 14px;
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--ms-border) transparent;
}
.ms-instagram-card { flex: 0 0 clamp(230px, 23%, 290px); scroll-snap-align: start; }
.ms-instagram-link { display: flex; flex-direction: column; gap: 12px; color: inherit; text-decoration: none; border-radius: var(--ms-radius-md); }
.ms-instagram-link:focus-visible { outline: 2px solid #5B54C4; outline-offset: 4px; }

.ms-instagram-media {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--ms-radius-md); border: 1px solid var(--ms-border); background: var(--ms-surface);
}
.ms-instagram-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ms-instagram-link:hover .ms-instagram-media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .ms-instagram-media img { transition: none; } }
.ms-instagram-kind {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--ms-font-tag); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(22,35,63,.78); color: #fff; padding: 3px 8px; border-radius: 6px;
}

.ms-instagram-meta { display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.ms-instagram-meta time { font-family: var(--ms-font-tag); font-size: 12px; color: var(--ms-text-muted); }
.ms-instagram-caption {
  font-family: var(--ms-font-heading); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ms-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ms-instagram-link:hover .ms-instagram-caption { color: #5B54C4; }

.ms-instagram-follow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px;
  font-family: var(--ms-font-heading); font-weight: 600; font-size: 15px; color: #5B54C4; text-decoration: none;
}
.ms-instagram-follow:hover { text-decoration: underline; }

/* Detalle de una publicación (<dialog>, ver ig_carousel_controller#open).
   El cuerpo tiene alto FIJO, no solo máximo: con max-height la columna del
   texto crecía con el contenido, el diálogo la recortaba y no había scroll
   (reportado en producción, 2026-10-24). La columna de la imagen toma el
   ancho de la portada, sin franjas en blanco arriba y abajo. */
.ms-dialog-open { overflow: hidden; }
.ms-instagram-dialog {
  --ms-dialog-h: min(680px, calc(100dvh - 48px));
  width: fit-content; max-width: calc(100vw - 32px);
  padding: 0; border: 0; border-radius: var(--ms-radius-lg);
  background: var(--ms-surface); color: var(--ms-text);
  box-shadow: 0 24px 60px rgba(13,26,77,.28); overflow: hidden;
}
.ms-instagram-dialog::backdrop { background: rgba(15,24,48,.62); }
.ms-instagram-dialog-body {
  display: grid; grid-template-columns: auto minmax(300px, 400px);
  height: var(--ms-dialog-h);
}
.ms-instagram-dialog-media { background: var(--ms-navy-2); display: flex; align-items: center; justify-content: center; min-width: 0; }
.ms-instagram-dialog-media img {
  height: var(--ms-dialog-h); width: auto; max-width: min(544px, calc(100vw - 32px - 300px));
  object-fit: contain; display: block;
}
.ms-instagram-dialog-content { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 22px 24px; min-height: 0; }
.ms-instagram-dialog-top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ms-border); }
.ms-instagram-dialog-handle { font-family: var(--ms-font-heading); font-weight: 700; font-size: 15px; }
.ms-instagram-dialog-top time { font-family: var(--ms-font-tag); font-size: 12px; color: var(--ms-text-muted); }
.ms-instagram-dialog-close {
  margin-left: auto; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ms-border); background: var(--ms-surface); color: var(--ms-text);
}
.ms-instagram-dialog-close:hover { border-color: #5B54C4; color: #5B54C4; }
.ms-instagram-dialog-close:focus-visible { outline: 2px solid #5B54C4; outline-offset: 2px; }
/* Fuente del sistema, como se lee en Instagram (pedido 2026-10-24). */
.ms-instagram-dialog-text {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px; line-height: 1.55; color: var(--ms-text);
  overflow-wrap: anywhere; padding-right: 8px;
  scrollbar-width: thin; scrollbar-color: var(--ms-border) transparent;
}
.ms-instagram-dialog-text p { margin: 0 0 10px; }
.ms-instagram-dialog-text p:first-child { font-weight: 700; font-size: 16px; line-height: 1.4; }
.ms-instagram-dialog-cta { align-self: stretch; justify-content: center; flex-shrink: 0; }

/* Celular: imagen arriba y TODO el diálogo hace scroll (el texto ya no
   tiene scroll propio, que dentro de otro scroll se siente trabado). */
@media (max-width: 767px) {
  .ms-instagram-dialog { width: calc(100vw - 24px); max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
  .ms-instagram-dialog-body { display: block; height: auto; }
  .ms-instagram-dialog-media img { width: 100%; height: auto; max-width: none; max-height: 46dvh; }
  .ms-instagram-dialog-content { padding: 16px 18px 18px; }
  .ms-instagram-dialog-text { overflow: visible; padding-right: 0; }
  .ms-instagram-dialog-top { position: sticky; top: 0; background: var(--ms-surface); z-index: 1; margin: -16px -18px 0; padding: 12px 18px; }
}

/* Con testimonios a continuación (mismo fondo), una línea separa las dos. */
.ms-instagram-section + .ms-testimonials-section { border-top: 1px solid var(--ms-border); }

@media (max-width: 991px) { .ms-instagram-section { padding: 48px 40px; } }
@media (max-width: 575px) {
  .ms-instagram-section { padding: 40px 0 40px 24px; }
  .ms-instagram-head { padding-right: 24px; }
  .ms-instagram-track { padding-right: 24px; scroll-padding-left: 0; }
  .ms-instagram-card { flex-basis: 72%; }
  .ms-instagram-follow { margin-left: 0; }
}

/* ── 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: #5B54C4; /* mismo violeta oscuro de .ms-section-tag (contraste) */
  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-note:has(+ .ms-pricing-annual) { margin-bottom: 10px; }
.ms-pricing-annual { font-family: var(--ms-font-body); font-size: 13px; line-height: 1.5; color: var(--ms-text-muted); margin: 0 0 24px; padding: 10px 14px; border-radius: 10px; background: rgba(82,183,136,.1); }
.ms-pricing-annual strong { color: #1E7A4E; }

.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-muted); /* #94A3B8 no daba el contraste mínimo */ }
.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); }
/* Sobre los bloques oscuros, el texto secundario va en gris claro: el gris
   general (#52606F) es para fondos claros y ahí no se leería. */
.ms-footer, .ms-hero-panel, .ms-security-inner, .ms-closing { --ms-text-muted: #A3B1C6; }

.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: #8E9DB5; 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; }
/* El hero se ve de inmediato: con fade-in quedaba invisible hasta que cargaba
   todo el JavaScript y retrasaba el primer contenido (PageSpeed 2026-10-21). */
.ms-hero-panel > .ms-fade-in { opacity: 1; transform: none; transition: none; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1200px) {
  .ms-hero-section { padding-left: 40px; padding-right: 40px; }
  .ms-process-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-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-pricing-section { padding-top: 56px; padding-bottom: 56px; }
  .ms-contact-section { padding-top: 48px; padding-bottom: 56px; }

  .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-muted); 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; }
  .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; }
}

/* ══════════════════════════════════════════════════════════════════════
   COLUMNA DERECHA DEL HERO
   Vacía a propósito desde el 2026-10-05: deja ver la foto de la consulta
   (.ms-hero-bg). Antes llevaba el logo con las funcionalidades girando
   encima. Solo reserva el alto del hero, que lo fija esta columna.
   ══════════════════════════════════════════════════════════════════════ */
.ms-orbit-card { min-height: 440px; }

@media (max-width: 992px) {
  .ms-orbit-card { min-height: 220px; }
}

/* ── 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: 220px; }
}

/* ── 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 — comparación fila por fila "hoy → con MindSession"

   Hasta el 2026-10-24 eran etiquetas sueltas e inclinadas frente a un panel
   navy con sustantivos genéricos: las dos mitades no se respondían y el
   panel pesaba más que todo lo demás. Ahora es una sola tarjeta clara donde
   cada fila empareja un dolor concreto con su reemplazo.
   ══════════════════════════════════════════════════════════════════════ */
.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: 32px; }
.ms-problem-head .ms-section-title { margin-bottom: 14px; }

/* Tarjeta con la columna "Con MindSession" destacada en violeta suave, como
   la columna recomendada de una tabla de precios, y un ícono por fila. La
   primera versión (todo blanco con un check repetido) se veía plana. */
.ms-swap {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-radius: var(--ms-radius-lg);
  box-shadow: var(--ms-shadow);
  overflow: hidden;
}
.ms-swap-head, .ms-swap-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) 56px minmax(0, 1.15fr);
  align-items: stretch;
}
.ms-swap-head > span {
  padding: 18px 28px 14px;
  font-family: var(--ms-font-tag); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-muted);
}
.ms-swap-head > span:nth-child(2) { padding: 0; }
.ms-swap-head .ms-swap-head-after { background: #F1F0FC; color: #5B54C4; }
.ms-swap-list { list-style: none; margin: 0; padding: 0; }
.ms-swap-before, .ms-swap-arrow, .ms-swap-after { border-top: 1px solid var(--ms-border); }
.ms-swap-before {
  display: flex; align-items: center;
  padding: 18px 28px;
  font-family: var(--ms-font-body); font-size: 15px; line-height: 1.45;
  color: var(--ms-text-muted);
  text-decoration: line-through; text-decoration-color: rgba(82, 96, 111, .4); text-decoration-thickness: 1px;
}
.ms-swap-arrow { display: flex; align-items: center; justify-content: center; color: var(--ms-text-light); }
.ms-swap-arrow svg { width: 18px; height: 18px; }
.ms-swap-after {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  background: #F1F0FC; border-top-color: rgba(127, 119, 221, .16);
  font-family: var(--ms-font-heading); font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--ms-text);
}
.ms-swap-icon {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ms-surface); color: #5B54C4;
  box-shadow: 0 1px 2px rgba(91, 84, 196, .12), 0 0 0 1px rgba(127, 119, 221, .14);
}
.ms-swap-icon svg { width: 17px; height: 17px; }

@media (max-width: 991px) {
  .ms-problem-section { padding: 48px 40px; }
  .ms-swap-head > span, .ms-swap-before { padding-left: 20px; padding-right: 20px; }
  .ms-swap-after { padding-left: 20px; padding-right: 20px; }
}

/* Celular: cada fila es "hoy" tachado arriba y la solución abajo en su
   franja violeta; sin flecha ni encabezados de columna. */
@media (max-width: 575px) {
  .ms-problem-section { padding: 40px 16px; }
  .ms-swap-head { display: none; }
  .ms-swap-row { grid-template-columns: 1fr; }
  .ms-swap-row:first-child .ms-swap-before { border-top: 0; }
  .ms-swap-before { padding: 14px 18px 8px; font-size: 14px; }
  .ms-swap-arrow { display: none; }
  .ms-swap-after { border-top: 0; padding: 12px 18px; font-size: 15px; gap: 12px; }
  .ms-swap-icon { width: 32px; height: 32px; border-radius: 9px; }
}

/* ── 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; }


/* ── 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; }

/* ── 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; }
}
@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-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; desde el 05/10, Cyber, más grande) ──
   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: 16px;
  line-height: 1.35;
}
.ms-ann-inner {
  max-width: 1140px; margin: 0 auto; padding: 14px 56px 14px 20px;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  position: relative;
}
.ms-ann-tag {
  font-family: var(--ms-font-tag); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: #7F77DD; border: 1px solid rgba(255,255,255,.35);
  padding: 4px 12px; border-radius: 100px; white-space: nowrap;
}
.ms-ann-text strong { font-weight: 700; color: #fff; }
.ms-ann-cta {
  color: #16233F; font-weight: 700; text-decoration: none; white-space: nowrap;
  padding: 8px 18px; border-radius: 10px; background: #fff;
  border: 1px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .15s;
}
.ms-ann-cta:hover, .ms-ann-cta:focus-visible { background: #EEF0FF; color: #16233F; outline: 2px solid #fff; outline-offset: 2px; }
.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: 12px 44px 12px 14px; gap: 10px; font-size: 14.5px; text-align: center; }
  .ms-ann-tag { display: none; }
}

/* ── Seguridad compacta (2026-10-24) ─────────────────────────────────────
   Medía ~970 px en escritorio: el título usaba media fila con la otra mitad
   vacía, los cinco puntos iban en dos columnas (con la última fila coja) y
   la nota de pacientes y los enlaces se apilaban abajo. Ahora son dos
   columnas: a la izquierda título, nota y enlaces; a la derecha la lista.
   El HTML no cambia de orden (mismo H2, textos y enlaces): es solo CSS, y en
   celular queda todo en una columna, en el orden del documento. */
.ms-security-inner {
  padding: 56px;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "head list" "note list" "foot list";
  grid-template-rows: auto auto 1fr;
  column-gap: 64px;
}
.ms-security-head { grid-area: head; margin-bottom: 0; }
.ms-security-head .ms-section-title { font-size: clamp(26px, 2.6vw, 36px); }
.ms-security-head .ms-section-subtitle { font-size: 15px; }
.ms-security-list { grid-area: list; grid-template-columns: 1fr; column-gap: 0; align-self: center; }
.ms-security-item { padding: 14px 0; }
.ms-security-item:first-child { border-top: 0; padding-top: 0; }
.ms-security-item strong { font-size: 15px; margin-bottom: 2px; }

.ms-patient-note {
  grid-area: note;
  margin: 28px 0 0; padding: 16px 18px;
  grid-template-columns: 1fr; gap: 4px; align-items: start;
}
.ms-patient-note strong { font-size: 16px; }
.ms-patient-note span { font-size: 13.5px; }

.ms-security-foot { grid-area: foot; margin: 20px 0 0; align-self: end; display: flex; flex-direction: column; gap: 8px; }
.ms-security-foot a { font-size: 13.5px; }
.ms-security-foot-sep { display: none; }

@media (max-width: 991px) {
  .ms-security-inner {
    padding: 44px 24px; border-radius: var(--ms-radius-lg);
    grid-template-columns: 1fr; grid-template-areas: "head" "list" "note" "foot"; grid-template-rows: none;
  }
  .ms-security-list { margin-top: 28px; }
  .ms-security-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 14px; }
}
@media (max-width: 575px) {
  .ms-security-section { padding: 16px 12px; }
  .ms-security-inner { padding: 32px 20px; }
  .ms-security-head .ms-section-title { font-size: 25px; }
  .ms-security-head .ms-section-subtitle { font-size: 14.5px; }
  .ms-security-list { margin-top: 20px; }
  .ms-security-item { padding: 12px 0; gap: 12px; }
  .ms-security-item span { font-size: 13px; line-height: 1.5; }
  .ms-patient-note { margin-top: 20px; padding: 14px 16px; }
}

/* ── Tarjeta de precio en dos zonas (2026-10-24) ─────────────────────────
   Angosta, apilaba precio, diez funciones y botón: era lo más alto de la
   sección. Ancha, el precio y el botón quedan a la izquierda y las funciones
   a la derecha. En celular vuelve a una columna con el botón al final. */
.ms-pricing-card--split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: "main features" "cta features";
  grid-template-rows: 1fr auto;
  column-gap: 40px;
  padding: 32px 36px;
}
.ms-pricing-card--split .ms-pricing-main { grid-area: main; align-self: center; }
.ms-pricing-card--split .ms-pricing-note { margin-bottom: 0; }
.ms-pricing-card--split .ms-pricing-annual { margin: 14px 0 0; }
.ms-pricing-card--split .ms-pricing-cta { grid-area: cta; margin-top: 22px; }
.ms-pricing-card--split .ms-pricing-features {
  grid-area: features; align-self: center;
  padding-left: 40px; border-left: 1px solid var(--ms-border);
  text-align: left;
}
.ms-pricing-features-title {
  font-family: var(--ms-font-tag); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ms-text-muted);
  margin: 0 0 14px;
}
.ms-pricing-card--split .ms-pricing-list-compact { gap: 12px 20px; }

@media (max-width: 991px) {
  .ms-pricing-card--split {
    grid-template-columns: 1fr; grid-template-areas: "main" "features" "cta"; grid-template-rows: none;
    padding: 32px 28px;
  }
  .ms-pricing-card--split .ms-pricing-features {
    padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1px solid var(--ms-border);
  }
}
@media (max-width: 575px) {
  .ms-pricing-card--split { padding: 28px 20px; }
  .ms-pricing-card--split .ms-pricing-list-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .ms-pricing-card--split .ms-pricing-list li { font-size: 13.5px; gap: 8px; align-items: flex-start; }
  .ms-pricing-card--split .ms-pricing-list li svg { margin-top: 2px; flex-shrink: 0; }
}

/* ── Preguntas en la portada: seis, en dos columnas (2026-10-24) ─────────
   Las once completas viven en /preguntas-frecuentes. */
#preguntas .ms-faq-inner { max-width: 1040px; }
#preguntas .ms-faq-head { margin-bottom: 28px; }
.ms-faq-list--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: start; }
.ms-faq-more { margin: 22px 0 0; text-align: center; }
.ms-faq-more-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ms-font-heading); font-weight: 600; font-size: 15px; color: #5B54C4; text-decoration: none;
}
.ms-faq-more-link:hover { text-decoration: underline; }
@media (max-width: 767px) { .ms-faq-list--two { grid-template-columns: 1fr; } }

/* ── Problema en la línea visual del sitio (2026-10-24) ──────────────────
   Título centrado con su etiqueta (como Precios o Preguntas), el encabezado
   "Con MindSession" con el logo del navbar, y los íconos en el cuadrado con
   degradado de marca (el del logo y los números de "Cómo funciona"). */
.ms-problem-head {
  max-width: 760px; margin: 0 auto 36px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.ms-problem-head .ms-section-title { margin: 0; }
.ms-problem-head .ms-section-subtitle { margin: 0; max-width: 600px; }

.ms-swap-head > span {
  font-family: var(--ms-font-heading); font-size: 14px; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.ms-swap-head .ms-swap-head-after { display: flex; align-items: center; gap: 10px; color: var(--ms-text); }
.ms-swap-logo {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--ms-gradient-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-swap-logo img { width: 15px; height: 15px; }

.ms-swap-icon {
  background: var(--ms-gradient-primary); color: #fff;
  box-shadow: 0 6px 10px rgba(125, 120, 222, .22);
}

/* ── Halloween 2026 (pages/_halloween_decor) ─────────────────────────────
   Solo se renderiza durante la promo (26/10 al 08/11). Borrar este bloque y
   el parcial cuando termine. */
.ms-hero-panel { position: relative; }
.ms-halloween { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; border-radius: inherit; }
.ms-web { position: absolute; top: -2px; fill: none; stroke: rgba(233, 228, 255, .28); stroke-width: 1.1; }
.ms-web--left { left: -2px; }
.ms-web--right { right: -2px; transform: scaleX(-1); }
.ms-spider {
  position: absolute; top: -40px; left: var(--left); height: calc(var(--len) + 40px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  animation: ms-spider-bob 4.2s ease-in-out var(--delay) infinite;
  transition: transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.ms-spider::before { content: ""; flex: 1; width: 1px; background: rgba(233, 228, 255, .45); }
.ms-spider-body { pointer-events: auto; border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; }
.ms-spider-body svg { animation: ms-spider-sway 3s ease-in-out var(--delay) infinite; transform-origin: 50% 0; }
.ms-spider.is-scared { animation: none; transform: translateY(calc(-1 * var(--len) - 20px)); transition-duration: .45s; }
@keyframes ms-spider-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }
@keyframes ms-spider-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
  .ms-spider, .ms-spider-body svg { animation: none; }
}
/* En celular el texto ocupa todo el ancho: queda una sola araña, pegada al borde. */
@media (max-width: 991px) {
  .ms-spider { --len: 70px !important; }
  .ms-spider:not(:last-child) { display: none; }
  .ms-spider:last-child { left: auto; right: 14px; }
  .ms-web { width: 90px; height: 90px; }
}
/* Variante de la sección de precios: fondo claro, tonos violeta. */
.ms-pricing-section { position: relative; overflow: hidden; }
.ms-halloween--pricing { border-radius: 0; z-index: 3; }
.ms-halloween--pricing .ms-web { stroke: rgba(127, 119, 221, .32); }
.ms-halloween--pricing .ms-spider::before { background: rgba(91, 84, 196, .35); }
.ms-halloween--pricing .ms-spider-body g { stroke: #5B54C4; }
.ms-halloween--pricing .ms-spider-body ellipse, .ms-halloween--pricing .ms-spider-body circle:nth-of-type(1) { fill: #5B54C4; }
/* En celular la tarjeta ocupa todo el ancho: solo quedan las telarañas. */
@media (max-width: 991px) {
  .ms-halloween--pricing .ms-spider { display: none; }
}

/* ── Formulario "Probar gratis": registro al instante (2026-10-26) ──────── */
/* Campo trampa para bots: fuera de pantalla, no display:none (algunos bots lo
   saltan si está oculto así). */
.ms-form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ms-form-check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-family: var(--ms-font-body); font-size: 13.5px; line-height: 1.45; color: var(--ms-text);
}
.ms-form-check input { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; accent-color: #5B54C4; }
.ms-form-fineprint a { color: #5B54C4; font-weight: 600; }

/* ── Botón principal sólido (2026-11-12) ──────────────────────────────────
   El degradado violeta→azul en cada botón era lo que más hacía ver el sitio
   como plantilla. El botón pasa a un azul sólido de la misma familia, con
   texto blanco a 6,4:1 (el #5B8DEF de antes daba 3,2:1). El degradado queda
   solo en el ícono del logo. */
.ms-btn-primary,
.ms-nav-cta {
  background: #2F5BB7;
  box-shadow: none;
  border-radius: 10px; /* sin forma de píldora (pedido 2026-11-12) */
}
.ms-btn-secondary { border-radius: 10px; }
.ms-btn-primary:hover,
.ms-nav-cta:hover {
  background: #244A99;
  box-shadow: none;
  transform: none;
}
.ms-btn-primary:focus-visible,
.ms-nav-cta:focus-visible { outline: 3px solid #9CB7EC; outline-offset: 2px; }

/* Banner de la ley en una sola línea */
.ms-ann--slim { background: #16233F; font-size: 14.5px; }
.ms-ann--slim .ms-ann-inner { padding-top: 9px; padding-bottom: 9px; gap: 12px; }
.ms-ann--slim .ms-ann-tag { font-size: 11px; padding: 2px 10px; background: transparent; }
.ms-ann--slim .ms-ann-cta { padding: 4px 0; background: transparent; border: 0; box-shadow: none; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ms-ann--slim .ms-ann-cta:hover, .ms-ann--slim .ms-ann-cta:focus-visible { background: transparent; color: #fff; }

/* ── Hero (2026-11-12, segunda vuelta) ─────────────────────────────────── */
.ms-hx { position: relative; background: #111C33; color: #fff; padding: 64px 24px 80px; overflow: hidden; }
.ms-hx-inner {
  max-width: 1240px; margin: 0 auto; position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 48px 56px;
}
.ms-hx-copy { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
/* El kicker es el <h1>: con doble clase le gana a ".ms-landing-body h1"
   (tipografía de títulos y peso 700) y se ve igual que cuando era <p>. */
.ms-hx .ms-hx-kicker { margin: 0; font-family: var(--ms-font-body); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: normal; color: #B9C6DE; }
.ms-hx-title {
  margin: 0; font-family: var(--ms-font-heading); font-weight: 700; color: #fff;
  font-size: clamp(36px, 3.9vw, 56px); line-height: 1.05; letter-spacing: -0.015em;
}
.ms-hx-title span { color: #9CB7EC; }
.ms-hx-subtitle { margin: 0; font-family: var(--ms-font-body); font-size: 19px; line-height: 1.6; color: #D3DBEA; max-width: 500px; }
.ms-hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ms-btn-primary.ms-btn-on-dark { background: #fff; color: #16233F; }
.ms-btn-primary.ms-btn-on-dark:hover { background: #E4EBF8; color: #16233F; }
.ms-hx-link {
  font-family: var(--ms-font-body); font-weight: 600; font-size: 16px; color: #fff;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.5);
  padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center;
}
.ms-hx-link:hover { color: #fff; text-decoration-color: #fff; }
.ms-hx-microcopy { margin: 0; font-family: var(--ms-font-body); font-size: 15px; color: #B9C6DE; }
.ms-hx-proof { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-family: var(--ms-font-body); font-size: 15px; color: #D3DBEA; }
.ms-hx-proof strong { color: #fff; }
.ms-hx-faces { display: flex; }
.ms-hx-faces img, .ms-hx-faces span {
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid #111C33; object-fit: cover;
  margin-left: -8px; background: #2F5BB7; color: #fff; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-hx-faces > :first-child { margin-left: 0; }
.ms-hx-stage-wrap { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }

/* ── Escenario del hero ──────────────────────────────────────────────────
   El panel de la o el terapeuta es el protagonista; el celular con el
   portal del paciente entra al final, chico, como un extra. Lienzo fijo de
   660×500 que en pantallas angostas se reduce con zoom, para que las
   coordenadas del cursor sigan calzando. Los estilos por defecto son la
   escena quieta de "reducir movimiento" (agenda con la reserva nueva y los
   recordatorios); las animaciones recorren el ciclo de 20 s. */
.ms-stage { position: relative; width: 660px; height: 500px; font-family: var(--ms-font-body); color: #16233F; }
.ms-win {
  position: absolute; left: 0; top: 0; width: 640px; height: 430px;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08);
}
.ms-win-bar { height: 28px; background: #EEF1F6; display: flex; align-items: center; gap: 6px; padding: 0 12px; }
.ms-win-bar span { width: 9px; height: 9px; border-radius: 50%; background: #CBD3E0; }
.ms-win-body { display: flex; height: calc(100% - 28px); }
.ms-win-side { width: 118px; flex-shrink: 0; background: #F6F8FB; border-right: 1px solid #E6EAF1; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; }
.ms-win-logo { width: 28px; height: 28px; border-radius: 8px; background: var(--ms-gradient-primary); display: inline-flex; align-items: center; justify-content: center; margin: 0 0 12px 4px; }
.ms-win-logo img { width: 16px; height: 16px; }
.ms-win-nav { font-size: 12.5px; color: #52606F; padding: 6px 8px; border-radius: 7px; }
.ms-win-nav--agenda { background: #E6EDFB; color: #244A99; font-weight: 600; }
.ms-win-main { position: relative; flex: 1; min-width: 0; }
.ms-scr { position: absolute; inset: 0; padding: 18px 20px; display: flex; flex-direction: column; }
.ms-scr--ficha { opacity: 0; }
.ms-scr-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.ms-scr-head strong { font-family: var(--ms-font-heading); font-size: 17px; }
.ms-auto { font-size: 11.5px; font-weight: 600; color: #1F5A35; background: #E3F2E8; border-radius: 6px; padding: 4px 8px; }
.ms-consent { font-size: 11.5px; font-weight: 600; color: #1F5A35; background: #E3F2E8; border-radius: 6px; padding: 4px 8px; }
.ms-ag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ms-ag li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #E6EAF1; border-radius: 10px; font-size: 12.5px; }
.ms-ag b { width: 40px; font-weight: 600; font-size: 13px; }
.ms-ag span { flex: 1; min-width: 0; display: flex; flex-direction: column; color: #52606F; }
.ms-ag span strong { color: #16233F; font-size: 13.5px; }
.ms-ag i { font-style: normal; font-size: 11px; font-weight: 600; border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.ms-ag-rem { background: #E3F2E8; color: #1F5A35; }
.ms-ag-new { background: #EEF3FC; border-color: #BFD0F2 !important; }
.ms-ag-tag { background: #2F5BB7; color: #fff; }
.ms-tabs { display: flex; gap: 16px; border-bottom: 1px solid #E6EAF1; margin-bottom: 14px; font-size: 12.5px; color: #52606F; }
.ms-tabs span { padding-bottom: 8px; }
.ms-tabs .ms-tab-on { color: #244A99; font-weight: 600; border-bottom: 2px solid #2F5BB7; }
.ms-ficha-label { display: block; font-size: 12px; font-weight: 600; color: #52606F; margin-bottom: 6px; }
.ms-ficha-box { border: 1px solid #D5DCE7; border-radius: 10px; padding: 10px 12px; min-height: 64px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.ms-type { display: block; white-space: nowrap; overflow: hidden; }
.ms-ficha-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ms-ficha-btn { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; border-radius: 8px; background: #2F5BB7; color: #fff; font-size: 12.5px; font-weight: 600; }
.ms-ficha-saved { font-size: 12px; font-weight: 600; color: #1F5A35; }
.ms-task-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #E6EAF1; }
.ms-task-add { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #BFD0F2; border-radius: 8px; color: #244A99; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ms-task-item { font-size: 12.5px; background: #EEF3FC; border-radius: 8px; padding: 7px 10px; }
.ms-toast {
  position: absolute; top: 12px; right: 14px; display: flex; align-items: center; gap: 8px;
  background: #16233F; color: #fff; font-size: 12px; padding: 8px 12px; border-radius: 9px;
  box-shadow: 0 10px 20px rgba(22,35,63,.3); opacity: 0;
}
.ms-toast-dot { width: 7px; height: 7px; border-radius: 50%; background: #6FD39A; }

/* Extra: el celular del paciente (oculto en la escena quieta) */
.ms-phone {
  position: absolute; left: 508px; top: 236px; width: 150px; height: 250px;
  background: #fff; border-radius: 24px; overflow: hidden; opacity: 0;
  border: 5px solid #0A1222; box-shadow: 0 24px 48px rgba(0,0,0,.45);
}
.ms-phone-notch { position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 46px; height: 11px; border-radius: 7px; background: #0A1222; z-index: 3; }
.ms-pscr { position: absolute; inset: 0; padding: 26px 10px 10px; display: flex; flex-direction: column; gap: 6px; font-size: 11px; }
.ms-p-label { font-size: 11px; font-weight: 600; color: #52606F; }
.ms-p-card { border: 1px solid #E6EAF1; border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 2px; color: #52606F; }
.ms-p-card strong { color: #16233F; font-size: 11.5px; }
.ms-p-card--task { background: #EEF3FC; border-color: #BFD0F2; }
.ms-phone-caption { position: absolute; left: 248px; top: 452px; width: 250px; text-align: right; font-size: 12px; font-weight: 600; color: #D3DBEA; opacity: 0; }

.ms-cursor { position: absolute; left: 0; top: 0; z-index: 5; opacity: 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }

.ms-steps { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 660px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ms-step { font-family: var(--ms-font-body); font-size: 13.5px; font-weight: 600; color: #8FA0BE; padding-top: 10px; border-top: 3px solid rgba(255,255,255,.16); }

/* ── La coreografía: un ciclo de 20 s ────────────────────────────────────
   0–16 %  llega una reserva nueva a la agenda
   16–32 % los recordatorios salen solos, sesión por sesión
   32–62 % abre la ficha clínica, escribe la nota y la guarda
   62–98 % asigna una tarea; al final, el paciente la ve en su portal */
@media (prefers-reduced-motion: no-preference) {
  .ms-cursor        { animation: ms-k-cursor 20s infinite; }
  .ms-toast         { animation: ms-k-toast 20s infinite; }
  .ms-ag-new        { animation: ms-k-new 20s infinite; }
  .ms-ag-rem--1     { animation: ms-k-rem1 20s infinite; }
  .ms-ag-rem--2     { animation: ms-k-rem2 20s infinite; }
  .ms-ag-rem--3     { animation: ms-k-rem3 20s infinite; }
  .ms-scr--agenda   { animation: ms-k-agenda 20s infinite; }
  .ms-scr--ficha    { animation: ms-k-ficha 20s infinite; }
  .ms-win-nav--agenda    { animation: ms-k-nav-ag 20s infinite; }
  .ms-win-nav--pacientes { animation: ms-k-nav-pa 20s infinite; }
  .ms-type--1       { animation: ms-k-type1 20s infinite; }
  .ms-type--2       { animation: ms-k-type2 20s infinite; }
  .ms-ficha-btn     { animation: ms-k-btn 20s infinite; }
  .ms-ficha-saved   { animation: ms-k-saved 20s infinite; }
  .ms-task-add      { animation: ms-k-add 20s infinite; }
  .ms-task-item     { animation: ms-k-task 20s infinite; }
  .ms-phone         { animation: ms-k-phone 20s infinite; }
  .ms-phone-caption { animation: ms-k-caption 20s infinite; }
  .ms-step--1 { animation: ms-k-s1 20s infinite; }
  .ms-step--2 { animation: ms-k-s2 20s infinite; }
  .ms-step--3 { animation: ms-k-s3 20s infinite; }
  .ms-step--4 { animation: ms-k-s4 20s infinite; }
}

/* Cursor: abre la reserva nueva (ROW), toca Guardar nota (SAVE) y Asignar tarea (ADD) */
@keyframes ms-k-cursor {
  0%, 31%   { opacity: 0; transform: translate(360px, 330px); animation-timing-function: ease-in-out; }
  33%       { opacity: 1; transform: translate(360px, 330px); animation-timing-function: ease-in-out; }
  38%       { opacity: 1; transform: translate(256px, 251px); }
  39%       { opacity: 1; transform: translate(256px, 251px) scale(.82); }
  40%, 51%  { opacity: 1; transform: translate(256px, 251px); animation-timing-function: ease-in-out; }
  54%       { opacity: 1; transform: translate(188px, 242px); }
  55%       { opacity: 1; transform: translate(188px, 242px) scale(.82); }
  56%, 58%  { opacity: 1; transform: translate(188px, 242px); animation-timing-function: ease-in-out; }
  62%       { opacity: 1; transform: translate(193px, 305px); }
  63%       { opacity: 1; transform: translate(193px, 305px) scale(.82); }
  64%, 68%  { opacity: 1; transform: translate(193px, 305px); }
  71%, 100% { opacity: 0; transform: translate(193px, 305px); }
}
@keyframes ms-k-toast  { 0%, 3% { opacity: 0; transform: translateY(-8px); } 5%, 15% { opacity: 1; transform: translateY(0); } 17%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ms-k-new    { 0%, 5% { opacity: 0; transform: translateX(14px); } 7%, 98% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(14px); } }
@keyframes ms-k-rem1   { 0%, 17% { opacity: 0; transform: scale(.9); } 18.5%, 98% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ms-k-rem2   { 0%, 21% { opacity: 0; transform: scale(.9); } 22.5%, 98% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ms-k-rem3   { 0%, 25% { opacity: 0; transform: scale(.9); } 26.5%, 98% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }
@keyframes ms-k-agenda { 0%, 40% { opacity: 1; } 42%, 98% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ms-k-ficha  { 0%, 40% { opacity: 0; } 42%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes ms-k-nav-ag { 0%, 40% { background: #E6EDFB; color: #244A99; font-weight: 600; } 41%, 98% { background: transparent; color: #52606F; font-weight: 400; } 100% { background: #E6EDFB; color: #244A99; font-weight: 600; } }
@keyframes ms-k-nav-pa { 0%, 40% { background: transparent; color: #52606F; font-weight: 400; } 41%, 98% { background: #E6EDFB; color: #244A99; font-weight: 600; } 100% { background: transparent; color: #52606F; font-weight: 400; } }
@keyframes ms-k-type1  { 0%, 43% { clip-path: inset(0 100% 0 0); } 47.5%, 98% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ms-k-type2  { 0%, 47.5% { clip-path: inset(0 100% 0 0); } 52%, 98% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes ms-k-btn    { 0%, 54.5% { transform: scale(1); } 55% { transform: scale(.94); } 56%, 100% { transform: scale(1); } }
@keyframes ms-k-saved  { 0%, 55.5% { opacity: 0; } 57%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes ms-k-add    { 0%, 62.5% { transform: scale(1); } 63% { transform: scale(.94); } 64%, 100% { transform: scale(1); } }
@keyframes ms-k-task   { 0%, 63.5% { opacity: 0; transform: translateX(10px); } 65%, 97% { opacity: 1; transform: translateX(0); } 99%, 100% { opacity: 0; } }
@keyframes ms-k-phone  { 0%, 72% { opacity: 0; transform: translateY(24px); } 76%, 96% { opacity: 1; transform: translateY(0); } 99%, 100% { opacity: 0; transform: translateY(24px); } }
@keyframes ms-k-caption { 0%, 74% { opacity: 0; } 78%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes ms-k-s1 { 0%, 1% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } 2%, 16% { color: #fff; border-top-color: #9CB7EC; } 17%, 100% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } }
@keyframes ms-k-s2 { 0%, 16% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } 17%, 32% { color: #fff; border-top-color: #9CB7EC; } 33%, 100% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } }
@keyframes ms-k-s3 { 0%, 32% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } 33%, 60% { color: #fff; border-top-color: #9CB7EC; } 61%, 100% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } }
@keyframes ms-k-s4 { 0%, 60% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } 61%, 98% { color: #fff; border-top-color: #9CB7EC; } 99%, 100% { color: #8FA0BE; border-top-color: rgba(255,255,255,.16); } }

/* Pantallas angostas: el escenario se reduce entero */
@media (max-width: 1100px) { .ms-stage { zoom: .85; } }
@media (max-width: 767px) {
  .ms-hx { padding: 36px 16px 56px; }
  .ms-hx-subtitle { font-size: 17px; }
  .ms-hx-actions .ms-btn-primary { width: 100%; justify-content: center; }
  .ms-stage { zoom: .52; }
  .ms-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) { .ms-stage { zoom: .47; } }

/* Mismo botón sólido, sin píldora, en "Ver sus perfiles" (bajo el hero) */
.ms-trustbar-copy .ms-trustbar-btn { background: #2F5BB7; border-radius: 10px; box-shadow: none; }
.ms-trustbar-copy .ms-trustbar-btn:hover { background: #244A99; box-shadow: none; transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   Lenguaje visual unificado (2026-11-12)
   El hero nuevo y el resto de la página hablaban idiomas distintos. Estas
   reglas llevan todas las secciones al mismo criterio:
   - Un azul sólido (#2F5BB7) para botones y acentos. El degradado
     violeta→azul queda SOLO en el ícono del logo (--ms-brand-gradient).
   - Botones con esquinas de 10 px, nunca píldora.
   - Etiquetas de sección como texto simple, sin cápsula ni mayúsculas mono.
   - Títulos a 700 (no 800), más grandes y con el mismo interletrado.
   - Sin aparición animada al bajar ni "+" decorativos.
   - Paneles oscuros en el mismo marino del hero (#111C33).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --ms-brand-gradient: linear-gradient(120deg, #7F77DD 15%, #5B8DEF 85%);
  --ms-gradient-primary: #2F5BB7;
  --ms-accent: #2F5BB7;
  --ms-accent-dark: #244A99;
  --ms-accent-soft: #E6EDFB;
  --ms-ink: #111C33;
}

/* El degradado vive solo en el logo */
.ms-logo-icon, .ms-footer-logo-icon, .ms-swap-logo, .ms-win-logo { background: var(--ms-brand-gradient); }
.ms-footer-logo-text { background: none; -webkit-text-fill-color: currentColor; color: #fff; }

/* Botones: azul sólido, 10 px */
.ms-contact-submit, .ms-sticky-cta-btn, .ms-portal-card-btn, .ms-trustbar-btn {
  border-radius: 10px; box-shadow: none;
}
.ms-contact-submit, .ms-sticky-cta-btn { background: var(--ms-accent); }
.ms-contact-submit:hover, .ms-sticky-cta-btn:hover { background: var(--ms-accent-dark); transform: none; box-shadow: none; }
.ms-pricing-discount-chip, .ms-pricing-savings { border-radius: 8px; }

/* Íconos en cuadrado: tinte suave en vez de relleno de color */
.ms-swap-icon { background: var(--ms-accent-soft); color: var(--ms-accent-dark); }
.ms-swap-icon svg { color: var(--ms-accent-dark); }

/* Etiquetas de sección: texto simple */
.ms-section-tag {
  background: none; border: 0; box-shadow: none; padding: 0;
  font-family: var(--ms-font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ms-accent);
}
.ms-section-tag svg, .ms-section-tag i { display: none; }

/* Títulos: mismo peso y escala que el hero */
.ms-landing-body h1, .ms-landing-body h2, .ms-landing-body h3,
.ms-section-title, .ms-contact-title, .ms-pricing-amount, .ms-process-step-number,
.ms-pricing-ribbon, .ms-logo-text, .ms-footer-logo-text { font-weight: 700; }
.ms-section-title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; letter-spacing: -0.015em; }

/* Sin decoración que delate plantilla */
.ms-accent-plus, .ms-hero-accent-line { display: none !important; }
.ms-fade-in, .ms-fade-in.visible { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Paneles oscuros en el marino del hero */
.ms-security-inner, .ms-closing { background: var(--ms-ink); }
.ms-closing { border-bottom: 1px solid rgba(255,255,255,.08); }
.ms-btn-secondary { border-color: rgba(255,255,255,.7); }

/* Cabeceras a la izquierda en todas las secciones, como el hero. Solo el
   cierre final queda centrado. */
.ms-problem-head { text-align: left; margin-left: 0; margin-right: 0; max-width: 820px; }
.ms-faq-head, .ms-faq-more { text-align: left; }
.ms-pricing-section > .row { max-width: 1240px; margin-left: auto; margin-right: auto; justify-content: flex-start !important; }
.ms-pricing-section > .row.text-center { text-align: left !important; }
.ms-pricing-section > .row > [class*="col-"] { padding-left: 0; }
.ms-pricing-assurances { justify-content: flex-start; }

/* Etiquetas pequeñas: misma tipografía del cuerpo, sin mayúsculas mono */
.ms-pricing-badge, .ms-pricing-ribbon, .ms-pricing-features-title, .ms-swap-head > span, .ms-portal-badge {
  font-family: var(--ms-font-body); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600;
}
.ms-pricing-badge, .ms-pricing-features-title { color: var(--ms-accent); }

/* Tarjeta de precio: borde neutro, como el resto de las tarjetas */
.ms-pricing-card { border: 1px solid #D5DCE7; }

/* Sobre fondo oscuro el botón principal es blanco, igual que en el hero */
.ms-closing .ms-btn-primary { background: #fff; color: var(--ms-ink); }
.ms-closing .ms-btn-primary:hover { background: #E4EBF8; color: var(--ms-ink); }
.ms-problem-head { display: flex; flex-direction: column; align-items: flex-start; }
.ms-problem-head > * { text-align: left; margin-left: 0 !important; margin-right: 0 !important; }

/* ── PageSpeed (2026-11-12) ───────────────────────────────────────────────
   CLS 0,222: con align-items:center, la animación quedaba centrada respecto
   del texto del hero; al cargar las fuentes de la marca el texto crece ~60 px
   y la ventana bajaba ~30 px. Ahora se alinea arriba y un margen fijo la deja
   visualmente centrada, sin depender de la altura del texto. */
.ms-hx-inner { align-items: flex-start; }
@media (min-width: 1105px) { .ms-hx-stage-wrap { margin-top: 40px; } }

/* Contraste: la etiqueta de sección en azul no se lee sobre los paneles
   marinos (Seguridad, cierre). */
.ms-security-inner .ms-section-tag,
.ms-closing .ms-section-tag { color: #9CB7EC; }

/* ── Fuentes de respaldo con las medidas de la marca (PageSpeed 2026-11-12) ──
   Mientras cargan Plus Jakarta Sans y Work Sans, el navegador usa una fuente
   del sistema más angosta; al llegar las de la marca el texto cambia de ancho
   y de cantidad de líneas, y lo que está debajo salta (CLS: botones del hero
   en celular, franja de profesionales en escritorio). Estas caras usan Arial
   (o Liberation Sans, de mismas medidas, en Linux) escalada con size-adjust
   para ocupar el mismo ancho que la fuente final. Factores medidos con
   canvas.measureText sobre el texto del hero; Arial no tiene medio (500), por
   eso se agrupan los pesos en normal (≤500) y negrita (≥600). */
@font-face { font-family: "Work Sans Fallback"; font-weight: 100 500; size-adjust: 110.5%;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); }
@font-face { font-family: "Work Sans Fallback"; font-weight: 600 900; size-adjust: 103.2%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); }
@font-face { font-family: "Plus Jakarta Sans Fallback"; font-weight: 100 500; size-adjust: 105.5%;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"); }
@font-face { font-family: "Plus Jakarta Sans Fallback"; font-weight: 600 900; size-adjust: 100.4%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"); }
:root {
  --ms-font-heading: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', -apple-system, sans-serif;
  --ms-font-body:    'Work Sans', 'Work Sans Fallback', -apple-system, sans-serif;
}

/* ── Fuentes de la marca servidas desde mindsession.cl (2026-11-12) ────────
   Antes venían de Google Fonts por una hoja cargada en diferido: llegaban
   después del primer pintado y el texto se reacomodaba (CLS 0,2 en celular,
   en los botones del hero). Ahora son dos archivos variables propios (latin,
   cubre todo el español), precargados en layouts/landing, que llegan junto
   con el CSS. Son de Google Fonts (licencia SIL OFL): Plus Jakarta Sans v12 y
   Work Sans v24. Las caras "Fallback" de arriba siguen por si tardan. */
@font-face {
  font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/assets/plus-jakarta-sans-latin-817f351b.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: 'Work Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/work-sans-latin-ef179ac0.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;
}