/* ============================================================
   HOME: composición del producto (hero en capas y recorrido por pestañas)
   Solo se carga en index.php, después de editorial.css.
   Tokens de brand.css / editorial.css. Sin style="" ni !important.
   Piezas:
   - .hp-crop: recorte ampliado de una captura real 1280x720. Cada variante
     define la región de origen en píxeles (--cx, --cy, --cw, --ch).
   - .hp-frag: fragmento de interfaz recreado en HTML con datos visibles en
     las capturas (empresa de demostración). Tarjeta blanca, hairline y
     sombra en capas con desplazamiento.
   - .hs-*: hero, esquema especialistas -> plataforma -> evidencia (components/home-hero.php).
   - .tour-*, .tf-*: recorrido por pestañas (components/home-producto.php).
   Cortes: 640, 700, 760, 900, 1000, 1100px.
   ============================================================ */
:root {
  --hp-ink: #0f172a;
  --hp-ink-2: #334155;
  --hp-muted: #475569;
  --hp-line: rgba(15, 23, 42, 0.08);
  --hp-chip: #eff3f8;
  --hp-track: #e3eaf3;
  --hp-tint: #f0f6ff;
  /* Naranja de advertencia de la propia interfaz de Confirmer360 (EIPD pendiente,
     revisión vencida), oscurecido para pasar 4.5:1 como texto sobre blanco */
  --hp-warn: #b45309;
  --hp-ease-out: cubic-bezier(.16, 1, .3, 1);
  --hp-shadow:
    0 1px 1px rgba(15, 23, 42, 0.04),
    0 3px 6px -2px rgba(15, 23, 42, 0.06),
    0 12px 24px -8px rgba(15, 23, 42, 0.12),
    0 32px 56px -24px rgba(15, 23, 42, 0.24);
  --hp-shadow-dark:
    0 1px 2px rgba(2, 6, 23, 0.3),
    0 8px 16px -6px rgba(2, 6, 23, 0.4),
    0 28px 56px -20px rgba(2, 6, 23, 0.65);
}

/* ---------- Recorte de captura ---------- */
.hp-crop {
  position: relative; overflow: hidden;
  aspect-ratio: var(--cw) / var(--ch);
  border-radius: var(--ld-radius-media);
  border: 1px solid var(--hp-line);
  background: #fff;
  box-shadow: var(--hp-shadow);
}
.hp-crop img {
  position: absolute; max-width: none; height: auto;
  width: calc(1280 / var(--cw) * 100%);
  left: calc(var(--cx) / var(--cw) * -100%);
  top: calc(var(--cy) / var(--ch) * -100%);
}
/* Regiones de origen (px sobre 1280x720) */
.hp-crop--rat     { --cx: 72;  --cy: 320; --cw: 690; --ch: 400; } /* ley-5: estados, filtros y listado */
.hp-crop--arsop   { --cx: 86;  --cy: 382; --cw: 772; --ch: 338; } /* ley-2: pendientes con plazo legal crítico */
.hp-crop--consent { --cx: 58;  --cy: 56;  --cw: 610; --ch: 296; } /* ley-1: cuadro de mando, vigentes y autorizantes */
.hp-crop--eipd    { --cx: 855; --cy: 48;  --cw: 425; --ch: 380; } /* ley-6: ficha con aviso de EIPD */

