/*
 * Página Organizaciones (B2B).
 * Valores tomados de los style inline del prototipo (Organizaciones.dc.html).
 */

/* ==========================================================================
   Variación por perfil
   ==========================================================================
   El selector cambia data-profile en <main> y de ahí cuelga todo lo que varía:
   qué panel del hero se ve, qué póster de la demo y el orden de las cinco
   secciones de features. Se imprime todo y se muestra lo que toca, de modo
   que cambiar de perfil no necesita repintar nada por JS. */

.exr-org-panel--prescripcion,
.exr-org-resumen {
  display: none;
}

.exr-org[data-profile='residencias'] .exr-org-panel--agregado,
.exr-org[data-profile='profesionales'] .exr-org-panel--agregado {
  display: none;
}

.exr-org[data-profile='residencias'] .exr-org-panel--prescripcion,
.exr-org[data-profile='profesionales'] .exr-org-panel--prescripcion,
.exr-org[data-profile='residencias'] .exr-org-resumen,
.exr-org[data-profile='profesionales'] .exr-org-resumen {
  display: block;
}

/* ==========================================================================
   Selector de perfil
   ========================================================================== */

.exr-org-selector {
  padding-block: clamp(24px, 3vw, 32px);
}

.exr-org-selector__eyebrow {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: 6px;
}

.exr-org-selector__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-body-lg);
  color: var(--navy);
  margin-bottom: 18px;
}

.exr-org-selector__tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.exr-org-tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  min-height: 44px;
  background: var(--surface-white);
  color: var(--navy);
  border: 1px solid var(--border-neutral);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.exr-org-tab[aria-pressed='true'] {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  font-weight: 700;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.exr-org-hero__inner {
  padding-block: clamp(40px, 8vw, 88px) clamp(32px, 5vw, 56px);
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: flex-start;
}

.exr-org-hero__copy {
  flex: 1 1 460px;
  min-width: min(300px, 100%);
}

.exr-org-hero__badge {
  letter-spacing: 0.06em;
}

/* Ojo: el H1 de esta página usa --fs-section-lg, no --fs-hero */
.exr-org-hero__title {
  font-size: var(--fs-section-lg);
  font-weight: 700;
  line-height: var(--lh-section);
  margin-bottom: 20px;
  max-width: 560px;
}

.exr-org-hero__lead {
  max-width: 520px;
  margin-bottom: 18px;
}

.exr-org-hero__lead--last {
  margin-bottom: 32px;
}

.exr-org-hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.exr-org-hero__panels {
  flex: 1 1 460px;
  min-width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-end;
}

.exr-org-hero__panels > * {
  width: 100%;
  max-width: 440px;
}

/* --- Panel: cabecera, badge y filas --- */

.exr-org-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Icono y título como un solo bloque: así envuelven juntos en vez de que el
   título salte de línea por su cuenta y estire la cabecera. */
.exr-org-panel__head-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exr-org-panel__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--coral);
}

.exr-org-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
}

.exr-org-panel__badge-wrap {
  margin-bottom: 22px;
}

/* Ojo: va `inline`, no `inline-block`. En el diseño el relleno vertical de esta
   píldora se desborda sin aportar altura a la caja; ponerla en inline-block la
   engorda 8px y descuadra el panel. Solo las variantes que el diseño marca
   explícitamente como inline-block la llevan. */
.exr-org-panel__badge {
  background: var(--bg-blush);
  color: var(--coral);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.exr-org-panel--prescripcion > .exr-org-panel__badge,
.exr-org-resumen .exr-org-panel__badge,
.exr-org-presc-stack__badge {
  display: inline-block;
}

.exr-org-panel--prescripcion > .exr-org-panel__badge {
  margin-bottom: 18px;
}

.exr-org-panel__rows {
  display: flex;
  flex-direction: column;
}

.exr-org-panel__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border-neutral);
}

.exr-org-panel__row-copy {
  min-width: 0;
  padding-top: 2px;
}

.exr-org-panel__row-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card-sm);
  color: var(--navy);
}

.exr-org-panel__row-desc {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-top: 4px;
}

/* --- Panel de prescripción --- */

.exr-org-presc {
  margin-bottom: 18px;
}

.exr-org-presc__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
  margin-bottom: 10px;
}

