/* ═══════════════════════════════════════════════════════════════════════
   landing-paginas.css — lo NUEVO de la landing en páginas (15-sep-2026).

   landing.css es la hoja que ya existía (movida tal cual desde la portada).
   Aquí va lo que no existía: la transición entre páginas, el menú de celular,
   la barra de avance, los héroes de cada página, los actos del storytelling
   de /funciones, la tabla comparativa de /precios, las tarjetas de
   /testimonios y las secciones nuevas de /seguridad, y las animaciones de
   entrada genéricas ([data-reveal]).

   Responsive: se probó a 1440 (MacBook Air), 884×1104 (Fold abierto) y
   344×882 (Fold cerrado). Cualquier ancho fijo aquí es un bug.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · Transición entre páginas (View Transitions entre documentos) ─────
   Las cinco páginas la declaran (esta hoja va en todas), así que el
   navegador anima el cambio en vez de pintar la nueva en blanco. La barra
   superior, la franja verde, el riel y los botones fijos llevan nombre: el
   navegador los empareja entre la página vieja y la nueva y NO parpadean.
   El resto (root) sale hacia arriba desenfocado y la nueva entra desde
   abajo. Con «reducir movimiento» activado, sólo un fundido corto. ────── */
@view-transition { navigation: auto; }

.landing-nav       { view-transition-name: lp-nav; }
.urgency-bar       { view-transition-name: lp-urgencia; }
.page-toc          { view-transition-name: lp-riel; }
.wa-float          { view-transition-name: lp-wa; }
.mobile-sticky-cta { view-transition-name: lp-cta-fija; }
.lp-progress       { view-transition-name: lp-avance; }

::view-transition-old(root) {
  animation: 240ms cubic-bezier(.4, 0, 1, 1) both lp-pagina-sale;
}
::view-transition-new(root) {
  animation: 520ms cubic-bezier(.16, 1, .3, 1) both lp-pagina-entra;
}
@keyframes lp-pagina-sale {
  to { opacity: 0; transform: translateY(-22px) scale(.985); filter: blur(6px); }
}
@keyframes lp-pagina-entra {
  from { opacity: 0; transform: translateY(28px) scale(.99); filter: blur(8px); }
}
/* Dirección: al ir «hacia atrás» en el orden del menú, la página sale hacia
   abajo y la nueva baja desde arriba (lo pone landing-paginas.js). */
html:active-view-transition-type(atras)::view-transition-old(root) { animation-name: lp-pagina-sale-atras; }
html:active-view-transition-type(atras)::view-transition-new(root) { animation-name: lp-pagina-entra-atras; }
@keyframes lp-pagina-sale-atras {
  to { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); }
}
@keyframes lp-pagina-entra-atras {
  from { opacity: 0; transform: translateY(-28px) scale(.99); filter: blur(8px); }
}
/* Los elementos con nombre no se funden: son los mismos y quedan quietos. */
::view-transition-group(lp-nav),
::view-transition-group(lp-urgencia),
::view-transition-group(lp-wa),
::view-transition-group(lp-cta-fija),
::view-transition-group(lp-avance) { animation-duration: 0s; }
::view-transition-old(lp-nav), ::view-transition-new(lp-nav),
::view-transition-old(lp-wa),  ::view-transition-new(lp-wa) { animation: none; mix-blend-mode: normal; }
/* El riel sí cambia de puntos entre páginas: fundido corto. */
::view-transition-group(lp-riel) { animation-duration: 260ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: 160ms; animation-name: lp-solo-fundido;
  }
  @keyframes lp-solo-fundido { from { opacity: 0; } }
}

