/* ==========================================================================
   Barra superior: logo del curso y atajos a las secciones.
   Va en su propio archivo y se carga después de estilos.css.
   Todos los valores vienen de css/tokens.css.
   ========================================================================== */

.barra {
  --foco: var(--color-foco-morado);
  background: var(--color-morado);
  color: var(--color-blanco);
  border-bottom: var(--borde-fino) solid var(--color-borde-morado);
}

.barra__fila {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: 80px;
}

.barra__logo { display: block; flex: none; line-height: 0; }
.barra__logo img { height: 52px; width: auto; }

/* En celular solo van el logo y el botón: los enlaces aparecen desde 1024 */
.barra__enlaces {
  display: none;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  gap: var(--e-6);
}
.barra__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: var(--area-tactil);
  color: var(--color-blanco);
  font-weight: var(--peso-fuerte);
  font-size: 0.9375rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-rapida) var(--ease);
}
.barra__enlaces a:hover { border-bottom-color: var(--color-amarillo); }

.barra__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--area-tactil);
  padding: var(--e-2) var(--e-5);
  background: var(--color-amarillo);
  color: var(--color-texto);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-stretch: 112%;
  text-decoration: none;
  border-radius: var(--radio);
  transition: background-color var(--dur-rapida) var(--ease);
}
.barra__cta:hover { background: var(--color-amarillo-hondo); color: var(--color-texto); }

/* La barra ya ocupa el aire de arriba: el hero arranca más cerca */
.hero { padding-top: var(--e-7); }

@media (min-width: 1024px) {
  .barra__fila { min-height: 96px; }
  .barra__logo img { height: 64px; }
  .barra__enlaces { display: flex; }
  .barra__cta { margin-left: var(--e-3); }
}

/* Un solo amarillo por pantalla: en la barra el botón va con borde y se
   rellena al pasar el mouse. El amarillo pleno queda para el botón del hero. */
.barra__cta {
  background: transparent;
  color: var(--color-blanco);
  border: 2px solid var(--color-amarillo);
}
.barra__cta:hover { background: var(--color-amarillo); color: var(--color-texto); }

/* --- Bloque de acción del hero: un globo de diálogo ------------------
   El estado, el botón y el enlace al plan viven dentro de la burbuja
   firma, con la colita hacia abajo. Reemplaza a la burbuja decorativa. */

.hero__accion {
  position: relative;
  padding: var(--e-5);
  background: var(--color-morado-hondo);
  border-radius: var(--radio-burbuja);
}
.hero__accion::after {
  content: "";
  position: absolute;
  left: 22%;
  bottom: calc(-1 * var(--e-6));
  width: var(--e-7);
  height: var(--e-6);
  background: var(--color-morado-hondo);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.hero__accion .boton--principal { width: 100%; padding-inline: var(--e-4); }

.hero__nota {
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  border-top: var(--borde-fino) solid var(--color-borde-morado);
}
.hero__nota span { display: block; }
.hero__nota a { font-weight: var(--peso-fuerte); }
.hero__nota a::after { content: " \2193"; }

@media (min-width: 1024px) {
  /* El globo arranca a la altura del titular para que entre en la primera pantalla */
  .hero__accion { grid-column: 8 / -1; align-self: start; margin-top: var(--e-3); padding: var(--e-6); }
}