/* ---------- Fragmento de interfaz ---------- */
.hp-frag {
  --accent: var(--accent-strong);
  display: flex; flex-direction: column; gap: var(--ld-s2);
  padding: 14px 16px;
  background: #fff; color: var(--hp-ink);
  border: 1px solid var(--hp-line); border-radius: var(--radius);
  box-shadow: var(--hp-shadow);
  font-family: var(--font-body); font-size: 0.8125rem; line-height: 1.35;
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.hp-frag b, .hp-frag strong { font-weight: 600; color: var(--hp-ink); }
.hp-frag-label {
  display: flex; align-items: center; gap: var(--ld-s2);
  font-size: 0.75rem; font-weight: 600; color: var(--hp-muted);
}
.hp-frag-label em { margin-left: auto; font-style: normal; font-weight: 500; }
.hp-ico {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
}
.hp-ico svg { width: 18px; height: 18px; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hp-ico--alert { background: rgba(214, 31, 79, 0.08); }
.hp-ico--alert svg { stroke: var(--red); }

/* ============================================================
   1. HERO: banda de marca + esquema «especialistas → plataforma → evidencia»
   El header lleva .home-band y .ld-dark (editorial.css, brand.css): fondo
   navy, motivo de registros, tokens de texto y acento para oscuro.
   Contraste sobre #0f172a: blanco 17.9:1, #cbd5e1 12:1, --muted (#94a3b8)
   6.9:1, acento #3B9EFF 6.4:1, verde #00A87E 5.9:1 (5.3:1 sobre #142038).
   ============================================================ */
.home-hero.home-band { padding: calc(var(--ld-nav-offset) + var(--ld-s7)) 0 var(--ld-s7); border-bottom: 0; }
.home-hero .home-band-dots { fill-opacity: 0.2; }
.home-hero .home-band-rows { stroke-opacity: 0.08; }
.home-hero .home-band-rows path:last-child,
.home-hero .home-band-ring, .home-hero .home-band-hub { display: none; }
.home-hero h1 { color: #fff; }
.home-hero .home-hero-lead { color: #cbd5e1; }
.home-hero .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.home-hero .btn-secondary:hover { color: #fff; border-color: #fff; }
.home-hero .ld-facts strong { color: #fff; }

.home-hero .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
.hs { margin: 0; min-width: 0; }
.hs-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hs-label {
  margin: 0 0 var(--ld-s3); font-size: 0.75rem; font-weight: 600; line-height: 1.3;
  letter-spacing: 0.01em; color: var(--muted);
}

/* (a) Especialistas: retratos reales */
.hs-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ld-s3); margin: 0; padding: 0; list-style: none; }
.hs-person { display: flex; align-items: center; gap: var(--ld-s3); min-width: 0; }
.hs-person img {
  flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.35), var(--hp-shadow-dark);
  background: var(--home-navy-raised);
}
.hs-person > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-person strong { font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: #fff; }
.hs-person span span { font-size: 0.75rem; line-height: 1.35; color: var(--muted); }

/* Conectores: en celular, un trazo vertical; desde 700px, curvas SVG */
.hs-link { position: relative; display: block; height: 28px; }
.hs-link svg { display: none; }
.hs-link::before {
  content: ''; position: absolute; left: 28px; top: 4px; bottom: 4px; width: 1px;
  background: rgba(var(--accent-rgb), 0.6);
}

/* (b) Confirmer360: una tarjeta nítida con datos de ley-2 */
.hs-app { position: relative; min-width: 0; padding-bottom: 18px; }
.hs-card {
  position: relative;
  padding: 16px 16px 26px; border-radius: var(--radius);
  background: #fff; color: var(--hp-ink);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--hp-shadow-dark);
  font-family: var(--font-body); font-variant-numeric: tabular-nums;
}
.hs-score { display: flex; align-items: center; gap: var(--ld-s3); padding-bottom: var(--ld-s3); border-bottom: 1px solid var(--hp-line); }
.hs-ring { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; }
.hs-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hs-ring circle { fill: none; stroke-width: 4; }
.hs-ring-track { stroke: var(--hp-track); }
/* Naranja del propio anillo de Confirmer360 (puntaje bajo 50); 3.2:1 sobre blanco */
.hs-ring-fill { stroke: #d97706; stroke-linecap: round; stroke-dasharray: 47 100; }
.hs-ring-num { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.hs-ring-num b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.hs-ring-num small { margin-top: 2px; font-size: 0.625rem; color: var(--hp-muted); }
.hs-score-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-score-title strong { font-size: 0.92rem; font-weight: 600; line-height: 1.25; }
.hs-score-title span { font-size: 0.75rem; color: var(--hp-muted); }
.hs-mods { margin: 0; padding: 0; list-style: none; }
.hs-mods li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 2.6em; column-gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--hp-line);
}
.hs-mods li:last-child { border-bottom: 0; }
.hs-mods .c360-icon { width: 16px; height: 16px; color: var(--accent-strong); }
.hs-mods span { font-size: 0.8rem; color: var(--hp-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-mods b { font-size: 0.95rem; font-weight: 700; text-align: right; }
.hs-mods em { font-style: normal; font-size: 0.75rem; color: var(--hp-muted); text-align: right; }
/* Alerta adosada al borde inferior de la tarjeta */
.hs-alert {
  position: absolute; left: 12px; right: 12px; bottom: -16px;
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 12px 7px 9px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid rgba(214, 31, 79, 0.28);
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.25), 0 8px 18px -8px rgba(2, 6, 23, 0.5);
  font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--red);
}
.hs-alert svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* (c) Evidencia: resultados verificados */
.hs-proof { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hs-proof li {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 10px; border-radius: var(--ld-radius-media);
  background: var(--home-navy-raised); border: 1px solid var(--ld-hairline-on-dark);
  font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: #fff;
}
.hs-proof-ico {
  position: relative; flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.08); color: var(--accent);
}
.hs-proof-ico .c360-icon { width: 18px; height: 18px; }
.hs-ok {
  position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 2px var(--home-navy-raised);
}
.hs-ok svg { width: 10px; height: 10px; fill: none; stroke: var(--home-navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hs-caption { margin-top: var(--ld-s4); font-size: 0.78rem; line-height: 1.4; color: var(--muted); }

/* Esquema en fila: tres columnas unidas por curvas (tablet y escritorio) */
@media (min-width: 700px) {
  .hs-grid {
    grid-template-columns: minmax(0, 150px) 32px minmax(0, 1fr) 32px minmax(0, 200px);
    grid-template-rows: auto auto;
  }
  .hs-label { grid-row: 1; align-self: end; }
  .hs-label--team { grid-column: 1; }
  .hs-label--app  { grid-column: 3; }
  .hs-label--proof { grid-column: 5; }
  .hs-team, .hs-link, .hs-app, .hs-proof { grid-row: 2; }
  .hs-app { grid-column: 3; padding-bottom: 0; align-self: center; }
  .hs-link { height: auto; align-self: stretch; }
  .hs-link--in { grid-column: 2; }
  .hs-link--out { grid-column: 4; }
  .hs-link::before { display: none; }
  .hs-link svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .hs-link path { fill: none; stroke: rgba(var(--accent-rgb), 0.7); stroke-width: 1.25; }
  /* Las curvas parten del centro de cada retrato (25 % y 75 %) y de cada evidencia */
  .hs-team { grid-column: 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 0; }
  .hs-person { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--ld-s2); }
  .hs-person img { width: 64px; height: 64px; }
  .hs-proof { grid-column: 5; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; gap: 10px; }
  .hs-proof li { height: 100%; }
  .hs-caption { margin-top: var(--ld-s6); text-align: center; }
  .hs { max-width: 780px; }
}

@media (min-width: 1100px) {
  .home-hero.home-band { padding: calc(var(--ld-nav-offset) + 40px) 0 40px; }
  .home-hero .home-hero-grid { grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr); gap: 40px; }
  .hs { max-width: none; }
  .hs-grid { grid-template-columns: 116px 26px minmax(0, 1fr) 26px 176px; }
  .hs-person img { width: 56px; height: 56px; }
  .hs-proof li { font-size: 0.78rem; }
  .home-hero .home-hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ld-s4); }
}

/* Movimiento autoral, una vez: las curvas se dibujan de izquierda a derecha
   (clip-path) y las piezas se asientan detrás del trazo. Total ≤ 900 ms.
   Parten visibles (opacidad 0.4): si la animación no corre, nada queda oculto. */
@keyframes hs-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hs-settle {
  from { opacity: 0.4; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hs-ring { from { stroke-dasharray: 0 100; } }
.hs-person    { animation: hs-settle 420ms var(--hp-ease-out) both; }
.hs-person + .hs-person { animation-delay: 60ms; }
.hs-link svg  { animation: hs-draw 320ms var(--hp-ease-out) 160ms both; }
.hs-link--out svg { animation-delay: 480ms; }
.hs-card      { animation: hs-settle 460ms var(--hp-ease-out) 300ms both; }
.hs-ring-fill { animation: hs-ring 520ms var(--hp-ease-out) 360ms both; }
.hs-proof li  { animation: hs-settle 380ms var(--hp-ease-out) 500ms both; }
.hs-proof li:nth-child(2) { animation-delay: 540ms; }
.hs-proof li:nth-child(3) { animation-delay: 580ms; }

/* ============================================================
   2. RECORRIDO POR PESTAÑAS (banda oscura)
   ============================================================ */
.tour { margin-top: var(--ld-s2); }

/* Pestañas: subrayado del acento en la activa, sin cápsulas */
.tour-tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--ld-s4);
  margin-bottom: var(--ld-s6);
}
.tour-tabs[hidden] { display: none; }
.tour-tab {
  position: relative; min-height: 48px; padding: var(--ld-s3) 0;
  border: 0; border-bottom: 1px solid var(--ld-hairline-on-dark); border-radius: 0;
  background: none; cursor: pointer; text-align: left;
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; line-height: 1.3;
  color: var(--muted-on-dark);
  transition: color .2s var(--ease);
}
.tour-tab::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--hp-ease-out);
}
.tour-tab:hover { color: var(--text-on-dark); }
.tour-tab[aria-selected="true"] { color: var(--text-on-dark); }
.tour-tab[aria-selected="true"]::after { transform: none; }