/* ── 2 · Barra superior: enlaces a páginas, página activa y menú móvil ──── */
.landing-brand { text-decoration: none; }
.landing-nav-links a { position: relative; padding: 4px 0; }
.landing-nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.landing-nav-links a:hover::after,
.landing-nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.landing-nav-links a[aria-current="page"] { color: #0F172A; font-weight: 700; }

.lp-burger {
  display: none; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; padding: 0; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; flex-shrink: 0;
}
.lp-burger .lp-burger-ico i { display: block; width: 18px; height: 2px; background: #0F172A; border-radius: 2px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .2s; }
.lp-burger[aria-expanded="true"] .lp-burger-ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lp-burger[aria-expanded="true"] .lp-burger-ico i:nth-child(2) { opacity: 0; }
.lp-burger[aria-expanded="true"] .lp-burger-ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 900px) { .lp-burger { display: flex; } }
/* La hamburguesa con nombre (15-sep-2026). El icono va en `.lp-burger-ico` y
   las rayas son <i>, no <span>: así el texto «Menú» no hereda el estilo de raya. */
.lp-burger { width: auto; height: 40px; flex-direction: row; gap: 7px; padding: 0 12px 0 10px; }
.lp-burger-ico { display: flex; flex-direction: column; gap: 4px; }
.lp-burger-txt { font-size: 13.5px; font-weight: 700; color: #0F172A; letter-spacing: -.01em; line-height: 1; }
/* El CTA de arriba sólo en escritorio: en celular vive en el menú y en la
   barra flotante, y aquí le quitaba el sitio a todo lo demás. */
@media (max-width: 900px) { .lp-nav-solo-escritorio { display: none !important; } }

.lp-menu {
  position: fixed; inset: 0; z-index: 99; background: rgba(248,250,252,.96);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: calc(env(safe-area-inset-top, 0px) + 84px) 24px 40px; overflow-y: auto;
  animation: lp-menu-abre .28s cubic-bezier(.16,1,.3,1) both;
}
.lp-menu[hidden] { display: none; }
@keyframes lp-menu-abre { from { opacity: 0; } }
.lp-menu-inner { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px; }
.lp-menu-link {
  display: flex; align-items: center; gap: 16px; text-decoration: none; color: #0F172A;
  font-size: clamp(22px, 6vw, 30px); font-weight: 900; letter-spacing: -.02em; padding: 12px 6px;
  border-bottom: 1px solid #E2E8F0;
  animation: lp-menu-link .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms);
}
.lp-menu-link[aria-current="page"] { color: var(--brand-blue); }
.lp-menu-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700;
  color: #94A3B8; letter-spacing: .1em; }
.lp-menu-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap;
  animation: lp-menu-link .5s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 55ms); }
.lp-menu-actions .btn { flex: 1 1 160px; text-align: center; justify-content: center; }
@keyframes lp-menu-link { from { opacity: 0; transform: translateY(14px); } }
body.lp-menu-abierto { overflow: hidden; }

/* ── 3 · Barra de avance (celular, donde el riel se esconde) ─────────────── */
.lp-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 101; pointer-events: none;
  background: transparent; display: none;
}
.lp-progress-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-green));
  transform: scaleX(0); transform-origin: left; will-change: transform;
}
@media (max-width: 1100px) { .lp-progress { display: block; } }

/* ── 4 · Héroes de página y entradas escalonadas (.lp-ent) ──────────────── */
.lp-hero { position: relative; padding: 88px 24px 56px; text-align: center; overflow: hidden; }
.lp-hero-inner { max-width: 820px; margin: 0 auto; }
/* Los héroes van sobre el fondo oscuro animado del body (el mismo del hero
   de la portada), así que el texto es blanco; las secciones de abajo ponen su
   propio fondo claro. */