.exr-org-presc__pill {
  background: var(--coral);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-micro);
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  display: inline-block;
  margin-bottom: 16px;
}

.exr-org-presc__ejemplo {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 8px;
}

.exr-org-presc__box {
  background: var(--surface-white);
  border: 1px solid var(--coral-border-soft);
  border-radius: 16px;
  padding: 4px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}

.exr-org-presc__inner {
  background: var(--bg-page);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exr-org-presc__step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface-white);
  border-radius: 12px;
  padding: 14px;
  min-height: 56px;
}

.exr-org-presc__step-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--coral);
  position: relative;
}

.exr-org-presc__step-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
}

/* Los pasos se alternan: solo uno visible cada vez */
.exr-org-step-icon,
.exr-org-presc__step-label > span {
  display: none;
}

.exr-org-step-icon.is-active,
.exr-org-presc__step-label > span.is-active {
  display: inline-flex;
}

.exr-org-presc__nota {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.exr-org-presc__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 14px;
  color: var(--coral-border-soft);
}

.exr-org-presc__line {
  width: 0;
  height: 16px;
  border-left: 2px dashed var(--coral-border-soft);
}

/* --- Resultado de sesión --- */

.exr-org-result {
  background: var(--bg-page);
  border-radius: var(--radius-card);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}

.exr-org-result__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.exr-org-result__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card-sm);
  color: var(--navy);
}

.exr-org-result__head img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.exr-org-result__box {
  background: var(--surface-white);
  border-radius: 12px;
  padding: 14px;
  min-height: 56px;
  display: flex;
  align-items: center;
}

.exr-org-result__item {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.exr-org-result__item.is-active {
  display: flex;
}

.exr-org-result__left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--coral);
}

.exr-org-result__label {
  font-size: var(--fs-small);
  color: var(--navy);
  font-weight: 600;
}

.exr-org-result__label.is-strong {
  font-family: var(--font-display);
  font-weight: 700;
  overflow-wrap: break-word;
}

.exr-org-result__dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.exr-org-result__dot.is-coral {
  background: var(--coral);
  color: #fff;
}

.exr-org-result__dot.is-blush {
  background: var(--bg-blush);
  color: var(--coral);
}

.exr-org-result__badge {
  background: var(--bg-blush);
  color: var(--navy);
  font-weight: 600;
  font-size: var(--fs-micro);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.exr-org-result__valor {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-card);
  color: var(--navy);
}

/* --- Tarjeta resumen que acompaña al panel de prescripción --- */

.exr-org-resumen .exr-org-panel__badge {
  margin-bottom: 14px;
}

.exr-org-resumen__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
  margin-bottom: 10px;
}