/* Panel: texto y composición */
.tour-panel { display: grid; gap: var(--ld-s6); }
.tour-panel[hidden] { display: none; }
.tour-panel:focus-visible { outline-offset: 8px; }
.tour-panel > * { min-width: 0; }
.tour:not(.is-tabbed) .tour-panel + .tour-panel {
  margin-top: var(--ld-s8); padding-top: var(--ld-s8); border-top: 1px solid var(--ld-hairline-on-dark);
}
.tour-text h3 {
  margin-bottom: var(--ld-s2);
  font-family: var(--font-display); font-size: var(--ld-type-title-lg); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.home-product .tour-oblig { margin: 0 0 var(--ld-s5); font-size: 0.82rem; font-weight: 600; line-height: 1.45; color: var(--accent); }
.tour-benefits { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ld-hairline-on-dark); }
.home-product .tour-benefits li {
  position: relative; padding: var(--ld-s3) 0 var(--ld-s3) 28px;
  border-bottom: 1px solid var(--ld-hairline-on-dark);
  font-size: 0.97rem; line-height: 1.55; color: #cbd5e1;
}
.tour-benefits li::before {
  content: ''; position: absolute; left: 2px; top: calc(var(--ld-s3) + 0.42em);
  width: 10px; height: 5px; border: solid var(--accent); border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* Composición: recorte sobre un fondo apenas más claro que la banda, fragmento encima */
.tour-visual { position: relative; }
.tour-visual .hp-crop { border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--hp-shadow-dark); }
.tour-visual .hp-frag { box-shadow: var(--hp-shadow-dark); }
.tour-frag { position: relative; z-index: 2; width: min(88%, 340px); margin: -32px auto 0 var(--ld-s3); }

