/* 1. Base independiente. Espacios y tipografía relativos; columnas Flexbox. */
* { box-sizing: border-box; }
.distributor-page { margin: 0; color: #081326; font-family: Inter, "Segoe UI", Arial, sans-serif; }
.distributor { --selection-color: #ef102b; padding: clamp(2.5rem, 5vw, 5rem) clamp(1.25rem, 4vw, 5rem); background: radial-gradient(ellipse at 70% 50%, #fce9ee80, transparent 55%), #f7f9fc; }
.distributor-layout { display: flex; align-items: flex-end; gap: clamp(2rem, 5vw, 5.5rem); max-inline-size: 96rem; margin-inline: auto; position: relative; }
.distributor-panel { flex: 1 1 68%; min-inline-size: 0; }
.distributor-eyebrow { display: flex; align-items: center; gap: 1rem; margin: 0 0 1.125rem; color: #ef102b; font-size: .875rem; }
.distributor-eyebrow::before { content: ""; flex: 0 0 2.5rem; block-size: .125rem; background: currentColor; }
.distributor-heading h2 { margin: 0 0 2.25rem; font-size: clamp(1.8rem, 1rem + 2vw, 3.4rem); letter-spacing: -.04em; line-height: 1.12; }
.dashboard-figure { margin: 0; position: relative; }
.dashboard-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: 1.25rem; box-shadow: 0 1rem 2.5rem #21334b20; }
.capabilities { flex: 0 1 27%; min-inline-size: 0; }
.capabilities-heading h3 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1rem + 1vw, 2.2rem); line-height: 1.2; }
.capabilities-heading p { margin: 0 0 1.75rem; color: #697a92; font-size: clamp(.9375rem, .7rem + .45vw, 1.15rem); line-height: 1.5; }
/* 2. Tarjetas reales: foco de teclado, selección persistente y respuesta visual. */
.capability-list { display: flex; flex-direction: column; gap: clamp(.875rem, 1.5vw, 1.5rem); }
.capability { --card-color: #ef102b; display: flex; align-items: center; gap: clamp(.75rem, 1.2vw, 1.25rem); inline-size: 100%; min-inline-size: 0; padding: clamp(1rem, 1.4vw, 1.5rem); border: .0625rem solid #e2e9f1; border-inline-start: .25rem solid var(--card-color); border-radius: 1.25rem; background: #ffffffed; color: inherit; font: inherit; text-align: start; cursor: pointer; box-shadow: 0 .5rem 2rem #1c2e4208; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.capability.is-active { transform: translateY(-.25rem); border-color: var(--card-color); box-shadow: 0 .75rem 2rem #ef102b18; }
.capability:focus-visible, .capability-reset:focus-visible { outline: .1875rem solid #cd1821; outline-offset: .25rem; }
.capability-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 clamp(3rem, 4vw, 4.5rem); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--card-color) 9%, white); color: var(--card-color); }
.capability-icon svg { inline-size: 53%; block-size: 53%; fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.capability-copy { display: flex; flex-direction: column; gap: .375rem; min-inline-size: 0; }
.capability-number { color: var(--card-color); font-size: .875rem; }
.capability-copy strong { font-size: clamp(1.125rem, .7rem + .7vw, 1.5rem); letter-spacing: -.025em; }
.capability-copy > span:last-child { color: #697a92; font-size: clamp(.875rem, .65rem + .4vw, 1.1rem); line-height: 1.4; }
.capability--salud { --card-color: #08b88c; }
.capability--garantias { --card-color: #ef9b00; }
/* 3. Se permite superposición únicamente en la capa gráfica.
   Coordenadas porcentuales relativas a la captura completa, incluidos sus bordes. */
.dashboard-target { position: absolute; border: .125rem solid transparent; border-radius: .625rem; pointer-events: none; transition: border-color .2s, box-shadow .2s; }
[data-target="alertas"] { inset-inline-start: 21.5%; inset-block-start: 55.7%; inline-size: 49.3%; block-size: 33%; }
[data-target="salud"] { inset-inline-start: 71.8%; inset-block-start: 55.7%; inline-size: 25.7%; block-size: 33%; }
[data-target="garantias"] { inset-inline-start: 59.5%; inset-block-start: 36.5%; inline-size: 17.8%; block-size: 16%; }
.dashboard-target.is-active { border-color: var(--selection-color); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--selection-color) 10%, transparent); animation: target-pulse 1s ease-out; }
.capability-connectors { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.connector-path { fill: none; stroke: var(--selection-color); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
.connector-path.is-active { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease; }
.connector-dot { fill: var(--selection-color); stroke: #fff; stroke-width: 3; opacity: 0; }
.connector-dot.is-active { opacity: 1; }
@keyframes target-pulse { 0%,100% { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--selection-color) 10%, transparent); } 50% { box-shadow: 0 0 1.25rem .4rem color-mix(in srgb, var(--selection-color) 30%, transparent); } }
/* 4. Entradas progresivas: se habilitan únicamente con JavaScript. */
.distributor.has-motion .distributor-heading, .distributor.has-motion .dashboard-figure, .distributor.has-motion .capabilities-heading, .distributor.has-motion .capability { opacity: 0; }
.distributor.has-motion .distributor-heading { transform: translateY(1rem); }
.distributor.has-motion .dashboard-figure { transform: translateX(-1.5rem); }
.distributor.has-motion .capability { transform: translateX(1.5rem); }
.distributor.has-motion.is-visible .distributor-heading { animation: enter .65s ease both; }
.distributor.has-motion.is-visible .dashboard-figure { animation: enter .75s .12s ease both; }
.distributor.has-motion.is-visible .capabilities-heading { animation: enter .6s .2s ease both; }
.distributor.has-motion.is-visible .capability { animation: enter .6s ease both; animation-delay: calc(.25s + var(--step) * .12s); }
/* Se retira la animación de entrada al acabar para permitir el hover. */
.distributor.has-motion.is-settled .capability { animation: none; opacity: 1; transform: none; }
.distributor.has-motion.is-settled .capability.is-active { transform: translateY(-.25rem); }
@keyframes enter { to { opacity: 1; transform: none; } }
.capability-feedback { display: flex; justify-content: space-between; align-items: center; gap: 1rem; max-inline-size: 96rem; margin: 1.75rem auto 0; min-block-size: 3rem; color: #61718a; font-size: .9375rem; line-height: 1.5; }
.capability-feedback p { margin: 0; }
.capability-reset { flex: 0 0 auto; padding: .625rem 1rem; border: .0625rem solid #e6b5bd; border-radius: .5rem; background: #fff; color: #cd1821; font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
/* 5. Móvil: dashboard arriba; capacidades debajo, utilizables con toques.
   Los recorridos SVG se vuelven a medir al cambiar de tamaño. */
@media (max-width: 56rem) {
  .distributor-layout { flex-direction: column; align-items: stretch; gap: 2rem; }
  .distributor-panel, .capabilities { flex: 0 1 auto; inline-size: 100%; }
  .capability-list { flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .capability { flex: 1 1 16rem; }
  .capability-feedback { flex-direction: column; align-items: flex-start; }
}
.distributor-heading, .capability-copy, .capability-feedback { overflow-wrap: anywhere; }
/* Sin movimiento decorativo cuando el usuario lo solicita. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .distributor.has-motion .distributor-heading, .distributor.has-motion .dashboard-figure, .distributor.has-motion .capabilities-heading, .distributor.has-motion .capability { opacity: 1; transform: none; }
}