.exr-org-resumen__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exr-org-resumen__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.exr-org-resumen__row .is-valor {
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   Demostración
   ========================================================================== */

.exr-org-demo__inner {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: center;
}

.exr-org-demo__copy {
  flex: 1 1 420px;
  min-width: min(300px, 100%);
}

.exr-org-demo__eyebrow {
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.exr-org-demo__title {
  max-width: 520px;
}

.exr-org-demo__lead {
  max-width: 480px;
  margin-bottom: 28px;
}

/* En columna desde que el póster lleva pie debajo. Con un solo hijo daba el
   mismo resultado que `row` + `justify-content:center`, así que el póster no
   se mueve: se midió antes y después. */
.exr-org-demo__media {
  flex: 1 1 420px;
  min-width: min(300px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* El pie se alinea con el borde izquierdo del póster, no con el centro. */
.exr-org-demo__media .exr-media-note {
  width: 100%;
  max-width: 480px;
}

.exr-org-demo__poster {
  position: relative;
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 0;
  border: 1px solid var(--coral-border-soft);
  border-radius: var(--radius-hero);
  overflow: hidden;
  box-shadow: var(--shadow-feature);
  cursor: pointer;
  background: none;
}

.exr-org-demo__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-blush);
}

.exr-org-demo__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* El póster senior solo se usa en residencias */
.exr-org-demo__img.is-senior {
  display: none;
}

.exr-org[data-profile='residencias'] .exr-org-demo__img.is-general {
  display: none;
}

.exr-org[data-profile='residencias'] .exr-org-demo__img.is-senior {
  display: block;
}

.exr-org-demo__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px rgba(7, 27, 58, 0.28);
  transition: transform 200ms ease;
}

.exr-org-demo__poster:hover .exr-org-demo__play {
  transform: translate(-50%, -50%) scale(1.05);
}

/* ==========================================================================
   Secciones de features y su reordenado
   ==========================================================================
   Contenedor flex en columna: el orden real lo fija `order`, igual que el
   prototipo. Cuatro perfiles x cinco secciones. */

.exr-org-features {
  display: flex;
  flex-direction: column;
}

.exr-org[data-profile='empresas'] .exr-org-feature--asignacion      { order: 1; }
.exr-org[data-profile='empresas'] .exr-org-feature--informes        { order: 2; }
.exr-org[data-profile='empresas'] .exr-org-feature--retos           { order: 3; }
.exr-org[data-profile='empresas'] .exr-org-feature--personalizacion { order: 4; }
.exr-org[data-profile='empresas'] .exr-org-feature--prescripcion    { order: 5; }

.exr-org[data-profile='residencias'] .exr-org-feature--prescripcion    { order: 1; }
.exr-org[data-profile='residencias'] .exr-org-feature--asignacion      { order: 2; }
.exr-org[data-profile='residencias'] .exr-org-feature--informes        { order: 3; }
.exr-org[data-profile='residencias'] .exr-org-feature--personalizacion { order: 4; }
.exr-org[data-profile='residencias'] .exr-org-feature--retos           { order: 5; }

.exr-org[data-profile='profesionales'] .exr-org-feature--prescripcion    { order: 1; }
.exr-org[data-profile='profesionales'] .exr-org-feature--asignacion      { order: 2; }
.exr-org[data-profile='profesionales'] .exr-org-feature--informes        { order: 3; }
.exr-org[data-profile='profesionales'] .exr-org-feature--retos           { order: 4; }
.exr-org[data-profile='profesionales'] .exr-org-feature--personalizacion { order: 5; }

.exr-org[data-profile='ciudades'] .exr-org-feature--informes        { order: 1; }
.exr-org[data-profile='ciudades'] .exr-org-feature--asignacion      { order: 2; }
.exr-org[data-profile='ciudades'] .exr-org-feature--retos           { order: 3; }
.exr-org[data-profile='ciudades'] .exr-org-feature--personalizacion { order: 4; }
.exr-org[data-profile='ciudades'] .exr-org-feature--prescripcion    { order: 5; }

.exr-org-feature__eyebrow {
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

/* Bloques centrados (asignación y prescripción) */
.exr-org-asignacion__inner,
.exr-org-centered {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}

.exr-org-asignacion__inner .exr-org-feature__eyebrow,
.exr-org-centered .exr-org-feature__eyebrow {
  margin-bottom: 12px;
}

.exr-org-asignacion__lead,
.exr-org-centered__lead {
  margin-bottom: 14px;
}

.exr-org-asignacion__lead--last {
  margin-bottom: 24px;
}

.exr-org-centered__lead--last {
  margin-bottom: 0;
}

/* La píldora de asignación va en blanco sobre fondo blush */
.exr-org-feature--asignacion .exr-pill-cta {
  background: var(--surface-white);
}

.exr-org-feature--asignacion .exr-pill-cta:hover {
  background: var(--bg-page);
}

/* Reparto a dos columnas, común a informes, retos y personalización */
.exr-org-split {
  display: flex;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
  align-items: center;
}

.exr-org-split__copy,
.exr-org-split__media {
  flex: 1 1 420px;
  min-width: min(300px, 100%);
}

.exr-org-split__media {
  display: flex;
  justify-content: center;
}

.exr-org-split__title {
  max-width: 520px;
}

.exr-org-split__lead {
  max-width: 520px;
  margin-bottom: 14px;
}

.exr-org-split__lead--last {
  margin-bottom: 0;
}

/* --- Tarjeta de informe --- */

.exr-org-informe {
  width: 100%;
  max-width: 400px;
  position: relative;
  padding-bottom: 14px;
}

/* Tarjeta desplazada que asoma por detrás */
.exr-org-informe__ghost {
  position: absolute;
  inset: 14px 0 0 14px;
  background: var(--surface-white);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-hero);
  z-index: 0;
}

.exr-org-informe__card {
  position: relative;
  z-index: 1;
}

.exr-org-informe__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.exr-org-informe__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
}