/* Registro (ley-5) */
.tf-total { display: flex; align-items: baseline; gap: var(--ld-s2); font-size: 0.8rem; color: var(--hp-muted); }
.tf-total b { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.tf-bar { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; }
.tf-bar i { display: block; }
.tf-bar .is-draft    { flex: 5;  background: #94a3b8; }
.tf-bar .is-progress { flex: 3;  background: var(--accent-brand); }
.tf-bar .is-review   { flex: 4;  background: var(--accent-strong); }
.tf-bar .is-live     { flex: 26; background: var(--green-brand); }
.tf-legend { font-size: 0.72rem; color: var(--hp-muted); }
.tf-alerts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--ld-s4);
  margin-top: var(--ld-s1); padding-top: var(--ld-s3); border-top: 1px solid var(--hp-line);
}
.tf-alerts > span { display: flex; flex-direction: column; font-size: 0.75rem; line-height: 1.3; color: var(--hp-ink-2); }
.tf-alerts b { font-size: 1.15rem; font-weight: 700; }
.hp-frag .is-warn { color: var(--hp-warn); }
.hp-frag .is-red  { color: var(--red); }
.hp-frag .is-blue { color: var(--accent-strong); }

/* Plazo legal crítico (ley-2) */
.tf-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.tf-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ld-s3); align-items: center;
  padding-top: var(--ld-s2); border-top: 1px solid var(--hp-line);
}
.tf-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-row-text strong { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-row-text span { font-size: 0.72rem; color: var(--hp-muted); }
.tf-badge {
  padding: 2px 8px; border-radius: var(--ld-s3);
  border: 1px solid rgba(214, 31, 79, 0.22); background: rgba(214, 31, 79, 0.06);
  font-size: 0.72rem; font-weight: 600; color: var(--red); white-space: nowrap;
}

/* Canales de captura (ley-4) */
.tf-chan {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 3.4em; column-gap: var(--ld-s3); row-gap: 6px; align-items: baseline;
  padding-top: var(--ld-s2); border-top: 1px solid var(--hp-line);
}
.tf-chan > span { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-chan b { font-size: 0.85rem; text-align: right; }
.tf-chan em { font-style: normal; font-size: 0.78rem; color: var(--hp-ink-2); text-align: right; }
.tf-meter { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--hp-track); overflow: hidden; }
.tf-meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent-strong); }
.tf-meter .is-80 { width: 80%; }
.tf-meter .is-81 { width: 81.3%; }