.lp-hero h1 {
  font-size: clamp(34px, 5.2vw, 60px); font-weight: 900; color: #fff;
  letter-spacing: -.035em; line-height: 1.06; margin: 0 0 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,.25);
}
.lp-grad {
  background: linear-gradient(92deg, #7CC4FF 0%, #A6E5FF 45%, #86E574 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-hero-sub { font-size: clamp(16px, 1.6vw, 19px); color: #DCE6F2; line-height: 1.6; margin: 0 auto 26px; max-width: 640px; }
.lp-hero-nota { font-size: 13px; color: #A9B8CC; margin: 22px auto 0; max-width: 560px; line-height: 1.55; }
.lp-hero .section-tag { background: rgba(255,255,255,.14); color: #DCEBFF; border: 1px solid rgba(255,255,255,.18); }
.lp-hero--funciones::before {
  content: ''; position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1;
  background: radial-gradient(60% 60% at 30% 40%, rgba(124,196,255,.22), transparent 70%),
              radial-gradient(50% 50% at 75% 30%, rgba(134,229,116,.18), transparent 70%);
  pointer-events: none;
}
.lp-hero--testimonios::before {
  content: ''; position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1;
  background: radial-gradient(55% 55% at 70% 40%, rgba(245,158,11,.18), transparent 70%),
              radial-gradient(50% 50% at 25% 30%, rgba(124,196,255,.2), transparent 70%);
  pointer-events: none;
}
.lp-actos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lp-actos a {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px;
  background: #fff; border: 1px solid #E2E8F0; color: #0F172A; font-size: 14px; font-weight: 700;
  text-decoration: none; box-shadow: 0 2px 10px rgba(15,23,42,.05);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lp-actos a:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(27,123,214,.14); border-color: #BFDBFE; }
.lp-actos-n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--brand-blue); letter-spacing: .08em; }
.lp-actos--dark { margin-top: 26px; }
.lp-actos--dark a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #E2E8F0; box-shadow: none; }
.lp-actos--dark a:hover { border-color: rgba(147,197,253,.6); box-shadow: 0 8px 22px rgba(0,0,0,.25); }

/* Entrada al cargar: cada pieza con su --ent (0, 1, 2…) llega escalonada. */
.lp-ent { animation: lp-ent .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--ent, 0) * 90ms); }
@keyframes lp-ent { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.trust-final h1 {
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 900; color: white;
  letter-spacing: -.03em; line-height: 1.12; margin: 0 0 14px;
}

/* ── 5 · Entradas por scroll: [data-reveal] ───────────────────────────────
   Genérico para las secciones nuevas (las viejas siguen con .lnd-reveal y
   .fx-in). Un IntersectionObserver en landing-paginas.js pone .is-in una
   sola vez. Con data-reveal-stagger, los hijos entran uno tras otro. ─── */
[data-reveal] {
  opacity: 0; transform: translateY(22px); filter: blur(5px);
  transition: opacity .7s ease, transform .85s cubic-bezier(.16,1,.3,1), filter .7s ease;
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .75s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; filter: none; transition: none; }
  .lp-ent { animation: none; }
  .lp-menu, .lp-menu-link, .lp-menu-actions { animation: none; }
}

/* ── 6 · /funciones: los tres actos y las filas nuevas ──────────────────── */
.lp-acto { position: relative; text-align: center; margin: 24px auto 72px; max-width: 760px; }
.lp-acto .section-sub { margin: 0 auto; text-align: center; max-width: 620px; }
.lp-acto .section-heading em { font-style: normal;
  background: linear-gradient(92deg, var(--brand-blue), var(--brand-green));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-acto-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(64px, 10vw, 120px);
  font-weight: 800; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(27,123,214,.28);
  margin: 0 0 -18px; letter-spacing: -.04em; user-select: none;
}
.lp-acto--menor { margin-top: 0; margin-bottom: 40px; }
.lp-acto:not(:first-child) { padding-top: 24px; }
.fx-row--9::before  { background: linear-gradient(155deg,#ECFEFF 0%,#D6F6FA 100%); box-shadow: inset 0 0 0 1px #B7EBF2; }
.fx-row--10::before { background: linear-gradient(155deg,#F0FDF4 0%,#DCF5E3 100%); box-shadow: inset 0 0 0 1px #C0E9CB; }
.fx-row--11::before { background: linear-gradient(155deg,#F3F0FF 0%,#E7E0FD 100%); box-shadow: inset 0 0 0 1px #D5CBF8; }
.fx-row--12::before { background: linear-gradient(155deg,#EEF6FF 0%,#DCEBFD 100%); box-shadow: inset 0 0 0 1px #C4DAF6; }
.fx-row--13::before { background: linear-gradient(155deg,#F5F3FF 0%,#EBE6FD 100%); box-shadow: inset 0 0 0 1px #D9D0F8; }
.fx-kicker.fx-k-cyan { color: #0E7490; background: #ECFEFF; }

/* La ilustración del portal: un mensaje de WhatsApp dibujado en CSS. Se
   etiqueta como ilustración en la página; no es una captura. */
.fx-shot--ilus { display: flex; align-items: center; justify-content: center; min-height: 320px; }
.lp-chat {
  width: min(360px, 100%); background: #ECE5DD; border-radius: 22px; padding: 14px 12px 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,.14), inset 0 0 0 1px rgba(15,23,42,.06);
  font-size: 14px; color: #111B21; position: relative;
}
.lp-chat-head { display: flex; align-items: center; gap: 10px; font-weight: 700; padding: 2px 4px 12px; color: #0F172A; }
.lp-chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green)); color: #fff; font-weight: 800; font-size: 13px; }
.lp-chat-msg { background: #fff; border-radius: 4px 14px 14px 14px; padding: 10px 12px 18px; line-height: 1.45; position: relative;
  box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.lp-chat-link { display: block; margin-top: 8px; color: #027EB5; font-weight: 600; }
.lp-chat-time { position: absolute; right: 10px; bottom: 5px; font-size: 11px; color: #667781; }
.lp-chat-card { margin-top: 10px; background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.lp-chat-card-t { font-size: 12px; font-weight: 800; color: var(--brand-blue); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.lp-chat-card-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #F1F5F9; font-size: 13.5px; }
.lp-chat-card-row span:last-child { color: #64748B; font-variant-numeric: tabular-nums; }

.lp-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 72px; }
.lp-trio-card { background: #fff; border: 1px solid #E2E8F0; border-radius: 18px; padding: 26px 24px;
  box-shadow: 0 4px 18px rgba(15,23,42,.05); }
.lp-trio-card h3 { font-size: 18px; font-weight: 800; color: #0F172A; letter-spacing: -.015em; margin: 14px 0 8px; line-height: 1.3; }
.lp-trio-card p { font-size: 14.5px; color: #475569; line-height: 1.6; margin: 0; }
.lp-trio-nota { margin-top: 10px !important; font-size: 13.5px !important; color: #64748B !important; }
.lp-trio-nota a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.lp-trio-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: var(--b, #EFF6FF); color: var(--c, var(--brand-blue)); }
.lp-trio-ico svg { width: 22px; height: 22px; }

/* El botón azul de las páginas (el .btn-hero-primary de la portada sólo
   está estilizado dentro de sus propios contenedores). */
.lp-seguir .btn-hero-primary, .lp-comp-cta .btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-green-dark)); color: #fff;
  font-size: 15px; font-weight: 800; border-radius: 12px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(27,123,214,.3); transition: transform .2s, box-shadow .2s; border: none;
}
.lp-seguir .btn-hero-primary:hover, .lp-comp-cta .btn-hero-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(27,123,214,.38); }
.lp-seguir { text-align: center; padding: 8px 0 24px; }
.lp-seguir p { font-size: 17px; color: #334155; font-weight: 600; margin: 0 0 22px; }
.lp-seguir .btn-hero-primary { margin-bottom: 14px; }
.lp-seguir-link { display: block; margin-top: 12px; color: var(--brand-blue); font-weight: 700; text-decoration: none; font-size: 15px; }
.lp-seguir-link:hover { text-decoration: underline; }

/* ── 7 · /precios: la comparativa ───────────────────────────────────────── */
.lp-comp { background: #fff; padding: 88px 24px 96px; }
.lp-comp-inner { max-width: 1160px; margin: 0 auto; }
.lp-comp-head { text-align: center; margin-bottom: 40px; }
.lp-comp-head .section-sub { margin: 0 auto; text-align: center; max-width: 620px; }
.lp-comp-head .section-heading em { font-style: normal; color: var(--brand-blue); }
.lp-comp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E2E8F0; border-radius: 18px;
  box-shadow: 0 8px 30px rgba(15,23,42,.06); scrollbar-width: thin; }
.lp-comp-table { width: 100%; min-width: 960px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.lp-comp-table th, .lp-comp-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #EEF2F7; }
.lp-comp-table thead th { position: sticky; top: 0; background: #fff; z-index: 2; padding-top: 18px; padding-bottom: 14px; border-bottom: 2px solid #E2E8F0; }
.lp-comp-table .lp-comp-que { position: sticky; left: 0; background: #fff; z-index: 1; font-weight: 600; color: #0F172A; width: 30%; min-width: 220px;
  box-shadow: 4px 0 12px -8px rgba(15,23,42,.18); }
.lp-comp-table thead .lp-comp-que { z-index: 3; }
.lp-comp-hint { font-size: 11.5px; font-weight: 600; color: #94A3B8; letter-spacing: .02em; display: none; }
.lp-comp-nombre { display: block; font-size: 15px; font-weight: 900; color: #0F172A; letter-spacing: -.01em; }
.lp-comp-sub { display: block; font-size: 11.5px; color: #64748B; font-weight: 500; margin-top: 2px; }
.lp-comp-col { color: #334155; line-height: 1.45; }
.lp-comp-col--mdd { background: #F0F9FF; color: #0F172A; font-weight: 600; }
.lp-comp-table thead .lp-comp-col--mdd { background: #E6F2FD; box-shadow: inset 0 3px 0 var(--brand-blue); }
.lp-comp-grupo th { background: #F8FAFC; color: var(--brand-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 10px 16px; position: sticky; left: 0; }
.lp-si, .lp-no { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; align-items: center; justify-content: center; }
.lp-si { background: #DCFCE7; color: #15803D; } .lp-no { background: #FEE2E2; color: #B91C1C; }
.lp-si svg, .lp-no svg { width: 14px; height: 14px; }
.lp-nd { color: #94A3B8; font-weight: 700; }
.lp-comp-nota { font-size: 13px; color: #64748B; line-height: 1.65; max-width: 900px; margin: 18px auto 0; text-align: center; }
.lp-comp-nota a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.lp-comp-cta { text-align: center; margin-top: 36px; }
.lp-comp-cta .lp-seguir-link { display: block; margin-top: 14px; }
@media (max-width: 900px) {
  .lp-comp { padding: 64px 16px 72px; }
  .lp-comp-hint { display: inline; }
  .lp-comp-table { font-size: 13px; min-width: 820px; }
  .lp-comp-table .lp-comp-que { min-width: 160px; width: 34%; }
  .lp-comp-table th, .lp-comp-table td { padding: 11px 12px; }
}
@media (max-width: 600px) {
  /* Fold cerrado: la primera columna pegada ocupaba tanto que la de
     MyDoctorDiary no se veía sin deslizar. */
  .lp-comp-table { font-size: 12.5px; min-width: 760px; }
  .lp-comp-table .lp-comp-que { min-width: 128px; width: 128px; padding-right: 8px; }
  .lp-comp-table .lp-comp-col { min-width: 126px; }
  .lp-comp-table th, .lp-comp-table td { padding: 10px 10px; }
  .lp-comp-nombre { font-size: 13.5px; }
}

/* ── 8 · /testimonios ───────────────────────────────────────────────────── */
.lp-testis { padding: 64px 24px 80px; background: #fff; }
.lp-testis-inner { max-width: 1100px; margin: 0 auto; }
.lp-testis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.lp-testi {
  margin: 0; background: linear-gradient(160deg, #0F172A, #1E293B); color: #fff; border-radius: 20px; padding: 28px 26px 24px;
  box-shadow: 0 16px 44px rgba(15,23,42,.22); position: relative; overflow: hidden;
}
.lp-testi::before { content: '“'; position: absolute; right: 18px; top: -18px; font-size: 140px; font-weight: 900;
  color: rgba(255,255,255,.06); line-height: 1; font-family: Georgia, serif; }
.lp-testi .testimonial-stars { margin-bottom: 14px; display: flex; gap: 3px; }
.lp-testi .testimonial-stars svg { width: 18px; height: 18px; fill: #F59E0B; }
.lp-testi-quote { margin: 0 0 20px; font-size: 17px; line-height: 1.6; color: #E2E8F0; }
.lp-testi-quote em { font-style: normal; color: #86E574; font-weight: 700; }
.lp-testis-nota { text-align: center; font-size: 14px; color: #64748B; margin: 28px auto 0; max-width: 560px; line-height: 1.6; }
.lp-testis-nota a { color: var(--brand-blue); font-weight: 700; text-decoration: none; }
.landing-body[data-page="testimonios"] .how-section-v3 { background: #F8FAFC; }

/* ── 9 · /seguridad: controles, privacidad, certificación ─────────────────
   Francisco (15-sep-2026): toda la página en los colores oscuros de la
   sección original de seguridad («se ve elegante, profesional, serio»). Los
   valores son los de .trust-final: navy #0A0F1E → #0F1E3D, tarjetas de
   cristal al 5 % y texto #94A3B8 / blanco. ─────────────────────────────── */
.lp-sec { padding: 88px 24px; background: linear-gradient(135deg, #0A0F1E 0%, #0F1E3D 50%, #0A0F1E 100%); position: relative; overflow: hidden; }
.lp-sec::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 32px 32px; }
.lp-sec--alt { background: linear-gradient(135deg, #0C1326 0%, #0A0F1E 55%, #0F1E3D 100%); }
.lp-sec-inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.lp-sec-inner--angosto { max-width: 860px; }
.lp-sec-head { text-align: center; margin-bottom: 44px; }
.lp-sec-head .section-tag { background: rgba(255,255,255,.09); color: #93C5FD; }
.lp-sec-head .section-heading { color: #fff; }
.lp-sec-head .section-sub { margin: 0 auto; text-align: center; max-width: 680px; color: #94A3B8; }
.lp-sec-head .section-heading em { font-style: normal; color: #7CC4FF; }
.lp-ctrl-grid, .lp-priv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.lp-ctrl, .lp-priv { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 22px 22px 20px;
  transition: background .25s, border-color .25s, transform .25s; }
.lp-ctrl:hover, .lp-priv:hover { background: rgba(255,255,255,.08); border-color: rgba(147,197,253,.35); transform: translateY(-2px); }
.lp-ctrl h3, .lp-priv h3 { font-size: 16px; font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -.01em; line-height: 1.3;
  padding-left: 14px; position: relative; }
.lp-ctrl h3::before, .lp-priv h3::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #57ABFF, #86E574); }
.lp-ctrl p, .lp-priv p { font-size: 14px; color: #A9B8CC; line-height: 1.6; margin: 0; }
.lp-priv p b { color: #E2E8F0; }
.lp-priv a { color: #7CC4FF; font-weight: 600; text-decoration: none; }
.lp-sec-links { text-align: center; font-size: 14px; color: #94A3B8; margin: 30px 0 0; line-height: 1.7; }
.lp-sec-links a { color: #7CC4FF; font-weight: 700; text-decoration: none; }
.lp-cert { display: grid; gap: 14px; }
.lp-cert-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 22px 24px; }
.lp-cert-item h3 { font-size: 17px; font-weight: 800; color: #fff; margin: 8px 0 8px; letter-spacing: -.01em; }
.lp-cert-item p { font-size: 14.5px; color: #A9B8CC; line-height: 1.65; margin: 0; }
.lp-cert-estado { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 999px; }
.lp-cert-estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.lp-cert-estado--curso { background: rgba(251,146,60,.16); color: #FDBA74; }
.lp-cert-estado--ok { background: rgba(134,229,116,.14); color: #86E574; }
.lp-cert-estado--nota { background: rgba(147,197,253,.14); color: #93C5FD; }
/* Sin costura entre la sección original (.trust-final) y las nuevas. */
.landing-body[data-page="seguridad"] .trust-final { padding-bottom: 72px; }
.landing-body[data-page="seguridad"] .lp-sec { padding-top: 72px; }

/* ── 10 · CTA compartido: el segundo enlace junto al botón ──────────────── */
.cta-v3-actions { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.cta-v3-link { color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none; opacity: .92;
  border-bottom: 1.5px solid rgba(255,255,255,.35); padding-bottom: 2px; transition: opacity .2s, border-color .2s; }
.cta-v3-link:hover { opacity: 1; border-color: #fff; }
.cta-v3-link span { display: inline-block; transition: transform .2s; }
.cta-v3-link:hover span { transform: translateX(4px); }

/* ── 11 · Celular y Fold ───────────────────────────────────────────────────
   Fold abierto (884 px) cae en el rango de tablet: dos columnas donde hay
   tres. Fold cerrado (344 px): una columna, títulos con clamp, chips que
   envuelven, tabla con scroll horizontal y su aviso. ────────────────────── */
@media (max-width: 1000px) {
  .lp-trio { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .lp-hero { padding: 56px 18px 36px; }
  .lp-actos a { padding: 9px 13px; font-size: 13px; }
  .lp-acto { margin-bottom: 48px; }
  .lp-trio { grid-template-columns: 1fr; margin-bottom: 48px; }
  .lp-sec { padding: 60px 18px; }
  .lp-testis { padding: 44px 16px 56px; }
  .lp-testi { padding: 22px 20px 20px; }
  .cta-v3-actions { flex-direction: column; gap: 14px; }
}
@media (max-width: 380px) {
  .lp-hero h1 { font-size: 30px; }
  .lp-acto-num { font-size: 58px; }
  /* 15-sep-2026 (Francisco): «iniciar sesión y menú se quedan, solo quita el
     empezar gratis». Aquí se escondía «Iniciar sesión» bajo 380 px; con el
     CTA fuera de la barra ya cabe, y un médico que vuelve lo busca ahí. */
  .landing-nav-actions .btn-ghost { display: inline-flex; padding: 8px 9px; }
}

/* ── 12 · /comparativa: el total de cada quien y la tabla de precios ───────
   15-sep-2026. La comparativa salió de /precios a su propia página y cambió
   de eje: ya no es «quién tiene qué» sino «cuánto cuesta esto mismo».
   Francisco: «atacaremos su lado más débil, el precio».

   El bloque del total va sobre el fondo oscuro del héroe (tarjetas de vidrio,
   como `.lp-cert-item` en /seguridad); la tabla de abajo ya trae su fondo
   blanco desde `.lp-comp`. */
.lp-hero--comp::before {
  content: ''; position: absolute; inset: -40% -20% auto; height: 120%; z-index: -1;
  background: radial-gradient(55% 55% at 28% 38%, rgba(124,196,255,.20), transparent 70%),
              radial-gradient(50% 50% at 78% 32%, rgba(134,229,116,.16), transparent 70%);
  pointer-events: none;
}
.lp-tot { padding: 4px 24px 76px; }
.lp-tot-inner { max-width: 1160px; margin: 0 auto; }
.lp-tot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.lp-tot-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column;
}
/* La nuestra, encendida: es la única columna que el visitante tiene que
   recordar cuando cierre la página. */
.lp-tot-card--mdd {
  background: linear-gradient(165deg, rgba(27,123,214,.35), rgba(84,185,72,.22));
  border-color: rgba(167,216,255,.45);
  box-shadow: 0 16px 40px -22px rgba(0,0,0,.6);
}
.lp-tot-nombre { font-size: 13px; font-weight: 800; color: #DCEBFF; letter-spacing: -.01em; }
.lp-tot-cifra { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; color: #fff; letter-spacing: -.035em; line-height: 1.05; margin-top: 8px; }
.lp-tot-unidad { font-size: 12.5px; color: #A9B8CC; margin-top: 3px; }
.lp-tot-cuenta { font-size: 12.5px; line-height: 1.5; color: #C7D4E4; margin: 12px 0 0; }
.lp-tot-faltan {
  font-size: 12.5px; line-height: 1.45; color: #FFC9C9; margin: 12px 0 0 0;
  padding-top: 11px; border-top: 1px solid rgba(255,255,255,.10); font-weight: 600;
}
.lp-tot-faltan span { color: #FCA5A5; font-weight: 800; margin-right: 4px; }
.lp-tot-todo {
  font-size: 12.5px; line-height: 1.45; color: #C9F5C0; font-weight: 700; margin: 12px 0 0 0;
  padding-top: 11px; border-top: 1px solid rgba(255,255,255,.14);
}
.lp-tot-pie { text-align: center; font-size: 13px; color: #A9B8CC; max-width: 720px; margin: 22px auto 0; line-height: 1.55; }

/* La casilla con cifra: el precio pesa, el plan explica. */
.lp-comp-precio { display: block; font-size: 13.5px; line-height: 1.45; }
.lp-comp-table--precios .lp-comp-col--mdd .lp-comp-precio { font-weight: 700; color: #0F172A; }
.lp-comp-detalle { display: block; font-size: 12px; font-weight: 500; color: #64748B; margin-top: 4px; line-height: 1.45; }
.lp-nd { color: #94A3B8; font-size: 12.5px; font-style: italic; }
.lp-no-inline { color: #B91C1C; font-weight: 800; }
.lp-comp-fuentes { text-align: center; font-size: 12.5px; color: #64748B; margin: 14px auto 0; max-width: 900px; line-height: 1.7; }
.lp-comp-fuentes a { color: #475569; }

@media (max-width: 1100px) {
  .lp-tot-grid { grid-template-columns: repeat(2, 1fr); }
  /* La nuestra, primero y a lo ancho: en dos columnas quedaba de tercera y
     el visitante comparaba entre ellos antes de vernos. */
  .lp-tot-card--mdd { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 560px) {
  .lp-tot { padding: 4px 16px 56px; }
  .lp-tot-grid { grid-template-columns: 1fr; }
  .lp-comp-fuentes { font-size: 12px; }
}