.exr-org-informe__subtitle {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-top: 2px;
}

.exr-org-informe__pdf {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-page);
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  flex: none;
}

.exr-org-informe__pdf span {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.02em;
}

.exr-org-informe__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.exr-org-informe__stat {
  background: var(--bg-page);
  border-radius: var(--radius-card);
  padding: 12px 8px;
  text-align: center;
}

.exr-org-informe__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-stat-sm);
  color: var(--navy);
  line-height: 1;
}

.exr-org-informe__stat-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.exr-org-informe__chart-wrap {
  margin-bottom: 18px;
}

.exr-org-informe__chart-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
  margin-bottom: 10px;
}

.exr-org-informe__chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 52px;
}

.exr-org-informe__bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--coral);
}

.exr-org-informe__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.exr-org-informe__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.exr-org-informe__row .is-valor {
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

.exr-org-informe__footer {
  padding-top: 14px;
  border-top: 1px solid var(--border-neutral);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --- Retos --- */

.exr-org-retos__title,
.exr-org-retos__lead {
  max-width: 500px;
}

.exr-org-retos__lead {
  margin-bottom: 14px;
}

.exr-org-retos__lead--last {
  margin-bottom: 24px;
}

.exr-org-retos__quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
  max-width: 440px;
}

.exr-org-retos__stack {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.exr-org-retos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.exr-org-retos__card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
}

.exr-org-retos__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-blush);
  color: var(--coral);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.exr-org-retos__subtitle {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  margin-bottom: 14px;
}

.exr-org-retos__bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-page);
  overflow: hidden;
  margin-bottom: 10px;
}

.exr-org-retos__bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--coral);
}

.exr-org-retos__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.exr-org-retos__meta .is-strong {
  font-weight: 600;
}

.exr-org-retos__connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 0;
  color: var(--coral-border-soft);
}

.exr-org-retos__line {
  width: 0;
  height: 20px;
  border-left: 2px dashed var(--coral-border-soft);
}

.exr-org-retos__rank-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card-sm);
  color: var(--navy);
}

.exr-org-retos__rank-sub {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.exr-org-rank {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.exr-org-rank__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.exr-org-rank__pos {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-blush);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-micro);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.exr-org-rank__pos.is-first {
  background: var(--coral);
  color: #fff;
}

.exr-org-rank__name {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-small);
  color: var(--navy);
  font-weight: 600;
  overflow-wrap: break-word;
}

.exr-org-rank__pts {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
  white-space: nowrap;
}

.exr-org-rank__note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-neutral);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.exr-org-retos__minijuego {
  margin-top: 16px;
  background: var(--surface-white);
  border: 1px solid var(--border-neutral);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.exr-org-retos__minijuego-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-blush);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.exr-org-retos__minijuego-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
}

.exr-org-retos__minijuego-desc {
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* --- Personalización de marca --- */

.exr-org-marca__copy {
  flex: 1 1 380px;
  min-width: min(300px, 100%);
}

.exr-org-marca__media {
  flex: 1 1 440px;
  min-width: min(300px, 100%);
}

.exr-org-marca__title,
.exr-org-marca__lead,
.exr-org-marca__nota {
  max-width: 480px;
}

.exr-org-marca__lead {
  margin-bottom: 14px;
}

.exr-org-marca__lead--last {
  margin-bottom: 20px;
}

.exr-org-marca__nota {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.exr-org-marca__viewer {
  cursor: zoom-in;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-hero);
  overflow: hidden;
  box-shadow: var(--shadow-feature);
  background: var(--bg-blush);
  padding: 0;
  border: none;
  display: block;
}

.exr-org-marca__viewer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 480ms ease;
}

.exr-org-marca__viewer img.is-active {
  opacity: 1;
}

/* Sin JS se ve el primer nivel */
.exr-org-marca__viewer:not([data-marca-ready]) img:first-child {
  opacity: 1;
}

.exr-org-marca__tabs {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.exr-org-marca__tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  background: var(--surface-white);
  color: var(--navy);
  border: 1px solid var(--border-neutral);
  min-height: 44px;
  transition: background 200ms ease, color 200ms ease;
}

.exr-org-marca__tab[aria-pressed='true'] {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
  font-weight: 700;
}

.exr-org-marca__info {
  margin-top: 16px;
}