/* Tratamientos con EIPD pendiente (ley-5, ley-6) */
.tour-frag--eipd .hp-frag-label { color: var(--hp-ink); font-size: 0.8rem; }
.tour-frag--eipd .hp-frag-label b { font-size: 1.05rem; }
.tf-rat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 4px; align-items: baseline;
  padding-top: var(--ld-s2); border-top: 1px solid var(--hp-line);
}
.tf-rat code {
  padding: 1px 6px; border-radius: var(--radius-sm); background: rgba(var(--accent-strong-rgb), 0.08);
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent-strong);
}
.tf-rat strong { font-size: 0.8rem; line-height: 1.35; }
.tf-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--ld-s1) var(--ld-s3); }
.tf-tags i { font-style: normal; font-size: 0.72rem; font-weight: 500; color: var(--hp-muted); }
.tf-tags i:first-child { color: var(--hp-warn); }

/* Cierre de la sección */
.home-product .tour-also { margin: var(--ld-s7) 0 0; max-width: 72ch; font-size: 0.9rem; line-height: 1.6; }

@media (min-width: 641px) {
  .tour-visual { padding: var(--ld-s6) 0 96px; }
  .tour-visual::before {
    content: ''; position: absolute; inset: 0 0 0 12%;
    border-radius: var(--ld-s5); background: rgba(148, 163, 184, 0.07);
    border: 1px solid var(--ld-hairline-on-dark);
  }
  .tour-base { width: 88%; margin-left: 6%; }
  .tour-frag { position: absolute; left: 0; bottom: 0; width: min(60%, 340px); margin: 0; }
  .tour-frag--arsop { width: min(64%, 360px); }
  /* EIPD: la ficha es angosta y alta; queda a la derecha y no se amplía de más */
  .tour-panel--eipd .tour-base { width: 56%; margin-left: auto; margin-right: 5%; }
  .tour-frag--eipd { width: min(62%, 350px); }
  /* Consentimientos: el fragmento cuelga más abajo para no tapar las cifras vigentes */
  .tour-panel--consent .tour-visual { padding-bottom: 136px; }
}
@media (min-width: 760px) {
  .tour-tabs {
    display: flex; gap: var(--ld-s6); column-gap: var(--ld-s6);
    border-bottom: 1px solid var(--ld-hairline-on-dark); margin-bottom: var(--ld-s7);
  }
  .tour-tab { border-bottom: 0; padding: var(--ld-s4) 0; font-size: 0.97rem; }
}
@media (min-width: 900px) {
  .tour-panel { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.3fr); gap: var(--ld-s8); align-items: center; }
}

/* Cambio de pestaña: la composición se asienta (estado, no decoración) */
@keyframes hp-swap {
  from { opacity: 0.3; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: none; }
}
.tour.is-tabbed .tour-panel:not([hidden]) .tour-visual > * { animation: hp-swap 380ms var(--hp-ease-out) both; }
.tour.is-tabbed .tour-panel:not([hidden]) .tour-frag { animation-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
  .hs-person, .hs-link svg, .hs-card, .hs-ring-fill, .hs-proof li,
  .tour.is-tabbed .tour-panel:not([hidden]) .tour-visual > * { animation: none; }
  .tour-tab, .tour-tab::after { transition: none; }
}