.exr-org-marca__level {
  display: none;
}

.exr-org-marca__level.is-active {
  display: block;
}

.exr-org-marca__level h3 {
  font-size: var(--fs-card);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}

.exr-org-marca__level p {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.5;
  /* Reserva dos líneas para que no salte al cambiar de nivel */
  min-height: calc(var(--fs-small) * 1.5 * 2);
}

.exr-org-marca__pie {
  margin-top: 18px;
  background: var(--bg-blush);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}

.exr-org-marca__pie p {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.5;
}

/* --- Prescripción --- */

.exr-org-presc-stack {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.exr-org-presc-stack__badge {
  margin-bottom: 18px;
}

.exr-org-presc-stack__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.exr-org-presc-stack__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-card);
  color: var(--navy);
}

.exr-org-presc-stack__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.exr-org-presc-stack__stat {
  background: var(--bg-page);
  border-radius: var(--radius-card);
  padding: 14px 10px;
  text-align: center;
}

.exr-org-presc-stack__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-card);
  color: var(--navy);
}

.exr-org-presc-stack__stat-label {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  margin-top: 4px;
}

.exr-org-presc-stack__connector {
  padding: 16px 0;
}

.exr-org-presc-stack__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.exr-org-presc-stack__exercise {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg-page);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--navy);
}

.exr-org-presc-stack__cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.exr-org-presc-stack__cifra {
  background: var(--bg-page);
  border-radius: var(--radius-card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.exr-org-presc-stack__cifra-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exr-org-presc-stack__cifra-icon.is-perfectas {
  background: var(--coral);
  color: #fff;
}

.exr-org-presc-stack__cifra-icon.is-ayuda {
  background: var(--surface-white);
  border: 1px solid var(--coral-border-soft);
  color: var(--coral);
}

.exr-org-presc-stack__cifra-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-stat-lg);
  color: var(--navy);
  line-height: 1;
}

.exr-org-presc-stack__cifra-label {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* ==========================================================================
   CTA final
   ========================================================================== */

.exr-org-cta__container {
  padding-block: clamp(28px, 4vw, 40px);
}

.exr-org-cta__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
}

.exr-org-cta__copy {
  flex: 1 1 340px;
  min-width: min(260px, 100%);
}

.exr-org-cta__eyebrow {
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

.exr-org-cta__title {
  font-size: var(--fs-card-lg);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.exr-org-cta__lead {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 440px;
}

.exr-org-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-button);
  color: var(--coral);
}

.exr-org-cta__link:hover {
  text-decoration: underline;
}

.exr-org-cta__link span {
  display: inline-flex;
  transition: transform 200ms ease;
}

.exr-org-cta__link:hover span {
  transform: translateX(6px);
}

.exr-org-cta__media {
  flex: 0 1 220px;
  min-width: min(160px, 100%);
  display: flex;
  justify-content: center;
}

.exr-org-cta__media img {
  width: 100%;
  max-width: 220px;
  border-radius: var(--radius-card);
  display: block;
  object-fit: cover;
}

/* ==========================================================================
   Overlays propios de esta página
   ========================================================================== */

/* El vídeo de la demo es un solo elemento al que organizaciones.js le cambia
   la fuente según el perfil, así que aquí no hay nada que ocultar. El póster de
   la sección sí son dos imágenes, y eso se resuelve más arriba con data-profile. */

/* El modal de demo va en blanco, no en blush como los explicativos, y su
   relleno se queda en 44px en vez de los 48 de los demás. */
.exr-modal--form {
  background: var(--surface-white);
}

.exr-modal--form .exr-modal__body {
  padding: clamp(28px, 4vw, 44px);
}

/* Y su entradilla se pega 4px más al formulario que la de los otros modales:
   28px en vez de los 32 de la regla base. Es del prototipo, medido. */
.exr-modal--form .exr-modal__lead {
  margin-bottom: 28px;
}

.exr-modal__close--light {
  background: var(--bg-page);
}

.exr-modal__close--light:hover {
  background: var(--bg-blush);
}

.exr-modal__title--sm {
  font-size: 28px;
  max-width: 440px;
}

.exr-modal__actions {
  display: flex;
  justify-content: flex-end;
}

/* El formulario (.exr-form / .exr-field) vive en components.css: lo usan el
   modal de demo de esta página y la página de Contacto. */